coer-elements 2.0.74 → 2.0.75

package/components/lib/coer-datebox/coer-datebox.component.d.ts

@@ -23,7 +23,7 @@ export declare class CoerDateBox extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
     isWritable: import("@angular/core").InputSignal<boolean>;
     isInvalid: import("@angular/core").InputSignal<boolean>;
     isValid: import("@angular/core").InputSignal<boolean>;

package/components/lib/coer-grid/coer-grid-body/coer-grid-body.component.d.ts

@@ -38,6 +38,7 @@ export declare class CoerGridBody<T> {
     protected onCheckboxChange: import("@angular/core").OutputEmitterRef<IGridInputCheckbox<T>>;
     protected onClickDeleteRow: import("@angular/core").OutputEmitterRef<T>;
     protected onClickEditRow: import("@angular/core").OutputEmitterRef<T>;
+    protected onClickModalRow: import("@angular/core").OutputEmitterRef<T>;
     protected onClickGoRow: import("@angular/core").OutputEmitterRef<T>;
     protected onSwitchChange: import("@angular/core").OutputEmitterRef<IGridInput<T>>;
     protected onTextboxChange: import("@angular/core").OutputEmitterRef<IGridInput<T>>;
@@ -70,12 +71,14 @@ export declare class CoerGridBody<T> {
     /** */
     RefreshCheck(): Promise<void>;
     /** */
-    protected _ShowButtonByRow(property: 'showDeleteButton' | 'showEditButton' | 'showGoButton', data?: any): boolean;
+    protected _ShowButtonByRow(property: 'showDeleteButton' | 'showEditButton' | 'showModalButton' | 'showGoButton', data?: any): boolean;
     /** */
     protected _ButtonByRowColorDelete: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
     /** */
     protected _ButtonByRowColorEdit: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
     /** */
+    protected _ButtonByRowColorModal: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
+    /** */
     protected _ButtonByRowColorGo: import("@angular/core").Signal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark">;
     /** */
     protected _GetTooltip: (prefix: string, row: any, suffix?: string) => string;
@@ -98,5 +101,5 @@ export declare class CoerGridBody<T> {
     /** */
     FocusRow(callback: (row: T) => boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerGridBody<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridBody<any>, "coer-grid-body", never, { "GetIdCalculated": { "alias": "GetIdCalculated"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "dataSourceSelected": { "alias": "dataSourceSelected"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchInner": { "alias": "searchInner"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; "isSignal": true; }; "isLoadingInner": { "alias": "isLoadingInner"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "isEnabled": { "alias": "isEnabled"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableFocusNext": { "alias": "enableFocusNext"; "required": false; "isSignal": true; }; "enableFocusRow": { "alias": "enableFocusRow"; "required": false; "isSignal": true; }; "enableHoverRow": { "alias": "enableHoverRow"; "required": false; "isSignal": true; }; "isStriped": { "alias": "isStriped"; "required": false; "isSignal": true; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; }, { "onValueChange": "onValueChange"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onInnerLoadingChange": "onInnerLoadingChange"; "onCheckboxChange": "onCheckboxChange"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickGoRow": "onClickGoRow"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onNumberboxChange": "onNumberboxChange"; "onSelectboxChange": "onSelectboxChange"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridBody<any>, "coer-grid-body", never, { "GetIdCalculated": { "alias": "GetIdCalculated"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "dataSourceSelected": { "alias": "dataSourceSelected"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchInner": { "alias": "searchInner"; "required": false; "isSignal": true; }; "checkbox": { "alias": "checkbox"; "required": false; "isSignal": true; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; "isSignal": true; }; "isLoadingInner": { "alias": "isLoadingInner"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "isEnabled": { "alias": "isEnabled"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableFocusNext": { "alias": "enableFocusNext"; "required": false; "isSignal": true; }; "enableFocusRow": { "alias": "enableFocusRow"; "required": false; "isSignal": true; }; "enableHoverRow": { "alias": "enableHoverRow"; "required": false; "isSignal": true; }; "isStriped": { "alias": "isStriped"; "required": false; "isSignal": true; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; }, { "onValueChange": "onValueChange"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onInnerLoadingChange": "onInnerLoadingChange"; "onCheckboxChange": "onCheckboxChange"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickModalRow": "onClickModalRow"; "onClickGoRow": "onClickGoRow"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onNumberboxChange": "onNumberboxChange"; "onSelectboxChange": "onSelectboxChange"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; }, never, never, false, never>;
 }

package/components/lib/coer-grid/coer-grid.extension.d.ts

@@ -53,6 +53,7 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected onCheckboxChange: import("@angular/core").OutputEmitterRef<IGridInputCheckbox<T>>;
     protected onClickDeleteRow: import("@angular/core").OutputEmitterRef<T>;
     protected onClickEditRow: import("@angular/core").OutputEmitterRef<T>;
+    protected onClickModalRow: import("@angular/core").OutputEmitterRef<T>;
     protected onClickGoRow: import("@angular/core").OutputEmitterRef<T>;
     protected onKeyupEnter: import("@angular/core").OutputEmitterRef<IGridKeyupEnter>;
     protected onKeyupEnterLast: import("@angular/core").OutputEmitterRef<IGridKeyupEnter>;
@@ -82,5 +83,5 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected _buildRow<T>(data: any): T;
     protected get _height(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerGridExtension<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridExtension<any>, "coer-grid-extension", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "cleanColumnName": { "alias": "cleanColumnName"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; }; "exportButton": { "alias": "exportButton"; "required": false; }; "importButton": { "alias": "importButton"; "required": false; }; "addButton": { "alias": "addButton"; "required": false; }; "saveButton": { "alias": "saveButton"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "rowsByPage": { "alias": "rowsByPage"; "required": false; "isSignal": true; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableFocusNext": { "alias": "enableFocusNext"; "required": false; "isSignal": true; }; "enableFocusRow": { "alias": "enableFocusRow"; "required": false; "isSignal": true; }; "enableHoverRow": { "alias": "enableHoverRow"; "required": false; "isSignal": true; }; "isStriped": { "alias": "isStriped"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; }, { "onClickExport": "onClickExport"; "onClickImport": "onClickImport"; "onClickAdd": "onClickAdd"; "onClickSave": "onClickSave"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onCheckboxChange": "onCheckboxChange"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickGoRow": "onClickGoRow"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onNumberboxChange": "onNumberboxChange"; "onSelectboxChange": "onSelectboxChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridExtension<any>, "coer-grid-extension", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "cleanColumnName": { "alias": "cleanColumnName"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; }; "exportButton": { "alias": "exportButton"; "required": false; }; "importButton": { "alias": "importButton"; "required": false; }; "addButton": { "alias": "addButton"; "required": false; }; "saveButton": { "alias": "saveButton"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "rowsByPage": { "alias": "rowsByPage"; "required": false; "isSignal": true; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableFocusNext": { "alias": "enableFocusNext"; "required": false; "isSignal": true; }; "enableFocusRow": { "alias": "enableFocusRow"; "required": false; "isSignal": true; }; "enableHoverRow": { "alias": "enableHoverRow"; "required": false; "isSignal": true; }; "isStriped": { "alias": "isStriped"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; }, { "onClickExport": "onClickExport"; "onClickImport": "onClickImport"; "onClickAdd": "onClickAdd"; "onClickSave": "onClickSave"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onCheckboxChange": "onCheckboxChange"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickModalRow": "onClickModalRow"; "onClickGoRow": "onClickGoRow"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onNumberboxChange": "onNumberboxChange"; "onSelectboxChange": "onSelectboxChange"; }, never, never, true, never>;
 }

package/components/lib/coer-modal/coer-modal.component.d.ts

@@ -13,10 +13,10 @@ export declare class CoerModal implements AfterViewInit {
     title: import("@angular/core").InputSignal<string>;
     icon: import("@angular/core").InputSignal<string>;
     showCloseButton: import("@angular/core").InputSignal<boolean>;
-    width: import("@angular/core").InputSignal<"small" | "auto" | "full">;
+    width: import("@angular/core").InputSignal<"auto" | "full" | "small">;
     height: import("@angular/core").InputSignal<string>;
     maxHeight: import("@angular/core").InputSignal<string>;
-    verticalPosition: import("@angular/core").InputSignal<"top" | "middle" | "bottom">;
+    verticalPosition: import("@angular/core").InputSignal<"top" | "bottom" | "middle">;
     onOpen: import("@angular/core").OutputEmitterRef<void>;
     onClose: import("@angular/core").OutputEmitterRef<void>;
     protected IsNull: (value: any) => boolean;

package/components/lib/coer-numberbox/coer-numberbox.component.d.ts

@@ -16,7 +16,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
     min: import("@angular/core").InputSignal<number>;
     max: import("@angular/core").InputSignal<number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

package/components/lib/coer-secretbox/coer-secretbox.component.d.ts

@@ -17,7 +17,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

package/components/lib/coer-textarea/coer-textarea.component.d.ts

@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

package/components/lib/coer-textbox/coer-textbox.component.d.ts

@@ -16,7 +16,7 @@ export declare class CoerTextBox extends ControlValue implements AfterViewInit,
     value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"left" | "center" | "right">;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

package/fesm2022/coer-elements-components.mjs

@@ -219,8 +219,8 @@ class CoerButton {
         });
         //computed
         this._icon = computed(() => {
-            const icon = Tools.IsNotNull(this.icon()) ? this.icon() : '';
-            switch (this.icon()) {
+            const icon = Tools.IsNotOnlyWhiteSpace(this.icon()) ? this.icon() : '';
+            switch (icon) {
                 case 'new': return 'icon-plus';
                 case 'save': return 'icon-disk-floppy icon-fill';
                 case 'cancel': return 'icon-x';
@@ -234,8 +234,7 @@ class CoerButton {
                 case 'pointer': return 'icon-pointer icon-fill';
             }
             return ['icon', 'icon-outline', 'icon-no-border'].includes(this.type())
-                && Tools.IsOnlyWhiteSpace(icon)
-                ? 'icon-pointer icon-fill' : icon;
+                && Tools.IsOnlyWhiteSpace(icon) ? 'icon-pointer icon-fill' : icon;
         });
         //computed
         this._buttonType = computed(() => {
@@ -1110,6 +1109,7 @@ class CoerGridExtension extends ControlValue {
         this.onCheckboxChange = output();
         this.onClickDeleteRow = output();
         this.onClickEditRow = output();
+        this.onClickModalRow = output();
         this.onClickGoRow = output();
         this.onKeyupEnter = output();
         this.onKeyupEnterLast = output();
@@ -1284,7 +1284,7 @@ class CoerGridExtension extends ControlValue {
             : this.height();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }, { propertyName: "_coerGridFooter", first: true, predicate: ["coerGridFooter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickModalRow: "onClickModalRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }, { propertyName: "_coerGridFooter", first: true, predicate: ["coerGridFooter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, decorators: [{
             type: Component,
@@ -2742,6 +2742,7 @@ class CoerGridBody {
         this.onCheckboxChange = output();
         this.onClickDeleteRow = output();
         this.onClickEditRow = output();
+        this.onClickModalRow = output();
         this.onClickGoRow = output();
         this.onSwitchChange = output();
         this.onTextboxChange = output();
@@ -2790,6 +2791,12 @@ class CoerGridBody {
                 : 'primary';
         });
         /** */
+        this._ButtonByRowColorModal = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.buttonByRow()?.modalButtonColor)
+                ? this.buttonByRow()?.modalButtonColor
+                : 'primary';
+        });
+        /** */
         this._ButtonByRowColorGo = computed(() => {
             return Tools.IsNotOnlyWhiteSpace(this.buttonByRow()?.goButtonColor)
                 ? this.buttonByRow()?.goButtonColor
@@ -3154,11 +3161,11 @@ class CoerGridBody {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridBody, isStandalone: false, selector: "coer-grid-body", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, isEnabled: { classPropertyName: "isEnabled", publicName: "isEnabled", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onInnerLoadingChange: "onInnerLoadingChange", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast" }, viewQueries: [{ propertyName: "_coerCheckboxList", predicate: CoerCheckbox, descendants: true, isSignal: true }, { propertyName: "_coerGridCellList", predicate: (CoerGridCell), descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"coer-grid-body\">\r\n    <table [ngClass]=\"{ \r\n        'table'   : true,\r\n        'table-sm': true, \r\n        'table-responsive': true,\r\n        'table-striped'   : isStriped()\r\n        }\">\r\n        \r\n        <thead>\r\n            <tr>\r\n                <!-- Checkbox All -->\r\n                @if(_showCheckbox()) {\r\n                    <th class=\"action-column\" scope=\"col\">    \r\n                        <div class=\"action-column-content\">\r\n                            <div [ngClass]=\"{ 'display-none': _isInvisibleCheckboxAll }\">\r\n                                <coer-checkbox\r\n                                    [id]=\"GetIdCalculated()(-1, -1, 'checkbox-all')\"\r\n                                    [ignoreDataBinding]=\"true\"   \r\n                                    (onChange)=\"_ClickCheckAll($event)\"\r\n                                ></coer-checkbox>\r\n                            </div> \r\n    \r\n                            <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                            </div>   \r\n                        </div>\r\n                    </th>\r\n                }\r\n    \r\n                <!-- Dynamic Grid Column -->\r\n                @for(header of columns(); track header.indexColumn) {\r\n                    <th scope=\"col\" [class]=\"_cursorHeader()\" (dblclick)=\"_SortToggle(header.property)\" [ngStyle]=\"{ 'width': header.config?.width || 'auto' }\">                        \r\n                        <div class=\"th-content\">\r\n                            <span> {{ header.columnName }} </span>\r\n                            <i [class]=\"_IconShortHeader(header.property)\"></i>\r\n                            <i [class]=\"_IconSearchHeader(header.property)\"></i>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                    \r\n                @if(_ShowButtonByRow('showDeleteButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n                   \r\n                @if(_ShowButtonByRow('showEditButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }    \r\n                \r\n                @if(_ShowButtonByRow('showGoButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n    \r\n        <!-- body -->\r\n        @for(group of dataSource(); track group.indexGroup) {\r\n            <tbody>     \r\n                @for(row of group.rows; track row.indexRow) {\r\n                    <tr [id]=\"GetIdCalculated()(row.indexRow, 0, 'row')\" \r\n                        (click)=\"_focusRowIndex.set(row.indexRow)\"\r\n                        [ngClass]=\"{ \r\n                            'loading'  : isLoading(),\r\n                            'row-focus': (row.indexRow == _focusRowIndex() && enableFocusRow()),\r\n                            'row-hover-none': !enableHoverRow()\r\n                        }\">\r\n    \r\n                        <!-- CheckBox Column -->\r\n                        @if(_showCheckbox()) {\r\n                            <td class=\"action-column\">\r\n                                <div class=\"action-column-content\">\r\n                                    <div [ngClass]=\"{ 'display-none': _isLoadingInner }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"GetIdCalculated()(row.indexRow, 0, 'checkbox')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"!isEnabled()\"\r\n                                            (onChange)=\"_ClickCheck($event, row)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n    \r\n                                    <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                        <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                                    </div>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Dynamic Column -->\r\n                        @for(header of columns(); track header.indexColumn) {\r\n                            <td class=\"td-content\">\r\n                                <coer-grid-cell\r\n                                    [id]=\"GetIdCalculated()(row.indexRow, header.indexColumn)\"\r\n                                    [header]=\"header\"\r\n                                    [row]=\"row\"\r\n                                    [checkOnRow]=\"_checkOnRow()\"\r\n                                    [enableInputs]=\"isEnabled() && !_isLoadingInner\"\r\n                                    (onClickRow)=\"isEnabled() ? _ClickOnRow(row) : null\"\r\n                                    (onDoubleClickRow)=\"isEnabled() ? onDoubleClickRow.emit(row) : null\"\r\n                                    (onSwitchChange)=\"onSwitchChange.emit($event)\"\r\n                                    (onTextboxChange)=\"onTextboxChange.emit($event)\"\r\n                                    (onNumberboxChange)=\"onNumberboxChange.emit($event)\"\r\n                                    (onSelectboxChange)=\"onSelectboxChange.emit($event)\"\r\n                                    (onKeyupEnter)=\"_NextInput(row.indexRow, header.indexColumn, $event)\"\r\n                                ></coer-grid-cell>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Delete Button -->\r\n                        @if(_ShowButtonByRow('showDeleteButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showDeleteButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorDelete()\"\r\n                                            icon=\"delete\"\r\n                                            [tooltip]=\"_GetTooltip('Delete', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isReadonly]=\"isReadonly()\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Edit Button -->\r\n                        @if(_ShowButtonByRow('showEditButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showEditButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorEdit()\"\r\n                                            icon=\"edit\"\r\n                                            [tooltip]=\"_GetTooltip('Edit', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickEditRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Go Button -->\r\n                        @if(_ShowButtonByRow('showGoButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showGoButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorGo()\"\r\n                                            icon=\"go\"\r\n                                            [tooltip]=\"_GetTooltip('Go to', row, 'detail')\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickGoRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        }\r\n    </table> \r\n</section>", styles: ["section.coer-grid-body table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}section.coer-grid-body table thead tr th{position:sticky!important;top:0!important;z-index:100!important;vertical-align:middle!important;background-color:var(--gray)!important;color:var(--smoke)!important;overflow:hidden;white-space:nowrap!important;word-wrap:break-word;text-overflow:ellipsis;min-width:30px!important;max-height:30px!important;height:30px!important}section.coer-grid-body table thead tr th div.th-content{display:flex!important;align-items:center!important}section.coer-grid-body table thead tr th div.th-content::selection{background-color:transparent!important}section.coer-grid-body table tbody tr td{border:0px!important;white-space:break-spaces!important;text-overflow:ellipsis!important;overflow:hidden!important;min-height:30px!important;background-color:inherit!important}section.coer-grid-body table tbody tr td.td-content{padding:0!important;vertical-align:middle!important;overflow:visible!important}section.coer-grid-body table tbody tr:not(.row-focus):not(.row-hover-none):hover td{color:#000!important;background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}section.coer-grid-body table tbody tr.row-focus td{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}section.coer-grid-body table th.action-column,section.coer-grid-body table td.action-column{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;overflow:hidden!important;vertical-align:middle!important}section.coer-grid-body table th.action-column div.action-column-content,section.coer-grid-body table td.action-column div.action-column-content{display:flex!important;align-items:center!important;justify-content:center!important;max-height:30px!important;height:30px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerGridCell, selector: "coer-grid-cell", inputs: ["id", "header", "row", "checkOnRow", "enableInputs"], outputs: ["onClickRow", "onDoubleClickRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridBody, isStandalone: false, selector: "coer-grid-body", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, isEnabled: { classPropertyName: "isEnabled", publicName: "isEnabled", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onInnerLoadingChange: "onInnerLoadingChange", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickModalRow: "onClickModalRow", onClickGoRow: "onClickGoRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast" }, viewQueries: [{ propertyName: "_coerCheckboxList", predicate: CoerCheckbox, descendants: true, isSignal: true }, { propertyName: "_coerGridCellList", predicate: (CoerGridCell), descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"coer-grid-body\">\r\n    <table [ngClass]=\"{ \r\n        'table'   : true,\r\n        'table-sm': true, \r\n        'table-responsive': true,\r\n        'table-striped'   : isStriped()\r\n        }\">\r\n        \r\n        <thead>\r\n            <tr>\r\n                <!-- Checkbox All -->\r\n                @if(_showCheckbox()) {\r\n                    <th class=\"action-column\" scope=\"col\">    \r\n                        <div class=\"action-column-content\">\r\n                            <div [ngClass]=\"{ 'display-none': _isInvisibleCheckboxAll }\">\r\n                                <coer-checkbox\r\n                                    [id]=\"GetIdCalculated()(-1, -1, 'checkbox-all')\"\r\n                                    [ignoreDataBinding]=\"true\"   \r\n                                    (onChange)=\"_ClickCheckAll($event)\"\r\n                                ></coer-checkbox>\r\n                            </div> \r\n    \r\n                            <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                            </div>   \r\n                        </div>\r\n                    </th>\r\n                }\r\n    \r\n                <!-- Dynamic Grid Column -->\r\n                @for(header of columns(); track header.indexColumn) {\r\n                    <th scope=\"col\" [class]=\"_cursorHeader()\" (dblclick)=\"_SortToggle(header.property)\" [ngStyle]=\"{ 'width': header.config?.width || 'auto' }\">                        \r\n                        <div class=\"th-content\">\r\n                            <span> {{ header.columnName }} </span>\r\n                            <i [class]=\"_IconShortHeader(header.property)\"></i>\r\n                            <i [class]=\"_IconSearchHeader(header.property)\"></i>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                    \r\n                @if(_ShowButtonByRow('showDeleteButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n                   \r\n                @if(_ShowButtonByRow('showEditButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }    \r\n\r\n                @if(_ShowButtonByRow('showModalButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                } \r\n                \r\n                @if(_ShowButtonByRow('showGoButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n    \r\n        <!-- body -->\r\n        @for(group of dataSource(); track group.indexGroup) {\r\n            <tbody>     \r\n                @for(row of group.rows; track row.indexRow) {\r\n                    <tr [id]=\"GetIdCalculated()(row.indexRow, 0, 'row')\" \r\n                        (click)=\"_focusRowIndex.set(row.indexRow)\"\r\n                        [ngClass]=\"{ \r\n                            'loading'  : isLoading(),\r\n                            'row-focus': (row.indexRow == _focusRowIndex() && enableFocusRow()),\r\n                            'row-hover-none': !enableHoverRow()\r\n                        }\">\r\n    \r\n                        <!-- CheckBox Column -->\r\n                        @if(_showCheckbox()) {\r\n                            <td class=\"action-column\">\r\n                                <div class=\"action-column-content\">\r\n                                    <div [ngClass]=\"{ 'display-none': _isLoadingInner }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"GetIdCalculated()(row.indexRow, 0, 'checkbox')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"!isEnabled()\"\r\n                                            (onChange)=\"_ClickCheck($event, row)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n    \r\n                                    <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                        <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                                    </div>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Dynamic Column -->\r\n                        @for(header of columns(); track header.indexColumn) {\r\n                            <td class=\"td-content\">\r\n                                <coer-grid-cell\r\n                                    [id]=\"GetIdCalculated()(row.indexRow, header.indexColumn)\"\r\n                                    [header]=\"header\"\r\n                                    [row]=\"row\"\r\n                                    [checkOnRow]=\"_checkOnRow()\"\r\n                                    [enableInputs]=\"isEnabled() && !_isLoadingInner\"\r\n                                    (onClickRow)=\"isEnabled() ? _ClickOnRow(row) : null\"\r\n                                    (onDoubleClickRow)=\"isEnabled() ? onDoubleClickRow.emit(row) : null\"\r\n                                    (onSwitchChange)=\"onSwitchChange.emit($event)\"\r\n                                    (onTextboxChange)=\"onTextboxChange.emit($event)\"\r\n                                    (onNumberboxChange)=\"onNumberboxChange.emit($event)\"\r\n                                    (onSelectboxChange)=\"onSelectboxChange.emit($event)\"\r\n                                    (onKeyupEnter)=\"_NextInput(row.indexRow, header.indexColumn, $event)\"\r\n                                ></coer-grid-cell>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Delete Button -->\r\n                        @if(_ShowButtonByRow('showDeleteButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showDeleteButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorDelete()\"\r\n                                            icon=\"delete\"\r\n                                            [tooltip]=\"_GetTooltip('Delete', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isReadonly]=\"isReadonly()\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Edit Button -->\r\n                        @if(_ShowButtonByRow('showEditButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showEditButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorEdit()\"\r\n                                            icon=\"edit\"\r\n                                            [tooltip]=\"_GetTooltip('Edit', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickEditRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n\r\n\r\n                        <!-- Modal Button -->\r\n                        @if(_ShowButtonByRow('showModalButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showModalButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorModal()\"\r\n                                            icon=\"icon-modal icon-fill\"\r\n                                            [tooltip]=\"_GetTooltip('Open', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickModalRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Go Button -->\r\n                        @if(_ShowButtonByRow('showGoButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showGoButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorGo()\"\r\n                                            icon=\"go\"\r\n                                            [tooltip]=\"_GetTooltip('Go to', row, 'detail')\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickGoRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        }\r\n    </table> \r\n</section>", styles: ["section.coer-grid-body table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}section.coer-grid-body table thead tr th{position:sticky!important;top:0!important;z-index:100!important;vertical-align:middle!important;background-color:var(--gray)!important;color:var(--smoke)!important;overflow:hidden;white-space:nowrap!important;word-wrap:break-word;text-overflow:ellipsis;min-width:30px!important;max-height:30px!important;height:30px!important}section.coer-grid-body table thead tr th div.th-content{display:flex!important;align-items:center!important}section.coer-grid-body table thead tr th div.th-content::selection{background-color:transparent!important}section.coer-grid-body table tbody tr td{border:0px!important;white-space:break-spaces!important;text-overflow:ellipsis!important;overflow:hidden!important;min-height:30px!important;background-color:inherit!important}section.coer-grid-body table tbody tr td.td-content{padding:0!important;vertical-align:middle!important;overflow:visible!important}section.coer-grid-body table tbody tr:not(.row-focus):not(.row-hover-none):hover td{color:#000!important;background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}section.coer-grid-body table tbody tr.row-focus td{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}section.coer-grid-body table th.action-column,section.coer-grid-body table td.action-column{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;overflow:hidden!important;vertical-align:middle!important}section.coer-grid-body table th.action-column div.action-column-content,section.coer-grid-body table td.action-column div.action-column-content{display:flex!important;align-items:center!important;justify-content:center!important;max-height:30px!important;height:30px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerGridCell, selector: "coer-grid-cell", inputs: ["id", "header", "row", "checkOnRow", "enableInputs"], outputs: ["onClickRow", "onDoubleClickRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridBody, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid-body', standalone: false, template: "<section class=\"coer-grid-body\">\r\n    <table [ngClass]=\"{ \r\n        'table'   : true,\r\n        'table-sm': true, \r\n        'table-responsive': true,\r\n        'table-striped'   : isStriped()\r\n        }\">\r\n        \r\n        <thead>\r\n            <tr>\r\n                <!-- Checkbox All -->\r\n                @if(_showCheckbox()) {\r\n                    <th class=\"action-column\" scope=\"col\">    \r\n                        <div class=\"action-column-content\">\r\n                            <div [ngClass]=\"{ 'display-none': _isInvisibleCheckboxAll }\">\r\n                                <coer-checkbox\r\n                                    [id]=\"GetIdCalculated()(-1, -1, 'checkbox-all')\"\r\n                                    [ignoreDataBinding]=\"true\"   \r\n                                    (onChange)=\"_ClickCheckAll($event)\"\r\n                                ></coer-checkbox>\r\n                            </div> \r\n    \r\n                            <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                            </div>   \r\n                        </div>\r\n                    </th>\r\n                }\r\n    \r\n                <!-- Dynamic Grid Column -->\r\n                @for(header of columns(); track header.indexColumn) {\r\n                    <th scope=\"col\" [class]=\"_cursorHeader()\" (dblclick)=\"_SortToggle(header.property)\" [ngStyle]=\"{ 'width': header.config?.width || 'auto' }\">                        \r\n                        <div class=\"th-content\">\r\n                            <span> {{ header.columnName }} </span>\r\n                            <i [class]=\"_IconShortHeader(header.property)\"></i>\r\n                            <i [class]=\"_IconSearchHeader(header.property)\"></i>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                    \r\n                @if(_ShowButtonByRow('showDeleteButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n                   \r\n                @if(_ShowButtonByRow('showEditButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }    \r\n                \r\n                @if(_ShowButtonByRow('showGoButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n    \r\n        <!-- body -->\r\n        @for(group of dataSource(); track group.indexGroup) {\r\n            <tbody>     \r\n                @for(row of group.rows; track row.indexRow) {\r\n                    <tr [id]=\"GetIdCalculated()(row.indexRow, 0, 'row')\" \r\n                        (click)=\"_focusRowIndex.set(row.indexRow)\"\r\n                        [ngClass]=\"{ \r\n                            'loading'  : isLoading(),\r\n                            'row-focus': (row.indexRow == _focusRowIndex() && enableFocusRow()),\r\n                            'row-hover-none': !enableHoverRow()\r\n                        }\">\r\n    \r\n                        <!-- CheckBox Column -->\r\n                        @if(_showCheckbox()) {\r\n                            <td class=\"action-column\">\r\n                                <div class=\"action-column-content\">\r\n                                    <div [ngClass]=\"{ 'display-none': _isLoadingInner }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"GetIdCalculated()(row.indexRow, 0, 'checkbox')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"!isEnabled()\"\r\n                                            (onChange)=\"_ClickCheck($event, row)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n    \r\n                                    <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                        <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                                    </div>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Dynamic Column -->\r\n                        @for(header of columns(); track header.indexColumn) {\r\n                            <td class=\"td-content\">\r\n                                <coer-grid-cell\r\n                                    [id]=\"GetIdCalculated()(row.indexRow, header.indexColumn)\"\r\n                                    [header]=\"header\"\r\n                                    [row]=\"row\"\r\n                                    [checkOnRow]=\"_checkOnRow()\"\r\n                                    [enableInputs]=\"isEnabled() && !_isLoadingInner\"\r\n                                    (onClickRow)=\"isEnabled() ? _ClickOnRow(row) : null\"\r\n                                    (onDoubleClickRow)=\"isEnabled() ? onDoubleClickRow.emit(row) : null\"\r\n                                    (onSwitchChange)=\"onSwitchChange.emit($event)\"\r\n                                    (onTextboxChange)=\"onTextboxChange.emit($event)\"\r\n                                    (onNumberboxChange)=\"onNumberboxChange.emit($event)\"\r\n                                    (onSelectboxChange)=\"onSelectboxChange.emit($event)\"\r\n                                    (onKeyupEnter)=\"_NextInput(row.indexRow, header.indexColumn, $event)\"\r\n                                ></coer-grid-cell>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Delete Button -->\r\n                        @if(_ShowButtonByRow('showDeleteButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showDeleteButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorDelete()\"\r\n                                            icon=\"delete\"\r\n                                            [tooltip]=\"_GetTooltip('Delete', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isReadonly]=\"isReadonly()\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Edit Button -->\r\n                        @if(_ShowButtonByRow('showEditButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showEditButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorEdit()\"\r\n                                            icon=\"edit\"\r\n                                            [tooltip]=\"_GetTooltip('Edit', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickEditRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Go Button -->\r\n                        @if(_ShowButtonByRow('showGoButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showGoButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorGo()\"\r\n                                            icon=\"go\"\r\n                                            [tooltip]=\"_GetTooltip('Go to', row, 'detail')\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickGoRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        }\r\n    </table> \r\n</section>", styles: ["section.coer-grid-body table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}section.coer-grid-body table thead tr th{position:sticky!important;top:0!important;z-index:100!important;vertical-align:middle!important;background-color:var(--gray)!important;color:var(--smoke)!important;overflow:hidden;white-space:nowrap!important;word-wrap:break-word;text-overflow:ellipsis;min-width:30px!important;max-height:30px!important;height:30px!important}section.coer-grid-body table thead tr th div.th-content{display:flex!important;align-items:center!important}section.coer-grid-body table thead tr th div.th-content::selection{background-color:transparent!important}section.coer-grid-body table tbody tr td{border:0px!important;white-space:break-spaces!important;text-overflow:ellipsis!important;overflow:hidden!important;min-height:30px!important;background-color:inherit!important}section.coer-grid-body table tbody tr td.td-content{padding:0!important;vertical-align:middle!important;overflow:visible!important}section.coer-grid-body table tbody tr:not(.row-focus):not(.row-hover-none):hover td{color:#000!important;background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}section.coer-grid-body table tbody tr.row-focus td{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}section.coer-grid-body table th.action-column,section.coer-grid-body table td.action-column{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;overflow:hidden!important;vertical-align:middle!important}section.coer-grid-body table th.action-column div.action-column-content,section.coer-grid-body table td.action-column div.action-column-content{display:flex!important;align-items:center!important;justify-content:center!important;max-height:30px!important;height:30px!important}\n"] }]
+            args: [{ selector: 'coer-grid-body', standalone: false, template: "<section class=\"coer-grid-body\">\r\n    <table [ngClass]=\"{ \r\n        'table'   : true,\r\n        'table-sm': true, \r\n        'table-responsive': true,\r\n        'table-striped'   : isStriped()\r\n        }\">\r\n        \r\n        <thead>\r\n            <tr>\r\n                <!-- Checkbox All -->\r\n                @if(_showCheckbox()) {\r\n                    <th class=\"action-column\" scope=\"col\">    \r\n                        <div class=\"action-column-content\">\r\n                            <div [ngClass]=\"{ 'display-none': _isInvisibleCheckboxAll }\">\r\n                                <coer-checkbox\r\n                                    [id]=\"GetIdCalculated()(-1, -1, 'checkbox-all')\"\r\n                                    [ignoreDataBinding]=\"true\"   \r\n                                    (onChange)=\"_ClickCheckAll($event)\"\r\n                                ></coer-checkbox>\r\n                            </div> \r\n    \r\n                            <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                            </div>   \r\n                        </div>\r\n                    </th>\r\n                }\r\n    \r\n                <!-- Dynamic Grid Column -->\r\n                @for(header of columns(); track header.indexColumn) {\r\n                    <th scope=\"col\" [class]=\"_cursorHeader()\" (dblclick)=\"_SortToggle(header.property)\" [ngStyle]=\"{ 'width': header.config?.width || 'auto' }\">                        \r\n                        <div class=\"th-content\">\r\n                            <span> {{ header.columnName }} </span>\r\n                            <i [class]=\"_IconShortHeader(header.property)\"></i>\r\n                            <i [class]=\"_IconSearchHeader(header.property)\"></i>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                    \r\n                @if(_ShowButtonByRow('showDeleteButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n                   \r\n                @if(_ShowButtonByRow('showEditButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }    \r\n\r\n                @if(_ShowButtonByRow('showModalButton')) { \r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                } \r\n                \r\n                @if(_ShowButtonByRow('showGoButton')) {\r\n                    <th class=\"action-column\" scope=\"col\"></th>\r\n                }\r\n            </tr>\r\n        </thead>\r\n    \r\n        <!-- body -->\r\n        @for(group of dataSource(); track group.indexGroup) {\r\n            <tbody>     \r\n                @for(row of group.rows; track row.indexRow) {\r\n                    <tr [id]=\"GetIdCalculated()(row.indexRow, 0, 'row')\" \r\n                        (click)=\"_focusRowIndex.set(row.indexRow)\"\r\n                        [ngClass]=\"{ \r\n                            'loading'  : isLoading(),\r\n                            'row-focus': (row.indexRow == _focusRowIndex() && enableFocusRow()),\r\n                            'row-hover-none': !enableHoverRow()\r\n                        }\">\r\n    \r\n                        <!-- CheckBox Column -->\r\n                        @if(_showCheckbox()) {\r\n                            <td class=\"action-column\">\r\n                                <div class=\"action-column-content\">\r\n                                    <div [ngClass]=\"{ 'display-none': _isLoadingInner }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"GetIdCalculated()(row.indexRow, 0, 'checkbox')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"!isEnabled()\"\r\n                                            (onChange)=\"_ClickCheck($event, row)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n    \r\n                                    <div [class]=\"_isLoadingInner ? 'display-contents' : 'display-none'\">\r\n                                        <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                                    </div>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Dynamic Column -->\r\n                        @for(header of columns(); track header.indexColumn) {\r\n                            <td class=\"td-content\">\r\n                                <coer-grid-cell\r\n                                    [id]=\"GetIdCalculated()(row.indexRow, header.indexColumn)\"\r\n                                    [header]=\"header\"\r\n                                    [row]=\"row\"\r\n                                    [checkOnRow]=\"_checkOnRow()\"\r\n                                    [enableInputs]=\"isEnabled() && !_isLoadingInner\"\r\n                                    (onClickRow)=\"isEnabled() ? _ClickOnRow(row) : null\"\r\n                                    (onDoubleClickRow)=\"isEnabled() ? onDoubleClickRow.emit(row) : null\"\r\n                                    (onSwitchChange)=\"onSwitchChange.emit($event)\"\r\n                                    (onTextboxChange)=\"onTextboxChange.emit($event)\"\r\n                                    (onNumberboxChange)=\"onNumberboxChange.emit($event)\"\r\n                                    (onSelectboxChange)=\"onSelectboxChange.emit($event)\"\r\n                                    (onKeyupEnter)=\"_NextInput(row.indexRow, header.indexColumn, $event)\"\r\n                                ></coer-grid-cell>\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Delete Button -->\r\n                        @if(_ShowButtonByRow('showDeleteButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showDeleteButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorDelete()\"\r\n                                            icon=\"delete\"\r\n                                            [tooltip]=\"_GetTooltip('Delete', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isReadonly]=\"isReadonly()\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Edit Button -->\r\n                        @if(_ShowButtonByRow('showEditButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showEditButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorEdit()\"\r\n                                            icon=\"edit\"\r\n                                            [tooltip]=\"_GetTooltip('Edit', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickEditRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n\r\n\r\n                        <!-- Modal Button -->\r\n                        @if(_ShowButtonByRow('showModalButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showModalButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorModal()\"\r\n                                            icon=\"icon-modal icon-fill\"\r\n                                            [tooltip]=\"_GetTooltip('Open', row)\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickModalRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n    \r\n                        <!-- Go Button -->\r\n                        @if(_ShowButtonByRow('showGoButton')) {\r\n                            <td class=\"action-column\">\r\n                                @if(_ShowButtonByRow('showGoButton', row)) {\r\n                                    <div class=\"action-column-content\">\r\n                                        <coer-button\r\n                                            type=\"icon-no-border\"\r\n                                            [color]=\"_ButtonByRowColorGo()\"\r\n                                            icon=\"go\"\r\n                                            [tooltip]=\"_GetTooltip('Go to', row, 'detail')\" \r\n                                            tooltipPosition=\"left\"\r\n                                            [isDisabled]=\"_isLoadingInner\"\r\n                                            (onClick)=\"onClickGoRow.emit(row)\"\r\n                                        ></coer-button>\r\n                                    </div>\r\n                                }\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        }\r\n    </table> \r\n</section>", styles: ["section.coer-grid-body table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}section.coer-grid-body table thead tr th{position:sticky!important;top:0!important;z-index:100!important;vertical-align:middle!important;background-color:var(--gray)!important;color:var(--smoke)!important;overflow:hidden;white-space:nowrap!important;word-wrap:break-word;text-overflow:ellipsis;min-width:30px!important;max-height:30px!important;height:30px!important}section.coer-grid-body table thead tr th div.th-content{display:flex!important;align-items:center!important}section.coer-grid-body table thead tr th div.th-content::selection{background-color:transparent!important}section.coer-grid-body table tbody tr td{border:0px!important;white-space:break-spaces!important;text-overflow:ellipsis!important;overflow:hidden!important;min-height:30px!important;background-color:inherit!important}section.coer-grid-body table tbody tr td.td-content{padding:0!important;vertical-align:middle!important;overflow:visible!important}section.coer-grid-body table tbody tr:not(.row-focus):not(.row-hover-none):hover td{color:#000!important;background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}section.coer-grid-body table tbody tr.row-focus td{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}section.coer-grid-body table th.action-column,section.coer-grid-body table td.action-column{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;overflow:hidden!important;vertical-align:middle!important}section.coer-grid-body table th.action-column div.action-column-content,section.coer-grid-body table td.action-column div.action-column-content{display:flex!important;align-items:center!important;justify-content:center!important;max-height:30px!important;height:30px!important}\n"] }]
         }] });
 
 class CoerGridfooter {
@@ -3335,11 +3342,11 @@ class CoerGrid extends CoerGridExtension {
         return dataSource.shift();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["GetIdCalculated", "footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickModalRow)=\"onClickModalRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickModalRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["GetIdCalculated", "footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
+            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickModalRow)=\"onClickModalRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
         }] });
 
 class CoerList {