coer-elements 2.0.74 → 2.0.78

package/fesm2022/coer-elements-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, output, Component, computed, effect, signal, contentChildren, inject, Input, viewChildren, NgModule } from '@angular/core';
+import { viewChild, input, output, Component, computed, effect, Injectable, signal, contentChildren, inject, Input, viewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/router';
@@ -28,7 +28,7 @@ import * as i3$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2$7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { provideNativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
+import { NativeDateAdapter, provideNativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import * as i2$5 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$4 from '@angular/material/tabs';
@@ -38,7 +38,7 @@ import * as i3$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Tools, Strings, ControlValue, CONTROL_VALUE, HTMLElements, Dates, Screen, CoerAlert, Files, Collections, Numbers, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
+import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, HTMLElements, Screen, CoerAlert, Files, Collections, Numbers, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
 import { breakpointSIGNAL, isModalOpenSIGNAL, colorsSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
 import { Modal } from 'bootstrap';
 
@@ -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(() => {
@@ -414,6 +413,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], standalone: false, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        >{{ label() }}</mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label:empty{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}\n"] }]
         }], ctorParameters: () => [] });
 
+class DATE_ADAPTER extends NativeDateAdapter {
+    format(date) {
+        return Dates.GetFormatDate(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DATE_ADAPTER, decorators: [{
+            type: Injectable
+        }] });
 class CoerDateBox extends ControlValue {
     //Constructor
     constructor() {
@@ -569,32 +578,17 @@ class CoerDateBox extends ControlValue {
         return Tools.IsNotNull(this._externalButton()?.isDisabled)
             ? this._externalButton().isDisabled : false;
     }
+    //getter
+    get _valueDate() {
+        return typeof this._value === 'string' ? new Date(this._value) : this._value;
+    }
     //ControlValueAccessor
     SetValue(value) {
-        if (value === undefined)
-            value = null;
-        if (Tools.IsNotNull(this._value) && Tools.IsNull(value)) {
-            this.onChangeValue.emit(null);
-        }
-        if (Tools.IsNotOnlyWhiteSpace(value)) {
-            if (Dates.IsValidDate(value)) {
-                value = Dates.GetFormatDB(value);
-                this._value = new Date(value);
-                this.onChangeValue.emit(Dates.GetFormatDB(this._value));
-            }
-            else
-                this._value = null;
-        }
-        else
-            this._value = null;
+        this._value = Tools.IsNotOnlyWhiteSpace(value) && Dates.IsValidDate(value)
+            ? Dates.GetFormatDB(value) : null;
         if (typeof this._UpdateValue === 'function') {
             this._UpdateValue(this._value);
-        }
-    }
-    /** */
-    writeValue(value) {
-        if (Tools.IsNotOnlyWhiteSpace(value)) {
-            this.SetValue(value);
+            this.onChangeValue.emit(this._value);
         }
     }
     /** */
@@ -665,16 +659,46 @@ class CoerDateBox extends ControlValue {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isWritable: { classPropertyName: "isWritable", publicName: "isWritable", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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 }, 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 }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue", onClickExternalButton: "onClickExternalButton" }, providers: [
-            provideNativeDateAdapter(),
             CONTROL_VALUE(CoerDateBox),
-        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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"] }] }); }
+            provideNativeDateAdapter(),
+            { provide: DateAdapter, useClass: DATE_ADAPTER },
+            {
+                provide: MAT_DATE_FORMATS,
+                useValue: {
+                    parse: {
+                        dateInput: 'dd-MM-yyyy',
+                    },
+                    display: {
+                        dateInput: 'dd-MM-yyyy',
+                        monthYearLabel: 'MMMM yyyy',
+                        dateA11yLabel: 'dd-MM-yyyy',
+                        monthYearA11yLabel: 'MMMM yyyy',
+                    },
+                }
+            },
+        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_valueDate\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n\r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>   ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-datebox', providers: [
-                        provideNativeDateAdapter(),
+            args: [{ selector: 'coer-datebox', standalone: false, providers: [
                         CONTROL_VALUE(CoerDateBox),
-                    ], standalone: false, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
+                        provideNativeDateAdapter(),
+                        { provide: DateAdapter, useClass: DATE_ADAPTER },
+                        {
+                            provide: MAT_DATE_FORMATS,
+                            useValue: {
+                                parse: {
+                                    dateInput: 'dd-MM-yyyy',
+                                },
+                                display: {
+                                    dateInput: 'dd-MM-yyyy',
+                                    monthYearLabel: 'MMMM yyyy',
+                                    dateA11yLabel: 'dd-MM-yyyy',
+                                    monthYearA11yLabel: 'MMMM yyyy',
+                                },
+                            }
+                        },
+                    ], template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_valueDate\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n\r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>   " }]
         }], ctorParameters: () => [] });
 
 class CoerModal {
@@ -1110,6 +1134,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 +1309,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,
@@ -2513,7 +2538,7 @@ class CoerGridCell {
                             property: this.header()?.config?.property,
                             row: { ...this.row() },
                             value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                        }) ? Dates.GetDateTimeFormat(response) : response;
+                        }) ? Dates.GetFormatDateTime(response) : response;
                 }
                 if (Tools.IsNotNull(this.header().config?.typeDate)) {
                     response = (typeof this.header()?.config?.typeDate === 'boolean' && this.header()?.config?.typeDate === true) ||
@@ -2522,7 +2547,7 @@ class CoerGridCell {
                             property: this.header()?.config?.property,
                             row: { ...this.row() },
                             value: this.row()[Strings.FirstCharToLower(this.header().property)]
-                        }) ? Dates.GetDateFormat(response) : response;
+                        }) ? Dates.GetFormatDate(response) : response;
                 }
                 return response;
             }
@@ -2742,6 +2767,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 +2816,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 +3186,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 +3367,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 {