coer-elements 2.0.26 → 2.0.27

package/fesm2022/coer-elements-components.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, output, Component, computed, Input, signal, ContentChildren, inject, viewChildren, EventEmitter, Output, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { viewChild, input, output, Component, computed, effect, signal, ContentChildren, inject, viewChildren, Input, contentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$3 from 'coer-elements/directives';
 import { CoerRefDirective, DirectivesModule } from 'coer-elements/directives';
 import * as i9 from 'coer-elements/pipes';
 import { PipesModule } from 'coer-elements/pipes';
@@ -31,20 +30,23 @@ import { MatListModule } from '@angular/material/list';
 import { provideNativeDateAdapter, MatNativeDateModule } from '@angular/material/core';
 import * as i2$5 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i2$9 from '@angular/material/tabs';
+import * as i3$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i2$a from '@angular/material/toolbar';
+import * as i2$9 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { Tools, ControlValue, CONTROL_VALUE, Dates, Screen, HTMLElements, CoerAlert, Files, Numbers, Strings, Collections, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
-import { Tooltip, Modal } from 'bootstrap';
-import { isModalOpenSIGNAL, menuSelectedSIGNAL, breakpointSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Tools, Strings, ControlValue, CONTROL_VALUE, Dates, Screen, HTMLElements, CoerAlert, Files, Numbers, Collections, Source, Menu, Breadcrumbs } from 'coer-elements/tools';
+import { isModalOpenSIGNAL, menuSelectedSIGNAL, isMenuOpenSIGNAL, isLoadingSIGNAL, breakpointSIGNAL, navigationSIGNAL } from 'coer-elements/signals';
+import { Modal } from 'bootstrap';
 
 class CoerAccordion {
     constructor() {
+        //Elements
+        this._expansionPanel = viewChild('coerAccordion');
         //Variables
         this._id = Tools.GetGuid('coer-accordion');
-        this._expansionPanel = viewChild('coerAccordion');
         this._isDisabled = false;
         //Inputs
         this.id = input('');
@@ -60,6 +62,7 @@ class CoerAccordion {
         //Generic Tools
         this._IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
     }
+    //AfterViewInit
     ngAfterViewInit() {
         Tools.Sleep().then(() => {
             this._htmlElement = document.getElementById(this._id);
@@ -117,18 +120,17 @@ class CoerAccordion {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerAccordion, isStandalone: false, selector: "coer-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, scrollOnOpen: { classPropertyName: "scrollOnOpen", publicName: "scrollOnOpen", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["coerAccordion"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'collapsed': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}mat-expansion-panel.coer-accordion .collapsed{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'd-none': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}\n"] }]
+            args: [{ selector: 'coer-accordion', standalone: false, template: "<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'collapsed': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>", styles: ["mat-expansion-panel.coer-accordion{overflow:visible!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header{height:35px!important;background-color:var(--smoke)!important;padding-left:12px!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header span{color:var(--black)!important;font-size:16px!important;white-space:nowrap!important}mat-expansion-panel.coer-accordion mat-expansion-panel-header mat-panel-title{display:flex;align-items:center;gap:5px}mat-expansion-panel.coer-accordion div.mat-expansion-panel-body{padding:0!important}mat-expansion-panel.coer-accordion .collapsed{display:none!important}\n"] }]
         }] });
 
 class CoerButton {
     constructor() {
         //Variables
         this._id = Tools.GetGuid('coer-button');
-        this._tooltip = '';
         //Inputs 
         this.id = input('');
         this.color = input('default');
@@ -136,7 +138,6 @@ class CoerButton {
         this.icon = input('');
         this.iconPosition = input('left');
         this.path = input([]);
-        this.animation = input(false);
         this.isLoading = input(false);
         this.isDisabled = input(false);
         this.isReadonly = input(false);
@@ -150,79 +151,69 @@ class CoerButton {
         this.marginRight = input('0px');
         this.marginBottom = input('0px');
         this.marginLeft = input('0px');
+        this.tooltip = input('');
         this.tooltipPosition = input('left');
         //Outputs 
         this.onClick = output();
         //computed
+        this._tooltip = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.tooltip())
+                ? Strings.CleanUpBlanks(this.tooltip()) : '';
+        });
+        //computed
+        this._tooltipPosition = computed(() => {
+            switch (this.tooltipPosition()) {
+                case 'top': return 'above';
+                case 'right': return 'right';
+                case 'bottom': return 'below';
+                default: return 'left';
+            }
+        });
+        //computed
         this._isEnable = computed(() => {
             return !this.isLoading() && !this.isDisabled() && !this.isInvisible() && !this.isReadonly();
         });
         //computed
         this._icon = computed(() => {
+            const icon = Tools.IsNotNull(this.icon()) ? this.icon() : '';
             switch (this.icon()) {
-                case 'new': return 'fa-solid fa-plus fa-lg';
-                case 'save': return 'fa-solid fa-floppy-disk fa-lg';
-                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 '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';
-                case 'back': return 'bi bi-box-arrow-left';
-                case 'pointer': return 'bi bi-hand-index-thumb-fill';
-                default: return this.icon();
+                case 'new': return 'icon-plus';
+                case 'save': return 'icon-disk-floppy icon-fill';
+                case 'cancel': return 'icon-x';
+                case 'import': return 'icon-file-arrow-up icon-fill';
+                case 'export': return 'icon-file-arrow-down icon-fill';
+                case 'excel': return 'icon-file-csv icon-fill';
+                case 'delete': return 'icon-trash-can icon-fill';
+                case 'edit': return 'icon-pen icon-fill';
+                case 'go': return 'icon-box-arrow-right';
+                case 'back': return 'icon-box-arrow-left';
+                case 'pointer': return 'icon-pointer icon-fill';
             }
+            return ['icon', 'icon-outline', 'icon-no-border'].includes(this.type())
+                && Tools.IsOnlyWhiteSpace(icon)
+                ? 'icon-pointer icon-fill' : icon;
         });
-    }
-    set tooltip(value) {
-        this._tooltip = value;
-        if (Tools.IsNotNull(this._tooltipElement)) {
-            if (value) {
-                this._tooltipElement.setContent({ '.tooltip-inner': this._tooltip });
-                Tools.Sleep().then(() => this._tooltipElement.enable());
-            }
-            if (Tools.IsOnlyWhiteSpace(value)) {
-                Tools.Sleep().then(() => this._tooltipElement.disable());
-            }
-        }
-    }
-    ngOnInit() {
-        this._SetToolTip();
-        this._SetEvents();
-    }
-    ngOnDestroy() {
-        if (this._tooltipElement) {
-            Tools.Sleep().then(() => this._tooltipElement.dispose());
-        }
-    }
-    /** */
-    _SetEvents() {
-        Tools.Sleep().then(() => {
-            this._element = document.getElementById(`${this._id}-inner-button`);
-            if (Tools.IsNotNull(this._element)) {
-                this._element.addEventListener('focus', () => {
-                    if (!this._isEnable())
-                        this.Blur();
-                });
-            }
+        //computed
+        this._buttonType = computed(() => {
+            const readonly = ['icon', 'icon-outline', 'icon-no-border'].includes(this.type())
+                ? (this.isDisabled() || this.isLoading() ? 'readonly' : '')
+                : (this.isDisabled() ? 'readonly' : '');
+            return `
+            ${this.color()}-${['filled', 'icon'].includes(this.type()) ? 'filled' : 'outline'} 
+            ${readonly} 
+            ${this.isLoading() ? 'cursor-wait' : ''}
+            ${this.type() == 'icon-no-border' ? 'icon-no-border' : ''}
+        `.trim();
         });
     }
-    _SetToolTip() {
+    //AfterViewInit
+    ngAfterViewInit() {
         Tools.Sleep().then(() => {
-            const htmlElement = document.getElementById(`${this._id}-container`);
-            if (Tools.IsNotNull(htmlElement)) {
-                htmlElement.addEventListener('mouseleave', () => {
-                    if (Tools.IsNotNull(htmlElement) && Tools.IsNotNull(this._tooltipElement)) {
-                        this._tooltipElement.hide();
-                    }
-                });
-                this._tooltipElement = new Tooltip(htmlElement, {
-                    html: true,
-                    title: this._tooltip,
-                    placement: this.tooltipPosition
-                });
-            }
+            this._element = document.getElementById(`${this._id}-inner-button`);
+            this._element.addEventListener('focus', () => {
+                if (!this._isEnable())
+                    this.Blur();
+            });
         });
     }
     /** */
@@ -240,18 +231,16 @@ class CoerButton {
         });
     }
     /** */
-    Blur() {
-        Tools.Sleep().then(() => this._element.blur());
+    Blur(timeout = 0) {
+        Tools.Sleep(timeout).then(() => this._element.blur());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", 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 }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n    <a [id]=\"_id + '-container'\"\r\n        [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\r\n        \r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"_Click()\"\r\n                [ngClass]=\"{\r\n                    'primary-filled'     : (color() == 'primary'     && type() =='filled'),\r\n                    'secondary-filled'   : (color() == 'secondary'   && type() =='filled'),\r\n                    'success-filled'     : (color() == 'success'     && type() =='filled'),\r\n                    'warning-filled'     : (color() == 'warning'     && type() =='filled'),\r\n                    'danger-filled'      : (color() == 'danger'      && type() =='filled'),\r\n                    'navigation-filled'  : (color() == 'navigation'  && type() =='filled'),\r\n                    'information-filled' : (color() == 'information' && type() =='filled'),\r\n                    'dark-filled'        : (color() == 'dark'        && type() =='filled'),\r\n                    'light-filled'       : (color() == 'light'       && type() =='filled'),\r\n                    'primary-outline'    : (color() == 'primary'     && type() =='outline'),\r\n                    'secondary-outline'  : (color() == 'secondary'   && type() =='outline'),\r\n                    'success-outline'    : (color() == 'success'     && type() =='outline'),\r\n                    'warning-outline'    : (color() == 'warning'     && type() =='outline'),\r\n                    'danger-outline'     : (color() == 'danger'      && type() =='outline'),\r\n                    'navigation-outline' : (color() == 'navigation'  && type() =='outline'),\r\n                    'information-outline': (color() == 'information' && type() =='outline'),\r\n                    'dark-outline'       : (color() == 'dark'        && type() =='outline'),\r\n                    'light-outline'      : (color() == 'light'       && type() =='outline'),\r\n                    'readonly': isDisabled(),\r\n                    'cursor-wait': isLoading()\r\n                }\"\r\n                [ngStyle]=\"{\r\n                    'width'     : width(),\r\n                    'min-width' : minWidth(),\r\n                    'max-width' : maxWidth(),\r\n                    'height'    : height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    @if(iconPosition() == 'left') {\r\n                        <span>\r\n                            <i [class]=\"_icon()\"></i>\r\n                        </span>\r\n                    }\r\n\r\n                    <span [ngClass]=\"{ \r\n                        'ms-2': (iconPosition() == 'left'  && icon().length > 0), \r\n                        'me-2': (iconPosition() == 'right' && icon().length > 0) \r\n                        }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    @if(iconPosition() == 'right') {\r\n                        <span>\r\n                            <i [class]=\"_icon()\"></i>\r\n                        </span> \r\n                    }\r\n                </span>\r\n\r\n                <ng-template #loading>\r\n                    <span class=\"slot fa-fade\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"spinner-border\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            @if (type() == 'icon') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-filled'    : (color() == 'primary'),\r\n                        'secondary-filled'  : (color() == 'secondary'),\r\n                        'success-filled'    : (color() == 'success'),\r\n                        'warning-filled'    : (color() == 'warning'),\r\n                        'danger-filled'     : (color() == 'danger'),\r\n                        'navigation-filled' : (color() == 'navigation'),\r\n                        'information-filled': (color() == 'information'),\r\n                        'dark-filled'       : (color() == 'dark'),\r\n                        'light-filled'      : (color() == 'light'),\r\n                        'readonly'          : (isDisabled() || isLoading()),\r\n                        'cursor-wait'       : isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-outline') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline'    : (color() == 'primary'),\r\n                        'secondary-outline'  : (color() == 'secondary'),\r\n                        'success-outline'    : (color() == 'success'),\r\n                        'warning-outline'    : (color() == 'warning'),\r\n                        'danger-outline'     : (color() == 'danger'),\r\n                        'navigation-outline' : (color() == 'navigation'),\r\n                        'information-outline': (color() == 'information'),\r\n                        'dark-outline'       : (color() == 'dark'),\r\n                        'light-outline'      : (color() == 'light'),\r\n                        'readonly'           : (isDisabled() || isLoading()),\r\n                        'cursor-wait'        : isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-no-border') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline'    : (color() == 'primary'),\r\n                        'secondary-outline'  : (color() == 'secondary'),\r\n                        'success-outline'    : (color() == 'success'),\r\n                        'warning-outline'    : (color() == 'warning'),\r\n                        'danger-outline'     : (color() == 'danger'),\r\n                        'navigation-outline' : (color() == 'navigation'),\r\n                        'information-outline': (color() == 'information'),\r\n                        'dark-outline'       : (color() == 'dark'),\r\n                        'light-outline'      : (color() == 'light'),\r\n                        'readonly'           : (isDisabled() || isLoading()),\r\n                        'icon-no-border'     : true\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n        }\r\n    </a>\r\n</div>", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--primary-inner)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:var(--white)!important;color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{background-color:var(--secondary-inner)!important;color:var(--white)!important}div.coer-button button.secondary-outline{background-color:var(--white)!important;color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{background-color:var(--success-inner)!important;color:var(--white)!important}div.coer-button button.success-outline{background-color:var(--white)!important;color:var(--success-inner)!important;border:1px solid var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{background-color:var(--warning-inner)!important;color:var(--black)!important}div.coer-button button.warning-outline{background-color:var(--white)!important;color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{background-color:var(--danger-inner)!important;color:var(--white)!important}div.coer-button button.danger-outline{background-color:var(--white)!important;color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{background-color:var(--navigation-inner)!important;color:var(--white)!important}div.coer-button button.navigation-outline{background-color:var(--white)!important;color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{background-color:var(--information-inner)!important;color:var(--white)!important}div.coer-button button.information-outline{background-color:var(--white)!important;color:var(--information-inner)!important;border:1px solid var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.dark-outline{background-color:var(--white)!important;color:var(--black)!important;border:1px solid var(--black)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{background-color:var(--white)!important;color:var(--black)!important}div.coer-button button.light-outline{background-color:transparent!important;color:var(--white)!important;border:1px solid var(--white)!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerButton, isStandalone: false, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n    <a  [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'loading': isLoading() }\"\r\n        [ngStyle]=\"{ \r\n            'visibility'   : (isInvisible() || isReadonly() ? 'hidden' : 'visible'),\r\n            'margin-top'   : marginTop(), \r\n            'margin-right' : marginRight(), \r\n            'margin-bottom': marginBottom(), \r\n            'margin-left'  : marginLeft()  \r\n        }\">\r\n        \r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button type=\"button\" \r\n                [id]=\"_id + '-inner-button'\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\"\r\n                [ngStyle]=\"{\r\n                    'width'     : width(),\r\n                    'min-width' : minWidth(),\r\n                    'max-width' : maxWidth(),\r\n                    'height'    : height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n\r\n                @if(!isLoading()) {\r\n                    <span class=\"slot\">\r\n                        @if(iconPosition() == 'left') {                         \r\n                            <i [class]=\"_icon()\"></i>                         \r\n                        }\r\n    \r\n                        <span [ngClass]=\"{ \r\n                            'ms-2': (iconPosition() == 'left'  && _icon().length > 0), \r\n                            'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n                            }\">\r\n                            <ng-content>Click</ng-content>\r\n                        </span>\r\n    \r\n                        @if(iconPosition() == 'right') {\r\n                            <i [class]=\"_icon()\"></i>\r\n                        }\r\n                    </span>\r\n                }\r\n\r\n                @else {\r\n                    <span class=\"slot animation-appear\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"icon-circle-notch animation-spin\"></i>\r\n                    </span> \r\n                }\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            <button mat-icon-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\">\r\n                <i [class]=\"_icon()\"></i>\r\n            </button>\r\n        }\r\n    </a>\r\n</div>", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerButton, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n    <a [id]=\"_id + '-container'\"\r\n        [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation(), 'invisible': isInvisible() || isReadonly() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\r\n        \r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"_Click()\"\r\n                [ngClass]=\"{\r\n                    'primary-filled'     : (color() == 'primary'     && type() =='filled'),\r\n                    'secondary-filled'   : (color() == 'secondary'   && type() =='filled'),\r\n                    'success-filled'     : (color() == 'success'     && type() =='filled'),\r\n                    'warning-filled'     : (color() == 'warning'     && type() =='filled'),\r\n                    'danger-filled'      : (color() == 'danger'      && type() =='filled'),\r\n                    'navigation-filled'  : (color() == 'navigation'  && type() =='filled'),\r\n                    'information-filled' : (color() == 'information' && type() =='filled'),\r\n                    'dark-filled'        : (color() == 'dark'        && type() =='filled'),\r\n                    'light-filled'       : (color() == 'light'       && type() =='filled'),\r\n                    'primary-outline'    : (color() == 'primary'     && type() =='outline'),\r\n                    'secondary-outline'  : (color() == 'secondary'   && type() =='outline'),\r\n                    'success-outline'    : (color() == 'success'     && type() =='outline'),\r\n                    'warning-outline'    : (color() == 'warning'     && type() =='outline'),\r\n                    'danger-outline'     : (color() == 'danger'      && type() =='outline'),\r\n                    'navigation-outline' : (color() == 'navigation'  && type() =='outline'),\r\n                    'information-outline': (color() == 'information' && type() =='outline'),\r\n                    'dark-outline'       : (color() == 'dark'        && type() =='outline'),\r\n                    'light-outline'      : (color() == 'light'       && type() =='outline'),\r\n                    'readonly': isDisabled(),\r\n                    'cursor-wait': isLoading()\r\n                }\"\r\n                [ngStyle]=\"{\r\n                    'width'     : width(),\r\n                    'min-width' : minWidth(),\r\n                    'max-width' : maxWidth(),\r\n                    'height'    : height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    @if(iconPosition() == 'left') {\r\n                        <span>\r\n                            <i [class]=\"_icon()\"></i>\r\n                        </span>\r\n                    }\r\n\r\n                    <span [ngClass]=\"{ \r\n                        'ms-2': (iconPosition() == 'left'  && icon().length > 0), \r\n                        'me-2': (iconPosition() == 'right' && icon().length > 0) \r\n                        }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    @if(iconPosition() == 'right') {\r\n                        <span>\r\n                            <i [class]=\"_icon()\"></i>\r\n                        </span> \r\n                    }\r\n                </span>\r\n\r\n                <ng-template #loading>\r\n                    <span class=\"slot fa-fade\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"spinner-border\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            @if (type() == 'icon') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-filled'    : (color() == 'primary'),\r\n                        'secondary-filled'  : (color() == 'secondary'),\r\n                        'success-filled'    : (color() == 'success'),\r\n                        'warning-filled'    : (color() == 'warning'),\r\n                        'danger-filled'     : (color() == 'danger'),\r\n                        'navigation-filled' : (color() == 'navigation'),\r\n                        'information-filled': (color() == 'information'),\r\n                        'dark-filled'       : (color() == 'dark'),\r\n                        'light-filled'      : (color() == 'light'),\r\n                        'readonly'          : (isDisabled() || isLoading()),\r\n                        'cursor-wait'       : isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-outline') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline'    : (color() == 'primary'),\r\n                        'secondary-outline'  : (color() == 'secondary'),\r\n                        'success-outline'    : (color() == 'success'),\r\n                        'warning-outline'    : (color() == 'warning'),\r\n                        'danger-outline'     : (color() == 'danger'),\r\n                        'navigation-outline' : (color() == 'navigation'),\r\n                        'information-outline': (color() == 'information'),\r\n                        'dark-outline'       : (color() == 'dark'),\r\n                        'light-outline'      : (color() == 'light'),\r\n                        'readonly'           : (isDisabled() || isLoading()),\r\n                        'cursor-wait'        : isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-no-border') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    type=\"button\"\r\n                    (click)=\"_Click()\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline'    : (color() == 'primary'),\r\n                        'secondary-outline'  : (color() == 'secondary'),\r\n                        'success-outline'    : (color() == 'success'),\r\n                        'warning-outline'    : (color() == 'warning'),\r\n                        'danger-outline'     : (color() == 'danger'),\r\n                        'navigation-outline' : (color() == 'navigation'),\r\n                        'information-outline': (color() == 'information'),\r\n                        'dark-outline'       : (color() == 'dark'),\r\n                        'light-outline'      : (color() == 'light'),\r\n                        'readonly'           : (isDisabled() || isLoading()),\r\n                        'icon-no-border'     : true\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n        }\r\n    </a>\r\n</div>", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.primary-filled{background-color:var(--primary-inner)!important;color:var(--white)!important}div.coer-button button.primary-outline{background-color:var(--white)!important;color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{background-color:var(--secondary-inner)!important;color:var(--white)!important}div.coer-button button.secondary-outline{background-color:var(--white)!important;color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{background-color:var(--success-inner)!important;color:var(--white)!important}div.coer-button button.success-outline{background-color:var(--white)!important;color:var(--success-inner)!important;border:1px solid var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{background-color:var(--warning-inner)!important;color:var(--black)!important}div.coer-button button.warning-outline{background-color:var(--white)!important;color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{background-color:var(--danger-inner)!important;color:var(--white)!important}div.coer-button button.danger-outline{background-color:var(--white)!important;color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{background-color:var(--navigation-inner)!important;color:var(--white)!important}div.coer-button button.navigation-outline{background-color:var(--white)!important;color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{background-color:var(--information-inner)!important;color:var(--white)!important}div.coer-button button.information-outline{background-color:var(--white)!important;color:var(--information-inner)!important;border:1px solid var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{background-color:var(--black)!important;color:var(--white)!important}div.coer-button button.dark-outline{background-color:var(--white)!important;color:var(--black)!important;border:1px solid var(--black)!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{background-color:var(--white)!important;color:var(--black)!important}div.coer-button button.light-outline{background-color:transparent!important;color:var(--white)!important;border:1px solid var(--white)!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"] }]
-        }], propDecorators: { tooltip: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'coer-button', standalone: false, template: "<div [ngClass]=\"{ 'coer-button': true }\">\r\n    <a  [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'loading': isLoading() }\"\r\n        [ngStyle]=\"{ \r\n            'visibility'   : (isInvisible() || isReadonly() ? 'hidden' : 'visible'),\r\n            'margin-top'   : marginTop(), \r\n            'margin-right' : marginRight(), \r\n            'margin-bottom': marginBottom(), \r\n            'margin-left'  : marginLeft()  \r\n        }\">\r\n        \r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button type=\"button\" \r\n                [id]=\"_id + '-inner-button'\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\"\r\n                [ngStyle]=\"{\r\n                    'width'     : width(),\r\n                    'min-width' : minWidth(),\r\n                    'max-width' : maxWidth(),\r\n                    'height'    : height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n\r\n                @if(!isLoading()) {\r\n                    <span class=\"slot\">\r\n                        @if(iconPosition() == 'left') {                         \r\n                            <i [class]=\"_icon()\"></i>                         \r\n                        }\r\n    \r\n                        <span [ngClass]=\"{ \r\n                            'ms-2': (iconPosition() == 'left'  && _icon().length > 0), \r\n                            'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n                            }\">\r\n                            <ng-content>Click</ng-content>\r\n                        </span>\r\n    \r\n                        @if(iconPosition() == 'right') {\r\n                            <i [class]=\"_icon()\"></i>\r\n                        }\r\n                    </span>\r\n                }\r\n\r\n                @else {\r\n                    <span class=\"slot animation-appear\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"icon-circle-notch animation-spin\"></i>\r\n                    </span> \r\n                }\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            <button mat-icon-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\">\r\n                <i [class]=\"_icon()\"></i>\r\n            </button>\r\n        }\r\n    </a>\r\n</div>", styles: ["coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important;height:fit-content!important;text-decoration:none!important;color:var(--black)}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}div.coer-button button.default-filled{color:var(--black)!important;background-color:transparent!important}div.coer-button button.default-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):focus{box-shadow:0 0 20px transparent!important}div.coer-button button.default-filled:not(.readonly):hover,div.coer-button button.default-filled:not(.readonly):focus,div.coer-button button.default-outline:not(.readonly):hover,div.coer-button button.default-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled{color:var(--white)!important;background-color:var(--primary-inner)!important}div.coer-button button.primary-outline{color:var(--primary-inner)!important;border:1px solid var(--primary-inner)!important;background-color:transparent!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--primary-inner)!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.secondary-filled{color:var(--white)!important;background-color:var(--secondary-inner)!important}div.coer-button button.secondary-outline{color:var(--secondary-inner)!important;border:1px solid var(--secondary-inner)!important;background-color:transparent!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px var(--secondary-inner)!important}div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.success-filled{color:var(--white)!important;background-color:var(--success-inner)!important}div.coer-button button.success-outline{color:var(--success-inner)!important;border:1px solid var(--success-inner)!important;background-color:transparent!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px var(--success-inner)!important}div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.warning-filled{color:var(--black)!important;background-color:var(--warning-inner)!important}div.coer-button button.warning-outline{color:var(--warning-inner)!important;border:1px solid var(--warning-inner)!important;background-color:transparent!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px var(--warning-inner)!important}div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.danger-filled{color:var(--white)!important;background-color:var(--danger-inner)!important}div.coer-button button.danger-outline{color:var(--danger-inner)!important;border:1px solid var(--danger-inner)!important;background-color:transparent!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px var(--danger-inner)!important}div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.navigation-filled{color:var(--white)!important;background-color:var(--navigation-inner)!important}div.coer-button button.navigation-outline{color:var(--navigation-inner)!important;border:1px solid var(--navigation-inner)!important;background-color:transparent!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px var(--navigation-inner)!important}div.coer-button button.navigation-filled:not(.readonly):hover,div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):hover,div.coer-button button.navigation-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.information-filled{color:var(--white)!important;background-color:var(--information-inner)!important}div.coer-button button.information-outline{color:var(--information-inner)!important;border:1px solid var(--information-inner)!important;background-color:transparent!important}div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):focus{box-shadow:0 0 20px var(--information-inner)!important}div.coer-button button.information-filled:not(.readonly):hover,div.coer-button button.information-filled:not(.readonly):focus,div.coer-button button.information-outline:not(.readonly):hover,div.coer-button button.information-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.dark-filled{color:var(--white)!important;background-color:var(--black)!important}div.coer-button button.dark-outline{color:var(--black)!important;border:1px solid var(--black)!important;background-color:transparent!important}div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):focus{box-shadow:0 0 20px var(--black)!important}div.coer-button button.dark-filled:not(.readonly):hover,div.coer-button button.dark-filled:not(.readonly):focus,div.coer-button button.dark-outline:not(.readonly):hover,div.coer-button button.dark-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.light-filled{color:var(--black)!important;background-color:var(--white)!important}div.coer-button button.light-outline{color:var(--white)!important;border:1px solid var(--white)!important;background-color:transparent!important}div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):focus{box-shadow:0 0 20px var(--white)!important}div.coer-button button.light-filled:not(.readonly):hover,div.coer-button button.light-filled:not(.readonly):focus,div.coer-button button.light-outline:not(.readonly):hover,div.coer-button button.light-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:var(--white)!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border.readonly{color:#dfdede!important}div.coer-button a.loading{cursor:wait!important}div.coer-button i{display:flex!important;align-items:center!important;justify-content:center!important}div.coer-button span{font-weight:700!important}div.coer-button .mat-mdc-button-touch-target{width:0px!important;height:0px!important}\n"] }]
+        }] });
 
 class CoerCard {
     constructor() {
@@ -268,20 +257,22 @@ 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    <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 xs-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    <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 xs-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 {
+    //Constructor
     constructor() {
-        super(...arguments);
+        super();
         //Variables
         this._value = false;
         this._id = Tools.GetGuid('coer-checkbox');
         this._isLoading = true;
+        //Inputs
         this.id = input('');
         this.label = input('');
         this.labelPosition = input('after');
@@ -290,26 +281,25 @@ class CoerCheckbox extends ControlValue {
         this.isReadonly = input(false);
         this.isInvisible = input(false);
         this.ignoreDataBinding = input(false);
+        this.value = input(false);
         //Outputs
         this.onChange = output();
         //computed
         this._isEnable = computed(() => {
             return !this.isLoading() && !this.isDisabled() && !this.isInvisible() && !this.isReadonly();
         });
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
+        });
     }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = false;
-        this.SetValue(value);
-    }
-    //getter
-    get value() {
-        return this._value;
-    }
+    //AfterViewInit
     ngAfterViewInit() {
         Tools.Sleep().then(_ => this._isLoading = false);
     }
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
+    }
     //ControlValueAccessor
     SetValue(value) {
         if (Tools.IsNotNull(value)) {
@@ -343,29 +333,27 @@ class CoerCheckbox extends ControlValue {
             this.SetValue(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        > {{ label() }} </mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:0!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target{top:8px!important;width:39px!important;height:30px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input{display:none!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{top:-7px!important;left:-6px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{transform:translateY(-1px)!important;position:static!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field label.mdc-label{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerCheckbox, isStandalone: false, selector: "coer-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreDataBinding: { classPropertyName: "ignoreDataBinding", publicName: "ignoreDataBinding", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerCheckbox)], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        > {{ label() }} </mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:0!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target{top:8px!important;width:39px!important;height:30px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input{display:none!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{top:-7px!important;left:-6px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{transform:translateY(-1px)!important;position:static!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field label.mdc-label{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], standalone: false, template: "<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        > {{ label() }} </mat-checkbox>\r\n    </div>\r\n</div>", styles: ["div.coer-checkbox{display:inline-flex!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:10px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--smoke)!important;border-radius:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{width:30px!important;height:30px!important;top:5px!important;left:5px!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-ripple.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator *{display:none!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label{padding-top:3px!important;padding-left:0!important}div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label::selection{background-color:transparent!important}div.coer-checkbox mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{background-color:var(--primary-inner)!important;border-color:var(--primary-inner)!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox{padding:0!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mat-mdc-checkbox-touch-target{top:8px!important;width:39px!important;height:30px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox input{display:none!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__ripple{top:-7px!important;left:-6px!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field div.mdc-checkbox div.mdc-checkbox__background{transform:translateY(-1px)!important;position:static!important}coer-grid table tbody tr td.check-box mat-checkbox div.mdc-form-field.mat-internal-form-field label.mdc-label,coer-grid table tbody tr td.check-box mat-checkbox.mat-mdc-checkbox-checked div.mdc-form-field.mat-internal-form-field label.mdc-label{display:none!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerDateBox extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
-        //Component Value
-        this._value = null;
-        this.matFormField = viewChild.required('matFormField');
-        this.coerTextBox = viewChild.required('coerTextBox');
+        super();
         //Variables
+        this._value = null;
         this._id = Tools.GetGuid('coer-datebox');
         this._datepicker = viewChild('datepicker');
         this._isLoadingEvent = signal(false);
         this._isOpen = false;
+        //Inputs
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.placeholder = input('');
         this.textPosition = input('left');
@@ -399,21 +387,42 @@ class CoerDateBox extends ControlValue {
         this._isEnable = computed(() => {
             return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
         });
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+        });
     }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = null;
-        this.SetValue(value);
-    }
-    ngOnInit() {
-        this._SetEvents();
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(() => {
+            //input
+            this._input = document.getElementById(this._id);
+            if (this._input) {
+                this._input.addEventListener('focus', () => this._Blur());
+                this._input.addEventListener('blur', () => this._Blur());
+            }
+            //container
+            this._container = document.getElementById(`${this._id}-container`);
+            if (this._container) {
+                this._container.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.Open();
+                });
+            }
+            //pickerButton
+            this._pickerButton = document.querySelector(`#${this._id}-container .mat-mdc-form-field-icon-suffix button`);
+            if (this._pickerButton) {
+                this._pickerButton.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.Open();
+                });
+            }
+        });
     }
-    //getter
-    get value() {
-        return Tools.IsNotOnlyWhiteSpace(this._value)
-            ? Dates.GetFormatDB(this._value)
-            : null;
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
     }
     //getter
     get isOpen() {
@@ -452,55 +461,27 @@ class CoerDateBox extends ControlValue {
         }
     }
     /** */
-    _SetEvents() {
-        Tools.Sleep().then(() => {
-            //input
-            this._input = document.getElementById(this._id);
-            if (this._input) {
-                this._input.addEventListener('focus', () => this._Blur());
-                this._input.addEventListener('blur', () => this._Blur());
-            }
-            //container
-            this._container = document.getElementById(`${this._id}-container`);
-            if (this._container) {
-                this._container.addEventListener('click', (event) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    this.Open();
-                });
-            }
-            //pickerButton
-            this._pickerButton = document.querySelector(`#${this._id}-container .mat-mdc-form-field-icon-suffix button`);
-            if (this._pickerButton) {
-                this._pickerButton.addEventListener('click', (event) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    this.Open();
-                });
-            }
-        });
-    }
-    /** */
-    async _Blur() {
+    _Blur() {
         if (this._isLoadingEvent())
             return;
         else
             this._isLoadingEvent.set(true);
         this._isOpen = false;
-        await Tools.Sleep();
-        if (this._input) {
-            this._input.blur();
-            Tools.Sleep().then(() => {
-                const element = document.querySelector(`#${this._id}-container .mdc-line-ripple--active`);
-                if (element)
-                    element.classList.remove('mdc-line-ripple--active');
-            });
-        }
-        this._isLoadingEvent.set(false);
+        Tools.Sleep().then(_ => {
+            if (this._input) {
+                this._input.blur();
+                Tools.Sleep().then(_ => {
+                    const element = document.querySelector(`#${this._id}-container .mdc-line-ripple--active`);
+                    if (element)
+                        element.classList.remove('mdc-line-ripple--active');
+                });
+            }
+            this._isLoadingEvent.set(false);
+        });
     }
     /** */
     Open() {
-        if (this._isEnable() && !this._isOpen) {
+        if (this._isEnable() && this.isClose) {
             this._datepicker()?.open();
             this._isOpen = true;
             this.onOpen.emit();
@@ -520,29 +501,27 @@ class CoerDateBox extends ControlValue {
     Unselect() {
         this.SetValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue" }, providers: [
             provideNativeDateAdapter(),
             CONTROL_VALUE(CoerDateBox),
-        ], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }, { propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-date-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            '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\r\n        <mat-label> {{ label() }} </mat-label>\r\n        \r\n        <input #coerTextBox matInput \r\n            [id]=\"_id\"\r\n            [placeholder]=\"placeholder()\"\r\n            [matDatepicker]=\"datepicker\" \r\n            [disabled]=\"!_isEnable()\"\r\n            [readonly]=\"true\"\r\n            [value]=\"_value\"\r\n            (dateChange)=\"SetValue(coerTextBox.value)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : 'pointer',\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n        \r\n        <mat-datepicker #datepicker (closed)=\"Close()\"/>\r\n\r\n        @if(!isLoading()) { \r\n            <mat-datepicker-toggle \r\n                matSuffix\r\n                [for]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\">\r\n                <mat-icon matDatepickerToggleIcon>\r\n                    <i class=\"fa-solid fa-calendar-days\"></i>\r\n                </mat-icon>\r\n            </mat-datepicker-toggle>\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        @if(isInvalid() || isValid()) {\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        }\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</div> ", styles: ["div.coer-date-box{display:flex;align-items:center}div.coer-date-box mat-form-field{position:relative!important}div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-date-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-date-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-date-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-date-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-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-date-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-date-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-date-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-date-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-date-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;cursor:wait!important}div.coer-date-box mat-form-field .placeholder,div.coer-date-box mat-form-field .placeholder *,div.coer-date-box mat-form-field .placeholder-glow,div.coer-date-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-date-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-date-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}div.coer-date-box .mat-datepicker-toggle-active *{color:var(--primary-inner)!important}coer-grid table tbody tr td.coer-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox 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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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"] }] }); }
+        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-date-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            '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\r\n        <mat-label> {{ label() }} </mat-label>\r\n        \r\n        <input #coerTextBox matInput \r\n            [id]=\"_id\"\r\n            [placeholder]=\"placeholder()\"\r\n            [matDatepicker]=\"datepicker\" \r\n            [disabled]=\"!_isEnable()\"\r\n            [readonly]=\"true\"\r\n            [value]=\"_value\"\r\n            (dateChange)=\"SetValue(coerTextBox.value)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'pointer',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition()\r\n            }\">\r\n        \r\n        <mat-datepicker #datepicker (closed)=\"Close()\"/>\r\n\r\n        @if(!isLoading()) { \r\n            <mat-datepicker-toggle \r\n                matSuffix\r\n                [for]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\">\r\n                <mat-icon matDatepickerToggleIcon>\r\n                    <i class=\"fa-solid fa-calendar-days\"></i>\r\n                </mat-icon>\r\n            </mat-datepicker-toggle>\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        @if(isInvalid() || isValid()) {\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        }\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</div> ", styles: ["div.coer-date-box{display:flex;align-items:center}div.coer-date-box mat-form-field{position:relative!important}div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-date-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-date-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-date-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-date-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-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-date-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-date-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-date-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-date-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-date-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;cursor:wait!important}div.coer-date-box mat-form-field .placeholder,div.coer-date-box mat-form-field .placeholder *,div.coer-date-box mat-form-field .placeholder-glow,div.coer-date-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-date-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-date-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}div.coer-date-box .mat-datepicker-toggle-active *{color:var(--primary-inner)!important}coer-grid table tbody tr td.coer-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox 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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-datebox', providers: [
                         provideNativeDateAdapter(),
                         CONTROL_VALUE(CoerDateBox),
-                    ], standalone: false, template: "<div class=\"coer-date-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            '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\r\n        <mat-label> {{ label() }} </mat-label>\r\n        \r\n        <input #coerTextBox matInput \r\n            [id]=\"_id\"\r\n            [placeholder]=\"placeholder()\"\r\n            [matDatepicker]=\"datepicker\" \r\n            [disabled]=\"!_isEnable()\"\r\n            [readonly]=\"true\"\r\n            [value]=\"_value\"\r\n            (dateChange)=\"SetValue(coerTextBox.value)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : 'pointer',\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n        \r\n        <mat-datepicker #datepicker (closed)=\"Close()\"/>\r\n\r\n        @if(!isLoading()) { \r\n            <mat-datepicker-toggle \r\n                matSuffix\r\n                [for]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\">\r\n                <mat-icon matDatepickerToggleIcon>\r\n                    <i class=\"fa-solid fa-calendar-days\"></i>\r\n                </mat-icon>\r\n            </mat-datepicker-toggle>\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        @if(isInvalid() || isValid()) {\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        }\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</div> ", styles: ["div.coer-date-box{display:flex;align-items:center}div.coer-date-box mat-form-field{position:relative!important}div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-date-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-date-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-date-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-date-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-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-date-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-date-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-date-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-date-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-date-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;cursor:wait!important}div.coer-date-box mat-form-field .placeholder,div.coer-date-box mat-form-field .placeholder *,div.coer-date-box mat-form-field .placeholder-glow,div.coer-date-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-date-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-date-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}div.coer-date-box .mat-datepicker-toggle-active *{color:var(--primary-inner)!important}coer-grid table tbody tr td.coer-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+                    ], standalone: false, template: "<div class=\"coer-date-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            '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\r\n        <mat-label> {{ label() }} </mat-label>\r\n        \r\n        <input #coerTextBox matInput \r\n            [id]=\"_id\"\r\n            [placeholder]=\"placeholder()\"\r\n            [matDatepicker]=\"datepicker\" \r\n            [disabled]=\"!_isEnable()\"\r\n            [readonly]=\"true\"\r\n            [value]=\"_value\"\r\n            (dateChange)=\"SetValue(coerTextBox.value)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'pointer',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition()\r\n            }\">\r\n        \r\n        <mat-datepicker #datepicker (closed)=\"Close()\"/>\r\n\r\n        @if(!isLoading()) { \r\n            <mat-datepicker-toggle \r\n                matSuffix\r\n                [for]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\">\r\n                <mat-icon matDatepickerToggleIcon>\r\n                    <i class=\"fa-solid fa-calendar-days\"></i>\r\n                </mat-icon>\r\n            </mat-datepicker-toggle>\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        @if(isInvalid() || isValid()) {\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        }\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</div> ", styles: ["div.coer-date-box{display:flex;align-items:center}div.coer-date-box mat-form-field{position:relative!important}div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-date-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-date-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-date-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-date-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-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-date-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-date-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-date-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-date-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-date-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-date-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-date-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;cursor:wait!important}div.coer-date-box mat-form-field .placeholder,div.coer-date-box mat-form-field .placeholder *,div.coer-date-box mat-form-field .placeholder-glow,div.coer-date-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-date-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-date-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}div.coer-date-box .mat-datepicker-toggle-active *{color:var(--primary-inner)!important}coer-grid table tbody tr td.coer-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CoerModal {
     constructor() {
         //Variables
         this._id = Tools.GetGuid('coer-modal');
-        this._isOpen = false;
         this._isModalOpen = isModalOpenSIGNAL;
         this._windowWidth = Screen.WINDOW_WIDTH;
+        this._isOpen = false;
         //Inputs 
         this.id = input('');
         this.title = input('');
@@ -551,6 +530,12 @@ class CoerModal {
         this.width = input('small');
         this.height = input('auto');
         this.maxHeight = input('');
+        //Outputs
+        this.onOpen = output();
+        this.onClose = output();
+        //Generic Tools
+        this.IsNull = Tools.IsNull;
+        this.IsNotNull = Tools.IsNotNull;
         //Computed
         this._contentList = computed(() => Array.from(this.contentRef._results));
         //Computed
@@ -578,12 +563,15 @@ class CoerModal {
             return Tools.IsNotNull(this._header()) && this._header().icon().length > 0
                 ? this._header().icon() : this.icon();
         });
-        //Outputs
-        this.onOpen = output();
-        this.onClose = output();
-        //Generic Tools
-        this.IsNull = Tools.IsNull;
-        this.IsNotNull = Tools.IsNotNull;
+    }
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(() => {
+            this._modal = new Modal(document.getElementById(this._id));
+            Screen.Resize.subscribe((response) => {
+                this._windowWidth = response.width;
+            });
+        });
     }
     //getter
     get isOpen() {
@@ -602,13 +590,6 @@ class CoerModal {
             default: return this.width();
         }
     }
-    async ngAfterViewInit() {
-        await Tools.Sleep();
-        this._modal = new Modal(document.getElementById(this._id));
-        Screen.Resize.subscribe((response) => {
-            this._windowWidth = response.width;
-        });
-    }
     /** */
     Open() {
         this._modal.show();
@@ -639,22 +620,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                 args: [CoerRefDirective]
             }] } });
 
-class CoerFilebox {
+class CoerFileboxImage {
+    //Constructor
     constructor() {
         //Injections
         this.alert = inject(CoerAlert);
+        //Generic Tools
         this.IsNull = Tools.IsNull;
         this.IsNotNull = Tools.IsNotNull;
+        this.IsOnlyWhiteSpace = Tools.IsOnlyWhiteSpace;
         this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
         //Elements
-        this._inputFileImage = viewChild.required('inputFileImage');
+        this._input = viewChild.required('input');
         this._modal = viewChild.required('modal');
-        //Variables
-        this._base64 = '';
-        this._image = null;
-        this._imageExtensions = ['png', 'jpeg', 'jpg', 'gif', 'svg'];
+        this._accept = ['image/png', 'image/jpeg', 'image/gif', 'image/svg+xml'];
+        this._Extensions = ['png', 'jpeg', 'jpg', 'gif', 'svg'];
+        this._isLoadingInner = signal(false);
+        this._base64 = signal('');
+        this._image = signal(null);
         //Inputs
-        this.type = input('image');
+        this.image = input(null);
         this.multiple = input(false);
         this.isLoading = input(false);
         this.isDisabled = input(false);
@@ -664,65 +649,101 @@ class CoerFilebox {
         this.onSelected = output();
         this.onDeleteImage = output();
         //computed
+        this._isLoading = computed(() => {
+            return this.isLoading()
+                || this._isLoadingInner();
+        });
+        //computed
         this._isEnable = computed(() => {
-            return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
+            return !this._isLoading()
+                && !this.isDisabled()
+                && !this.isInvisible();
         });
-        /** */
-        this._GetExtensionFile = (fileName) => {
-            if (fileName.includes('.')) {
-                let worlds = fileName.split('.');
-                if (worlds.length > 0) {
-                    let extension = worlds.pop();
-                    extension = extension.trim();
-                    extension = extension.toLowerCase();
-                    if (extension.length > 0)
-                        return extension;
+        //computed
+        this._showTrashButton = computed(() => {
+            return !this.isReadonly()
+                && this._isEnable()
+                && this.IsNotNull(this._image())
+                && this.IsNotNull(this._image().value)
+                && this.IsNotOnlyWhiteSpace(this._base64())
+                && (this.IsNull(this._image().allowDelete) || this._image().allowDelete);
+        });
+        //computed
+        this._showExpandButton = computed(() => {
+            return !this.isReadonly()
+                && this._isEnable()
+                && this.IsNotNull(this._image())
+                && this.IsNotNull(this._image().value)
+                && this.IsNotOnlyWhiteSpace(this._base64())
+                && (this.IsNull(this._image().allowExpand) || this._image().allowExpand);
+        });
+        //computed
+        this._figureWidth = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this._image()?.value)
+                && !this._isLoading()
+                ? 'fit-content' : '210px';
+        });
+        //computed
+        this._figureDashed = computed(() => {
+            return !this.isReadonly()
+                && !this.isDisabled()
+                && this.IsOnlyWhiteSpace(this._image()?.value);
+        });
+        this._effect = effect(() => {
+            if (Tools.IsNotNull(this.image())) {
+                this._image.set(Tools.IsNotNull(this.image()) ? this.image() : null);
+                if (Tools.IsNotNull(this.image())) {
+                    if (this.image()?.value?.name) {
+                        Files.ConvertToBase64(this.image()?.value).then(base64 => {
+                            return this._base64.set(base64);
+                        });
+                    }
+                    else
+                        this._base64.set(this.image()?.value);
                 }
             }
-            this.alert.Warning('The file extension could not be recognized', 'Files');
-            return null;
-        };
+        });
     }
-    set image(value) {
-        if (this.type() === 'image') {
-            this._image = Tools.IsNotNull(value) ? value : null;
-            if (Tools.IsNotNull(value)) {
-                if (value?.value?.name) {
-                    Files.ConvertToBase64(value?.value).then(base64 => {
-                        return this._base64 = base64;
-                    });
-                }
-                else
-                    this._base64 = value?.value;
-            }
-        }
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
     }
     /** */
-    async _UploadImages(event) {
+    async _SelectImages(event) {
         const selectedFiles = Array.from(event.target.files);
         const files = [];
         let extension = null;
         for (const file of selectedFiles) {
-            extension = this._GetExtensionFile(file.name) || '';
-            if (this._imageExtensions.includes(extension)) {
+            extension = Files.GetExtension(file) || '';
+            if (this._Extensions.includes(extension)) {
                 files.push({
                     file: file,
                     extension: extension,
                     base64: await Files.ConvertToBase64(file)
                 });
             }
-            else
+            else {
                 this.alert.Warning(`<b>.${extension}</b> extension not allowed`, 'Files');
+                this._input().nativeElement.value = null;
+                this._isLoadingInner.set(false);
+                return;
+            }
         }
         //Response
-        this._inputFileImage().nativeElement.value = null;
+        this._input().nativeElement.value = null;
+        this._isLoadingInner.set(false);
         this.onSelected.emit([...files]);
     }
     /** */
+    _ClickImage(reference) {
+        this._isLoadingInner.set(true);
+        reference.click();
+    }
+    /** */
     _DeleteImage(event) {
         event.stopPropagation();
         if (this._isEnable()) {
-            this.onDeleteImage.emit();
+            this.onDeleteImage.emit(this._image());
         }
     }
     /** */
@@ -730,20 +751,40 @@ class CoerFilebox {
         event.stopPropagation();
         this._modal().Open();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFileboxImage, isStandalone: false, selector: "coer-filebox-image", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox-image\">\r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'dashed': _figureDashed(),\r\n            'cursor-pointer': true \r\n        }\"\r\n        [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'display'      : isInvisible() ? 'none' : '',\r\n            'width'        : _figureWidth()\r\n        }\">\r\n    \r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <i class=\"spinner-border\"></i>\r\n            </div>\r\n    \r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n    \r\n        <img [src]=\"_base64() | noImage\"\r\n            [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px'\r\n            }\">\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        }\r\n    </figure>\r\n    \r\n    @if(isInvisible()) {\r\n        <figure [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'width'        : _figureWidth()\r\n            }\">  \r\n            \r\n            <img [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px',\r\n                'display'   : 'none'\r\n            }\">\r\n        </figure>\r\n    }\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFileboxImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-filebox-image', standalone: false, template: "<div class=\"coer-filebox-image\">\r\n    <figure (click)=\"(_isEnable() && !isReadonly()) ? _ClickImage(input) : null\" \r\n        [ngClass]=\"{ \r\n            'dashed': _figureDashed(),\r\n            'cursor-pointer': true \r\n        }\"\r\n        [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'display'      : isInvisible() ? 'none' : '',\r\n            'width'        : _figureWidth()\r\n        }\">\r\n    \r\n        @if(_isLoading()) {\r\n            <div class=\"loading\">\r\n                <i class=\"spinner-border\"></i>\r\n            </div>\r\n    \r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n    \r\n        <img [src]=\"_base64() | noImage\"\r\n            [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px'\r\n            }\">\r\n    \r\n        <input #input\r\n            type=\"file\"\r\n            [accept]=\"_accept\"\r\n            (change)=\"_SelectImages($event)\"\r\n            (cancel)=\"_isLoadingInner.set(false)\"\r\n            [multiple]=\"multiple()\">\r\n    \r\n        @if(_showTrashButton() || _showExpandButton()) {\r\n            <div class=\"icon-container\">\r\n                @if(_showTrashButton()) {\r\n                    <i class=\"icon-trash-can icon-fill\" (click)=\"_DeleteImage($event)\"></i>\r\n                }\r\n    \r\n                @if(_showExpandButton()) {\r\n                    <i class=\"icon-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                }\r\n            </div>\r\n        }\r\n    </figure>\r\n    \r\n    @if(isInvisible()) {\r\n        <figure [ngStyle]=\"{\r\n            'margin-top'   : _image()?.marginTop    || '',\r\n            'margin-right' : _image()?.marginRight  || '',\r\n            'margin-bottom': _image()?.marginBottom || '',\r\n            'margin-left'  : _image()?.marginLeft   || '',\r\n            'width'        : _figureWidth()\r\n            }\">  \r\n            \r\n            <img [ngStyle]=\"{\r\n                'width'     : _image()?.width     || '',\r\n                'max-width' : _image()?.maxWidth  || '',\r\n                'height'    : _image()?.height    || '',\r\n                'max-height': _image()?.maxHeight || '210px',\r\n                'display'   : 'none'\r\n            }\">\r\n        </figure>\r\n    }\r\n    \r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image()?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64() + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox-image figure{position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;min-height:210px;z-index:1}div.coer-filebox-image figure div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox-image figure div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox-image figure span.placeholder-glow span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox-image figure img{min-width:100px!important;min-height:100px!important}div.coer-filebox-image figure div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox-image figure div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox-image figure div.icon-container i:hover{zoom:1.1}div.coer-filebox-image .dashed{border:1px dashed var(--gray)!important;background-color:transparent!important}div.coer-filebox-image div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CoerFilebox {
+    constructor() {
+        //Inputs
+        this.type = input('image');
+        this.image = input();
+        this.multiple = input(false);
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        this.isReadonly = input(false);
+        this.isInvisible = input(false);
+        //Outputs
+        this.onSelected = output();
+        this.onDeleteImage = output();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, viewQueries: [{ propertyName: "_inputFileImage", first: true, predicate: ["inputFileImage"], descendants: true, isSignal: true }, { propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-filebox\">\r\n    @if(type() == 'image') {\r\n        <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n            [ngClass]=\"{ \r\n                'dashed': IsNull(_image?.value), \r\n                'd-none': isInvisible()    \r\n            }\"\r\n            [ngStyle]=\"{\r\n                'margin-top': _image?.marginTop || '',\r\n                'margin-right': _image?.marginRight || '',\r\n                'margin-bottom': _image?.marginBottom || '',\r\n                'margin-left': _image?.marginLeft || ''\r\n            }\">\r\n\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <i class=\"spinner-border\"></i>\r\n                </div>\r\n\r\n                <div class=\"placeholder-glow\">\r\n                    <span class=\"placeholder\"></span>\r\n                </div>\r\n            }\r\n\r\n            <img [src]=\"_base64 | noImage\"\r\n                [ngStyle]=\"{\r\n                    'width': _image?.width || '',\r\n                    'max-width': _image?.maxWidth || '',\r\n                    'height': _image?.height || '',\r\n                    'max-height': _image?.maxHeight || '210px'\r\n                }\">\r\n\r\n            <input #inputFileImage\r\n                type=\"file\"\r\n                accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n                (change)=\"_UploadImages($event)\"\r\n                [multiple]=\"multiple()\">\r\n\r\n            @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n                <div class=\"icon-container\">\r\n                    @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n                        <i class=\"fa-solid fa-trash-can\" (click)=\"_DeleteImage($event)\"></i>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n                        <i class=\"fa-solid fa-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                    }\r\n                </div>\r\n            }\r\n        </figure>\r\n\r\n        @if(isInvisible()) {\r\n            <figure [ngStyle]=\"{\r\n                'margin-top': _image?.marginTop || '',\r\n                'margin-right': _image?.marginRight || '',\r\n                'margin-bottom': _image?.marginBottom || '',\r\n                'margin-left': _image?.marginLeft || ''\r\n                }\"> \r\n\r\n                <img [ngStyle]=\"{\r\n                    'width': _image?.width || '',\r\n                    'max-width': _image?.maxWidth || '',\r\n                    'height': _image?.height || '',\r\n                    'max-height': _image?.maxHeight || '210px'\r\n                }\">\r\n            </figure>\r\n        }\r\n    }\r\n\r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64 + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "pipe", type: i9.NoImagePipe, name: "noImage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerFilebox, isStandalone: false, selector: "coer-filebox", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onDeleteImage: "onDeleteImage" }, ngImport: i0, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: CoerFileboxImage, selector: "coer-filebox-image", inputs: ["image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerFilebox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n    @if(type() == 'image') {\r\n        <figure (click)=\"(_isEnable() && !isReadonly()) ? inputFileImage.click() : null\"\r\n            [ngClass]=\"{ \r\n                'dashed': IsNull(_image?.value), \r\n                'd-none': isInvisible()    \r\n            }\"\r\n            [ngStyle]=\"{\r\n                'margin-top': _image?.marginTop || '',\r\n                'margin-right': _image?.marginRight || '',\r\n                'margin-bottom': _image?.marginBottom || '',\r\n                'margin-left': _image?.marginLeft || ''\r\n            }\">\r\n\r\n            @if(isLoading()) {\r\n                <div class=\"loading\">\r\n                    <i class=\"spinner-border\"></i>\r\n                </div>\r\n\r\n                <div class=\"placeholder-glow\">\r\n                    <span class=\"placeholder\"></span>\r\n                </div>\r\n            }\r\n\r\n            <img [src]=\"_base64 | noImage\"\r\n                [ngStyle]=\"{\r\n                    'width': _image?.width || '',\r\n                    'max-width': _image?.maxWidth || '',\r\n                    'height': _image?.height || '',\r\n                    'max-height': _image?.maxHeight || '210px'\r\n                }\">\r\n\r\n            <input #inputFileImage\r\n                type=\"file\"\r\n                accept=\"image/png, image/jpeg, image/gif, image/svg+xml\"\r\n                (change)=\"_UploadImages($event)\"\r\n                [multiple]=\"multiple()\">\r\n\r\n            @if(_isEnable() && IsNotNull(_image) && IsNotNull(_image!.value)) {\r\n                <div class=\"icon-container\">\r\n                    @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowDelete) || _image!.allowDelete) && !isReadonly()) {\r\n                        <i class=\"fa-solid fa-trash-can\" (click)=\"_DeleteImage($event)\"></i>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(_base64) && (IsNull(_image?.allowExpand) || _image!.allowExpand)) {\r\n                        <i class=\"fa-solid fa-expand\" (click)=\"_ExpandImage($event)\"></i>\r\n                    }\r\n                </div>\r\n            }\r\n        </figure>\r\n\r\n        @if(isInvisible()) {\r\n            <figure [ngStyle]=\"{\r\n                'margin-top': _image?.marginTop || '',\r\n                'margin-right': _image?.marginRight || '',\r\n                'margin-bottom': _image?.marginBottom || '',\r\n                'margin-left': _image?.marginLeft || ''\r\n                }\"> \r\n\r\n                <img [ngStyle]=\"{\r\n                    'width': _image?.width || '',\r\n                    'max-width': _image?.maxWidth || '',\r\n                    'height': _image?.height || '',\r\n                    'max-height': _image?.maxHeight || '210px'\r\n                }\">\r\n            </figure>\r\n        }\r\n    }\r\n\r\n    <!-- Modal -->\r\n    <coer-modal #modal [title]=\"_image?.name || ''\" height=\"90vh\" width=\"full\">\r\n        <div class=\"modal-image\" [ngStyle]=\"{ 'background-image': 'url(' + _base64 + ')' }\"></div>\r\n    </coer-modal>\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}div.coer-filebox figure{width:fit-content!important;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;cursor:pointer;min-height:210px;z-index:1}div.coer-filebox .dashed{border:1px dashed var(--gray);background-color:transparent}div.coer-filebox div.loading{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;cursor:default!important}div.coer-filebox div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-filebox div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-filebox span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-filebox div.icon-container{position:absolute;bottom:5px;right:5px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:7px}div.coer-filebox div.icon-container i{color:var(--gray);font-size:20px}div.coer-filebox div.icon-container i:hover{zoom:1.1}div.coer-filebox div.modal-image{width:100%;height:100%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-size:contain;background-repeat:no-repeat;background-position:center}\n"] }]
-        }], propDecorators: { image: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'coer-filebox', standalone: false, template: "<div class=\"coer-filebox\">\r\n    @if(type() === 'image') {\r\n        <coer-filebox-image\r\n            [image]=\"image()\"\r\n            [multiple]=\"multiple()\"\r\n            [isLoading]=\"isLoading()\"\r\n            [isDisabled]=\"isDisabled()\"\r\n            [isReadonly]=\"isReadonly()\"\r\n            [isInvisible]=\"isInvisible()\"\r\n            (onSelected)=\"onSelected.emit($event)\"\r\n            (onDeleteImage)=\"onDeleteImage.emit($event)\"\r\n        ></coer-filebox-image>\r\n    }\r\n</div>", styles: ["div.coer-filebox{display:flex;justify-content:center;align-items:center}\n"] }]
+        }] });
 
 class CoerForm {
     constructor() {
         //Injection
-        this.alert = inject(CoerAlert);
+        this._alert = inject(CoerAlert);
         //Inputs
         this.formGroup = input.required();
         this.isLoading = input(false);
@@ -770,7 +811,7 @@ class CoerForm {
             this.formGroup().get(formControlName).setValue(value);
         }
         else {
-            this.alert.Warning(`${formControlName} Control`, 'Not Found');
+            this._alert.Warning(`${formControlName} Control`, 'Not Found');
         }
     }
     /** */
@@ -803,7 +844,7 @@ class CoerForm {
     IsValid() {
         this.TouchForm();
         if (this.formGroup().invalid) {
-            this.alert.Warning('Please complete the required fields', 'Instructions', 'fa-solid fa-list-check');
+            this._alert.Warning('Please complete the required fields', 'Instructions', 'fa-solid fa-list-check');
             this.Focus();
         }
         return {
@@ -847,18 +888,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
         }] });
 
 class CoerNumberBox extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
+        super();
         //Injections
-        this.alert = inject(CoerAlert);
-        //Component Value
-        this._value = '';
+        this._alert = inject(CoerAlert);
+        //Elements
         this._coerNumberbox = viewChild.required('coerNumberbox');
         //Variables
+        this._value = '';
         this._id = Tools.GetGuid('coer-numberbox');
         this._isLoadingEvent = signal(false);
+        this._externalButton = signal({ show: false });
         this._hideCaret = false;
+        //Inputs
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.placeholder = input('');
         this.textPosition = input('right');
@@ -866,7 +911,7 @@ class CoerNumberBox extends ControlValue {
         this.max = input(2147483647);
         this.isInvalid = input(false);
         this.isValid = input(false);
-        this.externalButton = { show: false };
+        this.externalButton = input({ show: false });
         this.selectOnFocus = input(true);
         this.decimals = input(0);
         this.isLoading = input(false);
@@ -897,83 +942,86 @@ class CoerNumberBox extends ControlValue {
             return this.isInvalid() || this.isValid()
                 ? '18px' : '0px';
         });
+        this._effectValue = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : 0);
+        });
+        this._effectExternalButton = effect(() => {
+            this._externalButton.set(this.externalButton());
+        });
     }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = 0;
-        this.SetValue(value);
-    }
-    async ngAfterViewInit() {
-        await Tools.Sleep();
-        this._element = document.getElementById(this._id);
-        if (this._element) {
-            this._element.addEventListener('focus', () => {
-                if (!this._isEnable())
-                    this.Blur();
-                else if (this.selectOnFocus())
-                    this.Focus(true);
-            });
-            this._element.addEventListener('blur', () => this.Blur());
-            this._element.addEventListener('keyup', (event) => {
-                if (this._isEnable()) {
-                    const { key } = event;
-                    if (key === 'Enter') {
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(() => {
+            this._element = document.getElementById(this._id);
+            if (this._element) {
+                this._element.addEventListener('focus', () => {
+                    if (!this._isEnable())
+                        this.Blur();
+                    else if (this.selectOnFocus())
+                        this.Focus(true);
+                });
+                this._element.addEventListener('blur', () => this.Blur());
+                this._element.addEventListener('keyup', (event) => {
+                    if (this._isEnable()) {
+                        const { key } = event;
+                        if (key === 'Enter') {
+                            let value = this._coerNumberbox().nativeElement.value;
+                            value = this._OnlyNumbers(value);
+                            value = this._ValidateRangeValue(value);
+                            this.onKeyupEnter.emit(value);
+                            this.Blur();
+                        }
+                        if (key === 'ArrowUp') {
+                            this._hideCaret = true;
+                            this.SetValue(Number(this._value) + 1);
+                            Tools.Sleep(500, 'ArrowUp').then(() => this._hideCaret = false);
+                        }
+                        if (key === 'ArrowDown') {
+                            this._hideCaret = true;
+                            this.SetValue(Number(this._value) - 1);
+                            Tools.Sleep(500, 'ArrowDown').then(() => this._hideCaret = false);
+                        }
+                    }
+                });
+                this._element.addEventListener('input', () => {
+                    Tools.Sleep().then(() => {
                         let value = this._coerNumberbox().nativeElement.value;
                         value = this._OnlyNumbers(value);
                         value = this._ValidateRangeValue(value);
-                        this.onKeyupEnter.emit(value);
-                        this.Blur();
-                    }
-                    if (key === 'ArrowUp') {
-                        this._hideCaret = true;
-                        this.SetValue(Number(this._value) + 1);
-                        Tools.Sleep(500, 'ArrowUp').then(() => this._hideCaret = false);
-                    }
-                    if (key === 'ArrowDown') {
-                        this._hideCaret = true;
-                        this.SetValue(Number(this._value) - 1);
-                        Tools.Sleep(500, 'ArrowDown').then(() => this._hideCaret = false);
-                    }
-                }
-            });
-            this._element.addEventListener('input', () => {
-                Tools.Sleep().then(() => {
-                    let value = this._coerNumberbox().nativeElement.value;
-                    value = this._OnlyNumbers(value);
-                    value = this._ValidateRangeValue(value);
-                    if (this._isEnable())
-                        this.onInput.emit(value);
+                        if (this._isEnable())
+                            this.onInput.emit(value);
+                    });
                 });
-            });
-        }
+            }
+        });
     }
-    //getter
-    get value() {
-        return this._value;
+    //OnDestroy
+    ngOnDestroy() {
+        this._effectValue?.destroy();
+        this._effectExternalButton?.destroy();
     }
     //getter
     get _showButtonLeft() {
-        return this.externalButton.show
-            && Tools.IsNotNull(this.externalButton?.position)
-            && this.externalButton?.position === 'left'
+        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'))
+        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';
+        return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)
+            ? this._externalButton().icon : 'pointer';
     }
     //getter
     get _isDisabledExternalButton() {
-        return Tools.IsNotNull(this.externalButton?.isDisabled)
-            ? this.externalButton.isDisabled : false;
+        return Tools.IsNotNull(this._externalButton()?.isDisabled)
+            ? this._externalButton().isDisabled : false;
     }
     //ControlValueAccessor
     SetValue(value) {
@@ -1010,7 +1058,7 @@ class CoerNumberBox extends ControlValue {
                     return '-0.';
             }
             else if (Number(value) < this.min()) {
-                this.alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
+                this._alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
                 valueString = '0';
             }
         }
@@ -1053,11 +1101,11 @@ class CoerNumberBox extends ControlValue {
             return String(value);
         }
         if (Number(value) < this.min()) {
-            this.alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
+            this._alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
             value = this.min();
         }
         if (Number(value) > this.max()) {
-            this.alert.Warning(`Cannot exceed ${this.max()}`, 'Out of range', 'fa-solid fa-hashtag');
+            this._alert.Warning(`Cannot exceed ${this.max()}`, 'Out of range', 'fa-solid fa-hashtag');
             value = this.max();
         }
         if (this.decimals() <= 0) {
@@ -1100,26 +1148,23 @@ 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 }, 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-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", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
             type: Component,
             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
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerSelectbox extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
-        //Component Value
-        this._value = null;
+        super();
+        //Elements
+        this._coerTextBox = viewChild.required('coerTextBox');
         //Variables
+        this._value = null;
         this._scrollByRow = 40.8;
-        this._coerTextBox = viewChild.required('coerTextBox');
         this._id = Tools.GetGuid('coer-selectBox');
         this._index = signal(-1);
         this._search = signal('');
@@ -1128,7 +1173,9 @@ class CoerSelectbox extends ControlValue {
         this._isOverMenu = signal(false);
         this._isLoadingEvent = signal(false);
         this._scroll = signal(0);
+        //Inputs    
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.placeholder = input('-- Select --');
         this.isInvalid = input(false);
@@ -1172,28 +1219,130 @@ class CoerSelectbox extends ControlValue {
                 .splice(0, this.rowsByPage())
                 .map((item) => Object.assign(item, { indexRow: indexRow++ }));
         });
-        /** */
-        this._GetIndexRow = (item) => {
-            return item['indexRow'];
-        };
-        /** */
-        this._GetDisplay = (item) => {
-            return Tools.IsNotNull(item) ? item[this.displayProperty()] : '';
-        };
-    }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = null;
-        this.SetValue(value);
+        /** */
+        this._GetIndexRow = (item) => {
+            return item['indexRow'];
+        };
+        /** */
+        this._GetDisplay = (item) => {
+            return Tools.IsNotNull(item) ? item[this.displayProperty()] : '';
+        };
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+        });
+    }
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => {
+            //Container
+            this._container = document.getElementById(`${this._id}-container`);
+            this._container.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._container.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            //DropDown
+            this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
+            this._dropDownMenu.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._dropDownMenu.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            //TextBox
+            this._textbox = document.getElementById(this._id);
+            this._textbox.addEventListener('focus', () => {
+                if (this._isEnable())
+                    this.Focus();
+                else
+                    this.Blur();
+            });
+            this._textbox.addEventListener('keyup', (event) => {
+                const { key } = event;
+                if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+                    if (key === 'ArrowUp') {
+                        const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
+                        if ((this._index() - 1) >= firstIndex) {
+                            this._index.update(index => index - 1);
+                            if (this._index() >= 3)
+                                this._scroll.update(scroll => scroll -= this._scrollByRow);
+                            else
+                                this._scroll.set(0);
+                            this._dropDownMenu.scrollTo(0, this._scroll());
+                        }
+                        else {
+                            this._scroll.set(0);
+                            this._index.set(-1);
+                            this._textbox.focus();
+                            this._textbox.select();
+                        }
+                        this._dropDownMenu.scrollTo(0, this._scroll());
+                    }
+                    else if (key === 'ArrowDown') {
+                        const lastIndex = (this._dataSource().length - 1);
+                        if ((this._index() + 1) <= lastIndex) {
+                            this._index.update(index => index + 1);
+                            if (this._index() >= 3)
+                                this._scroll.update(scroll => scroll += this._scrollByRow);
+                        }
+                        this._dropDownMenu.scrollTo(0, this._scroll());
+                    }
+                    else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
+                        if (Tools.IsNotNull(this._value) && !this._isDirty()) {
+                            this._scroll.set(0);
+                            this._dropDownMenu.scrollTo(0, this._scroll());
+                            this._Search(this._displayed);
+                        }
+                        this._isDirty.set(true);
+                    }
+                }
+                else {
+                    if (key == 'Delete' && this._search() == '') {
+                        this.Unselect();
+                    }
+                    this._isDirty.set(true);
+                }
+            });
+            this._textbox.addEventListener('keydown', () => {
+                if (!this._isOpen())
+                    this._Open();
+            });
+            this._textbox.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._textbox.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            this._textbox.addEventListener('paste', () => {
+                Tools.Sleep().then(_ => {
+                    this._search.update(search => search = search.toString().trim());
+                });
+            });
+            //Document
+            document.addEventListener('click', () => {
+                if (!this._isOverMenu())
+                    this.Blur();
+            });
+            document.addEventListener('keyup', (event) => {
+                if (event.key === 'Enter') {
+                    if (this._index() >= 0) {
+                        if (Tools.IsNotNull(this._value) && this._search() == this._value[this.displayProperty()]) {
+                            this._isLoadingEvent.set(true);
+                        }
+                        const dataSource = Tools.BreakReference(this._dataSource());
+                        const _value = dataSource.find(x => x.indexRow == this._index());
+                        this._SelectItem(_value);
+                        this._isLoadingEvent.set(false);
+                    }
+                    this.Blur();
+                }
+            });
+        });
     }
