coer-elements 0.0.22 → 0.0.24

package/fesm2022/coer-elements-components.mjs

@@ -0,0 +1,2718 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, computed, Component, Input, Output, output, ContentChildren, inject, viewChild, signal, viewChildren, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$1 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';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2$3 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i2$4 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { Tools, ControlValue, CONTROL_VALUE, Screen, CoerAlert, Files, DateTime, Menu } from 'coer-elements/tools';
+import { Tooltip, Modal } from 'bootstrap';
+import { isModalOpenSIGNAL } from 'coer-elements/signals';
+
+class CoerButton {
+    constructor() {
+        //Variables
+        this._id = Tools.GetGuid('coer-button');
+        this._tooltip = '';
+        //Inputs
+        this.id = '';
+        this.color = input('default');
+        this.type = input('filled');
+        this.icon = input('');
+        this.iconPosition = input('left');
+        this.animation = input(false);
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        this.isInvisible = input(false);
+        this.width = input('125px');
+        this.minWidth = input('30px');
+        this.height = input('40px');
+        this.minHeight = input('30px');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.path = input([]);
+        this.tooltipPosition = input('left');
+        //Outputs
+        this.onClick = new EventEmitter();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
+        });
+        //computed
+        this._icon = computed(() => {
+            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 'fa-solid fa-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';
+                default: return '';
+            }
+        });
+    }
+    set tooltip(value) {
+        this._tooltip = value;
+        if (value && this._tooltipElement) {
+            this._tooltipElement.setContent({ '.tooltip-inner': this._tooltip });
+        }
+    }
+    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();
+                });
+            }
+        });
+    }
+    SetToolTip() {
+        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
+                });
+            }
+        });
+    }
+    /** */
+    Click(event) {
+        if (this._isEnable()) {
+            this.onClick.emit(event);
+        }
+        this.Blur();
+    }
+    /** */
+    Focus(timeout = 0) {
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable())
+                this._element.focus();
+        });
+    }
+    /** */
+    Blur() {
+        Tools.Sleep().then(() => {
+            this._element.blur();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerButton, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, 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 }, 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 }, 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 }, path: { classPropertyName: "path", publicName: "path", 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, 'invisible': isInvisible() }\">\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() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\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($event)\"\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                    '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'),\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                    'height': height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    <span *ngIf=\"(iconPosition() == 'left')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n\r\n                    <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    <span *ngIf=\"(iconPosition() == 'right')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\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                    (click)=\"Click($event)\"\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                        '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                    (click)=\"Click($event)\"\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                        '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                    (click)=\"Click($event)\"\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                        '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: ["*{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}.text-blue{color:#0d6efd!important}.text-blue-bold{color:#0d6efd!important;font-weight:700!important}.background-blue{background-color:#0d6efd!important}.background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}.border-blue{border-color:#0d6efd!important}.text-gray{color:#6c757d!important}.text-gray-bold{color:#6c757d!important;font-weight:700!important}.background-gray{background-color:#6c757d!important}.background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}.border-gray{border-color:#6c757d!important}.text-green{color:#198754!important}.text-green-bold{color:#198754!important;font-weight:700!important}.background-green{background-color:#198754!important}.background-border-green{background-color:#198754!important;border-color:#198754!important}.border-green{border-color:#198754!important}.text-yellow{color:#ffc107!important}.text-yellow-bold{color:#ffc107!important;font-weight:700!important}.background-yellow{background-color:#ffc107!important}.background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}.border-yellow{border-color:#ffc107!important}.text-red{color:#dc3545!important}.text-red-bold{color:#dc3545!important;font-weight:700!important}.background-red{background-color:#dc3545!important}.background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}.border-red{border-color:#dc3545!important}.text-white{color:#f5f5f5!important}.text-white-bold{color:#f5f5f5!important;font-weight:700!important}.background-white{background-color:#f5f5f5!important}.background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}.border-white{border-color:#f5f5f5!important}.text-black{color:#252525!important}.text-black-bold{color:#252525!important;font-weight:700!important}.background-black{background-color:#252525!important}.background-border-black{background-color:#252525!important;border-color:#252525!important}.border-black{border-color:#252525!important}.text-orange{color:#fd6031!important}.text-orange-bold{color:#fd6031!important;font-weight:700!important}.background-orange{background-color:#fd6031!important}.background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}.border-orange{border-color:#fd6031!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!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}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-overflow:ellipsis!important;overflow:hidden!important}div.coer-button button.primary-filled{background-color:#0d6efd!important;color:#f5f5f5!important}div.coer-button button.secondary-filled{background-color:#6c757d!important;color:#f5f5f5!important}div.coer-button button.success-filled{background-color:#198754!important;color:#f5f5f5!important}div.coer-button button.warning-filled{background-color:#ffc107!important;color:#252525!important}div.coer-button button.danger-filled{background-color:#dc3545!important;color:#f5f5f5!important}div.coer-button button.navigation-filled{background-color:#fd6031!important;color:#f5f5f5!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid #0d6efd!important;color:#0d6efd!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid #6c757d!important;color:#6c757d!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid #198754!important;color:#198754!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid #ffc107!important;color:#ffc107!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid #dc3545!important;color:#dc3545!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid #fd6031!important;color:#fd6031!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,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,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,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,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.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px #0d6efd!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px #6c757d!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px #198754!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px #ffc107!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px #dc3545!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px #fd6031!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:#fff!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{vertical-align:middle!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-tool-bar coer-button *{color:#fd6031!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.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-button', template: "<div [ngClass]=\"{ 'coer-button': true, 'invisible': isInvisible() }\">\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() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\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($event)\"\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                    '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'),\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                    'height': height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    <span *ngIf=\"(iconPosition() == 'left')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n\r\n                    <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    <span *ngIf=\"(iconPosition() == 'right')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\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                    (click)=\"Click($event)\"\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                        '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                    (click)=\"Click($event)\"\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                        '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                    (click)=\"Click($event)\"\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                        '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: ["*{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}.text-blue{color:#0d6efd!important}.text-blue-bold{color:#0d6efd!important;font-weight:700!important}.background-blue{background-color:#0d6efd!important}.background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}.border-blue{border-color:#0d6efd!important}.text-gray{color:#6c757d!important}.text-gray-bold{color:#6c757d!important;font-weight:700!important}.background-gray{background-color:#6c757d!important}.background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}.border-gray{border-color:#6c757d!important}.text-green{color:#198754!important}.text-green-bold{color:#198754!important;font-weight:700!important}.background-green{background-color:#198754!important}.background-border-green{background-color:#198754!important;border-color:#198754!important}.border-green{border-color:#198754!important}.text-yellow{color:#ffc107!important}.text-yellow-bold{color:#ffc107!important;font-weight:700!important}.background-yellow{background-color:#ffc107!important}.background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}.border-yellow{border-color:#ffc107!important}.text-red{color:#dc3545!important}.text-red-bold{color:#dc3545!important;font-weight:700!important}.background-red{background-color:#dc3545!important}.background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}.border-red{border-color:#dc3545!important}.text-white{color:#f5f5f5!important}.text-white-bold{color:#f5f5f5!important;font-weight:700!important}.background-white{background-color:#f5f5f5!important}.background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}.border-white{border-color:#f5f5f5!important}.text-black{color:#252525!important}.text-black-bold{color:#252525!important;font-weight:700!important}.background-black{background-color:#252525!important}.background-border-black{background-color:#252525!important;border-color:#252525!important}.border-black{border-color:#252525!important}.text-orange{color:#fd6031!important}.text-orange-bold{color:#fd6031!important;font-weight:700!important}.background-orange{background-color:#fd6031!important}.background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}.border-orange{border-color:#fd6031!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!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}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-overflow:ellipsis!important;overflow:hidden!important}div.coer-button button.primary-filled{background-color:#0d6efd!important;color:#f5f5f5!important}div.coer-button button.secondary-filled{background-color:#6c757d!important;color:#f5f5f5!important}div.coer-button button.success-filled{background-color:#198754!important;color:#f5f5f5!important}div.coer-button button.warning-filled{background-color:#ffc107!important;color:#252525!important}div.coer-button button.danger-filled{background-color:#dc3545!important;color:#f5f5f5!important}div.coer-button button.navigation-filled{background-color:#fd6031!important;color:#f5f5f5!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid #0d6efd!important;color:#0d6efd!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid #6c757d!important;color:#6c757d!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid #198754!important;color:#198754!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid #ffc107!important;color:#ffc107!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid #dc3545!important;color:#dc3545!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid #fd6031!important;color:#fd6031!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,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,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,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,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.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px #0d6efd!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px #6c757d!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px #198754!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px #ffc107!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px #dc3545!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px #fd6031!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:#fff!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{vertical-align:middle!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-tool-bar coer-button *{color:#fd6031!important}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class CoerCheckbox extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Variables
+        this._value = false;
+        this._id = Tools.GetGuid('coer-checkbox');
+        this._isLoading = true;
+        this.id = input('');
+        this.label = input('');
+        this.labelPosition = input('after');
+        this.isDisabled = input(false);
+        this.isLoading = input(false);
+        this.isInvisible = input(false);
+        this.ignoreModel = input(false);
+        //Outputs
+        this.onChange = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
+        });
+    }
+    //Inputs
+    set value(value) {
+        if (Tools.IsNull(value))
+            value = false;
+        this.SetValue(value);
+    }
+    //getter
+    get value() {
+        return this._value;
+    }
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => this._isLoading = false);
+    }
+    //ControlValueAccessor
+    SetValue(value) {
+        if (Tools.IsNotNull(value)) {
+            if (!this.ignoreModel()) {
+                this._UpdateValue(value);
+            }
+            this._value = value;
+            if (!this._isLoading && this._isEnable()) {
+                this.onChange.emit(value);
+            }
+        }
+    }
+    //ControlValueAccessor
+    writeValue(value) {
+        if (Tools.IsNotNull(value)) {
+            this._value = value;
+            if (!this._isLoading && this._isEnable()) {
+                this.onChange.emit(value);
+            }
+        }
+    }
+    /** */
+    Check() {
+        if (!this._isLoading && this._isEnable()) {
+            this.SetValue(true);
+        }
+    }
+    /** */
+    Uncheck() {
+        if (!this._isLoading && this._isEnable()) {
+            this.SetValue(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CoerCheckbox, 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 }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, ignoreModel: { classPropertyName: "ignoreModel", publicName: "ignoreModel", 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-checkbox .text-blue{color:#0d6efd!important}div.coer-checkbox .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-checkbox .background-blue{background-color:#0d6efd!important}div.coer-checkbox .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-checkbox .border-blue{border-color:#0d6efd!important}div.coer-checkbox .text-gray{color:#6c757d!important}div.coer-checkbox .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-checkbox .background-gray{background-color:#6c757d!important}div.coer-checkbox .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-checkbox .border-gray{border-color:#6c757d!important}div.coer-checkbox .text-green{color:#198754!important}div.coer-checkbox .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-checkbox .background-green{background-color:#198754!important}div.coer-checkbox .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-checkbox .border-green{border-color:#198754!important}div.coer-checkbox .text-yellow{color:#ffc107!important}div.coer-checkbox .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-checkbox .background-yellow{background-color:#ffc107!important}div.coer-checkbox .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-checkbox .border-yellow{border-color:#ffc107!important}div.coer-checkbox .text-red{color:#dc3545!important}div.coer-checkbox .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-checkbox .background-red{background-color:#dc3545!important}div.coer-checkbox .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-checkbox .border-red{border-color:#dc3545!important}div.coer-checkbox .text-white{color:#f5f5f5!important}div.coer-checkbox .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-checkbox .background-white{background-color:#f5f5f5!important}div.coer-checkbox .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-checkbox .border-white{border-color:#f5f5f5!important}div.coer-checkbox .text-black{color:#252525!important}div.coer-checkbox .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-checkbox .background-black{background-color:#252525!important}div.coer-checkbox .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-checkbox .border-black{border-color:#252525!important}div.coer-checkbox .text-orange{color:#fd6031!important}div.coer-checkbox .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-checkbox .background-orange{background-color:#fd6031!important}div.coer-checkbox .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-checkbox .border-orange{border-color:#fd6031!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:#f5f5f5!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:#fd6031!important;border-color:#fd6031!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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-checkbox', providers: [CONTROL_VALUE(CoerCheckbox)], 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-checkbox .text-blue{color:#0d6efd!important}div.coer-checkbox .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-checkbox .background-blue{background-color:#0d6efd!important}div.coer-checkbox .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-checkbox .border-blue{border-color:#0d6efd!important}div.coer-checkbox .text-gray{color:#6c757d!important}div.coer-checkbox .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-checkbox .background-gray{background-color:#6c757d!important}div.coer-checkbox .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-checkbox .border-gray{border-color:#6c757d!important}div.coer-checkbox .text-green{color:#198754!important}div.coer-checkbox .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-checkbox .background-green{background-color:#198754!important}div.coer-checkbox .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-checkbox .border-green{border-color:#198754!important}div.coer-checkbox .text-yellow{color:#ffc107!important}div.coer-checkbox .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-checkbox .background-yellow{background-color:#ffc107!important}div.coer-checkbox .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-checkbox .border-yellow{border-color:#ffc107!important}div.coer-checkbox .text-red{color:#dc3545!important}div.coer-checkbox .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-checkbox .background-red{background-color:#dc3545!important}div.coer-checkbox .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-checkbox .border-red{border-color:#dc3545!important}div.coer-checkbox .text-white{color:#f5f5f5!important}div.coer-checkbox .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-checkbox .background-white{background-color:#f5f5f5!important}div.coer-checkbox .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-checkbox .border-white{border-color:#f5f5f5!important}div.coer-checkbox .text-black{color:#252525!important}div.coer-checkbox .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-checkbox .background-black{background-color:#252525!important}div.coer-checkbox .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-checkbox .border-black{border-color:#252525!important}div.coer-checkbox .text-orange{color:#fd6031!important}div.coer-checkbox .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-checkbox .background-orange{background-color:#fd6031!important}div.coer-checkbox .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-checkbox .border-orange{border-color:#fd6031!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:#f5f5f5!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:#fd6031!important;border-color:#fd6031!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
+            }] } });
+
+class CoerModal {
+    constructor() {
+        //Variables
+        this._id = Tools.GetGuid('coer-modal');
+        this._isOpen = false;
+        this._isModalOpen = isModalOpenSIGNAL;
+        this.windowWidth = Screen.WINDOW_WIDTH;
+        //Inputs
+        this.id = '';
+        this.title = input('');
+        this.icon = input('');
+        this.showCloseButton = input(true);
+        this.width = input('small');
+        this.height = input('auto');
+        this.maxHeight = input('');
+        //Computed
+        this.contentList = computed(() => Array.from(this.contentRef._results));
+        //Computed
+        this.header = computed(() => {
+            const header = this.contentList().find(x => x.coerRef() === 'header');
+            return Tools.IsNotNull(header) ? header : null;
+        });
+        //Computed
+        this.body = computed(() => {
+            const body = this.contentList().find(x => x.coerRef() === '' || x.coerRef() === 'body');
+            return Tools.IsNotNull(body) ? body : null;
+        });
+        //Computed
+        this.footer = computed(() => {
+            const footer = this.contentList().find(x => x.coerRef() === 'footer');
+            return Tools.IsNotNull(footer) ? footer : null;
+        });
+        //Computed
+        this._title = computed(() => {
+            return Tools.IsNotNull(this.header()) && this.header().title().length > 0
+                ? this.header().title() : this.title();
+        });
+        //Computed
+        this._icon = computed(() => {
+            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;
+    }
+    //getter
+    get isOpen() {
+        return this._isOpen;
+    }
+    //getter
+    get _width() {
+        switch (this.width()) {
+            case 'small': return '450px';
+            case 'full': return `${this.windowWidth - 50}px`;
+            default: return 'auto';
+        }
+    }
+    ngOnInit() {
+        Screen.Resize.subscribe((response) => {
+            this.windowWidth = response.width;
+        });
+        Tools.Sleep().then(() => {
+            this._modal = new Modal(document.getElementById(this._id));
+        });
+    }
+    /** */
+    Open() {
+        this._modal.show();
+        if (!this._isOpen) {
+            this._isOpen = true;
+            this._isModalOpen.set(true);
+            Tools.Sleep(1000).then(() => this.onOpen.emit());
+        }
+    }
+    /** */
+    Close() {
+        this._modal.hide();
+        if (this._isOpen) {
+            this._isOpen = false;
+            this._isModalOpen.set(false);
+            Tools.Sleep(1000).then(() => this.onClose.emit());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerModal, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-modal', template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:visible!important}\n"] }]
+        }], propDecorators: { contentRef: [{
+                type: ContentChildren,
+                args: [CoerRefDirective]
+            }], id: [{
+                type: Input
+            }] } });
+
+class CoerFilebox {
+    constructor() {
+        //Injections
+        this.alert = inject(CoerAlert);
+        this.IsNull = Tools.IsNull;
+        this.IsNotNull = Tools.IsNotNull;
+        //Elements
+        this.inputFileImage = viewChild.required('inputFileImage');
+        this.modal = viewChild.required('modal');
+        //Variables
+        this.base64 = '';
+        this._image = null;
+        this.imageExtensions = ['png', 'jpeg', 'jpg', 'gif', 'svg'];
+        //Inputs
+        this.type = input('image');
+        this.multiple = input(false);
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        //Outputs
+        this.onSelected = output();
+        this.onDeleteImage = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isLoading() && !this.isDisabled();
+        });
+        /** */
+        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;
+                }
+            }
+            this.alert.Warning('The file extension could not be recognized', 'Files');
+            return null;
+        };
+    }
+    set image(value) {
+        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;
+        }
+    }
+    /** */
+    async UploadImages(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)) {
+                files.push({
+                    file: file,
+                    extension: extension,
+                    base64: await Files.ConvertToBase64(file)
+                });
+            }
+            else
+                this.alert.Warning(`<b>.${extension}</b> extension not allowed`, 'Files');
+        }
+        //Response
+        this.inputFileImage().nativeElement.value = null;
+        this.onSelected.emit([...files]);
+    }
+    /** */
+    DeleteImage(event) {
+        event.stopPropagation();
+        if (this._isEnable()) {
+            this.onDeleteImage.emit();
+        }
+    }
+    /** */
+    ExpandImage(event) {
+        event.stopPropagation();
+        this.modal().Open();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerFilebox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerFilebox, 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 }, 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() ? inputFileImage.click() : null\"\r\n            [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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(IsNull(_image?.allowDelete) || _image!.allowDelete) {\r\n                        <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n                    }\r\n\r\n                    @if(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\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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-filebox .text-blue{color:#0d6efd!important}div.coer-filebox .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-filebox .background-blue{background-color:#0d6efd!important}div.coer-filebox .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-filebox .border-blue{border-color:#0d6efd!important}div.coer-filebox .text-gray{color:#6c757d!important}div.coer-filebox .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-filebox .background-gray{background-color:#6c757d!important}div.coer-filebox .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-filebox .border-gray{border-color:#6c757d!important}div.coer-filebox .text-green{color:#198754!important}div.coer-filebox .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-filebox .background-green{background-color:#198754!important}div.coer-filebox .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-filebox .border-green{border-color:#198754!important}div.coer-filebox .text-yellow{color:#ffc107!important}div.coer-filebox .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-filebox .background-yellow{background-color:#ffc107!important}div.coer-filebox .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-filebox .border-yellow{border-color:#ffc107!important}div.coer-filebox .text-red{color:#dc3545!important}div.coer-filebox .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-filebox .background-red{background-color:#dc3545!important}div.coer-filebox .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-filebox .border-red{border-color:#dc3545!important}div.coer-filebox .text-white{color:#f5f5f5!important}div.coer-filebox .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-filebox .background-white{background-color:#f5f5f5!important}div.coer-filebox .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-filebox .border-white{border-color:#f5f5f5!important}div.coer-filebox .text-black{color:#252525!important}div.coer-filebox .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-filebox .background-black{background-color:#252525!important}div.coer-filebox .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-filebox .border-black{border-color:#252525!important}div.coer-filebox .text-orange{color:#fd6031!important}div.coer-filebox .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-filebox .background-orange{background-color:#fd6031!important}div.coer-filebox .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-filebox .border-orange{border-color:#fd6031!important}div.coer-filebox figure{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 #6c757d;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:#fd6031!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:#6c757d;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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerFilebox, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-filebox', template: "<div class=\"coer-filebox\">\r\n    @if(type() == 'image') {\r\n        <figure (click)=\"_isEnable() ? inputFileImage.click() : null\"\r\n            [ngClass]=\"{ 'dashed': IsNull(_image?.value) }\"\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(IsNull(_image?.allowDelete) || _image!.allowDelete) {\r\n                        <i class=\"fa-solid fa-trash-can\" (click)=\"DeleteImage($event)\"></i>\r\n                    }\r\n\r\n                    @if(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\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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-filebox .text-blue{color:#0d6efd!important}div.coer-filebox .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-filebox .background-blue{background-color:#0d6efd!important}div.coer-filebox .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-filebox .border-blue{border-color:#0d6efd!important}div.coer-filebox .text-gray{color:#6c757d!important}div.coer-filebox .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-filebox .background-gray{background-color:#6c757d!important}div.coer-filebox .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-filebox .border-gray{border-color:#6c757d!important}div.coer-filebox .text-green{color:#198754!important}div.coer-filebox .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-filebox .background-green{background-color:#198754!important}div.coer-filebox .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-filebox .border-green{border-color:#198754!important}div.coer-filebox .text-yellow{color:#ffc107!important}div.coer-filebox .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-filebox .background-yellow{background-color:#ffc107!important}div.coer-filebox .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-filebox .border-yellow{border-color:#ffc107!important}div.coer-filebox .text-red{color:#dc3545!important}div.coer-filebox .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-filebox .background-red{background-color:#dc3545!important}div.coer-filebox .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-filebox .border-red{border-color:#dc3545!important}div.coer-filebox .text-white{color:#f5f5f5!important}div.coer-filebox .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-filebox .background-white{background-color:#f5f5f5!important}div.coer-filebox .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-filebox .border-white{border-color:#f5f5f5!important}div.coer-filebox .text-black{color:#252525!important}div.coer-filebox .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-filebox .background-black{background-color:#252525!important}div.coer-filebox .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-filebox .border-black{border-color:#252525!important}div.coer-filebox .text-orange{color:#fd6031!important}div.coer-filebox .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-filebox .background-orange{background-color:#fd6031!important}div.coer-filebox .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-filebox .border-orange{border-color:#fd6031!important}div.coer-filebox figure{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 #6c757d;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:#fd6031!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:#6c757d;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
+            }] } });
+
+class CoerForm {
+    constructor() {
+        //Injection
+        this.alert = inject(CoerAlert);
+        this.formGroup = input.required();
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        /** */
+        this.IsInvalidControl = (formControlName) => {
+            return Tools.IsNotNull(this.formGroup().get(formControlName))
+                ? (this.formGroup().get(formControlName).touched && this.formGroup().get(formControlName).invalid)
+                : true;
+        };
+    }
+    get _isDisabled() {
+        return this.isLoading() || this.isDisabled();
+    }
+    /** */
+    TouchForm() {
+        this.formGroup().markAllAsTouched();
+    }
+    /** */
+    SetControlValue(formControlName, value) {
+        if (Tools.IsNotNull(this.formGroup().get(formControlName))) {
+            this.formGroup().get(formControlName).setValue(value);
+        }
+        else {
+            this.alert.Warning(`${formControlName} Control`, 'Not Found');
+        }
+    }
+    /** */
+    GetControlValue(formControlName) {
+        return Tools.IsNotNull(this.formGroup().get(formControlName))
+            ? this.formGroup().get(formControlName).value
+            : null;
+    }
+    /** Get form value */
+    GetValue() {
+        return Tools.BreakReference(this.formGroup().value);
+    }
+    /** */
+    Reset(properties = null) {
+        if (Tools.IsNull(properties))
+            this.formGroup().reset();
+        else
+            this.formGroup().reset(properties);
+    }
+    /**
+     * Mark all controls as touched.
+     * If form is invalid emit a warning and focus first invalid control.
+    */
+    IsValid() {
+        this.TouchForm();
+        if (this.formGroup().invalid) {
+            this.alert.Warning('Please complete the required fields', 'Instructions', 'fa-solid fa-list-check');
+            this.Focus();
+        }
+        return {
+            isValid: this.formGroup().valid,
+            formValue: this.GetValue()
+        };
+    }
+    /** Focus the especified control or first invalid control */
+    Focus(formControl = null) {
+        const formControlCollection = new Map();
+        const formControlErrorCollection = new Map();
+        for (const property of Tools.GetObjectProperties(this.formGroup().controls)) {
+            formControlErrorCollection.set(property, this.formGroup().controls[property].errors);
+            const htmlElement = document.querySelector(`[formcontrolname='${property}'] input`);
+            if (Tools.IsNotNull(htmlElement))
+                formControlCollection.set(property, htmlElement);
+        }
+        if (formControlCollection.size > 0) {
+            if (Tools.IsNull(formControl)) {
+                for (const [property, error] of formControlErrorCollection) {
+                    if (Tools.IsNotNull(error)) {
+                        formControl = property;
+                        break;
+                    }
+                }
+                if (Tools.IsNull(formControl)) {
+                    formControl = Array.from(formControlCollection.keys())[0];
+                }
+            }
+            const element = formControlCollection.get(formControl);
+            if (Tools.IsNotNull(element))
+                element.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CoerForm, selector: "coer-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-form', template: "<form [formGroup]=\"formGroup()\" autocomplete=\"off\" class=\"coer-form\">\r\n    <fieldset [disabled]=\"_isDisabled\">\r\n        <ng-content></ng-content>\r\n    </fieldset>\r\n</form>" }]
+        }] });
+
+class CoerNumberBox extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Injections
+        this.alert = inject(CoerAlert);
+        //Component Value
+        this._value = '';
+        this.matFormField = viewChild.required('matFormField');
+        this.coerNumberbox = viewChild.required('coerNumberbox');
+        //Variables
+        this._id = Tools.GetGuid('coer-numberbox');
+        this._isLoadingEvent = signal(false);
+        this.hideCaret = false;
+        this.id = '';
+        this.label = input('');
+        this.placeholder = input('');
+        this.min = input(0);
+        this.max = input(2147483647);
+        this.decimals = input(0);
+        this.width = input('100%');
+        this.minWidth = input('190px');
+        this.maxWidth = input('100%');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.isInvalid = input(false);
+        this.isValid = input(false);
+        this.isDisabled = input(false);
+        this.isReadonly = input(false);
+        this.isLoading = input(false);
+        this.selectOnFocus = input(true);
+        this.textPosition = input('right');
+        //Outputs
+        this.onKeyupEnter = output();
+        this.onInput = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
+        });
+        //computed
+        this.floatLabel = computed(() => {
+            return this.label() == '' ? 'always' : 'auto';
+        });
+        //computed
+        this.paddingRight = computed(() => {
+            return this.isInvalid() || this.isValid()
+                ? '18px' : '0px';
+        });
+    }
+    //Inputs
+    set value(value) {
+        if (Tools.IsNull(value))
+            value = 0;
+        this.SetValue(value);
+    }
+    ngOnInit() {
+        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.Select();
+                });
+                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);
+                        if (this._isEnable())
+                            this.onInput.emit(value);
+                    });
+                });
+            }
+        });
+    }
+    //getter
+    get value() {
+        return this._value;
+    }
+    //ControlValueAccessor
+    SetValue(value) {
+        value = this.OnlyNumbers(value);
+        value = this.ValidateRangeValue(value);
+        this._UpdateValue(value);
+        this.coerNumberbox().nativeElement.value = value;
+        this._value = value;
+    }
+    //ControlValueAccessor
+    writeValue(value) {
+        value = this.OnlyNumbers(value);
+        value = this.ValidateRangeValue(value);
+        this.coerNumberbox().nativeElement.value = value;
+        this._value = value;
+    }
+    /** */
+    OnlyNumbers(value) {
+        let isNegative = false;
+        let valueString = String(value).trim();
+        //Negatives
+        if (valueString.includes('-')) {
+            if (this.min() < 0) {
+                isNegative = valueString.startsWith('-');
+                if (valueString == '-')
+                    return '-';
+                if (valueString == '-.')
+                    return '-0.';
+                if (valueString == '-0')
+                    return '-0';
+                if (valueString == '-0.')
+                    return '-0.';
+            }
+            else if (Number(value) < this.min()) {
+                this.alert.Warning(`Minimum ${this.min()}`, 'Out of range', 'fa-solid fa-hashtag');
+                valueString = '0';
+            }
+        }
+        const charArray = [];
+        for (const char of valueString) {
+            if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char)) {
+                charArray.push(char);
+            }
+            else if (char == '.' && this.decimals() > 0) {
+                charArray.push(char);
+            }
+        }
+        valueString = charArray.join('');
+        //Decimals
+        if (this.decimals() > 0) {
+            let integerString = valueString.split('.')[0] || '';
+            let decimalString = valueString.split('.')[1] || '';
+            decimalString = decimalString.substring(0, this.decimals());
+            if (valueString == '.')
+                return '0.';
+            else if (valueString.includes('.') && decimalString == '') {
+                return (isNegative) ? `-${integerString}.` : `${integerString}.`;
+            }
+            else if (valueString.includes('.') && decimalString.endsWith('0')) {
+                return (isNegative) ? `-${integerString}.${decimalString}` : `${integerString}.${decimalString}`;
+            }
+            else if (integerString == '' && decimalString == '') {
+                return '0';
+            }
+            valueString = `${integerString}.${decimalString}`;
+        }
+        if (isNegative) {
+            valueString = `-${valueString}`;
+        }
+        return Number(valueString);
+    }
+    /** */
+    ValidateRangeValue(value) {
+        if (['-', '.', '-.', '-0', '-0.'].includes(String(value))) {
+            return String(value);
+        }
+        if (Number(value) < this.min()) {
+            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');
+            value = this.max();
+        }
+        if (this.decimals() <= 0) {
+            if (String(value).includes('.')) {
+                value = String(value).split('.')[0];
+            }
+        }
+        return String(value);
+    }
+    /** */
+    Focus(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Select(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+                this.element.select();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Blur() {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep().then(() => {
+            if (this.element) {
+                this.element.blur();
+                setTimeout(() => {
+                    const element = document.querySelector(`#${this._id}-container .mdc-line-ripple--active`);
+                    if (element)
+                        element.classList.remove('mdc-line-ripple--active');
+                    this._isLoadingEvent.set(false);
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerNumberBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerNumberBox, selector: "coer-numberbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-number-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\r\n        }\"\r\n        [style]=\"{\r\n            'width': width(),\r\n            'min-width': minWidth(),\r\n            'max-width': maxWidth(),\r\n            'margin-top': marginTop(),\r\n            'margin-right': marginRight(),\r\n            'margin-bottom': marginBottom(),\r\n            'margin-left': marginLeft()\r\n        }\">\r\n        <mat-label>{{ label() }}</mat-label>\r\n\r\n        <input #coerNumberbox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerNumberbox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [ngClass]=\"{ 'caret-none': hideCaret }\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n</div>", styles: ["div.coer-number-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-number-box .text-blue{color:#0d6efd!important}div.coer-number-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-number-box .background-blue{background-color:#0d6efd!important}div.coer-number-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-number-box .border-blue{border-color:#0d6efd!important}div.coer-number-box .text-gray{color:#6c757d!important}div.coer-number-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-number-box .background-gray{background-color:#6c757d!important}div.coer-number-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-number-box .border-gray{border-color:#6c757d!important}div.coer-number-box .text-green{color:#198754!important}div.coer-number-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-number-box .background-green{background-color:#198754!important}div.coer-number-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-number-box .border-green{border-color:#198754!important}div.coer-number-box .text-yellow{color:#ffc107!important}div.coer-number-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-number-box .background-yellow{background-color:#ffc107!important}div.coer-number-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-number-box .border-yellow{border-color:#ffc107!important}div.coer-number-box .text-red{color:#dc3545!important}div.coer-number-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-number-box .background-red{background-color:#dc3545!important}div.coer-number-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-number-box .border-red{border-color:#dc3545!important}div.coer-number-box .text-white{color:#f5f5f5!important}div.coer-number-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-number-box .background-white{background-color:#f5f5f5!important}div.coer-number-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-number-box .border-white{border-color:#f5f5f5!important}div.coer-number-box .text-black{color:#252525!important}div.coer-number-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-number-box .background-black{background-color:#252525!important}div.coer-number-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-number-box .border-black{border-color:#252525!important}div.coer-number-box .text-orange{color:#fd6031!important}div.coer-number-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-number-box .background-orange{background-color:#fd6031!important}div.coer-number-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-number-box .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$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"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerNumberBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], template: "<div class=\"coer-number-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\r\n        }\"\r\n        [style]=\"{\r\n            'width': width(),\r\n            'min-width': minWidth(),\r\n            'max-width': maxWidth(),\r\n            'margin-top': marginTop(),\r\n            'margin-right': marginRight(),\r\n            'margin-bottom': marginBottom(),\r\n            'margin-left': marginLeft()\r\n        }\">\r\n        <mat-label>{{ label() }}</mat-label>\r\n\r\n        <input #coerNumberbox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerNumberbox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [ngClass]=\"{ 'caret-none': hideCaret }\"\r\n            [style]=\"{\r\n                'cursor': isLoading() ? 'wait' : null,\r\n                'margin-top': (floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': paddingRight(),\r\n                'text-align': textPosition()\r\n            }\">\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n</div>", styles: ["div.coer-number-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-number-box .text-blue{color:#0d6efd!important}div.coer-number-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-number-box .background-blue{background-color:#0d6efd!important}div.coer-number-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-number-box .border-blue{border-color:#0d6efd!important}div.coer-number-box .text-gray{color:#6c757d!important}div.coer-number-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-number-box .background-gray{background-color:#6c757d!important}div.coer-number-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-number-box .border-gray{border-color:#6c757d!important}div.coer-number-box .text-green{color:#198754!important}div.coer-number-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-number-box .background-green{background-color:#198754!important}div.coer-number-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-number-box .border-green{border-color:#198754!important}div.coer-number-box .text-yellow{color:#ffc107!important}div.coer-number-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-number-box .background-yellow{background-color:#ffc107!important}div.coer-number-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-number-box .border-yellow{border-color:#ffc107!important}div.coer-number-box .text-red{color:#dc3545!important}div.coer-number-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-number-box .background-red{background-color:#dc3545!important}div.coer-number-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-number-box .border-red{border-color:#dc3545!important}div.coer-number-box .text-white{color:#f5f5f5!important}div.coer-number-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-number-box .background-white{background-color:#f5f5f5!important}div.coer-number-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-number-box .border-white{border-color:#f5f5f5!important}div.coer-number-box .text-black{color:#252525!important}div.coer-number-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-number-box .background-black{background-color:#252525!important}div.coer-number-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-number-box .border-black{border-color:#252525!important}div.coer-number-box .text-orange{color:#fd6031!important}div.coer-number-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-number-box .background-orange{background-color:#fd6031!important}div.coer-number-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-number-box .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-number-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!important}div.coer-number-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important}div.coer-number-box mat-form-field .placeholder,div.coer-number-box mat-form-field .placeholder *,div.coer-number-box mat-form-field .placeholder-glow,div.coer-number-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-number-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-numberbox mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class CoerSelectbox extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Component Value
+        this._value = null;
+        //Variables
+        this._scrollByRow = 40.8;
+        this._coerTextBox = viewChild.required('coerTextBox');
+        this._id = Tools.GetGuid('coer-selectBox');
+        this._index = signal(-1);
+        this._search = signal('');
+        this._isOpen = signal(false);
+        this._isDirty = signal(false);
+        this._isOverMenu = signal(false);
+        this._isLoadingEvent = signal(false);
+        this._scroll = signal(0);
+        this.id = '';
+        this.label = input('');
+        this.dataSource = input([]);
+        this.propDisplay = input('name');
+        this.rowsByPage = input(50);
+        this.placeholder = input('-- Select --');
+        this.width = input('100%');
+        this.minWidth = input('190px');
+        this.maxWidth = input('100%');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.isInvalid = input(false);
+        this.isValid = input(false);
+        this.isDisabled = input(false);
+        this.isReadonly = input(false);
+        this.isLoading = input(false);
+        //Outputs
+        this.onSelected = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
+        });
+        //computed
+        this.floatLabel = computed(() => {
+            return this.label() == '' ? 'always' : 'auto';
+        });
+        //computed
+        this._dataSource = computed(() => {
+            let index = 0;
+            const search = this._search();
+            const propDisplay = this.propDisplay();
+            let dataSource = this.dataSource().map((item) => Object.assign(item, { index: index++ }));
+            if (this._isDirty() && !this._isLoadingEvent()) {
+                dataSource = [...dataSource].filter((item) => String(item[propDisplay]).trim().toUpperCase().includes(search.trim().toUpperCase()));
+            }
+            let indexRow = 0;
+            return Tools.BreakReference(dataSource)
+                .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.propDisplay()] : '';
+        };
+    }
+    //Inputs
+    set value(value) {
+        if (Tools.IsNull(value))
+            value = null;
+        this.SetValue(value);
+    }
+    ngOnInit() {
+        this.SetEvents();
+    }
+    //getter
+    get value() {
+        return this._value;
+    }
+    //getter
+    get _displayed() {
+        return Tools.IsNotNull(this._value) ? this._value[this.propDisplay()] : '';
+    }
+    //getter
+    get _placeholder() {
+        let placeholder = this.placeholder();
+        if (this.dataSource().length <= 0) {
+            placeholder = '-- No Options --';
+        }
+        return Tools.IsNotNull(this._value)
+            ? this._displayed
+            : placeholder;
+    }
+    //computed
+    get _showCancel() {
+        return Tools.IsNotNull(this._value)
+            && this._search().length <= 0;
+    }
+    //computed
+    get paddingRight() {
+        return this.isInvalid() || this.isValid() || this._showCancel
+            ? '40px' : '15px';
+    }
+    //computed
+    get widthIcons() {
+        return this.isInvalid() || this.isValid() || this._showCancel
+            ? '55px' : '30px';
+    }
+    /** */
+    SetValue(_value) {
+        if (_value === undefined)
+            _value = null;
+        this._UpdateValue(_value);
+        this._value = _value;
+        this._search.set(this.GetDisplay(_value));
+    }
+    /** */
+    writeValue(_value) {
+        if (_value === undefined)
+            _value = null;
+        this._value = _value;
+        this._search.set(this.GetDisplay(_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);
+            });
+            //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('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.propDisplay()]) {
+                            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]);
+            if (Tools.IsNotNull(_item)) {
+                this.SetValue(Tools.BreakReference(_item));
+                this.Blur();
+            }
+            delete _item.indexRow;
+            delete _item.index;
+            this.onSelected.emit({ ..._item });
+        }
+    }
+    /** */
+    Unselect() {
+        this._search.set('');
+        this.SetValue(null);
+        this.Blur();
+    }
+    /** */
+    Focus(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(_ => {
+            if (this._isEnable()) {
+                this._textbox.focus();
+                this._textbox.select();
+                this.Open();
+            }
+            Tools.Sleep().then(_ => {
+                if (Tools.IsNotNull(this._value)) {
+                    this.Search(this._displayed);
+                }
+                this._isLoadingEvent.set(false);
+            });
+        });
+    }
+    /** */
+    Blur() {
+        if (this._isLoadingEvent())
+            return;
+        this._isLoadingEvent.set(true);
+        this._isDirty.set(false);
+        this._index.set(-1);
+        this._scroll.set(0);
+        this._dropDownMenu.scrollTo(0, this._scroll());
+        this._search.set(this._displayed);
+        Tools.Sleep().then(_ => {
+            this._textbox.blur();
+            this.Close();
+            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._dropDownMenu.classList.contains('show')) {
+            this._dropDownMenu.classList.add('show');
+        }
+        this._isOpen.set(true);
+    }
+    /** */
+    Close() {
+        if (this._dropDownMenu.classList.contains('show')) {
+            this._dropDownMenu.classList.remove('show');
+        }
+        this._isOpen.set(false);
+    }
+    /** */
+    Search(_value) {
+        this._search.set(String(_value));
+        Tools.Sleep(0, `${this._id}-search`).then(_ => {
+            const item = this._dataSource().find(item => String(item[this.propDisplay()]).trim().toUpperCase().includes(String(_value).trim().toUpperCase()));
+            if (Tools.IsNotNull(item)) {
+                this._index.set(item.indexRow);
+                if (this._index() >= 3) {
+                    this._scroll.set((this._index() - 2) * this._scrollByRow);
+                }
+                else {
+                    this._scroll.set(0);
+                }
+                this._dropDownMenu.scrollTo(0, this._scroll());
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerSelectbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerSelectbox, selector: "coer-selectbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected" }, 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 ngClass=\"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-orange\" (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'\" class=\"dropdown-menu\">\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>\r\n\r\n", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-select-box .text-blue{color:#0d6efd!important}div.coer-select-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-select-box .background-blue{background-color:#0d6efd!important}div.coer-select-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-select-box .border-blue{border-color:#0d6efd!important}div.coer-select-box .text-gray{color:#6c757d!important}div.coer-select-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-select-box .background-gray{background-color:#6c757d!important}div.coer-select-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-select-box .border-gray{border-color:#6c757d!important}div.coer-select-box .text-green{color:#198754!important}div.coer-select-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-select-box .background-green{background-color:#198754!important}div.coer-select-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-select-box .border-green{border-color:#198754!important}div.coer-select-box .text-yellow{color:#ffc107!important}div.coer-select-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-select-box .background-yellow{background-color:#ffc107!important}div.coer-select-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-select-box .border-yellow{border-color:#ffc107!important}div.coer-select-box .text-red{color:#dc3545!important}div.coer-select-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-select-box .background-red{background-color:#dc3545!important}div.coer-select-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-select-box .border-red{border-color:#dc3545!important}div.coer-select-box .text-white{color:#f5f5f5!important}div.coer-select-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-select-box .background-white{background-color:#f5f5f5!important}div.coer-select-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-select-box .border-white{border-color:#f5f5f5!important}div.coer-select-box .text-black{color:#252525!important}div.coer-select-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-select-box .background-black{background-color:#252525!important}div.coer-select-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-select-box .border-black{border-color:#252525!important}div.coer-select-box .text-orange{color:#fd6031!important}div.coer-select-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-select-box .background-orange{background-color:#fd6031!important}div.coer-select-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-select-box .border-orange{border-color:#fd6031!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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:#fff!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:#000!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}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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$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"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerSelectbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], 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 ngClass=\"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-orange\" (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'\" class=\"dropdown-menu\">\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>\r\n\r\n", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-select-box .text-blue{color:#0d6efd!important}div.coer-select-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-select-box .background-blue{background-color:#0d6efd!important}div.coer-select-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-select-box .border-blue{border-color:#0d6efd!important}div.coer-select-box .text-gray{color:#6c757d!important}div.coer-select-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-select-box .background-gray{background-color:#6c757d!important}div.coer-select-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-select-box .border-gray{border-color:#6c757d!important}div.coer-select-box .text-green{color:#198754!important}div.coer-select-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-select-box .background-green{background-color:#198754!important}div.coer-select-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-select-box .border-green{border-color:#198754!important}div.coer-select-box .text-yellow{color:#ffc107!important}div.coer-select-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-select-box .background-yellow{background-color:#ffc107!important}div.coer-select-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-select-box .border-yellow{border-color:#ffc107!important}div.coer-select-box .text-red{color:#dc3545!important}div.coer-select-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-select-box .background-red{background-color:#dc3545!important}div.coer-select-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-select-box .border-red{border-color:#dc3545!important}div.coer-select-box .text-white{color:#f5f5f5!important}div.coer-select-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-select-box .background-white{background-color:#f5f5f5!important}div.coer-select-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-select-box .border-white{border-color:#f5f5f5!important}div.coer-select-box .text-black{color:#252525!important}div.coer-select-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-select-box .background-black{background-color:#252525!important}div.coer-select-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-select-box .border-black{border-color:#252525!important}div.coer-select-box .text-orange{color:#fd6031!important}div.coer-select-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-select-box .background-orange{background-color:#fd6031!important}div.coer-select-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-select-box .border-orange{border-color:#fd6031!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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%!important;overflow:auto!important;padding:0!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:#fff!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:#000!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}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}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class CoerTextBox extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Component Value
+        this._value = '';
+        this.matFormField = viewChild.required('matFormField');
+        this.coerTextBox = viewChild.required('coerTextBox');
+        //Variables
+        this._id = Tools.GetGuid('coer-textBox');
+        this._isLoadingEvent = signal(false);
+        this.id = '';
+        this.label = input('');
+        this.placeholder = input('');
+        this.minLength = input(0);
+        this.maxLength = input(50);
+        this.showSearchIcon = input(false);
+        this.showClearIcon = input(false);
+        this.width = input('100%');
+        this.minWidth = input('190px');
+        this.maxWidth = input('100%');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.isInvalid = input(false);
+        this.isValid = input(false);
+        this.isDisabled = input(false);
+        this.isReadonly = input(false);
+        this.isLoading = input(false);
+        this.selectOnFocus = input(true);
+        this.textPosition = input('left');
+        //Outputs
+        this.onKeyupEnter = output();
+        this.onInput = output();
+        this.onClickClear = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
+        });
+        //computed
+        this.floatLabel = computed(() => {
+            return this.label() == '' ? 'always' : 'auto';
+        });
+        //computed
+        this.paddingRight = computed(() => {
+            return this.isInvalid() || this.isValid()
+                ? '18px' : '0px';
+        });
+    }
+    //Inputs
+    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 value() {
+        return this._value;
+    }
+    /** */
+    SetEvents() {
+        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.Select();
+                });
+                this.element.addEventListener('keyup', (event) => {
+                    if (this._isEnable()) {
+                        const { key } = event;
+                        if (key === 'Enter') {
+                            const value = this.coerTextBox().nativeElement.value;
+                            this.onKeyupEnter.emit(value);
+                            this.Blur();
+                        }
+                    }
+                });
+                this.element.addEventListener('blur', () => this.Blur());
+                this.element.addEventListener('input', () => {
+                    Tools.Sleep().then(() => {
+                        const value = this.coerTextBox().nativeElement.value;
+                        if (this._isEnable())
+                            this.onInput.emit(value);
+                    });
+                });
+                this.element.addEventListener('paste', () => {
+                    Tools.Sleep().then(() => {
+                        this.SetValue(this._value.toString().trim());
+                    });
+                });
+            }
+        });
+    }
+    /** */
+    Focus(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Select(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+                this.element.select();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Blur() {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep().then(() => {
+            if (this.element) {
+                this.element.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);
+        });
+    }
+    /** */
+    Clear() {
+        this.SetValue('');
+        this.Focus();
+    }
+    /** */
+    ClickSearch() {
+        Tools.Sleep().then(() => {
+            if (this._isEnable()) {
+                if (this.showClearIcon())
+                    this.Focus();
+                else {
+                    this.onKeyupEnter.emit(this._value);
+                    this.Blur();
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTextBox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerTextBox, selector: "coer-textbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear" }, 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    <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            [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</div>", styles: ["div.coer-text-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-text-box .text-blue{color:#0d6efd!important}div.coer-text-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-text-box .background-blue{background-color:#0d6efd!important}div.coer-text-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-text-box .border-blue{border-color:#0d6efd!important}div.coer-text-box .text-gray{color:#6c757d!important}div.coer-text-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-text-box .background-gray{background-color:#6c757d!important}div.coer-text-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-text-box .border-gray{border-color:#6c757d!important}div.coer-text-box .text-green{color:#198754!important}div.coer-text-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-text-box .background-green{background-color:#198754!important}div.coer-text-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-text-box .border-green{border-color:#198754!important}div.coer-text-box .text-yellow{color:#ffc107!important}div.coer-text-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-text-box .background-yellow{background-color:#ffc107!important}div.coer-text-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-text-box .border-yellow{border-color:#ffc107!important}div.coer-text-box .text-red{color:#dc3545!important}div.coer-text-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-text-box .background-red{background-color:#dc3545!important}div.coer-text-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-text-box .border-red{border-color:#dc3545!important}div.coer-text-box .text-white{color:#f5f5f5!important}div.coer-text-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-text-box .background-white{background-color:#f5f5f5!important}div.coer-text-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-text-box .border-white{border-color:#f5f5f5!important}div.coer-text-box .text-black{color:#252525!important}div.coer-text-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-text-box .background-black{background-color:#252525!important}div.coer-text-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-text-box .border-black{border-color:#252525!important}div.coer-text-box .text-orange{color:#fd6031!important}div.coer-text-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-text-box .background-orange{background-color:#fd6031!important}div.coer-text-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-text-box .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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: i2$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"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTextBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], 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        }\"\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</div>", styles: ["div.coer-text-box *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-text-box .text-blue{color:#0d6efd!important}div.coer-text-box .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-text-box .background-blue{background-color:#0d6efd!important}div.coer-text-box .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-text-box .border-blue{border-color:#0d6efd!important}div.coer-text-box .text-gray{color:#6c757d!important}div.coer-text-box .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-text-box .background-gray{background-color:#6c757d!important}div.coer-text-box .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-text-box .border-gray{border-color:#6c757d!important}div.coer-text-box .text-green{color:#198754!important}div.coer-text-box .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-text-box .background-green{background-color:#198754!important}div.coer-text-box .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-text-box .border-green{border-color:#198754!important}div.coer-text-box .text-yellow{color:#ffc107!important}div.coer-text-box .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-text-box .background-yellow{background-color:#ffc107!important}div.coer-text-box .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-text-box .border-yellow{border-color:#ffc107!important}div.coer-text-box .text-red{color:#dc3545!important}div.coer-text-box .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-text-box .background-red{background-color:#dc3545!important}div.coer-text-box .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-text-box .border-red{border-color:#dc3545!important}div.coer-text-box .text-white{color:#f5f5f5!important}div.coer-text-box .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-text-box .background-white{background-color:#f5f5f5!important}div.coer-text-box .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-text-box .border-white{border-color:#f5f5f5!important}div.coer-text-box .text-black{color:#252525!important}div.coer-text-box .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-text-box .background-black{background-color:#252525!important}div.coer-text-box .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-text-box .border-black{border-color:#252525!important}div.coer-text-box .text-orange{color:#fd6031!important}div.coer-text-box .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-text-box .background-orange{background-color:#fd6031!important}div.coer-text-box .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-text-box .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-text-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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
+            }], id: [{
+                type: Input
+            }] } });
+
+class CoerGridExtension extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Injections
+        this.alert = inject(CoerAlert);
+        //Elements
+        this.inputFile = viewChild.required('inputFileRef');
+        this.inputSearch = viewChild.required('inputSearch');
+        this.coerTextboxList = viewChildren(CoerTextBox);
+        this.coerNumberboxList = viewChildren(CoerNumberBox);
+        this.coerSelectboxList = viewChildren(CoerSelectbox);
+        this.coerCheckboxList = viewChildren(CoerCheckbox);
+        //Variables
+        this._value = [];
+        this.value_signal = signal([]);
+        this._gridSearch = signal('');
+        this._isLoading = true;
+        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 = Tools.GetNumericFormat;
+        this.GetDateFormat = DateTime.GetDateFormat;
+        //Inputs
+        this.columns = input([]);
+        this.cleanColumnName = input(true);
+        this.addButton = { show: false };
+        this.exportButton = { show: false };
+        this.importButton = { show: false };
+        this.search = { show: false, ignore: false };
+        this.buttonByRow = {};
+        this.checkbox = { show: false };
+        this.tooltipByRow = input('');
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        this.rowsByPage = input(50);
+        this.groupBy = input('');
+        this.showColumnGrouped = input(false);
+        this.rowsByGroup = input(50);
+        this.isInvisible = input(false);
+        this.showFooter = input(true);
+        this.width = input('100%');
+        this.MinWidth = input('250px');
+        this.MaxWidth = input('100%');
+        this.height = input('350px');
+        this.minHeight = input('140px');
+        this.maxHeight = input('100vh');
+        this.margin = input('auto');
+        this.enableSort = input(true);
+        this.enableRowFocus = input(true);
+        //Outputs
+        this.onClickAdd = output();
+        this.onClickImport = output();
+        this.onClickExport = output();
+        this.onClickRow = output();
+        this.onDoubleClickRow = output();
+        this.onClickDeleteRow = output();
+        this.onClickEditRow = output();
+        this.onClickGoRow = output();
+        this.onKeyupEnter = output();
+        this.onKeyupEnterLast = output();
+        this.onSwitchChange = output();
+        this.onTextboxChange = output();
+        this.onSelectboxChange = output();
+        this.onCheckboxChange = output();
+        //computed
+        this._isDisabled = computed(() => {
+            return this.isDisabled() || this.isLoading() || this.isInvisible();
+        });
+        //computed
+        this._isGrouped = computed(() => {
+            return this.groupBy().length > 0;
+        });
+        //computed
+        this.gridColumns = computed(() => {
+            const SET_COLUMNS = new Set();
+            //Has filter columns?
+            if (this.columns().length > 0) {
+                for (const { property } of this.columns()) {
+                    SET_COLUMNS.add(property);
+                }
+            }
+            //Get all columns
+            else
+                for (const row of this.value_signal()) {
+                    for (const property in row) {
+                        SET_COLUMNS.add(property);
+                    }
+                }
+            //Remove indexRow column
+            if (SET_COLUMNS.has('indexRow')) {
+                SET_COLUMNS.delete('indexRow');
+            }
+            //Remove groupBy column
+            if (this._isGrouped() && !this.showColumnGrouped() && SET_COLUMNS.has(this.groupBy())) {
+                SET_COLUMNS.delete(this.groupBy());
+            }
+            //Set index column
+            let indexColumn = 0;
+            return Array.from(SET_COLUMNS).map(property => Tools.BreakReference({
+                columnName: property,
+                indexColumn: indexColumn++,
+                width: this._GetColumnConfig(property)?.width || 'auto'
+            }));
+        });
+        //computed
+        this.gridDataSource = computed(() => {
+            let list = this.gridDataSourceFiltered();
+            //It's Grouped?
+            if (this._isGrouped()) {
+                //let indexRow = 0;
+                let indexGroup = 0;
+                const SET_COLUMN = new Set();
+                for (const row of list) {
+                    SET_COLUMN.add(row[this.groupBy()]);
+                }
+                const DATA_SOURCE_GROPUED = [];
+                for (const column of SET_COLUMN) {
+                    DATA_SOURCE_GROPUED.push({
+                        groupBy: column,
+                        indexGroup: indexGroup++,
+                        length: list.filter((item) => item[this.groupBy()] == column).length,
+                        rows: [...list]
+                            .filter((item) => item[this.groupBy()] == column)
+                            .splice(0, this.rowsByGroup())
+                        //.map((item: any) => Object.assign({ indexRow: indexRow++ }, item))
+                    });
+                }
+                //Response by group
+                return [...DATA_SOURCE_GROPUED].splice(0, this.rowsByPage());
+            }
+            //Response
+            return [{
+                    groupBy: 'Not Grouped',
+                    indexGroup: -1,
+                    length: -1,
+                    rows: [...list].splice(0, this.rowsByPage())
+                }];
+        });
+        //computed
+        this.gridDataSourceFiltered = computed(() => {
+            let list = [];
+            const dataSource = Tools.BreakReference(this.value_signal());
+            //Ignore Filter
+            if (this._gridSearch() == '' || this.search?.ignore) {
+                list = dataSource;
+            }
+            //Filter by search
+            else {
+                const SET_ROW = new Set();
+                let listFiltered = [];
+                for (const { columnName } of this.gridColumns()) {
+                    listFiltered = dataSource.filter((item) => !SET_ROW.has(item['indexRow'])
+                        && String(item[Tools.FirstCharToLower(columnName)]).trim().toUpperCase().includes(String(this._gridSearch()).trim().toUpperCase()));
+                    for (const { indexRow } of listFiltered) {
+                        SET_ROW.add(indexRow);
+                    }
+                    list = Tools.BreakReference(list.concat(listFiltered));
+                }
+            }
+            return Tools.BreakReference(list);
+        });
+        /** Get Column Configuration */
+        this._GetColumnConfig = (columnName) => {
+            return this.columns().find(x => x.property.replaceAll(' ', '').toUpperCase() == columnName.replaceAll(' ', '').toUpperCase());
+        };
+        /** Clean Name or get alias */
+        this._GetColumnName = (columnName) => {
+            const columnConfig = this._GetColumnConfig(columnName);
+            //Get Alias
+            if (columnConfig && columnConfig.alias && columnConfig.alias.length > 0) {
+                return columnConfig.alias;
+            }
+            //Clean headerName
+            if (this.cleanColumnName() && columnName.length > 0) {
+                columnName = Tools.FirstCharToLower(columnName);
+                const charArray = [];
+                for (const char of columnName) {
+                    if (char === char.toUpperCase())
+                        charArray.push(' ');
+                    charArray.push(char);
+                }
+                charArray[0] = charArray[0].toUpperCase();
+                columnName = charArray.join('');
+            }
+            return columnName.trim();
+        };
+        /** */
+        this._GetShortIcon = (columnName) => {
+            return this._sort().columnName == columnName ? this._sort().icon : '';
+        };
+        /** */
+        this._GetId = (indexRow, indexColumn, suffix = '') => {
+            if (suffix.length > 0)
+                suffix = `-${suffix}`;
+            return `${this._id}-row${indexRow}column${indexColumn}${suffix}`;
+        };
+        /** */
+        this._GetCellValue = (row, columnName) => {
+            return row[Tools.FirstCharToLower(columnName).replaceAll(' ', '')];
+        };
+        /** */
+        this._GetTooltip = (prefix, row, suffix = '') => {
+            let column = Tools.FirstCharToLower(this.tooltipByRow()).replaceAll(' ', '');
+            if (suffix.length > 0) {
+                suffix = ` ${suffix}`;
+            }
+            return this.tooltipByRow().length > 0
+                ? `${prefix} ${row[column]}${suffix}`
+                : `${prefix}${suffix}`;
+        };
+        /** */
+        this._HideRow = (group) => {
+            return (this._isGrouped() ? !(this._expandedGroups.some(x => x == group.groupBy)) : false);
+        };
+    }
+    //getter
+    get _height() {
+        let height = this.height();
+        if (height == 'full') {
+            const TOOLBAR = 45;
+            const PAGE_HEADER = 70;
+            const GRID_HEADER = document.getElementById(`${this._id}-header`);
+            const HEADER = (GRID_HEADER && GRID_HEADER.children.length > 0) ? 50 : 0;
+            const MARGIN = 30;
+            const PADDING = 20;
+            const FOOTER = this.showFooter() ? 24.5 : 0;
+            height = (Screen.WINDOW_HEIGHT - TOOLBAR - PAGE_HEADER - MARGIN - HEADER - PADDING - FOOTER) + 'px';
+        }
+        return height;
+    }
+    //getter
+    get _onlyOneCheck() {
+        return Tools.IsNotNull(this.checkbox.onlyOneCheck) && this.checkbox.onlyOneCheck;
+    }
+    ngAfterViewInit() {
+        Tools.Sleep().then(() => {
+            this._enableAnimations = true;
+            this._isLoading = false;
+            this._isLoadingMessage = false;
+        });
+    }
+    //ControlValueAccessor
+    SetValue(value) {
+        let indexRow = 0;
+        if (!Tools.IsNotNull(value))
+            value = [];
+        const dataSource = Tools.BreakReference(value).map((item) => Object.assign({ checked: false }, { ...item }, { indexRow: indexRow++ }));
+        this._UpdateValue(dataSource);
+        this._value = dataSource;
+        this.value_signal.set(dataSource);
+    }
+    //ControlValueAccessor
+    writeValue(value) {
+        let indexRow = 0;
+        if (!Tools.IsNotNull(value))
+            value = [];
+        const dataSource = Tools.BreakReference(value).map((item) => Object.assign({ checked: false }, { ...item }, { indexRow: indexRow++ }));
+        this._value = dataSource;
+        this.value_signal.set(dataSource);
+    }
+    /** */
+    _IsCellType(property, data, type) {
+        let response = false;
+        const columnConfig = this._GetColumnConfig(property);
+        const value = data[property];
+        const row = Tools.BreakReference(data);
+        if (columnConfig) {
+            if (['coerTextbox', 'coerNumberbox', 'coerSelectbox', 'coerSwitch'].includes(type)) {
+                const inputConfig = columnConfig;
+                response = inputConfig.hasOwnProperty(type)
+                    && typeof inputConfig[type] === 'function'
+                    && inputConfig[type]({ property, row, value }).isInput;
+            }
+            else
+                switch (type) {
+                    case 'number': {
+                        if (typeof columnConfig.typeNumber === 'boolean') {
+                            response = columnConfig.typeNumber;
+                        }
+                        else if (typeof columnConfig.typeNumber === 'function') {
+                            response = (data === null) ? false : columnConfig.typeNumber({ property, row, value });
+                        }
+                        break;
+                    }
+                    case 'date': {
+                        if (data === null)
+                            return false;
+                        if (typeof columnConfig.typeDate === 'boolean') {
+                            response = columnConfig.typeDate;
+                        }
+                        else if (typeof columnConfig.typeDate === 'function') {
+                            response = (data === null) ? false : columnConfig.typeDate({ property, row, value });
+                        }
+                        break;
+                    }
+                    case 'template': {
+                        if (data === null)
+                            return false;
+                        response = (typeof columnConfig.template === 'string') || (typeof columnConfig.template === 'function');
+                        break;
+                    }
+                }
+        }
+        return response;
+    }
+    /** */
+    _IsCellColor(property, data, color) {
+        let response = false;
+        const columnConfig = this._GetColumnConfig(property);
+        if (columnConfig) {
+            if (typeof columnConfig[color] === 'boolean') {
+                response = columnConfig[color];
+            }
+            else if (typeof columnConfig[color] === 'function') {
+                response = columnConfig[color]({
+                    property,
+                    row: Tools.BreakReference(data),
+                    value: data[property]
+                });
+            }
+        }
+        return response;
+    }
+    /** */
+    GetAttribute(property, data, attribute, type) {
+        const columnConfig = this._GetColumnConfig(property);
+        const value = Tools.IsNotNull(data) ? data[property] : null;
+        const row = Tools.BreakReference(data);
+        if (columnConfig) {
+            if (type === 'defaul-cell') {
+                switch (attribute) {
+                    case 'textAlign': {
+                        return columnConfig?.textAlign || 'left';
+                    }
+                    case 'template': {
+                        const inputConfig = columnConfig;
+                        if (inputConfig.hasOwnProperty(attribute)) {
+                            if (typeof inputConfig[attribute] === 'string') {
+                                return inputConfig[attribute];
+                            }
+                            else if (typeof inputConfig[attribute] === 'function') {
+                                return inputConfig[attribute]({ property, row, value }) || '';
+                            }
+                        }
+                    }
+                }
+            }
+            else if (['coerTextbox', 'coerNumberbox', 'coerSelectbox', 'coerSwitch'].includes(type)) {
+                const inputConfig = columnConfig;
+                if (inputConfig.hasOwnProperty(type) && typeof inputConfig[type] === 'function') {
+                    return inputConfig[type]({ property, row, value })[attribute] || null;
+                }
+            }
+        }
+        return null;
+    }
+    /** */
+    ButtonByRow(property, data = null) {
+        let response = false;
+        const buttonByRow = this.buttonByRow;
+        const row = Tools.IsNotNull(data) ? Tools.BreakReference(data) : null;
+        if (buttonByRow.hasOwnProperty(property)) {
+            if (row === null) {
+                response = (typeof buttonByRow[property] === 'boolean') ? buttonByRow[property] : true;
+            }
+            else if (typeof buttonByRow[property] === 'boolean') {
+                response = buttonByRow[property];
+            }
+            else if (typeof buttonByRow[property] === 'function') {
+                response = buttonByRow[property]({ property, row, value: null });
+            }
+        }
+        return response ? (this._value && this._value.length > 0) : false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerGridExtension, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", type: CoerGridExtension, selector: "coer-grid-extension", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, cleanColumnName: { classPropertyName: "cleanColumnName", publicName: "cleanColumnName", isSignal: true, isRequired: false, transformFunction: null }, addButton: { classPropertyName: "addButton", publicName: "addButton", isSignal: false, isRequired: false, transformFunction: null }, exportButton: { classPropertyName: "exportButton", publicName: "exportButton", isSignal: false, isRequired: false, transformFunction: null }, importButton: { classPropertyName: "importButton", publicName: "importButton", isSignal: false, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: false, isRequired: false, transformFunction: null }, buttonByRow: { classPropertyName: "buttonByRow", publicName: "buttonByRow", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null }, tooltipByRow: { classPropertyName: "tooltipByRow", publicName: "tooltipByRow", 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 }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showColumnGrouped: { classPropertyName: "showColumnGrouped", publicName: "showColumnGrouped", isSignal: true, isRequired: false, transformFunction: null }, rowsByGroup: { classPropertyName: "rowsByGroup", publicName: "rowsByGroup", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, enableSort: { classPropertyName: "enableSort", publicName: "enableSort", isSignal: true, isRequired: false, transformFunction: null }, enableRowFocus: { classPropertyName: "enableRowFocus", publicName: "enableRowFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickAdd: "onClickAdd", onClickImport: "onClickImport", onClickExport: "onClickExport", onClickRow: "onClickRow", onDoubleClickRow: "onDoubleClickRow", onClickDeleteRow: "onClickDeleteRow", onClickEditRow: "onClickEditRow", onClickGoRow: "onClickGoRow", onKeyupEnter: "onKeyupEnter", onKeyupEnterLast: "onKeyupEnterLast", onSwitchChange: "onSwitchChange", onTextboxChange: "onTextboxChange", onSelectboxChange: "onSelectboxChange", onCheckboxChange: "onCheckboxChange" }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFileRef"], descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "coerTextboxList", predicate: CoerTextBox, descendants: true, isSignal: true }, { propertyName: "coerNumberboxList", predicate: CoerNumberBox, descendants: true, isSignal: true }, { propertyName: "coerSelectboxList", predicate: CoerSelectbox, descendants: true, isSignal: true }, { propertyName: "coerCheckboxList", predicate: CoerCheckbox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerGridExtension, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'coer-grid-extension',
+                    template: ''
+                }]
+        }], propDecorators: { addButton: [{
+                type: Input
+            }], exportButton: [{
+                type: Input
+            }], importButton: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], buttonByRow: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }] } });
+
+class CoerSwitch extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Variables
+        this._value = false;
+        this._id = Tools.GetGuid('coer-switch');
+        this._tooltip = '';
+        this.id = '';
+        this.label = input('');
+        this.labelPosition = input('after');
+        this.isDisabled = input(false);
+        this.isLoading = input(false);
+        this.isInvisible = input(false);
+        this.tooltipPosition = input('top');
+        //Outputs
+        this.onChange = output();
+        //conmputed
+        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()
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this._tooltipElement) {
+            Tools.Sleep().then(() => this._tooltipElement.dispose());
+        }
+    }
+    //getter
+    get value() {
+        return this._value;
+    }
+    /** */
+    Focus() {
+        Tools.Sleep().then(() => {
+            if (this._isEnable())
+                this.coerSwitch.focus();
+        });
+    }
+    /** */
+    Change(value) {
+        this.SetValue(value);
+        this.onChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: CoerSwitch, selector: "coer-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", 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 }], 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-switch .text-blue{color:#0d6efd!important}div.coer-switch .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-switch .background-blue{background-color:#0d6efd!important}div.coer-switch .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-switch .border-blue{border-color:#0d6efd!important}div.coer-switch .text-gray{color:#6c757d!important}div.coer-switch .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-switch .background-gray{background-color:#6c757d!important}div.coer-switch .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-switch .border-gray{border-color:#6c757d!important}div.coer-switch .text-green{color:#198754!important}div.coer-switch .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-switch .background-green{background-color:#198754!important}div.coer-switch .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-switch .border-green{border-color:#198754!important}div.coer-switch .text-yellow{color:#ffc107!important}div.coer-switch .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-switch .background-yellow{background-color:#ffc107!important}div.coer-switch .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-switch .border-yellow{border-color:#ffc107!important}div.coer-switch .text-red{color:#dc3545!important}div.coer-switch .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-switch .background-red{background-color:#dc3545!important}div.coer-switch .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-switch .border-red{border-color:#dc3545!important}div.coer-switch .text-white{color:#f5f5f5!important}div.coer-switch .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-switch .background-white{background-color:#f5f5f5!important}div.coer-switch .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-switch .border-white{border-color:#f5f5f5!important}div.coer-switch .text-black{color:#252525!important}div.coer-switch .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-switch .background-black{background-color:#252525!important}div.coer-switch .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-switch .border-black{border-color:#252525!important}div.coer-switch .text-orange{color:#fd6031!important}div.coer-switch .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-switch .background-orange{background-color:#fd6031!important}div.coer-switch .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-switch .border-orange{border-color:#fd6031!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__track:after{background-color:#fd6031!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__handle-track div.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 div.mdc-switch__handle-track div.mdc-switch__handle div.mdc-switch__icons{background-color:#fd6031!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$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-switch', providers: [CONTROL_VALUE(CoerSwitch)], 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-switch .text-blue{color:#0d6efd!important}div.coer-switch .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-switch .background-blue{background-color:#0d6efd!important}div.coer-switch .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-switch .border-blue{border-color:#0d6efd!important}div.coer-switch .text-gray{color:#6c757d!important}div.coer-switch .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-switch .background-gray{background-color:#6c757d!important}div.coer-switch .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-switch .border-gray{border-color:#6c757d!important}div.coer-switch .text-green{color:#198754!important}div.coer-switch .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-switch .background-green{background-color:#198754!important}div.coer-switch .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-switch .border-green{border-color:#198754!important}div.coer-switch .text-yellow{color:#ffc107!important}div.coer-switch .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-switch .background-yellow{background-color:#ffc107!important}div.coer-switch .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-switch .border-yellow{border-color:#ffc107!important}div.coer-switch .text-red{color:#dc3545!important}div.coer-switch .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-switch .background-red{background-color:#dc3545!important}div.coer-switch .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-switch .border-red{border-color:#dc3545!important}div.coer-switch .text-white{color:#f5f5f5!important}div.coer-switch .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-switch .background-white{background-color:#f5f5f5!important}div.coer-switch .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-switch .border-white{border-color:#f5f5f5!important}div.coer-switch .text-black{color:#252525!important}div.coer-switch .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-switch .background-black{background-color:#252525!important}div.coer-switch .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-switch .border-black{border-color:#252525!important}div.coer-switch .text-orange{color:#fd6031!important}div.coer-switch .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-switch .background-orange{background-color:#fd6031!important}div.coer-switch .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-switch .border-orange{border-color:#fd6031!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__track:after{background-color:#fd6031!important;filter:opacity(.6)!important}div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__handle-track div.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 div.mdc-switch__handle-track div.mdc-switch__handle div.mdc-switch__icons{background-color:#fd6031!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: { coerSwitch: [{
+                type: ViewChild,
+                args: ['coerSwitch']
+            }], value: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }] } });
+
+class CoerGrid extends CoerGridExtension {
+    constructor() {
+        super(...arguments);
+        //computed
+        this.dataSource = computed(() => {
+            return Tools.BreakReference(this.value_signal()).map(item => {
+                if (item.hasOwnProperty('checked'))
+                    delete item.checked;
+                if (item.hasOwnProperty('indexRow'))
+                    delete item.indexRow;
+                return item;
+            });
+        });
+        //computed
+        this.selectedItems = computed(() => {
+            return Tools.BreakReference(this.value_signal()).filter(item => item.checked).map(item => {
+                if (item.hasOwnProperty('checked'))
+                    delete item.checked;
+                if (item.hasOwnProperty('indexRow'))
+                    delete item.indexRow;
+                return item;
+            });
+        });
+        //computed
+        this.gridLength = computed(() => {
+            return {
+                dataSource: this.value_signal()?.length || 0,
+                dataSourceFiltered: this.gridDataSourceFiltered()?.length || 0,
+                dataSourceSelected: this.selectedItems()?.length || 0
+            };
+        });
+    }
+    //getter
+    get isValid() {
+        return (this.coerTextboxList().length > 0 ? this.coerTextboxList().every(x => !x.isInvalid()) : true)
+            && (this.coerNumberboxList().length > 0 ? this.coerNumberboxList().every(x => !x.isInvalid()) : true)
+            && (this.coerSelectboxList().length > 0 ? this.coerSelectboxList().every(x => !x.isInvalid()) : true);
+    }
+    //computed
+    //protected _columnsFiltered = computed<IGridHeader[]>(() => {
+    //    return this.isGrouped() && !this.showColumnGrouped
+    //        ? this._columns().filter(x => x.columnName.toUpperCase() != this.groupBy.toUpperCase())
+    //        : this._columns();
+    //});
+    /** */
+    FocusSearch() {
+        Tools.Sleep(0).then(() => {
+            if (this.inputSearch)
+                this.inputSearch().Focus();
+        });
+    }
+    /** */
+    SelectSearch() {
+        Tools.Sleep(0).then(() => {
+            if (this.inputSearch)
+                this.inputSearch().Select();
+        });
+    }
+    /** */
+    GetRowBy(callback) {
+        const row = this._value.find(callback);
+        return (row === undefined) ? null : row;
+    }
+    /** */
+    async Import(event = null) {
+        if (this.importButton?.preventDefault) {
+            this.onClickImport.emit({ data: [], file: null });
+            return;
+        }
+        if (event === null) {
+            this.inputFile().nativeElement.value = null;
+            this.inputFile().nativeElement.click();
+            return;
+        }
+        else if (event.target.files.length > 0) {
+            this._isLoading = true;
+            const [selectedFile] = event.target.files;
+            if (Files.IsExcel(selectedFile)) {
+                const { rows } = await Files.ReadExcel(selectedFile);
+                if (Tools.IsNull(this.importButton?.Autofill) || this.importButton.Autofill) {
+                    this.SetValue(rows.concat(this._value));
+                    this.onClickImport.emit({ data: this._value, file: selectedFile });
+                }
+                else {
+                    this.onClickImport.emit({ data: rows, file: selectedFile });
+                }
+            }
+            else {
+                let message = 'Allowed extensions:';
+                for (const extension of Files.EXCEL_EXTENSIONS) {
+                    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.onClickImport.emit({ data: [], file: null });
+            }
+            this.inputFile().nativeElement.value = null;
+            Tools.Sleep(1000).then(() => this._isLoading = false);
+        }
+    }
+    /** */
+    Export(exportFile = true) {
+        let item = {};
+        this._isLoading = true;
+        const FILE_NAME = (this.exportButton?.fileName || 'COER Report') + '.xlsx';
+        let ROW_DATA_SOURCE = (this.exportButton.hasOwnProperty('onlyRowFiltered') && !this.exportButton.onlyRowFiltered)
+            ? this.value_signal() : this.gridDataSourceFiltered();
+        const COLUMN_DATA_SOURCE = new Set();
+        if (this.exportButton.hasOwnProperty('onlyColumnFiltered') && !this.exportButton.onlyColumnFiltered) {
+            for (const row of this.value_signal()) {
+                for (const columnName in row) {
+                    if (columnName == 'indexRow')
+                        continue;
+                    COLUMN_DATA_SOURCE.add(Tools.FirstCharToLower(columnName));
+                }
+            }
+        }
+        else {
+            for (const { columnName } of this.gridColumns()) {
+                if (columnName == 'indexRow')
+                    continue;
+                COLUMN_DATA_SOURCE.add(Tools.FirstCharToLower(columnName));
+            }
+        }
+        const EXPORT_DATA = [];
+        for (const row of ROW_DATA_SOURCE) {
+            for (const column of COLUMN_DATA_SOURCE) {
+                item = Object.assign(item, { [this._GetColumnName(column)]: row[column] });
+            }
+            EXPORT_DATA.push(item);
+            item = Tools.BreakReference({});
+        }
+        if (exportFile) {
+            Files.ExportExcel(EXPORT_DATA, FILE_NAME);
+        }
+        this.onClickExport.emit(EXPORT_DATA);
+        Tools.Sleep(3000).then(() => this._isLoading = false);
+    }
+    /** */
+    InputChange(indexRow, columnName, value, input) {
+        if (input === 'coer-textbox-search') {
+            if (this._isLoading)
+                return;
+            Tools.Sleep(0, `coerGridInputChange${columnName}`).then(async (_) => {
+                this._gridSearch.set(value);
+                if (this.checkbox.show) {
+                    this._isLoadingMessage = true;
+                    await Tools.Sleep();
+                    for (const row of this._value.filter((x) => x.checked)) {
+                        this.CheckBy((x) => x.indexRow == row.indexRow);
+                    }
+                    await Tools.Sleep();
+                    this._isLoadingMessage = false;
+                }
+            });
+            return;
+        }
+        const property = Tools.FirstCharToLower(columnName);
+        const row = this._value[indexRow];
+        row[property] = value;
+        if (input === 'coer-switch') {
+            this.onSwitchChange.emit({ property, row: Tools.BreakReference(row), value });
+        }
+        else if (input === 'coer-textbox') {
+            this.onTextboxChange.emit({ property, row: Tools.BreakReference(row), value });
+        }
+        else if (input === 'coer-selectbox') {
+            this.onSelectboxChange.emit({ property, row: Tools.BreakReference(row), value });
+        }
+        else if (input === 'coer-numberbox') {
+            this.onTextboxChange.emit({ property, row: Tools.BreakReference(row), value });
+        }
+        Tools.Sleep(1000, `coerGridInputChange${indexRow}${columnName}`).then(_ => {
+            this._UpdateValue(this._value);
+            this.value_signal.set(this._value);
+        });
+    }
+    /** */
+    KeyupEnter(indexColumn, row, input, value) {
+        if (['coer-textbox', 'coer-numberbox', 'coer-selectbox'].includes(input)) {
+            this.onKeyupEnter.emit({
+                id: this._GetId(indexColumn, row.indexRow, input),
+                input, row: Tools.BreakReference(row), value
+            });
+            this.NextInput(indexColumn, row.indexRow);
+        }
+        else if (input == 'coer-textbox-search') {
+            this.onKeyupEnter.emit({
+                id: this._GetId(indexColumn, row.indexRow, input),
+                input, row: null, value
+            });
+        }
+    }
+    /** */
+    NextInput(indexColumn, indexRow) {
+        const INPUT_TEXT = this.columns().filter(x => Tools.IsNotNull(x.coerTextbox)).map(x => x.property);
+        const INPUT_NUMBER = this.columns().filter(x => Tools.IsNotNull(x.coerNumberbox)).map(x => x.property);
+        const INPUT_SELECT = this.columns().filter(x => Tools.IsNotNull(x.coerSelectbox)).map(x => x.property);
+        let index = 0;
+        const COLUMNS = [];
+        const INPUT_COLUMNS = [];
+        for (const { columnName } of this.gridColumns()) {
+            if (INPUT_TEXT.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerTextbox' });
+                INPUT_COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerTextbox' });
+            }
+            else if (INPUT_NUMBER.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerNumberbox' });
+                INPUT_COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerNumberbox' });
+            }
+            else if (INPUT_SELECT.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerSelectbox' });
+                INPUT_COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerSelectbox' });
+            }
+            else {
+                COLUMNS.push({ indexColumn: index, property: columnName, type: 'default-cell' });
+            }
+            ++index;
+        }
+        let lastRow = -1;
+        for (const { rows } of this.gridDataSource()) {
+            lastRow += rows.length;
+        }
+        let firstColumn = -1;
+        if (INPUT_COLUMNS.length > 0) {
+            firstColumn = [...INPUT_COLUMNS].shift().indexColumn;
+        }
+        let lastColumn = -1;
+        if (INPUT_COLUMNS.length > 0) {
+            lastColumn = [...INPUT_COLUMNS].pop().indexColumn;
+        }
+        //Is Last Row & Last Input Column?
+        if (indexRow == lastRow && indexColumn == lastColumn) {
+            this.onKeyupEnterLast.emit();
+        }
+        //Is Last Input Column?
+        else if (indexColumn == lastColumn) {
+            this.FocusInput((indexRow + 1), firstColumn);
+        }
+        //Next Column?
+        else {
+            for (index = (indexColumn + 1); index < COLUMNS.length; index++) {
+                for (const input of COLUMNS) {
+                    if (index == input.indexColumn && ['coerTextbox', 'coerNumberbox', 'coerSelectbox'].includes(input.type)) {
+                        this.FocusInput(indexRow, input.indexColumn);
+                        return;
+                    }
+                }
+            }
+        }
+    }
+    /** */
+    FocusInput(indexRow = -1, indexColumn = -1) {
+        Tools.Sleep(0, 'FocusInput').then(() => {
+            if (this._isDisabled())
+                return;
+            if (indexRow < 0 || indexColumn < 0) {
+                const INPUT_TEXT = this.columns().filter(x => Tools.IsNotNull(x.coerTextbox)).map(x => x.property);
+                const INPUT_NUMBER = this.columns().filter(x => Tools.IsNotNull(x.coerNumberbox)).map(x => x.property);
+                const INPUT_SELECT = this.columns().filter(x => Tools.IsNotNull(x.coerSelectbox)).map(x => x.property);
+                let index = 0;
+                const COLUMNS = [];
+                for (const { columnName } of this.gridColumns()) {
+                    if (INPUT_TEXT.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                        COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerTextbox' });
+                    }
+                    else if (INPUT_NUMBER.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                        COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerNumberbox' });
+                    }
+                    else if (INPUT_SELECT.some(property => property.toUpperCase() == columnName.toUpperCase())) {
+                        COLUMNS.push({ indexColumn: index, property: columnName, type: 'coerSelectbox' });
+                    }
+                    else {
+                        COLUMNS.push({ indexColumn: index, property: columnName, type: 'default-cell' });
+                    }
+                    ++index;
+                }
+                if (this.gridLength().dataSourceFiltered > 0) {
+                    const FIRST_INPUT_COLUMN = COLUMNS.find(x => ['coerTextbox', 'coerNumberbox', 'coerSelectbox'].includes(x.type));
+                    if (Tools.IsNotNull(FIRST_INPUT_COLUMN)) {
+                        this.FocusInput(0, FIRST_INPUT_COLUMN.indexColumn);
+                    }
+                }
+            }
+            else {
+                const id = this._GetId(indexRow, indexColumn);
+                let element;
+                this._indexFocus.set(indexRow);
+                //Focus Textbox
+                element = this.coerTextboxList().find(x => x.id == id);
+                if (element) {
+                    element.Select();
+                    return;
+                }
+                //Focus Numberbox
+                element = this.coerNumberboxList().find(x => x.id == id);
+                if (element) {
+                    element.Select();
+                    return;
+                }
+                //Focus Selectbox
+                element = this.coerSelectboxList().find(x => x.id == id);
+                if (element) {
+                    Tools.Sleep(100).then(_ => element.Focus());
+                    return;
+                }
+            }
+        });
+    }
+    /** */
+    FocusRow(callback) {
+        Tools.Sleep().then(_ => {
+            if (this._value.length > 0) {
+                const row = Tools.BreakReference(this._value.find(callback));
+                if (Tools.IsNotNull(row))
+                    this._indexFocus.set(row.indexRow);
+            }
+        });
+    }
+    /** */
+    async Sort(columnName) {
+        if (this.enableSort()) {
+            if (this._isLoading)
+                return;
+            this._isLoading = true;
+            this._isLoadingMessage = true;
+            const { direction } = this._sort();
+            let dataSource = Tools.BreakReference(this._value);
+            for (const checkbox of this.coerCheckboxList())
+                checkbox.Uncheck();
+            if (direction == 'descendant') {
+                Tools.SortByDesc(dataSource, columnName);
+                this._sort.set({ columnName, direction: 'ascendant', icon: 'fa-solid fa-arrow-down-short-wide' });
+            }
+            else {
+                Tools.SortBy(dataSource, columnName);
+                this._sort.set({ columnName, direction: 'descendant', icon: 'fa-solid fa-arrow-up-wide-short' });
+            }
+            let indexRow = 0;
+            dataSource = Tools.BreakReference(dataSource).map((item) => Object.assign(item, { indexRow: indexRow++ }));
+            this.SetValue(dataSource);
+            this._isLoading = false;
+            await Tools.Sleep();
+            for (const row of dataSource.filter((x) => x.checked)) {
+                this.CheckBy((x) => x.indexRow == row.indexRow);
+            }
+            this._isLoadingMessage = false;
+        }
+        return;
+    }
+    /** */
+    ClickCheck(id, checked, all, row = null) {
+        if (!this._isLoading)
+            Tools.Sleep().then(async (_) => {
+                this._isLoading = true;
+                let element = this.coerCheckboxList().find(x => x.id() == id);
+                if (Tools.IsNotNull(element)) {
+                    let response = { all, checked, rows: [] };
+                    //All Checkbox
+                    if (all) {
+                        if (checked)
+                            this.CheckAll();
+                        else
+                            this.UncheckAll();
+                        //Event
+                        response.rows = this.selectedItems();
+                        this.onCheckboxChange.emit(response);
+                    }
+                    //One Checkbox
+                    else {
+                        if (this._onlyOneCheck) {
+                            for (const row of this._value) {
+                                row.checked = false;
+                            }
+                            for (const checkbox of this.coerCheckboxList()) {
+                                if (checkbox.id() != id)
+                                    checkbox.Uncheck();
+                            }
+                        }
+                        this._value[row.indexRow].checked = checked;
+                        this.SetValue(this._value);
+                        //Mark All checkbox
+                        const checkboxAll = this.coerCheckboxList().find(x => x.id() == this._GetId(0, 0, 'checkboxAll'));
+                        if (this.value_signal().every((x) => x.checked)) {
+                            checkboxAll?.Check();
+                        }
+                        else {
+                            checkboxAll?.Uncheck();
+                        }
+                        //Event
+                        response.rows = [{ ...row }];
+                        this.onCheckboxChange.emit(response);
+                        this._isLoading = false;
+                    }
+                }
+            });
+    }
+    /** */
+    CheckAll() {
+        this._isLoading = true;
+        for (const row of this._value) {
+            row.checked = true;
+        }
+        this.SetValue(this._value);
+        for (const checkbox of this.coerCheckboxList()) {
+            checkbox.Check();
+        }
+        this._isLoading = false;
+    }
+    /** */
+    UncheckAll() {
+        this._isLoading = true;
+        for (const row of this._value) {
+            row.checked = false;
+        }
+        this.SetValue(this._value);
+        for (const checkbox of this.coerCheckboxList()) {
+            checkbox.Uncheck();
+        }
+        this._isLoading = false;
+    }
+    /** */
+    CheckBy(callback) {
+        Tools.Sleep().then(_ => {
+            if (this._value.length > 0) {
+                const rowList = Tools.BreakReference(this._value.filter(callback));
+                let element;
+                for (const { indexRow } of rowList) {
+                    element = this.coerCheckboxList().find(x => x.id() == this._GetId(indexRow, 0, 'checkbox'));
+                    if (Tools.IsNotNull(element)) {
+                        element?.Check();
+                    }
+                }
+            }
+        });
+    }
+    /** */
+    UncheckBy(callback) {
+        Tools.Sleep().then(_ => {
+            if (this._value.length > 0) {
+                const rowList = Tools.BreakReference(this._value.filter(callback));
+                let element;
+                for (const { indexRow } of rowList) {
+                    element = this.coerCheckboxList().find(x => x.id() == this._GetId(indexRow, 0, 'checkbox'));
+                    if (Tools.IsNotNull(element)) {
+                        element?.Uncheck();
+                    }
+                }
+            }
+        });
+    }
+    /** */
+    ClickOnRow(row) {
+        if (this._isDisabled())
+            return;
+        if (Tools.IsNotNull(this.checkbox.checkOnRow) && this.checkbox.checkOnRow) {
+            this.CheckBy((x) => x.indexRow == row.indexRow);
+        }
+        this.onClickRow.emit(row);
+    }
+    /** Inserts new elements at the start */
+    Unshift(row) {
+        const dataSource = Tools.BreakReference(this._value);
+        dataSource.unshift(row);
+        this.SetValue(dataSource);
+        this.FocusInput();
+    }
+    /** Appends new elements to the end */
+    Push(row) {
+        const dataSource = Tools.BreakReference(this._value);
+        dataSource.push(row);
+        this.SetValue(dataSource);
+        this.FocusInput();
+    }
+    /** Delete Row By index */
+    async DeleteRow(indexRow) {
+        const dataSource = Tools.BreakReference(this._value);
+        dataSource.splice(indexRow, 1);
+        this.SetValue(dataSource);
+    }
+    /** Delete row list by callback */
+    async DeleteRowsBy(callback) {
+        const indexList = Tools.BreakReference(this._value.filter(callback).map((item) => item.indexRow));
+        let dataSource = [];
+        for (const indexRow of indexList) {
+            dataSource = Tools.BreakReference(this._value);
+            dataSource.splice(indexRow, 1);
+            this.SetValue(dataSource);
+            await Tools.Sleep();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerGrid, 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=\"navigation\"\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) {\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=\"navigation\"\r\n                    icon=\"import\"\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) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"navigation\"\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        <!-- 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 [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">\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(!_isDisabled() && gridLength().dataSource <= 0) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n\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                                        [ignoreModel]=\"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\">\r\n                                    {{ _GetColumnName(header.columnName) }}\r\n                                    <i [class]=\"_GetShortIcon(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                                                [ignoreModel]=\"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 }\">\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                                                [propDisplay]=\"GetAttribute(header.columnName, row, 'propDisplay', '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]) }} </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=\"navigation\"\r\n                                                icon=\"delete\"\r\n                                                [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                [isInvisible]=\"_isDisabled()\"\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=\"navigation\"\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=\"navigation\"\r\n                                                icon=\"go\"\r\n                                                [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\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                            </tr>\r\n                        }\r\n                    </tbody>\r\n                }\r\n            </table>\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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-grid .text-blue{color:#0d6efd!important}div.coer-grid .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-grid .background-blue{background-color:#0d6efd!important}div.coer-grid .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-grid .border-blue{border-color:#0d6efd!important}div.coer-grid .text-gray{color:#6c757d!important}div.coer-grid .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-grid .background-gray{background-color:#6c757d!important}div.coer-grid .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-grid .border-gray{border-color:#6c757d!important}div.coer-grid .text-green{color:#198754!important}div.coer-grid .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-grid .background-green{background-color:#198754!important}div.coer-grid .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-grid .border-green{border-color:#198754!important}div.coer-grid .text-yellow{color:#ffc107!important}div.coer-grid .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-grid .background-yellow{background-color:#ffc107!important}div.coer-grid .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-grid .border-yellow{border-color:#ffc107!important}div.coer-grid .text-red{color:#dc3545!important}div.coer-grid .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-grid .background-red{background-color:#dc3545!important}div.coer-grid .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-grid .border-red{border-color:#dc3545!important}div.coer-grid .text-white{color:#f5f5f5!important}div.coer-grid .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-grid .background-white{background-color:#f5f5f5!important}div.coer-grid .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-grid .border-white{border-color:#f5f5f5!important}div.coer-grid .text-black{color:#252525!important}div.coer-grid .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-grid .background-black{background-color:#252525!important}div.coer-grid .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-grid .border-black{border-color:#252525!important}div.coer-grid .text-orange{color:#fd6031!important}div.coer-grid .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-grid .background-orange{background-color:#fd6031!important}div.coer-grid .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-grid .border-orange{border-color:#fd6031!important}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:#6c757d!important;color:#f5f5f5!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!important}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}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 tbody tr td.template{display:block!important;white-space:nowrap!important;cursor:pointer!important;height:31px}div.coer-grid table tbody tr td.template>div.template{display:block!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}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:#fd6031!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box i.spinner-border{width:15px!important;height:15px!important;color:#fd6031!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 #6c757d!important;border-bottom:1px solid #6c757d!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;gap:5px!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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "animation", "isLoading", "isDisabled", "isInvisible", "width", "minWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "path", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: CoerCheckbox, selector: "coer-checkbox", inputs: ["value", "id", "label", "labelPosition", "isDisabled", "isLoading", "isInvisible", "ignoreModel"], outputs: ["onChange"] }, { kind: "component", type: CoerNumberBox, selector: "coer-numberbox", inputs: ["value", "id", "label", "placeholder", "min", "max", "decimals", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isInvalid", "isValid", "isDisabled", "isReadonly", "isLoading", "selectOnFocus", "textPosition"], outputs: ["onKeyupEnter", "onInput"] }, { kind: "component", type: CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "dataSource", "propDisplay", "rowsByPage", "placeholder", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isInvalid", "isValid", "isDisabled", "isReadonly", "isLoading"], outputs: ["onSelected"] }, { kind: "component", type: CoerSwitch, selector: "coer-switch", inputs: ["value", "id", "label", "labelPosition", "isDisabled", "isLoading", "isInvisible", "tooltipPosition", "tooltip"], outputs: ["onChange"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "label", "placeholder", "minLength", "maxLength", "showSearchIcon", "showClearIcon", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "isInvalid", "isValid", "isDisabled", "isReadonly", "isLoading", "selectOnFocus", "textPosition"], outputs: ["onKeyupEnter", "onInput", "onClickClear"] }, { kind: "pipe", type: i9.HtmlPipe, name: "html" }, { kind: "pipe", type: i9.NumericFormatPipe, name: "numericFormat" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-grid', providers: [CONTROL_VALUE(CoerGrid)], 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=\"navigation\"\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) {\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=\"navigation\"\r\n                    icon=\"import\"\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) {\r\n            <div class=\"col-auto\">\r\n                <coer-button\r\n                    type=\"icon\"\r\n                    color=\"navigation\"\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        <!-- 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 [ngStyle]=\"{ 'height': _height, 'min-height': minHeight(), 'max-height': maxHeight() }\">\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(!_isDisabled() && gridLength().dataSource <= 0) {\r\n                <div class=\"no-data\"> No Data </div>\r\n            }\r\n\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                                        [ignoreModel]=\"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\">\r\n                                    {{ _GetColumnName(header.columnName) }}\r\n                                    <i [class]=\"_GetShortIcon(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                                                [ignoreModel]=\"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 }\">\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                                                [propDisplay]=\"GetAttribute(header.columnName, row, 'propDisplay', '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]) }} </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=\"navigation\"\r\n                                                icon=\"delete\"\r\n                                                [tooltip]=\"_GetTooltip('Delete', row)\"\r\n                                                [isInvisible]=\"_isDisabled()\"\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=\"navigation\"\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=\"navigation\"\r\n                                                icon=\"go\"\r\n                                                [tooltip]=\"_GetTooltip('Go to', row, 'detail')\"\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                            </tr>\r\n                        }\r\n                    </tbody>\r\n                }\r\n            </table>\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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-grid .text-blue{color:#0d6efd!important}div.coer-grid .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-grid .background-blue{background-color:#0d6efd!important}div.coer-grid .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-grid .border-blue{border-color:#0d6efd!important}div.coer-grid .text-gray{color:#6c757d!important}div.coer-grid .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-grid .background-gray{background-color:#6c757d!important}div.coer-grid .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-grid .border-gray{border-color:#6c757d!important}div.coer-grid .text-green{color:#198754!important}div.coer-grid .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-grid .background-green{background-color:#198754!important}div.coer-grid .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-grid .border-green{border-color:#198754!important}div.coer-grid .text-yellow{color:#ffc107!important}div.coer-grid .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-grid .background-yellow{background-color:#ffc107!important}div.coer-grid .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-grid .border-yellow{border-color:#ffc107!important}div.coer-grid .text-red{color:#dc3545!important}div.coer-grid .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-grid .background-red{background-color:#dc3545!important}div.coer-grid .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-grid .border-red{border-color:#dc3545!important}div.coer-grid .text-white{color:#f5f5f5!important}div.coer-grid .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-grid .background-white{background-color:#f5f5f5!important}div.coer-grid .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-grid .border-white{border-color:#f5f5f5!important}div.coer-grid .text-black{color:#252525!important}div.coer-grid .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-grid .background-black{background-color:#252525!important}div.coer-grid .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-grid .border-black{border-color:#252525!important}div.coer-grid .text-orange{color:#fd6031!important}div.coer-grid .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-grid .background-orange{background-color:#fd6031!important}div.coer-grid .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-grid .border-orange{border-color:#fd6031!important}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:#6c757d!important;color:#f5f5f5!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!important}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}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 tbody tr td.template{display:block!important;white-space:nowrap!important;cursor:pointer!important;height:31px}div.coer-grid table tbody tr td.template>div.template{display:block!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}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:#fd6031!important;width:70px!important;height:70px!important;font-size:20px!important;position:absolute!important}div.coer-grid td.check-box i.spinner-border{width:15px!important;height:15px!important;color:#fd6031!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 #6c757d!important;border-bottom:1px solid #6c757d!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;gap:5px!important}\n"] }]
+        }] });
+
+//import { navigation } from 'src/app/app-routing.sidenav';
+//import { Source } from 'src/app/modules/home/classes';
+//import { IAppNavigation, IGoBack } from 'src/app/modules/home/interfaces';
+class CoerPageTitle {
+    constructor() {
+        this.title = null;
+        this.showNavigation = true;
+        this.breadcrumbs = [];
+        this.goBack = { show: false };
+        this.showInformation = false;
+    }
+    get _icon() {
+        const MENU = Menu.Get();
+        if (MENU) {
+            const MENU_SELECTED = MENU.tree.shift();
+            if (MENU_SELECTED && MENU_SELECTED.icon) {
+                return MENU_SELECTED.icon;
+            }
+        }
+        return 'bi bi-house-door-fill';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CoerPageTitle, selector: "coer-page-title", inputs: { title: "title", showNavigation: "showNavigation", breadcrumbs: "breadcrumbs", goBack: "goBack", showInformation: "showInformation" }, 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        <button\r\n            *ngIf=\"showInformation\">\r\n            <i class=\"bi bi-info-circle\"></i>\r\n        </button>\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    <nav *ngIf=\"showNavigation\" 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            (click)=\"(goBack.click) ? goBack.click() : null\">\r\n            Go back\r\n        </a>\r\n    </nav>\r\n\r\n    <!-- Tooltip\r\n    <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n    [(visible)]=\"showModal\"\r\n    minWidth=\"500px\" minHeight=\"430px\"\r\n    [width]=\"width\" [height]=\"height\"\r\n    [hideOnOutsideClick]=\"true\"\r\n    [resizeEnabled]=\"false\"\r\n    [dragEnabled]=\"true\"\r\n    (onHidden)=\"(showModal = false)\"\r\n    >\r\n\r\n    -- Header --\r\n    <header *dxTemplate=\"let data of 'title'\">\r\n        <div class=\"modal-header\">\r\n            <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n            <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n        </div>\r\n    </header>\r\n\r\n    -- Body --\r\n    <section *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view width=\"100%\" height=\"100%\">\r\n            <ol class=\"list-group list-group-numbered\">\r\n                <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n                <li class=\"list-group-item\">\r\n                    For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n                </li>\r\n            </ol>\r\n        </dx-scroll-view>\r\n    </section>\r\n\r\n    -- Button --\r\n    <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n        <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n            <dx-button\r\n                coer-button\r\n                icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n                width=\"125px\" height=\"40px\"\r\n                (onClick)=\"(showModal = false)\"\r\n                color=\"red\"\r\n            ></dx-button>\r\n        </div>\r\n    </dxi-toolbar-item>\r\n</dx-popup> -->", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}header.coer-page-title .text-blue{color:#0d6efd!important}header.coer-page-title .text-blue-bold{color:#0d6efd!important;font-weight:700!important}header.coer-page-title .background-blue{background-color:#0d6efd!important}header.coer-page-title .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}header.coer-page-title .border-blue{border-color:#0d6efd!important}header.coer-page-title .text-gray{color:#6c757d!important}header.coer-page-title .text-gray-bold{color:#6c757d!important;font-weight:700!important}header.coer-page-title .background-gray{background-color:#6c757d!important}header.coer-page-title .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}header.coer-page-title .border-gray{border-color:#6c757d!important}header.coer-page-title .text-green{color:#198754!important}header.coer-page-title .text-green-bold{color:#198754!important;font-weight:700!important}header.coer-page-title .background-green{background-color:#198754!important}header.coer-page-title .background-border-green{background-color:#198754!important;border-color:#198754!important}header.coer-page-title .border-green{border-color:#198754!important}header.coer-page-title .text-yellow{color:#ffc107!important}header.coer-page-title .text-yellow-bold{color:#ffc107!important;font-weight:700!important}header.coer-page-title .background-yellow{background-color:#ffc107!important}header.coer-page-title .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}header.coer-page-title .border-yellow{border-color:#ffc107!important}header.coer-page-title .text-red{color:#dc3545!important}header.coer-page-title .text-red-bold{color:#dc3545!important;font-weight:700!important}header.coer-page-title .background-red{background-color:#dc3545!important}header.coer-page-title .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}header.coer-page-title .border-red{border-color:#dc3545!important}header.coer-page-title .text-white{color:#f5f5f5!important}header.coer-page-title .text-white-bold{color:#f5f5f5!important;font-weight:700!important}header.coer-page-title .background-white{background-color:#f5f5f5!important}header.coer-page-title .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}header.coer-page-title .border-white{border-color:#f5f5f5!important}header.coer-page-title .text-black{color:#252525!important}header.coer-page-title .text-black-bold{color:#252525!important;font-weight:700!important}header.coer-page-title .background-black{background-color:#252525!important}header.coer-page-title .background-border-black{background-color:#252525!important;border-color:#252525!important}header.coer-page-title .border-black{border-color:#252525!important}header.coer-page-title .text-orange{color:#fd6031!important}header.coer-page-title .text-orange-bold{color:#fd6031!important;font-weight:700!important}header.coer-page-title .background-orange{background-color:#fd6031!important}header.coer-page-title .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}header.coer-page-title .border-orange{border-color:#fd6031!important}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:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:#0d6efd!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}header.coer-page-title li.list-group-item a{color:#fd6031!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerPageTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-page-title', template: "<header class=\"coer-page-title\" title=''>\r\n    <h2>\r\n        <span> {{ title }} </span>\r\n\r\n        <!-- Button Information -->\r\n        <button\r\n            *ngIf=\"showInformation\">\r\n            <i class=\"bi bi-info-circle\"></i>\r\n        </button>\r\n    </h2>\r\n\r\n    <!-- Navigation -->\r\n    <nav *ngIf=\"showNavigation\" 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            (click)=\"(goBack.click) ? goBack.click() : null\">\r\n            Go back\r\n        </a>\r\n    </nav>\r\n\r\n    <!-- Tooltip\r\n    <dx-tooltip coer-tooltip target=\"#btn-information\" text='Information'></dx-tooltip> -->\r\n</header>\r\n\r\n\r\n<!-- Information\r\n<dx-popup\r\n    [(visible)]=\"showModal\"\r\n    minWidth=\"500px\" minHeight=\"430px\"\r\n    [width]=\"width\" [height]=\"height\"\r\n    [hideOnOutsideClick]=\"true\"\r\n    [resizeEnabled]=\"false\"\r\n    [dragEnabled]=\"true\"\r\n    (onHidden)=\"(showModal = false)\"\r\n    >\r\n\r\n    -- Header --\r\n    <header *dxTemplate=\"let data of 'title'\">\r\n        <div class=\"modal-header\">\r\n            <h5> <i [class]=\"informationIcon\" [style]=\"{ 'color': informationIconColor }\"></i> {{ informationTitle }} </h5>\r\n            <button (click)=\"(showModal = false)\" class=\"btn btn-close\"></button>\r\n        </div>\r\n    </header>\r\n\r\n    -- Body --\r\n    <section *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view width=\"100%\" height=\"100%\">\r\n            <ol class=\"list-group list-group-numbered\">\r\n                <li class=\"list-group-item\">Respects the order of the columns like the template.</li>\r\n\r\n                <li class=\"list-group-item\">\r\n                    For more information<a [href]=\"urlTemplate\">click here </a>to download the template\r\n                </li>\r\n            </ol>\r\n        </dx-scroll-view>\r\n    </section>\r\n\r\n    -- Button --\r\n    <dxi-toolbar-item toolbar=\"bottom\" location=\"after\">\r\n        <div *dxTemplate=\"let data of 'menu-item'\" class=\"h-100\">\r\n            <dx-button\r\n                coer-button\r\n                icon=\"fa-solid fa-xmark\" text=\"CLOSE\"\r\n                width=\"125px\" height=\"40px\"\r\n                (onClick)=\"(showModal = false)\"\r\n                color=\"red\"\r\n            ></dx-button>\r\n        </div>\r\n    </dxi-toolbar-item>\r\n</dx-popup> -->", styles: ["header.coer-page-title{margin:15px 30px 0}header.coer-page-title *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}header.coer-page-title .text-blue{color:#0d6efd!important}header.coer-page-title .text-blue-bold{color:#0d6efd!important;font-weight:700!important}header.coer-page-title .background-blue{background-color:#0d6efd!important}header.coer-page-title .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}header.coer-page-title .border-blue{border-color:#0d6efd!important}header.coer-page-title .text-gray{color:#6c757d!important}header.coer-page-title .text-gray-bold{color:#6c757d!important;font-weight:700!important}header.coer-page-title .background-gray{background-color:#6c757d!important}header.coer-page-title .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}header.coer-page-title .border-gray{border-color:#6c757d!important}header.coer-page-title .text-green{color:#198754!important}header.coer-page-title .text-green-bold{color:#198754!important;font-weight:700!important}header.coer-page-title .background-green{background-color:#198754!important}header.coer-page-title .background-border-green{background-color:#198754!important;border-color:#198754!important}header.coer-page-title .border-green{border-color:#198754!important}header.coer-page-title .text-yellow{color:#ffc107!important}header.coer-page-title .text-yellow-bold{color:#ffc107!important;font-weight:700!important}header.coer-page-title .background-yellow{background-color:#ffc107!important}header.coer-page-title .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}header.coer-page-title .border-yellow{border-color:#ffc107!important}header.coer-page-title .text-red{color:#dc3545!important}header.coer-page-title .text-red-bold{color:#dc3545!important;font-weight:700!important}header.coer-page-title .background-red{background-color:#dc3545!important}header.coer-page-title .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}header.coer-page-title .border-red{border-color:#dc3545!important}header.coer-page-title .text-white{color:#f5f5f5!important}header.coer-page-title .text-white-bold{color:#f5f5f5!important;font-weight:700!important}header.coer-page-title .background-white{background-color:#f5f5f5!important}header.coer-page-title .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}header.coer-page-title .border-white{border-color:#f5f5f5!important}header.coer-page-title .text-black{color:#252525!important}header.coer-page-title .text-black-bold{color:#252525!important;font-weight:700!important}header.coer-page-title .background-black{background-color:#252525!important}header.coer-page-title .background-border-black{background-color:#252525!important;border-color:#252525!important}header.coer-page-title .border-black{border-color:#252525!important}header.coer-page-title .text-orange{color:#fd6031!important}header.coer-page-title .text-orange-bold{color:#fd6031!important;font-weight:700!important}header.coer-page-title .background-orange{background-color:#fd6031!important}header.coer-page-title .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}header.coer-page-title .border-orange{border-color:#fd6031!important}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:25px;font-size:small;background-color:#f5f5f5;display:flex;align-items:center;justify-content:space-between}header.coer-page-title ol,header.coer-page-title a,header.coer-page-title .bi-info-circle{margin:0;padding-left:5px;text-decoration:none;color:#0d6efd!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}header.coer-page-title li.list-group-item a{color:#fd6031!important}header.coer-page-title button{border:none;outline:none;background-color:transparent;padding-right:8px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], showNavigation: [{
+                type: Input
+            }], breadcrumbs: [{
+                type: Input
+            }], goBack: [{
+                type: Input
+            }], showInformation: [{
+                type: Input
+            }] } });
+
+class CoerTab {
+    constructor() {
+        //Variables
+        this._id = Tools.GetGuid('coer-tab');
+        this._selectedIndex = 0;
+        this.matTabGroup = viewChild.required('matTabGroup');
+        this._tooltipList = [];
+        //Inputs
+        this.height = input('auto');
+        this.minHeight = input('300px');
+        this.maxHeight = input('auto');
+        //Computed
+        this.contentList = computed(() => Array.from(this.contentRef._results));
+        //Outputs
+        this.onSelectedTab = output();
+    }
+    set selectedIndex(value) {
+        if (Tools.IsNotNull(value)) {
+            this._selectedIndex = value;
+        }
+    }
+    set alignTabs(value) {
+        if (Tools.IsNotNull(this._matTabGroup)) {
+            if (Tools.IsNotNull(value)) {
+                this._matTabGroup.removeAttribute('mat-align-tabs');
+                Tools.Sleep().then(() => {
+                    this._matTabGroup.setAttribute('mat-align-tabs', value);
+                });
+            }
+        }
+        else
+            Tools.Sleep().then(() => this.alignTabs = value);
+    }
+    ngOnInit() {
+        this._matTabGroup = this.matTabGroup()._elementRef.nativeElement;
+    }
+    ngOnDestroy() {
+        for (const _tooltip of this._tooltipList) {
+            _tooltip.tooltip?.dispose();
+        }
+    }
+    /** */
+    SelectedIndexChange(selectedIndex) {
+        this._selectedIndex = selectedIndex;
+        this.onSelectedTab.emit(this.contentList()[selectedIndex]);
+    }
+    /** */
+    GetTitle(tab) {
+        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();
+    }
+    /** */
+    SelectTabBy(callback) {
+        const index = this.contentList().findIndex(callback);
+        if (index >= 0)
+            this._selectedIndex = 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: "17.3.12", ngImport: i0, type: CoerTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerTab, 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-tab .text-blue{color:#0d6efd!important}div.coer-tab .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-tab .background-blue{background-color:#0d6efd!important}div.coer-tab .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-tab .border-blue{border-color:#0d6efd!important}div.coer-tab .text-gray{color:#6c757d!important}div.coer-tab .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-tab .background-gray{background-color:#6c757d!important}div.coer-tab .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-tab .border-gray{border-color:#6c757d!important}div.coer-tab .text-green{color:#198754!important}div.coer-tab .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-tab .background-green{background-color:#198754!important}div.coer-tab .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-tab .border-green{border-color:#198754!important}div.coer-tab .text-yellow{color:#ffc107!important}div.coer-tab .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-tab .background-yellow{background-color:#ffc107!important}div.coer-tab .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-tab .border-yellow{border-color:#ffc107!important}div.coer-tab .text-red{color:#dc3545!important}div.coer-tab .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-tab .background-red{background-color:#dc3545!important}div.coer-tab .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-tab .border-red{border-color:#dc3545!important}div.coer-tab .text-white{color:#f5f5f5!important}div.coer-tab .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-tab .background-white{background-color:#f5f5f5!important}div.coer-tab .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-tab .border-white{border-color:#f5f5f5!important}div.coer-tab .text-black{color:#252525!important}div.coer-tab .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-tab .background-black{background-color:#252525!important}div.coer-tab .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-tab .border-black{border-color:#252525!important}div.coer-tab .text-orange{color:#fd6031!important}div.coer-tab .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-tab .background-orange{background-color:#fd6031!important}div.coer-tab .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-tab .border-orange{border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid whitesmoke!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:#fd6031!important;border-color:#fd6031!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: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$4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i3$3.LifeCycleDirective, selector: "[lifecycle]", outputs: ["OnChanges", "onInit", "afterViewInit", "onDestroy"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-tab', 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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-tab .text-blue{color:#0d6efd!important}div.coer-tab .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-tab .background-blue{background-color:#0d6efd!important}div.coer-tab .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-tab .border-blue{border-color:#0d6efd!important}div.coer-tab .text-gray{color:#6c757d!important}div.coer-tab .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-tab .background-gray{background-color:#6c757d!important}div.coer-tab .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-tab .border-gray{border-color:#6c757d!important}div.coer-tab .text-green{color:#198754!important}div.coer-tab .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-tab .background-green{background-color:#198754!important}div.coer-tab .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-tab .border-green{border-color:#198754!important}div.coer-tab .text-yellow{color:#ffc107!important}div.coer-tab .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-tab .background-yellow{background-color:#ffc107!important}div.coer-tab .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-tab .border-yellow{border-color:#ffc107!important}div.coer-tab .text-red{color:#dc3545!important}div.coer-tab .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-tab .background-red{background-color:#dc3545!important}div.coer-tab .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-tab .border-red{border-color:#dc3545!important}div.coer-tab .text-white{color:#f5f5f5!important}div.coer-tab .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-tab .background-white{background-color:#f5f5f5!important}div.coer-tab .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-tab .border-white{border-color:#f5f5f5!important}div.coer-tab .text-black{color:#252525!important}div.coer-tab .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-tab .background-black{background-color:#252525!important}div.coer-tab .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-tab .border-black{border-color:#252525!important}div.coer-tab .text-orange{color:#fd6031!important}div.coer-tab .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-tab .background-orange{background-color:#fd6031!important}div.coer-tab .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-tab .border-orange{border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid whitesmoke!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:#fd6031!important;border-color:#fd6031!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: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
+            }] } });
+
+class CoerTextarea extends ControlValue {
+    constructor() {
+        super(...arguments);
+        //Component Value
+        this._value = '';
+        this.matFormField = viewChild.required('matFormField');
+        this.coerTextBox = viewChild.required('coerTextArea');
+        //Variables
+        this._id = Tools.GetGuid('coer-textArea');
+        this._isLoadingEvent = signal(false);
+        this.id = '';
+        this.label = input('');
+        this.placeholder = input('');
+        this.minLength = input(0);
+        this.maxLength = input(2500);
+        this.width = input('100%');
+        this.minWidth = input('190px');
+        this.maxWidth = input('100%');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.isInvalid = input(false);
+        this.isValid = input(false);
+        this.isDisabled = input(false);
+        this.isReadonly = input(false);
+        this.isLoading = input(false);
+        this.showFooter = input(true);
+        this.resize = input(false);
+        this.textPosition = input('left');
+        //Outputs
+        this.onInput = output();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
+        });
+        //computed
+        this.floatLabel = computed(() => {
+            return this.label() == '' ? 'always' : 'auto';
+        });
+        //computed
+        this.paddingRight = computed(() => {
+            return this.isInvalid() || this.isValid()
+                ? '18px' : '0px';
+        });
+    }
+    //Inputs
+    set value(value) {
+        if (Tools.IsNull(value))
+            value = '';
+        this.SetValue(value);
+    }
+    ngOnInit() {
+        this.SetEvents();
+    }
+    //getter
+    get value() {
+        return this._value;
+    }
+    //getter
+    get footer() {
+        return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
+    }
+    /** */
+    SetEvents() {
+        Tools.Sleep().then(() => {
+            this.element = document.getElementById(this._id);
+            if (this.element) {
+                this.element.addEventListener('focus', () => {
+                    if (!this._isEnable())
+                        this.Blur();
+                });
+                this.element.addEventListener('blur', () => this.Blur());
+                this.element.addEventListener('input', () => {
+                    Tools.Sleep().then(() => {
+                        const value = this.coerTextBox().nativeElement.value;
+                        if (this._isEnable())
+                            this.onInput.emit(value);
+                    });
+                });
+                this.element.addEventListener('paste', () => {
+                    Tools.Sleep().then(() => {
+                        this.SetValue(this._value.toString().trim());
+                    });
+                });
+            }
+        });
+    }
+    /** */
+    Focus(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Select(timeout = 0) {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable()) {
+                this.element.focus();
+                this.element.select();
+            }
+            this._isLoadingEvent.set(false);
+        });
+    }
+    /** */
+    Blur() {
+        if (this._isLoadingEvent())
+            return;
+        else
+            this._isLoadingEvent.set(true);
+        Tools.Sleep().then(() => {
+            if (this.element) {
+                this.element.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);
+        });
+    }
+    /** */
+    Clear() {
+        this.SetValue('');
+        this.Focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerTextarea, selector: "coer-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", 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 }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", 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 }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { 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            }\"></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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-textarea .text-blue{color:#0d6efd!important}div.coer-textarea .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-textarea .background-blue{background-color:#0d6efd!important}div.coer-textarea .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-textarea .border-blue{border-color:#0d6efd!important}div.coer-textarea .text-gray{color:#6c757d!important}div.coer-textarea .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-textarea .background-gray{background-color:#6c757d!important}div.coer-textarea .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-textarea .border-gray{border-color:#6c757d!important}div.coer-textarea .text-green{color:#198754!important}div.coer-textarea .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-textarea .background-green{background-color:#198754!important}div.coer-textarea .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-textarea .border-green{border-color:#198754!important}div.coer-textarea .text-yellow{color:#ffc107!important}div.coer-textarea .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-textarea .background-yellow{background-color:#ffc107!important}div.coer-textarea .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-textarea .border-yellow{border-color:#ffc107!important}div.coer-textarea .text-red{color:#dc3545!important}div.coer-textarea .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-textarea .background-red{background-color:#dc3545!important}div.coer-textarea .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-textarea .border-red{border-color:#dc3545!important}div.coer-textarea .text-white{color:#f5f5f5!important}div.coer-textarea .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-textarea .background-white{background-color:#f5f5f5!important}div.coer-textarea .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-textarea .border-white{border-color:#f5f5f5!important}div.coer-textarea .text-black{color:#252525!important}div.coer-textarea .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-textarea .background-black{background-color:#252525!important}div.coer-textarea .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-textarea .border-black{border-color:#252525!important}div.coer-textarea .text-orange{color:#fd6031!important}div.coer-textarea .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-textarea .background-orange{background-color:#fd6031!important}div.coer-textarea .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-textarea .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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:#6c757d}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: "directive", type: i2$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"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], 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            }\"></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 *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-textarea .text-blue{color:#0d6efd!important}div.coer-textarea .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-textarea .background-blue{background-color:#0d6efd!important}div.coer-textarea .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-textarea .border-blue{border-color:#0d6efd!important}div.coer-textarea .text-gray{color:#6c757d!important}div.coer-textarea .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-textarea .background-gray{background-color:#6c757d!important}div.coer-textarea .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-textarea .border-gray{border-color:#6c757d!important}div.coer-textarea .text-green{color:#198754!important}div.coer-textarea .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-textarea .background-green{background-color:#198754!important}div.coer-textarea .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-textarea .border-green{border-color:#198754!important}div.coer-textarea .text-yellow{color:#ffc107!important}div.coer-textarea .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-textarea .background-yellow{background-color:#ffc107!important}div.coer-textarea .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-textarea .border-yellow{border-color:#ffc107!important}div.coer-textarea .text-red{color:#dc3545!important}div.coer-textarea .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-textarea .background-red{background-color:#dc3545!important}div.coer-textarea .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-textarea .border-red{border-color:#dc3545!important}div.coer-textarea .text-white{color:#f5f5f5!important}div.coer-textarea .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-textarea .background-white{background-color:#f5f5f5!important}div.coer-textarea .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-textarea .border-white{border-color:#f5f5f5!important}div.coer-textarea .text-black{color:#252525!important}div.coer-textarea .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-textarea .background-black{background-color:#252525!important}div.coer-textarea .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-textarea .border-black{border-color:#252525!important}div.coer-textarea .text-orange{color:#fd6031!important}div.coer-textarea .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-textarea .background-orange{background-color:#fd6031!important}div.coer-textarea .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-textarea .border-orange{border-color:#fd6031!important}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:#fd6031;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:#252525!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:#fd6031!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:#198754!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:#dc3545!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:#6c757d}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
+            }], id: [{
+                type: Input
+            }] } });
+
+class ComponentsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, declarations: [CoerButton,
+            CoerCheckbox,
+            CoerFilebox,
+            CoerForm,
+            CoerGrid,
+            CoerModal,
+            CoerNumberBox,
+            CoerPageTitle,
+            CoerSelectbox,
+            CoerSwitch,
+            CoerTab,
+            CoerTextarea,
+            CoerTextBox], imports: [CommonModule,
+            RouterModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatCheckboxModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatSlideToggleModule,
+            MatTabsModule,
+            DirectivesModule,
+            PipesModule], exports: [CoerButton,
+            CoerCheckbox,
+            CoerFilebox,
+            CoerForm,
+            CoerGrid,
+            CoerModal,
+            CoerNumberBox,
+            CoerPageTitle,
+            CoerSelectbox,
+            CoerSwitch,
+            CoerTab,
+            CoerTextarea,
+            CoerTextBox] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
+            RouterModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatCheckboxModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatSlideToggleModule,
+            MatTabsModule,
+            DirectivesModule,
+            PipesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSlideToggleModule,
+                        MatTabsModule,
+                        DirectivesModule,
+                        PipesModule
+                    ],
+                    declarations: [
+                        CoerButton,
+                        CoerCheckbox,
+                        CoerFilebox,
+                        CoerForm,
+                        CoerGrid,
+                        CoerModal,
+                        CoerNumberBox,
+                        CoerPageTitle,
+                        CoerSelectbox,
+                        CoerSwitch,
+                        CoerTab,
+                        CoerTextarea,
+                        CoerTextBox,
+                    ],
+                    exports: [
+                        CoerButton,
+                        CoerCheckbox,
+                        CoerFilebox,
+                        CoerForm,
+                        CoerGrid,
+                        CoerModal,
+                        CoerNumberBox,
+                        CoerPageTitle,
+                        CoerSelectbox,
+                        CoerSwitch,
+                        CoerTab,
+                        CoerTextarea,
+                        CoerTextBox,
+                    ]
+                }]
+        }] });
+
+const GridTemplates = {
+    /** Template for boolean property */
+    isActiveTemplate: (item) => {
+        if (item.value) {
+            return `
+                <span class='text-green-bold'>
+                    <i class="fa-solid fa-circle-check"></i> Active
+                </span>
+            `;
+        }
+        else {
+            return `
+                <span class='text-gray-bold'>
+                    <i class="fa-solid fa-circle-minus"></i> Disabled
+                </span>
+            `;
+        }
+    },
+    /** Template for boolean property */
+    coerSwitchTemplate: (item) => ({
+        isInput: true,
+        tooltip: `${item.value ? 'Active' : 'Disabled'}`
+    }),
+    /** Template for text property */
+    coerTextboxTemplate: (item) => ({
+        isInput: true,
+        isInvalid: item.value.length <= 0
+    })
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CoerButton, CoerCheckbox, CoerFilebox, CoerForm, CoerGrid, CoerModal, CoerNumberBox, CoerPageTitle, CoerSelectbox, CoerSwitch, CoerTab, CoerTextBox, CoerTextarea, ComponentsModule, GridTemplates };
+//# sourceMappingURL=coer-elements-components.mjs.map