coer-elements 2.0.23 → 2.0.26

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

@@ -1,4 +1,5 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
+import { IBoxButton } from 'coer-elements/interfaces';
 import { CoerAlert, ControlValue } from 'coer-elements/tools';
 import * as i0 from "@angular/core";
 export declare class CoerNumberBox extends ControlValue implements AfterViewInit {
@@ -18,6 +19,7 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
     max: import("@angular/core").InputSignal<number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;
     isValid: import("@angular/core").InputSignal<boolean>;
+    externalButton: IBoxButton;
     selectOnFocus: import("@angular/core").InputSignal<boolean>;
     decimals: import("@angular/core").InputSignal<number>;
     isLoading: import("@angular/core").InputSignal<boolean>;
@@ -33,11 +35,16 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
     marginLeft: import("@angular/core").InputSignal<string>;
     onKeyupEnter: import("@angular/core").OutputEmitterRef<string | number>;
     onInput: import("@angular/core").OutputEmitterRef<string | number>;
+    onClickExternalButton: import("@angular/core").OutputEmitterRef<void>;
     ngAfterViewInit(): Promise<void>;
     get value(): string | number;
     protected _isEnable: import("@angular/core").Signal<boolean>;
     protected _floatLabel: import("@angular/core").Signal<"auto" | "always">;
     protected _paddingRight: import("@angular/core").Signal<"0px" | "18px">;
+    protected get _showButtonLeft(): boolean;
+    protected get _showButtonRight(): boolean;
+    protected get _buttonIcon(): string;
+    protected get _isDisabledExternalButton(): boolean;
     SetValue(value: string | number): void;
     writeValue(value: string | number): void;
     /** */
@@ -49,5 +56,5 @@ export declare class CoerNumberBox extends ControlValue implements AfterViewInit
     /** */
     Blur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerNumberBox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerNumberBox, "coer-numberbox", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onKeyupEnter": "onKeyupEnter"; "onInput": "onInput"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerNumberBox, "coer-numberbox", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "externalButton": { "alias": "externalButton"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onKeyupEnter": "onKeyupEnter"; "onInput": "onInput"; "onClickExternalButton": "onClickExternalButton"; }, never, never, false, never>;
 }

package/fesm2022/coer-elements-components.mjs