-    async ngAfterViewInit() {
-        await Tools.Sleep();
-        this._SetEvents();
-    }
-    //getter
-    get value() {
-        return this._value;
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
     }
     //getter
     get _displayed() {
@@ -1230,7 +1379,7 @@ class CoerSelectbox extends ControlValue {
         return this.isInvalid() || this.isValid() || this._showCancel
             ? '55px' : '30px';
     }
-    /** */
+    //ControlValueAccessor
     SetValue(_value) {
         if (_value === undefined)
             _value = null;
@@ -1241,7 +1390,7 @@ class CoerSelectbox extends ControlValue {
         this._value = _value;
         this._search.set(this._GetDisplay(_value));
     }
-    /** */
+    //ControlValueAccessor
     writeValue(_value) {
         if (_value === undefined)
             _value = null;
@@ -1249,113 +1398,6 @@ class CoerSelectbox extends ControlValue {
         this._search.set(this._GetDisplay(_value));
     }
     /** */
-    _SetEvents() {
-        //Container
-        this._container = document.getElementById(`${this._id}-container`);
-        this._container.addEventListener('mouseenter', () => {
-            this._isOverMenu.set(true);
-        });
-        this._container.addEventListener('mouseleave', () => {
-            this._isOverMenu.set(false);
-        });
-        //DropDown
-        this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-        this._dropDownMenu.addEventListener('mouseenter', () => {
-            this._isOverMenu.set(true);
-        });
-        this._dropDownMenu.addEventListener('mouseleave', () => {
-            this._isOverMenu.set(false);
-        });
-        //TextBox
-        this._textbox = document.getElementById(this._id);
-        this._textbox.addEventListener('focus', () => {
-            if (this._isEnable())
-                this.Focus();
-            else
-                this.Blur();
-        });
-        this._textbox.addEventListener('keyup', (event) => {
-            const { key } = event;
-            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-                if (key === 'ArrowUp') {
-                    const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
-                    if ((this._index() - 1) >= firstIndex) {
-                        this._index.update(index => index - 1);
-                        if (this._index() >= 3)
-                            this._scroll.update(scroll => scroll -= this._scrollByRow);
-                        else
-                            this._scroll.set(0);
-                        this._dropDownMenu.scrollTo(0, this._scroll());
-                    }
-                    else {
-                        this._scroll.set(0);
-                        this._index.set(-1);
-                        this._textbox.focus();
-                        this._textbox.select();
-                    }
-                    this._dropDownMenu.scrollTo(0, this._scroll());
-                }
-                else if (key === 'ArrowDown') {
-                    const lastIndex = (this._dataSource().length - 1);
-                    if ((this._index() + 1) <= lastIndex) {
-                        this._index.update(index => index + 1);
-                        if (this._index() >= 3)
-                            this._scroll.update(scroll => scroll += this._scrollByRow);
-                    }
-                    this._dropDownMenu.scrollTo(0, this._scroll());
-                }
-                else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-                    if (Tools.IsNotNull(this._value) && !this._isDirty()) {
-                        this._scroll.set(0);
-                        this._dropDownMenu.scrollTo(0, this._scroll());
-                        this._Search(this._displayed);
-                    }
-                    this._isDirty.set(true);
-                }
-            }
-            else {
-                if (key == 'Delete' && this._search() == '') {
-                    this.Unselect();
-                }
-                this._isDirty.set(true);
-            }
-        });
-        this._textbox.addEventListener('keydown', (event) => {
-            if (!this._isOpen())
-                this._Open();
-        });
-        this._textbox.addEventListener('mouseenter', () => {
-            this._isOverMenu.set(true);
-        });
-        this._textbox.addEventListener('mouseleave', () => {
-            this._isOverMenu.set(false);
-        });
-        this._textbox.addEventListener('paste', () => {
-            Tools.Sleep().then(_ => {
-                this._search.update(search => search = search.toString().trim());
-            });
-        });
-        //Document
-        document.addEventListener('click', () => {
-            if (!this._isOverMenu())
-                this.Blur();
-        });
-        document.addEventListener('keyup', (event) => {
-            if (event.key === 'Enter') {
-                if (this._index() >= 0) {
-                    if (Tools.IsNotNull(this._value) && this._search() == this._value[this.displayProperty()]) {
-                        this._isLoadingEvent.set(true);
-                    }
-                    const dataSource = Tools.BreakReference(this._dataSource());
-                    const _value = dataSource.find(x => x.indexRow == this._index());
-                    this._SelectItem(_value);
-                    this._isLoadingEvent.set(false);
-                }
-                this.Blur();
-            }
-        });
-    }
-    /** */
     _SelectItem(item) {
         if (Tools.IsNotNull(item)) {
             const _item = Tools.BreakReference(this.dataSource()[item.index]);
@@ -1447,29 +1489,29 @@ class CoerSelectbox extends ControlValue {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-select-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight\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 class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: _dropDownWidth\r\n            }\">\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                        [ngClass]=\"{\r\n                            'dropdown-item': true,\r\n                            'cursor-pointer': true,\r\n                            'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                        }\"\r\n                    >{{ _GetDisplay(item) }} </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-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-select-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-select-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-select-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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-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-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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;cursor:wait!important}div.coer-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-selectbox div.coer-select-box 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-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box 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-selectbox div.coer-select-box 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-selectbox div.coer-select-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{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-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{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-select-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight\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 class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: _dropDownWidth\r\n            }\">\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                        [ngClass]=\"{\r\n                            'dropdown-item': true,\r\n                            'cursor-pointer': true,\r\n                            'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                        }\"\r\n                    >{{ _GetDisplay(item) }} </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-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-select-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-select-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-select-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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-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-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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;cursor:wait!important}div.coer-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-selectbox div.coer-select-box 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-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box 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-selectbox div.coer-select-box 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-selectbox div.coer-select-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{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-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{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div class=\"coer-select-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight\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 class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: _dropDownWidth\r\n            }\">\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                        [ngClass]=\"{\r\n                            'dropdown-item': true,\r\n                            'cursor-pointer': true,\r\n                            'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                        }\"\r\n                    >{{ _GetDisplay(item) }} </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-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-select-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-select-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-select-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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-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-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-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;cursor:wait!important}div.coer-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-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-selectbox div.coer-select-box 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-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box 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-selectbox div.coer-select-box 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-selectbox div.coer-select-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{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-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{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerTextBox extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
+        super();
         //Elements
         this.matFormField = viewChild.required('matFormField');
         this.coerTextBox = viewChild.required('coerTextBox');
-        //Component Value
-        this._value = '';
         //Variables
+        this._value = '';
         this._id = Tools.GetGuid('coer-textBox');
         this._isLoadingEvent = signal(false);
+        this._externalButton = signal({ show: false });
         //Inputs  
         this.id = input('');
+        this.value = input('');
         this.label = input('');
         this.placeholder = input('');
         this.textPosition = input('left');
@@ -1477,7 +1519,7 @@ class CoerTextBox extends ControlValue {
         this.maxLength = input(50);
         this.isInvalid = input(false);
         this.isValid = input(false);
-        this.externalButton = { show: false };
+        this.externalButton = input({ show: false });
         this.selectOnFocus = input(false);
         this.showClearIcon = input(false);
         this.showSearchIcon = input(false);
@@ -1511,59 +1553,15 @@ class CoerTextBox extends ControlValue {
             return this.isInvalid() || this.isValid()
                 ? '18px' : '0px';
         });
+        this._effectValue = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+        });
+        this._effectExternalButton = effect(() => {
+            this._externalButton.set(this.externalButton());
+        });
     }
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = '';
-        this.SetValue(value);
-    }
-    ngOnInit() {
-        this._SetEvents();
-    }
-    //getter
-    get _showSearchIcon() {
-        return this.showSearchIcon()
-            && !this._showClearIcon
-            && !this.isDisabled()
-            && !this.isLoading();
-    }
-    //getter
-    get _showClearIcon() {
-        return this.showClearIcon()
-            && !this.isDisabled()
-            && !this.isLoading()
-            && this._value != undefined
-            && String(this._value).length > 0;
-    }
-    //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;
-    }
-    //getter
-    get value() {
-        return Tools.IsNotNull(this._value) ? String(this._value) : '';
-    }
-    /** */
-    _SetEvents() {
+    //AfterViewInit
+    ngAfterViewInit() {
         Tools.Sleep().then(() => {
             this.element = document.getElementById(this._id);
             if (this.element) {
@@ -1599,6 +1597,49 @@ class CoerTextBox extends ControlValue {
             }
         });
     }
+    //OnDestroy
+    ngOnDestroy() {
+        this._effectValue?.destroy();
+        this._effectExternalButton?.destroy();
+    }
+    //getter
+    get _showSearchIcon() {
+        return this.showSearchIcon()
+            && !this._showClearIcon
+            && !this.isDisabled()
+            && !this.isLoading();
+    }
+    //getter
+    get _showClearIcon() {
+        return this.showClearIcon()
+            && !this.isDisabled()
+            && !this.isLoading()
+            && this._value != undefined
+            && String(this._value).length > 0;
+    }
+    //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;
+    }
     /** */
     Focus(select = false, delay = 0) {
         if (this._isLoadingEvent())
@@ -1651,23 +1692,19 @@ class CoerTextBox extends ControlValue {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: false, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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(_showSearchIcon) {\r\n                <i class=\"fa-solid fa-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n            }\r\n\r\n            @else if(_showClearIcon) {\r\n                <i class=\"fa-solid fa-xmark cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n            }\r\n\r\n            @else 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-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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(_showSearchIcon) {\r\n                <i class=\"fa-solid fa-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n            }\r\n\r\n            @else if(_showClearIcon) {\r\n                <i class=\"fa-solid fa-xmark cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n            }\r\n\r\n            @else 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-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox 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", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-text-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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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(_showSearchIcon) {\r\n                <i class=\"fa-solid fa-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n            }\r\n\r\n            @else if(_showClearIcon) {\r\n                <i class=\"fa-solid fa-xmark cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n            }\r\n\r\n            @else 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-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
-        }], propDecorators: { externalButton: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerGridExtension extends ControlValue {
     constructor() {
         super(...arguments);
         //Injections
-        this.alert = inject(CoerAlert);
+        this._alert = inject(CoerAlert);
         //Elements
         this._inputFile = viewChild.required('inputFileRef');
         this._inputSearch = viewChild.required('inputSearch');
@@ -1677,15 +1714,15 @@ class CoerGridExtension extends ControlValue {
         this._coerCheckboxList = viewChildren(CoerCheckbox);
         //Variables
         this._value = [];
+        this._id = Tools.GetGuid('coer-grid');
         this._value_signal = signal([]);
         this._gridSearch = signal('');
         this._isLoading = signal(true);
+        this._sort = signal({ columnName: '', direction: 'none', icon: '' });
         this._isLoadingMessage = true;
-        this._id = Tools.GetGuid('coer-grid');
         this._expandedGroups = [];
         this._enableAnimations = false;
         this._indexFocus = signal(0);
-        this._sort = signal({ columnName: '', direction: 'none', icon: '' });
         //Generic Tools
         this.GetNumericFormat = Numbers.GetNumericFormat;
         this.GetElementWidth = HTMLElements.GetElementWidth;
@@ -1914,6 +1951,14 @@ class CoerGridExtension extends ControlValue {
             return (this._isGrouped() ? !(this._expandedGroups.some(x => x == group.groupBy)) : false);
         };
     }
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => {
+            this._enableAnimations = true;
+            this._isLoading.set(false);
+            this._isLoadingMessage = false;
+        });
+    }
     //getter
     get _height() {
         let height = this.height();
@@ -1934,13 +1979,6 @@ class CoerGridExtension extends ControlValue {
     get _onlyOneCheck() {
         return Tools.IsNotNull(this.checkbox.onlyOneCheck) && this.checkbox.onlyOneCheck;
     }
-    ngAfterViewInit() {
-        Tools.Sleep().then(() => {
-            this._enableAnimations = true;
-            this._isLoading.set(false);
-            this._isLoadingMessage = false;
-        });
-    }
     //ControlValueAccessor
     SetValue(value) {
         let indexRow = 0;
@@ -2151,65 +2189,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             }] } });
 
 class CoerSwitch extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
+        super();
         //Elements
         this.coerSwitch = viewChild.required('coerSwitch');
         //Variables
         this._value = false;
         this._id = Tools.GetGuid('coer-switch');
-        this._tooltip = '';
+        //Inputs     
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.labelPosition = input('after');
         this.isLoading = input(false);
         this.isDisabled = input(false);
         this.isReadonly = input(false);
         this.isInvisible = input(false);
+        this.tooltip = input('');
         this.tooltipPosition = input('top');
         //Outputs
         this.onChange = output();
-        //conmputed
+        //computed
+        this._tooltip = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.tooltip())
+                ? Strings.CleanUpBlanks(this.tooltip()) : '';
+        });
+        //computed
+        this._tooltipPosition = computed(() => {
+            switch (this.tooltipPosition()) {
+                case 'top': return 'above';
+                case 'right': return 'right';
+                case 'bottom': return 'below';
+                default: return 'left';
+            }
+        });
+        //computed
         this._isEnable = computed(() => {
             return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
         });
