coer-elements 0.0.22 → 0.0.23

package/fesm2022/coer-elements.mjs

@@ -1,4085 +1,4 @@
-import * as i0 from '@angular/core';
-import { input, Directive, output, NgModule, Pipe, signal, Component, EventEmitter, computed, Input, Output, forwardRef, ContentChildren, inject, viewChild, viewChildren, ViewChild, Inject } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/router';
-import { RouterModule, Router, ActivatedRoute } from '@angular/router';
-import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@angular/platform-browser';
-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 * as bootstrap from 'bootstrap';
-import { Tooltip, Modal } from 'bootstrap';
-import Swal from 'sweetalert2';
-import * as XLSX from 'xlsx';
-import { Observable } from 'rxjs';
-import moment from 'moment';
-import { HttpClient, HttpRequest } from '@angular/common/http';
-
-class CoerRefDirective {
-    constructor(template) {
-        this.template = template;
-        //Inputs
-        this.coerRef = input('');
-        this.title = input('');
-        this.icon = input('');
-        this.isDisabled = input(false);
-        this.show = input(true);
-        this.tooltip = input('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerRefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: CoerRefDirective, selector: "[coerRef]", inputs: { coerRef: { classPropertyName: "coerRef", publicName: "coerRef", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerRefDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[coerRef]'
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-class LifeCycleDirective {
-    constructor(element) {
-        this.element = element;
-        //Outputs
-        this.OnChanges = output();
-        this.onInit = output();
-        this.afterViewInit = output();
-        this.onDestroy = output();
-    }
-    ngOnChanges(changes) {
-        this.OnChanges.emit(changes);
-    }
-    ngOnInit() {
-        this.onInit.emit(this.element.nativeElement);
-    }
-    ngAfterViewInit() {
-        this.afterViewInit.emit(this.element.nativeElement);
-    }
-    ngOnDestroy() {
-        this.onDestroy.emit(this.element.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LifeCycleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LifeCycleDirective, selector: "[lifecycle]", outputs: { OnChanges: "OnChanges", onInit: "onInit", afterViewInit: "afterViewInit", onDestroy: "onDestroy" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LifeCycleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lifecycle]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
-class DirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DirectivesModule, declarations: [CoerRefDirective,
-            LifeCycleDirective], exports: [CoerRefDirective,
-            LifeCycleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DirectivesModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DirectivesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CoerRefDirective,
-                        LifeCycleDirective,
-                    ],
-                    exports: [
-                        CoerRefDirective,
-                        LifeCycleDirective
-                    ]
-                }]
-        }] });
-
-class HtmlPipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(value) {
-        return this.sanitizer.bypassSecurityTrustHtml(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HtmlPipe, name: "html" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'html' }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
-
-const reference_signal = signal({});
-const Tools = {
-    /** Generate a Guid */
-    GetGuid: (seed = 'coer-system') => {
-        let time = new Date().getTime();
-        seed = seed.toString().trim();
-        return seed + `-xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g, (c) => {
-            const random = (time + Math.random() * 16) % 16 | 0;
-            time = Math.floor(time / 16);
-            return (c == 'x' ? random : (random & 0x3 | 0x8)).toString(16);
-        });
-    },
-    /** Returns true if the value is null or undefined, false otherwise */
-    IsNull: (value) => {
-        if (value === undefined)
-            return true;
-        if (value === null)
-            return true;
-        return false;
-    },
-    /** Returns true if the value is not null or undefined, false otherwise */
-    IsNotNull: (value) => {
-        if (value === undefined)
-            return false;
-        if (value === null)
-            return false;
-        return true;
-    },
-    /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */
-    IsOnlyWhiteSpace: (value) => {
-        if (value === undefined)
-            return true;
-        if (value === null)
-            return true;
-        if (typeof value === 'string' && value.trim() === '')
-            return true;
-        return false;
-    },
-    /** Returns true if has string value and is not only whitespace, false otherwise */
-    IsNotOnlyWhiteSpace: (value) => {
-        if (value === undefined)
-            return false;
-        if (value === null)
-            return false;
-        if (typeof value === 'string' && value.trim() === '')
-            return false;
-        return true;
-    },
-    /** Break reference of a object or array */
-    BreakReference: (object) => {
-        if (object === null)
-            return object;
-        if (typeof object === 'undefined')
-            return object;
-        if (typeof object === 'string')
-            return object;
-        if (typeof object === 'number')
-            return object;
-        if (typeof object === 'boolean')
-            return object;
-        const OBJECT = JSON.parse(JSON.stringify(object));
-        return (Array.isArray(OBJECT)) ? [...OBJECT] : { ...OBJECT };
-    },
-    /** Clean extra whitespaces */
-    CleanUpBlanks: (text) => {
-        if (Tools.IsNull(text))
-            return '';
-        let worlds = String(text).split(' ');
-        worlds = worlds.filter(x => x.length > 0);
-        return worlds.join(' ');
-    },
-    /** Get properties of an object */
-    GetObjectProperties: (obj) => {
-        const properties = [];
-        if (obj === null)
-            return properties;
-        if (typeof obj === 'undefined')
-            return properties;
-        if (typeof obj === 'string')
-            return properties;
-        if (typeof obj === 'number')
-            return properties;
-        if (typeof obj === 'boolean')
-            return properties;
-        for (const property in obj)
-            properties.push(String(property));
-        return properties;
-    },
-    /**
-     * Set an index and merge more arrays of the same type
-     * */
-    SetIndex: (array, ...args) => {
-        let index = 0;
-        for (const arg of args) {
-            array = Tools.BreakReference(array).concat(Tools.BreakReference(arg));
-        }
-        return Tools.BreakReference(array).map(item => Object.assign({ index: index++ }, item));
-    },
-    /** Set First Char To Lower */
-    FirstCharToLower: (text) => {
-        if (Tools.IsOnlyWhiteSpace(text))
-            return '';
-        const textArray = [];
-        for (let i = 0; i < text.length; i++) {
-            if (i === 0)
-                textArray.push(text[i].toLowerCase());
-            else
-                textArray.push(text[i]);
-        }
-        return textArray.join('');
-    },
-    /** Set First Char To Upper */
-    FirstCharToUpper: (text) => {
-        if (Tools.IsOnlyWhiteSpace(text))
-            return '';
-        const textArray = [];
-        for (let i = 0; i < text.length; i++) {
-            if (i === 0)
-                textArray.push(text[i].toUpperCase());
-            else
-                textArray.push(text[i]);
-        }
-        return textArray.join('');
-    },
-    /** Sort an array in ascending order by property */
-    SortBy: (array, property, propertyType = 'string') => {
-        switch (propertyType) {
-            case 'string': {
-                return array.sort((x, y) => {
-                    if (String(x[property]).toUpperCase().trim() < String(y[property]).toUpperCase().trim())
-                        return -1;
-                    else if (String(x[property]).toUpperCase().trim() > String(y[property]).toUpperCase().trim())
-                        return 1;
-                    else
-                        return 0;
-                });
-            }
-            case 'number': {
-                return array.sort((x, y) => Number(x[property] - Number(y[property])));
-            }
-        }
-    },
-    /** Sort an array in descending order by property */
-    SortByDesc: (array, property, propertyType = 'string') => {
-        switch (propertyType) {
-            case 'string': {
-                return array.sort((x, y) => {
-                    if (String(x[property]).toUpperCase().trim() < String(y[property]).toUpperCase().trim())
-                        return 1;
-                    else if (String(x[property]).toUpperCase().trim() > String(y[property]).toUpperCase().trim())
-                        return -1;
-                    else
-                        return 0;
-                });
-            }
-            case 'number': {
-                return array.sort((x, y) => Number(Number(y[property])) - x[property]);
-            }
-        }
-    },
-    /** Return a string with forman numeric */
-    GetNumericFormat: (value, decimals = 0) => {
-        if (Tools.IsOnlyWhiteSpace(value) || isNaN(Number(value))) {
-            return '0';
-        }
-        let valueInteger = '';
-        let valueDecimal = '';
-        value = value.toString().replaceAll(' ', '');
-        if (value.includes('.') || (decimals > 0)) {
-            valueInteger = value.includes('.') ? value.split('.')[0] : value;
-            if (decimals > 0) {
-                const PADDING = decimals - valueDecimal.length;
-                valueDecimal = value.includes('.') ? value.split('.')[1] : '';
-                for (let i = 0; i < PADDING; i++)
-                    valueDecimal += '0';
-                valueDecimal = valueDecimal.substring(0, decimals);
-                valueDecimal = `.${valueDecimal}`;
-            }
-        }
-        else {
-            valueInteger = value;
-        }
-        let counter = 0;
-        const VALUE_INTEGER_ARRAY = [];
-        for (const char of valueInteger.split('').reverse()) {
-            if (counter == 3) {
-                VALUE_INTEGER_ARRAY.push(',');
-                counter = 0;
-            }
-            VALUE_INTEGER_ARRAY.push(char);
-            ++counter;
-        }
-        valueInteger = VALUE_INTEGER_ARRAY.reverse().join('');
-        return `${valueInteger}${valueDecimal}`;
-    },
-    /** Wait the time indicated */
-    Sleep: (milliseconds = 0, reference = null) => {
-        if (Tools.IsNull(reference)) {
-            return new Promise(Resolve => setTimeout(Resolve, milliseconds));
-        }
-        else
-            return new Promise(Resolve => {
-                reference = reference.replaceAll(' ', '_').toLowerCase();
-                if (reference_signal().hasOwnProperty(reference)) {
-                    clearInterval(reference_signal()[reference]);
-                }
-                reference_signal.set(Object.assign(reference_signal(), {
-                    [reference]: setTimeout(() => {
-                        Resolve();
-                        clearInterval(reference_signal()[reference]);
-                        const _reference = { ...reference_signal() };
-                        delete _reference[reference];
-                        reference_signal.set({ ..._reference });
-                    }, milliseconds)
-                }));
-            });
-    }
-};
-
-class NoImagePipe {
-    transform(value) {
-        const NO_IMAGE = '../../../images/no-image.png';
-        if (Tools.IsOnlyWhiteSpace(value)) {
-            return NO_IMAGE;
-        }
-        else if (typeof value === 'string') {
-            return value;
-        }
-        //Files.ConvertToBase64(value as File).then(base64 => { return base64 });
-        return NO_IMAGE;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NoImagePipe, name: "noImage" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoImagePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'noImage' }]
-        }] });
-
-class NumericFormatPipe {
-    transform(value, decimals = 0) {
-        return Tools.GetNumericFormat(value, decimals);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumericFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NumericFormatPipe, name: "numericFormat" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumericFormatPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'numericFormat' }]
-        }] });
-
-class PipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PipesModule, declarations: [HtmlPipe,
-            NoImagePipe,
-            NumericFormatPipe], exports: [HtmlPipe,
-            NoImagePipe,
-            NumericFormatPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PipesModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        HtmlPipe,
-                        NoImagePipe,
-                        NumericFormatPipe
-                    ],
-                    exports: [
-                        HtmlPipe,
-                        NoImagePipe,
-                        NumericFormatPipe
-                    ]
-                }]
-        }] });
-
-class CoerAlert {
-    /** */
-    Success(message = null, title = null, icon = null, autohide = 3000) {
-        //Title
-        if (!title || title == '')
-            title = 'Success';
-        const alertSuccessTitle = document.getElementById('alert-success-title');
-        alertSuccessTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-check-circle fa-beat');
-        const alertSuccessIcon = document.getElementById('alert-success-icon');
-        this.SetIcon(alertSuccessIcon, icon);
-        //Message
-        if (!message)
-            message = '';
-        const alertSuccessMessage = document.getElementById('alert-success-message');
-        alertSuccessMessage.innerHTML = message;
-        //Toast
-        const alertSuccess = document.getElementById('alert-success');
-        this.SetAutoHide(alertSuccess, autohide);
-        const toast = bootstrap.Toast.getOrCreateInstance(alertSuccess);
-        toast.show();
-    }
-    /** */
-    Error(message = null, title = null, icon = null, autohide = 3000) {
-        //Title
-        if (!title || title == '')
-            title = 'Error';
-        const alertErrorTitle = document.getElementById('alert-error-title');
-        alertErrorTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-exclamation-octagon fa-beat');
-        const alertErrorIcon = document.getElementById('alert-error-icon');
-        this.SetIcon(alertErrorIcon, icon);
-        //Message
-        if (!message)
-            message = '';
-        const alertErrorBody = document.getElementById('alert-error-message');
-        alertErrorBody.innerHTML = message;
-        //Toast
-        const alertError = document.getElementById('alert-error');
-        this.SetAutoHide(alertError, autohide);
-        const toast = bootstrap.Toast.getOrCreateInstance(alertError);
-        toast.show();
-    }
-    /** */
-    Info(message = null, title = null, icon = null, autohide = 3000) {
-        //Title
-        if (!title || title == '')
-            title = 'Info';
-        const alertInfoTitle = document.getElementById('alert-info-title');
-        alertInfoTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-info-circle fa-beat');
-        const alertInfoIcon = document.getElementById('alert-info-icon');
-        this.SetIcon(alertInfoIcon, icon);
-        //Message
-        if (!message)
-            message = '';
-        const alertInfoBody = document.getElementById('alert-info-message');
-        alertInfoBody.innerHTML = message;
-        //Toast
-        const alertInfo = document.getElementById('alert-info');
-        this.SetAutoHide(alertInfo, autohide);
-        const toast = bootstrap.Toast.getOrCreateInstance(alertInfo);
-        toast.show();
-    }
-    /** */
-    Warning(message = null, title = null, icon = null, autohide = 3000) {
-        //Title
-        if (!title || title == '')
-            title = 'Warning';
-        const alertWarningTitle = document.getElementById('alert-warning-title');
-        alertWarningTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-exclamation-triangle-fill fa-beat');
-        const alertWarningIcon = document.getElementById('alert-warning-icon');
-        this.SetIcon(alertWarningIcon, icon);
-        //Message
-        if (!message)
-            message = '';
-        const alertWarningBody = document.getElementById('alert-warning-message');
-        alertWarningBody.innerHTML = message;
-        //Toast
-        const alertWarning = document.getElementById('alert-warning');
-        this.SetAutoHide(alertWarning, autohide);
-        const toast = bootstrap.Toast.getOrCreateInstance(alertWarning);
-        toast.show();
-    }
-    /** */
-    Close(alert) {
-        return new Promise(Resolve => {
-            const element = document.getElementById(alert);
-            const toast = bootstrap.Toast.getOrCreateInstance(element);
-            toast.hide();
-            setTimeout(() => { Resolve(); }, 200);
-        });
-    }
-    /** */
-    Confirm(message = 'Proceed?', alertType = 'warning', icon = null) {
-        return new Promise(Resolve => {
-            let color;
-            let iconType;
-            switch (alertType) {
-                case 'danger':
-                    {
-                        if (icon == null)
-                            icon = 'bi-exclamation-octagon';
-                        iconType = 'error';
-                        color = '#dc3545'; //red
-                        break;
-                    }
-                    ;
-                case 'success':
-                    {
-                        if (icon == null)
-                            icon = 'bi-check-circle';
-                        iconType = 'info';
-                        color = '#198754'; //green
-                        break;
-                    }
-                    ;
-                case 'info':
-                    {
-                        if (icon == null)
-                            icon = 'bi-info-circle';
-                        iconType = 'error';
-                        color = '#0d6efd'; //blue
-                        break;
-                    }
-                    ;
-                default: {
-                    if (icon == null)
-                        icon = 'bi-exclamation-triangle-fill';
-                    iconType = 'warning';
-                    color = '#ffc107'; //yellow
-                    break;
-                }
-            }
-            switch (icon) {
-                case 'delete':
-                    icon = 'fa-regular fa-trash-can';
-                    break;
-            }
-            Swal.fire({
-                icon: iconType,
-                iconColor: 'transparent',
-                iconHtml: `<i class="${icon}" style="color: ${color};"></i>`,
-                html: message,
-                showConfirmButton: true,
-                confirmButtonText: 'Yes',
-                confirmButtonColor: color,
-                focusConfirm: true,
-                showDenyButton: true,
-                denyButtonColor: color,
-                focusDeny: false,
-                reverseButtons: true,
-                allowOutsideClick: false,
-                allowEscapeKey: false,
-                allowEnterKey: true,
-                customClass: {
-                    denyButton: 'sweet-alert-button',
-                    confirmButton: 'sweet-alert-button'
-                }
-            }).then(({ value }) => setTimeout(() => Resolve(value)));
-        });
-    }
-    /** */
-    SetIcon(element, icon) {
-        for (const item of [...element.classList.value.split(' ')]) {
-            if (item.length > 0) {
-                element.classList.remove(item);
-                element.classList.remove('q');
-            }
-        }
-        icon = icon.trim();
-        const hasWhiteSpaces = / /;
-        if (hasWhiteSpaces.test(icon)) {
-            const classes = icon.split(' ');
-            for (const icon of classes)
-                element.classList.add(icon);
-        }
-        else
-            element.classList.add(icon);
-    }
-    /** */
-    SetAutoHide(element, autohide) {
-        element.removeAttribute('data-bs-autohide');
-        element.removeAttribute('data-bs-delay');
-        if (autohide && autohide > 0) {
-            if (autohide < 1000)
-                autohide = 1000;
-            element.setAttribute('data-bs-autohide', 'true');
-            element.setAttribute('data-bs-delay', String(autohide));
-        }
-        else
-            element.setAttribute('data-bs-autohide', 'false');
-    }
-    /** */
-    GetIcon(title, icon, iconDefault) {
-        if (icon == null || icon == '') {
-            title = title.replaceAll(' ', '').toUpperCase();
-            switch (title) {
-                case 'ENABLED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
-                case 'ACTIVE': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
-                case 'ACTIVED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
-                case 'DISABLE': return 'fa-solid fa-thumbs-down fa-flip-horizontal';
-                case 'DISABLED': return 'fa-solid fa-thumbs-down fa-flip-horizontal';
-                case 'DELETE': return 'fa-regular fa-trash-can';
-                case 'DELETED': return 'fa-regular fa-trash-can';
-                default: return iconDefault;
-            }
-        }
-        return icon;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CoerAlert, selector: "coer-alert", ngImport: i0, template: "<aside class=\"toast-container coer-alert\">\r\n    <!-- Success -->\r\n    <div id=\"alert-success\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-success-icon\"></i>\r\n            <strong id=\"alert-success-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-success')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-success-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div id=\"alert-error\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-error-icon\"></i>\r\n            <strong id=\"alert-error-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-error')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-error-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Info -->\r\n    <div id=\"alert-info\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n       <div class=\"toast-header\">\r\n            <i id=\"alert-info-icon\"></i>\r\n            <strong id=\"alert-info-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-info')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-info-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Warning -->\r\n    <div id=\"alert-warning\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-warning-icon\"></i>\r\n            <strong id=\"alert-warning-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-warning')\" class=\"btn-close\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-warning-message\"></pre>\r\n        </div>\r\n    </div>\r\n</aside>", 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}aside.toast-container{position:fixed;bottom:0;right:0;padding:15px!important;z-index:2000!important}aside.toast-container i,aside.toast-container svg{display:flex;align-items:center}aside.toast-container strong{margin:0 auto 0 5px}aside.toast-container div.toast,aside.toast-container div.toast-header{border-top-left-radius:10px;border-top-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast-body{min-height:36px}aside.toast-container pre{font-family:Roboto,RobotoFallback,Noto Kufi Arabic,Helvetica,Arial,sans-serif;white-space:pre-wrap;font-size:medium}aside.toast-container button{margin:0 2px!important;width:10px!important;height:10px!important;box-shadow:none!important;outline:none!important;border:none!important}aside.toast-container div#alert-success div.toast-header,aside.toast-container div#alert-success div.toast-body{background-color:#198754}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:#0d6efd}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:#dc3545}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:#ffc107;border-color:#252525;color:#252525}aside.toast-container div#alert-success:hover,aside.toast-container div#alert-info:hover,aside.toast-container div#alert-error:hover,aside.toast-container div#alert-warning:hover{transform:scale(1.01);box-shadow:2px 2px 10px #789;cursor:default}button.sweet-alert-button{width:100px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 5px!important;outline:none!important;border:none!important;box-shadow:none!important}aside.toast-container>*{border:none!important;z-index:2000!important;margin:15px 0 0!important}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, decorators: [{
-            type: Component,
-            args: [{ selector: 'coer-alert', template: "<aside class=\"toast-container coer-alert\">\r\n    <!-- Success -->\r\n    <div id=\"alert-success\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-success-icon\"></i>\r\n            <strong id=\"alert-success-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-success')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-success-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div id=\"alert-error\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-error-icon\"></i>\r\n            <strong id=\"alert-error-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-error')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-error-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Info -->\r\n    <div id=\"alert-info\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n       <div class=\"toast-header\">\r\n            <i id=\"alert-info-icon\"></i>\r\n            <strong id=\"alert-info-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-info')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-info-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Warning -->\r\n    <div id=\"alert-warning\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-warning-icon\"></i>\r\n            <strong id=\"alert-warning-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-warning')\" class=\"btn-close\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-warning-message\"></pre>\r\n        </div>\r\n    </div>\r\n</aside>", 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}aside.toast-container{position:fixed;bottom:0;right:0;padding:15px!important;z-index:2000!important}aside.toast-container i,aside.toast-container svg{display:flex;align-items:center}aside.toast-container strong{margin:0 auto 0 5px}aside.toast-container div.toast,aside.toast-container div.toast-header{border-top-left-radius:10px;border-top-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast-body{min-height:36px}aside.toast-container pre{font-family:Roboto,RobotoFallback,Noto Kufi Arabic,Helvetica,Arial,sans-serif;white-space:pre-wrap;font-size:medium}aside.toast-container button{margin:0 2px!important;width:10px!important;height:10px!important;box-shadow:none!important;outline:none!important;border:none!important}aside.toast-container div#alert-success div.toast-header,aside.toast-container div#alert-success div.toast-body{background-color:#198754}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:#0d6efd}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:#dc3545}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:#ffc107;border-color:#252525;color:#252525}aside.toast-container div#alert-success:hover,aside.toast-container div#alert-info:hover,aside.toast-container div#alert-error:hover,aside.toast-container div#alert-warning:hover{transform:scale(1.01);box-shadow:2px 2px 10px #789;cursor:default}button.sweet-alert-button{width:100px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 5px!important;outline:none!important;border:none!important;box-shadow:none!important}aside.toast-container>*{border:none!important;z-index:2000!important;margin:15px 0 0!important}\n"] }]
-        }] });
-
-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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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
-            }] } });
-
-const CONTROL_VALUE = (component) => {
-    return {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: forwardRef(() => component),
-        multi: true
-    };
-};
-class ControlValue {
-    constructor() {
-        this._isTouched = false;
-    }
-    get isTouched() {
-        return this._isTouched;
-    }
-    /** */
-    SetValue(value) {
-        if (typeof this._UpdateValue === 'function') {
-            this._UpdateValue(value);
-        }
-        this._value = value;
-    }
-    /** */
-    SetTouched(isTouched) {
-        if (typeof this._IsTouched === 'function') {
-            this._IsTouched(isTouched);
-        }
-        this._isTouched = isTouched;
-    }
-    /** */
-    writeValue(value) {
-        this._value = value;
-    }
-    /** */
-    registerOnChange(callback) {
-        this._UpdateValue = callback;
-    }
-    /** */
-    registerOnTouched(callback) {
-        this._IsTouched = callback;
-    }
-    /** */
-    setDisabledState(isDisabled) { }
-}
-
-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$1.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 Files {
-    static { this.EXCEL_EXTENSIONS = ['xls', 'xlsx', 'csv']; }
-    /** Get Extension File */
-    static GetExtension(file) {
-        const fileName = file.name;
-        if (fileName.includes('.')) {
-            let worlds = fileName.split('.');
-            if (worlds.length > 0) {
-                let extension = worlds.pop();
-                extension = extension.trim().toLowerCase();
-                if (extension.length > 0)
-                    return extension;
-            }
-        }
-        return null;
-    }
-    /** Is Excel File */
-    static IsExcel(file) {
-        const EXTENSION = Files.GetExtension(file);
-        return Tools.IsNotNull(EXTENSION)
-            ? this.EXCEL_EXTENSIONS.includes(EXTENSION)
-            : false;
-    }
-    /** Read excel file */
-    static ReadExcel(file) {
-        return new Promise(Resolve => {
-            let columns = [];
-            let rows = [];
-            const reader = new FileReader();
-            reader.readAsArrayBuffer(file);
-            reader.onload = () => {
-                const dataBytes = new Uint8Array(reader.result);
-                if (dataBytes) {
-                    const workbook = XLSX.read(dataBytes, {});
-                    const sheet = workbook.Sheets[workbook.SheetNames[0]];
-                    let dataSheet = XLSX.utils.sheet_to_json(sheet, {
-                        header: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-                    });
-                    //Get Headers
-                    for (const column in dataSheet[0]) {
-                        columns.push(Tools.FirstCharToLower(String(dataSheet[0][column]).replaceAll(' ', '')));
-                    }
-                    //Get Rows
-                    rows = XLSX.utils.sheet_to_json(sheet, { header: columns });
-                    rows.shift();
-                    rows = rows.map(row => {
-                        const item = Tools.BreakReference(row);
-                        delete item['__rowNum__'];
-                        return item;
-                    });
-                }
-                Resolve({ columns, rows });
-            };
-            reader.onerror = () => { Resolve({ columns, rows }); };
-        });
-    }
-    /** Export to excel file */
-    static ExportExcel(data, fileName = 'coer_report', sheetName = 'Sheet1') {
-        sheetName = Tools.CleanUpBlanks(sheetName);
-        fileName = Tools.CleanUpBlanks(fileName);
-        if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx') || fileName.endsWith('.csv')) {
-            if (fileName.includes('.xls')) {
-                fileName = fileName.replaceAll('.xls', '.xlsx');
-            }
-            if (fileName.includes('.csv')) {
-                fileName = fileName.replaceAll('.csv', '.xlsx');
-            }
-        }
-        else {
-            fileName += '.xlsx';
-        }
-        const WORK_SHEET = XLSX.utils.json_to_sheet(data);
-        const WORK_BOOK = XLSX.utils.book_new();
-        XLSX.utils.book_append_sheet(WORK_BOOK, WORK_SHEET, sheetName);
-        XLSX.writeFile(WORK_BOOK, fileName);
-    }
-    /** Convert file to string base64 */
-    static ConvertToBase64(file) {
-        return new Promise(Resolve => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                Resolve(reader.result?.toString() || '');
-            };
-            reader.onerror = () => Resolve('');
-        });
-    }
-}
-
-const isModalOpenSIGNAL = signal(false);
-
-class Screen {
-    static get WINDOW_WIDTH() {
-        return window.innerWidth;
-    }
-    static get WINDOW_HEIGHT() {
-        return window.innerHeight;
-    }
-    static get DEVICE_WIDTH() {
-        return window.screen.width;
-    }
-    static get DEVICE_HEIGHT() {
-        return window.screen.height;
-    }
-    static get BREAKPOINT() {
-        if (window.innerWidth < 576)
-            return 'xs';
-        else if (window.innerWidth >= 576 && window.innerWidth < 768)
-            return 'sm';
-        else if (window.innerWidth >= 768 && window.innerWidth < 992)
-            return 'md';
-        else if (window.innerWidth >= 992 && window.innerWidth < 1200)
-            return 'lg';
-        else if (window.innerWidth >= 1200 && window.innerWidth < 1400)
-            return 'xl';
-        else
-            return 'xxl';
-    }
-    /** */
-    static { this.Resize = new Observable(subscriber => {
-        window.addEventListener("load", () => {
-            window.dispatchEvent(new Event('resize'));
-        });
-        window.onresize = () => {
-            subscriber.next({
-                width: this.WINDOW_WIDTH,
-                height: this.WINDOW_HEIGHT,
-                breakpoin: this.BREAKPOINT
-            });
-        };
-    }); }
-    /** */
-    static { this.BackButtonBrowser = new Observable(subscriber => {
-        window.addEventListener('popstate', popStateEvent => {
-            if (popStateEvent.state && popStateEvent.target) {
-                subscriber.next(popStateEvent.target.location.href);
-            }
-        });
-    }); }
-}
-
-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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: 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$1.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$1.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$1.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 DateTime {
-    /** Get UTC Offset */
-    static GetOffset() {
-        return moment().utcOffset();
-    }
-    /** YYYY-MM-DD HH:mm:ss */
-    static GetFormatDB(date) {
-        if ((typeof date === 'string'))
-            date = date.replaceAll('/', '-');
-        return moment(date).format('YYYY-MM-DD HH:mm:ss');
-    }
-    /** Convert UTC Date to Local Zone */
-    static ToLocalZone(date) {
-        date = DateTime.GetFormatDB(date);
-        return moment(date).add(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
-    }
-    /** Convert Local Zone Date to UTC */
-    static ToUTC(date) {
-        date = DateTime.GetFormatDB(date);
-        return moment(date).subtract(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
-    }
-    /** DD MMM YYYY */
-    static GetDateFormat(date) {
-        date = DateTime.GetFormatDB(date);
-        return moment(date).parseZone().local(true).format('DD MMM YYYY');
-    }
-}
-
-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$1.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: HtmlPipe, name: "html" }, { kind: "pipe", type: 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"] }]
-        }] });
-
-class Menu {
-    static { this.storage = 'COER-System'; }
-    /** */
-    static Set(menu) {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage)
-            storage = JSON.parse(storage);
-        storage = Object.assign({}, storage, { menu });
-        sessionStorage.setItem(this.storage, JSON.stringify(storage));
-    }
-    /** */
-    static Get() {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage) {
-            storage = JSON.parse(storage);
-            if (storage.hasOwnProperty('menu')) {
-                return storage.menu;
-            }
-        }
-        return null;
-    }
-}
-
-//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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.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: 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$1.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: [CoerAlert,
-            CoerButton,
-            CoerCheckbox,
-            CoerFilebox,
-            CoerForm,
-            CoerGrid,
-            CoerModal,
-            CoerNumberBox,
-            CoerPageTitle,
-            CoerSelectbox,
-            CoerSwitch,
-            CoerTab,
-            CoerTextarea,
-            CoerTextBox], imports: [CommonModule,
-            RouterModule,
-            FormsModule,
-            ReactiveFormsModule,
-            PipesModule,
-            MatButtonModule,
-            MatCheckboxModule,
-            MatInputModule,
-            MatFormFieldModule,
-            MatSlideToggleModule,
-            MatTabsModule,
-            DirectivesModule], exports: [CoerAlert,
-            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,
-            PipesModule,
-            MatButtonModule,
-            MatCheckboxModule,
-            MatInputModule,
-            MatFormFieldModule,
-            MatSlideToggleModule,
-            MatTabsModule,
-            DirectivesModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        PipesModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        MatSlideToggleModule,
-                        MatTabsModule,
-                        DirectivesModule
-                    ],
-                    declarations: [
-                        CoerAlert,
-                        CoerButton,
-                        CoerCheckbox,
-                        CoerFilebox,
-                        CoerForm,
-                        CoerGrid,
-                        CoerModal,
-                        CoerNumberBox,
-                        CoerPageTitle,
-                        CoerSelectbox,
-                        CoerSwitch,
-                        CoerTab,
-                        CoerTextarea,
-                        CoerTextBox,
-                    ],
-                    exports: [
-                        CoerAlert,
-                        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
-    })
-};
-
-const breakpointSIGNAL = signal(Screen?.BREAKPOINT || 'xs');
-
-const isLoadingSIGNAL = signal(false);
-
-const isMenuOpenSIGNAL = signal(false);
-
-const menuSIGNAL = signal([]);
-
-class Breadcrumbs {
-    static { this.storage = 'COER-System'; }
-    /** */
-    static Add(page, path) {
-        const breadcrumbs = this.Get();
-        const paths = breadcrumbs.map(item => item.path);
-        if (!paths.includes(path)) {
-            breadcrumbs.push({ page, path });
-            this.Save(breadcrumbs);
-        }
-    }
-    /** */
-    static Get() {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage) {
-            storage = JSON.parse(storage);
-            if (storage.hasOwnProperty('breadcrumbs')) {
-                return Tools.BreakReference(storage.breadcrumbs);
-            }
-        }
-        return [];
-    }
-    /** */
-    static GetFirst() {
-        const breadcrumbs = this.Get();
-        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
-    }
-    /** */
-    static Save(breadcrumbs) {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage)
-            storage = JSON.parse(storage);
-        storage = Object.assign({}, storage, { breadcrumbs });
-        sessionStorage.setItem(this.storage, JSON.stringify(storage));
-    }
-    /** */
-    static Remove(path) {
-        let breadcrumbs = this.Get();
-        const index = breadcrumbs.findIndex(x => x.path.toLowerCase().trim() === path.toLowerCase().trim());
-        if (index >= 0) {
-            breadcrumbs = Tools.BreakReference(breadcrumbs).splice(0, index + 1);
-            this.Save(breadcrumbs);
-        }
-    }
-    /** */
-    static SetLast(page, path) {
-        const breadcrumbs = this.Get();
-        if (breadcrumbs.length > 0) {
-            breadcrumbs[breadcrumbs.length - 1] = { page, path };
-            this.Save(breadcrumbs);
-        }
-    }
-    /** */
-    static RemoveLast() {
-        const breadcrumbs = this.Get();
-        if (breadcrumbs.length > 0) {
-            breadcrumbs.pop();
-            this.Save(breadcrumbs);
-        }
-    }
-}
-
-class Source {
-    static { this.storage = 'COER-System'; }
-    /** */
-    static Set(page) {
-        const ROUTER = inject(Router);
-        let path = ROUTER.url;
-        if (path.includes('?'))
-            path = path.split('?')[0];
-        Breadcrumbs.Add(page, path);
-        const breadcrumbs = Breadcrumbs.Get();
-        if (breadcrumbs.length >= 2) {
-            breadcrumbs.pop();
-            const breadcrumb = breadcrumbs.pop();
-            this.Save({ page: breadcrumb.page, path: breadcrumb.path });
-        }
-        else
-            this.Save(null);
-    }
-    /** */
-    static Save(source) {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage)
-            storage = JSON.parse(storage);
-        storage = Object.assign({}, storage, { source });
-        sessionStorage.setItem(this.storage, JSON.stringify(storage));
-    }
-    /** */
-    static Get() {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage) {
-            storage = JSON.parse(storage);
-            if (storage.hasOwnProperty('source')) {
-                return storage.source;
-            }
-        }
-        return null;
-    }
-    /** */
-    static GetRoot() {
-        const breadcrumbs = Breadcrumbs.Get();
-        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
-    }
-    /** */
-    static SetPageResponse(pageResponse) {
-        let storage = sessionStorage.getItem(this.storage);
-        storage = JSON.parse(storage);
-        storage = Object.assign({}, storage, { pageResponse });
-        sessionStorage.setItem(this.storage, JSON.stringify(storage));
-    }
-    /** */
-    static GetPageResponse() {
-        let storage = sessionStorage.getItem(this.storage);
-        if (storage) {
-            storage = JSON.parse(storage);
-            if (storage.hasOwnProperty('pageResponse')) {
-                return Tools.BreakReference(storage.pageResponse);
-            }
-        }
-        return null;
-    }
-    /** */
-    static ClearPageResponse() {
-        let storage = sessionStorage.getItem(this.storage);
-        storage = JSON.parse(storage);
-        if (storage.hasOwnProperty('pageResponse')) {
-            delete storage.pageResponse;
-        }
-        storage = Object.assign({}, storage);
-        sessionStorage.setItem(this.storage, JSON.stringify(storage));
-    }
-    /** */
-    static Reset() {
-        sessionStorage.removeItem(this.storage);
-    }
-}
-
-class Page {
-    constructor(page) {
-        //Injection
-        this.alert = inject(CoerAlert);
-        this.router = inject(Router);
-        this.activatedRoute = inject(ActivatedRoute);
-        /** */
-        this.isUpdate = false;
-        /** */
-        this.isLoading = false;
-        /** */
-        this.isReadyPage = false;
-        /** */
-        this.enableAnimations = false;
-        /** */
-        this.breadcrumbs = [];
-        /** */
-        this.pageResponse = null;
-        /** */
-        this.goBack = { show: false };
-        //Private Variables
-        this._page = '';
-        this._source = null;
-        this._preventDestroy = false;
-        /** */
-        this.GoBack = (path) => (() => {
-            if (path)
-                Breadcrumbs.Remove(path);
-            else
-                Breadcrumbs.RemoveLast();
-        });
-        this.SetPageName(page);
-        this.SetSource();
-        this.GetSource();
-        this.GetNavigation();
-        this.SetGoBack();
-        this.GetPageResponse();
-    }
-    ngAfterViewInit() {
-        this.routeParams = this.activatedRoute.snapshot.params;
-        this.queryParams = this.activatedRoute.snapshot.queryParams;
-        setTimeout(() => {
-            this.isReadyPage = true;
-            this.RunPage();
-            setTimeout(() => { this.enableAnimations = true; }, 1000);
-        });
-    }
-    ngOnDestroy() {
-        if (!this._preventDestroy)
-            Source.ClearPageResponse();
-    }
-    /** Main method. Starts after ngAfterViewInit() */
-    RunPage() { }
-    ;
-    /** Rename the last breadcrumb and update the url id */
-    SetPageName(name, id = null) {
-        this._page = name;
-        let path = this.router.url;
-        if (path.includes('?'))
-            path = path.split('?')[0];
-        if (id) {
-            const PATH_ARRAY = path.split('/');
-            const PATH_ID = Tools.BreakReference(PATH_ARRAY).pop();
-            if (PATH_ID) {
-                PATH_ARRAY[PATH_ARRAY.length - 1] = String(id);
-                path = PATH_ARRAY.join('/');
-            }
-        }
-        if (this.breadcrumbs.length > 0) {
-            this.breadcrumbs[this.breadcrumbs.length - 1].page = name;
-            this.breadcrumbs[this.breadcrumbs.length - 1].path = path;
-            Breadcrumbs.SetLast(name, path);
-        }
-        this.router.navigateByUrl(path);
-    }
-    /** */
-    SetSource() {
-        Source.Set(this._page);
-    }
-    /** */
-    GetSource() {
-        this._source = Source.Get();
-    }
-    /** */
-    GetPageResponse() {
-        this.pageResponse = Source.GetPageResponse();
-    }
-    /** */
-    GetNavigation() {
-        if (this._source) {
-            this.breadcrumbs = Breadcrumbs.Get().map(item => Object.assign({
-                page: item.page,
-                path: item.path,
-                click: this.GoBack(item.path)
-            }));
-        }
-        else
-            this.breadcrumbs = [{ page: this._page }];
-    }
-    /** */
-    SetGoBack() {
-        if (this._source) {
-            this.goBack = {
-                show: true,
-                path: this._source.path,
-                click: this.GoBack()
-            };
-        }
-    }
-    /** Navigate to previous page */
-    GoToSource(pageResponse = null) {
-        if (this._source) {
-            Breadcrumbs.RemoveLast();
-            this.SetPageResponse(pageResponse);
-            Tools.Sleep().then(_ => this.router.navigateByUrl(this._source.path));
-        }
-    }
-    ;
-    /** */
-    SetPageResponse(pageResponse = null) {
-        if (Tools.IsNotNull(pageResponse)) {
-            this._preventDestroy = true;
-            Source.SetPageResponse(pageResponse);
-        }
-    }
-    ;
-    /** */
-    ReloadPage() {
-        Breadcrumbs.RemoveLast();
-        setTimeout(() => window.location.reload());
-    }
-    /** */
-    Log(value, log = null) {
-        if (Tools.IsNotNull(log))
-            console.log({ log, value });
-        else
-            console.log(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Page, deps: [{ token: String }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Page, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Page, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [String]
-                }] }] });
-
-class Service {
-    constructor() {
-        //Injections
-        this.alert = inject(CoerAlert);
-        this.http = inject(HttpClient);
-        this.httpCode = {
-            Ok: 200,
-            Created: 201,
-            NoContent: 204,
-            BadRequest: 400,
-            Unauthorize: 401,
-            NotFound: 404,
-            NotAllowed: 405,
-            NotAcceptable: 406,
-            Conflict: 409,
-            PayloadTooLarge: 413,
-            InnerError: 500
-        };
-    }
-    /** */
-    ReleaseSubscription(subscription) {
-        if (subscription && !subscription.closed)
-            subscription.unsubscribe();
-    }
-    /** HTTP GET */
-    HTTP_GET(request) {
-        return new Promise(Resolve => {
-            this.ReleaseSubscription(this._GET$);
-            this._GET$ = this.http.request(new HttpRequest("GET", request.url, { params: request.queryParams, headers: request.headers })).subscribe({
-                next: (response) => {
-                    if (response.type > 0) {
-                        Resolve({
-                            body: Tools.BreakReference(response.body),
-                            status: response.status,
-                            message: response.statusText,
-                            ok: true
-                        });
-                    }
-                },
-                error: (httpError) => {
-                    this.ReleaseSubscription(this._GET$);
-                    this.AlertError(httpError, request.alertError);
-                    Resolve({
-                        body: {},
-                        status: httpError.status,
-                        message: httpError.error?.message || httpError.error,
-                        ok: false
-                    });
-                },
-                complete: () => {
-                    this.ReleaseSubscription(this._GET$);
-                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
-                        this.alert.Success(request.alertSuccess);
-                    }
-                }
-            });
-        });
-    }
-    /** HTTP POST */
-    HTTP_POST(request) {
-        return new Promise(Resolve => {
-            this.ReleaseSubscription(this._POST$);
-            this._POST$ = this.http.request(new HttpRequest("POST", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
-                next: (response) => {
-                    if (response.type > 0) {
-                        Resolve({
-                            body: Tools.BreakReference(response.body),
-                            status: response.status,
-                            message: response.statusText,
-                            ok: true
-                        });
-                    }
-                },
-                error: (httpError) => {
-                    this.ReleaseSubscription(this._POST$);
-                    this.AlertError(httpError, request.alertError);
-                    Resolve({
-                        body: {},
-                        status: httpError.status,
-                        message: httpError.error?.message || httpError.error,
-                        ok: false
-                    });
-                },
-                complete: () => {
-                    this.ReleaseSubscription(this._POST$);
-                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
-                        this.alert.Success(request.alertSuccess);
-                    }
-                }
-            });
-        });
-    }
-    /** HTTP PUT */
-    HTTP_PUT(request) {
-        return new Promise(Resolve => {
-            this.ReleaseSubscription(this._PUT$);
-            this._PUT$ = this.http.request(new HttpRequest("PUT", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
-                next: (response) => {
-                    if (response.type > 0) {
-                        Resolve({
-                            body: {},
-                            status: response.status,
-                            message: response.statusText,
-                            ok: true
-                        });
-                    }
-                },
-                error: (httpError) => {
-                    this.ReleaseSubscription(this._PUT$);
-                    this.AlertError(httpError, request.alertError);
-                    Resolve({
-                        body: {},
-                        status: httpError.status,
-                        message: httpError.error?.message || httpError.error,
-                        ok: false
-                    });
-                },
-                complete: () => {
-                    this.ReleaseSubscription(this._PUT$);
-                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
-                        this.alert.Success(request.alertSuccess, 'Updated', 'fa-solid fa-arrows-rotate fa-spin');
-                    }
-                }
-            });
-        });
-    }
-    /** HTTP PATCH */
-    HTTP_PATCH(request) {
-        return new Promise(Resolve => {
-            this.ReleaseSubscription(this._PATCH$);
-            this._PATCH$ = this.http.request(new HttpRequest("PATCH", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
-                next: (response) => {
-                    if (response.type > 0) {
-                        Resolve({
-                            body: {},
-                            status: response.status,
-                            message: response.statusText,
-                            ok: true
-                        });
-                    }
-                },
-                error: (httpError) => {
-                    this.ReleaseSubscription(this._PATCH$);
-                    this.AlertError(httpError, request.alertError);
-                    Resolve({
-                        body: {},
-                        status: httpError.status,
-                        message: httpError.error?.message || httpError.error,
-                        ok: false
-                    });
-                },
-                complete: () => {
-                    this.ReleaseSubscription(this._PATCH$);
-                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
-                        this.alert.Success(request.alertSuccess, 'Updated', 'fa-solid fa-arrows-rotate fa-spin');
-                    }
-                }
-            });
-        });
-    }
-    /** HTTP DELETE */
-    HTTP_DELETE(request) {
-        return new Promise(Resolve => {
-            this.ReleaseSubscription(this._DELETE$);
-            this._DELETE$ = this.http.request(new HttpRequest("DELETE", request.url, { params: request.queryParams, headers: request.headers })).subscribe({
-                next: (response) => {
-                    if (response.type > 0) {
-                        Resolve({
-                            body: {},
-                            status: response.status,
-                            message: response.statusText,
-                            ok: true
-                        });
-                    }
-                },
-                error: (httpError) => {
-                    this.ReleaseSubscription(this._DELETE$);
-                    this.AlertError(httpError, request.alertError);
-                    Resolve({
-                        body: {},
-                        status: httpError.status,
-                        message: httpError.error?.message || httpError.error,
-                        ok: false
-                    });
-                },
-                complete: () => {
-                    this.ReleaseSubscription(this._DELETE$);
-                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
-                        this.alert.Success(request.alertSuccess, 'Deleted', 'fa-regular fa-trash-can');
-                    }
-                }
-            });
-        });
-    }
-    /** */
-    AlertError(httpError, message) {
-        if (httpError.status >= 500) {
-            if (Tools.IsNotOnlyWhiteSpace(message)) {
-                this.alert.Error('', message, 'fa-solid fa-bug', null);
-            }
-        }
-        else if (httpError.status < 500) {
-            switch (httpError.status) {
-                case 400: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Bad Request', 'fa-regular fa-face-grin-beam-sweat fa-lg');
-                    break;
-                }
-                case 401: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Unauthorize', 'fa-regular fa-face-rolling-eyes fa-lg');
-                    break;
-                }
-                case 404: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Found', 'fa-regular fa-face-meh fa-lg');
-                    break;
-                }
-                case 405: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Allowed', 'fa-regular fa-face-grimace fa-lg');
-                    break;
-                }
-                case 406: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Acceptable', 'fa-regular fa-face-frown-open fa-lg');
-                    break;
-                }
-                case 409: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Conflict', 'fa-regular fa-face-dizzy fa-lg');
-                    break;
-                }
-                case 413: {
-                    this.alert.Warning(httpError.error?.message || httpError.error, 'Too Large', 'fa-regular fa-face-flushed fa-lg');
-                    break;
-                }
-                default: {
-                    if (httpError.status <= 0) {
-                        this.alert.Warning('Without Connection', 'WEB API DOWN', 'fa-solid fa-plug-circle-xmark fa-lg', null);
-                    }
-                    else
-                        this.alert.Warning(httpError.error?.message || httpError.error);
-                    break;
-                }
-            }
-        }
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
-
-export { Breadcrumbs, CONTROL_VALUE, CoerAlert, CoerButton, CoerCheckbox, CoerFilebox, CoerForm, CoerGrid, CoerModal, CoerNumberBox, CoerPageTitle, CoerRefDirective, CoerSelectbox, CoerSwitch, CoerTab, CoerTextBox, CoerTextarea, ComponentsModule, ControlValue, DateTime, DirectivesModule, Files, GridTemplates, HtmlPipe, LifeCycleDirective, Menu, NoImagePipe, NumericFormatPipe, Page, PipesModule, Screen, Service, Source, Tools, breakpointSIGNAL, isLoadingSIGNAL, isMenuOpenSIGNAL, isModalOpenSIGNAL, menuSIGNAL };
 //# sourceMappingURL=coer-elements.mjs.map