coer-elements 2.0.58 → 2.0.60

package/fesm2022/coer-elements-components.mjs

@@ -4,32 +4,32 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
-import * as i1$1 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from 'coer-elements/directives';
 import { CoerRefDirective, DirectivesModule } from 'coer-elements/directives';
 import * as i5 from 'coer-elements/pipes';
 import { PipesModule } from 'coer-elements/pipes';
-import * as i2$5 from '@angular/cdk/drag-drop';
+import * as i2$6 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$2 from '@angular/material/datepicker';
+import * as i2$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i2$7 from '@angular/material/sidenav';
+import * as i2$8 from '@angular/material/sidenav';
 import { MatDrawerContainer, MatDrawerContent, MatDrawer } from '@angular/material/sidenav';
 import * as i2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i2$3 from '@angular/material/form-field';
+import * as i2$4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2$6 from '@angular/material/list';
+import * as i2$7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { provideNativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
-import * as i2$4 from '@angular/material/slide-toggle';
+import * as i2$5 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$4 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -357,8 +357,12 @@ class CoerCheckbox extends ControlValue {
         this._isEnable = computed(() => {
             return !this.isLoading() && !this.isDisabled() && !this.isInvisible() && !this.isReadonly();
         });
-        this._effect = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
+        this._effectValue = effect(() => {
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
+                }
+            });
         });
     }
     //AfterViewInit