-    }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = false;
-        this.SetValue(value);
-    }
-    set tooltip(value) {
-        this._tooltip = value;
-        if (value && this._tooltipElement) {
-            this._tooltipElement.setContent({ '.tooltip-inner': this._tooltip });
-        }
-    }
-    ngOnInit() {
-        Tools.Sleep().then(() => {
-            const htmlElement = document.getElementById(this._id);
-            if (htmlElement) {
-                htmlElement.addEventListener('mouseleave', () => {
-                    if (this._tooltipElement)
-                        this._tooltipElement.hide();
-                });
-                this._tooltipElement = new Tooltip(htmlElement, {
-                    html: true,
-                    title: this._tooltip,
-                    placement: this.tooltipPosition()
-                });
-            }
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : false);
         });
     }
+    //OnDestroy
     ngOnDestroy() {
-        if (this._tooltipElement) {
-            Tools.Sleep().then(() => this._tooltipElement.dispose());
-        }
-    }
-    //getter
-    get value() {
-        return this._value;
+        this._effect?.destroy();
     }
     /** */
     Focus() {
@@ -2223,17 +2248,13 @@ class CoerSwitch extends ControlValue {
         this.SetValue(value);
         this.onChange.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", inputs: { 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 }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: CoerSwitch, isStandalone: false, selector: "coer-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, providers: [CONTROL_VALUE(CoerSwitch)], viewQueries: [{ propertyName: "coerSwitch", first: true, predicate: ["coerSwitch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" \r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        \r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-switch', providers: [CONTROL_VALUE(CoerSwitch)], standalone: false, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'coer-switch', providers: [CONTROL_VALUE(CoerSwitch)], standalone: false, template: "<div [ngClass]=\"{ 'coer-switch': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" \r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        \r\n        <mat-slide-toggle\r\n            #coerSwitch\r\n            [checked]=\"_value\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            (change)=\"_Change($event.checked)\"\r\n        >{{ label() }}</mat-slide-toggle>\r\n    </div>\r\n</div>", styles: ["div.coer-switch{height:40px;display:flex!important;align-items:center!important;position:relative!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track:after{background-color:var(--primary-inner)!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple{width:30px!important;height:30px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons{background-color:var(--primary-inner)!important;border-radius:20px!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label,div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field label::selection{font-weight:400;background-color:transparent!important;font-size:17px!important}div.coer-switch .placeholder{display:flex!important;height:27px!important}div.coer-switch .placeholder,div.coer-switch .placeholder *,div.coer-switch .placeholder-glow,div.coer-switch .placeholder-glow *{cursor:wait!important}coer-grid div.coer-switch{height:20px!important;justify-content:center!important}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CoerGrid extends CoerGridExtension {
     constructor() {
@@ -2325,7 +2346,7 @@ class CoerGrid extends CoerGridExtension {
                     message += ` <b>${extension}</b>,`;
                 }
                 message = message.substring(0, message.length - 1);
-                this.alert.Warning(message, 'Invalid File Type', 'bi bi-filetype-xlsx fa-lg');
+                this._alert.Warning(message, 'Invalid File Type', 'bi bi-filetype-xlsx fa-lg');
                 this.onClickImport.emit({ data: [], file: null });
             }
             this._inputFile().nativeElement.value = null;
@@ -2772,18 +2793,17 @@ 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", "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" }] }); }
+    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                    (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                    (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                    (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                    (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", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["id", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "ignoreDataBinding", "value"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "min", "max", "isInvalid", "isValid", "externalButton", "selectOnFocus", "decimals", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickExternalButton"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "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: ["id", "value", "label", "labelPosition", "isLoading", "isDisabled", "isReadonly", "isInvisible", "tooltip", "tooltipPosition"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Export(!exportButton.preventDefault)\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Import Button -->\r\n        @if(importButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <input type=\"file\" #inputFileRef [multiple]=\"false\" (change)=\"_Import($event)\">\r\n\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"primary\"\r\n                    [color]=\"_ColorButton(importButton)\"\r\n                    [tooltip]=\"importButton.tooltip || 'Import'\"\r\n                    [path]=\"(importButton && importButton.path) ? importButton.path : []\"\r\n                    [isDisabled]=\"importButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"_Import()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Add Button -->\r\n        @if(addButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(addButton)\"\r\n                    icon=\"new\"\r\n                    [tooltip]=\"addButton.tooltip || 'New'\"\r\n                    [path]=\"(addButton && addButton.path) ? addButton.path : []\"\r\n                    [isDisabled]=\"addButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickAdd.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Save Button -->\r\n        @if(saveButton.show && !isReadonly()) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(saveButton)\"\r\n                    icon=\"save\"\r\n                    [tooltip]=\"saveButton.tooltip || 'Save'\"\r\n                    [path]=\"(saveButton && saveButton.path) ? saveButton.path : []\"\r\n                    [isDisabled]=\"saveButton.isDisabled || false\"\r\n                    [animation]=\"_enableAnimations\"\r\n                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
+            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], standalone: false, template: "<div class=\"coer-grid\" [ngStyle]=\"{ 'width': width(), 'min-Width': MinWidth(), 'max-Width': MaxWidth(), 'margin': margin() }\">\r\n    <header [id]=\"_id + '-header'\" class=\"row\">\r\n        <!-- Slot -->\r\n        <ng-content></ng-content>\r\n\r\n        <!-- Export Button -->\r\n        @if(exportButton.show && gridLength().dataSource > 0) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    [color]=\"_ColorButton(exportButton)\"\r\n                    icon=\"excel\"\r\n                    [tooltip]=\"_isLoading() ? 'Loading' : (exportButton.tooltip || 'Export')\"\r\n                    [path]=\"(exportButton && exportButton.path) ? exportButton.path : []\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading() || (exportButton.isDisabled || false)\"\r\n                    [isLoading]=\"_isLoading()\" \r\n                    (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                    (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                    (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                    (onClick)=\"onClickSave.emit()\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n\r\n        <!-- Search -->\r\n        @if(search.show) {\r\n            <div class=\"col-auto\">\r\n                <coer-textbox\r\n                    #inputSearch\r\n                    [id]=\"_GetId(-1, -1, 'search')\"\r\n                    [ngModel]=\"_gridSearch()\"\r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                    (onInput)=\"_InputChange(-1, 'Search', $event, 'coer-textbox-search')\"\r\n                    (onClickClear)=\"_InputChange(-1, 'Search', '', 'coer-textbox-search')\"\r\n                    (onKeyupEnter)=\"_KeyupEnter(-1, { indexRow: -1 }, 'coer-textbox-search', $event);\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <section [ngClass]=\"{ 'grid-container': true, 'invisible': isInvisible() }\">  \r\n        <div #innerContainer [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">  \r\n            @if(!_isDisabled() && gridLength().dataSource <= 0 && !isLoading()) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n        \r\n            @if(!isLoading()) {\r\n                <table class=\"table table-sm table-responsive table-striped\">\r\n                    <thead>\r\n                        <tr>\r\n                            @if(checkbox.show && gridLength().dataSource > 0) {\r\n                                <!-- CheckBox Column -->\r\n                                <th scope=\"col\" class=\"check-box\">\r\n                                    <div *ngIf=\"!_onlyOneCheck\" [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                        <coer-checkbox\r\n                                            [id]=\"_GetId(0, 0, 'checkboxAll')\"\r\n                                            [ignoreDataBinding]=\"true\"\r\n                                            [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                            (onChange)=\"_ClickCheck(_GetId(0, 0, 'checkboxAll'), $event, true)\"\r\n                                        ></coer-checkbox>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Dynamic Grid Column -->\r\n                            @for(header of _gridColumns(); track header.indexColumn) {\r\n                                <th scope=\"col\" (dblclick)=\"Sort(header.columnName)\"\r\n                                    [ngClass]=\"{\r\n                                        'no-selection': true,\r\n                                        'cursor-default': !enableSort() && !_isLoading(),\r\n                                        'cursor-pointer': enableSort() && !_isLoading(),\r\n                                        'cursor-wait': _isLoading()\r\n                                    }\"\r\n                                    [ngStyle]=\"{\r\n                                        'width': header.width,\r\n                                        'text-align': _GetAttribute(header.columnName, null, 'textAlign', 'defaul-cell')\r\n                                    }\">\r\n                                    <div class=\"no-selection d-flex align-items-center\">\r\n                                        <span class=\"me-1\"> {{ _GetColumnName(header.columnName) }} </span>\r\n                                        <i [class]=\"_GetShortIcon(header.columnName)\"></i> \r\n                                        <i [class]=\"_GetSearchIcon(header.columnName)\"></i>\r\n                                    </div>\r\n                                </th>\r\n                            }\r\n    \r\n                            <!-- Delete Button Column -->\r\n                            @if(_ButtonByRow('showDeleteButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showEditButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n    \r\n                            <!-- Edit Button Column -->\r\n                            @if(_ButtonByRow('showGoButton')) {\r\n                                <th scope=\"col\" class=\"action-button\"></th>\r\n                            }\r\n                        </tr>\r\n                    </thead>\r\n    \r\n                    <!-- body -->\r\n                    @for(group of _gridDataSource(); track group.indexGroup) {\r\n                        <tbody>\r\n                            <!--<tr v-if=\"_isGrouped\">\r\n                                <td :colspan=\"_colspan\" class=\"group\">\r\n                                    <MesAccordion\r\n                                        :ref=\"`accordion${group.indexGroup}-${id}`\"\r\n                                        :title=\"`${_CleanHeaderName(groupBy)} (${group.length}):  ${group.groupBy}`\"\r\n                                        :isLoading=\"_isLoading()\"\r\n                                        @expanded=\"_ToogleAccordion(group.groupBy, true, group.indexGroup)\"\r\n                                        @collapsed=\"_ToogleAccordion(group.groupBy, false, group.indexGroup)\"\r\n                                    ></MesAccordion>\r\n                                </td>\r\n                            </tr>-->\r\n    \r\n                            @for(row of group.rows; track row.indexRow) {\r\n                                <tr [id]=\"_GetId(row.indexRow, 0, 'row')\"\r\n                                    [ngClass]=\"{ 'loading': isLoading(), 'd-none': _HideRow(group), 'row-focus': (row.indexRow == _indexFocus() && enableRowFocus()) }\"\r\n                                    (click)=\"_indexFocus.set(row.indexRow)\">\r\n    \r\n                                    @if(checkbox.show) {\r\n                                        <!-- CheckBox Column -->\r\n                                        <td class=\"check-box\">\r\n                                            <div [ngClass]=\"{ 'invisible': _isLoadingMessage }\">\r\n                                                <coer-checkbox\r\n                                                    [id]=\"_GetId(row.indexRow, 0, 'checkbox')\"\r\n                                                    [ignoreDataBinding]=\"true\"\r\n                                                    [isDisabled]=\"_isDisabled() || _isLoading()\"\r\n                                                    (onChange)=\"_ClickCheck(_GetId(row.indexRow, 0, 'checkbox'), $event, false, row)\"\r\n                                                ></coer-checkbox>\r\n                                            </div>\r\n    \r\n                                            <div [ngClass]=\"{ 'invisible': !_isLoadingMessage, 'spinner-border-container': true }\">\r\n                                                <i class=\"spinner-border\"></i>\r\n                                            </div>\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Dynamic Column -->\r\n                                    @for(header of _gridColumns(); track header.indexColumn) {\r\n                                        @if(_IsCellType(header.columnName, row, 'template')) {\r\n                                            <td class=\"template\"\r\n                                                (click)=\"_isDisabled() ? null : onClickRow.emit(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\">\r\n                                                <div [innerHTML]=\"_GetAttribute(header.columnName, row, 'template', 'defaul-cell') | html\" class=\"template\"></div>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerTextbox')) {\r\n                                            <!-- coer-textbox -->\r\n                                            <td class=\"coer-textbox\">\r\n                                                <coer-textbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerTextbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerTextbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerTextbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerTextbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerTextbox') || ('Type ' + header.columnName + '...')\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerTextbox') || 'left'\"\r\n                                                    [minLength]=\"_GetAttribute(header.columnName, row, 'minLength', 'coerTextbox') || 0\"\r\n                                                    [maxLength]=\"_GetAttribute(header.columnName, row, 'maxLength', 'coerTextbox') || 50\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-textbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-textbox', $event)\"\r\n                                                ></coer-textbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerNumberbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-numberbox\">\r\n                                                <coer-numberbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerNumberbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerNumberbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerNumberbox') || false\"\r\n                                                    [selectOnFocus]=\"_GetAttribute(header.columnName, row, 'selectOnFocus', 'coerNumberbox') || true\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerNumberbox') || ''\"\r\n                                                    [textPosition]=\"_GetAttribute(header.columnName, row, 'textPosition', 'coerNumberbox') || 'right'\"\r\n                                                    [min]=\"_GetAttribute(header.columnName, row, 'min', 'coerNumberbox') || 0\"\r\n                                                    [max]=\"_GetAttribute(header.columnName, row, 'max', 'coerNumberbox') || 2147483647\"\r\n                                                    [decimals]=\"_GetAttribute(header.columnName, row, 'decimals', 'coerNumberbox') || 0\"\r\n                                                    (onInput)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-numberbox')\"\r\n                                                    (onKeyupEnter)=\"_KeyupEnter(header.indexColumn, row, 'coer-numberbox', $event)\"\r\n                                                ></coer-numberbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSelectbox')) {\r\n                                            <!-- coer-numberbox -->\r\n                                            <td class=\"coer-selectbox\">\r\n                                                <coer-selectbox\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSelectbox') || _isDisabled() || _isLoading()\"\r\n                                                    [isValid]=\"_GetAttribute(header.columnName, row, 'isValid', 'coerSelectbox') || false\"\r\n                                                    [isInvalid]=\"_GetAttribute(header.columnName, row, 'isInvalid', 'coerSelectbox') || false\"\r\n                                                    [dataSource]=\"_GetAttribute(header.columnName, row, 'dataSource', 'coerSelectbox') || []\"\r\n                                                    [placeholder]=\"_GetAttribute(header.columnName, row, 'placeholder', 'coerSelectbox') || '-- Select --'\"\r\n                                                    [displayProperty]=\"_GetAttribute(header.columnName, row, 'displayProperty', 'coerSelectbox') || 'name'\"\r\n                                                    (onSelected)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-selectbox'); _KeyupEnter(header.indexColumn, row, 'coer-selectbox', $event)\"\r\n                                                ></coer-selectbox>\r\n                                            </td>\r\n                                        }\r\n    \r\n    \r\n                                        @else if(_IsCellType(header.columnName, row, 'coerSwitch')) {\r\n                                            <!-- coer-switch -->\r\n                                            <td>\r\n                                                <coer-switch\r\n                                                    [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [(ngModel)]=\"row[header.columnName]\"\r\n                                                    [isDisabled]=\"_GetAttribute(header.columnName, row, 'isDisabled', 'coerSwitch') || _isDisabled() || _isLoading()\"\r\n                                                    [tooltip]=\"_GetAttribute(header.columnName, row, 'tooltip', 'coerSwitch')\"\r\n                                                    [tooltipPosition]=\"_GetAttribute(header.columnName, row, 'tooltipPosition', 'coerSwitch') || 'left'\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    (onChange)=\"_InputChange(row.indexRow, header.columnName, $event, 'coer-switch')\"\r\n                                                ></coer-switch>\r\n                                            </td>\r\n                                        }\r\n    \r\n                                        @else {\r\n                                            <!-- Default Cell -->\r\n                                            <td class=\"default-cell\"\r\n                                                (click)=\"_ClickOnRow(row)\"\r\n                                                (dblclick)=\"_isDisabled() ? null : onDoubleClickRow.emit(row)\"\r\n                                                [ngStyle]=\"{\r\n                                                    'text-align': _GetAttribute(header.columnName, row, 'textAlign', 'defaul-cell'),\r\n                                                    'white-space': 'normal'\r\n                                                }\">\r\n    \r\n                                                <div [id]=\"_GetId(row.indexRow, header.indexColumn)\"\r\n                                                    [ngClass]=\"{\r\n                                                        'text-blue-bold': _IsCellColor(header.columnName, row, 'colorBlue'),\r\n                                                        'text-green-bold': _IsCellColor(header.columnName, row, 'colorGreen'),\r\n                                                        'text-yellow-bold': _IsCellColor(header.columnName, row, 'colorYellow'),\r\n                                                        'text-red-bold': _IsCellColor(header.columnName, row, 'colorRed'),\r\n                                                        'text-right-bold': _IsCellType(header.columnName, row, 'number')\r\n                                                    }\">\r\n    \r\n                                                    @if(_IsCellType(header.columnName, row, 'number')) {\r\n                                                        <span> {{ GetNumericFormat(row[header.columnName]) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date')) {\r\n                                                        <span> {{ _GetDateFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else if(_IsCellType(header.columnName, row, 'date-time')) {\r\n                                                        <span> {{ _GetDateTimeFormat(row[header.columnName], _IsCellType(header.columnName, row, 'toLocalZone')) }} </span>\r\n                                                    }\r\n    \r\n                                                    @else {\r\n                                                        <span> {{ _GetCellValue(row, header.columnName) }} </span>\r\n                                                    }\r\n                                                </div>\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n    \r\n                                    <!-- Delete Button -->\r\n                                    @if(_ButtonByRow('showDeleteButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showDeleteButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('deleteButtonColor')\"\r\n                                                    icon=\"delete\"\r\n                                                    [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isReadonly]=\"isReadonly()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickDeleteRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- Edit Button -->\r\n                                    @if(_ButtonByRow('showEditButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showEditButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('editButtonColor')\"\r\n                                                    icon=\"edit\"\r\n                                                    [tooltip]=\"_GetTooltip('Edit', row)\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickEditRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n    \r\n                                    <!-- GO Button -->\r\n                                    @if(_ButtonByRow('showGoButton')) {\r\n                                        <td class=\"action-button\">\r\n                                            @if(_ButtonByRow('showGoButton', row)) {\r\n                                                <coer-button\r\n                                                    type=\"icon-no-border\"\r\n                                                    [color]=\"_ColorButtonByRow('goButtonColor')\"\r\n                                                    icon=\"go\"\r\n                                                    [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\r\n                                                    [isInvisible]=\"_isDisabled()\"\r\n                                                    [isDisabled]=\"_isLoading()\"\r\n                                                    (onClick)=\"onClickGoRow.emit(row)\"\r\n                                                ></coer-button>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            }\r\n                        </tbody>\r\n                    }\r\n                </table>\r\n            }\r\n\r\n            @else {\r\n                <!-- Grid Message -->\r\n                <div class=\"loading\" [ngStyle]=\"{ \r\n                        'width': '100%', \r\n                        'height': '100%',\r\n                        'bottom': showFooter() ? '35px' : '10px'\r\n                    }\">\r\n                    <i class=\"spinner-border\"></i>\r\n                    <span class=\"fa-fade\">Loading</span>\r\n                </div> \r\n            }\r\n        </div>\r\n    </section>\r\n\r\n    @if(showFooter()) {\r\n        <footer class=\"grid-footer\">\r\n            <span>\r\n                @if(_isLoadingMessage) {\r\n                    <span class=\"fa-fade\"> Loading </span>\r\n                }\r\n\r\n                @else if(gridLength().dataSourceSelected > 0) {\r\n                    <span>\r\n                        <i class=\"bi bi-check2-square ms-1\"></i>\r\n                        {{ gridLength().dataSourceSelected }}\r\n                    </span>\r\n                }\r\n            </span>\r\n\r\n            <span class=\"me-1\"> {{ gridLength().dataSourceFiltered | numericFormat }} Rows </span>\r\n        </footer>\r\n    }\r\n</div>", styles: ["div.coer-grid header{align-items:flex-end;justify-content:flex-end;padding-right:8px;margin:0}div.coer-grid header>div{padding:0 0 10px 10px;display:flex;align-items:baseline}div.coer-grid header>div a{height:40px!important}div.coer-grid table{table-layout:auto;border-collapse:separate;border-spacing:1px 0px;margin:0;font-size:14px}div.coer-grid table thead tr th{position:sticky!important;z-index:100!important;top:0!important;background-color:var(--gray)!important;color:var(--smoke)!important;padding:5px!important;vertical-align:middle!important;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;min-width:50px!important;white-space:nowrap!important}div.coer-grid table tbody{border:0px!important}div.coer-grid table tbody tr:not(.row-focus):hover td{color:#000!important;background-color:#f1f6ff}div.coer-grid table tbody tr td{border:0px!important;padding:5px!important;vertical-align:middle!important;white-space:break-spaces;text-overflow:ellipsis;overflow:hidden;min-height:31px!important}div.coer-grid table tbody tr.row-focus td{background-color:#cde1ff}div.coer-grid table tbody tr td.coer-textbox,div.coer-grid table tbody tr td.coer-numberbox,div.coer-grid table tbody tr td.coer-selectbox{padding:0!important;overflow:visible!important}div.coer-grid table tbody tr td.default-cell{cursor:pointer!important}div.coer-grid table thead tr th.action-button,div.coer-grid table thead tr td.action-button,div.coer-grid table thead tr th.check-box,div.coer-grid table thead tr td.check-box,div.coer-grid table tbody tr th.action-button,div.coer-grid table tbody tr td.action-button,div.coer-grid table tbody tr th.check-box table tbody tr td.check-box{text-align:center!important;cursor:default!important;min-width:40px!important;max-width:40px!important;width:40px!important;padding:0!important}div.coer-grid footer.grid-footer{display:flex;align-items:center;justify-content:space-between;font-size:small;color:#999;padding-top:5px}div.coer-grid section.grid-container{position:relative;overflow:auto}div.coer-grid div.loading,div.coer-grid div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:gray}div.coer-grid div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important;z-index:1}div.coer-grid div.loading span.fa-fade{position:relative!important;top:50px!important}div.coer-grid tr.loading{background-color:#bbbbbb83!important}div.coer-grid div.loading i.spinner-border{color:var(--primary-inner)!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box div.spinner-border-container{position:absolute;transform:translate(7px,-19px)}div.coer-grid td.check-box div.spinner-border-container i.spinner-border{width:15px!important;height:15px!important;color:var(--primary-inner)!important}div.coer-grid table thead tr th.check-box>div,div.coer-grid table tbody tr td.check-box>div{display:flex;align-items:center;justify-content:center;cursor:default!important}div.coer-grid input.form-check-input{box-shadow:none!important;margin:0}div.coer-grid input[type=checkbox]{cursor:pointer!important}div.coer-grid td.group{padding:0!important;margin:0!important}div.coer-grid td.group>*{border-top:1px solid var(--gray)!important;border-bottom:1px solid var(--gray)!important;padding:0!important;margin:0!important}div.coer-grid .template,div.coer-grid .template div{white-space:nowrap!important;display:flex!important;align-items:center!important;cursor:pointer!important;gap:5px!important;width:100%}\n"] }]
         }] });
 
 class CoerList {
     constructor() {
         //Variables
         this._id = Tools.GetGuid('coer-List');
-        this._enableAnimations = false;
         //Inputs
         this.dataSource = input([]);
         this.propDisplay = input('name');
@@ -2874,11 +2894,6 @@ class CoerList {
         }
         return height;
     }
-    ngAfterViewInit() {
-        Tools.Sleep().then(() => {
-            this._enableAnimations = true;
-        });
-    }
     /** */
     _GetTemplate(item) {
         return this.template()(item, item.index);
@@ -2894,11 +2909,11 @@ class CoerList {
         this.onDrop.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\"\r\n            [animation]=\"_enableAnimations\"\r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButtonByRow: { classPropertyName: "showDeleteButtonByRow", publicName: "showDeleteButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-list', standalone: false, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\"\r\n            [animation]=\"_enableAnimations\"\r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"] }]
+            args: [{ selector: 'coer-list', standalone: false, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n  'margin-top': marginTop(), \r\n  'margin-right': marginRight(), \r\n  'margin-bottom': marginBottom(), \r\n  'margin-left': marginLeft(), \r\n  }\">\r\n\r\n  @if(isLoading()) {\r\n    <!-- Grid Message -->\r\n    <div class=\"loading\">\r\n        <i class=\"spinner-border\"></i>\r\n        <span class=\"fa-fade\">Loading</span>\r\n    </div>\r\n  }\r\n\r\n  @else if(dataSource().length <= 0) {\r\n    <div class=\"no-data\"> No Data </div>\r\n  }\r\n\r\n  <header [id]=\"_id + '-header'\" class=\"row\"> \r\n    @if(header().length > 0 || headerIcon().length > 0) {\r\n      <div class=\"col-auto me-auto\">\r\n        <h6>\r\n          @if(headerIcon().length > 0) {\r\n            <i [class]=\"headerIcon()\"></i> \r\n          }\r\n\r\n          @if(header().length > 0) {\r\n            <span>{{ header() }}</span> \r\n          }\r\n        </h6>        \r\n      </div>\r\n    }\r\n\r\n    @if(_showBackButton()) {\r\n      <div class=\"col-auto ps-2 pe-0\">         \r\n        <coer-button\r\n            type=\"icon-outline\"\r\n            color=\"secondary\"\r\n            icon=\"back\"\r\n            tooltip=\"Back\" \r\n            (onClick)=\"onClickBack.emit()\"\r\n        ></coer-button>       \r\n      </div>\r\n    }\r\n    \r\n    <!-- Search -->\r\n    @if(showSearch() && dataSource().length > 0) {\r\n      <div class=\"col-auto pe-0\">\r\n          <coer-textbox\r\n              #inputSearch \r\n              placeholder=\"Search\"\r\n              [isDisabled]=\"isLoading()\"\r\n              [selectOnFocus]=\"true\"\r\n              width=\"250px\"\r\n              marginTop=\"5px\"\r\n              marginBottom=\"5px\"\r\n              [showSearchIcon]=\"true\"\r\n              [showClearIcon]=\"true\"\r\n          ></coer-textbox>\r\n      </div>\r\n    }\r\n  </header>\r\n\r\n  <div [ngStyle]=\"{ \r\n    'width': width(), \r\n    'min-Width': MinWidth(), \r\n    'max-Width': MaxWidth(), \r\n    }\">\r\n    <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n        [ngStyle]=\"{ \r\n          'height': _height, \r\n          'min-height': minHeight(), \r\n          'max-height': maxHeight(), \r\n          'd-none': dataSource().length <= 0  \r\n          }\">\r\n      \r\n      @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n        <li cdkDrag \r\n          class=\"list-group-item coer-list-box\" \r\n          cdkDragBoundary=\"ul.coer-list\"\r\n          (click)=\"onClick.emit(item)\" \r\n          (dblclick)=\"onDoubleClick.emit(item)\">\r\n  \r\n          <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n          <div class=\"coer-list-content\"> \r\n            @if(_hasTemplate()) {\r\n              <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n            }\r\n  \r\n            @else {\r\n              <div> {{ _GetDisplay(item) }} </div> \r\n            }            \r\n            \r\n            <div>\r\n              @if(_showDeleteButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"delete\"      \r\n                  (onClick)=\"onClickDelete.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n  \r\n              @if(_showGoButtonByRow(item)) {\r\n                <coer-button\r\n                  type=\"icon-no-border\"\r\n                  color=\"secondary\"\r\n                  icon=\"go\"   \r\n                  marginLeft=\"5px\"   \r\n                  (onClick)=\"onClickGo.emit(item)\"\r\n                ></coer-button>\r\n              } \r\n               \r\n              <i cdkDragHandle [ngClass]=\"{ \r\n                'fa-solid fa-grip-vertical text-secondary ps-2': true,\r\n                'cursor-grab': true, \r\n                'cursor-grabbing': false, \r\n                'd-none': !_isDraggable()\r\n              }\"></i>               \r\n            </div>           \r\n          </div>  \r\n        </li> \r\n      } \r\n    </ul>\r\n  </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list li.coer-list-box{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list li.coer-list-box div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list-box:last-child{border:none}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"] }]
         }] });
 
 class CoerMenuOption {
@@ -2906,14 +2921,50 @@ class CoerMenuOption {
         //Injects
         this._router = inject(Router);
         //Inputs
-        this.level = 1;
-        this.label = '';
-        this.tree = [];
+        this.level = input(1);
+        this.label = input('');
+        this.icon = input();
+        this.path = input();
+        this.tree = input([]);
         //Outputs
-        this.clickMenuOption = new EventEmitter();
+        this.clickMenuOption = output();
+        //computed
+        this._icon = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.icon()) ? this.icon() : '';
+        });
+        //computed
+        this._path = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.path()) ? this.path() : '/home';
+        });
+        //computed
+        this._tree = computed(() => {
+            return [...this.tree()].concat({
+                label: this.label(),
+                icon: this._icon(),
+                path: this._path()
+            });
+        });
+        //computed
+        this._marginLeft = computed(() => {
+            return this.level() == 3
+                ? `${(this.level() - 1) * 10}px`
+                : `${(this.level() - 1) * 20}px`;
+        });
+        //computed
+        this._identityClass = computed(() => {
+            let identity = '';
+            for (let i = 0; i < this.tree().length; i++) {
+                identity += `lv${i + 1}${this.tree()[i].label}-`;
+            }
+            identity += `lv${this.level()}${this.label()}`;
+            if (identity.includes(' '))
+                identity = identity.replaceAll(' ', '');
+            return identity.toLowerCase();
+        });
     }
