@ai-table/grid 0.6.0 → 0.7.0

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Renderer2, Input, ChangeDetectorRef, ViewChild, model, untracked, Pipe, booleanAttribute, viewChild, ViewContainerRef, DestroyRef, Injectable, NgZone, afterNextRender } from '@angular/core';
+import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Renderer2, Input, ChangeDetectorRef, ViewChild, model, untracked, Pipe, booleanAttribute, viewChild, ViewContainerRef, linkedSignal, DestroyRef, Injectable, NgZone, afterNextRender } from '@angular/core';
 import Konva from 'konva';
 import { Shape } from 'konva/lib/Shape';
 import { Sprite } from 'konva/lib/shapes/Sprite';
@@ -195,7 +195,8 @@ function createListener(instance) {
 
 class KoShape {
     constructor() {
-        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
         this.koMouseover = new EventEmitter();
         this.koMousemove = new EventEmitter();
         this.koMouseout = new EventEmitter();
@@ -277,10 +278,10 @@ class KoShape {
     ngOnDestroy() {
         this._node?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoShape, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KoShape, isStandalone: true, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoShape, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: KoShape, isStandalone: true, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoShape, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoShape, decorators: [{
             type: Component,
             args: [{
                     selector: 'ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer',
@@ -328,15 +329,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }] } });
 
 class KoContainer extends KoShape {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: KoContainer, isStandalone: true, selector: "ko-layer, ko-fastlayer, ko-group", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: KoContainer, isStandalone: true, selector: "ko-layer, ko-fastlayer, ko-group", providers: [
             {
                 provide: KO_CONTAINER_TOKEN,
                 useExisting: KoContainer
             }
         ], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ko-layer, ko-fastlayer, ko-group',
@@ -353,7 +354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class KoStage {
     constructor() {
-        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
         this.koMouseover = new EventEmitter();
         this.koMousemove = new EventEmitter();
         this.koMouseout = new EventEmitter();
@@ -407,15 +409,15 @@ class KoStage {
     ngOnDestroy() {
         this._stage?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
             {
                 provide: KO_CONTAINER_TOKEN,
                 useExisting: KoStage
             }
         ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KoStage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KoStage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ko-stage',
@@ -1677,15 +1679,18 @@ class RendererContext {
 
 class AbstractEditCellEditor {
     constructor() {
-        this.recordHeight = input(AI_TABLE_RECORD_HEIGHT_LEVELS.low, ...(ngDevMode ? [{ debugName: "recordHeight" }] : /* istanbul ignore next */ []));
+        this.recordHeight = input(AI_TABLE_RECORD_HEIGHT_LEVELS.low, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordHeight" }] : /* istanbul ignore next */ []));
         this.autoFocus = input(true, { ...(ngDevMode ? { debugName: "autoFocus" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
         this.updateFieldValues = output();
         this.field = computed(() => {
             return this.aiTable.fieldsMap()[this.fieldId];
-        }, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
         this.record = computed(() => {
             return this.aiTable.recordsMap()[this.recordId];
-        }, ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
         this.elementRef = inject((ElementRef));
         this.thyPopoverRef = inject((ThyPopoverRef), { optional: true });
         this.render2 = inject(Renderer2);
@@ -1739,10 +1744,10 @@ class AbstractEditCellEditor {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'abstract-edit-cell',
@@ -1795,8 +1800,8 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
             this.closePopover();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: DateCellEditorComponent, isStandalone: true, selector: "date-cell-editor", host: { classAttribute: "date-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DateCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: DateCellEditorComponent, isStandalone: true, selector: "date-cell-editor", host: { classAttribute: "date-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
@@ -1814,7 +1819,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
         </thy-date-picker>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "ngmodule", type: ThyTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DateCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DateCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'date-cell-editor',
@@ -1851,7 +1856,8 @@ class LinkEditComponent {
         this.thyPopoverRef = thyPopoverRef;
         this.url = '';
         this.text = '';
-        this.aiTable = input(...(ngDevMode ? [undefined, { debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.aiTable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiTable" }] : /* istanbul ignore next */ []));
         this.confirm = new EventEmitter();
         this.i18nTexts = computed(() => {
             return {
@@ -1862,7 +1868,8 @@ class LinkEditComponent {
                 cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
                 apply: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.apply)
             };
-        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
         this.validatorConfig = computed(() => {
             return {
                 validationMessages: {
@@ -1871,7 +1878,8 @@ class LinkEditComponent {
                     }
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "validatorConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validatorConfig" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
     close() {
@@ -1892,12 +1900,12 @@ class LinkEditComponent {
         const link = url ? { text: text || url, url: url } : undefined;
         this.confirm.emit(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock", "thyDisabled"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LinkEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinkEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
+            args: [{ selector: 'link-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ThyPopoverRef }], propDecorators: { url: [{
                 type: Input
             }], text: [{
@@ -1918,7 +1926,8 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         this.isOpened = false;
         this.linkTooltip = computed(() => {
             return getI18nTextByKey(this.aiTable, AITableGridI18nKey.linkTooltip);
-        }, ...(ngDevMode ? [{ debugName: "linkTooltip" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkTooltip" }] : /* istanbul ignore next */ []));
     }
     isValidLink(link) {
         if (!link.text) {
@@ -1987,10 +1996,10 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyAppearance", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'link-cell-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -4177,7 +4186,8 @@ const isCellMatchKeywords = (aiTable, field, recordId, keywords, references) =>
 
 class AITableTextComponent {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         // @Output() koClick = new EventEmitter<KoEventObject<MouseEvent>>();
         this.koClick = output();
         this.koMouseMove = output();
@@ -4204,7 +4214,8 @@ class AITableTextComponent {
                 ...rest
             };
             return result;
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
     }
     onClick(e) {
         this.koClick.emit(e);
@@ -4212,10 +4223,10 @@ class AITableTextComponent {
     onMousemove(e) {
         this.koMouseMove.emit(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableTextComponent, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableTextComponent, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-text',
@@ -5247,17 +5258,20 @@ const drawer = new Drawer();
 
 class CoverCellBase {
     constructor() {
-        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
-        this.onlyDisplayBorder = input(false, ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : /* istanbul ignore next */ []));
+        this.config = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+        this.onlyDisplayBorder = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : /* istanbul ignore next */ []));
         this.isExpand = computed(() => {
             const { isExpand } = this.config();
             return isExpand;
-        }, ...(ngDevMode ? [{ debugName: "isExpand" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpand" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CoverCellBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: CoverCellBase, isStandalone: true, selector: "ai-table-cover-cell-base", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CoverCellBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CoverCellBase, isStandalone: true, selector: "ai-table-cover-cell-base", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CoverCellBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CoverCellBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cover-cell-base',
@@ -5270,9 +5284,12 @@ class AITableCellLink extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
-        this.render = computed(() => this.config()?.render, ...(ngDevMode ? [{ debugName: "render" }] : /* istanbul ignore next */ []));
-        this.transformValue = computed(() => this.render()?.transformValue, ...(ngDevMode ? [{ debugName: "transformValue" }] : /* istanbul ignore next */ []));
-        this.showLink = computed(() => !!this.transformValue()?.text, ...(ngDevMode ? [{ debugName: "showLink" }] : /* istanbul ignore next */ []));
+        this.render = computed(() => this.config()?.render, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "render" }] : /* istanbul ignore next */ []));
+        this.transformValue = computed(() => this.render()?.transformValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transformValue" }] : /* istanbul ignore next */ []));
+        this.showLink = computed(() => !!this.transformValue()?.text, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLink" }] : /* istanbul ignore next */ []));
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -5307,7 +5324,8 @@ class AITableCellLink extends CoverCellBase {
                 };
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.link; }
     linkClick(e) {
@@ -5327,14 +5345,14 @@ class AITableCellLink extends CoverCellBase {
         const curMousePosition = getMousePosition(aiTable, x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
         handleMouseStyle(AI_TABLE_FIELD_HEAD_MORE, curMousePosition.areaType, coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
         @if (showLink()) {
             <ai-table-text [config]="textConfig()!" (koClick)="linkClick($event)" (koMouseMove)="linkMouseMove($event)"></ai-table-text>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellLink, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-link',
@@ -5354,12 +5372,15 @@ class AITableActionIcon {
         this.onMousemove = output();
         this.onMouseenter = output();
         this.onMouseleave = output();
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.isHover = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
         this.groupConfig = computed(() => {
             const { x, y, listening } = this.config();
             return { x, y, listening };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
         this.squareShapeConfig = computed(() => {
             const { name, backgroundWidth, backgroundHeight, hoverFill: coverFill, size = DEFAULT_ICON_SIZE, strokeWidth = 1, cornerRadius, source } = this.config();
             return {
@@ -5372,7 +5393,8 @@ class AITableActionIcon {
                 cornerRadius,
                 source
             };
-        }, ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : /* istanbul ignore next */ []));
         this.iconGroupConfig = computed(() => {
             let { backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, scaleX, scaleY, offsetX, offsetY } = this.config();
             return {
@@ -5383,7 +5405,8 @@ class AITableActionIcon {
                 scaleX: scaleX || size / DEFAULT_ICON_SIZE,
                 scaleY: scaleY || size / DEFAULT_ICON_SIZE
             };
-        }, ...(ngDevMode ? [{ debugName: "iconGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconGroupConfig" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             let { type, data, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill, hoverFill: hoverFill, transformsEnabled = DEFAULT_TEXT_TRANSFORMS_ENABLED } = this.config();
             fill = fill || Colors.gray600;
@@ -5412,7 +5435,8 @@ class AITableActionIcon {
                 perfectDrawEnabled: false,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
     }
     koClick(e) {
         this.onClick.emit(e);
@@ -5432,8 +5456,8 @@ class AITableActionIcon {
         const { coordinate } = this.config();
         setMouseStyle('default', coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableActionIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableActionIcon, isStandalone: true, selector: "ai-table-action-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onMousemove: "onMousemove", onMouseenter: "onMouseenter", onMouseleave: "onMouseleave" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableActionIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableActionIcon, isStandalone: true, selector: "ai-table-action-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onMousemove: "onMousemove", onMouseenter: "onMouseenter", onMouseleave: "onMouseleave" }, ngImport: i0, template: `
         <ko-group
             [config]="groupConfig()"
             (koClick)="koClick($event)"
@@ -5448,7 +5472,7 @@ class AITableActionIcon {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableActionIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableActionIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-action-icon',
@@ -5720,7 +5744,8 @@ class AITableCellAttachment extends CoverCellBase {
                 });
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             const { coordinate, render, field, recordId, readonly } = this.config();
             const offsetX = render.columnWidth - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_ACTION_COMMON_RIGHT_PADDING;
@@ -5745,18 +5770,19 @@ class AITableCellAttachment extends CoverCellBase {
                 cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
                 listening: true
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.attachment; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
         @for (attachment of attachments(); track attachment.attachmentInfo._id) {
             <ko-image [config]="attachment"></ko-image>
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellAttachment, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellAttachment, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-attachments',
@@ -5800,7 +5826,8 @@ class AITableCellRichText extends CoverCellBase {
                 };
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             const { coordinate, render, field, recordId, readonly } = this.config();
             const offsetX = render.columnWidth - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_ACTION_COMMON_RIGHT_PADDING;
@@ -5825,18 +5852,19 @@ class AITableCellRichText extends CoverCellBase {
                 cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
                 listening: true
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.richText; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
         @if (textConfig()) {
             <ai-table-text [config]="textConfig()!"></ai-table-text>
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellRichText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellRichText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-rich-text',
@@ -7318,12 +7346,14 @@ const isHoverRecord = (isHover, targetName) => {
 
 class AITableIcon {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.koClick = output();
         this.groupConfig = computed(() => {
             const { x, y, listening } = this.config();
             return { x, y, listening };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
         this.squareShapeConfig = computed(() => {
             const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
             return {
@@ -7335,7 +7365,8 @@ class AITableIcon {
                 cornerRadius,
                 opacity
             };
-        }, ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = DEFAULT_TEXT_TRANSFORMS_ENABLED, disabled } = this.config();
             let pathData = data;
@@ -7368,17 +7399,18 @@ class AITableIcon {
                 perfectDrawEnabled: false,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick" }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()" (koClick)="koClick.emit($event)">
             <ko-rect [config]="squareShapeConfig()"></ko-rect>
             <ko-path [config]="iconConfig()"></ko-path>
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-icon',
@@ -7395,13 +7427,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableAddField {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         this.x = computed(() => {
             const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
             const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
             return lastColumnWidth + lastColumnOffset;
-        }, ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
         this.rectConfig = computed(() => {
             const { pointPosition: { targetName }, readonly, maxFields, aiTable } = this.config();
             const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
@@ -7426,7 +7460,8 @@ class AITableAddField {
                 listening: true,
                 fill
             };
-        }, ...(ngDevMode ? [{ debugName: "rectConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rectConfig" }] : /* istanbul ignore next */ []));
         this.addIconConfig = computed(() => {
             const { readonly, maxFields, aiTable } = this.config();
             const offsetY = (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ICON_COMMON_SIZE) / 2;
@@ -7439,10 +7474,11 @@ class AITableAddField {
                 visible: !readonly,
                 disabled: maxFields ? aiTable.fields().length >= maxFields : false
             };
-        }, ...(ngDevMode ? [{ debugName: "addIconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addIconConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group [config]="{ x: x() }">
             <ko-group>
                 <ko-rect [config]="rectConfig()"></ko-rect>
@@ -7455,7 +7491,7 @@ class AITableAddField {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableAddField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableAddField, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-add-field',
@@ -7478,7 +7514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableCells {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.cellsShapeConfig = computed(() => {
             const { coordinate, columnStartIndex } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -7491,12 +7528,13 @@ class AITableCells {
                     columnStartIndex: Math.max(columnStartIndex, frozenColumnCount)
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "cellsShapeConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellsShapeConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableCells, isStandalone: true, selector: "ai-table-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ko-shape [config]="cellsShapeConfig()"></ko-shape> `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableCells, isStandalone: true, selector: "ai-table-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ko-shape [config]="cellsShapeConfig()"></ko-shape> `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cells',
@@ -7508,7 +7546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFieldIcon {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             const { field, x, y, width, height, fill, path } = this.config();
             const data = getFieldIconPath(field) || path;
@@ -7521,12 +7560,13 @@ class AITableFieldIcon {
                 data,
                 fill
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableFieldIcon, isStandalone: true, selector: "ai-table-field-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ai-table-icon [config]="iconConfig()"></ai-table-icon> `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableFieldIcon, isStandalone: true, selector: "ai-table-field-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ai-table-icon [config]="iconConfig()"></ai-table-icon> `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-icon',
@@ -7538,7 +7578,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFieldHead {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
         this.textMeasure = TextMeasure();
         this.availableTextWidth = computed(() => {
@@ -7547,7 +7588,8 @@ class AITableFieldHead {
                 (iconVisible
                     ? 2 * (AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE)
                     : 2 * AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE));
-        }, ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : /* istanbul ignore next */ []));
         this.textData = computed(() => {
             const fieldName = this.config().field.name.replace(/\r|\n/g, ' ');
             this.textMeasure.setFont({ fontSize: DEFAULT_FONT_SIZE });
@@ -7557,13 +7599,15 @@ class AITableFieldHead {
                 height,
                 isOverflow
             };
-        }, ...(ngDevMode ? [{ debugName: "textData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textData" }] : /* istanbul ignore next */ []));
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
                 y: this.config().y
             };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
         this.bgConfig = computed(() => {
             const { field, width, height, stroke, isSelected, iconVisible, isFirstHead, showExpandIcon } = this.config();
             const shouldExtendLeft = isFirstHead && showExpandIcon && !isSelected;
@@ -7583,7 +7627,8 @@ class AITableFieldHead {
                 strokeWidth: 1,
                 opacity: 1
             };
-        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
         this.fieldIconConfig = computed(() => {
             const { field, height } = this.config();
             return {
@@ -7595,7 +7640,8 @@ class AITableFieldHead {
                 fill: Colors.gray600,
                 path: IconPathMap[field.icon]
             };
-        }, ...(ngDevMode ? [{ debugName: "fieldIconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldIconConfig" }] : /* istanbul ignore next */ []));
         this.textConfig = computed(() => {
             const { field, height } = this.config();
             return {
@@ -7606,7 +7652,8 @@ class AITableFieldHead {
                 text: field.name,
                 lineHeight: AI_TABLE_TEXT_LINE_HEIGHT
             };
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
         this.moreIconConfig = computed(() => {
             const { field, width, height, isHoverIcon, isSelected } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -7624,7 +7671,8 @@ class AITableFieldHead {
                 backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
                 cornerRadius: 4
             };
-        }, ...(ngDevMode ? [{ debugName: "moreIconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moreIconConfig" }] : /* istanbul ignore next */ []));
         this.fieldOpacityLineConfig = computed(() => {
             const { field, width, height } = this.config();
             return {
@@ -7638,10 +7686,11 @@ class AITableFieldHead {
                 stroke: Colors.transparent,
                 strokeWidth: 6
             };
-        }, ...(ngDevMode ? [{ debugName: "fieldOpacityLineConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldOpacityLineConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFieldHead, isStandalone: true, selector: "ai-table-field-head", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFieldHead, isStandalone: true, selector: "ai-table-field-head", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()">
             <ko-rect [config]="bgConfig()"></ko-rect>
             <ko-group>
@@ -7655,7 +7704,7 @@ class AITableFieldHead {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableFieldIcon, selector: "ai-table-field-icon", inputs: ["config"] }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldHead, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-head',
@@ -7679,7 +7728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFrozenCells {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.frozenCellsConfig = computed(() => {
             const { coordinate } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -7693,12 +7743,13 @@ class AITableFrozenCells {
                     columnStopIndex: frozenColumnCount - 1
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "frozenCellsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenCellsConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableFrozenCells, isStandalone: true, selector: "ai-table-frozen-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-shape [config]="frozenCellsConfig()"></ko-shape>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableFrozenCells, isStandalone: true, selector: "ai-table-frozen-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-shape [config]="frozenCellsConfig()"></ko-shape>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-cells',
@@ -7762,31 +7813,37 @@ const createColumnHeads = (config) => {
 
 class AITableFrozenColumnHeads {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.textMeasure = TextMeasure();
-        this.emptyRecordsSelectAllStatus = signal(AITableSelectAllState.none, ...(ngDevMode ? [{ debugName: "emptyRecordsSelectAllStatus" }] : /* istanbul ignore next */ []));
+        this.emptyRecordsSelectAllStatus = signal(AITableSelectAllState.none, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyRecordsSelectAllStatus" }] : /* istanbul ignore next */ []));
         this.coordinate = computed(() => {
             const config = this.config();
             if (!config)
                 return null;
             return config.coordinate;
-        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
         this.hiddenIndexColumn = computed(() => {
             const context = this.context();
             if (!context)
                 return false;
             return context?.aiFieldConfig()?.hiddenIndexColumn;
-        }, ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : /* istanbul ignore next */ []));
         this.context = computed(() => {
             const config = this.config();
             if (!config)
                 return null;
             return config?.aiTable.context;
-        }, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => {
             const context = this.context();
             return !!context?.readonly?.();
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.isChecked = computed(() => {
             const config = this.config();
             if (!config) {
@@ -7802,14 +7859,16 @@ class AITableFrozenColumnHeads {
                     ? AITableSelectAllState.none
                     : AITableSelectAllState.partial;
             return selectedAllState === AITableSelectAllState.all;
-        }, ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
         this.fieldHeadHeight = computed(() => {
             const coord = this.coordinate();
             if (!coord)
                 return 0;
             // return coord.rowInitSize;
             return AI_TABLE_FIELD_HEAD_HEIGHT;
-        }, ...(ngDevMode ? [{ debugName: "fieldHeadHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldHeadHeight" }] : /* istanbul ignore next */ []));
         this.headConfigs = computed(() => {
             const coord = this.coordinate();
             if (!coord)
@@ -7819,7 +7878,8 @@ class AITableFrozenColumnHeads {
                 columnStartIndex: 0,
                 columnStopIndex: coord.frozenColumnCount - 1
             });
-        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
         this.dragHeadBgConfig = computed(() => {
             return {
                 x: AI_TABLE_OFFSET,
@@ -7829,7 +7889,8 @@ class AITableFrozenColumnHeads {
                 fill: Colors.white,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "dragHeadBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragHeadBgConfig" }] : /* istanbul ignore next */ []));
         this.numberHeadBgConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -7842,7 +7903,8 @@ class AITableFrozenColumnHeads {
                 fill: Colors.white,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "numberHeadBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberHeadBgConfig" }] : /* istanbul ignore next */ []));
         this.topLineConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -7855,7 +7917,8 @@ class AITableFrozenColumnHeads {
                 strokeWidth: 1,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "topLineConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "topLineConfig" }] : /* istanbul ignore next */ []));
         this.bottomLineConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -7868,7 +7931,8 @@ class AITableFrozenColumnHeads {
                 strokeWidth: 1,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "bottomLineConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bottomLineConfig" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             return {
                 name: AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX,
@@ -7879,7 +7943,8 @@ class AITableFrozenColumnHeads {
                     ? Colors.primary
                     : Colors.gray300
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
         this.textConfig = computed(() => {
             const text = AI_TABLE_INDEX_FIELD_TEXT;
             const lineHeight = AI_TABLE_TEXT_LINE_HEIGHT;
@@ -7892,7 +7957,8 @@ class AITableFrozenColumnHeads {
                 text,
                 lineHeight
             };
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
         this.headBgConfig = computed(() => {
             const coord = this.coordinate();
             const ctx = this.context();
@@ -7909,7 +7975,8 @@ class AITableFrozenColumnHeads {
                 listening: false,
                 zIndex: 10
             };
-        }, ...(ngDevMode ? [{ debugName: "headBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headBgConfig" }] : /* istanbul ignore next */ []));
         this.cellLinesConfig = computed(() => {
             const coord = this.coordinate();
             const ctx = this.context();
@@ -7971,15 +8038,16 @@ class AITableFrozenColumnHeads {
                 });
             }
             return lines;
-        }, ...(ngDevMode ? [{ debugName: "cellLinesConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellLinesConfig" }] : /* istanbul ignore next */ []));
     }
     selectAllClick(e) {
         if (this.config()?.aiTable?.records().length === 0) {
             this.emptyRecordsSelectAllStatus.set(this.emptyRecordsSelectAllStatus() === AITableSelectAllState.all ? AITableSelectAllState.none : AITableSelectAllState.all);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @if (!hiddenIndexColumn()) {
             <ko-group>
                 @if (!readonly()) {
@@ -7998,7 +8066,7 @@ class AITableFrozenColumnHeads {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableFieldHead, selector: "ai-table-field-head", inputs: ["config"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenColumnHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenColumnHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-column-heads',
@@ -8027,7 +8095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFrozenPlaceholderCells {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.frozenPlaceHolderCellsConfig = computed(() => {
             const { coordinate } = this.config();
             return getPlaceHolderCellsConfigs({
@@ -8035,16 +8104,17 @@ class AITableFrozenPlaceholderCells {
                 columnStartIndex: 0,
                 columnStopIndex: coordinate.frozenColumnCount - 1
             });
-        }, ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenPlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFrozenPlaceholderCells, isStandalone: true, selector: "ai-table-frozen-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenPlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFrozenPlaceholderCells, isStandalone: true, selector: "ai-table-frozen-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (item of frozenPlaceHolderCellsConfig(); track $index) {
             <ko-rect [config]="item"></ko-rect>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenPlaceholderCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenPlaceholderCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-placeholder-cells',
@@ -8060,7 +8130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableColumnHeads {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.headConfigs = computed(() => {
             const { coordinate, columnStartIndex } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -8068,16 +8139,17 @@ class AITableColumnHeads {
                 ...this.config(),
                 columnStartIndex: Math.max(columnStartIndex, frozenColumnCount)
             });
-        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableColumnHeads, isStandalone: true, selector: "ai-table-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableColumnHeads, isStandalone: true, selector: "ai-table-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of headConfigs(); track $index) {
             <ai-table-field-head [config]="config"></ai-table-field-head>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldHead, selector: "ai-table-field-head", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableColumnHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableColumnHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-column-heads',
@@ -8093,19 +8165,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableHoverRowHeads {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.pointPosition = computed(() => {
             return this.config().aiTable.context.pointPosition();
-        }, ...(ngDevMode ? [{ debugName: "pointPosition" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointPosition" }] : /* istanbul ignore next */ []));
         this.headConfigs = computed(() => {
             return this.createHoverRowHeads(this.pointPosition());
-        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headConfigs" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => {
             return this.config().readonly;
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.hiddenRowDrag = computed(() => {
             return this.config()?.aiTable.context?.aiFieldConfig()?.hiddenRowDrag;
-        }, ...(ngDevMode ? [{ debugName: "hiddenRowDrag" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenRowDrag" }] : /* istanbul ignore next */ []));
         this.createHoverRowHeads = (pointPosition) => {
             const { coordinate, rowStartIndex, rowStopIndex, aiTable } = this.config();
             const context = aiTable.context;
@@ -8175,8 +8252,8 @@ class AITableHoverRowHeads {
             return headConfigs;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableHoverRowHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableHoverRowHeads, isStandalone: true, selector: "ai-table-hover-row-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableHoverRowHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableHoverRowHeads, isStandalone: true, selector: "ai-table-hover-row-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of headConfigs(); track config.recordId) {
             <ko-group [config]="{ x: 0, y: config.y, name: 'hover-heads' }">
                 @if (config.bgConfig) {
@@ -8192,7 +8269,7 @@ class AITableHoverRowHeads {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableHoverRowHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableHoverRowHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-hover-row-heads',
@@ -8218,11 +8295,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableOtherRows {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.AITableRowType = AITableRowType;
         this.otherConfigs = computed(() => {
             return this.createOtherRows(this.config());
-        }, ...(ngDevMode ? [{ debugName: "otherConfigs" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "otherConfigs" }] : /* istanbul ignore next */ []));
         this.createOtherRows = (config) => {
             const { coordinate, rowStartIndex, rowStopIndex, aiTable, maxRecords } = config;
             const otherRowConfigs = [];
@@ -8255,8 +8334,8 @@ class AITableOtherRows {
             return otherRowConfigs;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableOtherRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableOtherRows, isStandalone: true, selector: "ai-table-other-rows", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableOtherRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableOtherRows, isStandalone: true, selector: "ai-table-other-rows", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of otherConfigs(); track $index) {
             @switch (config.type) {
                 @case (AITableRowType.add) {
@@ -8266,7 +8345,7 @@ class AITableOtherRows {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableOtherRows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableOtherRows, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-other-rows',
@@ -8286,19 +8365,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITablePlaceholderCells {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.frozenPlaceHolderCellsConfig = computed(() => {
             return getPlaceHolderCellsConfigs(this.config());
-        }, ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITablePlaceholderCells, isStandalone: true, selector: "ai-table-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITablePlaceholderCells, isStandalone: true, selector: "ai-table-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (item of frozenPlaceHolderCellsConfig(); track $index) {
             <ko-rect [config]="item"></ko-rect>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-placeholder-cells',
@@ -8314,7 +8395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableExpandRecord {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.backgroundConfig = computed(() => {
             const { coordinate, aiTable } = this.config();
             const context = aiTable.context;
@@ -8340,7 +8422,8 @@ class AITableExpandRecord {
                 hoverFill: Colors.transparent,
                 listening: true
             };
-        }, ...(ngDevMode ? [{ debugName: "backgroundConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backgroundConfig" }] : /* istanbul ignore next */ []));
         this.shouldShowIcon = computed(() => {
             const { aiTable, rowStartIndex, rowStopIndex } = this.config();
             const context = aiTable.context;
@@ -8351,7 +8434,8 @@ class AITableExpandRecord {
             const { rowIndex: pointRowIndex } = context.pointPosition();
             const row = context.linearRows()[pointRowIndex];
             return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
-        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : /* istanbul ignore next */ []));
         this.expandIconConfig = computed(() => {
             const { coordinate, aiTable } = this.config();
             const context = aiTable.context;
@@ -8377,10 +8461,11 @@ class AITableExpandRecord {
                 cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
                 listening: true
             };
-        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group>
             @if (shouldShowIcon()) {
                 <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
@@ -8388,7 +8473,7 @@ class AITableExpandRecord {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableExpandRecord, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableExpandRecord, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-expand-record',
@@ -8406,8 +8491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableBackground {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-        this.isActive = input(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.isActive = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
         this.koClick = output();
         this.hover = output();
         this.koMouseenter = output();
@@ -8415,14 +8502,17 @@ class AITableBackground {
         this.groupConfig = computed(() => {
             const { x, y } = this.config();
             return { x, y, listening: false };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
-        this.isHover = model(false, ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        this.isHover = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
         this.isShowSpecialBorderConfig = computed(() => {
             const { borders } = this.config();
             const stroke = this.stroke();
             const strokeWidth = this.strokeWidth();
             return borders && stroke && strokeWidth && ___default.some(borders, (item) => !item) && ___default.some(borders, (item) => !!item);
-        }, ...(ngDevMode ? [{ debugName: "isShowSpecialBorderConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isShowSpecialBorderConfig" }] : /* istanbul ignore next */ []));
         this.borderLinesConfig = computed(() => {
             const { borders, height, width } = this.config();
             const stroke = this.stroke();
@@ -8470,21 +8560,25 @@ class AITableBackground {
                 });
             }
             return result;
-        }, ...(ngDevMode ? [{ debugName: "borderLinesConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "borderLinesConfig" }] : /* istanbul ignore next */ []));
         this.stroke = computed(() => {
             const { stroke, hoverStroke } = this.config();
             const active = this.isHover() || this.isActive();
             return active ? hoverStroke || stroke : stroke;
-        }, ...(ngDevMode ? [{ debugName: "stroke" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stroke" }] : /* istanbul ignore next */ []));
         this.strokeWidth = computed(() => {
             const { strokeWidth, hoverStrokeWidth } = this.config();
             const active = this.isHover() || this.isActive();
             return active ? hoverStrokeWidth || strokeWidth : strokeWidth;
-        }, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
         this.containerConfig = computed(() => {
             const { x, y } = this.config();
             return { x, y };
-        }, ...(ngDevMode ? [{ debugName: "containerConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerConfig" }] : /* istanbul ignore next */ []));
         this.bgConfig = computed(() => {
             const { name, width, height, fill = Colors.transparent, opacity, hoverFill, hoverOpacity, listening, borders } = this.config();
             const [top, right, bottom, left] = borders || [false, false, false, false];
@@ -8505,7 +8599,8 @@ class AITableBackground {
                 result.strokeWidth = this.strokeWidth();
             }
             return result;
-        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
     }
     onClick(e) {
         this.koClick.emit(e);
@@ -8527,8 +8622,8 @@ class AITableBackground {
         this.koMouseleave.emit(e);
         this.hover.emit(this.isHover());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableBackground, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableBackground, isStandalone: true, selector: "ai-table-background", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koClick: "koClick", hover: "hover", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", isHover: "isHoverChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableBackground, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableBackground, isStandalone: true, selector: "ai-table-background", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koClick: "koClick", hover: "hover", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", isHover: "isHoverChange" }, ngImport: i0, template: `
         <ko-group [config]="containerConfig()">
             <ko-group>
                 <ko-rect
@@ -8547,7 +8642,7 @@ class AITableBackground {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableBackground, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableBackground, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-background',
@@ -8576,7 +8671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableShadow {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.shadowConfig = computed(() => {
             const { visible, x, y, width = AI_TABLE_SHADOW_DEFAULT_WIDTH, height } = this.config();
             return {
@@ -8589,12 +8685,13 @@ class AITableShadow {
                 fillLinearGradientEndPoint: { x: width, y: 0 },
                 fillLinearGradientColorStops: [0, 'rgba(0,0,0,0.05)', 1, Colors.transparent]
             };
-        }, ...(ngDevMode ? [{ debugName: "shadowConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shadowConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableShadow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableShadow, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-shadow',
@@ -8606,16 +8703,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableScrollableGroup {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-        this.contentTemplate = input.required(...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
-        this.parentContainer = input(...(ngDevMode ? [undefined, { debugName: "parentContainer" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.parentContainer = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "parentContainer" }] : /* istanbul ignore next */ []));
         this.scrollPosition = output();
-        this.displayScrollbarTime = signal(null, ...(ngDevMode ? [{ debugName: "displayScrollbarTime" }] : /* istanbul ignore next */ []));
-        this.hiddenScrollbar = signal(true, ...(ngDevMode ? [{ debugName: "hiddenScrollbar" }] : /* istanbul ignore next */ []));
-        this.isHoverScrollbar = signal(false, ...(ngDevMode ? [{ debugName: "isHoverScrollbar" }] : /* istanbul ignore next */ []));
+        this.displayScrollbarTime = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayScrollbarTime" }] : /* istanbul ignore next */ []));
+        this.hiddenScrollbar = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenScrollbar" }] : /* istanbul ignore next */ []));
+        this.isHoverScrollbar = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHoverScrollbar" }] : /* istanbul ignore next */ []));
         // 滚动位置信号
-        this.scrollX = signal(0, ...(ngDevMode ? [{ debugName: "scrollX" }] : /* istanbul ignore next */ []));
-        this.scrollY = signal(0, ...(ngDevMode ? [{ debugName: "scrollY" }] : /* istanbul ignore next */ []));
+        this.scrollX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollX" }] : /* istanbul ignore next */ []));
+        this.scrollY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollY" }] : /* istanbul ignore next */ []));
         // 容器配置
         this.containerConfig = computed(() => {
             const { x = 0, y = 0, width, height } = this.config();
@@ -8632,7 +8737,8 @@ class AITableScrollableGroup {
                 clipHeight: height,
                 name: 'scrollable-group'
             };
-        }, ...(ngDevMode ? [{ debugName: "containerConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerConfig" }] : /* istanbul ignore next */ []));
         this.bgConfig = computed(() => {
             const { x = 0, y = 0, width, height, bgName } = this.config();
             const config = {
@@ -8647,7 +8753,8 @@ class AITableScrollableGroup {
                 config.name = bgName;
             }
             return config;
-        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
         // 内容区域配置
         this.contentConfig = computed(() => {
             if (this.config().contentNotScrollbar) {
@@ -8660,17 +8767,20 @@ class AITableScrollableGroup {
                 offsetX: this.scrollX(),
                 offsetY: this.scrollY()
             };
-        }, ...(ngDevMode ? [{ debugName: "contentConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentConfig" }] : /* istanbul ignore next */ []));
         // 是否显示竖向滚动条
         this.showVerticalScrollbar = computed(() => {
             const { height, contentHeight, verticalScrollbar } = this.config();
             return verticalScrollbar && contentHeight > height;
-        }, ...(ngDevMode ? [{ debugName: "showVerticalScrollbar" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showVerticalScrollbar" }] : /* istanbul ignore next */ []));
         // 是否显示横向滚动条
         this.showHorizontalScrollbar = computed(() => {
             const { width, contentWidth, horizontalScrollbar } = this.config();
             return horizontalScrollbar && contentWidth > width;
-        }, ...(ngDevMode ? [{ debugName: "showHorizontalScrollbar" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHorizontalScrollbar" }] : /* istanbul ignore next */ []));
         // 竖向滚动条配置
         this.verticalScrollbarConfig = computed(() => {
             const { width, scrollbarSize = 12 } = this.config();
@@ -8680,7 +8790,8 @@ class AITableScrollableGroup {
                 width: scrollbarSize,
                 height: this.verticalScrollbarHeight()
             };
-        }, ...(ngDevMode ? [{ debugName: "verticalScrollbarConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalScrollbarConfig" }] : /* istanbul ignore next */ []));
         // 横向滚动条配置
         this.horizontalScrollbarConfig = computed(() => {
             const { height, scrollbarSize = 12 } = this.config();
@@ -8690,7 +8801,8 @@ class AITableScrollableGroup {
                 width: this.horizontalScrollbarHeight(),
                 height: scrollbarSize
             };
-        }, ...(ngDevMode ? [{ debugName: "horizontalScrollbarConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalScrollbarConfig" }] : /* istanbul ignore next */ []));
         // 竖向滚动条轨道配置
         this.verticalTrackConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarTrackColor, height } = this.config();
@@ -8702,7 +8814,8 @@ class AITableScrollableGroup {
                 fill: scrollbarTrackColor,
                 cornerRadius: 2
             };
-        }, ...(ngDevMode ? [{ debugName: "verticalTrackConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalTrackConfig" }] : /* istanbul ignore next */ []));
         // 横向滚动条轨道配置
         this.horizontalTrackConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarTrackColor } = this.config();
@@ -8714,40 +8827,47 @@ class AITableScrollableGroup {
                 fill: scrollbarTrackColor,
                 cornerRadius: 2
             };
-        }, ...(ngDevMode ? [{ debugName: "horizontalTrackConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalTrackConfig" }] : /* istanbul ignore next */ []));
         this.verticalThumbMinY = computed(() => {
             const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
             return getAbsolutePositionY;
-        }, ...(ngDevMode ? [{ debugName: "verticalThumbMinY" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalThumbMinY" }] : /* istanbul ignore next */ []));
         // 垂直滚动条滑块的最大Y坐标
         this.verticalThumbMaxY = computed(() => {
             const { height, contentHeight } = this.config();
             const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
             return getAbsolutePositionY + height - this.verticalThumbHeight();
-        }, ...(ngDevMode ? [{ debugName: "verticalThumbMaxY" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalThumbMaxY" }] : /* istanbul ignore next */ []));
         // 横向滚动条滑块的最小X坐标
         this.horizontalThumbMinX = computed(() => {
             const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
             return getAbsolutePositionX;
-        }, ...(ngDevMode ? [{ debugName: "horizontalThumbMinX" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalThumbMinX" }] : /* istanbul ignore next */ []));
         // 横向滚动条滑块的最大X坐标
         this.horizontalThumbMaxX = computed(() => {
             const { width } = this.config();
             const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
             return getAbsolutePositionX + width - this.horizontalThumbWidth();
-        }, ...(ngDevMode ? [{ debugName: "horizontalThumbMaxX" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalThumbMaxX" }] : /* istanbul ignore next */ []));
         // 竖向滚动条滑块高度
         this.verticalThumbHeight = computed(() => {
             const { height, contentHeight } = this.config();
             const thumbHeight = Math.max(20, (height / contentHeight) * this.verticalScrollbarHeight());
             return thumbHeight;
-        }, ...(ngDevMode ? [{ debugName: "verticalThumbHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalThumbHeight" }] : /* istanbul ignore next */ []));
         // 横向滚动条滑块宽度
         this.horizontalThumbWidth = computed(() => {
             const { width, contentWidth } = this.config();
             const thumbWidth = Math.max(20, (width / contentWidth) * this.horizontalScrollbarHeight());
             return thumbWidth;
-        }, ...(ngDevMode ? [{ debugName: "horizontalThumbWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalThumbWidth" }] : /* istanbul ignore next */ []));
         // 竖向滚动条滑块配置
         this.verticalConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
@@ -8779,7 +8899,8 @@ class AITableScrollableGroup {
                     };
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "verticalConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalConfig" }] : /* istanbul ignore next */ []));
         // 横向滚动条滑块配置
         this.horizontalThumbConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
@@ -8811,17 +8932,20 @@ class AITableScrollableGroup {
                     };
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "horizontalThumbConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalThumbConfig" }] : /* istanbul ignore next */ []));
         // 横向滚动条滑块配置
         this.verticalScrollbarHeight = computed(() => {
             const { height } = this.config();
             return height;
-        }, ...(ngDevMode ? [{ debugName: "verticalScrollbarHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalScrollbarHeight" }] : /* istanbul ignore next */ []));
         // 获取横向滚动条宽度
         this.horizontalScrollbarHeight = computed(() => {
             const { width } = this.config();
             return width;
-        }, ...(ngDevMode ? [{ debugName: "horizontalScrollbarHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalScrollbarHeight" }] : /* istanbul ignore next */ []));
         // 滚动条延迟隐藏
         effect(() => {
             const displayScrollbarTime = this.displayScrollbarTime();
@@ -8943,8 +9067,8 @@ class AITableScrollableGroup {
         const { width, contentWidth } = this.config();
         this.scrollX.set(Math.max(0, contentWidth - width));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableScrollableGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableScrollableGroup, isStandalone: true, selector: "ai-table-scrollable-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null }, parentContainer: { classPropertyName: "parentContainer", publicName: "parentContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollPosition: "scrollPosition" }, viewQueries: [{ propertyName: "verticalTrack", first: true, predicate: ["verticalTrack"], descendants: true }, { propertyName: "verticalThumb", first: true, predicate: ["verticalThumb"], descendants: true }, { propertyName: "horizontalTrack", first: true, predicate: ["horizontalTrack"], descendants: true }, { propertyName: "contentGroup", first: true, predicate: ["contentGroup"], descendants: true }, { propertyName: "rootGroup", first: true, predicate: ["rootGroup"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableScrollableGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableScrollableGroup, isStandalone: true, selector: "ai-table-scrollable-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null }, parentContainer: { classPropertyName: "parentContainer", publicName: "parentContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollPosition: "scrollPosition" }, viewQueries: [{ propertyName: "verticalTrack", first: true, predicate: ["verticalTrack"], descendants: true }, { propertyName: "verticalThumb", first: true, predicate: ["verticalThumb"], descendants: true }, { propertyName: "horizontalTrack", first: true, predicate: ["horizontalTrack"], descendants: true }, { propertyName: "contentGroup", first: true, predicate: ["contentGroup"], descendants: true }, { propertyName: "rootGroup", first: true, predicate: ["rootGroup"], descendants: true }], ngImport: i0, template: `
         <ko-group #rootGroup [config]="containerConfig()" (koWheel)="stageWheel($event)">
             <ko-group>
                 <ko-rect [config]="bgConfig()"></ko-rect>
@@ -8992,7 +9116,7 @@ class AITableScrollableGroup {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableScrollableGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableScrollableGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-scrollable-group',
@@ -9180,11 +9304,15 @@ const createGroupFieldStats = (config) => {
 class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
-        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
-        this.statMenus = input.required(...(ngDevMode ? [{ debugName: "statMenus" }] : /* istanbul ignore next */ []));
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.aiTable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.statMenus = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statMenus" }] : /* istanbul ignore next */ []));
         this.menuClick = output();
-        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None, ...(ngDevMode ? [{ debugName: "selectStatType" }] : /* istanbul ignore next */ []));
+        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectStatType" }] : /* istanbul ignore next */ []));
     }
     execute(menu) {
         this.menuClick.emit({
@@ -9192,10 +9320,10 @@ class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
             field: this.field()
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-stat-type-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'stat-type-menu'
@@ -9205,28 +9333,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class AITableFieldStat {
     constructor() {
         this.thyPopover = inject(ThyPopover);
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.hover = output();
-        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
-        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
+        this.isActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.isHover = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
         this.isShowSelectedCount = false;
         this.availableTextWidth = computed(() => {
             const { width } = this.config();
             return width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING;
-        }, ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : /* istanbul ignore next */ []));
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
                 y: this.config().y
             };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
         this.isGroupStat = computed(() => {
             return this.config().isGroupStat;
-        }, ...(ngDevMode ? [{ debugName: "isGroupStat" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isGroupStat" }] : /* istanbul ignore next */ []));
         this.groupStatContainerWidthMap = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.groupStatContainerWidthMap();
-        }, ...(ngDevMode ? [{ debugName: "groupStatContainerWidthMap" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupStatContainerWidthMap" }] : /* istanbul ignore next */ []));
         this.bgConfig = computed(() => {
             const { field, width, height, coordinate, readonly, aiTable, isGroupStat, columnIndex, groupRow } = this.config();
             const rowHeadWidth = aiTable.context.rowHeadWidth();
@@ -9289,21 +9424,27 @@ class AITableFieldStat {
                 }
             }
             return config;
-        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bgConfig" }] : /* istanbul ignore next */ []));
         this.field = computed(() => {
             const { field } = this.config();
             return field;
-        }, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
         this.linearRows = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.linearRows();
-        }, ...(ngDevMode ? [{ debugName: "linearRows" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linearRows" }] : /* istanbul ignore next */ []));
         this.recordsMap = computed(() => {
             const { aiTable } = this.config();
             return aiTable.recordsMap();
-        }, ...(ngDevMode ? [{ debugName: "recordsMap" }] : /* istanbul ignore next */ []));
-        this.groupRow = computed(() => this.config().groupRow, ...(ngDevMode ? [{ debugName: "groupRow" }] : /* istanbul ignore next */ []));
-        this.gridData = computed(() => this.config().aiTable.gridData(), ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordsMap" }] : /* istanbul ignore next */ []));
+        this.groupRow = computed(() => this.config().groupRow, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRow" }] : /* istanbul ignore next */ []));
+        this.gridData = computed(() => this.config().aiTable.gridData(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
         this.records = computed(() => {
             let records = [];
             const groupRow = this.groupRow();
@@ -9316,15 +9457,18 @@ class AITableFieldStat {
                 records = this.gridData().records;
             }
             return records;
-        }, ...(ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []));
         this.aiFieldConfig = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.aiFieldConfig;
-        }, ...(ngDevMode ? [{ debugName: "aiFieldConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiFieldConfig" }] : /* istanbul ignore next */ []));
         this.aiTable = computed(() => {
             const { aiTable } = this.config();
             return aiTable;
-        }, ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
         this.options = computed(() => {
             const aiTable = this.aiTable();
             return {
@@ -9335,18 +9479,22 @@ class AITableFieldStat {
                     return AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.isActiveOrHover = computed(() => {
             return this.isActive() || this.isHover();
-        }, ...(ngDevMode ? [{ debugName: "isActiveOrHover" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActiveOrHover" }] : /* istanbul ignore next */ []));
         this.containerBoxHeight = computed(() => {
             const { height } = this.config();
             return height;
-        }, ...(ngDevMode ? [{ debugName: "containerBoxHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerBoxHeight" }] : /* istanbul ignore next */ []));
         this.containerBoxWidth = computed(() => {
             const { width } = this.config();
             return width;
-        }, ...(ngDevMode ? [{ debugName: "containerBoxWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerBoxWidth" }] : /* istanbul ignore next */ []));
         this.noneStatWidth = computed(() => {
             const noneStatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
             const { text, textWidth } = drawer.textEllipsis({
@@ -9355,7 +9503,8 @@ class AITableFieldStat {
                 fontWeight: DEFAULT_FONT_WEIGHT
             });
             return textWidth + AI_TABLE_ACTION_COMMON_SIZE + AI_TABLE_OFFSET;
-        }, ...(ngDevMode ? [{ debugName: "noneStatWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noneStatWidth" }] : /* istanbul ignore next */ []));
         this.renderTexts = computed(() => {
             const width = this.containerBoxWidth();
             const field = this.field();
@@ -9405,10 +9554,12 @@ class AITableFieldStat {
                 totalWidth: textWidth,
                 statValue: statValue || ''
             };
-        }, ...(ngDevMode ? [{ debugName: "renderTexts" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderTexts" }] : /* istanbul ignore next */ []));
         this.fontSize = computed(() => {
             return this.isGroupStat() ? GROUP_STAT_DEFAULT_FONT_SIZE : DEFAULT_FONT_SIZE;
-        }, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
         this.textsConfig = computed(() => {
             const height = this.containerBoxHeight();
             const width = this.containerBoxWidth();
@@ -9470,17 +9621,20 @@ class AITableFieldStat {
                 return result;
             }
             return null;
-        }, ...(ngDevMode ? [{ debugName: "textsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textsConfig" }] : /* istanbul ignore next */ []));
         this.selectedRecordCount = computed(() => {
             const aiTable = this.aiTable();
             const selectedRecords = aiTable.selection().selectedRecords;
             return selectedRecords.size;
-        }, ...(ngDevMode ? [{ debugName: "selectedRecordCount" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRecordCount" }] : /* istanbul ignore next */ []));
         this.selectedCellCount = computed(() => {
             const aiTable = this.aiTable();
             const selectedCells = aiTable.selection().selectedCells;
             return selectedCells.size;
-        }, ...(ngDevMode ? [{ debugName: "selectedCellCount" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedCellCount" }] : /* istanbul ignore next */ []));
         this.selectedInfo = computed(() => {
             const selectedRecordCount = this.selectedRecordCount();
             const selectedCellCount = this.selectedCellCount();
@@ -9493,15 +9647,18 @@ class AITableFieldStat {
                 selectedCount
             };
             return result;
-        }, ...(ngDevMode ? [{ debugName: "selectedInfo" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedInfo" }] : /* istanbul ignore next */ []));
         this.isFirstColumn = computed(() => {
             const { columnIndex } = this.config();
             return columnIndex === 0;
-        }, ...(ngDevMode ? [{ debugName: "isFirstColumn" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFirstColumn" }] : /* istanbul ignore next */ []));
         this.isLastFrozenColumn = computed(() => {
             const { columnIndex, coordinate } = this.config();
             return columnIndex === coordinate.frozenColumnCount - 1;
-        }, ...(ngDevMode ? [{ debugName: "isLastFrozenColumn" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLastFrozenColumn" }] : /* istanbul ignore next */ []));
         this.iconConfig = computed(() => {
             const { field, width, height } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -9516,7 +9673,8 @@ class AITableFieldStat {
                 cornerRadius: 4,
                 listening: false
             };
-        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconConfig" }] : /* istanbul ignore next */ []));
         effect(() => {
             const isGroupStat = this.isGroupStat();
             const bgConfigWidth = this.bgConfig().width;
@@ -9597,8 +9755,8 @@ class AITableFieldStat {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldStat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFieldStat, isStandalone: true, selector: "ai-table-field-stat", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldStat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFieldStat, isStandalone: true, selector: "ai-table-field-stat", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()">
             <ai-table-background
                 [config]="bgConfig()"
@@ -9620,7 +9778,7 @@ class AITableFieldStat {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldStat, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldStat, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-stat',
@@ -9652,24 +9810,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableGroups {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.trackBy = (groupStat) => {
             return groupStat.groupRow._id + groupStat.columnIndex;
         };
         this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
             return coordinate.frozenColumnCount ?? 0;
-        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
         this.columnStartIndex = computed(() => {
             const { columnStartIndex } = this.config();
             return Math.max(columnStartIndex, this.frozenColumnCount());
-        }, ...(ngDevMode ? [{ debugName: "columnStartIndex" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnStartIndex" }] : /* istanbul ignore next */ []));
         this.groups = computed(() => {
             return createGroupCells({
                 ...this.config(),
                 columnStartIndex: this.columnStartIndex()
             });
-        }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
         this.groupCells = computed(() => {
             const groups = this.groups();
             const groupCells = [];
@@ -9687,16 +9849,17 @@ class AITableGroups {
                 });
             });
             return groupCells;
-        }, ...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (groupCell of groupCells(); track trackBy(groupCell.groupStat!)) {
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGroups, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGroups, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-groups',
@@ -9712,25 +9875,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFrozenGroups {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
             return coordinate.frozenColumnCount ?? 0;
-        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
         this.columnStopIndex = computed(() => {
             return this.frozenColumnCount() - 1;
-        }, ...(ngDevMode ? [{ debugName: "columnStopIndex" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnStopIndex" }] : /* istanbul ignore next */ []));
         this.groups = computed(() => {
             return createGroupCells({
                 ...this.config(),
                 columnStartIndex: 0,
                 columnStopIndex: this.columnStopIndex()
             });
-        }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
         this.groupCollapseDisabled = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context.groupCollapseDisabled();
-        }, ...(ngDevMode ? [{ debugName: "groupCollapseDisabled" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupCollapseDisabled" }] : /* istanbul ignore next */ []));
         this.groupCells = computed(() => {
             const groups = this.groups();
             const groupCells = [];
@@ -9769,15 +9937,16 @@ class AITableFrozenGroups {
                 });
             });
             return groupCells;
-        }, ...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
     }
     collapseClick(e) {
         if (this.groupCollapseDisabled()) {
             e.event.cancelBubble = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (groupCell of groupCells(); track $index) {
             @if (groupCell.collapsedIcon) {
                 <ai-table-icon [config]="groupCell.collapsedIcon" (koClick)="collapseClick($event)"></ai-table-icon>
@@ -9786,7 +9955,7 @@ class AITableFrozenGroups {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFrozenGroups, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFrozenGroups, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-groups',
@@ -9805,14 +9974,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFillHandle {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.showFillHandle = computed(() => {
             const { aiTable, readonly } = this.config();
             const selection = aiTable.selection();
             const hasSelectedCells = selection.selectedCells.size > 0;
             const isEditingCell = !!aiTable.editingCell()?.path;
             return hasSelectedCells && !readonly && !isEditingCell;
-        }, ...(ngDevMode ? [{ debugName: "showFillHandle" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showFillHandle" }] : /* istanbul ignore next */ []));
         this.handleConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
             const selectedCells = Array.from(aiTable.selection().selectedCells);
@@ -9846,16 +10017,17 @@ class AITableFillHandle {
                     recordId
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "handleConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleConfig" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @if (showFillHandle()) {
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFillHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFillHandle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-fill-handle',
@@ -9864,14 +10036,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [KoShape]
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableCoverCellEntry {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-        this.onlyDisplayBorder = input(false, ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.onlyDisplayBorder = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : /* istanbul ignore next */ []));
         this.componentMap = {};
         this.groupConfig = computed(() => {
             return {
@@ -9879,7 +10054,8 @@ class AITableCoverCellEntry {
                 y: this.coverCellConfig()?.y,
                 listening: true
             };
-        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
         this.coverCellConfig = computed(() => {
             const { aiTable, coordinate, references, readonly, actions } = this.config();
             const coverCell = this.coverCell();
@@ -9943,11 +10119,13 @@ class AITableCoverCellEntry {
                 }
             };
             return result;
-        }, ...(ngDevMode ? [{ debugName: "coverCellConfig" }] : /* istanbul ignore next */ []));
-        this.coverCell = computed(() => getCoverCell(this.config().aiTable), ...(ngDevMode ? [{ debugName: "coverCell" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coverCellConfig" }] : /* istanbul ignore next */ []));
+        this.coverCell = computed(() => getCoverCell(this.config().aiTable), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coverCell" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (coverCell()) {
             <ko-group #rootGroup [config]="groupConfig()">
                 <ng-container
@@ -9961,7 +10139,7 @@ class AITableCoverCellEntry {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cover-cell-entry',
@@ -9985,13 +10163,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFieldStats {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.hover = output();
-        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
+        this.isHover = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHover" }] : /* istanbul ignore next */ []));
         this.trackBy = (groupStat) => {
             return groupStat.columnIndex;
         };
-        this.statConfigs = computed(() => createFieldStats(this.config()), ...(ngDevMode ? [{ debugName: "statConfigs" }] : /* istanbul ignore next */ []));
+        this.statConfigs = computed(() => createFieldStats(this.config()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statConfigs" }] : /* istanbul ignore next */ []));
     }
     onMouseenter(e) {
         this.isHover.set(true);
@@ -9999,8 +10180,8 @@ class AITableFieldStats {
     onMouseleave(e) {
         this.isHover.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
         <ko-group>
             @for (config of statConfigs(); track trackBy(config)) {
                 <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
@@ -10008,7 +10189,7 @@ class AITableFieldStats {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldStats, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldStats, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-column-stats',
@@ -10027,7 +10208,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 Konva.pixelRatio = 2;
 class AITableRenderer {
     constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        this.config = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.koMousemove = output();
         this.koMousedown = output();
         this.koMouseup = output();
@@ -10036,50 +10218,68 @@ class AITableRenderer {
         this.koClick = output();
         this.koDblclick = output();
         this.koMouseleave = output();
+        this.koTouchstart = output();
+        this.koTouchmove = output();
+        this.koTouchend = output();
         this.onScrollPosition = output();
-        this.isHoverStatContainer = signal(false, ...(ngDevMode ? [{ debugName: "isHoverStatContainer" }] : /* istanbul ignore next */ []));
+        this.isHoverStatContainer = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHoverStatContainer" }] : /* istanbul ignore next */ []));
         this.fields = computed(() => {
             return AITable.getVisibleFields(this.config().aiTable);
-        }, ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.hiddenIndexColumn = computed(() => {
             return this.config()?.aiTable.context?.aiFieldConfig()?.hiddenIndexColumn;
-        }, ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : /* istanbul ignore next */ []));
         this.showExpandIcon = computed(() => {
             return !!this.config()?.aiTable.context?.recordDetailConfig?.()?.showExpandIcon;
-        }, ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : /* istanbul ignore next */ []));
         this.coordinate = computed(() => {
             return this.config()?.coordinate;
-        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
         this.containerWidth = computed(() => {
             return this.config().containerWidth;
-        }, ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
         this.containerHeight = computed(() => {
             return this.config().containerHeight;
-        }, ...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
         this.gridContainerHeight = computed(() => {
             return this.containerHeight() - AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT;
-        }, ...(ngDevMode ? [{ debugName: "gridContainerHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridContainerHeight" }] : /* istanbul ignore next */ []));
         this.scrollState = computed(() => {
             return this.config()?.aiTable.context.scrollState();
-        }, ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
         this.visibleRangeInfo = computed(() => {
             return getVisibleRangeInfo(this.coordinate(), this.scrollState());
-        }, ...(ngDevMode ? [{ debugName: "visibleRangeInfo" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleRangeInfo" }] : /* istanbul ignore next */ []));
         this.frozenAreaWidth = computed(() => {
             return this.config().aiTable.context.rowHeadWidth() + this.coordinate().frozenColumnWidth;
-        }, ...(ngDevMode ? [{ debugName: "frozenAreaWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenAreaWidth" }] : /* istanbul ignore next */ []));
         this.lastColumnWidth = computed(() => {
             return this.coordinate().getColumnWidth(this.visibleRangeInfo().columnStopIndex);
-        }, ...(ngDevMode ? [{ debugName: "lastColumnWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastColumnWidth" }] : /* istanbul ignore next */ []));
         this.lastColumnOffset = computed(() => {
             return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
-        }, ...(ngDevMode ? [{ debugName: "lastColumnOffset" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastColumnOffset" }] : /* istanbul ignore next */ []));
         this.cellGroupClipWidth = computed(() => {
             return this.containerWidth() - this.frozenAreaWidth();
-        }, ...(ngDevMode ? [{ debugName: "cellGroupClipWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellGroupClipWidth" }] : /* istanbul ignore next */ []));
         this.stageConfig = computed(() => {
             const { isScrolling } = this.scrollState();
             return {
@@ -10087,7 +10287,8 @@ class AITableRenderer {
                 height: this.containerHeight(),
                 listening: isScrolling ? false : true
             };
-        }, ...(ngDevMode ? [{ debugName: "stageConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stageConfig" }] : /* istanbul ignore next */ []));
         this.gridGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10095,7 +10296,8 @@ class AITableRenderer {
                 clipWidth: this.containerWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        }, ...(ngDevMode ? [{ debugName: "gridGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridGroupConfig" }] : /* istanbul ignore next */ []));
         this.statGroupConfig = computed(() => {
             return {
                 x: 0,
@@ -10103,13 +10305,16 @@ class AITableRenderer {
                 width: this.containerWidth(),
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT
             };
-        }, ...(ngDevMode ? [{ debugName: "statGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statGroupConfig" }] : /* istanbul ignore next */ []));
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT);
-        }, ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : /* istanbul ignore next */ []));
         this.scrollTotalWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        }, ...(ngDevMode ? [{ debugName: "scrollTotalWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollTotalWidth" }] : /* istanbul ignore next */ []));
         this.frozenCommonGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10117,7 +10322,8 @@ class AITableRenderer {
                 clipWidth: this.containerWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        }, ...(ngDevMode ? [{ debugName: "frozenCommonGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenCommonGroupConfig" }] : /* istanbul ignore next */ []));
         this.commonGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() + 1,
@@ -10125,7 +10331,8 @@ class AITableRenderer {
                 clipWidth: this.cellGroupClipWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        }, ...(ngDevMode ? [{ debugName: "commonGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commonGroupConfig" }] : /* istanbul ignore next */ []));
         this.statCommonGroupConfig = computed(() => {
             return {
                 x: AI_TABLE_OFFSET,
@@ -10134,7 +10341,8 @@ class AITableRenderer {
                 clipWidth: this.cellGroupClipWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        }, ...(ngDevMode ? [{ debugName: "statCommonGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statCommonGroupConfig" }] : /* istanbul ignore next */ []));
         this.attachGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() - 1,
@@ -10142,7 +10350,8 @@ class AITableRenderer {
                 clipWidth: this.containerWidth() - this.frozenAreaWidth(),
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        }, ...(ngDevMode ? [{ debugName: "attachGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attachGroupConfig" }] : /* istanbul ignore next */ []));
         this.frozenAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10150,7 +10359,8 @@ class AITableRenderer {
                 clipWidth: this.frozenAreaWidth() + 10,
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        }, ...(ngDevMode ? [{ debugName: "frozenAttachGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenAttachGroupConfig" }] : /* istanbul ignore next */ []));
         this.frozenCoverAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10158,26 +10368,30 @@ class AITableRenderer {
                 clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        }, ...(ngDevMode ? [{ debugName: "frozenCoverAttachGroupConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenCoverAttachGroupConfig" }] : /* istanbul ignore next */ []));
         this.offsetYConfig = computed(() => {
             const { scrollTop } = this.scrollState();
             return {
                 offsetY: scrollTop
             };
-        }, ...(ngDevMode ? [{ debugName: "offsetYConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offsetYConfig" }] : /* istanbul ignore next */ []));
         this.offsetXConfig = computed(() => {
             const { scrollLeft } = this.scrollState();
             return {
                 offsetX: scrollLeft
             };
-        }, ...(ngDevMode ? [{ debugName: "offsetXConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offsetXConfig" }] : /* istanbul ignore next */ []));
         this.offsetConfig = computed(() => {
             const { scrollLeft, scrollTop } = this.scrollState();
             return {
                 offsetX: scrollLeft,
                 offsetY: scrollTop
             };
-        }, ...(ngDevMode ? [{ debugName: "offsetConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offsetConfig" }] : /* istanbul ignore next */ []));
         this.columnFrozenHeadFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
             const { aiTable, coordinate, readonly, maxFields, actions } = this.config();
@@ -10194,7 +10408,8 @@ class AITableRenderer {
                 readonly,
                 maxFields
             };
-        }, ...(ngDevMode ? [{ debugName: "columnFrozenHeadFieldConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFrozenHeadFieldConfig" }] : /* istanbul ignore next */ []));
         this.columnHeadFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
             const { aiTable, coordinate, readonly, maxFields, actions } = this.config();
@@ -10211,7 +10426,8 @@ class AITableRenderer {
                 readonly,
                 maxFields
             };
-        }, ...(ngDevMode ? [{ debugName: "columnHeadFieldConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnHeadFieldConfig" }] : /* istanbul ignore next */ []));
         this.columnFieldStatsConfig = computed(() => {
             return {
                 ...this.columnHeadFieldConfig(),
@@ -10221,10 +10437,12 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
-        }, ...(ngDevMode ? [{ debugName: "columnFieldStatsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFieldStatsConfig" }] : /* istanbul ignore next */ []));
         this.xIsScroll = computed(() => {
             return this.scrollState().scrollLeft > 0;
-        }, ...(ngDevMode ? [{ debugName: "xIsScroll" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "xIsScroll" }] : /* istanbul ignore next */ []));
         this.statShadowConfig = computed(() => {
             return {
                 width: 8,
@@ -10233,7 +10451,8 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 visible: this.xIsScroll()
             };
-        }, ...(ngDevMode ? [{ debugName: "statShadowConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statShadowConfig" }] : /* istanbul ignore next */ []));
         this.fieldHeadShadowConfig = computed(() => {
             return {
                 width: AI_TABLE_SHADOW_DEFAULT_WIDTH,
@@ -10242,7 +10461,8 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_HEAD_HEIGHT,
                 visible: this.xIsScroll()
             };
-        }, ...(ngDevMode ? [{ debugName: "fieldHeadShadowConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldHeadShadowConfig" }] : /* istanbul ignore next */ []));
         this.columnFieldStatsBgConfig = computed(() => {
             return {
                 x: 0,
@@ -10257,7 +10477,8 @@ class AITableRenderer {
                 listening: true,
                 coordinate: this.coordinate()
             };
-        }, ...(ngDevMode ? [{ debugName: "columnFieldStatsBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFieldStatsBgConfig" }] : /* istanbul ignore next */ []));
         this.columnFrozenFieldStatsConfig = computed(() => {
             return {
                 ...this.columnHeadFieldConfig(),
@@ -10269,7 +10490,8 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
-        }, ...(ngDevMode ? [{ debugName: "columnFrozenFieldStatsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnFrozenFieldStatsConfig" }] : /* istanbul ignore next */ []));
         this.cellsConfig = computed(() => {
             const { aiTable, readonly, coordinate, references, actions, maxRecords } = this.config();
             const keywordsMatchedCells = aiTable.keywordsMatchedCells();
@@ -10287,7 +10509,8 @@ class AITableRenderer {
                 maxRecords,
                 keywordsMatchedCells
             };
-        }, ...(ngDevMode ? [{ debugName: "cellsConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellsConfig" }] : /* istanbul ignore next */ []));
         this.expandRecordConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
             const { rowStartIndex, rowStopIndex } = this.visibleRangeInfo();
@@ -10297,14 +10520,16 @@ class AITableRenderer {
                 rowStartIndex,
                 rowStopIndex
             };
-        }, ...(ngDevMode ? [{ debugName: "expandRecordConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandRecordConfig" }] : /* istanbul ignore next */ []));
         this.fillHandleConfig = computed(() => {
             return {
                 aiTable: this.config().aiTable,
                 coordinate: this.coordinate(),
                 readonly: this.readonly()
             };
-        }, ...(ngDevMode ? [{ debugName: "fillHandleConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fillHandleConfig" }] : /* istanbul ignore next */ []));
         this.isLastSelectedCellInFrozenColumn = computed(() => {
             const { aiTable } = this.config();
             const selectedCells = Array.from(aiTable.selection().selectedCells);
@@ -10314,10 +10539,12 @@ class AITableRenderer {
             const [, fieldId] = lastCell.split(':');
             const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
             return AITable.isFrozenColumn(aiTable, columnIndex);
-        }, ...(ngDevMode ? [{ debugName: "isLastSelectedCellInFrozenColumn" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLastSelectedCellInFrozenColumn" }] : /* istanbul ignore next */ []));
         this.activeCellBorderConfig = computed(() => {
             return createActiveCellBorder(this.cellsConfig());
-        }, ...(ngDevMode ? [{ debugName: "activeCellBorderConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeCellBorderConfig" }] : /* istanbul ignore next */ []));
         this.showExpandCellBorder = computed(() => {
             let expandCellBorder = false;
             let frozenExpandCellBorder = false;
@@ -10340,7 +10567,8 @@ class AITableRenderer {
                 expandCellBorder,
                 frozenExpandCellBorder
             };
-        }, ...(ngDevMode ? [{ debugName: "showExpandCellBorder" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExpandCellBorder" }] : /* istanbul ignore next */ []));
     }
     stageMousemove(e) {
         this.koMousemove.emit(e);
@@ -10363,16 +10591,25 @@ class AITableRenderer {
     stageMouseleave(e) {
         this.koMouseleave.emit(e);
     }
+    stageTouchstart(e) {
+        this.koTouchstart.emit(e);
+    }
+    stageTouchmove(e) {
+        this.koTouchmove.emit(e);
+    }
+    stageTouchend(e) {
+        this.koTouchend.emit(e);
+    }
     stageWheel(e) {
         this.koWheel.emit(e);
     }
     onStatContainerHover(isHover) {
         this.isHoverStatContainer.set(isHover);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ko-group>\n                        @if (showExpandIcon()) {\n                            <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                        }\n                    </ko-group>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }, { kind: "component", type: AITableExpandRecord, selector: "ai-table-expand-record", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n    (koTouchstart)=\"stageTouchstart($event)\"\n    (koTouchmove)=\"stageTouchmove($event)\"\n    (koTouchend)=\"stageTouchend($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ko-group>\n                        @if (showExpandIcon()) {\n                            <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                        }\n                    </ko-group>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }, { kind: "component", type: AITableExpandRecord, selector: "ai-table-expand-record", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-renderer', imports: [
                         KoContainer,
@@ -10396,18 +10633,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         AITableShadow,
                         AITableFrozenGroups,
                         AITableExpandRecord
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ko-group>\n                        @if (showExpandIcon()) {\n                            <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                        }\n                    </ko-group>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], koMousemove: [{ type: i0.Output, args: ["koMousemove"] }], koMousedown: [{ type: i0.Output, args: ["koMousedown"] }], koMouseup: [{ type: i0.Output, args: ["koMouseup"] }], koContextmenu: [{ type: i0.Output, args: ["koContextmenu"] }], koWheel: [{ type: i0.Output, args: ["koWheel"] }], koClick: [{ type: i0.Output, args: ["koClick"] }], koDblclick: [{ type: i0.Output, args: ["koDblclick"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], onScrollPosition: [{ type: i0.Output, args: ["onScrollPosition"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n    (koTouchstart)=\"stageTouchstart($event)\"\n    (koTouchmove)=\"stageTouchmove($event)\"\n    (koTouchend)=\"stageTouchend($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ko-group>\n                        @if (showExpandIcon()) {\n                            <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                        }\n                    </ko-group>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], koMousemove: [{ type: i0.Output, args: ["koMousemove"] }], koMousedown: [{ type: i0.Output, args: ["koMousedown"] }], koMouseup: [{ type: i0.Output, args: ["koMouseup"] }], koContextmenu: [{ type: i0.Output, args: ["koContextmenu"] }], koWheel: [{ type: i0.Output, args: ["koWheel"] }], koClick: [{ type: i0.Output, args: ["koClick"] }], koDblclick: [{ type: i0.Output, args: ["koDblclick"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], koTouchstart: [{ type: i0.Output, args: ["koTouchstart"] }], koTouchmove: [{ type: i0.Output, args: ["koTouchmove"] }], koTouchend: [{ type: i0.Output, args: ["koTouchend"] }], onScrollPosition: [{ type: i0.Output, args: ["onScrollPosition"] }] } });
 
 class AITableCellRate extends CoverCellBase {
     constructor() {
         super(...arguments);
-        this.pointerX = signal(0, ...(ngDevMode ? [{ debugName: "pointerX" }] : /* istanbul ignore next */ []));
-        this.pointerY = signal(0, ...(ngDevMode ? [{ debugName: "pointerY" }] : /* istanbul ignore next */ []));
-        this.resetStatus = signal(false, ...(ngDevMode ? [{ debugName: "resetStatus" }] : /* istanbul ignore next */ []));
+        this.pointerX = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerX" }] : /* istanbul ignore next */ []));
+        this.pointerY = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerY" }] : /* istanbul ignore next */ []));
+        this.resetStatus = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resetStatus" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.whiteBgConfig = computed(() => {
             const { aiTable, render, field, recordId, coordinate } = this.config();
             const pointPosition = aiTable.context.pointPosition();
@@ -10431,7 +10672,8 @@ class AITableCellRate extends CoverCellBase {
                     recordId
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : /* istanbul ignore next */ []));
         this.starConfigs = computed(() => {
             const { render, field, recordId, readonly, aiTable, coordinate } = this.config();
             const { x, columnWidth, transformValue } = render;
@@ -10485,7 +10727,8 @@ class AITableCellRate extends CoverCellBase {
                     })
                 };
             });
-        }, ...(ngDevMode ? [{ debugName: "starConfigs" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "starConfigs" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.rate; }
     koMousemove(e) {
@@ -10523,8 +10766,8 @@ class AITableCellRate extends CoverCellBase {
             ]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
         }
@@ -10533,7 +10776,7 @@ class AITableCellRate extends CoverCellBase {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellRate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellRate, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-rate',
@@ -10555,18 +10798,23 @@ class AITableCellProgress extends CoverCellBase {
         super(...arguments);
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.dragPointerX = signal(null, ...(ngDevMode ? [{ debugName: "dragPointerX" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.dragPointerX = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragPointerX" }] : /* istanbul ignore next */ []));
         this.railWidth = computed(() => {
             const { columnWidth } = this.config().render;
             return columnWidth - 2 * AI_TABLE_CELL_PADDING - AI_TABLE_PROGRESS_TEXT_WIDTH;
-        }, ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []));
         this.trackWidth = computed(() => {
             return (this.progressValue() / 100) * this.railWidth();
-        }, ...(ngDevMode ? [{ debugName: "trackWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackWidth" }] : /* istanbul ignore next */ []));
         this.pointerWidth = AI_TABLE_PROGRESS_BAR_POINTER_WIDTH;
         this.progressOffsetY = (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_PROGRESS_BAR_HEIGHT) / 2 + AI_TABLE_OFFSET;
-        this.dragProgressValue = signal(null, ...(ngDevMode ? [{ debugName: "dragProgressValue" }] : /* istanbul ignore next */ []));
+        this.dragProgressValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragProgressValue" }] : /* istanbul ignore next */ []));
         this.progressValue = computed(() => {
             const dragValue = this.dragProgressValue();
             if (dragValue !== null) {
@@ -10578,7 +10826,8 @@ class AITableCellProgress extends CoverCellBase {
                 return 0;
             }
             return transformValue;
-        }, ...(ngDevMode ? [{ debugName: "progressValue" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressValue" }] : /* istanbul ignore next */ []));
         this.whiteBgConfig = computed(() => {
             const { aiTable, render, field, recordId, coordinate } = this.config();
             const pointPosition = aiTable.context.pointPosition();
@@ -10601,7 +10850,8 @@ class AITableCellProgress extends CoverCellBase {
                     recordId
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : /* istanbul ignore next */ []));
         this.railConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10619,7 +10869,8 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "railConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "railConfig" }] : /* istanbul ignore next */ []));
         this.trackConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10637,7 +10888,8 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "trackConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackConfig" }] : /* istanbul ignore next */ []));
         this.pointerConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10676,7 +10928,8 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "pointerConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerConfig" }] : /* istanbul ignore next */ []));
         this.textConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10695,7 +10948,8 @@ class AITableCellProgress extends CoverCellBase {
                     recordId
                 })
             };
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.progress; }
     calculatePercentage(clickX) {
@@ -10778,8 +11032,8 @@ class AITableCellProgress extends CoverCellBase {
             ]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()"></ko-rect>
         }
@@ -10794,7 +11048,7 @@ class AITableCellProgress extends CoverCellBase {
         <ko-text [config]="textConfig()"></ko-text>
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellProgress, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellProgress, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-progress',
@@ -10824,7 +11078,8 @@ class AITableCellCheckbox extends CoverCellBase {
             const { render } = this.config();
             const { transformValue } = render;
             return !isEmpty(transformValue) && !!transformValue;
-        }, ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
         this.checkbox = computed(() => {
             const { render, field, recordId, readonly } = this.config();
             if (render) {
@@ -10848,7 +11103,8 @@ class AITableCellCheckbox extends CoverCellBase {
                 };
             }
             return null;
-        }, ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
     }
     static { this.fieldType = AITableFieldType.checkbox; }
     switchChecked() {
@@ -10860,14 +11116,14 @@ class AITableCellCheckbox extends CoverCellBase {
             }
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: AITableCellCheckbox, isStandalone: true, selector: "ai-table-checkbox", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: AITableCellCheckbox, isStandalone: true, selector: "ai-table-checkbox", usesInheritance: true, ngImport: i0, template: `
         <ko-group>
             <ai-table-icon [config]="checkbox()" (koClick)="switchChecked()"></ai-table-icon>
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-checkbox',
@@ -10892,7 +11148,8 @@ class AITableCellText extends CoverCellBase {
                 fieldId: field._id,
                 recordId
             });
-        }, ...(ngDevMode ? [{ debugName: "cellName" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellName" }] : /* istanbul ignore next */ []));
         this.expandBorderConfig = computed(() => {
             const { render, field, recordId, readonly, isExpand } = this.config();
             const { columnWidth } = render;
@@ -10911,7 +11168,8 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return null;
-        }, ...(ngDevMode ? [{ debugName: "expandBorderConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandBorderConfig" }] : /* istanbul ignore next */ []));
         this.scrollConfig = computed(() => {
             const { render, field, recordId, readonly, isExpand, coordinate } = this.config();
             const { columnWidth } = render;
@@ -10931,7 +11189,8 @@ class AITableCellText extends CoverCellBase {
                 contentNotScrollbar: false,
                 bgName: this.cellName()
             };
-        }, ...(ngDevMode ? [{ debugName: "scrollConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollConfig" }] : /* istanbul ignore next */ []));
         this.expandTextBounds = computed(() => {
             const textRender = this.textString();
             const render = this.config()?.render;
@@ -10958,11 +11217,13 @@ class AITableCellText extends CoverCellBase {
                 ...text,
                 height: text.height + AI_TABLE_CELL_PADDING + AI_TABLE_CELL_LINE_BORDER
             };
-        }, ...(ngDevMode ? [{ debugName: "expandTextBounds" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandTextBounds" }] : /* istanbul ignore next */ []));
         this.textMaxWidth = computed(() => {
             const { columnWidth } = this.config()?.render;
             return columnWidth - AI_TABLE_CELL_PADDING - AI_TABLE_CELL_PADDING;
-        }, ...(ngDevMode ? [{ debugName: "textMaxWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textMaxWidth" }] : /* istanbul ignore next */ []));
         this.textString = computed(() => {
             const { transformValue } = this.config()?.render;
             let textRender = transformValue;
@@ -10970,18 +11231,21 @@ class AITableCellText extends CoverCellBase {
                 return;
             }
             return textRender.replace(/\r|\n/g, ' ');
-        }, ...(ngDevMode ? [{ debugName: "textString" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textString" }] : /* istanbul ignore next */ []));
         this.height = computed(() => {
             const { height } = this.expandTextBounds() || { height: 0 };
             return Math.min(Math.max(height, this.config().render.rowHeight - AI_TABLE_CELL_LINE_BORDER || AI_TABLE_ROW_BLANK_HEIGHT), 146);
-        }, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         this.startY = computed(() => {
             const { y, rowHeight } = this.config()?.render;
             return (y +
                 (AI_TABLE_ROW_HEIGHT - DEFAULT_FONT_SIZE) / 2 -
                 (DEFAULT_FONT_SIZE * (AI_TABLE_TEXT_LINE_HEIGHT - 1)) / 2 +
                 AI_TABLE_CELL_LINE_BORDER);
-        }, ...(ngDevMode ? [{ debugName: "startY" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startY" }] : /* istanbul ignore next */ []));
         this.expandTextConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -11018,7 +11282,8 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "expandTextConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandTextConfig" }] : /* istanbul ignore next */ []));
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -11043,7 +11308,8 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return;
-        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textConfig" }] : /* istanbul ignore next */ []));
         effect(() => {
             const height = this.height();
             if (this.isExpand()) {
@@ -11055,8 +11321,8 @@ class AITableCellText extends CoverCellBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableCellText, isStandalone: true, selector: "ai-table-single-text", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableCellText, isStandalone: true, selector: "ai-table-single-text", usesInheritance: true, ngImport: i0, template: `
         <ko-group>
             @if (isExpand()) {
                 <ko-group>
@@ -11081,7 +11347,7 @@ class AITableCellText extends CoverCellBase {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableScrollableGroup, selector: "ai-table-scrollable-group", inputs: ["config", "contentTemplate", "parentContainer"], outputs: ["scrollPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableCellText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableCellText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-single-text',
@@ -11902,8 +12168,8 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
         super.update();
         this.closePopover();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
         class="h-100"
         [thyAutoFocus]="autoFocus()"
         [thyShowStepControls]="false"
@@ -11912,7 +12178,7 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
         (thyBlur)="updateValue()"
     /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'number-cell-editor',
@@ -11934,17 +12200,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class SelectOptionComponent {
     constructor() {
-        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-        this.displayOption = input.required(...(ngDevMode ? [{ debugName: "displayOption" }] : /* istanbul ignore next */ []));
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.displayOption = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayOption" }] : /* istanbul ignore next */ []));
         this.optionStyle = computed(() => {
             return this.field().settings.option_style || AITableSelectOptionStyle.text;
-        }, ...(ngDevMode ? [{ debugName: "optionStyle" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionStyle" }] : /* istanbul ignore next */ []));
         this.AITableSelectOptionStyle = AITableSelectOptionStyle;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SelectOptionComponent, isStandalone: true, selector: "select-option", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, displayOption: { classPropertyName: "displayOption", publicName: "displayOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.select-option-tag": "optionStyle() === AITableSelectOptionStyle.tag" }, classAttribute: "select-option thy-text" }, ngImport: i0, template: "@if (displayOption(); as displayOption) {\n    @switch (optionStyle()) {\n        @case (AITableSelectOptionStyle.dot) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @case (AITableSelectOptionStyle.tag) {\n            @if (displayOption.bg_color || displayOption.color || 'default'; as color) {\n                <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n                    @if (displayOption['icon']) {\n                        <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n                    }\n                    <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n                </thy-tag>\n            }\n        }\n        @case (AITableSelectOptionStyle.piece) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @default {\n            @if (displayOption['icon']) {\n                <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyDot, selector: "thy-dot,[thy-dot],[thyDot]", inputs: ["thyColor", "thySize", "thyTheme", "thyShape"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SelectOptionComponent, isStandalone: true, selector: "select-option", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, displayOption: { classPropertyName: "displayOption", publicName: "displayOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.select-option-tag": "optionStyle() === AITableSelectOptionStyle.tag" }, classAttribute: "select-option thy-text" }, ngImport: i0, template: "@if (displayOption(); as displayOption) {\n    @switch (optionStyle()) {\n        @case (AITableSelectOptionStyle.dot) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @case (AITableSelectOptionStyle.tag) {\n            @if (displayOption.bg_color || displayOption.color || 'default'; as color) {\n                <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n                    @if (displayOption['icon']) {\n                        <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n                    }\n                    <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n                </thy-tag>\n            }\n        }\n        @case (AITableSelectOptionStyle.piece) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @default {\n            @if (displayOption['icon']) {\n                <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyAppearance", "thyTheme", "thySize", "thyHoverable"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyDot, selector: "thy-dot,[thy-dot],[thyDot]", inputs: ["thyColor", "thySize", "thyTheme", "thyShape"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select-option', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'select-option thy-text',
@@ -11960,10 +12229,12 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
         super();
         this.selectOptions = computed(() => {
             return this.field().settings.options;
-        }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
         this.preset = computed(() => {
             return this.field().settings.is_multiple && this.field().settings.option_style === AITableSelectOptionStyle.tag ? 'tag' : '';
-        }, ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12009,10 +12280,10 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
             this.thyPopoverRef?.updatePosition();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyItemSize", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyVirtualScroll", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyItemSize", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyVirtualScroll", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select-cell-editor', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block h-100 select-cell-editor'
@@ -12031,7 +12302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class TextCellEditorComponent extends AbstractEditCellEditor {
     constructor() {
         super();
-        this.isSelectAll = input(false, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : /* istanbul ignore next */ []));
+        this.isSelectAll = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAll" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12060,8 +12332,8 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         super.update();
         this.closePopover();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <textarea
             #textarea
             placeholder=""
@@ -12073,9 +12345,9 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
             (thyEnter)="updateValue()"
             (blur)="updateValue()"
         ></textarea>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TextCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'text-cell-editor',
@@ -12104,10 +12376,10 @@ class SelectOptionPipe {
     transform(_id, options) {
         return options?.length && options.find((item) => item._id === _id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectOption'
@@ -12121,10 +12393,10 @@ class SelectOptionsPipe {
             })) ||
             []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionsPipe, isStandalone: true, name: "selectOptions" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionsPipe, isStandalone: true, name: "selectOptions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectOptions'
@@ -12134,10 +12406,10 @@ class IsSelectRecordPipe {
     transform(recordId, selection) {
         return selection.selectedRecords.has(recordId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isSelectRecord'
@@ -12151,10 +12423,10 @@ class UserPipe {
             })) ||
             []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: UserPipe, isStandalone: true, name: "user" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: UserPipe, isStandalone: true, name: "user" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: UserPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'user'
@@ -12164,10 +12436,10 @@ class SelectSettingPipe {
     transform(settings) {
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: SelectSettingPipe, isStandalone: true, name: "selectSetting" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: SelectSettingPipe, isStandalone: true, name: "selectSetting" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SelectSettingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SelectSettingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectSetting'
@@ -12177,10 +12449,10 @@ class MemberSettingPipe {
     transform(settings) {
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MemberSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: MemberSettingPipe, isStandalone: true, name: "memberSetting" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MemberSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: MemberSettingPipe, isStandalone: true, name: "memberSetting" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MemberSettingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MemberSettingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'memberSetting'
@@ -12190,10 +12462,10 @@ class AITableFieldIsSameOptionPipe {
     transform(fieldOption, field) {
         return isSameFieldOption(fieldOption, field);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldIsSameOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldIsSameOptionPipe, isStandalone: true, name: "fieldIsSameOption" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldIsSameOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldIsSameOptionPipe, isStandalone: true, name: "fieldIsSameOption" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldIsSameOptionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldIsSameOptionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fieldIsSameOption'
@@ -12202,9 +12474,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class AITableFieldSettingBase {
     constructor() {
-        this.aiEditField = model.required(...(ngDevMode ? [{ debugName: "aiEditField" }] : /* istanbul ignore next */ []));
-        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
-        this.aiReferences = input(...(ngDevMode ? [undefined, { debugName: "aiReferences" }] : /* istanbul ignore next */ []));
+        this.aiEditField = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiEditField" }] : /* istanbul ignore next */ []));
+        this.aiTable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.aiReferences = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiReferences" }] : /* istanbul ignore next */ []));
         this.isUpdate = input(false, { ...(ngDevMode ? { debugName: "isUpdate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.addField = output();
         this.setField = output();
@@ -12232,10 +12507,10 @@ class AITableFieldSettingBase {
     cancel() {
         this.thyPopoverRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldSettingBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableFieldSettingBase, isStandalone: true, selector: "ai-table-field-setting-base", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldSettingBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableFieldSettingBase, isStandalone: true, selector: "ai-table-field-setting-base", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldSettingBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldSettingBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-setting-base',
@@ -12247,10 +12522,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class AITableFieldSetting extends AITableFieldSettingBase {
     constructor() {
         super(...arguments);
-        this.aiExternalTemplate = input(null, ...(ngDevMode ? [{ debugName: "aiExternalTemplate" }] : /* istanbul ignore next */ []));
+        this.aiExternalTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiExternalTemplate" }] : /* istanbul ignore next */ []));
         this.selectedFieldOption = computed(() => {
             return getFieldOptionByField(this.aiTable(), this.aiEditField());
-        }, ...(ngDevMode ? [{ debugName: "selectedFieldOption" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFieldOption" }] : /* istanbul ignore next */ []));
         this.fieldMaxLength = 32;
         this.validatorConfig = computed(() => {
             return {
@@ -12261,14 +12538,17 @@ class AITableFieldSetting extends AITableFieldSettingBase {
                     }
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "validatorConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validatorConfig" }] : /* istanbul ignore next */ []));
         this.fieldOptions = computed(() => {
             const fieldOptions = getFieldOptions(this.aiTable());
             return _.groupBy(fieldOptions, 'group');
-        }, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
-        this.isManualInputName = signal(false, ...(ngDevMode ? [{ debugName: "isManualInputName" }] : /* istanbul ignore next */ []));
+        this.isManualInputName = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isManualInputName" }] : /* istanbul ignore next */ []));
         this.checkUniqueName = (fieldName) => {
             fieldName = fieldName?.trim();
             return of(!!this.aiTable()
@@ -12286,7 +12566,8 @@ class AITableFieldSetting extends AITableFieldSettingBase {
                 base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
                 advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
             };
-        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12332,10 +12613,10 @@ class AITableFieldSetting extends AITableFieldSettingBase {
     nameChange(event) {
         this.isManualInputName.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldSetting, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, usesInheritance: true, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldSetting, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, usesInheritance: true, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock", "thyDisabled"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldSetting, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-setting', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
@@ -12368,11 +12649,16 @@ class AITableContextMenu extends ThyDropdownAbstractMenu {
         super(...arguments);
         this.notifyService = inject(ThyNotifyService);
         this.thyPopoverRef = inject(ThyPopoverRef);
-        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
-        this.menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
-        this.targetName = input.required(...(ngDevMode ? [{ debugName: "targetName" }] : /* istanbul ignore next */ []));
-        this.position = input.required(...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length, ...(ngDevMode ? [{ debugName: "maxCount" }] : /* istanbul ignore next */ []));
+        this.aiTable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.menuItems = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.targetName = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "targetName" }] : /* istanbul ignore next */ []));
+        this.position = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxCount" }] : /* istanbul ignore next */ []));
     }
     execute(menu) {
         if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
@@ -12386,10 +12672,10 @@ class AITableContextMenu extends ThyDropdownAbstractMenu {
         this.execute(menu);
         this.thyPopoverRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableContextMenu, isStandalone: true, selector: "ai-table-context-menu", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, targetName: { classPropertyName: "targetName", publicName: "targetName", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "context-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableContextMenu, isStandalone: true, selector: "ai-table-context-menu", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, targetName: { classPropertyName: "targetName", publicName: "targetName", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "context-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableContextMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'context-menu'
@@ -12410,8 +12696,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 
 class CheckboxMenuSort {
     constructor() {
-        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-        this.menu = input.required(...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.menu = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
         this.Direction = {
             ascending: 'ascending',
             descending: 'descending'
@@ -12427,8 +12715,8 @@ class CheckboxMenuSort {
         }
         return '按 Z → A 排序';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxMenuSort, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CheckboxMenuSort, isStandalone: true, selector: "checkbox-menu-sort", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "checkbox-menu-sort" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CheckboxMenuSort, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: CheckboxMenuSort, isStandalone: true, selector: "checkbox-menu-sort", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "checkbox-menu-sort" }, ngImport: i0, template: `
         <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
         <div class="sort-state">
             @if (menu().type === 'sortByAsc') {
@@ -12443,7 +12731,7 @@ class CheckboxMenuSort {
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckboxMenuSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CheckboxMenuSort, decorators: [{
             type: Component,
             args: [{
                     selector: 'checkbox-menu-sort',
@@ -12472,10 +12760,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class AITableFieldMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
-        this.execMenuCallback = input(...(ngDevMode ? [undefined, { debugName: "execMenuCallback" }] : /* istanbul ignore next */ []));
+        this.execMenuCallback = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "execMenuCallback" }] : /* istanbul ignore next */ []));
         this.field = computed(() => {
             return this.aiTable.fields().find((item) => item._id === this.fieldId);
-        }, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     }
     getCustomComponent(menu) {
         return menu.customComponent?.(this.aiTable, this.field());
@@ -12494,10 +12784,10 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
         }
         return menu.name || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldMenus: { classPropertyName: "fieldMenus", publicName: "fieldMenus", isSignal: false, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, execMenuCallback: { classPropertyName: "execMenuCallback", publicName: "execMenuCallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldMenus: { classPropertyName: "fieldMenus", publicName: "fieldMenus", isSignal: false, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, execMenuCallback: { classPropertyName: "execMenuCallback", publicName: "execMenuCallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableFieldMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
@@ -12528,18 +12818,24 @@ const GRID_CELL_EDITOR_MAP = {
 
 class DynamicCellEditorComponent {
     constructor() {
-        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
-        this.fieldId = input.required(...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
-        this.recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
-        this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : /* istanbul ignore next */ []));
+        this.aiTable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.fieldId = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+        this.recordId = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
+        this.references = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "references" }] : /* istanbul ignore next */ []));
         this.updateFieldValues = output();
         this.editorHost = viewChild('editorHost', { ...(ngDevMode ? { debugName: "editorHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.field = computed(() => {
             return this.aiTable().fieldsMap()[this.fieldId()];
-        }, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
         this.cellValue = computed(() => {
             return AITableQueries.getFieldValue(this.aiTable(), [this.recordId(), this.fieldId()]);
-        }, ...(ngDevMode ? [{ debugName: "cellValue" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellValue" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.recordId();
             this.fieldId();
@@ -12589,14 +12885,14 @@ class DynamicCellEditorComponent {
         }
         return GRID_CELL_EDITOR_MAP[fieldType];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: DynamicCellEditorComponent, isStandalone: true, selector: "ai-dynamic-cell-editor", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: DynamicCellEditorComponent, isStandalone: true, selector: "ai-dynamic-cell-editor", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
         <div class="ai-dynamic-cell-editor-wrapper">
             <ng-container #editorHost></ng-container>
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DynamicCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-dynamic-cell-editor',
@@ -12614,39 +12910,53 @@ class RecordDetailComponent {
         return getFieldIconPath(field) || IconPathMap[field.icon];
     }
     constructor() {
-        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
-        this.recordId = model.required(...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
-        this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : /* istanbul ignore next */ []));
-        this.actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : /* istanbul ignore next */ []));
+        this.aiTable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiTable" }] : /* istanbul ignore next */ []));
+        this.recordIdInput = input.required({ ...(ngDevMode ? { debugName: "recordIdInput" } : /* istanbul ignore next */ {}), alias: 'recordId' });
+        this.recordId = linkedSignal(this.recordIdInput, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordId" }] : /* istanbul ignore next */ []));
+        this.references = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "references" }] : /* istanbul ignore next */ []));
+        this.actions = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "actions" }] : /* istanbul ignore next */ []));
         this.recordIdChange = output();
-        this.internalRecordId = signal('', ...(ngDevMode ? [{ debugName: "internalRecordId" }] : /* istanbul ignore next */ []));
+        this.internalRecordId = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalRecordId" }] : /* istanbul ignore next */ []));
         this.readonly = computed(() => {
             return this.aiTable()?.context?.readonly?.();
-        }, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.currentRecordId = computed(() => {
             const inputId = this.recordId();
             const internalId = this.internalRecordId();
             return internalId || inputId;
-        }, ...(ngDevMode ? [{ debugName: "currentRecordId" }] : /* istanbul ignore next */ []));
-        this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate', ...(ngDevMode ? [{ debugName: "fieldOperationsMenuTemplate" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentRecordId" }] : /* istanbul ignore next */ []));
+        this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldOperationsMenuTemplate" }] : /* istanbul ignore next */ []));
         this.record = computed(() => {
             return this.aiTable().recordsMap()[this.currentRecordId()];
-        }, ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
         this.fields = computed(() => {
             return this.aiTable().gridData().fields;
-        }, ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
         this.firstField = computed(() => {
             return this.aiTable().gridData().fields[0];
-        }, ...(ngDevMode ? [{ debugName: "firstField" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstField" }] : /* istanbul ignore next */ []));
         this.lastField = computed(() => {
             const fields = this.aiTable().gridData().fields;
             return fields[fields.length - 1];
-        }, ...(ngDevMode ? [{ debugName: "lastField" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastField" }] : /* istanbul ignore next */ []));
         this.i18nTexts = computed(() => ({
             recordUntitled: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.recordUntitled),
             deleteRecord: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.deleteRecord),
             addField: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.addField)
-        }), ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
         this.recordTitle = computed(() => {
             let title = this.i18nTexts().recordUntitled;
             const field = this.firstField();
@@ -12662,19 +12972,23 @@ class RecordDetailComponent {
                 }
             }
             return title;
-        }, ...(ngDevMode ? [{ debugName: "recordTitle" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordTitle" }] : /* istanbul ignore next */ []));
         this.recordNavigation = computed(() => {
             return getRecordNavigationInfo(this.aiTable(), this.currentRecordId());
-        }, ...(ngDevMode ? [{ debugName: "recordNavigation" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordNavigation" }] : /* istanbul ignore next */ []));
         this.fieldMenus = computed(() => {
             const fieldMenusFn = this.aiTable()?.context?.aiFieldConfig()?.recordDetailFieldMenus;
             if (fieldMenusFn && this.aiTable()) {
                 return fieldMenusFn(this.aiTable());
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldMenus" }] : /* istanbul ignore next */ []));
         this.activeFieldId = null;
-        this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : /* istanbul ignore next */ []));
+        this.fieldMenuActive = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : /* istanbul ignore next */ []));
         this.fieldMenuPopoverRef = null;
         this.currentPopoverFieldId = null;
         this.slideRef = inject(ThySlideRef);
@@ -12813,10 +13127,10 @@ class RecordDetailComponent {
                 return (Array.isArray(value) && value.length === 0) || isUndefinedOrNull(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordId: "recordIdChange", recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a\n                    class=\"ai-table-record-detail-remove\"\n                    thyDropdownMenuItem\n                    [thyDisabled]=\"readonly()\"\n                    href=\"javascript:;\"\n                    (click)=\"deleteRecord()\"\n                >\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordIdInput: { classPropertyName: "recordIdInput", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a\n                    class=\"ai-table-record-detail-remove\"\n                    thyDropdownMenuItem\n                    [thyDisabled]=\"readonly()\"\n                    href=\"javascript:;\"\n                    (click)=\"deleteRecord()\"\n                >\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock", "thyDisabled"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyAppearance", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RecordDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RecordDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ai-record-detail', imports: [
                         ThyButton,
@@ -12829,7 +13143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DynamicCellEditorComponent,
                         ThyFlexibleText
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a\n                    class=\"ai-table-record-detail-remove\"\n                    thyDropdownMenuItem\n                    [thyDisabled]=\"readonly()\"\n                    href=\"javascript:;\"\n                    (click)=\"deleteRecord()\"\n                >\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }, { type: i0.Output, args: ["recordIdChange"] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], recordIdChange: [{ type: i0.Output, args: ["recordIdChange"] }], fieldOperationsMenuTemplate: [{ type: i0.ViewChild, args: ['fieldOperationsMenuTemplate', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], recordIdChange: [{ type: i0.Output, args: ["recordIdChange"] }], fieldOperationsMenuTemplate: [{ type: i0.ViewChild, args: ['fieldOperationsMenuTemplate', { isSignal: true }] }] } });
 
 class AITableGridEventService {
     constructor() {
@@ -13061,10 +13375,10 @@ class AITableGridEventService {
         });
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridEventService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridEventService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridEventService, decorators: [{
             type: Injectable
         }] });
 
@@ -13113,38 +13427,57 @@ class AITableGridFieldService {
         });
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridFieldService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridFieldService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridFieldService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
 
 class AITableGridBase {
     constructor() {
-        this.aiRecords = model.required(...(ngDevMode ? [{ debugName: "aiRecords" }] : /* istanbul ignore next */ []));
-        this.aiFields = model.required(...(ngDevMode ? [{ debugName: "aiFields" }] : /* istanbul ignore next */ []));
-        this.aiContextMenuItems = input(...(ngDevMode ? [undefined, { debugName: "aiContextMenuItems" }] : /* istanbul ignore next */ []));
-        this.aiFieldConfig = input(...(ngDevMode ? [undefined, { debugName: "aiFieldConfig" }] : /* istanbul ignore next */ []));
-        this.aiReadonly = input(false, ...(ngDevMode ? [{ debugName: "aiReadonly" }] : /* istanbul ignore next */ []));
-        this.aiPlugins = input(...(ngDevMode ? [undefined, { debugName: "aiPlugins" }] : /* istanbul ignore next */ []));
-        this.aiMaxFields = input(...(ngDevMode ? [undefined, { debugName: "aiMaxFields" }] : /* istanbul ignore next */ []));
-        this.aiMaxRecords = input(...(ngDevMode ? [undefined, { debugName: "aiMaxRecords" }] : /* istanbul ignore next */ []));
-        this.aiMaxSelectOptions = input(...(ngDevMode ? [undefined, { debugName: "aiMaxSelectOptions" }] : /* istanbul ignore next */ []));
-        this.aiReferences = input.required(...(ngDevMode ? [{ debugName: "aiReferences" }] : /* istanbul ignore next */ []));
-        this.aiBuildRenderDataFn = input(...(ngDevMode ? [undefined, { debugName: "aiBuildRenderDataFn" }] : /* istanbul ignore next */ []));
-        this.aiBuildGroupLinearRowsFn = input(...(ngDevMode ? [undefined, { debugName: "aiBuildGroupLinearRowsFn" }] : /* istanbul ignore next */ []));
-        this.aiSortKeysMap = input(...(ngDevMode ? [undefined, { debugName: "aiSortKeysMap" }] : /* istanbul ignore next */ []));
-        this.aiGetI18nTextByKey = input(...(ngDevMode ? [undefined, { debugName: "aiGetI18nTextByKey" }] : /* istanbul ignore next */ []));
-        this.aiKeywords = input(...(ngDevMode ? [undefined, { debugName: "aiKeywords" }] : /* istanbul ignore next */ []));
-        this.aiFrozenColumnCountFn = input(...(ngDevMode ? [undefined, { debugName: "aiFrozenColumnCountFn" }] : /* istanbul ignore next */ []));
-        this.aiRecordHeight = input(AITableRecordHeightType.low, ...(ngDevMode ? [{ debugName: "aiRecordHeight" }] : /* istanbul ignore next */ []));
-        this.aiRecordDetailConfig = input(...(ngDevMode ? [undefined, { debugName: "aiRecordDetailConfig" }] : /* istanbul ignore next */ []));
+        this.aiRecords = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiRecords" }] : /* istanbul ignore next */ []));
+        this.aiFields = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiFields" }] : /* istanbul ignore next */ []));
+        this.aiContextMenuItems = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiContextMenuItems" }] : /* istanbul ignore next */ []));
+        this.aiFieldConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiFieldConfig" }] : /* istanbul ignore next */ []));
+        this.aiReadonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiReadonly" }] : /* istanbul ignore next */ []));
+        this.aiPlugins = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiPlugins" }] : /* istanbul ignore next */ []));
+        this.aiMaxFields = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiMaxFields" }] : /* istanbul ignore next */ []));
+        this.aiMaxRecords = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiMaxRecords" }] : /* istanbul ignore next */ []));
+        this.aiMaxSelectOptions = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiMaxSelectOptions" }] : /* istanbul ignore next */ []));
+        this.aiReferences = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiReferences" }] : /* istanbul ignore next */ []));
+        this.aiBuildRenderDataFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiBuildRenderDataFn" }] : /* istanbul ignore next */ []));
+        this.aiBuildGroupLinearRowsFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiBuildGroupLinearRowsFn" }] : /* istanbul ignore next */ []));
+        this.aiSortKeysMap = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiSortKeysMap" }] : /* istanbul ignore next */ []));
+        this.aiGetI18nTextByKey = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiGetI18nTextByKey" }] : /* istanbul ignore next */ []));
+        this.aiKeywords = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiKeywords" }] : /* istanbul ignore next */ []));
+        this.aiFrozenColumnCountFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiFrozenColumnCountFn" }] : /* istanbul ignore next */ []));
+        this.aiRecordHeight = input(AITableRecordHeightType.low, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "aiRecordHeight" }] : /* istanbul ignore next */ []));
+        this.aiRecordDetailConfig = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "aiRecordDetailConfig" }] : /* istanbul ignore next */ []));
         this.AITableFieldType = AITableFieldType;
         this.AITableSelectOptionStyle = AITableSelectOptionStyle;
         this.isSelectedAll = computed(() => {
             return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
-        }, ...(ngDevMode ? [{ debugName: "isSelectedAll" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectedAll" }] : /* istanbul ignore next */ []));
         this.aiTableInitialized = output();
         this.aiAddRecord = output();
         this.aiRemoveRecord = output();
@@ -13165,7 +13498,8 @@ class AITableGridBase {
                 return fieldMenusFn(this.aiTable);
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldMenus" }] : /* istanbul ignore next */ []));
         this.gridData = computed(() => {
             this.aiTable.recordsWillHidden();
             if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
@@ -13175,7 +13509,8 @@ class AITableGridBase {
                 records: this.aiRecords(),
                 fields: this.aiFields()
             };
-        }, ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
@@ -13264,10 +13599,10 @@ class AITableGridBase {
             this.aiTableGridEventService.openEdit(cellDom);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null }, aiRecordDetailConfig: { classPropertyName: "aiRecordDetailConfig", publicName: "aiRecordDetailConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null }, aiRecordDetailConfig: { classPropertyName: "aiRecordDetailConfig", publicName: "aiRecordDetailConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGridBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-grid-base',
@@ -13290,10 +13625,10 @@ class AITableDomGrid extends AITableGridBase {
             fieldMenus: this.fieldMenus()
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i2$2.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i3$1.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i3$1.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"$safeNavigationMigration(record.values[field._id]?.url)\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"$safeNavigationMigration(record.values[field._id]?.text)\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyAppearance", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyAppearance", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i2$2.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i3$1.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i3$1.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableDomGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-dom-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid ai-table-dom-grid'
@@ -13319,7 +13654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         UserPipe,
                         SelectSettingPipe,
                         MemberSettingPipe
-                    ], providers: [AITableGridEventService, AITableGridFieldService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
+                    ], providers: [AITableGridEventService, AITableGridFieldService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"$safeNavigationMigration(record.values[field._id]?.url)\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"$safeNavigationMigration(record.values[field._id]?.text)\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
         }] });
 
 class AITableScrollControllerService {
@@ -13513,10 +13848,10 @@ class AITableScrollControllerService {
             this.mouseUpSubscription = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableScrollControllerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableScrollControllerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableScrollControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableScrollControllerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -13605,17 +13940,19 @@ class RecordDetailService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RecordDetailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RecordDetailService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RecordDetailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RecordDetailService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RecordDetailService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RecordDetailService, decorators: [{
             type: Injectable
         }] });
 
 class AITableDragComponent {
     constructor() {
-        this.horizontalBar = input(...(ngDevMode ? [undefined, { debugName: "horizontalBar" }] : /* istanbul ignore next */ []));
-        this.verticalBar = input(...(ngDevMode ? [undefined, { debugName: "verticalBar" }] : /* istanbul ignore next */ []));
+        this.horizontalBar = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "horizontalBar" }] : /* istanbul ignore next */ []));
+        this.verticalBar = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "verticalBar" }] : /* istanbul ignore next */ []));
         this.dragEnd = output();
         this.aiTableGridEventService = inject(AITableGridEventService);
         this.render2 = inject(Renderer2);
@@ -14054,10 +14391,10 @@ class AITableDragComponent {
         }
         this.scrollControllerService.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableDragComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableDragComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-drag', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-drag-container'
@@ -14065,10 +14402,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { horizontalBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalBar", required: false }] }], verticalBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBar", required: false }] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 class AITableGrid extends AITableGridBase {
+    shouldIgnoreMouseEvents() {
+        return this.ignoreMouseEventsUntil > Date.now();
+    }
+    ignoreMouseEventsFor(durationMs) {
+        this.ignoreMouseEventsUntil = Date.now() + durationMs;
+    }
+    ignoreMouseEventsAfterTouchScroll() {
+        this.ignoreMouseEventsFor(this.touchScrollMouseSuppressionMs);
+    }
     constructor() {
         super();
         this.viewContainerRef = inject(ViewContainerRef);
         this.isDragSelectionAutoScrolling = false;
+        this.touchPanState = {
+            isTouching: false,
+            lastClientX: 0,
+            lastClientY: 0,
+            hasMoved: false
+        };
+        this.touchScrollMouseSuppressionMs = 450;
+        this.ignoreMouseEventsUntil = 0;
         this.dragSelectState = {
             isDragging: false,
             startCell: null
@@ -14083,7 +14437,8 @@ class AITableGrid extends AITableGridBase {
         this.recordDetailService = inject(RecordDetailService);
         this.isPopoverOpen = false;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
-        this.containerRect = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "containerRect" }] : /* istanbul ignore next */ []));
+        this.containerRect = signal({ width: 0, height: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerRect" }] : /* istanbul ignore next */ []));
         this.frozenColumnCount = computed(() => {
             const containerWidth = this.containerRect().width;
             const aiFrozenColumnCountFn = this.aiFrozenColumnCountFn();
@@ -14091,17 +14446,24 @@ class AITableGrid extends AITableGridBase {
                 return aiFrozenColumnCountFn(containerWidth);
             }
             return AI_TABLE_MIN_FROZEN_COLUMN_COUNT;
-        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
-        this.showExpandIcon = computed(() => !!this.aiRecordDetailConfig()?.showExpandIcon, ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : /* istanbul ignore next */ []));
+        this.showExpandIcon = computed(() => !!this.aiRecordDetailConfig()?.showExpandIcon, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExpandIcon" }] : /* istanbul ignore next */ []));
         this.hasContainerRect = computed(() => {
             return this.containerRect().width > 0 && this.containerRect().height > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasContainerRect" }] : /* istanbul ignore next */ []));
-        this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
-        this.verticalBarRef = viewChild('verticalBar', ...(ngDevMode ? [{ debugName: "verticalBarRef" }] : /* istanbul ignore next */ []));
-        this.horizontalBarRef = viewChild('horizontalBar', ...(ngDevMode ? [{ debugName: "horizontalBarRef" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasContainerRect" }] : /* istanbul ignore next */ []));
+        this.container = viewChild('container', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+        this.verticalBarRef = viewChild('verticalBar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "verticalBarRef" }] : /* istanbul ignore next */ []));
+        this.horizontalBarRef = viewChild('horizontalBar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "horizontalBarRef" }] : /* istanbul ignore next */ []));
         this.linearRows = computed(() => {
             return buildGridLinearRows(this.gridData().records, !this.aiReadonly(), this.aiTable, this.aiBuildGroupLinearRowsFn?.());
-        }, ...(ngDevMode ? [{ debugName: "linearRows" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linearRows" }] : /* istanbul ignore next */ []));
         this.domToolTips = computed(() => {
             const scrollTop = this.aiTable.context.scrollState().scrollTop;
             const rowIndices = this.toolTipRowIndices();
@@ -14114,7 +14476,8 @@ class AITableGrid extends AITableGridBase {
                     tooltip
                 };
             });
-        }, ...(ngDevMode ? [{ debugName: "domToolTips" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "domToolTips" }] : /* istanbul ignore next */ []));
         this.toolTipRowIndices = computed(() => {
             const hiddenRows = this.aiTable.recordsWillHidden() || [];
             const moveRows = this.aiTable.recordsWillMove() || [];
@@ -14131,11 +14494,13 @@ class AITableGrid extends AITableGridBase {
                 });
             });
             return toolTipRowIndices;
-        }, ...(ngDevMode ? [{ debugName: "toolTipRowIndices" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolTipRowIndices" }] : /* istanbul ignore next */ []));
         this.visibleColumnsIndexMap = computed(() => {
             const columns = AITable.getVisibleFields(this.aiTable);
             return new Map(columns?.map((item, index) => [item._id, index]));
-        }, ...(ngDevMode ? [{ debugName: "visibleColumnsIndexMap" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleColumnsIndexMap" }] : /* istanbul ignore next */ []));
         this.fieldOptions = computed(() => {
             let allFieldOptions = getDefaultFieldOptions().map((fieldOption) => {
                 const name = getI18nTextByKey(this.aiTable, fieldOption.name);
@@ -14151,16 +14516,20 @@ class AITableGrid extends AITableGridBase {
                 allFieldOptions = filterFieldOptions(allFieldOptions);
             }
             return allFieldOptions;
-        }, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
         this.fieldOptionMap = computed(() => {
             return new Map(this.fieldOptions().map((fieldOption) => [fieldOption.type, fieldOption]));
-        }, ...(ngDevMode ? [{ debugName: "fieldOptionMap" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldOptionMap" }] : /* istanbul ignore next */ []));
         this.visibleRowsIndexMap = computed(() => {
             return new Map(this.linearRows().map((row, index) => [row._id, index]));
-        }, ...(ngDevMode ? [{ debugName: "visibleRowsIndexMap" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleRowsIndexMap" }] : /* istanbul ignore next */ []));
         this.containerElement = computed(() => {
             return this.container().nativeElement;
-        }, ...(ngDevMode ? [{ debugName: "containerElement" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerElement" }] : /* istanbul ignore next */ []));
         this.trackBy = (index, item) => {
             return item.sort_by ?? index;
         };
@@ -14192,25 +14561,31 @@ class AITableGrid extends AITableGridBase {
                 maxRecords: this.aiMaxRecords(),
                 maxSelectOptions: this.aiMaxSelectOptions()
             };
-        }, ...(ngDevMode ? [{ debugName: "rendererConfig" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rendererConfig" }] : /* istanbul ignore next */ []));
         this.coordinate = computed(() => {
             return this.rendererConfig().coordinate;
-        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coordinate" }] : /* istanbul ignore next */ []));
         this.scrollState = computed(() => {
             return this.aiTable.context.scrollState();
-        }, ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
-        }, ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : /* istanbul ignore next */ []));
         this.scrollbarWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        }, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
         this.i18nTexts = computed(() => {
             this.aiGetI18nTextByKey();
             return {
                 rowAddFilterTooltip: getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip)
             };
-        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "i18nTexts" }] : /* istanbul ignore next */ []));
         // rowAddFilterTooltip = getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip);
         this.rowIndicesMap = computed(() => {
             const rowIndicesMap = {};
@@ -14223,7 +14598,8 @@ class AITableGrid extends AITableGridBase {
                 }
             });
             return rowIndicesMap;
-        }, ...(ngDevMode ? [{ debugName: "rowIndicesMap" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIndicesMap" }] : /* istanbul ignore next */ []));
         this.actions = {
             updateFieldValues: (data) => {
                 this.aiUpdateFieldValues.emit(data);
@@ -14434,6 +14810,9 @@ class AITableGrid extends AITableGridBase {
         }
     }
     stageMousemove(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         if (this.timer) {
             cancelAnimationFrame(this.timer);
         }
@@ -14480,6 +14859,9 @@ class AITableGrid extends AITableGridBase {
         });
     }
     stageMousedown(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         const mouseEvent = e.event.evt;
         const _targetName = e.event.target.name();
         const { targetName, fieldId, recordId } = getDetailByTargetName(_targetName);
@@ -14554,6 +14936,9 @@ class AITableGrid extends AITableGridBase {
         }
     }
     stageMouseup(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         this.updateDragSelectState(false, null);
         if (this.dragFillState.isDragging) {
             this.performFill(e);
@@ -14591,11 +14976,58 @@ class AITableGrid extends AITableGridBase {
         });
     }
     stageWheel(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         e.event.evt.preventDefault();
         this.aiTableGridEventService.closeCellEditor();
         this.scrollAction({ deltaX: e.event.evt.deltaX, deltaY: e.event.evt.deltaY, shiftKey: e.event.evt.shiftKey });
     }
+    stageTouchstart(e) {
+        const touch = e.event.evt.touches?.[0];
+        if (!touch) {
+            return;
+        }
+        this.touchPanState = {
+            isTouching: true,
+            lastClientX: touch.clientX,
+            lastClientY: touch.clientY,
+            hasMoved: false
+        };
+    }
+    stageTouchmove(e) {
+        const touch = e.event.evt.touches?.[0];
+        if (!touch || !this.touchPanState.isTouching) {
+            return;
+        }
+        const deltaX = this.touchPanState.lastClientX - touch.clientX;
+        const deltaY = this.touchPanState.lastClientY - touch.clientY;
+        this.touchPanState.lastClientX = touch.clientX;
+        this.touchPanState.lastClientY = touch.clientY;
+        if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) {
+            return;
+        }
+        e.event.evt.preventDefault();
+        this.aiTableGridEventService.closeCellEditor();
+        if (!this.touchPanState.hasMoved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+            this.touchPanState.hasMoved = true;
+        }
+        if (this.touchPanState.hasMoved) {
+            this.ignoreMouseEventsAfterTouchScroll();
+        }
+        this.scrollAction({ deltaX, deltaY, shiftKey: false });
+    }
+    stageTouchend(e) {
+        if (this.touchPanState.hasMoved) {
+            this.ignoreMouseEventsAfterTouchScroll();
+        }
+        this.touchPanState.isTouching = false;
+        this.touchPanState.hasMoved = false;
+    }
     stageContextmenu(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         const mouseEvent = e.event.evt;
         mouseEvent.preventDefault();
         if (this.aiReadonly()) {
@@ -14626,6 +15058,9 @@ class AITableGrid extends AITableGridBase {
         });
     }
     stageClick(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         const targetNameDetail = getDetailByTargetName(e.event.target.name());
         this.aiClick.emit({
             ...e,
@@ -14734,6 +15169,9 @@ class AITableGrid extends AITableGridBase {
         return;
     }
     stageDblclick(e) {
+        if (this.shouldIgnoreMouseEvents()) {
+            return;
+        }
         const _targetName = e.event.target.name();
         const targetNameDetail = getDetailByTargetName(_targetName);
         this.aiDbClick.emit({
@@ -15174,14 +15612,14 @@ class AITableGrid extends AITableGridBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n            (koTouchstart)=\"stageTouchstart($event)\"\n            (koTouchmove)=\"stageTouchmove($event)\"\n            (koTouchend)=\"stageTouchend($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "koTouchstart", "koTouchmove", "koTouchend", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AITableGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
+                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n            (koTouchstart)=\"stageTouchstart($event)\"\n            (koTouchmove)=\"stageTouchmove($event)\"\n            (koTouchend)=\"stageTouchend($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], verticalBarRef: [{ type: i0.ViewChild, args: ['verticalBar', { isSignal: true }] }], horizontalBarRef: [{ type: i0.ViewChild, args: ['horizontalBar', { isSignal: true }] }] } });
 
 /**