@@ -367,7 +371,7 @@ class CoerCheckbox extends ControlValue {
     }
     //OnDestroy
     ngOnDestroy() {
-        this._effect?.destroy();
+        this._effectValue?.destroy();
     }
     //ControlValueAccessor
     SetValue(value) {
@@ -403,7 +407,7 @@ class CoerCheckbox extends ControlValue {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        >{{ label() }}</mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label:empty{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        >{{ label() }}</mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label:empty{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, decorators: [{
             type: Component,
@@ -467,7 +471,11 @@ class CoerDateBox extends ControlValue {
             return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
         });
         this._effectValue = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+                }
+            });
         });
         this._effectExternalButton = effect(() => {
             this._externalButton.set(this.externalButton());
@@ -659,7 +667,7 @@ class CoerDateBox extends ControlValue {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isWritable: { classPropertyName: "isWritable", publicName: "isWritable", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue", onClickExternalButton: "onClickExternalButton" }, providers: [
             provideNativeDateAdapter(),
             CONTROL_VALUE(CoerDateBox),
-        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{  \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{  \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
             type: Component,
@@ -822,7 +830,7 @@ class CoerFileboxImage {
                 && this.IsNotNull(this._image())
                 && this.IsNotNull(this._image().value)
                 && this.IsNotOnlyWhiteSpace(this._base64())
-                && (this.IsNull(this._image().allowDelete) || this._image().allowDelete);
+                && (this.IsNotNull(this._image()?.allowDelete) && this._image()?.allowDelete);
         });
         //computed
         this._showExpandButton = computed(() => {
@@ -831,19 +839,14 @@ class CoerFileboxImage {
                 && this.IsNotNull(this._image())
                 && this.IsNotNull(this._image().value)
                 && this.IsNotOnlyWhiteSpace(this._base64())
-                && (this.IsNull(this._image().allowExpand) || this._image().allowExpand);
-        });
-        //computed
-        this._figureWidth = computed(() => {
-            return Tools.IsNotOnlyWhiteSpace(this._image()?.value)
-                && !this._isLoading()
-                ? 'fit-content' : '210px';
+                && (this.IsNotNull(this._image()?.allowExpand) && this._image()?.allowExpand);
         });
         //computed
         this._figureDashed = computed(() => {
             return !this.isReadonly()
                 && !this.isDisabled()
-                && this.IsOnlyWhiteSpace(this._image()?.value);
+                && this.IsOnlyWhiteSpace(this._image()?.value)
+                && (Tools.IsNull(this.image()?.noImage) || this.image()?.noImage == 'IMAGE');
         });
         this._effect = effect(() => {
             if (Tools.IsNotNull(this.image())) {
@@ -908,11 +911,11 @@ class CoerFileboxImage {
         this._modal().Open();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">\r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'dashed': _figureDashed(),\r\n            'cursor-pointer': true \r\n        }\"\r\n        [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'display'      : isInvisible() ? 'none' : '',\r\n            'width'        : _figureWidth()\r\n        }\">\r\n    \r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <i class=\"spinner-border\"></i>\r\n            </div>\r\n    \r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n    \r\n        <img [src]=\"_base64() | noImage\"\r\n            [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px'\r\n            }\">\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        }\r\n    </figure>\r\n    \r\n    @if(isInvisible()) {\r\n        <figure [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'width'        : _figureWidth()\r\n            }\">  \r\n            \r\n            <img [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px',\r\n                'display'   : 'none'\r\n            }\">\r\n        </figure>\r\n    }\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure 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-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">      \r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'cursor-pointer' : _isEnable(),\r\n            'dashed'         : _figureDashed(),\r\n            'display-none'   : isInvisible()\r\n        }\"\r\n        [ngStyle]=\"{\r\n            'width'        : _image()?.width        || '40px',\r\n            'min-width'    : _image()?.maxWidth     || '40px',\r\n            'max-width'    : _image()?.maxWidth     || '',\r\n            'height'       : _image()?.height       || '40px',\r\n            'min-height'   : _image()?.maxHeight    || '40px',\r\n            'max-height'   : _image()?.maxHeight    || '',\r\n            'margin-top'   : _image()?.marginTop    || '0px',\r\n            'margin-right' : _image()?.marginRight  || '0px',\r\n            'margin-bottom': _image()?.marginBottom || '0px',\r\n            'margin-left'  : _image()?.marginLeft   || '0px',\r\n        }\"> \r\n    \r\n        <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        } \r\n\r\n        <!-- Loading / Empty -->\r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <div class=\"loading-content\">\r\n                    <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                </div>\r\n            </div> \r\n        } \r\n    </figure>\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image{display:contents!important}div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\">\r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'dashed': _figureDashed(),\r\n            'cursor-pointer': true \r\n        }\"\r\n        [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'display'      : isInvisible() ? 'none' : '',\r\n            'width'        : _figureWidth()\r\n        }\">\r\n    \r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <i class=\"spinner-border\"></i>\r\n            </div>\r\n    \r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n    \r\n        <img [src]=\"_base64() | noImage\"\r\n            [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px'\r\n            }\">\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        }\r\n    </figure>\r\n    \r\n    @if(isInvisible()) {\r\n        <figure [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'width'        : _figureWidth()\r\n            }\">  \r\n            \r\n            <img [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px',\r\n                'display'   : 'none'\r\n            }\">\r\n        </figure>\r\n    }\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure 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-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
+            args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\">      \r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'cursor-pointer' : _isEnable(),\r\n            'dashed'         : _figureDashed(),\r\n            'display-none'   : isInvisible()\r\n        }\"\r\n        [ngStyle]=\"{\r\n            'width'        : _image()?.width        || '40px',\r\n            'min-width'    : _image()?.maxWidth     || '40px',\r\n            'max-width'    : _image()?.maxWidth     || '',\r\n            'height'       : _image()?.height       || '40px',\r\n            'min-height'   : _image()?.maxHeight    || '40px',\r\n            'max-height'   : _image()?.maxHeight    || '',\r\n            'margin-top'   : _image()?.marginTop    || '0px',\r\n            'margin-right' : _image()?.marginRight  || '0px',\r\n            'margin-bottom': _image()?.marginBottom || '0px',\r\n            'margin-left'  : _image()?.marginLeft   || '0px',\r\n        }\"> \r\n    \r\n        <div class=\"img\" [ngStyle]=\"{ 'background-image': 'url(' + (_base64() | noImage:image()?.noImage || 'IMAGE') + ')' }\"></div>\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        } \r\n\r\n        <!-- Loading / Empty -->\r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <div class=\"loading-content\">\r\n                    <i class=\"icon-circle-notch animation-spin text-primary\"></i> \r\n                </div>\r\n            </div> \r\n        } \r\n    </figure>\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div> ", styles: ["div.coer-filebox-image{display:contents!important}div.coer-filebox-image figure{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:3px!important;overflow:hidden!important}div.coer-filebox-image figure div.img{width:100%!important;height:100%!important;min-width:inherit!important;min-height:inherit!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px;position:relative}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image figure div.loading{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-filebox-image figure div.loading div.loading-content{display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:30px!important;color:var(--gray)!important}div.coer-filebox-image figure div.loading div.loading-content::selection,div.coer-filebox-image figure div.loading div.empty-data-content::selection{background-color:transparent!important}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerFilebox {
@@ -930,11 +933,11 @@ class CoerFilebox {
         this.onDeleteImage = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}div.coer-filebox coer-filebox-image{display:inherit!important}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:inline-block!important}div.coer-filebox coer-filebox-image{display:inherit!important}\n"] }]
         }] });
 
 class CoerForm {
@@ -1042,11 +1045,11 @@ class CoerForm {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerForm, isStandalone: false, selector: "coer-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerForm, isStandalone: false, selector: "coer-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form> ", styles: [""], dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerForm, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-form', standalone: false, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form>" }]
+            args: [{ selector: 'coer-form', standalone: false, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form> " }]
         }] });
 
 class CoerGridExtension extends ControlValue {
@@ -1055,6 +1058,9 @@ class CoerGridExtension extends ControlValue {
         //Elements
         this._coerGridHeader = viewChild('coerGridHeader');
         this._coerGridBody = viewChild('coerGridBody');
+        this._coerGridFooter = viewChild('coerGridFooter');
+        this._gridGrandFather = null;
+        this._grid = null;
         //Variables
         this._value = [];
         this._valueSignal = signal([]);
@@ -1200,7 +1206,11 @@ class CoerGridExtension extends ControlValue {
     }
     //AfterViewInit
     ngAfterViewInit() {
-        Tools.Sleep().then(_ => this._isLoadingInner.set(false));
+        Tools.Sleep().then(_ => {
+            this._grid = HTMLElements.GetElement(`#${this._GetIdCalculated(-1, -1, 'coer-grid-inner')}`);
+            this._gridGrandFather = HTMLElements.GetGrandfather(this._grid);
+            this._isLoadingInner.set(false);
+        });
     }
     //ControlValueAccessor
     SetValue(value) {
@@ -1264,22 +1274,17 @@ class CoerGridExtension extends ControlValue {
     }
     //getter
     get _height() {
-        let height = this.height();
-        //     if (height == 'full' || height == 'full-form') {
-        //         const TOOLBAR = 45;
-        //         const PAGE_HEADER = 70;
-        //         const FORM = (height == 'full-form') ? 70 : 0;
-        //         const GRID_HEADER = document.getElementById(`${this._id}-header`)!;
-        //         const HEADER = (GRID_HEADER && GRID_HEADER.children.length > 0) ? 50 : 0;
-        //         const MARGIN = 30;
-        //         const PADDING = 20;
-        //         const FOOTER = this.footer.show ? 24.5 : 0;
-        //         height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - FORM - HEADER - PADDING - FOOTER) + 'px';
-        //     }
-        return height;
+        return (this.height() == 'full')
+            ? (Screen.WINDOW_HEIGHT - (45 //Toolbar
+                + (this._coerGridHeader()?.heigth || 0)
+                + (this._coerGridFooter()?.heigth || 0)
+                + HTMLElements.GetOffsetTop(this._grid)
+                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-top').split('px')[0])
+                + Number(HTMLElements.GetCssValue(this._gridGrandFather, 'padding-bottom').split('px')[0]))) + 'px'
+            : this.height();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerGridExtension, isStandalone: true, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableFocusNext: { classPropertyName: "enableFocusNext", publicName: "enableFocusNext", isSignal: true, isRequired: false, transformFunction: null }, enableFocusRow: { classPropertyName: "enableFocusRow", publicName: "enableFocusRow", isSignal: true, isRequired: false, transformFunction: null }, enableHoverRow: { classPropertyName: "enableHoverRow", publicName: "enableHoverRow", isSignal: true, isRequired: false, transformFunction: null }, isStriped: { classPropertyName: "isStriped", publicName: "isStriped", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onCheckboxChange: "onCheckboxChange", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange" }, viewQueries: [{ propertyName: "_coerGridHeader", first: true, predicate: ["coerGridHeader"], descendants: true, isSignal: true }, { propertyName: "_coerGridBody", first: true, predicate: ["coerGridBody"], descendants: true, isSignal: true }, { propertyName: "_coerGridFooter", first: true, predicate: ["coerGridFooter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridExtension, decorators: [{
             type: Component,
@@ -1362,7 +1367,11 @@ class CoerTextBox extends ControlValue {
                 ? '18px' : '0px';
         });
         this._effectValue = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+                }
+            });
         });
         this._effectExternalButton = effect(() => {
             this._externalButton.set(this.externalButton());
@@ -1501,11 +1510,11 @@ class CoerTextBox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n        \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n        \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n        \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n        \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
         }], ctorParameters: () => [] });
 
 class CoerGridHeader {
@@ -1515,6 +1524,9 @@ class CoerGridHeader {
         //Elements
         this._inputFile = viewChild.required('inputFileRef');
         this._inputSearch = viewChild.required('inputSearch');
+        this._header = null;
+        this._headerButtons = null;
+        this._headerSlots = null;
         //Variables
         this._isLoadingInner = signal(false);
         //Callback
@@ -1630,6 +1642,24 @@ class CoerGridHeader {
             return this._IsDisabled(this.search()) || this._isLoadingInner() || this.isLoading() || this.isDisabled() || this.isInvisible();
         };
     }
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => {
+            this._header = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header')}`);
+            this._headerSlots = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-slots')}`);
+            this._headerButtons = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'header-buttons')}`);
+        });
+    }
+    //getter
+    get heigth() {
+        return Number(HTMLElements.GetElementHeight(this._header, this._marginBottom).split('px')[0]);
+    }
+    //getter
+    get _marginBottom() {
+        return this.search().show
+            || HTMLElements.HasChildren(this._headerButtons)
+            || HTMLElements.HasChildren(this._headerSlots)
+            ? 10 : 0;
+    }
     /** */
     FocusSearch(select = false, delay = 0) {
         if (Tools.IsNotNull(this._inputSearch())) {
@@ -1688,11 +1718,11 @@ class CoerGridHeader {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridHeader, isStandalone: false, selector: "coer-grid-header", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, GetColumnName: { classPropertyName: "GetColumnName", publicName: "GetColumnName", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: true, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: true, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: true, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onInputSearch: "onInputSearch", onClickClearSearch: "onClickClearSearch", onKeyupEnterSearch: "onKeyupEnterSearch" }, viewQueries: [{ propertyName: "_inputFile", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }, { propertyName: "_inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"flex-wrap-middle-right margin-bottom-10px\"> \r\n     \r\n    <!-- Slot -->\r\n    <div class=\"flex-basis-fit-content margin-right-auto\">\r\n        <ng-content></ng-content>\r\n    </div> \r\n\r\n\r\n    <div class=\"flex-basis-min-content display-flex gap-5px\">\r\n        <!-- Export Button -->\r\n        @if(_showExportButton()) {\r\n            <div>\r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"excel\"\r\n                    [color]=\"_ColorButton(exportButton())\"\r\n                    [path]=\"_GetPath(exportButton())\"\r\n                    [isDisabled]=\"_IsDisabledExportButton()\" \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n                    tooltipPosition=\"top\"\r\n                    (onClick)=\"_Export()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n        \r\n        <!-- Import Button -->\r\n        @if(importButton().show  && !isReadonly()) {\r\n            <div>\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n    \r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"import\"\r\n                    [color]=\"_ColorButton(importButton())\"\r\n                    [path]=\"_GetPath(importButton())\"\r\n                    [isDisabled]=\"_IsDisabledImportButton()\" \r\n                    [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n                    tooltipPosition=\"top\"\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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"new\"\r\n                    [color]=\"_ColorButton(addButton())\"\r\n                    [path]=\"_GetPath(addButton())\"\r\n                    [isDisabled]=\"_IsDisabledAddButton()\" \r\n                    [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n                    tooltipPosition=\"top\" \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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"save\"\r\n                    [color]=\"_ColorButton(saveButton())\"\r\n                    [path]=\"_GetPath(saveButton())\"\r\n                    [isDisabled]=\"_IsDisabledSaveButton()\"  \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n                    tooltipPosition=\"top\" \r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n        \r\n    <!-- Search -->\r\n    @if(search().show) {\r\n        <div class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n            <coer-textbox\r\n                #inputSearch\r\n                [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n                [ngModel]=\"searchInner()\"\r\n                placeholder=\"Search\"\r\n                [isDisabled]=\"_IsDisabledSearch()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [selectOnFocus]=\"true\"\r\n                [showSearchIcon]=\"true\"\r\n                [showClearIcon]=\"true\"\r\n                minWidth=\"250px\"\r\n                (onInput)=\"onInputSearch.emit($event)\"\r\n                (onClickClear)=\"onClickClearSearch.emit('')\"\r\n                (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n                    id: GetIdCalculated()(-1, -1, 'search'),\r\n                    input: 'coer-search', \r\n                    value: $event\r\n                })\"\r\n            ></coer-textbox>\r\n        </div>\r\n    } \r\n</header> ", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridHeader, isStandalone: false, selector: "coer-grid-header", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, GetColumnName: { classPropertyName: "GetColumnName", publicName: "GetColumnName", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: true, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: true, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: true, isRequired: false, transformFunction: null }, saveButton: { classPropertyName: "saveButton", publicName: "saveButton", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchInner: { classPropertyName: "searchInner", publicName: "searchInner", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickExport: "onClickExport", onClickImport: "onClickImport", onClickAdd: "onClickAdd", onClickSave: "onClickSave", onInputSearch: "onInputSearch", onClickClearSearch: "onClickClearSearch", onKeyupEnterSearch: "onKeyupEnterSearch" }, viewQueries: [{ propertyName: "_inputFile", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }, { propertyName: "_inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<header [id]=\"GetIdCalculated()(-1, -1, 'header')\" class='flex-wrap-middle-right' [ngStyle]=\"{ 'margin-bottom': _marginBottom + 'px' }\"> \r\n       \r\n    <!-- Slot -->\r\n    <div [id]=\"GetIdCalculated()(-1, -1, 'header-slots')\" class=\"flex-basis-fit-content margin-right-auto\">\r\n        <ng-content></ng-content>\r\n    </div> \r\n \r\n    <div [id]=\"GetIdCalculated()(-1, -1, 'header-buttons')\" class=\"flex-basis-min-content display-flex gap-5px\">\r\n        <!-- Export Button -->\r\n        @if(_showExportButton()) {\r\n            <div>\r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"excel\"\r\n                    [color]=\"_ColorButton(exportButton())\"\r\n                    [path]=\"_GetPath(exportButton())\"\r\n                    [isDisabled]=\"_IsDisabledExportButton()\" \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n                    tooltipPosition=\"top\"\r\n                    (onClick)=\"_Export()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n        \r\n        <!-- Import Button -->\r\n        @if(importButton().show && !isReadonly()) {\r\n            <div>\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n    \r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"import\"\r\n                    [color]=\"_ColorButton(importButton())\"\r\n                    [path]=\"_GetPath(importButton())\"\r\n                    [isDisabled]=\"_IsDisabledImportButton()\" \r\n                    [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n                    tooltipPosition=\"top\"\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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"new\"\r\n                    [color]=\"_ColorButton(addButton())\"\r\n                    [path]=\"_GetPath(addButton())\"\r\n                    [isDisabled]=\"_IsDisabledAddButton()\" \r\n                    [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n                    tooltipPosition=\"top\" \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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"save\"\r\n                    [color]=\"_ColorButton(saveButton())\"\r\n                    [path]=\"_GetPath(saveButton())\"\r\n                    [isDisabled]=\"_IsDisabledSaveButton()\"  \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n                    tooltipPosition=\"top\" \r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n        \r\n    <!-- Search -->\r\n    @if(search().show) {\r\n        <div [id]=\"GetIdCalculated()(-1, -1, 'header-search')\" class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n            <coer-textbox\r\n                #inputSearch\r\n                [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n                [ngModel]=\"searchInner()\"\r\n                placeholder=\"Search\"\r\n                [isDisabled]=\"_IsDisabledSearch()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [selectOnFocus]=\"true\"\r\n                [showSearchIcon]=\"true\"\r\n                [showClearIcon]=\"true\"\r\n                minWidth=\"250px\"\r\n                (onInput)=\"onInputSearch.emit($event)\"\r\n                (onClickClear)=\"onClickClearSearch.emit('')\"\r\n                (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n                    id: GetIdCalculated()(-1, -1, 'search'),\r\n                    input: 'coer-search', \r\n                    value: $event\r\n                })\"\r\n            ></coer-textbox>\r\n        </div>\r\n    } \r\n</header> ", dependencies: [{ 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", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid-header', standalone: false, template: "<header class=\"flex-wrap-middle-right margin-bottom-10px\"> \r\n     \r\n    <!-- Slot -->\r\n    <div class=\"flex-basis-fit-content margin-right-auto\">\r\n        <ng-content></ng-content>\r\n    </div> \r\n\r\n\r\n    <div class=\"flex-basis-min-content display-flex gap-5px\">\r\n        <!-- Export Button -->\r\n        @if(_showExportButton()) {\r\n            <div>\r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"excel\"\r\n                    [color]=\"_ColorButton(exportButton())\"\r\n                    [path]=\"_GetPath(exportButton())\"\r\n                    [isDisabled]=\"_IsDisabledExportButton()\" \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n                    tooltipPosition=\"top\"\r\n                    (onClick)=\"_Export()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n        \r\n        <!-- Import Button -->\r\n        @if(importButton().show  && !isReadonly()) {\r\n            <div>\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n    \r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"import\"\r\n                    [color]=\"_ColorButton(importButton())\"\r\n                    [path]=\"_GetPath(importButton())\"\r\n                    [isDisabled]=\"_IsDisabledImportButton()\" \r\n                    [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n                    tooltipPosition=\"top\"\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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"new\"\r\n                    [color]=\"_ColorButton(addButton())\"\r\n                    [path]=\"_GetPath(addButton())\"\r\n                    [isDisabled]=\"_IsDisabledAddButton()\" \r\n                    [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n                    tooltipPosition=\"top\" \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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"save\"\r\n                    [color]=\"_ColorButton(saveButton())\"\r\n                    [path]=\"_GetPath(saveButton())\"\r\n                    [isDisabled]=\"_IsDisabledSaveButton()\"  \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n                    tooltipPosition=\"top\" \r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n        \r\n    <!-- Search -->\r\n    @if(search().show) {\r\n        <div class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n            <coer-textbox\r\n                #inputSearch\r\n                [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n                [ngModel]=\"searchInner()\"\r\n                placeholder=\"Search\"\r\n                [isDisabled]=\"_IsDisabledSearch()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [selectOnFocus]=\"true\"\r\n                [showSearchIcon]=\"true\"\r\n                [showClearIcon]=\"true\"\r\n                minWidth=\"250px\"\r\n                (onInput)=\"onInputSearch.emit($event)\"\r\n                (onClickClear)=\"onClickClearSearch.emit('')\"\r\n                (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n                    id: GetIdCalculated()(-1, -1, 'search'),\r\n                    input: 'coer-search', \r\n                    value: $event\r\n                })\"\r\n            ></coer-textbox>\r\n        </div>\r\n    } \r\n</header> " }]
+            args: [{ selector: 'coer-grid-header', standalone: false, template: "<header [id]=\"GetIdCalculated()(-1, -1, 'header')\" class='flex-wrap-middle-right' [ngStyle]=\"{ 'margin-bottom': _marginBottom + 'px' }\"> \r\n       \r\n    <!-- Slot -->\r\n    <div [id]=\"GetIdCalculated()(-1, -1, 'header-slots')\" class=\"flex-basis-fit-content margin-right-auto\">\r\n        <ng-content></ng-content>\r\n    </div> \r\n \r\n    <div [id]=\"GetIdCalculated()(-1, -1, 'header-buttons')\" class=\"flex-basis-min-content display-flex gap-5px\">\r\n        <!-- Export Button -->\r\n        @if(_showExportButton()) {\r\n            <div>\r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"excel\"\r\n                    [color]=\"_ColorButton(exportButton())\"\r\n                    [path]=\"_GetPath(exportButton())\"\r\n                    [isDisabled]=\"_IsDisabledExportButton()\" \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(exportButton(), 'Export')\"\r\n                    tooltipPosition=\"top\"\r\n                    (onClick)=\"_Export()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n        \r\n        <!-- Import Button -->\r\n        @if(importButton().show && !isReadonly()) {\r\n            <div>\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"Import($event)\" (cancel)=\"_isLoadingInner.set(false)\">\r\n    \r\n                <coer-button\r\n                    type=\"icon\" \r\n                    icon=\"import\"\r\n                    [color]=\"_ColorButton(importButton())\"\r\n                    [path]=\"_GetPath(importButton())\"\r\n                    [isDisabled]=\"_IsDisabledImportButton()\" \r\n                    [tooltip]=\"_TooltipButton(importButton(), 'Import')\"\r\n                    tooltipPosition=\"top\"\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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"new\"\r\n                    [color]=\"_ColorButton(addButton())\"\r\n                    [path]=\"_GetPath(addButton())\"\r\n                    [isDisabled]=\"_IsDisabledAddButton()\" \r\n                    [tooltip]=\"_TooltipButton(addButton(), 'Add')\"\r\n                    tooltipPosition=\"top\" \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>\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    icon=\"save\"\r\n                    [color]=\"_ColorButton(saveButton())\"\r\n                    [path]=\"_GetPath(saveButton())\"\r\n                    [isDisabled]=\"_IsDisabledSaveButton()\"  \r\n                    [isHidde]=\"isLoading()\"\r\n                    [tooltip]=\"_TooltipButton(saveButton(), 'Save')\" \r\n                    tooltipPosition=\"top\" \r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n        \r\n    <!-- Search -->\r\n    @if(search().show) {\r\n        <div [id]=\"GetIdCalculated()(-1, -1, 'header-search')\" class=\"mv-flex-basis-100 mv-flex-grow-1 xs-flex-basis-100 md-flex-basis-min-content\">\r\n            <coer-textbox\r\n                #inputSearch\r\n                [id]=\"GetIdCalculated()(-1, -1, 'search')\"\r\n                [ngModel]=\"searchInner()\"\r\n                placeholder=\"Search\"\r\n                [isDisabled]=\"_IsDisabledSearch()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [selectOnFocus]=\"true\"\r\n                [showSearchIcon]=\"true\"\r\n                [showClearIcon]=\"true\"\r\n                minWidth=\"250px\"\r\n                (onInput)=\"onInputSearch.emit($event)\"\r\n                (onClickClear)=\"onClickClearSearch.emit('')\"\r\n                (onKeyupEnter)=\"onKeyupEnterSearch.emit({\r\n                    id: GetIdCalculated()(-1, -1, 'search'),\r\n                    input: 'coer-search', \r\n                    value: $event\r\n                })\"\r\n            ></coer-textbox>\r\n        </div>\r\n    } \r\n</header> " }]
         }] });
 
 class CoerNumberBox extends ControlValue {
@@ -1749,7 +1779,11 @@ class CoerNumberBox extends ControlValue {
                 ? '18px' : '0px';
         });
         this._effectValue = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : 0);
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : 0);
+                }
+            });
         });
         this._effectExternalButton = effect(() => {
             this._externalButton.set(this.externalButton());
@@ -1962,7 +1996,7 @@ class CoerNumberBox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field>\r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field>\r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
             type: Component,
@@ -2051,7 +2085,11 @@ class CoerSelectbox extends ControlValue {
             return Tools.IsNotNull(item) ? item[this.displayProperty()] : '';
         };
         this._effectValue = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+                }
+            });
         });
         this._effectExternalButton = effect(() => {
             this._externalButton.set(this.externalButton());
@@ -2324,7 +2362,7 @@ class CoerSelectbox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft(), \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <!-- Input -->\r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [value]=\"_search()\"\r\n                [placeholder]=\"_placeholder\"\r\n                [disabled]=\"!_isEnable()\"\r\n                (input)=\"_Search(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight\r\n                }\"> \r\n    \r\n            <!-- Icons Container -->\r\n            <span class=\"icon-container\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\r\n                    <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n                }\r\n    \r\n                @else if(_isEnable()) {\r\n                    <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n                }\r\n            </span>     \r\n        </mat-form-field>  \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{\r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(), \r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\r\n                    @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                        <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n                            <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n                                {{ _GetDisplay(item) }} \r\n                            </div> \r\n                        </li>\r\n                    }\r\n                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft(), \r\n    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <!-- Input -->\r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [value]=\"_search()\"\r\n                [placeholder]=\"_placeholder\"\r\n                [disabled]=\"!_isEnable()\"\r\n                (input)=\"_Search(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight\r\n                }\"> \r\n    \r\n            <!-- Icons Container -->\r\n            <span class=\"icon-container\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\r\n                    <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n                }\r\n    \r\n                @else if(_isEnable()) {\r\n                    <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n                }\r\n            </span>     \r\n        </mat-form-field>  \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{\r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(), \r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\r\n                    @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                        <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n                            <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n                                {{ _GetDisplay(item) }} \r\n                            </div> \r\n                        </li>\r\n                    }\r\n                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
             type: Component,
@@ -2375,13 +2413,17 @@ class CoerSwitch extends ControlValue {
         this._isEnable = computed(() => {
             return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
         });
-        this._effect = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
+        this._effectValue = effect(() => {
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
+                }
+            });
         });
     }
     //OnDestroy
     ngOnDestroy() {
-        this._effect?.destroy();
+        this._effectValue?.destroy();
     }
     /** */
     Focus() {
@@ -2396,7 +2438,7 @@ class CoerSwitch extends ControlValue {
         this.onChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\"\r\n    [ngStyle]=\"{  \r\n        'margin-top'   : marginTop(), \r\n        'margin-right' : marginRight(), \r\n        'margin-bottom': marginBottom(), \r\n        'margin-left'  : marginLeft() \r\n    }\">\r\n    <div [id]=\"_id\" \r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        \r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important;width:fit-content!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\"\r\n    [ngStyle]=\"{  \r\n        'margin-top'   : marginTop(), \r\n        'margin-right' : marginRight(), \r\n        'margin-bottom': marginBottom(), \r\n        'margin-left'  : marginLeft() \r\n    }\">\r\n    <div [id]=\"_id\" \r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        \r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important;width:fit-content!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, decorators: [{
             type: Component,
@@ -2642,7 +2684,7 @@ class CoerGridCell {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex align-items-center min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'justify-content': _GetTextAlign(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\"></div>          \r\n        </div>\r\n    }\r\n}", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerDateBox, selector: "coer-datebox", inputs: ["id", "value", "label", "placeholder", "textPosition", "isWritable", "isInvalid", "isValid", "externalButton", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onOpen", "onClose", "onChangeValue", "onClickExternalButton"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridCell, isStandalone: false, selector: "coer-grid-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, checkOnRow: { classPropertyName: "checkOnRow", publicName: "checkOnRow", isSignal: true, isRequired: true, transformFunction: null }, enableInputs: { classPropertyName: "enableInputs", publicName: "enableInputs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onNumberboxChange: "onNumberboxChange", onSelectboxChange: "onSelectboxChange", onKeyupEnter: "onKeyupEnter" }, viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }, { propertyName: "coerTextbox", first: true, predicate: ["coerTextbox"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }, { propertyName: "coerSelectbox", first: true, predicate: ["coerSelectbox"], descendants: true, isSignal: true }, { propertyName: "coerDatebox", first: true, predicate: ["coerDatebox"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch(input) {\r\n\r\n    @case ('coer-switch') {\r\n        <coer-switch\r\n            #coerSwitch\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_switchAttributes()?.isDisabled || false\" \r\n            [tooltip]=\"_switchAttributes()?.tooltip || ''\"\r\n            [tooltipPosition]=\"_switchAttributes()?.tooltipPosition || 'left'\"\r\n            marginLeft=\"auto\"\r\n            marginRight=\"auto\"\r\n            (onChange)=\"onSwitchChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n        ></coer-switch> \r\n    }\r\n\r\n    @case ('coer-textbox') {\r\n        <coer-textbox\r\n            #coerTextbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_textboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_textboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_textboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_textboxAttributes()?.placeholder || ('type ' + header().columnName.toLowerCase() + '...')\"\r\n            [selectOnFocus]=\"_textboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_textboxAttributes()?.textPosition || 'left'\"\r\n            [minLength]=\"_textboxAttributes()?.minLength || 0\"\r\n            [maxLength]=\"_textboxAttributes()?.maxLength || 50\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n         ></coer-textbox> \r\n    }\r\n\r\n    @case ('coer-numberbox') {\r\n        <coer-numberbox\r\n            #coerNumberbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"\r\n            [isDisabled]=\"_numberboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_numberboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_numberboxAttributes()?.isInvalid || false\"\r\n            [placeholder]=\"_numberboxAttributes()?.placeholder || '#'\"\r\n            [selectOnFocus]=\"_numberboxAttributes()?.selectOnFocus || true\"\r\n            [textPosition]=\"_numberboxAttributes()?.textPosition || 'right'\"\r\n            [min]=\"_numberboxAttributes()?.min || 0\"\r\n            [max]=\"_numberboxAttributes()?.max || 2147483647\"            \r\n            [decimals]=\"_numberboxAttributes()?.decimals || 0\"\r\n            (onInput)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\"\r\n            (onKeyupEnter)=\"onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n        ></coer-numberbox>\r\n    }\r\n\r\n    @case ('coer-selectbox') {\r\n        <coer-selectbox\r\n            #coerSelectbox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\" \r\n            [isDisabled]=\"_selectboxAttributes()?.isDisabled || false\"\r\n            [isValid]=\"_selectboxAttributes()?.isValid || false\"\r\n            [isInvalid]=\"_selectboxAttributes()?.isInvalid || false\"\r\n            [dataSource]=\"_selectboxAttributes()?.dataSource || []\"\r\n            [placeholder]=\"_selectboxAttributes()?.placeholder || '-- Select --'\"\r\n            [displayProperty]=\"_selectboxAttributes()?.displayProperty || 'name'\" \r\n            (onSelected)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            }); onKeyupEnter.emit({ \r\n                id: id(),\r\n                input: input, \r\n                row: row(), \r\n                value: $event\r\n            })\"\r\n            (onUnselect)=\"onTextboxChange.emit({ \r\n                indexRow: row().indexRow,  \r\n                property: header().property, \r\n                row: row(), \r\n                value: $event \r\n            })\" \r\n        ></coer-selectbox>\r\n    }\r\n\r\n\r\n    @case ('coer-datebox') {\r\n        <coer-datebox\r\n            #coerDatebox\r\n            [id]=\"id()\"\r\n            [ngModel]=\"row()[header().property]\"  \r\n        ></coer-datebox>\r\n    }\r\n\r\n    @default {\r\n        <div class=\"display-flex align-items-center min-height-20px padding-5px\" \r\n            [ngStyle]=\"{ \r\n                'justify-content': _GetTextAlign(),\r\n                'color'          : _GetTextColor(),\r\n                'word-break'     : _GetTextBreak(),\r\n                'cursor'         : checkOnRow() ? 'pointer' : 'default' \r\n            }\"\r\n            (click)=\"onClickRow.emit(row())\"\r\n            (dblclick)=\"onDoubleClickRow.emit(row())\">  \r\n            <div [innerHTML]=\"_GetCellValue() | html\"></div>          \r\n        </div>\r\n    }\r\n}", dependencies: [{ 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: CoerDateBox, selector: "coer-datebox", inputs: ["id", "value", "label", "placeholder", "textPosition", "isWritable", "isInvalid", "isValid", "externalButton", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onOpen", "onClose", "onChangeValue", "onClickExternalButton"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "onClickExternalButton"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridCell, decorators: [{
             type: Component,
@@ -2658,6 +2700,7 @@ class CoerGridBody {
         //Elements
         this._coerCheckboxList = viewChildren(CoerCheckbox);
         this._coerGridCellList = viewChildren((CoerGridCell));
+        this._body = null;
         //Signals 
         this._sort = signal({ columnName: '', direction: 'none', icon: '' });
         //Callback
@@ -3112,6 +3155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 class CoerGridfooter {
     constructor() {
+        //Elements
+        this._footer = null;
+        //Callback
+        this.GetIdCalculated = input.required();
         //Inputs
         this.footer = input({ show: true });
         this.dataSource = input([]);
@@ -3119,12 +3166,21 @@ class CoerGridfooter {
         this.dataSourceSelected = input([]);
         this.isLoadingInner = input(true);
     }
+    ngAfterViewInit() {
+        Tools.Sleep(500).then(_ => {
+            this._footer = HTMLElements.GetElement(`#${this.GetIdCalculated()(-1, -1, 'footer')}`);
+        });
+    }
+    //getter
+    get heigth() {
+        return Number(HTMLElements.GetElementHeight(this._footer).split('px')[0]);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n    <footer class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGridfooter, isStandalone: false, selector: "coer-grid-footer", inputs: { GetIdCalculated: { classPropertyName: "GetIdCalculated", publicName: "GetIdCalculated", isSignal: true, isRequired: true, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataSourceFiltered: { classPropertyName: "dataSourceFiltered", publicName: "dataSourceFiltered", isSignal: true, isRequired: false, transformFunction: null }, dataSourceSelected: { classPropertyName: "dataSourceSelected", publicName: "dataSourceSelected", isSignal: true, isRequired: false, transformFunction: null }, isLoadingInner: { classPropertyName: "isLoadingInner", publicName: "isLoadingInner", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}", dependencies: [{ kind: "pipe", type: i5.NumericFormatPipe, name: "numericFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGridfooter, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n    <footer class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}" }]
+            args: [{ selector: 'coer-grid-footer', standalone: false, template: "@if(footer().show) {\r\n    <footer [id]=\"GetIdCalculated()(-1, -1, 'footer')\" class=\"flex-middle-between padding-top-5px\">\r\n        <span>\r\n            @if(isLoadingInner()) {\r\n                <span class=\"animation-fade\"> Loading </span>\r\n            }\r\n\r\n            @else if(dataSourceSelected().length > 0) {\r\n                <span class=\"margin-left-5px text-gray\">\r\n                    <i class=\"bi bi-check2-square\"></i>\r\n                    {{ dataSourceSelected().length | numericFormat }}\r\n                </span>\r\n            }\r\n        </span>\r\n\r\n        @if(dataSource().length > 0) {\r\n            <span class=\"margin-right-5px text-gray\"> {{ dataSource().length | numericFormat }} Rows </span>\r\n        } \r\n    </footer>\r\n}" }]
         }] });
 
 class CoerGrid extends CoerGridExtension {
@@ -3271,11 +3327,11 @@ class CoerGrid extends CoerGridExtension {
         return dataSource.shift();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header\r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerGridHeader, selector: "coer-grid-header", inputs: ["GetIdCalculated", "GetColumnName", "columns", "dataSource", "dataSourceFiltered", "dataSourceSelected", "exportButton", "importButton", "addButton", "saveButton", "search", "searchInner", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onClickExport", "onClickImport", "onClickAdd", "onClickSave", "onInputSearch", "onClickClearSearch", "onKeyupEnterSearch"] }, { kind: "component", type: CoerGridBody, selector: "coer-grid-body", inputs: ["GetIdCalculated", "value", "columns", "dataSource", "dataSourceSelected", "search", "searchInner", "checkbox", "buttonByRow", "isLoadingInner", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isEnabled", "enableSort", "enableFocusNext", "enableFocusRow", "enableHoverRow", "isStriped", "tooltipByRow"], outputs: ["onValueChange", "onClickRow", "onDoubleClickRow", "onInnerLoadingChange", "onCheckboxChange", "onClickDeleteRow", "onClickEditRow", "onClickGoRow", "onSwitchChange", "onTextboxChange", "onNumberboxChange", "onSelectboxChange", "onKeyupEnter", "onKeyupEnterLast"] }, { kind: "component", type: CoerGridfooter, selector: "coer-grid-footer", inputs: ["GetIdCalculated", "footer", "dataSource", "dataSourceFiltered", "dataSourceSelected", "isLoadingInner"] }] }); }
 }
 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 -->\r\n    <coer-grid-header\r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