+    //AfterContentInit
     ngAfterContentInit() {
-        setTimeout(async () => {
+        Tools.Sleep().then(async (_) => {
             while (['', '/'].includes(this._router.url)) {
                 await Tools.Sleep(100);
             }
@@ -2923,41 +2974,11 @@ class CoerMenuOption {
                 routerURL = this._router.url.split('?')[0];
                 queryParams = this._router.url.split('?')[1];
             }
-            if (routerURL == this.path) {
+            if (routerURL == this.path()) {
                 this.ClickMenuOption(queryParams, false);
             }
         });
     }
-    get _icon() {
-        return (Tools.IsNotOnlyWhiteSpace(this.icon) && this.icon.length > 0)
-            ? this.icon : '';
-    }
-    get _path() {
-        return (Tools.IsNotOnlyWhiteSpace(this.path) && this.path.length > 0)
-            ? this.path : '/home';
-    }
-    get _tree() {
-        return [...this.tree].concat({
-            label: this.label,
-            icon: this._icon,
-            path: this._path
-        });
-    }
-    get marginLeft() {
-        return this.level == 3
-            ? `${(this.level - 1) * 10}px`
-            : `${(this.level - 1) * 20}px`;
-    }
-    get identityClass() {
-        let identity = '';
-        for (let i = 0; i < this.tree.length; i++) {
-            identity += `lv${i + 1}${this.tree[i].label}-`;
-        }
-        identity += `lv${this.level}${this.label}`;
-        if (identity.includes(' '))
-            identity = identity.replaceAll(' ', '');
-        return identity.toLowerCase();
-    }
     /** */
     ClickMenuOption(queryParams, resetSource = true) {
         if (resetSource) {
@@ -2965,52 +2986,42 @@ class CoerMenuOption {
             if (this._router.url.includes('?')) {
                 routerURL = this._router.url.split('?')[0];
             }
-            if (routerURL != this.path) {
+            if (routerURL != this.path()) {
                 Source.Reset();
             }
         }
         this.clickMenuOption.emit({
-            level: this.level,
-            label: this.label,
-            path: this._path,
-            icon: this._icon,
-            tree: [...this._tree],
+            level: this.level(),
+            label: this.label(),
+            path: this._path(),
+            icon: this._icon(),
+            tree: this._tree(),
             queryParams: queryParams
         });
     }
     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;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: CoerMenuOption, isStandalone: false, selector: "coer-menu-option", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { 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;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: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], tree: [{
-                type: Input
-            }], clickMenuOption: [{
-                type: Output
-            }] } });
+            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"] }]
+        }] });
 
 class CoerSecretBox extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