@@ -165,7 +165,7 @@ class CoerButton {
                 case 'cancel': return 'fa-solid fa-xmark fa-lg';
                 case 'import': return 'fa-solid fa-file-arrow-up fa-lg';
                 case 'excel': return 'bi bi-filetype-xlsx fa-lg';
-                case 'menu': return 'fa-solid fa-bars';
+                case 'menu': return 'coer-icon-bars';
                 case 'delete': return 'fa-solid fa-trash-can';
                 case 'edit': return 'fa-solid fa-pen fa-lg';
                 case 'go': return 'bi bi-box-arrow-right';
@@ -268,11 +268,11 @@ class CoerCard {
         this.email = input('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerCard, isStandalone: false, selector: "coer-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<figure class=\"coer-container width-min-content\">\r\n\r\n    <div class=\"flex-wrap gap-0px\">  \r\n        @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n            <div class=\"flex-item-grow-300px flex-middle-left\">\r\n                @if(IsNotOnlyWhiteSpace(icon())) {\r\n                    <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n                }\r\n\r\n                <div>\r\n                    @if(IsNotOnlyWhiteSpace(name())) {\r\n                        <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n                    }\r\n                    @if(title()) {\r\n                        <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n            <div class=\"flex-item-100 padding-top-5px\"></div>\r\n        \r\n            <div class=\"flex-item-100 padding-top-5px border-solid-top-2px\">\r\n                <p class=\"flex-middle-left gap-20px\">\r\n                    @if(IsNotOnlyWhiteSpace(phone())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-whatsapp\"></i>\r\n                            <span> {{ phone() }} </span>\r\n                        </span>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(email())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-envelope\"></i>\r\n                            <span> {{ email() }} </span>\r\n                        </span>\r\n                    }\r\n                </p>\r\n            </div> \r\n        }\r\n    </div> \r\n</figure>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerCard, isStandalone: false, selector: "coer-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<figure class=\"coer-container width-min-content\">\r\n    <div class=\"flex-wrap gap-0px\">  \r\n        @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n            <div class=\"flex-item-grow-300px flex-middle-left\">\r\n                @if(IsNotOnlyWhiteSpace(icon())) {\r\n                    <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n                }\r\n\r\n                <div>\r\n                    @if(IsNotOnlyWhiteSpace(name())) {\r\n                        <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n                    }\r\n                    @if(title()) {\r\n                        <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n            <div class=\"flex-item-100 padding-top-5px\"></div>\r\n        \r\n            <div class=\"flex-item-100 padding-top-5px border-solid-top-2px\">\r\n                <p class=\"flex-middle-left gap-20px\">\r\n                    @if(IsNotOnlyWhiteSpace(phone())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-whatsapp\"></i>\r\n                            <span> {{ phone() }} </span>\r\n                        </span>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(email())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-envelope\"></i>\r\n                            <span> {{ email() }} </span>\r\n                        </span>\r\n                    }\r\n                </p>\r\n            </div> \r\n        }\r\n    </div> \r\n</figure>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCard, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-card', standalone: false, template: "<figure class=\"coer-container width-min-content\">\r\n\r\n    <div class=\"flex-wrap gap-0px\">  \r\n        @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n            <div class=\"flex-item-grow-300px flex-middle-left\">\r\n                @if(IsNotOnlyWhiteSpace(icon())) {\r\n                    <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n                }\r\n\r\n                <div>\r\n                    @if(IsNotOnlyWhiteSpace(name())) {\r\n                        <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n                    }\r\n                    @if(title()) {\r\n                        <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n            <div class=\"flex-item-100 padding-top-5px\"></div>\r\n        \r\n            <div class=\"flex-item-100 padding-top-5px border-solid-top-2px\">\r\n                <p class=\"flex-middle-left gap-20px\">\r\n                    @if(IsNotOnlyWhiteSpace(phone())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-whatsapp\"></i>\r\n                            <span> {{ phone() }} </span>\r\n                        </span>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(email())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-envelope\"></i>\r\n                            <span> {{ email() }} </span>\r\n                        </span>\r\n                    }\r\n                </p>\r\n            </div> \r\n        }\r\n    </div> \r\n</figure>" }]
+            args: [{ selector: 'coer-card', standalone: false, template: "<figure class=\"coer-container width-min-content\">\r\n    <div class=\"flex-wrap gap-0px\">  \r\n        @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n            <div class=\"flex-item-grow-300px flex-middle-left\">\r\n                @if(IsNotOnlyWhiteSpace(icon())) {\r\n                    <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n                }\r\n\r\n                <div>\r\n                    @if(IsNotOnlyWhiteSpace(name())) {\r\n                        <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n                    }\r\n                    @if(title()) {\r\n                        <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n            <div class=\"flex-item-100 padding-top-5px\"></div>\r\n        \r\n            <div class=\"flex-item-100 padding-top-5px border-solid-top-2px\">\r\n                <p class=\"flex-middle-left gap-20px\">\r\n                    @if(IsNotOnlyWhiteSpace(phone())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-whatsapp\"></i>\r\n                            <span> {{ phone() }} </span>\r\n                        </span>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(email())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-envelope\"></i>\r\n                            <span> {{ email() }} </span>\r\n                        </span>\r\n                    }\r\n                </p>\r\n            </div> \r\n        }\r\n    </div> \r\n</figure>" }]
         }] });
 
 class CoerCheckbox extends ControlValue {
@@ -866,6 +866,7 @@ class CoerNumberBox extends ControlValue {
         this.max = input(2147483647);
         this.isInvalid = input(false);
         this.isValid = input(false);
+        this.externalButton = { show: false };
         this.selectOnFocus = input(true);
         this.decimals = input(0);
         this.isLoading = input(false);
@@ -882,6 +883,7 @@ class CoerNumberBox extends ControlValue {
         //Outputs
         this.onKeyupEnter = output();
         this.onInput = output();
+        this.onClickExternalButton = output();
         //computed
         this._isEnable = computed(() => {
             return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
@@ -950,11 +952,36 @@ class CoerNumberBox extends ControlValue {
     get value() {
         return this._value;
     }
+    //getter
+    get _showButtonLeft() {
+        return this.externalButton.show
+            && Tools.IsNotNull(this.externalButton?.position)
+            && this.externalButton?.position === 'left'
+            && !this.isInvisible();
+    }
+    //getter
+    get _showButtonRight() {
+        return this.externalButton.show
+            && ((Tools.IsNull(this.externalButton?.position) || this.externalButton?.position === 'right'))
+            && !this.isInvisible();
+    }
+    //getter
+    get _buttonIcon() {
+        return Tools.IsNotOnlyWhiteSpace(this.externalButton?.icon)
+            ? this.externalButton.icon : 'pointer';
+    }
+    //getter
+    get _isDisabledExternalButton() {
+        return Tools.IsNotNull(this.externalButton?.isDisabled)
+            ? this.externalButton.isDisabled : false;
+    }
     //ControlValueAccessor
     SetValue(value) {
         value = this._OnlyNumbers(value);
         value = this._ValidateRangeValue(value);
-        this._UpdateValue(value);
+        if (typeof this._UpdateValue === 'function') {
+            this._UpdateValue(value);
+        }
         this._coerNumberbox().nativeElement.value = value;
         this._value = value;
     }
@@ -1074,13 +1101,15 @@ class CoerNumberBox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: null, 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: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, 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" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-number-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\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        }\">\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                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n</div>", styles: ["div.coer-number-box mat-form-field{position:relative!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input.caret-none{caret-color:transparent!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-number-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-number-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox 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:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.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: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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: false, 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-number-box\">\r\n    @if(_showButtonLeft) {\r\n        <div class=\"button-container\">\r\n            <coer-button\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [icon]=\"_buttonIcon\"  \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            'readonly': isReadonly() && !isLoading(),\r\n            'd-none': 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        }\">\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                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    @if(isInvisible()) {\r\n        <mat-form-field class=\"invisible\">\r\n            <input matInput [disabled]=\"true\"> \r\n        </mat-form-field> \r\n    }\r\n\r\n    @if(_showButtonRight) {\r\n        <div class=\"button-container\">\r\n            <coer-button\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [icon]=\"_buttonIcon\"  \r\n                [isDisabled]=\"_isDisabledExternalButton\" \r\n                (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n            ></coer-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["div.coer-number-box{display:flex;align-items:center}div.coer-number-box mat-form-field{position:relative!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input.caret-none{caret-color:transparent!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-number-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-number-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-number-box div.button-container{width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e7e9!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox 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:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.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", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-number-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\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        }\">\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                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n</div>", styles: ["div.coer-number-box mat-form-field{position:relative!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input.caret-none{caret-color:transparent!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-number-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-number-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox 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:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
+            args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-number-box\">\r\n    @if(_showButtonLeft) {\r\n        <div class=\"button-container\">\r\n            <coer-button\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [icon]=\"_buttonIcon\"  \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            'readonly': isReadonly() && !isLoading(),\r\n            'd-none': 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        }\">\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                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    @if(isInvisible()) {\r\n        <mat-form-field class=\"invisible\">\r\n            <input matInput [disabled]=\"true\"> \r\n        </mat-form-field> \r\n    }\r\n\r\n    @if(_showButtonRight) {\r\n        <div class=\"button-container\">\r\n            <coer-button\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [icon]=\"_buttonIcon\"  \r\n                [isDisabled]=\"_isDisabledExternalButton\" \r\n                (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n            ></coer-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["div.coer-number-box{display:flex;align-items:center}div.coer-number-box mat-form-field{position:relative!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;height:40px!important;padding:0!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input.caret-none{caret-color:transparent!important}div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-number-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-number-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-number-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-number-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-number-box div.button-container{width:40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;background-color:#e6e7e9!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox 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:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
+            }], externalButton: [{
+                type: Input
             }] } });
 
 class CoerSelectbox extends ControlValue {
@@ -2743,7 +2772,7 @@ class CoerGrid extends CoerGridExtension {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltipPosition", "tooltip"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerGrid, isStandalone: false, selector: "coer-grid", providers: [CONTROL_VALUE(CoerGrid)], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "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: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["value", "id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltipPosition", "tooltip"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
             type: Component,
@@ -2950,11 +2979,11 @@ 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: "14.0.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: "level", label: "label", icon: "icon", path: "path", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\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}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.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.icon-container i{min-height:16px!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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: "level", label: "label", icon: "icon", path: "path", tree: "tree" }, outputs: { clickMenuOption: "clickMenuOption" }, ngImport: i0, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\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,
-            args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\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}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.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.icon-container i{min-height:16px!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"] }]
+            args: [{ selector: 'coer-menu-option', standalone: false, template: "<mat-nav-list class=\"coer-menu-option\" (click)=\"ClickMenuOption('')\">\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"] }]
         }], propDecorators: { level: [{
                 type: Input
             }], label: [{
@@ -3204,7 +3233,7 @@ class CoerTreeAccordion {
     }
     get _icon() {
         return (this.item && Tools.IsNotOnlyWhiteSpace(this.item?.icon) && this.item.icon.length > 0)
-            ? this.item.icon : 'fa-solid fa-bars';
+            ? this.item.icon : 'coer-icon-bars';
     }
     get marginLeft() {
         return `${(this.level - 1) * 20}px`;
@@ -3355,7 +3384,7 @@ class CoerSidenav {
         /** */
         this._GetIcon = (item) => {
             return item?.icon
-                || (this._IsMenu(item) ? (this._IsGrid(item) ? 'fa-solid fa-grip' : 'fa-solid fa-bars') : '');
+                || (this._IsMenu(item) ? (this._IsGrid(item) ? 'fa-solid fa-grip' : 'coer-icon-bars') : '');
         };
         /** */
         this.SetIdentityClass = (label) => {
@@ -3395,6 +3424,10 @@ class CoerSidenav {
                 menuLv1.Close();
             }
         }
+        //Close Sidenav
+        if (this.mode == 'over') {
+            this.Close();
+        }
     }
     /** */
     SetActiveLink(selectedOption) {
@@ -4079,11 +4112,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" }, 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                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    icon=\"menu\"\r\n                    color=\"navigation\"\r\n                    [isLoading]=\"isLoading\"\r\n                    (onClick)=\"ToogleSideNave()\"\r\n                ></coer-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            \r\n            <coer-dropdown\r\n                #dropdown\r\n                [dataSource]=\"menu()\"  \r\n                propDisplay=\"label\" \r\n                width=\"auto\"\r\n                [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                maxWidth=\"auto\"\r\n                (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n            ></coer-dropdown>\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\r\n    <div class=\"shadow\"></div>\r\n</div>\r\n", 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.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;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 coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\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$a.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["value", "id", "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: i9.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" }, 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                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    icon=\"icon-bars\"\r\n                    color=\"navigation\"\r\n                    [isLoading]=\"isLoading\"\r\n                    (onClick)=\"ToogleSideNave()\"\r\n                ></coer-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            \r\n            <coer-dropdown\r\n                #dropdown\r\n                [dataSource]=\"menu()\"  \r\n                propDisplay=\"label\" \r\n                width=\"auto\"\r\n                [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                maxWidth=\"auto\"\r\n                (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n            ></coer-dropdown>\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\r\n    <div class=\"shadow\"></div>\r\n</div>\r\n", 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.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;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 coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\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$a.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["value", "id", "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: i9.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                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    icon=\"menu\"\r\n                    color=\"navigation\"\r\n                    [isLoading]=\"isLoading\"\r\n                    (onClick)=\"ToogleSideNave()\"\r\n                ></coer-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            \r\n            <coer-dropdown\r\n                #dropdown\r\n                [dataSource]=\"menu()\"  \r\n                propDisplay=\"label\" \r\n                width=\"auto\"\r\n                [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                maxWidth=\"auto\"\r\n                (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n            ></coer-dropdown>\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\r\n    <div class=\"shadow\"></div>\r\n</div>\r\n", 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.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;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 coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
+            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                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    icon=\"icon-bars\"\r\n                    color=\"navigation\"\r\n                    [isLoading]=\"isLoading\"\r\n                    (onClick)=\"ToogleSideNave()\"\r\n                ></coer-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            \r\n            <coer-dropdown\r\n                #dropdown\r\n                [dataSource]=\"menu()\"  \r\n                propDisplay=\"label\" \r\n                width=\"auto\"\r\n                [minWidth]=\"GetElementWidth(toolbarUserIdentity)\"\r\n                maxWidth=\"auto\"\r\n                (onSelected)=\"onClickOption.emit($event); dropdown.Unselect()\"\r\n            ></coer-dropdown>\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\r\n    <div class=\"shadow\"></div>\r\n</div>\r\n", 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.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;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 coer-dropdown{position:absolute;transform:translate(-3px)}div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul{right:0!important}div#coer-tool-bar mat-toolbar div.user-container:hover{transform:scale(1.03);box-shadow:0 0 15px -5px #000!important}div#coer-tool-bar div.shadow{box-shadow:1px -10px 20px #000!important;width:100vw;height:45px;position:absolute;top:0;z-index:8}\n"] }]
         }] });
 
 class ComponentsModule {