+            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div [id]=\"_GetIdCalculated(-1, -1, 'coer-grid-inner')\" class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <!-- HEADER -->\r\n    <coer-grid-header \r\n        #coerGridHeader \r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [GetColumnName]=\"_GetColumnName\"\r\n        [columns]=\"_columns()\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\"\r\n        [exportButton]=\"exportButton\"\r\n        [importButton]=\"importButton\"\r\n        [addButton]=\"addButton\"\r\n        [saveButton]=\"saveButton\"\r\n        [search]=\"search\"\r\n        [searchInner]=\"_searchInner()\"\r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n        [isLoading]=\"isLoading()\"\r\n        [isDisabled]=\"isDisabled()\"\r\n        [isReadonly]=\"isReadonly()\"\r\n        [isInvisible]=\"isInvisible()\" \r\n        (onClickExport)=\"onClickExport.emit($event)\"\r\n        (onClickImport)=\"_Import($event)\"\r\n        (onClickAdd)=\"onClickAdd.emit()\"\r\n        (onClickSave)=\"onClickSave.emit()\"\r\n        (onInputSearch)=\"_UpdateSearchInner($event)\"\r\n        (onClickClearSearch)=\"_UpdateSearchInner($event)\"\r\n        (onKeyupEnterSearch)=\"onKeyupEnter.emit($event)\"> \r\n        <ng-content></ng-content> \r\n    </coer-grid-header>\r\n\r\n    <section class=\"coer-grid-container\" [ngStyle]=\"{ 'overflow': !isLoading() ? 'auto' : 'hidden' }\">  \r\n        <div [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\"> \r\n            <!-- BODY -->               \r\n            <coer-grid-body\r\n                #coerGridBody\r\n                [GetIdCalculated]=\"_GetIdCalculated\"\r\n                [value]=\"_valueSignal()\"\r\n                [columns]=\"_columns()\"\r\n                [dataSource]=\"_dataSource()\"\r\n                [dataSourceSelected]=\"dataSourceSelected()\"\r\n                [search]=\"search\"\r\n                [searchInner]=\"_searchInner()\"\r\n                [checkbox]=\"checkbox\"\r\n                [buttonByRow]=\"buttonByRow\"\r\n                [isLoadingInner]=\"_isLoadingInner()\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\"\r\n                [isReadonly]=\"isReadonly()\"\r\n                [isInvisible]=\"isInvisible()\"\r\n                [isEnabled]=\"_isEnabled()\"\r\n                [enableSort]=\"enableSort()\"\r\n                [tooltipByRow]=\"tooltipByRow()\"\r\n                [enableFocusNext]=\"enableFocusNext()\"\r\n                [enableFocusRow]=\"enableFocusRow()\"\r\n                [enableHoverRow]=\"enableHoverRow()\"\r\n                [isStriped]=\"isStriped()\"\r\n                (onValueChange)=\"SetValue($event)\"\r\n                (onClickRow)=\"onClickRow.emit($event)\"\r\n                (onDoubleClickRow)=\"onDoubleClickRow.emit($event)\"\r\n                (onCheckboxChange)=\"onCheckboxChange.emit($event)\"\r\n                (onInnerLoadingChange)=\"_isLoadingInner.set($event)\"\r\n                (onClickDeleteRow)=\"onClickDeleteRow.emit($event)\"\r\n                (onClickEditRow)=\"onClickEditRow.emit($event)\"  \r\n                (onClickGoRow)=\"onClickGoRow.emit($event)\"    \r\n                (onSwitchChange)=\"_SetValueInput($event, 'coer-switch')\"\r\n                (onTextboxChange)=\"_SetValueInput($event, 'coer-textbox')\"\r\n                (onNumberboxChange)=\"_SetValueInput($event, 'coer-numberbox')\"\r\n                (onSelectboxChange)=\"_SetValueInput($event, 'coer-selectbox')\"\r\n                (onKeyupEnter)=\"onKeyupEnter.emit($event)\"\r\n                (onKeyupEnterLast)=\"onKeyupEnterLast.emit($event)\"\r\n            ></coer-grid-body>\r\n\r\n            <!-- Loading / Empty -->\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <div class=\"loading-content\">\r\n                        <i class=\"icon-circle-notch animation-spin text-primary\"></i>\r\n                        <span class=\"fa-fade\">Loading</span>\r\n                    </div>\r\n                </div> \r\n            } \r\n\r\n            @else if(_isEnabled() && _valueSignal().length <= 0) {\r\n                <div class=\"empty-data\">\r\n                    <div class=\"empty-data-content\"> No Data </div>\r\n                </div>\r\n            } \r\n        </div>\r\n    </section> \r\n\r\n    <!-- FOOTER -->\r\n    <coer-grid-footer\r\n        #coerGridFooter\r\n        [GetIdCalculated]=\"_GetIdCalculated\"\r\n        [footer]=\"footer\"\r\n        [dataSource]=\"_valueSignal()\"\r\n        [dataSourceFiltered]=\"_dataSourceFiltered()\"\r\n        [dataSourceSelected]=\"dataSourceSelected()\" \r\n        [isLoadingInner]=\"_isLoadingInner()\"\r\n    ></coer-grid-footer>\r\n</div>", styles: ["div.coer-grid section.coer-grid-container{position:relative!important}div.coer-grid section.coer-grid-container div.loading,div.coer-grid section.coer-grid-container div.empty-data{position:absolute!important;inset:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-grid section.coer-grid-container div.loading div.loading-content,div.coer-grid section.coer-grid-container div.loading div.empty-data-content,div.coer-grid section.coer-grid-container div.empty-data div.loading-content,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content{flex-flow:column!important;display:inherit!important;justify-content:inherit!important;align-items:inherit!important;font-size:35px!important;color:var(--gray)!important}div.coer-grid section.coer-grid-container div.loading div.loading-content::selection,div.coer-grid section.coer-grid-container div.loading div.empty-data-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.loading-content::selection,div.coer-grid section.coer-grid-container div.empty-data div.empty-data-content::selection{background-color:transparent!important}\n"] }]
         }] });
 
 class CoerList {
@@ -3387,7 +3443,7 @@ class CoerList {
         this.onDrop.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, decorators: [{
             type: Component,
@@ -3461,7 +3517,7 @@ class CoerMenuOption {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenuOption: "onClickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n            <i [class]=\"_icon()\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + _identityClass()\">\r\n            {{ label() }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenuOption: "onClickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"_ClickMenuOption('', true)\">\r\n    <mat-list-item>\r\n        <span [class]=\"'icon-container ' + _identityClass()\" [ngStyle]=\"{ 'margin-left': _marginLeft() }\">\r\n            <i [class]=\"_icon()\"></i>\r\n        </span>\r\n\r\n        <span [class]=\"'label-container ' + _identityClass()\">\r\n            {{ label() }}\r\n        </span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: ["mat-nav-list.coer-menu-option{padding:0!important;height:48px!important}mat-nav-list.coer-menu-option div,mat-nav-list.coer-menu-option span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-nav-list.coer-menu-option mat-list-item{padding:0 35px 0 10px!important;display:inline-flex!important;height:48px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content{display:flex!important;align-items:center!important}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:48px!important;min-width:20px!important;max-width:20px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.mat-mdc-list-item-unscoped-content span.icon-container i{min-height:16px!important;position:absolute!important}mat-nav-list.coer-menu-option mat-list-item span.label-container{justify-content:flex-start!important;display:inline-flex!important;height:auto!important;margin-left:10px!important;color:var(--sidenav-text-inner)}mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link{color:var(--sidenav-active-inner)!important}mat-nav-list.coer-menu-option mat-list-item:hover,mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover:before{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuOption, decorators: [{
             type: Component,
@@ -3544,7 +3600,11 @@ class CoerSecretBox extends ControlValue {
             }
         });
         this._effectValue = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+                }
+            });
         });
         this._effectExternalButton = effect(() => {
             this._externalButton.set(this.externalButton());
@@ -3662,7 +3722,7 @@ class CoerSecretBox extends ControlValue {
         this._passwordType.update(value => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></i> \r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextBox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></i> \r\n                }\r\n            </span>\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft(),\r\n                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
             type: Component,
@@ -4067,11 +4127,11 @@ class CoerSidenav {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\"\r\n        [ngStyle]=\"{ 'z-index': _isModalOpen() ? '1' : '3' }\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$7.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:1;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["onClickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "onClickMenuOption", "clickMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\"\r\n        [ngStyle]=\"{ 'z-index': _isModalOpen() ? '1' : '3' }\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
+            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer \r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_Open()\"\r\n        (closed)=\"_Close()\"\r\n        [mode]=\"_mode()\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {                \r\n                @for(item of _navigation(); track item.id) {\r\n                    \r\n                    <!-- Menu -->                     \r\n                    @if(_IsMenu(item)) {\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (onClickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n    \r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    }\r\n                             \r\n                    <!-- Option Menu -->\r\n                    @else {\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (onClickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n                     \r\n        \r\n                    <div class=\"separator\"></div> \r\n                }\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav scrollbar-invisible': true, 'display-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;z-index:1;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;overflow-y:auto!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerDropdown extends ControlValue {
@@ -4150,8 +4210,12 @@ class CoerDropdown extends ControlValue {
             }
             return null;
         };
-        this._effect = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+        this._effectValue = effect(() => {
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+                }
+            });
         });
     }
     //AfterViewInit
@@ -4175,7 +4239,7 @@ class CoerDropdown extends ControlValue {
     }
     //OnDestroy
     ngOnDestroy() {
-        this._effect?.destroy();
+        this._effectValue?.destroy();
     }
     //getter
     get _label() {
@@ -4410,8 +4474,12 @@ class CoerTextarea extends ControlValue {
             return this.isInvalid() || this.isValid()
                 ? '18px' : '0px';
         });
-        this._effect = effect(() => {
-            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+        this._effectValue = effect(() => {
+            Tools.Sleep().then(() => {
+                if (Tools.IsNull(this._UpdateValue)) {
+                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+                }
+            });
         });
     }
     //AfterViewInit
@@ -4441,7 +4509,7 @@ class CoerTextarea extends ControlValue {
     }
     //OnDestroy
     ngOnDestroy() {
-        this._effect?.destroy();
+        this._effectValue?.destroy();
     }
     //getter
     get footer() {
@@ -4486,7 +4554,7 @@ class CoerTextarea extends ControlValue {
         this.Focus(false, delay);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\">\r\n            \r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <textarea #coerTextArea matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextArea.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'min-height'   : '80px', \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition(),\r\n                    'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                    'height'       : height()\r\n                }\"></textarea> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field>\r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'min-height'   : '89px',\r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft()\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    </div>\r\n\r\n    @if(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component coer-textarea\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft() \r\n    }\">\r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\">\r\n            \r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <textarea #coerTextArea matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerTextArea.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [style]=\"{\r\n                    'min-height'   : '80px', \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition(),\r\n                    'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                    'height'       : height()\r\n                }\"></textarea> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></i>\r\n                }\r\n            </span>\r\n        </mat-form-field>\r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                    'loading'   : isLoading(),\r\n                    'invisible' : isInvisible() \r\n                }\" \r\n                [style]=\"{ \r\n                    'min-height'   : '89px',\r\n                    'width'        : width(),\r\n                    'min-width'    : minWidth(),\r\n                    'max-width'    : maxWidth(),\r\n                    'margin-top'   : marginTop(),\r\n                    'margin-right' : marginRight(),\r\n                    'margin-bottom': marginBottom(),\r\n                    'margin-left'  : marginLeft()\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    </div>\r\n\r\n    @if(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    } \r\n</div>", styles: ["div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:auto!important;min-height:80px!important}div.coer-textarea div.coer-form-field-content mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{min-height:80px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
             type: Component,
@@ -4497,8 +4565,7 @@ class CoerToolbar {
     constructor() {
         //Elements
         this._toogleButton = viewChild.required('toogleButton');
-        //variables
-        this._isModalOpen = isModalOpenSIGNAL;
+        //variables 
         this._isReadyPage = false;
         this._awaitSignals = false;
         //appSettings
@@ -4580,11 +4647,11 @@ class CoerToolbar {
             ? '5px' : '0px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n    <mat-toolbar> \r\n        @if(showLogo) {\r\n            <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n                <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n            </div>\r\n        }\r\n\r\n        @else {\r\n            <div class=\"button-container\">\r\n                <button\r\n                    #toogleButton \r\n                    mat-icon-button  \r\n                    type=\"button\"\r\n                    (click)=\"ToogleSideNave()\">\r\n                    <i class=\"icon-bars\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <span class=\"app-name\"> {{ _appName }} </span> \r\n        } \r\n\r\n        <span class=\"fill-space\"></span> \r\n         \r\n        <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n            'padding-right': GetPadding('user-container'),\r\n            'display': showUser ? 'flex' : 'none'\r\n        }\">\r\n            <div class=\"position-absolute right-0px min-width-150px\">\r\n                <coer-dropdown \r\n                    #dropdown\r\n                    [dataSource]=\"menu()\"  \r\n                    propDisplay=\"label\" \r\n                    width=\"auto\" \r\n                    maxWidth=\"auto\"\r\n                    [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                    (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n                ></coer-dropdown>\r\n            </div> \r\n\r\n            <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n            <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n                \r\n                @if(userName().length > 0) {\r\n                    <p> {{ userName() }} </p>\r\n                }\r\n    \r\n                @if(userTitle().length > 0) {\r\n                    <p> {{ userTitle() }} </p>\r\n                }\r\n            </div> \r\n        </div>  \r\n        \r\n        @if(!showUser) {\r\n            <span class=\"me-2\">\r\n                <span class=\"fw-bold fa-fade\"> \r\n                    Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n                </span>                \r\n            </span>\r\n        }\r\n    </mat-toolbar>\r\n</div>\r\n\r\n<div class=\"toolbar-shadow\"></div>", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div.toolbar-shadow{box-shadow:1px -10px 20px #000!important;width:100vw!important;height:45px!important;position:absolute!important;top:0!important;z-index:2!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerToolbar, isStandalone: false, selector: "coer-toolbar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickMenu: "onClickMenu", onClickOption: "onClickOption" }, viewQueries: [{ propertyName: "_toogleButton", first: true, predicate: ["toogleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"coer-tool-bar\">\r\n    <mat-toolbar> \r\n        @if(showLogo) {\r\n            <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n                <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n            </div>\r\n        }\r\n\r\n        @else {\r\n            <div class=\"button-container\">\r\n                <button\r\n                    #toogleButton \r\n                    mat-icon-button  \r\n                    type=\"button\"\r\n                    (click)=\"ToogleSideNave()\">\r\n                    <i class=\"icon-bars\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <span class=\"app-name\"> {{ _appName }} </span> \r\n        } \r\n\r\n        <span class=\"fill-space\"></span> \r\n         \r\n        <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n            'padding-right': GetPadding('user-container'),\r\n            'display': showUser ? 'flex' : 'none'\r\n        }\">\r\n            <div class=\"position-absolute right-0px min-width-150px\">\r\n                <coer-dropdown \r\n                    #dropdown\r\n                    [dataSource]=\"menu()\"  \r\n                    propDisplay=\"label\" \r\n                    width=\"auto\" \r\n                    maxWidth=\"auto\"\r\n                    [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                    (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n                ></coer-dropdown>\r\n            </div> \r\n\r\n            <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n            <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n                \r\n                @if(userName().length > 0) {\r\n                    <p> {{ userName() }} </p>\r\n                }\r\n    \r\n                @if(userTitle().length > 0) {\r\n                    <p> {{ userTitle() }} </p>\r\n                }\r\n            </div> \r\n        </div>  \r\n        \r\n        @if(!showUser) {\r\n            <span class=\"me-2\">\r\n                <span class=\"fw-bold fa-fade\"> \r\n                    Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n                </span>                \r\n            </span>\r\n        }\r\n    </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative;z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: i5.NoImagePipe, name: "noImage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerToolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\" [ngClass]=\"{ 'position-relative': _isModalOpen() }\">\r\n    <mat-toolbar> \r\n        @if(showLogo) {\r\n            <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n                <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n            </div>\r\n        }\r\n\r\n        @else {\r\n            <div class=\"button-container\">\r\n                <button\r\n                    #toogleButton \r\n                    mat-icon-button  \r\n                    type=\"button\"\r\n                    (click)=\"ToogleSideNave()\">\r\n                    <i class=\"icon-bars\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <span class=\"app-name\"> {{ _appName }} </span> \r\n        } \r\n\r\n        <span class=\"fill-space\"></span> \r\n         \r\n        <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n            'padding-right': GetPadding('user-container'),\r\n            'display': showUser ? 'flex' : 'none'\r\n        }\">\r\n            <div class=\"position-absolute right-0px min-width-150px\">\r\n                <coer-dropdown \r\n                    #dropdown\r\n                    [dataSource]=\"menu()\"  \r\n                    propDisplay=\"label\" \r\n                    width=\"auto\" \r\n                    maxWidth=\"auto\"\r\n                    [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                    (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n                ></coer-dropdown>\r\n            </div> \r\n\r\n            <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n            <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n                \r\n                @if(userName().length > 0) {\r\n                    <p> {{ userName() }} </p>\r\n                }\r\n    \r\n                @if(userTitle().length > 0) {\r\n                    <p> {{ userTitle() }} </p>\r\n                }\r\n            </div> \r\n        </div>  \r\n        \r\n        @if(!showUser) {\r\n            <span class=\"me-2\">\r\n                <span class=\"fw-bold fa-fade\"> \r\n                    Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n                </span>                \r\n            </span>\r\n        }\r\n    </mat-toolbar>\r\n</div>\r\n\r\n<div class=\"toolbar-shadow\"></div>", styles: ["div#coer-tool-bar{z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div.toolbar-shadow{box-shadow:1px -10px 20px #000!important;width:100vw!important;height:45px!important;position:absolute!important;top:0!important;z-index:2!important}\n"] }]
+            args: [{ selector: 'coer-toolbar', standalone: false, template: "<div id=\"coer-tool-bar\">\r\n    <mat-toolbar> \r\n        @if(showLogo) {\r\n            <div class=\"logo-image-container\" (click)=\"ToogleSideNave()\" [ngStyle]=\"{ 'width': _appLogoWidth }\">\r\n                <div class=\"logo-image\" [ngStyle]=\"{ 'background-image': 'url(' + (_appLogoPath | noImage:'IMAGE') + ')' }\"></div>\r\n            </div>\r\n        }\r\n\r\n        @else {\r\n            <div class=\"button-container\">\r\n                <button\r\n                    #toogleButton \r\n                    mat-icon-button  \r\n                    type=\"button\"\r\n                    (click)=\"ToogleSideNave()\">\r\n                    <i class=\"icon-bars\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <span class=\"app-name\"> {{ _appName }} </span> \r\n        } \r\n\r\n        <span class=\"fill-space\"></span> \r\n         \r\n        <div class=\"user-container\" (click)=\"dropdown.Open()\" [ngStyle]=\"{ \r\n            'padding-right': GetPadding('user-container'),\r\n            'display': showUser ? 'flex' : 'none'\r\n        }\">\r\n            <div class=\"position-absolute right-0px min-width-150px\">\r\n                <coer-dropdown \r\n                    #dropdown\r\n                    [dataSource]=\"menu()\"  \r\n                    propDisplay=\"label\" \r\n                    width=\"auto\" \r\n                    maxWidth=\"auto\"\r\n                    [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                    (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n                ></coer-dropdown>\r\n            </div> \r\n\r\n            <div class=\"user-image\" [ngStyle]=\"{ 'background-image': 'url(' + (image() | noImage:'USER') + ')' }\"></div>\r\n            <div #toolbarUserIdentity id=\"toolbar-user-identity\" class=\"user-identity\" [ngStyle]=\"{ 'padding-left': GetPadding('user-identity') }\">\r\n                \r\n                @if(userName().length > 0) {\r\n                    <p> {{ userName() }} </p>\r\n                }\r\n    \r\n                @if(userTitle().length > 0) {\r\n                    <p> {{ userTitle() }} </p>\r\n                }\r\n            </div> \r\n        </div>  \r\n        \r\n        @if(!showUser) {\r\n            <span class=\"me-2\">\r\n                <span class=\"fw-bold fa-fade\"> \r\n                    Loading <i class=\"fa-solid fa-sync fa-spin\"></i> \r\n                </span>                \r\n            </span>\r\n        }\r\n    </mat-toolbar> \r\n</div> ", styles: ["div#coer-tool-bar{position:relative;z-index:1}div#coer-tool-bar mat-toolbar{height:45px!important;position:relative!important;z-index:10!important;padding:0!important;background-color:var(--toolbar-inner)!important;color:var(--toolbar-text-inner)!important}div#coer-tool-bar mat-toolbar span.app-name{height:40px!important;display:contents!important;max-width:45%}div#coer-tool-bar mat-toolbar div.logo-image-container{height:45px!important;min-width:100px}div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image{background-size:contain!important;background-repeat:no-repeat!important;background-position-y:bottom;width:100%!important;height:100%!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.button-container{display:flex;align-items:center;justify-content:center;width:40px}div#coer-tool-bar mat-toolbar div.button-container button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-active)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}div#coer-tool-bar mat-toolbar div.button-container button:focus{box-shadow:0 0 20px!important}div#coer-tool-bar mat-toolbar div.user-container{max-width:45%;display:flex;align-items:center;font-size:small!important;font-weight:700;height:0px!important;max-height:0px!important;padding-left:2px!important;margin-right:10px!important;border-radius:8px!important;position:relative!important;cursor:pointer!important}div#coer-tool-bar mat-toolbar div.user-container div.user-image{min-width:35px!important;max-width:35px!important;min-height:35px!important;max-height:35px!important;border-radius:25px;background:transparent;background-size:cover;background-repeat:no-repeat;background-position:top}div#coer-tool-bar mat-toolbar div.user-container div.user-identity{height:40px!important;max-height:40px!important;min-width:70px!important;overflow:hidden!important;display:flex!important;flex-flow:column!important;justify-content:center!important}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p{line-height:normal!important;overflow:hidden;text-overflow:ellipsis}div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection{background-color:transparent!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}\n"] }]
         }] });
 
 class ComponentsModule {