-        //Component Value
-        this._value = '';
+        super();
+        //Elements
         this.matFormField = viewChild.required('matFormField');
         this.coerTextBox = viewChild.required('coerTextBox');
         //Variables
+        this._value = '';
         this._id = Tools.GetGuid('coer-textBox');
         this._isLoadingEvent = signal(false);
         this.passwordType = true;
         //Inputs 
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.placeholder = input('');
         this.textPosition = input('left');
@@ -3056,34 +3067,12 @@ class CoerSecretBox extends ControlValue {
                 return '0px';
             }
         });
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+        });
     }
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = '';
-        this.SetValue(value);
-    }
-    ngOnInit() {
-        this._SetEvents();
-    }
-    //getter
-    get _showSecret() {
-        return !this.showSecret()
-            && !this.isDisabled()
-            && !this.isLoading();
-    }
-    //getter
-    get _passwordType() {
-        return this.showSecret()
-            || this.passwordType
-            || this.isDisabled()
-            || this.isLoading();
-    }
-    //getter
-    get value() {
-        return String(this._value);
-    }
-    /** */
-    _SetEvents() {
+    //AfterViewInit
+    ngAfterViewInit() {
         Tools.Sleep().then(() => {
             this.element = document.getElementById(this._id);
             if (this.element) {
@@ -3119,6 +3108,23 @@ class CoerSecretBox extends ControlValue {
             }
         });
     }
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
+    }
+    //getter
+    get _showSecret() {
+        return !this.showSecret()
+            && !this.isDisabled()
+            && !this.isLoading();
+    }
+    //getter
+    get _passwordType() {
+        return this.showSecret()
+            || this.passwordType
+            || this.isDisabled()
+            || this.isLoading();
+    }
     /** */
     Focus(select = false, delay = 0) {
         if (this._isLoadingEvent())
@@ -3157,18 +3163,19 @@ class CoerSecretBox extends ControlValue {
         this.SetValue('');
         this.Focus(false, delay);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-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            '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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            [type]=\"_passwordType ? 'password': 'text'\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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 class=\"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\r\n            @if(_showSecret) {\r\n                <i [ngClass]=\"{\r\n                    'fa-solid cursor-pointer': true, \r\n                    'fa-eye-slash': passwordType,\r\n                    'fa-eye': !passwordType\r\n                }\" \r\n                [ngStyle]=\"{\r\n                    'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n                }\"\r\n                (click)=\"passwordType = !passwordType\"></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</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-text-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            '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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            [type]=\"_passwordType ? 'password': 'text'\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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 class=\"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\r\n            @if(_showSecret) {\r\n                <i [ngClass]=\"{\r\n                    'fa-solid cursor-pointer': true, \r\n                    'fa-eye-slash': passwordType,\r\n                    'fa-eye': !passwordType\r\n                }\" \r\n                [ngStyle]=\"{\r\n                    'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n                }\"\r\n                (click)=\"passwordType = !passwordType\"></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</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-text-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            '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 #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            [type]=\"_passwordType ? 'password': 'text'\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                '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 class=\"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\r\n            @if(_showSecret) {\r\n                <i [ngClass]=\"{\r\n                    'fa-solid cursor-pointer': true, \r\n                    'fa-eye-slash': passwordType,\r\n                    'fa-eye': !passwordType\r\n                }\" \r\n                [ngStyle]=\"{\r\n                    'margin-right': isInvalid() || isValid() ? '25px' : '0px'\r\n                }\"\r\n                (click)=\"passwordType = !passwordType\"></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</div> ", styles: ["div.coer-text-box{display:flex;align-items:center}div.coer-text-box mat-form-field{position:relative!important}div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-text-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-text-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-text-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-text-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-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-text-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-text-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-text-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-text-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;gap:5px}div.coer-text-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye{color:#caced1!important;cursor:pointer!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye-slash:hover,div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-eye:hover{color:#6c757d!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-text-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;cursor:wait!important}div.coer-text-box mat-form-field .placeholder,div.coer-text-box mat-form-field .placeholder *,div.coer-text-box mat-form-field .placeholder-glow,div.coer-text-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-text-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-textbox 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-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-textbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-textbox 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-textbox 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-textbox 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-textbox 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-textbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerPageTitle {
+    //Constructor
     constructor() {
+        //Variables
+        this._iconRoot = 'icon-fill icon-house';
         //Inputs 
         this.title = input(null);
         this.showBreadcrumbs = input(true);
@@ -3177,83 +3184,86 @@ class CoerPageTitle {
         this.information = input({ show: false });
         //Outputs 
         this.onClickInformation = output();
-    }
-    //getter
-    get _icon() {
+        //computed
+        this._tooltip = computed(() => {
+            return Tools.IsNotOnlyWhiteSpace(this.information()?.tooltip)
+                ? this.information().tooltip : 'Information';
+        });
         const MENU = Menu.GetSelectedOption();
         if (MENU) {
             const MENU_SELECTED = MENU.tree.shift();
             if (MENU_SELECTED && MENU_SELECTED.icon) {
-                return MENU_SELECTED.icon;
+                this._iconRoot = MENU_SELECTED.icon;
             }
         }
-        return 'bi bi-house-door-fill';
-    }
-    //getter
-    get _tooltip() {
-        return Tools.IsNotNull(this.information())
-            && Tools.IsNotOnlyWhiteSpace(this.information()?.tooltip)
-            ? this.information().tooltip : 'Information';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, goBack: { classPropertyName: "goBack", publicName: "goBack", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickInformation: "onClickInformation" }, ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n    <h2>\r\n        <span> {{ title() }} </span>\r\n\r\n        <!-- Button Information -->\r\n        @if(information().show) {\r\n            <coer-button\r\n                icon=\"bi bi-info-circle\"\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [tooltip]=\"_tooltip\"\r\n                (onClick)=\"onClickInformation.emit()\"\r\n            ></coer-button> \r\n        }\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    <nav *ngIf=\"showBreadcrumbs\" aria-label=\"breadcrumb\">\r\n        <ol class=\"breadcrumb\">\r\n            <li class=\"breadcrumb-item\">\r\n                <a><i [class]=\"_icon\"></i></a>\r\n            </li>\r\n\r\n            <li *ngFor=\"let nav of breadcrumbs()\" class=\"breadcrumb-item\">\r\n                <a  [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n                    [queryParams]='nav.queryParams'\r\n                    (click)=\"(nav.click) ? nav.click() : null\">\r\n                    {{ nav.page }}\r\n                </a>\r\n            </li>\r\n        </ol>\r\n\r\n        <!-- Go Back -->\r\n        <a  *ngIf=\"goBack().show\"\r\n            [routerLink]=\"goBack().path\"\r\n            [queryParams]='goBack().queryParams'\r\n            class=\"go-back-button\"\r\n            (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n            Go back\r\n        </a>\r\n    </nav>\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:auto;min-height:25px;font-size:small;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex;align-items:center;justify-content:space-between}header.coer-page-title nav a.go-back-button{min-width:60px}header.coer-page-title ol,header.coer-page-title a{margin:0;padding-left:5px;text-decoration:none;color:var(--breadcrumbs-inner)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerPageTitle, isStandalone: false, selector: "coer-page-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, goBack: { classPropertyName: "goBack", publicName: "goBack", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickInformation: "onClickInformation" }, ngImport: i0, template: "<header class=\"coer-page-title\" title=''>\r\n    <h2>\r\n        <span> {{ title() }} </span>\r\n\r\n        <!-- Button Information -->\r\n        @if(information().show) {\r\n            <button mat-icon-button\r\n                [matTooltip]=\"_tooltip()\"\r\n                matTooltipPosition=\"before\"\r\n                [matTooltipDisabled]=\"false\"\r\n                [matTooltipHideDelay]=\"0\"\r\n                type=\"button\"\r\n                (click)=\"onClickInformation.emit()\">\r\n                <i class=\"icon-circle-info\"></i>\r\n            </button>\r\n        }\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    @if(showBreadcrumbs()) {\r\n        <nav>   \r\n            <a class=\"breadcrumb-root\">\r\n                <i [class]=\"_iconRoot\"></i>\r\n            </a>\r\n             \r\n            <!-- Breadcrumbs -->\r\n            <div class=\"breadcrumbs\">                 \r\n                 <a *ngFor=\"let nav of breadcrumbs()\" [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n                    [queryParams]='nav.queryParams'\r\n                    (click)=\"(nav.click) ? nav.click() : null\">\r\n                    {{ nav.page }}\r\n                </a>\r\n            </div>\r\n            \r\n\r\n            <!-- Go Back -->\r\n            @if(goBack().show) {\r\n                <a  class=\"go-back\"\r\n                    [routerLink]=\"goBack().path\"\r\n                    [queryParams]='goBack().queryParams'\r\n                    (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n                    Go back\r\n                </a> \r\n            }\r\n        </nav>\r\n    }\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title h2 button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--breadcrumbs-inner)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}header.coer-page-title h2 button:focus{box-shadow:0 0 20px!important}header.coer-page-title nav{height:auto!important;min-height:25px!important;font-size:small!important;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}header.coer-page-title nav a{margin:0!important;display:flex!important;justify-content:center!important;padding:0 5px!important;text-decoration:none!important;color:var(--breadcrumbs-inner)!important;font-weight:400!important;font-size:14px!important;cursor:pointer!important}header.coer-page-title nav a.breadcrumb-root{padding-left:5px!important}header.coer-page-title nav div.breadcrumbs{display:flex!important;flex-wrap:wrap!important;align-items:center!important;flex-grow:1!important}header.coer-page-title nav div.breadcrumbs a:before{content:\"/\";width:10px}header.coer-page-title nav a.go-back{min-width:80px!important;justify-content:flex-end!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerPageTitle, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n    <h2>\r\n        <span> {{ title() }} </span>\r\n\r\n        <!-- Button Information -->\r\n        @if(information().show) {\r\n            <coer-button\r\n                icon=\"bi bi-info-circle\"\r\n                type=\"icon-no-border\"\r\n                color=\"dark\"\r\n                [tooltip]=\"_tooltip\"\r\n                (onClick)=\"onClickInformation.emit()\"\r\n            ></coer-button> \r\n        }\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    <nav *ngIf=\"showBreadcrumbs\" aria-label=\"breadcrumb\">\r\n        <ol class=\"breadcrumb\">\r\n            <li class=\"breadcrumb-item\">\r\n                <a><i [class]=\"_icon\"></i></a>\r\n            </li>\r\n\r\n            <li *ngFor=\"let nav of breadcrumbs()\" class=\"breadcrumb-item\">\r\n                <a  [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n                    [queryParams]='nav.queryParams'\r\n                    (click)=\"(nav.click) ? nav.click() : null\">\r\n                    {{ nav.page }}\r\n                </a>\r\n            </li>\r\n        </ol>\r\n\r\n        <!-- Go Back -->\r\n        <a  *ngIf=\"goBack().show\"\r\n            [routerLink]=\"goBack().path\"\r\n            [queryParams]='goBack().queryParams'\r\n            class=\"go-back-button\"\r\n            (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n            Go back\r\n        </a>\r\n    </nav>\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title nav{height:auto;min-height:25px;font-size:small;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex;align-items:center;justify-content:space-between}header.coer-page-title nav a.go-back-button{min-width:60px}header.coer-page-title ol,header.coer-page-title a{margin:0;padding-left:5px;text-decoration:none;color:var(--breadcrumbs-inner)!important;font-weight:400!important;cursor:pointer!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"] }]
-        }] });
+            args: [{ selector: 'coer-page-title', standalone: false, template: "<header class=\"coer-page-title\" title=''>\r\n    <h2>\r\n        <span> {{ title() }} </span>\r\n\r\n        <!-- Button Information -->\r\n        @if(information().show) {\r\n            <button mat-icon-button\r\n                [matTooltip]=\"_tooltip()\"\r\n                matTooltipPosition=\"before\"\r\n                [matTooltipDisabled]=\"false\"\r\n                [matTooltipHideDelay]=\"0\"\r\n                type=\"button\"\r\n                (click)=\"onClickInformation.emit()\">\r\n                <i class=\"icon-circle-info\"></i>\r\n            </button>\r\n        }\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    @if(showBreadcrumbs()) {\r\n        <nav>   \r\n            <a class=\"breadcrumb-root\">\r\n                <i [class]=\"_iconRoot\"></i>\r\n            </a>\r\n             \r\n            <!-- Breadcrumbs -->\r\n            <div class=\"breadcrumbs\">                 \r\n                 <a *ngFor=\"let nav of breadcrumbs()\" [routerLink]='(nav.path && nav.path.length > 0) ? nav.path : null'\r\n                    [queryParams]='nav.queryParams'\r\n                    (click)=\"(nav.click) ? nav.click() : null\">\r\n                    {{ nav.page }}\r\n                </a>\r\n            </div>\r\n            \r\n\r\n            <!-- Go Back -->\r\n            @if(goBack().show) {\r\n                <a  class=\"go-back\"\r\n                    [routerLink]=\"goBack().path\"\r\n                    [queryParams]='goBack().queryParams'\r\n                    (click)=\"(goBack().click) ? goBack().click!() : null\">\r\n                    Go back\r\n                </a> \r\n            }\r\n        </nav>\r\n    }\r\n</header> ", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title h2{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;height:20px;font-size:20px}header.coer-page-title h2 span{font-size:20px!important}header.coer-page-title h2 button{font-size:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--breadcrumbs-inner)!important;background-color:transparent!important;padding:0!important;width:25px!important;height:25px!important;border:none!important}header.coer-page-title h2 button:focus{box-shadow:0 0 20px!important}header.coer-page-title nav{height:auto!important;min-height:25px!important;font-size:small!important;background-color:color-mix(in srgb,var(--gray),white 90%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important}header.coer-page-title nav a{margin:0!important;display:flex!important;justify-content:center!important;padding:0 5px!important;text-decoration:none!important;color:var(--breadcrumbs-inner)!important;font-weight:400!important;font-size:14px!important;cursor:pointer!important}header.coer-page-title nav a.breadcrumb-root{padding-left:5px!important}header.coer-page-title nav div.breadcrumbs{display:flex!important;flex-wrap:wrap!important;align-items:center!important;flex-grow:1!important}header.coer-page-title nav div.breadcrumbs a:before{content:\"/\";width:10px}header.coer-page-title nav a.go-back{min-width:80px!important;justify-content:flex-end!important}header.coer-page-title ol::selection,header.coer-page-title a::selection{background-color:transparent!important}header.coer-page-title li{border:none}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CoerTreeAccordion {
     constructor() {
+        //Elements 
+        this.expansionPanel = viewChild.required('expansionPanel');
+        this.menuList = viewChildren(CoerTreeAccordion);
         //Variables
         this.isExpanded = false;
         this.isCollapsed = true;
         //Inputs
-        this.level = 1;
-        this.tree = [];
-        this.showTree = true;
+        this.level = input(1);
+        this.item = input.required();
+        this.tree = input([]);
+        this.showTree = input(true);
         //Outputs
-        this.showGridMenu = new EventEmitter();
-        this.clickMenuOption = new EventEmitter();
-        this.clickMenu = new EventEmitter();
+        this.showGridMenu = output();
+        this.clickMenuOption = output();
+        this.clickMenu = output();
+        //computed
+        this._tree = computed(() => {
+            return [...this.tree()].concat([{ ...this.item() }]);
+        });
+        //computed
+        this._icon = computed(() => {
+            return this.item() && Tools.IsNotOnlyWhiteSpace(this.item()?.icon)
+                ? this.item().icon : 'coer-icon-bars';
+        });
+        //computed
+        this._marginLeft = computed(() => {
+            return `${(this.level() - 1) * 20}px`;
+        });
+        //computed
+        this._identityClass = computed(() => {
+            let identity = '';
+            for (let i = 0; i < this.tree().length; i++) {
+                identity += `lv${i + 1}${this.tree()[i].label}-`;
+            }
+            identity += `lv${this.level()}${this.item().label}`;
+            if (identity.includes(' '))
+                identity = identity.replaceAll(' ', '');
+            return identity.toLowerCase();
+        });
         /** */
-        this.IsActive = (element) => {
-            return (this.isExpanded && this.level > 1)
+        this._IsActive = (element) => {
+            return (this.isExpanded && this.level() > 1)
                 || (this.isCollapsed && element.classList.contains('active-link'));
         };
         /** */
-        this.IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
+        this._IsMenu = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.items);
         /** */
-        this.IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
+        this._IsGrid = (item) => Tools.IsNotNull(item) && Tools.IsNotOnlyWhiteSpace(item?.show) && item.show === 'GRID';
         /** */
-        this.GetGridIcon = (icon) => Tools.IsNotOnlyWhiteSpace(icon) ? icon : 'fa-solid fa-grip';
-    }
-    get _tree() {
-        return [...this.tree].concat([{ ...this.item }]);
-    }
-    get _icon() {
-        return (this.item && Tools.IsNotOnlyWhiteSpace(this.item?.icon) && this.item.icon.length > 0)
-            ? this.item.icon : 'coer-icon-bars';
-    }
-    get marginLeft() {
-        return `${(this.level - 1) * 20}px`;
-    }
-    get identityClass() {
-        let identity = '';
-        for (let i = 0; i < this.tree.length; i++) {
-            identity += `lv${i + 1}${this.tree[i].label}-`;
-        }
-        identity += `lv${this.level}${this.item.label}`;
-        if (identity.includes(' '))
-            identity = identity.replaceAll(' ', '');
-        return identity.toLowerCase();
+        this._GetGridIcon = (icon) => Tools.IsNotOnlyWhiteSpace(icon) ? icon : 'fa-solid fa-grip';
     }
     /** */
     Close() {
         if (this.isExpanded) {
             this.isExpanded = false;
             this.isCollapsed = true;
-            this.expansionPanel.close();
+            this.expansionPanel().close();
         }
     }
     /** */
@@ -3261,12 +3271,12 @@ class CoerTreeAccordion {
         if (this.isCollapsed) {
             this.isExpanded = true;
             this.isCollapsed = false;
-            this.expansionPanel.open();
+            this.expansionPanel().open();
         }
     }
     /** */
-    Toggle() {
-        if (this.showTree) {
+    _Toggle() {
+        if (this.showTree()) {
             this.isExpanded = !this.isExpanded;
             this.isCollapsed = !this.isCollapsed;
         }
@@ -3276,19 +3286,19 @@ class CoerTreeAccordion {
             Source.Reset();
         }
         this.clickMenu.emit({
-            level: this.level,
-            label: this.item.label,
+            level: this.level(),
+            label: this.item().label,
             isExpanded: this.isExpanded,
             isCollapsed: this.isCollapsed,
-            items: this.item.items,
-            icon: this._icon,
-            tree: [...this._tree]
+            items: this.item().items,
+            icon: this._icon(),
+            tree: [...this._tree()]
         });
     }
     /** */
-    ClickMenuOption(menuOption, showGridMenu = false) {
-        for (const menu of this.menuList.toArray()) {
-            if (menu.item.label != menuOption.tree[this.level].label) {
+    _ClickMenuOption(menuOption, showGridMenu = false) {
+        for (const menu of this.menuList()) {
+            if (menu.item().label != menuOption.tree[this.level()].label) {
                 menu.Close();
             }
         }
@@ -3298,80 +3308,61 @@ class CoerTreeAccordion {
             this.clickMenuOption.emit(menuOption);
     }
     /** */
-    ClickMenu(menu) {
-        for (const menuLv2 of this.menuList.toArray()) {
-            if (menuLv2.item.label != menu.label)
+    _ClickMenu(menu) {
+        for (const menuLv2 of this.menuList()) {
+            if (menuLv2.item().label != menu.label)
                 menuLv2.Close();
         }
         this.clickMenu.emit(menu);
     }
     /** */
-    ShowGridMenu(menuOption, menu) {
+    _ShowGridMenu(menuOption, menu) {
         menuSelectedSIGNAL.set({
-            level: this.level + 1,
+            level: this.level() + 1,
             label: menu.label,
-            icon: this.GetGridIcon(menu.label),
+            icon: this._GetGridIcon(menu.label),
             isExpanded: true,
             isCollapsed: false,
             items: menu.items,
             tree: []
         });
-        this.ClickMenuOption(menuOption, true);
+        this._ClickMenuOption(menuOption, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: "level", item: "item", tree: "tree", showTree: "showTree" }, outputs: { showGridMenu: "showGridMenu", clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTreeAccordion, isStandalone: false, selector: "coer-tree-accordion", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, showTree: { classPropertyName: "showTree", publicName: "showTree", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showGridMenu: "showGridMenu", clickMenuOption: "clickMenuOption", clickMenu: "clickMenu" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + _identityClass()\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"_Toggle()\"\r\n            [class]=\"_identityClass()\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level() == 1),\r\n                'text-sidenav-active': _IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': _marginLeft() }\"\r\n                    [class]=\"_identityClass()\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': _IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon()\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"_identityClass()\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': _IsActive(labelContainer)\r\n                    }\"> {{ item().label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree()) { \r\n            <div *ngFor=\"let subItem of item().items\">\r\n                @if(_IsMenu(subItem)) {\r\n                    <!-- Sub Menu -->\r\n                    @if(_IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"_GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level() + 1\"\r\n                            [tree]=\"_tree()\"\r\n                            (clickMenuOption)=\"_ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n    \r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level() + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree()\"\r\n                            (clickMenuOption)=\"_ClickMenuOption($event)\"\r\n                            (clickMenu)=\"_ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                }\r\n\r\n                @else {\r\n                    <!-- Option Menu --> \r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level() + 1\"\r\n                        [tree]=\"_tree()\"\r\n                        (clickMenuOption)=\"_ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                } \r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTreeAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + identityClass\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"Toggle()\"\r\n            [class]=\"identityClass\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level == 1),\r\n                'text-sidenav-active': IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': marginLeft }\"\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"identityClass\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': IsActive(labelContainer)\r\n                    }\"> {{ item.label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree) { \r\n            <div *ngFor=\"let subItem of item.items\">\r\n                <!-- Sub Menu -->\r\n                <div *ngIf=\"IsMenu(subItem); else isOption\"> \r\n                    @if(IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level + 1\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n\r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree\"\r\n                            (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                            (clickMenu)=\"ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                </div>\r\n\r\n                <!-- Option Menu -->\r\n                <ng-template #isOption>\r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level + 1\"\r\n                        [tree]=\"_tree\"\r\n                        (clickMenuOption)=\"ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                </ng-template>\r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
-        }], propDecorators: { expansionPanel: [{
-                type: ViewChild,
-                args: ['expansionPanel']
-            }], menuList: [{
-                type: ViewChildren,
-                args: [CoerTreeAccordion]
-            }], level: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], tree: [{
-                type: Input
-            }], showTree: [{
-                type: Input
-            }], showGridMenu: [{
-                type: Output
-            }], clickMenuOption: [{
-                type: Output
-            }], clickMenu: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'coer-tree-accordion', standalone: false, template: "<mat-accordion class=\"coer-tree-accordion\">\r\n    <mat-expansion-panel #expansionPanel [class]=\"'coer-tree-accordion-' + _identityClass()\">\r\n\r\n        <!-- Header -->\r\n        <mat-expansion-panel-header (click)=\"_Toggle()\"\r\n            [class]=\"_identityClass()\"\r\n            [ngClass]=\"{\r\n                'background-navigation': (isExpanded && level() == 1),\r\n                'text-sidenav-active': _IsActive(iconContainer)\r\n            }\">\r\n            <mat-panel-description>\r\n                <span #iconContainer\r\n                    [ngStyle]=\"{ 'margin-left': _marginLeft() }\"\r\n                    [class]=\"_identityClass()\"\r\n                    [ngClass]=\"{\r\n                        'icon-container': true,\r\n                        'text-sidenav-active': _IsActive(iconContainer)\r\n                    }\"> <i [class]=\"_icon()\"></i> </span>\r\n\r\n                <span #labelContainer\r\n                    [class]=\"_identityClass()\"\r\n                    [ngClass]=\"{\r\n                        'label-container': true,\r\n                        'text-sidenav-active': _IsActive(labelContainer)\r\n                    }\"> {{ item().label }} </span>\r\n            </mat-panel-description>\r\n        </mat-expansion-panel-header>\r\n\r\n\r\n        @if(showTree()) { \r\n            <div *ngFor=\"let subItem of item().items\">\r\n                @if(_IsMenu(subItem)) {\r\n                    <!-- Sub Menu -->\r\n                    @if(_IsGrid(subItem)) {\r\n                        <coer-menu-option\r\n                            [label]=\"subItem.label\"\r\n                            [icon]=\"_GetGridIcon(subItem!.icon)\"\r\n                            path='menu'\r\n                            [level]=\"level() + 1\"\r\n                            [tree]=\"_tree()\"\r\n                            (clickMenuOption)=\"_ShowGridMenu($event, subItem)\"\r\n                        ></coer-menu-option>\r\n                    }\r\n    \r\n                    @else {\r\n                        <coer-tree-accordion\r\n                            [level]=\"level() + 1\"\r\n                            [item]=\"subItem\"\r\n                            [tree]=\"_tree()\"\r\n                            (clickMenuOption)=\"_ClickMenuOption($event)\"\r\n                            (clickMenu)=\"_ClickMenu($event)\"\r\n                        ></coer-tree-accordion> \r\n                    }\r\n                }\r\n\r\n                @else {\r\n                    <!-- Option Menu --> \r\n                    <coer-menu-option\r\n                        [label]=\"subItem.label\"\r\n                        [icon]=\"subItem?.icon\"\r\n                        [path]=\"subItem?.path\"\r\n                        [level]=\"level() + 1\"\r\n                        [tree]=\"_tree()\"\r\n                        (clickMenuOption)=\"_ClickMenuOption($event)\"\r\n                    ></coer-menu-option>\r\n                } \r\n\r\n                <div class=\"separator\"></div>\r\n            </div>\r\n        }\r\n    </mat-expansion-panel>\r\n</mat-accordion>", styles: ["mat-accordion.coer-tree-accordion div,mat-accordion.coer-tree-accordion span{font-size:16px!important;font-family:sans-serif!important;font-weight:700}mat-accordion.coer-tree-accordion mat-expansion-panel{background-color:var(--sidenav-inner)!important;box-shadow:none!important;border-radius:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.mat-expansion-panel-body{padding:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-accordion.coer-tree-accordion mat-expansion-panel span::selection{background-color:transparent!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header{padding:0 10px;height:48px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description{margin-right:0!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.icon-container{height:48px!important;min-width:20px!important;max-width:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-content mat-panel-description span.label-container{height:48px!important;margin-left:10px!important;display:flex!important;align-items:center!important;color:var(--sidenav-text-inner)}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator{width:10px!important;margin-left:15px!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator:after{color:var(--sidenav-text-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-sidenav-active span.mat-expansion-indicator:after{color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-active-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover{background-color:color-mix(in srgb,var(--sidenav-active-inner),white 5%)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded{background-color:var(--sidenav-inner)!important}mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover,mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header:not(.background-navigation):hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}\n"] }]
+        }] });
 
 class CoerSidenav {
-    //getter
-    get backdrop() {
-        return ['xs', 'sm', 'md'].includes(breakpointSIGNAL());
-    }
-    //getter
-    get mode() {
-        return ['xs', 'sm', 'md'].includes(breakpointSIGNAL()) ? 'over' : 'push';
-    }
-    //getter
-    get showAsideMenu() {
-        return ['xl', 'xxl'].includes(breakpointSIGNAL()) && !this.isOpen();
-    }
+    //Constructor
     constructor() {
         //Injections
         this._router = inject(Router);
-        //signals
-        this.isOpen = isMenuOpenSIGNAL;
-        this._isModalOpen = isModalOpenSIGNAL;
-        this._isLoading = isLoadingSIGNAL;
         //Elements
         this.sidenav = viewChild.required('matSidenav');
         this.menuList = viewChildren(CoerTreeAccordion);
+        //Variables
+        this._isOpen = isMenuOpenSIGNAL;
+        this._isModalOpen = isModalOpenSIGNAL;
+        this._isLoading = isLoadingSIGNAL;
         //Outputs 
         this.onMenuSelected = output();
         //computed
+        this._backdrop = computed(() => {
+            return ['mv', 'xs', 'sm', 'md'].includes(breakpointSIGNAL());
+        });
+        //computed
+        this._mode = computed(() => {
+            return ['mv', 'xs', 'sm', 'md'].includes(breakpointSIGNAL()) ? 'over' : 'push';
+        });
+        //computed
+        this._showAsideMenu = computed(() => {
+            return ['xl', 'xxl'].includes(breakpointSIGNAL()) && !this._isOpen();
+        });
+        //computed
         this._navigation = computed(() => {
             let id = 0;
             const navigation = navigationSIGNAL();
@@ -3387,47 +3378,45 @@ class CoerSidenav {
                 || (this._IsMenu(item) ? (this._IsGrid(item) ? 'fa-solid fa-grip' : 'coer-icon-bars') : '');
         };
         /** */
-        this.SetIdentityClass = (label) => {
+        this._SetIdentityClass = (label) => {
             let identity = `lv1${label}`;
             if (identity.includes(' '))
                 identity = identity.replaceAll(' ', '');
             return identity.toLowerCase();
         };
-        this.BackButtonBrowser();
-        this.isOpen.set(false);
+        this._BackButtonBrowser();
+        this._isOpen.set(false);
         Screen.Resize.subscribe({
             next: ({ breakpoint }) => {
                 breakpointSIGNAL.set(breakpoint);
-                if (this.backdrop)
+                if (this._backdrop())
                     this.Close();
             }
         });
     }
     /** */
-    async NavigateTo(selectedOption, showGridMenu = false) {
+    _NavigateTo(selectedOption) {
         let url = `${selectedOption.path}`;
         if (selectedOption.queryParams.length > 0)
             url += `?${selectedOption.queryParams}`;
-        if (showGridMenu) {
-            this._router.navigateByUrl('/loading');
-            await Tools.Sleep();
-        }
-        this._router.navigateByUrl(url);
-        //Set active link
-        this.SetActiveLink(selectedOption);
-        //Close Menu
-        if (selectedOption.level == 1) {
-            for (const menuLv1 of this.menuList()) {
-                for (const menuLv2 of menuLv1.menuList.toArray()) {
-                    menuLv2.Close();
+        Tools.Sleep().then(_ => {
+            this._router.navigateByUrl(url);
+            //Set active link
+            this.SetActiveLink(selectedOption);
+            //Close Menu
+            if (selectedOption.level == 1) {
+                for (const menuLv1 of this.menuList()) {
+                    for (const menuLv2 of menuLv1.menuList()) {
+                        menuLv2.Close();
+                    }
+                    menuLv1.Close();
                 }
-                menuLv1.Close();
             }
-        }
-        //Close Sidenav
-        if (this.mode == 'over') {
-            this.Close();
-        }
+            //Close Sidenav
+            if (this._mode() == 'over') {
+                this.Close();
+            }
+        });
     }
     /** */
     SetActiveLink(selectedOption) {
@@ -3447,7 +3436,7 @@ class CoerSidenav {
             const levels = selectedOption.tree.length;
             for (let i = 0; i < levels; i++) {
                 for (const element of collection) {
-                    const identityClass = this.GetIdentityClass(selectedOption.tree);
+                    const identityClass = this._GetIdentityClass(selectedOption.tree);
                     if (element.classList.contains(identityClass)) {
                         element.classList.add('active-link');
                     }
@@ -3459,15 +3448,15 @@ class CoerSidenav {
     /** */
     Open(event, item = null) {
         event.stopPropagation();
-        if (!this.isOpen()) {
-            this.isOpen.set(true);
+        if (!this._isOpen()) {
+            this._isOpen.set(true);
             this.sidenav().open();
         }
     }
     /** */
     Close() {
-        if (this.isOpen()) {
-            this.isOpen.set(false);
+        if (this._isOpen()) {
+            this._isOpen.set(false);
             this.sidenav().close();
         }
     }
@@ -3476,11 +3465,11 @@ class CoerSidenav {
         this.sidenav().toggle();
     }
     /** */
-    MenuSelected(selectedMenu) {
+    _MenuSelected(selectedMenu) {
         if (selectedMenu.level == 1) {
             for (const menuLv1 of this.menuList()) {
-                if (menuLv1.item.label != selectedMenu.label) {
-                    for (const menuLv2 of menuLv1.menuList.toArray()) {
+                if (menuLv1.item().label != selectedMenu.label) {
+                    for (const menuLv2 of menuLv1.menuList()) {
                         menuLv2.Close();
                     }
                     menuLv1.Close();
@@ -3490,7 +3479,7 @@ class CoerSidenav {
         this.onMenuSelected.emit(menuSelectedSIGNAL());
     }
     /** */
-    ShowGridMenu(menuOption, menu) {
+    _ShowGridMenu(menuOption, menu) {
         menuSelectedSIGNAL.set({
             level: 1,
             label: menu.label,
@@ -3500,10 +3489,10 @@ class CoerSidenav {
             items: menu.items,
             tree: []
         });
-        this.NavigateTo(menuOption, true);
+        this._NavigateTo(menuOption);
     }
     /** */
-    GetIdentityClass(tree) {
+    _GetIdentityClass(tree) {
         let identity = '';
         for (let i = 0; i < tree.length; i++) {
             identity += `lv${i + 1}${tree[i].label}-`;
@@ -3515,7 +3504,7 @@ class CoerSidenav {
         return identity.toLowerCase();
     }
     /** */
-    BackButtonBrowser() {
+    _BackButtonBrowser() {
         const QUERY_SELECTOR = 'coer-menu-option[ng-reflect-path="[path]"] mat-nav-list.coer-menu-option';
         Screen.BackButtonBrowser.subscribe(toPath => {
             if (toPath.includes('/#/'))
@@ -3550,25 +3539,28 @@ class CoerSidenav {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n    <mat-drawer\r\n        #matSidenav\r\n        [opened]=\"isOpen()\"\r\n        (opened)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\r\n        [mode]=\"mode\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {\r\n                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n\r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"NavigateTo($event, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"fa-solid fa-sync fa-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!isOpen() && showAsideMenu) }\">\r\n        <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSidenav, isStandalone: false, selector: "coer-sidenav", outputs: { onMenuSelected: "onMenuSelected" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["matSidenav"], descendants: true, isSignal: true }, { propertyName: "menuList", predicate: CoerTreeAccordion, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer\r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_isOpen.set(true)\"\r\n        (closed)=\"_isOpen.set(false)\"\r\n        [mode]=\"_mode()\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {\r\n                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (clickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n\r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (clickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2$8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i2$8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: CoerMenuOption, selector: "coer-menu-option", inputs: ["level", "label", "icon", "path", "tree"], outputs: ["clickMenuOption"] }, { kind: "component", type: CoerTreeAccordion, selector: "coer-tree-accordion", inputs: ["level", "item", "tree", "showTree"], outputs: ["showGridMenu", "clickMenuOption", "clickMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSidenav, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"backdrop\">\r\n    <mat-drawer\r\n        #matSidenav\r\n        [opened]=\"isOpen()\"\r\n        (opened)=\"isOpen.set(true)\"\r\n        (closed)=\"isOpen.set(false)\"\r\n        [mode]=\"mode\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {\r\n                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (clickMenuOption)=\"ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n\r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"NavigateTo($event, true)\"\r\n                                (clickMenuOption)=\"NavigateTo($event, false)\"\r\n                                (clickMenu)=\"MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"fa-solid fa-sync fa-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!isOpen() && showAsideMenu) }\">\r\n        <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !showAsideMenu }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"fa-solid fa-sync fa-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
+            args: [{ selector: 'coer-sidenav', standalone: false, template: "<mat-drawer-container [hasBackdrop]=\"_backdrop()\">\r\n    <mat-drawer\r\n        #matSidenav\r\n        [opened]=\"_isOpen()\"\r\n        (opened)=\"_isOpen.set(true)\"\r\n        (closed)=\"_isOpen.set(false)\"\r\n        [mode]=\"_mode()\"\r\n        [class]=\"_isModalOpen() ? 'z-index-1' : 'z-index-3'\">\r\n\r\n        @if(!_isLoading()) {\r\n            @if(_navigation().length > 0) {\r\n                <div *ngFor=\"let item of _navigation()\">\r\n                    <!-- Menu -->\r\n                    <div *ngIf=\"_IsMenu(item); else OptionMenu\">\r\n                        @if(_IsGrid(item)) {\r\n                            <coer-menu-option\r\n                                [label]=\"item.label\"\r\n                                [icon]=\"_GetIcon(item)\"\r\n                                path=\"menu\"\r\n                                (clickMenuOption)=\"_ShowGridMenu($event, item)\"\r\n                            ></coer-menu-option>\r\n                        }\r\n\r\n                        @else {\r\n                            <coer-tree-accordion\r\n                                [item]=\"item\"\r\n                                (showGridMenu)=\"_NavigateTo($event)\"\r\n                                (clickMenuOption)=\"_NavigateTo($event)\"\r\n                                (clickMenu)=\"_MenuSelected($event)\"\r\n                            ></coer-tree-accordion>\r\n                        }\r\n                    </div>\r\n        \r\n                    <!-- Option Menu -->\r\n                    <ng-template #OptionMenu>\r\n                        <coer-menu-option\r\n                            [label]=\"item.label\"\r\n                            [icon]=\"item?.icon\"\r\n                            [path]=\"item?.path\"\r\n                            (clickMenuOption)=\"_NavigateTo($event)\"\r\n                        ></coer-menu-option>\r\n                    </ng-template>\r\n        \r\n                    <div class=\"separator\"></div>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <coer-menu-option label=\"Empty\"></coer-menu-option>\r\n            }\r\n        }\r\n\r\n        @else {\r\n            <coer-menu-option\r\n                label=\"LOADING\"\r\n                icon=\"icon-arrows-sync animation-spin\"\r\n            ></coer-menu-option>\r\n        }\r\n\r\n        <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n    </mat-drawer>\r\n\r\n    <!-- Main Screen -->\r\n    <mat-drawer-content [ngClass]=\"{ 'margin-left-40px': (!_isOpen() && _showAsideMenu()) }\">\r\n        <aside [ngClass]=\"{ 'side-nav': true, 'd-none': !_showAsideMenu() }\" (click)=\"Open($event)\">\r\n            @if(_isLoading()) {\r\n                <span class=\"icon-container\">\r\n                    <i class=\"icon-arrows-sync animation-spin\"></i>\r\n                </span>\r\n            }\r\n\r\n            @else {\r\n                @for (item of _navigation(); track item.id) {\r\n                    <div (click)=\"Open($event, item)\">\r\n                        <span [class]=\"'icon-container ' + _SetIdentityClass(item.label)\">\r\n                            <i [class]=\"_GetIcon(item)\"></i>\r\n                        </span>\r\n                    </div>\r\n                } \r\n            }\r\n\r\n            <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n        </aside> \r\n        <ng-content></ng-content>\r\n    </mat-drawer-content>\r\n</mat-drawer-container>", styles: ["mat-drawer-container{height:calc(100vh - 45px)!important}mat-drawer-container .margin-left-40px{margin-left:40px!important}mat-drawer-container mat-drawer{width:auto;min-width:200px;background-color:var(--sidenav-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar{width:1px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb{background-color:var(--secondary-inner)!important;border-radius:5px!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-inner)!important}mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar-thumb:active{background-color:var(--background-inner)!important}mat-drawer-container mat-drawer i{font-size:16px!important}mat-drawer-container mat-drawer div.separator{border:.5px solid rgba(245,245,245,.041)!important}mat-drawer-container mat-drawer-content{margin-right:0!important;background-color:var(--background-inner)!important}mat-drawer-container mat-drawer-content aside.side-nav{background-color:var(--sidenav-inner)!important;width:40px!important;position:fixed!important;left:0!important;top:45px!important;bottom:0!important;cursor:pointer!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container{width:100%!important;height:49.6px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;border-bottom:1px solid rgba(245,245,245,.041)!important;color:var(--sidenav-text-inner)}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover{background-color:color-mix(in srgb,var(--sidenav-inner),white 5%)!important}mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link{color:var(--sidenav-active-inner)!important}mat-drawer-container div.backdrop{position:absolute!important;inset:0!important;background-color:#0000005b!important;z-index:1500!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerDropdown extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
-        //Component Value
-        this._value = null;
-        //Variables 
+        super();
+        //Elements
         this._coerTextBox = viewChild.required('coerTextBox');
+        //Variables 
+        this._value = null;
         this._id = Tools.GetGuid('coer-dropdown');
         this._index = signal(-1);
         this._isOpen = signal(false);
         this._isOverMenu = signal(false);
+        //Inputs
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.color = input('default');
         this.type = input('filled');
@@ -3623,30 +3615,46 @@ class CoerDropdown extends ControlValue {
                     return item?.path;
                 if (Tools.IsNotOnlyWhiteSpace(item?.url))
                     return item?.url;
+                if (Tools.IsNotOnlyWhiteSpace(item?.route))
+                    return item?.route;
                 if (Tools.IsNotOnlyWhiteSpace(item?.link))
                     return item?.link;
             }
             return null;
         };
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : null);
+        });
     }
-    //Inputs
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = null;
-        this.SetValue(value);
-    }
-    async ngAfterViewInit() {
-        await Tools.Sleep();
-        this._SetEvents();
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(() => {
+            //Container
+            this._container = document.getElementById(`${this._id}-container`);
+            this._container.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._container.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            //DropDown
+            this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
+            this._dropDownMenu.addEventListener('mouseenter', () => {
+                this._isOverMenu.set(true);
+            });
+            this._dropDownMenu.addEventListener('mouseleave', () => {
+                this._isOverMenu.set(false);
+            });
+            //Document
+            document.addEventListener('click', () => {
+                if (!this._isOverMenu())
+                    this.Close();
+            });
+        });
     }
-    //getter
-    get value() {
-        const value = Tools.BreakReference(this._value);
-        if (Tools.IsNotNull(value?.index))
-            delete value.index;
-        if (Tools.IsNotNull(value?.indexRow))
-            delete value.indexRow;
-        return value;
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
     }
     //getter
     get _label() {
@@ -3664,7 +3672,7 @@ class CoerDropdown extends ControlValue {
             && Tools.IsNotOnlyWhiteSpace(this.value?.icon)
             ? this.value?.icon || '' : '';
     }
-    /** */
+    //ControlValueAccessor
     SetValue(_value) {
         if (_value === undefined)
             _value = null;
@@ -3675,39 +3683,13 @@ class CoerDropdown extends ControlValue {
             this._UpdateValue(_value);
         this._value = _value;
     }
-    /** */
+    //ControlValueAccessor
     writeValue(_value) {
         if (_value === undefined)
             _value = null;
         this._value = _value;
     }
     /** */
-    _SetEvents() {
-        Tools.Sleep().then(() => {
-            //Container
-            this._container = document.getElementById(`${this._id}-container`);
-            this._container.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._container.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
-            //DropDown
-            this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-            this._dropDownMenu.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._dropDownMenu.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
-            //Document
-            document.addEventListener('click', () => {
-                if (!this._isOverMenu())
-                    this.Close();
-            });
-        });
-    }
-    /** */
     _SelectItem(item) {
         if (Tools.IsNotNull(item) && this._isEnable()) {
             const _item = Tools.BreakReference(this.dataSource()[item.index]);
@@ -3763,18 +3745,19 @@ class CoerDropdown extends ControlValue {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"_icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"_Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: width(),\r\n                minWidth: minWidth()\r\n            }\">\r\n\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <a [routerLink]=\"_GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (_GetIcon(item).length > 0) {\r\n                                <i [class]=\"_GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ _GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: ["div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"_icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"_Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: width(),\r\n                minWidth: minWidth()\r\n            }\">\r\n\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <a [routerLink]=\"_GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (_GetIcon(item).length > 0) {\r\n                                <i [class]=\"_GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ _GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: ["div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'coer-dropdown', providers: [CONTROL_VALUE(CoerDropdown)], standalone: false, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"_icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"_Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: width(),\r\n                minWidth: minWidth()\r\n            }\">\r\n\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <a [routerLink]=\"_GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (_GetIcon(item).length > 0) {\r\n                                <i [class]=\"_GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ _GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: ["div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerTab {
+    //Constructor
     constructor() {
+        //Content
+        this.contentRef = contentChildren(CoerRefDirective);
         //Elements
         this._matTabGroup = viewChild.required('matTabGroup');
         //Variables
@@ -3785,109 +3768,78 @@ class CoerTab {
         this.height = input('auto');
         this.minHeight = input('300px');
         this.maxHeight = input('auto');
+        this.selectedIndex = input(0);
+        this.alignTabs = input('start');
+        this.stretchTabs = input(false);
         //Outputs
         this.onSelectedTab = output();
         //getter
+        this._contentList = computed(() => {
+            return this.contentRef();
+        });
+        //computed
         this.selectedTab = computed(() => {
-            const index = this._selectedIndex();
-            return this._contentList[index];
+            return this._contentList()[this._selectedIndex()];
         });
-    }
-    set selectedIndex(value) {
-        if (Tools.IsNotNull(value)) {
-            this._selectedIndex.set(value);
-        }
-    }
-    set alignTabs(value) {
-        if (Tools.IsNotNull(this._htmlElement)) {
-            if (Tools.IsNotNull(value)) {
-                this._htmlElement.removeAttribute('mat-align-tabs');
-                Tools.Sleep().then(() => {
-                    this._htmlElement.setAttribute('mat-align-tabs', value);
-                });
+        /** */
+        this._SetToolTip = (tab) => {
+            return Tools.IsNotOnlyWhiteSpace(tab.tooltip())
+                ? Strings.CleanUpBlanks(tab.tooltip()) : '';
+        };
+        this._effectSelectedIndex = effect(() => {
+            if (Tools.IsNotNull(this.selectedIndex())) {
+                this._selectedIndex.set(this.selectedIndex());
             }
-        }
-        else
-            Tools.Sleep().then(() => this.alignTabs = value);
-    }
-    //getter
-    get _contentList() {
-        return Array.from(this.contentRef._results);
+        });
+        this._effectAlignTabs = effect(() => {
+            Tools.Sleep().then(() => {
+                if (Tools.IsNotNull(this._htmlElement)) {
+                    if (Tools.IsNotNull(this.alignTabs())) {
+                        this._htmlElement.removeAttribute('mat-align-tabs');
+                        Tools.Sleep().then(() => {
+                            this._htmlElement.setAttribute('mat-align-tabs', this.alignTabs());
+                        });
+                    }
+                }
+            });
+        });
     }
+    //AfterViewInit
     ngAfterViewInit() {
         this._htmlElement = this._matTabGroup()._elementRef.nativeElement;
     }
+    //OnDestroy
     ngOnDestroy() {
-        for (const _tooltip of this._tooltipList) {
-            _tooltip.tooltip?.dispose();
-        }
+        this._effectSelectedIndex?.destroy();
+        this._effectAlignTabs?.destroy();
     }
     /** */
     _SelectedIndexChange(selectedIndex) {
         this._selectedIndex.set(selectedIndex);
-        this.onSelectedTab.emit(this._contentList[selectedIndex]);
+        this.onSelectedTab.emit(this._contentList()[selectedIndex]);
     }
     /** */
     _GetTitle(tab) {
-        const ref = this._contentList.find(x => x.coerRef() == tab.coerRef());
+        const ref = this._contentList().find(x => x.coerRef() == tab.coerRef());
         return (ref.title().length > 0) ? ref.title() : ref.coerRef();
     }
     /** */
     _GetIcon(tab) {
-        return this._contentList.find(x => x.coerRef() == tab.coerRef()).icon();
+        return this._contentList().find(x => x.coerRef() == tab.coerRef()).icon();
     }
     /** */
     SelectTabBy(callback) {
-        const index = this._contentList.findIndex(callback);
+        const index = this._contentList().findIndex(callback);
         if (index >= 0)
             this._selectedIndex.set(index);
     }
-    /** */
-    _SetToolTip(tab) {
-        const id = `${this._id}-${tab.coerRef()}`;
-        if (!this._tooltipList.some(x => x.id == id) && tab.tooltip().length > 0) {
-            this._tooltipList.push({ id });
-            Tools.Sleep().then(() => {
-                const htmlElement = document.getElementById(id);
-                if (htmlElement) {
-                    const tooltip = new Tooltip(htmlElement, {
-                        html: true,
-                        title: tab.tooltip(),
-                        placement: 'top'
-                    });
-                    htmlElement.addEventListener('mouseleave', () => {
-                        if (htmlElement)
-                            tooltip.hide();
-                    });
-                    const index = this._tooltipList.findIndex(x => x.id == id);
-                    if (index >= 0)
-                        this._tooltipList[index].tooltip = tooltip;
-                }
-            });
-        }
-        return id;
-    }
-    /** */
-    _RemoveTooltip(element) {
-        const id = element.getAttribute('id');
-        const index = this._tooltipList.findIndex(x => x.id == id);
-        if (index >= 0)
-            this._tooltipList.splice(index, 1);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$9.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$3.LifeCycleDirective, selector: "[lifeCycle]", outputs: ["onInit", "afterViewInit", "onReady", "onDestroy"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                    \r\n                    <div class=\"tab-content\"\r\n                        [ngStyle]=\"{\r\n                            'height': height(),\r\n                            'min-height': minHeight(),\r\n                            'max-height': maxHeight()\r\n                        }\">                             \r\n                         \r\n                        <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                    </div>                    \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList; track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"_SetToolTip(tab)\" class=\"tab\" lifeCycle (onDestroy)=\"_RemoveTooltip($event)\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
-        }], propDecorators: { contentRef: [{
-                type: ContentChildren,
-                args: [CoerRefDirective]
-            }], selectedIndex: [{
-                type: Input
-            }], alignTabs: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                    \r\n                    <div class=\"tab-content\"\r\n                        [ngStyle]=\"{\r\n                            'height': height(),\r\n                            'min-height': minHeight(),\r\n                            'max-height': maxHeight()\r\n                        }\">                             \r\n                         \r\n                        <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                    </div>                    \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CoerTextarea extends ControlValue {
     constructor() {
@@ -3928,11 +3880,11 @@ class CoerTextarea extends ControlValue {
             return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
         });
         //computed
-        this.floatLabel = computed(() => {
+        this._floatLabel = computed(() => {
             return this.label() == '' ? 'always' : 'auto';
         });
         //computed
-        this.paddingRight = computed(() => {
+        this._paddingRight = computed(() => {
             return this.isInvalid() || this.isValid()
                 ? '18px' : '0px';
         });
@@ -3942,14 +3894,11 @@ class CoerTextarea extends ControlValue {
             value = '';
         this.SetValue(value);
     }
-    ngOnInit() {
+    //AfterViewInit
+    ngAfterViewInit() {
         this._SetEvents();
     }
     //getter
-    get value() {
-        return Tools.IsNotNull(this._value) ? String(this._value) : '';
-    }
-    //getter
     get footer() {
         return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
     }
@@ -4017,11 +3966,11 @@ class CoerTextarea extends ControlValue {
         this.Focus(false, delay);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-textarea\">\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        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': paddingRight(),\r\n                'text-align': textPosition(),\r\n                'resize': (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height': height()\r\n            }\"></textarea>\r\n\r\n        @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(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea 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;padding:0!important}div.coer-textarea 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-textarea 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-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea 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-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea 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-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!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: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-textarea\">\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        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'default',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition(),\r\n                'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height'       : height()\r\n            }\"></textarea>\r\n\r\n        @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(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea 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;padding:0!important}div.coer-textarea 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-textarea 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-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea 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-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea 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-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-textarea\">\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        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': paddingRight(),\r\n                'text-align': textPosition(),\r\n                'resize': (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height': height()\r\n            }\"></textarea>\r\n\r\n        @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(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea 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;padding:0!important}div.coer-textarea 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-textarea 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-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea 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-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea 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-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
+            args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-textarea\">\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        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'default',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition(),\r\n                'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height'       : height()\r\n            }\"></textarea>\r\n\r\n        @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(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea 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;padding:0!important}div.coer-textarea 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-textarea 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-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea 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-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea 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-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -4029,14 +3978,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 class CoerToolbar {
     constructor() {
         //variables
-        this.isReadyPage = false;
-        this.isLoading = false;
-        this.awaitSignals = false;
+        this._isReadyPage = false;
+        this._isLoading = false;
+        this._awaitSignals = false;
         this._isModalOpen = isModalOpenSIGNAL;
         //appSettings
-        this.appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
-        this.appLogoPath = Tools.AvoidNull(appSettings?.appInfo?.logoPath, 'string');
-        this.appLogoWidth = Tools.AvoidNull(appSettings?.appInfo?.logoWidth, 'string');
+        this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
+        this._appLogoPath = Tools.AvoidNull(appSettings?.appInfo?.logoPath, 'string');
+        this._appLogoWidth = Tools.AvoidNull(appSettings?.appInfo?.logoWidth, 'string');
         //Inputs
         this.user = input(null);
         this.image = input(null);
@@ -4081,25 +4030,26 @@ class CoerToolbar {
         };
         /** */
         this.GetElementWidth = (element) => {
-            return this.isReadyPage
+            return this._isReadyPage
                 ? HTMLElements.GetElementWidth(element, 48)
                 : '0px';
         };
     }
+    //AfterViewInit
     ngAfterViewInit() {
-        Tools.Sleep(1000).then(() => this.isReadyPage = true);
+        Tools.Sleep(1000).then(() => this._isReadyPage = true);
     }
     /** */
     ToogleSideNave() {
-        this.isLoading = true;
+        this._isLoading = true;
         this.onClickMenu.emit();
         isMenuOpenSIGNAL.set(!isMenuOpenSIGNAL());
-        Tools.Sleep(500, 'ToogleSideNave').then(() => this.isLoading = false);
+        Tools.Sleep(500, 'ToogleSideNave').then(() => this._isLoading = false);
     }
     //getter
     get showLogo() {
-        return (Tools.IsNull(appSettings?.appInfo?.showLogo) && this.appLogoPath.length > 0)
-            || (appSettings?.appInfo?.showLogo && this.appLogoPath.length > 0);
+        return (Tools.IsNull(appSettings?.appInfo?.showLogo) && this._appLogoPath.length > 0)
+            || (appSettings?.appInfo?.showLogo && this._appLogoPath.length > 0);
     }
     //getter
     get showUser() {
@@ -4112,11 +4062,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=\"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" }] }); }
+    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$9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: CoerDropdown, selector: "coer-dropdown", inputs: ["id", "value", "label", "color", "type", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onSelected", "onUnselect"] }, { kind: "pipe", type: 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=\"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"] }]
+            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 {
@@ -4127,6 +4077,7 @@ class ComponentsModule {
             CoerCheckbox,
             CoerDateBox,
             CoerFilebox,
+            CoerFileboxImage,
             CoerForm,
             CoerGrid,
             CoerList,
@@ -4165,6 +4116,7 @@ class ComponentsModule {
             MatNativeDateModule,
             MatSlideToggleModule,
             MatToolbarModule,
+            MatTooltipModule,
             MatTabsModule,
             DirectivesModule,
             PipesModule], exports: [CoerAccordion,
@@ -4207,6 +4159,7 @@ class ComponentsModule {
             MatNativeDateModule,
             MatSlideToggleModule,
             MatToolbarModule,
+            MatTooltipModule,
             MatTabsModule,
             DirectivesModule,
             PipesModule] }); }
@@ -4237,6 +4190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         MatNativeDateModule,
                         MatSlideToggleModule,
                         MatToolbarModule,
+                        MatTooltipModule,
                         MatTabsModule,
                         DirectivesModule,
                         PipesModule
@@ -4248,6 +4202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         CoerCheckbox,
                         CoerDateBox,
                         CoerFilebox,
+                        CoerFileboxImage,
                         CoerForm,
                         CoerGrid,
                         CoerList,