coer-elements 2.0.21 → 2.0.22

package/fesm2022/coer-elements-components.mjs

@@ -36,7 +36,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import * as i2$a from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { Tools, ControlValue, CONTROL_VALUE, DateTime, Screen, ElementsHTML, CoerAlert, Files, StringTools, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
+import { Tools, ControlValue, CONTROL_VALUE, Dates, Screen, HTMLElements, CoerAlert, Files, Numbers, Strings, Collections, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
 import { Tooltip, Modal } from 'bootstrap';
 import { isModalOpenSIGNAL, menuSelectedSIGNAL, breakpointSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
 
@@ -390,7 +390,7 @@ class CoerDateBox extends ControlValue {
     //getter
     get value() {
         return Tools.IsNotOnlyWhiteSpace(this._value)
-            ? DateTime.GetFormatDB(this._value)
+            ? Dates.GetFormatDB(this._value)
             : null;
     }
     //getter
@@ -409,10 +409,10 @@ class CoerDateBox extends ControlValue {
             this.onChangeValue.emit(null);
         }
         if (Tools.IsNotOnlyWhiteSpace(value)) {
-            if (DateTime.IsValidDate(value)) {
-                value = DateTime.GetFormatDB(value);
+            if (Dates.IsValidDate(value)) {
+                value = Dates.GetFormatDB(value);
                 this._value = new Date(value);
-                this.onChangeValue.emit(DateTime.GetFormatDB(this._value));
+                this.onChangeValue.emit(Dates.GetFormatDB(this._value));
             }
             else
                 this._value = null;
@@ -600,7 +600,7 @@ class CoerModal {
     Close() {
         this._modal.hide();
         if (this._isOpen) {
-            ElementsHTML.GetElement(`#${this._id}-button-close`)?.blur();
+            HTMLElements.GetElement(`#${this._id}-button-close`)?.blur();
             this._isOpen = false;
             this._isModalOpen.set(false);
             Tools.Sleep(1000).then(() => this.onClose.emit());
@@ -1161,7 +1161,7 @@ class CoerSelectbox extends ControlValue {
     //getter
     get _dropDownWidth() {
         return Tools.IsNotNull(this._container)
-            ? ElementsHTML.GetElementWidth(this._container) : '100%';
+            ? HTMLElements.GetElementWidth(this._container) : '100%';
     }
     //getter
     get _showCancel() {
@@ -1636,9 +1636,9 @@ class CoerGridExtension extends ControlValue {
         this._indexFocus = signal(0);
         this._sort = signal({ columnName: '', direction: 'none', icon: '' });
         //Generic Tools
-        this.GetNumericFormat = Tools.GetNumericFormat;
-        this.GetElementWidth = ElementsHTML.GetElementWidth;
-        this.GetElementHeight = ElementsHTML.GetElementHeight;
+        this.GetNumericFormat = Numbers.GetNumericFormat;
+        this.GetElementWidth = HTMLElements.GetElementWidth;
+        this.GetElementHeight = HTMLElements.GetElementHeight;
         //Inputs
         this.saveButton = { show: false };
         this.addButton = { show: false };
@@ -1776,11 +1776,11 @@ class CoerGridExtension extends ControlValue {
                 let listFiltered = [];
                 const SET_ROW = new Set();
                 const columnList = Tools.IsNotNull(this.search?.columns)
-                    ? this.search.columns.map(x => StringTools.FirstCharToLower(x))
+                    ? this.search.columns.map(x => Strings.FirstCharToLower(x))
                     : this._gridColumns().map(x => x.columnName);
                 for (const columnName of columnList) {
                     listFiltered = dataSource.filter((item) => !SET_ROW.has(item['indexRow'])
-                        && String(item[StringTools.FirstCharToLower(columnName)]).trim().toUpperCase().includes(String(this._gridSearch()).trim().toUpperCase()));
+                        && String(item[Strings.FirstCharToLower(columnName)]).trim().toUpperCase().includes(String(this._gridSearch()).trim().toUpperCase()));
                     for (const { indexRow } of listFiltered) {
                         SET_ROW.add(indexRow);
                     }
@@ -1802,7 +1802,7 @@ class CoerGridExtension extends ControlValue {
             }
             //Clean headerName
             if (this.cleanColumnName() && columnName.length > 0) {
-                columnName = StringTools.FirstCharToLower(columnName);
+                columnName = Strings.FirstCharToLower(columnName);
                 const charArray = [];
                 for (const char of columnName) {
                     if (char === char.toUpperCase())
@@ -1834,23 +1834,23 @@ class CoerGridExtension extends ControlValue {
         };
         /** */
         this._GetCellValue = (row, columnName) => {
-            return row[StringTools.FirstCharToLower(columnName).replaceAll(' ', '')];
+            return row[Strings.FirstCharToLower(columnName).replaceAll(' ', '')];
         };
         /** */
         this._GetDateFormat = (date, toLocalZone = true) => {
             if (toLocalZone)
-                date = DateTime.ToLocalZone(date);
-            return DateTime.GetDateFormat(date);
+                date = Dates.ToLocalZone(date);
+            return Dates.GetDateFormat(date);
         };
         /** */
         this._GetDateTimeFormat = (date, toLocalZone = true) => {
             if (toLocalZone)
-                date = DateTime.ToLocalZone(date);
-            return DateTime.GetDateTimeFormat(date);
+                date = Dates.ToLocalZone(date);
+            return Dates.GetDateTimeFormat(date);
         };
         /** */
         this._GetTooltip = (prefix, row, suffix = '') => {
-            let column = StringTools.FirstCharToLower(this.tooltipByRow()).replaceAll(' ', '');
+            let column = Strings.FirstCharToLower(this.tooltipByRow()).replaceAll(' ', '');
             if (suffix.length > 0) {
                 suffix = ` ${suffix}`;
             }
@@ -2283,6 +2283,10 @@ class CoerGrid extends CoerGridExtension {
     }
     /** */
     Export(exportFile = true) {
+        this._Export(exportFile);
+    }
+    /** */
+    _Export(exportFile = true) {
         let item = {};
         this._isLoading.set(true);
         const FILE_NAME = (this.exportButton?.fileName || 'COER Report') + '.xlsx';
@@ -2300,7 +2304,7 @@ class CoerGrid extends CoerGridExtension {
                 for (const columnName in row) {
                     if (columnName == 'indexRow')
                         continue;
-                    COLUMN_DATA_SOURCE.add(StringTools.FirstCharToLower(columnName));
+                    COLUMN_DATA_SOURCE.add(Strings.FirstCharToLower(columnName));
                 }
             }
         }
@@ -2308,7 +2312,7 @@ class CoerGrid extends CoerGridExtension {
             for (const { columnName } of this._gridColumns()) {
                 if (columnName == 'indexRow')
                     continue;
-                COLUMN_DATA_SOURCE.add(StringTools.FirstCharToLower(columnName));
+                COLUMN_DATA_SOURCE.add(Strings.FirstCharToLower(columnName));
             }
         }
         const EXPORT_DATA = [];
@@ -2344,7 +2348,7 @@ class CoerGrid extends CoerGridExtension {
             });
             return;
         }
-        const property = StringTools.FirstCharToLower(columnName);
+        const property = Strings.FirstCharToLower(columnName);
         const row = this._value[indexRow];
         row[property] = value;
         if (input === 'coer-switch') {
@@ -2554,11 +2558,11 @@ class CoerGrid extends CoerGridExtension {
             for (const checkbox of this._coerCheckboxList())
                 checkbox.Uncheck();
             if (direction == 'descendant') {
-                Tools.SortByDesc(dataSource, columnName);
+                Collections.SortByDesc(dataSource, columnName);
                 this._sort.set({ columnName, direction: 'ascendant', icon: 'fa-solid fa-arrow-down-short-wide' });
             }
             else {
-                Tools.SortBy(dataSource, columnName);
+                Collections.SortBy(dataSource, columnName);
                 this._sort.set({ columnName, direction: 'descendant', icon: 'fa-solid fa-arrow-up-wide-short' });
             }
             let indexRow = 0;
@@ -2717,11 +2721,11 @@ class CoerGrid extends CoerGridExtension {
         }
     }
     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 class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltipPosition", "tooltip"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
+    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 class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltipPosition", "tooltip"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
 }
 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 class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
+            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
         }] });
 
 class CoerList {
@@ -3487,7 +3491,7 @@ class CoerSidenav {
                     return;
                 }
             }
-            Breadcrumbs.Remove(toPath);
+            Breadcrumbs.RemoveByPath(toPath);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4023,7 +4027,7 @@ class CoerToolbar {
         /** */
         this.GetElementWidth = (element) => {
             return this.isReadyPage
-                ? ElementsHTML.GetElementWidth(element, 48)
+                ? HTMLElements.GetElementWidth(element, 48)
                 : '0px';
         };
     }