coer-elements 2.0.21 → 2.0.22

package/fesm2022/coer-elements-tools.mjs

@@ -12,8 +12,9 @@ import { HttpClient, HttpRequest } from '@angular/common/http';
 import { saveAs } from 'file-saver';
 
 const reference_signal = signal({});
+/** Generic Methods */
 const Tools = {
-    /** Generate a Guid */
+    /** Generates a guid */
     GetGuid: (seed = 'coer-system') => {
         let time = new Date().getTime();
         seed = seed.toString().trim();
@@ -31,18 +32,18 @@ const Tools = {
     IsNotNull: (value) => {
         return !Tools.IsNull(value);
     },
-    /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */
+    /** Returns true if the value is null or undefined or is an empty string or contains only whitespace, false otherwise */
     IsOnlyWhiteSpace: (value) => {
         return Tools.IsNull(value) || (typeof value === 'string' && value.trim() === '');
     },
-    /** Returns true if has string value and is not only whitespace, false otherwise */
+    /** Returns true if it has a string value and is not all whitespace, false otherwise */
     IsNotOnlyWhiteSpace: (value) => {
         return Tools.IsNotNull(value) && !Tools.IsOnlyWhiteSpace(value);
     },
-    /** Avoid Null value */
-    AvoidNull: (value, type = null) => {
+    /** Avoids null value and responds with the specified type */
+    AvoidNull: (value, type = 'string') => {
         if (typeof value === 'string') {
-            if (type === null || type === 'string') {
+            if (type === 'string') {
                 return (Tools.IsNotNull(value) ? value : '');
             }
             else if (type === 'number') {
@@ -53,146 +54,44 @@ const Tools = {
             }
         }
         if (typeof value === 'number') {
-            if (type === null || type === 'number') {
-                return (Tools.IsNotNull(value) ? value : 0);
-            }
-            else if (type === 'string') {
+            if (type === 'string') {
                 return (Tools.IsNotNull(value) ? String(value) : '0');
             }
+            else if (type === 'number') {
+                return (Tools.IsNotNull(value) ? value : 0);
+            }
             else if (type === 'boolean') {
                 return (Tools.IsNotNull(value) ? (value >= 1) : false);
             }
         }
         if (typeof value === "boolean") {
-            if (type === null || type === 'boolean') {
-                return (Tools.IsNotNull(value) ? value : false);
-            }
-            else if (type === 'string') {
+            if (type === 'string') {
                 return (Tools.IsNotNull(value) ? (value ? 'true' : 'false') : 'false');
             }
             else if (type === 'number') {
                 return (Tools.IsNotNull(value) ? (value ? 1 : 0) : 0);
             }
+            else if (type === 'boolean') {
+                return (Tools.IsNotNull(value) ? value : false);
+            }
         }
         switch (type) {
             case 'string': return '';
             case 'number': return 0;
             case 'boolean': return false;
-            default: return '';
         }
     },
     /** Break reference of a object or array */
     BreakReference: (object) => {
-        if (object === null)
-            return object;
-        if (typeof object === 'undefined')
+        if (Tools.IsNull(object) || ['string', 'number', 'boolean'].includes(typeof object))
             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 });
+        return JSON.parse(JSON.stringify(object));
     },
     /** Get properties of an object */
     GetPropertyList: (object) => {
-        const properties = [];
-        if (object === null)
-            return properties;
-        if (typeof object === 'undefined')
-            return properties;
-        if (typeof object === 'string')
-            return properties;
-        if (typeof object === 'number')
-            return properties;
-        if (typeof object === 'boolean')
-            return properties;
-        for (const property in object)
-            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));
-    },
-    /** 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}`;
+        return Tools.IsNotNull(object) && typeof object === 'object'
+            ? Object.keys(object)
+            : [];
     },
     /** Wait the time indicated */
     Sleep: (milliseconds = 0, reference = null) => {
@@ -216,31 +115,7 @@ const Tools = {
                 }));
             });
     },
-    /** */
-    Distinct: (array, ...args) => {
-        for (const arg of args) {
-            array = Tools.BreakReference(array).concat(Tools.BreakReference(arg));
-        }
-        return Array.from(new Set(array));
-    },
-    /** */
-    Except: (array, filter, ...properties) => {
-        const result = [];
-        for (const item of array) {
-            if (typeof item === 'object' && Tools.IsNotNull(properties) && properties.length > 0) {
-                if (!filter.some(x => x[properties[0]] === item[properties[0]])) {
-                    result.push(item);
-                }
-            }
-        }
-        return [...result];
-    },
-    /** */
-    IsNumber: (value) => {
-        return typeof value === 'number'
-            && !Number.isNaN(Number(value));
-    },
-    /** */
+    /** Send text to the computer's clipboard */
     Clipboard: (text, message = '', title = 'Copied') => {
         try {
             navigator.clipboard.writeText(text).then(() => {
@@ -250,10 +125,12 @@ const Tools = {
         catch {
             new CoerAlert().Warning('Unable to copy to clipboard', 'Quick Implement', 'bi bi-clipboard-fill');
         }
-    },
+    }
 };
 
+/** class to work with colors */
 class Colors {
+    /** Provides the fixed colors set by the coer-elements library */
     static get fixedColors() {
         return {
             blue: colorsSIGNAL().fixedColors.blue,
@@ -268,6 +145,7 @@ class Colors {
             purple: colorsSIGNAL().fixedColors.purple
         };
     }
+    /** Provides the action colors set in the application */
     static get actionColors() {
         return {
             primary: colorsSIGNAL().actionColors.primary,
@@ -279,6 +157,7 @@ class Colors {
             information: colorsSIGNAL().actionColors.information
         };
     }
+    /** Provides the colors of the application */
     static get appColors() {
         return {
             breadcrumbs: colorsSIGNAL().appColors.breadcrumbs,
@@ -291,17 +170,18 @@ class Colors {
             toolbarText: colorsSIGNAL().appColors.toolbarText
         };
     }
-    static ToHexadecimal(r, g, b, a) {
-        const red = `${Number(r).toString(16).padStart(2, '0')}`;
-        const green = `${Number(g).toString(16).padStart(2, '0')}`;
-        const blue = `${Number(b).toString(16).padStart(2, '0')}`;
-        const alpha = (Tools.IsNotNull(a)) ? Math.round(Number(a) * 255).toString(16).padStart(2, '0') : '';
-        return `#${red}${green}${blue}${alpha}`.toLowerCase();
+    /** Get Hexadecimal color */
+    static ToHexadecimal(red, green, blue, alpha) {
+        const _red = `${Number(red).toString(16).padStart(2, '0')}`;
+        const _green = `${Number(green).toString(16).padStart(2, '0')}`;
+        const _blue = `${Number(blue).toString(16).padStart(2, '0')}`;
+        const _alpha = (Tools.IsNotNull(alpha)) ? Math.round(Number(alpha) * 255).toString(16).padStart(2, '0') : '';
+        return `#${_red}${_green}${_blue}${_alpha}`.toLowerCase();
     }
     /** Returns a random color in hexadecimal
     public static GetRandomColorHex = (): string => "#xxxxxx".replace(/x/g, () => (Math.random() * 16 | 0).toString(16)); */
     /** Returns the number of colors requested */
-    static GetColorHexList(quantity) {
+    static GetColorList(quantity) {
         const colors = [];
         let counter = 0;
         while (counter < quantity) {
@@ -316,7 +196,7 @@ class Colors {
 }
 
 class CoerAlert {
-    /** */
+    /** Use this alert to issue a success message */
     Success(message = null, title = null, icon = null, autohide = 3000) {
         //Title
         if (Tools.IsOnlyWhiteSpace(title))
@@ -324,9 +204,9 @@ class CoerAlert {
         const alertSuccessTitle = document.getElementById('alert-success-title');
         alertSuccessTitle.textContent = title;
         //Icon
-        icon = this.GetIcon(title, icon, 'bi-check-circle fa-beat');
+        icon = Tools.IsOnlyWhiteSpace(icon) ? 'bi-check-circle fa-beat' : icon;
         const alertSuccessIcon = document.getElementById('alert-success-icon');
-        this.SetIcon(alertSuccessIcon, icon);
+        this._SetIcon(alertSuccessIcon, icon);
         //Message
         if (Tools.IsNull(message))
             message = '';
@@ -334,21 +214,21 @@ class CoerAlert {
         alertSuccessMessage.innerHTML = message;
         //Toast
         const alertSuccess = document.getElementById('alert-success');
-        this.SetAutoHide(alertSuccess, autohide);
+        this._SetAutoHide(alertSuccess, autohide);
         const toast = bootstrap.Toast.getOrCreateInstance(alertSuccess);
         toast.show();
     }
-    /** */
+    /** Use this alert to issue a error or danger */
     Error(message = null, title = null, icon = null, autohide = 3000) {
         //Title
         if (Tools.IsOnlyWhiteSpace(title))
             title = 'Error';
         const alertErrorTitle = document.getElementById('alert-error-title');
         alertErrorTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-exclamation-octagon fa-beat');
+        //Icon 
+        icon = Tools.IsOnlyWhiteSpace(icon) ? 'bi-exclamation-octagon fa-beat' : icon;
         const alertErrorIcon = document.getElementById('alert-error-icon');
-        this.SetIcon(alertErrorIcon, icon);
+        this._SetIcon(alertErrorIcon, icon);
         //Message
         if (Tools.IsNull(message))
             message = '';
@@ -356,21 +236,21 @@ class CoerAlert {
         alertErrorBody.innerHTML = message;
         //Toast
         const alertError = document.getElementById('alert-error');
-        this.SetAutoHide(alertError, autohide);
+        this._SetAutoHide(alertError, autohide);
         const toast = bootstrap.Toast.getOrCreateInstance(alertError);
         toast.show();
     }
-    /** */
+    /** Use this alert to broadcast an informational message */
     Info(message = null, title = null, icon = null, autohide = 3000) {
         //Title
         if (Tools.IsOnlyWhiteSpace(title))
             title = 'Info';
         const alertInfoTitle = document.getElementById('alert-info-title');
         alertInfoTitle.textContent = title;
-        //Icon
-        icon = this.GetIcon(title, icon, 'bi-info-circle fa-beat');
+        //Icon 
+        icon = Tools.IsOnlyWhiteSpace(icon) ? 'bi-info-circle fa-beat' : icon;
         const alertInfoIcon = document.getElementById('alert-info-icon');
-        this.SetIcon(alertInfoIcon, icon);
+        this._SetIcon(alertInfoIcon, icon);
         //Message
         if (Tools.IsNull(message))
             message = '';
@@ -378,21 +258,21 @@ class CoerAlert {
         alertInfoBody.innerHTML = message;
         //Toast
         const alertInfo = document.getElementById('alert-info');
-        this.SetAutoHide(alertInfo, autohide);
+        this._SetAutoHide(alertInfo, autohide);
         const toast = bootstrap.Toast.getOrCreateInstance(alertInfo);
         toast.show();
     }
-    /** */
+    /** Use this alert to issue a warning message */
     Warning(message = null, title = null, icon = null, autohide = 3000) {
         //Title
         if (Tools.IsOnlyWhiteSpace(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');
+        //Icon 
+        icon = Tools.IsOnlyWhiteSpace(icon) ? 'bi-exclamation-triangle-fill fa-beat' : icon;
         const alertWarningIcon = document.getElementById('alert-warning-icon');
-        this.SetIcon(alertWarningIcon, icon);
+        this._SetIcon(alertWarningIcon, icon);
         //Message
         if (Tools.IsNull(message))
             message = '';
@@ -400,20 +280,11 @@ class CoerAlert {
         alertWarningBody.innerHTML = message;
         //Toast
         const alertWarning = document.getElementById('alert-warning');
-        this.SetAutoHide(alertWarning, autohide);
+        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);
-        });
-    }
-    /** */
+    /** Use this alert to confirm a user action */
     Confirm(message = 'Proceed?', alertType = 'warning', icon = null) {
         return new Promise(Resolve => {
             let color;
@@ -483,7 +354,16 @@ class CoerAlert {
         });
     }
     /** */
-    SetIcon(element, icon) {
+    _Close(alert) {
+        return new Promise(Resolve => {
+            const element = document.getElementById(alert);
+            const toast = bootstrap.Toast.getOrCreateInstance(element);
+            toast.hide();
+            setTimeout(() => { Resolve(); }, 200);
+        });
+    }
+    /** */
+    _SetIcon(element, icon) {
         if (icon.toUpperCase() != 'NONE') {
             for (const item of [...element.classList.value.split(' ')]) {
                 if (item.length > 0) {
@@ -503,7 +383,7 @@ class CoerAlert {
         }
     }
     /** */
-    SetAutoHide(element, autohide) {
+    _SetAutoHide(element, autohide) {
         element.removeAttribute('data-bs-autohide');
         element.removeAttribute('data-bs-delay');
         if (autohide && autohide > 0) {
@@ -515,34 +395,18 @@ class CoerAlert {
         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: "19.0.1", ngImport: i0, type: CoerAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerAlert, isStandalone: true, 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: ["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:var(--smoke)}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:auto!important;min-width:350px!important;max-width:470px!important;color:var(--smoke)}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:var(--success-inner)}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:var(--information-inner)}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:var(--danger-inner)}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:var(--warning-inner);border-color:var(--black);color:var(--black)}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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoerAlert, isStandalone: true, 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: ["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:var(--smoke)}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:auto!important;min-width:350px!important;max-width:470px!important;color:var(--smoke)}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:var(--success-inner)}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:var(--information-inner)}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:var(--danger-inner)}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:var(--warning-inner);border-color:var(--black);color:var(--black)}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: "19.0.1", ngImport: i0, type: CoerAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-alert', standalone: true, 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: ["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:var(--smoke)}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:auto!important;min-width:350px!important;max-width:470px!important;color:var(--smoke)}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:var(--success-inner)}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:var(--information-inner)}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:var(--danger-inner)}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:var(--warning-inner);border-color:var(--black);color:var(--black)}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"] }]
+            args: [{ selector: 'coer-alert', standalone: true, 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: ["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:var(--smoke)}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;width:auto!important;min-width:350px!important;max-width:470px!important;color:var(--smoke)}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:var(--success-inner)}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:var(--information-inner)}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:var(--danger-inner)}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:var(--warning-inner);border-color:var(--black);color:var(--black)}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"] }]
         }] });
 
+/** Controls the breadcrumbs in sessionStorage */
 class Breadcrumbs {
     static { this.storage = 'COER-System'; }
-    /** */
+    /** Add a breadcrumb */
     static Add(page, path) {
         const breadcrumbs = this.Get();
         const paths = breadcrumbs.map(item => item.path);
@@ -551,7 +415,7 @@ class Breadcrumbs {
             this.Save(breadcrumbs);
         }
     }
-    /** */
+    /** Get the breadcrumbs */
     static Get() {
         let storage = sessionStorage.getItem(this.storage);
         if (storage) {
@@ -562,12 +426,12 @@ class Breadcrumbs {
         }
         return [];
     }
-    /** */
+    /** Get the first breadcrumb */
     static GetFirst() {
         const breadcrumbs = this.Get();
         return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
     }
-    /** */
+    /** Get the last breadcrumb */
     static GetLast() {
         const breadcrumbs = this.Get();
         return (breadcrumbs.length > 0) ? breadcrumbs.pop() : null;
@@ -580,8 +444,8 @@ class Breadcrumbs {
         storage = Object.assign({}, storage, { breadcrumbs });
         sessionStorage.setItem(this.storage, JSON.stringify(storage));
     }
-    /** */
-    static Remove(path) {
+    /** Removes one breadcrumb by route */
+    static RemoveByPath(path) {
         let breadcrumbs = this.Get();
         const index = breadcrumbs.findIndex(x => x.path.toLowerCase().trim() === path.toLowerCase().trim());
         if (index >= 0) {
@@ -589,15 +453,15 @@ class Breadcrumbs {
             this.Save(breadcrumbs);
         }
     }
-    /** */
-    static SetLast(page, path) {
+    /** Update the last breadcrumb */
+    static UpdateLast(page, path) {
         const breadcrumbs = this.Get();
         if (breadcrumbs.length > 0) {
             breadcrumbs[breadcrumbs.length - 1] = { page, path };
             this.Save(breadcrumbs);
         }
     }
-    /** */
+    /** Remove the last breadcrumb */
     static RemoveLast() {
         const breadcrumbs = this.Get();
         if (breadcrumbs.length > 0) {
@@ -608,7 +472,7 @@ class Breadcrumbs {
 }
 
 const GridTemplates = {
-    /** Template for boolean property */
+    /** Set Active/Disabled values, template for boolean property */
     isActiveTemplate: (item) => {
         if (item.value) {
             return `
@@ -625,22 +489,89 @@ const GridTemplates = {
             `;
         }
     },
-    /** Template for boolean property */
+    /** Enable switch by row, template for boolean property */
     coerSwitchTemplate: (item) => ({
         isInput: true,
         tooltip: `${item.value ? 'Active' : 'Disabled'}`
     }),
-    /** Template for text property */
+    /** Enable textbox by row, template for text property */
     coerTextboxTemplate: (item) => ({
         isInput: true,
         isInvalid: item.value.length <= 0
     }),
-    /** Template for text property */
+    /** Template for icons */
     coerIconTemplate: (icon, color = 'black') => {
         return `<i class='${icon} d-block w-100 text-center' style='color: ${color};'></i>`;
     }
 };
 
+/** Provides several methods for collection manipulation */
+class Collections {
+    /** Set an index and concat more arrays of the same type */
+    static 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));
+    }
+    /** Sort an array in ascending order by property */
+    static 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 */
+    static 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]);
+            }
+        }
+    }
+    /** */
+    static Distinct(array, ...args) {
+        for (const arg of args) {
+            array = Tools.BreakReference(array).concat(Tools.BreakReference(arg));
+        }
+        return Array.from(new Set(array));
+    }
+    /** */
+    static Except(array, filter, ...properties) {
+        const result = [];
+        for (const item of array) {
+            if (typeof item === 'object' && Tools.IsNotNull(properties) && properties.length > 0) {
+                if (!filter.some(x => x[properties[0]] === item[properties[0]])) {
+                    result.push(item);
+                }
+            }
+        }
+        return [...result];
+    }
+}
+
 const CONTROL_VALUE = (component) => {
     return {
         provide: NG_VALUE_ACCESSOR,
@@ -648,44 +579,46 @@ const CONTROL_VALUE = (component) => {
         multi: true
     };
 };
+/** Implements the ControlValueAccessor interface to build a components */
 class ControlValue {
     constructor() {
+        //Variables
         this._isTouched = false;
     }
+    /** Property to validate if the component has been touched */
     get isTouched() {
         return this._isTouched;
     }
-    /** */
+    /** Sets the value of the component when it is created */
+    writeValue(value) {
+        this._value = value;
+    }
+    /** Sets the value of the component when it is updated */
+    registerOnChange(callback) {
+        this._UpdateValue = callback;
+    }
+    /** Sets the component's touched status when it is updated */
+    registerOnTouched(callback) {
+        this._IsTouched = callback;
+    }
+    /** Sets the value of the component */
     SetValue(value) {
         if (typeof this._UpdateValue === 'function') {
             this._UpdateValue(value);
         }
         this._value = value;
     }
-    /** */
+    /** Sets whether the component has been touched */
     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 DateTime {
+/** Provides several methods for dates manipulation */
+class Dates {
     /** Get UTC Offset */
     static GetOffset() {
         return moment().utcOffset();
@@ -699,69 +632,60 @@ class DateTime {
         date = new Date(date.toString());
         return moment(date).format('YYYY-MM-DD HH:mm:ss');
     }
-    /** Convert UTC Date to Local Zone */
+    /** Convert UTC Date to Local Zone. YYYY-MM-DD HH:mm:ss */
     static ToLocalZone(date) {
-        date = DateTime.GetFormatDB(date);
-        return moment(date).add(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+        date = Dates.GetFormatDB(date);
+        return moment(date).add(Dates.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
     }
-    /** Convert Local Zone Date to UTC */
+    /** Convert Local Zone Date to UTC. YYYY-MM-DD HH:mm:ss */
     static ToUTC(date) {
-        date = DateTime.GetFormatDB(date);
-        return moment(date).subtract(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+        date = Dates.GetFormatDB(date);
+        return moment(date).subtract(Dates.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
     }
     /** MMM, DD YYYY */
     static GetDateFormat(date) {
-        date = DateTime.GetFormatDB(date);
+        date = Dates.GetFormatDB(date);
         return moment(date).parseZone().local(true).format('MMM, DD YYYY');
     }
     /** MMM, DD YYYY at hh:mm a */
     static GetDateTimeFormat(date) {
-        date = DateTime.GetFormatDB(date);
+        date = Dates.GetFormatDB(date);
         return moment(date).parseZone().local(true).format('MMM, DD YYYY - hh:mm a').replace('-', 'at');
     }
     /** */
     static IsValidDate(date) {
-        if (Tools.IsOnlyWhiteSpace(date))
+        try {
+            if (Tools.IsOnlyWhiteSpace(date))
+                return false;
+            date = Dates.GetFormatDB(date);
+            return moment(date).isValid();
+        }
+        catch {
             return false;
-        date = DateTime.GetFormatDB(date);
-        return moment(date).isValid();
-    }
-    /** */
-    static SetFirstHour(date = '', format = 'database') {
-        if (Tools.IsOnlyWhiteSpace(date))
-            date = moment();
-        else {
-            date = DateTime.GetFormatDB(date);
-            date = moment(date);
         }
-        date = date.set('hour', 0).set('minute', 0).set('second', 0).set('millisecond', 0);
-        return (format === 'database')
-            ? DateTime.GetFormatDB(date)
-            : DateTime.GetDateFormat(date);
     }
-    /** */
-    static SetLastHour(date = '', format = 'database') {
-        if (Tools.IsOnlyWhiteSpace(date))
-            date = moment();
-        else {
-            date = DateTime.GetFormatDB(date);
-            date = moment(date);
-        }
-        date = date.set('hour', 23).set('minute', 59).set('second', 59).set('millisecond', 59);
-        return (format === 'database')
-            ? DateTime.GetFormatDB(date)
-            : DateTime.GetDateFormat(date);
+    /** YYYY-MM-DD HH:mm:ss */
+    static SetFirstHour(date) {
+        date = Dates.GetFormatDB(date);
+        date = moment(date).set('hour', 0).set('minute', 0).set('second', 0).set('millisecond', 0);
+        return Dates.GetFormatDB(date);
+    }
+    /** YYYY-MM-DD HH:mm:ss */
+    static SetLastHour(date) {
+        date = Dates.GetFormatDB(date);
+        date = moment(date).set('hour', 23).set('minute', 59).set('second', 59).set('millisecond', 59);
+        return Dates.GetFormatDB(date);
     }
 }
 
-class ElementsHTML {
+class HTMLElements {
     /** */
     static { this.GetElement = (selector) => {
         return document.querySelector(selector);
     }; }
     /** */
-    static { this.GetCssValueBy = (selector, style) => {
-        return ElementsHTML.GetCssValue(document.querySelector(selector), style);
+    static { this.GetCssValueBySelector = (selector, style) => {
+        return HTMLElements.GetCssValue(document.querySelector(selector), style);
     }; }
     /** */
     static { this.GetCssValue = (element, style) => {
@@ -769,7 +693,7 @@ class ElementsHTML {
             ? window.getComputedStyle(element).getPropertyValue(style)
             : '';
     }; }
-    /** Get width in px */
+    /** Gets the width of the element in px */
     static { this.GetElementWidth = (element, ...args) => {
         let width = 0;
         if (Tools.IsNotNull(element) && Tools.IsNotOnlyWhiteSpace(element?.offsetWidth)) {
@@ -784,7 +708,7 @@ class ElementsHTML {
         }
         return `${width}px`;
     }; }
-    /** Get height in px */
+    /** Gets the height of the element in px */
     static { this.GetElementHeight = (element, ...args) => {
         let height = 0;
         if (Tools.IsNotNull(element) && Tools.IsNotOnlyWhiteSpace(element?.offsetHeight)) {
@@ -803,7 +727,7 @@ class ElementsHTML {
     static { this.IsInvalidElement = (element) => {
         let isInvalid = true;
         if (Tools.IsNotNull(element)) {
-            if (typeof element == 'object') {
+            if (typeof element === 'object') {
                 const properties = Tools.GetPropertyList(element);
                 if (properties.includes('_isTouched') && properties.includes('_value')) {
                     isInvalid = element.isTouched && Tools.IsOnlyWhiteSpace(element.value);
@@ -812,7 +736,7 @@ class ElementsHTML {
         }
         return isInvalid;
     }; }
-    /** Get color in hexadecimal format */
+    /** Gets the color of the element in hexadecimal */
     static { this.GetElementColor = (element) => {
         if (Tools.IsNotNull(element)) {
             let rgb = window.getComputedStyle(element).getPropertyValue('color');
@@ -829,49 +753,36 @@ class ElementsHTML {
 }
 ;
 
-class StringTools {
+/** Provides several methods for string manipulation */
+class Strings {
     /** Sets the first character to lowercase */
     static FirstCharToLower(value) {
-        if (Tools.IsOnlyWhiteSpace(value))
-            return '';
-        const array = [];
-        for (let i = 0; i < String(value).length; i++) {
-            if (i === 0)
-                array.push(String(value)[i].toLowerCase());
-            else
-                array.push(String(value)[i]);
-        }
-        return array.join('');
+        return (Tools.IsNotOnlyWhiteSpace(value))
+            ? String(value).charAt(0).toLowerCase() + String(value).slice(1)
+            : '';
     }
     /** Sets the first character to uppercase */
     static FirstCharToUpper(value) {
-        if (Tools.IsOnlyWhiteSpace(value))
-            return '';
-        const array = [];
-        for (let i = 0; i < String(value).length; i++) {
-            if (i === 0)
-                array.push(String(value)[i].toUpperCase());
-            else
-                array.push(String(value)[i]);
-        }
-        return array.join('');
+        return (Tools.IsNotOnlyWhiteSpace(value))
+            ? String(value).charAt(0).toUpperCase() + String(value).slice(1)
+            : '';
     }
     /** Clean extra whitespaces */
     static CleanUpBlanks(value) {
-        return (Tools.IsNotOnlyWhiteSpace(value))
-            ? String(value).split(' ').filter(x => x.length > 0).join(' ')
+        return value && Tools.IsNotOnlyWhiteSpace(value)
+            ? String(value).replace(/\s+/g, ' ').trim()
             : '';
     }
     /** Apply title formatting */
     static ToTitle(value) {
         return (Tools.IsNotOnlyWhiteSpace(value))
-            ? String(value).split(' ').filter(x => x.length > 0).map(x => StringTools.FirstCharToUpper(x.toLowerCase())).join(' ')
+            ? String(value).split(' ').filter(x => x.length > 0).map(x => Strings.FirstCharToUpper(x.toLowerCase())).join(' ')
             : '';
     }
     /** Removes the last character */
     static RemoveLastChar(value) {
         return Tools.IsNotOnlyWhiteSpace(value)
-            ? String(value).trimEnd().substring(0, String(value).length - 1).trimEnd()
+            ? String(value).trimEnd().slice(0, -1)
             : '';
     }
     /** Removes accents */
@@ -941,7 +852,7 @@ class Files {
         }
         return null;
     }
-    /** Is Excel File */
+    /** */
     static IsExcel(file) {
         const EXTENSION = Files.GetExtension(file);
         return Tools.IsNotNull(EXTENSION)
@@ -965,7 +876,7 @@ class Files {
                     });
                     //Get Headers
                     for (const column in dataSheet[0]) {
-                        columns.push(StringTools.FirstCharToLower(String(dataSheet[0][column]).replaceAll(' ', '')));
+                        columns.push(Strings.FirstCharToLower(String(dataSheet[0][column]).replaceAll(' ', '')));
                     }
                     //Get Rows
                     rows = XLSX.utils.sheet_to_json(sheet, { header: columns });
@@ -983,8 +894,8 @@ class Files {
     }
     /** Export to excel file */
     static ExportExcel(data, fileName = 'coer_report', sheetName = 'Sheet1') {
-        sheetName = StringTools.CleanUpBlanks(sheetName);
-        fileName = StringTools.CleanUpBlanks(fileName);
+        sheetName = Strings.CleanUpBlanks(sheetName);
+        fileName = Strings.CleanUpBlanks(fileName);
         if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx') || fileName.endsWith('.csv')) {
             if (fileName.endsWith('.xls')) {
                 fileName = fileName.replaceAll('.xls', '.xlsx');
@@ -1014,9 +925,10 @@ class Files {
     }
 }
 
+/** Controls user information in localStorage */
 class User {
     static { this.storage = 'COER-System'; }
-    /** */
+    /** Save the user to localStorage */
     static Set(user) {
         let storage = localStorage.getItem(this.storage);
         if (storage) {
@@ -1029,7 +941,7 @@ class User {
         }
         localStorage.setItem(this.storage, JSON.stringify(storage));
     }
-    /** */
+    /** Get the user from localStorage */
     static Get() {
         let storage = localStorage.getItem(this.storage);
         if (storage) {
@@ -1051,15 +963,16 @@ class User {
         }
         return null;
     }
-    /** */
-    static LogIn() {
+    /** Validates if the user and the jwt exist in the localStorage */
+    static IsLogIn() {
         let storage = localStorage.getItem(this.storage);
         storage = JSON.parse(storage);
         return Tools.IsNotNull(storage)
             && Tools.IsNotNull(storage?.user)
+            && Tools.IsNotOnlyWhiteSpace(storage?.user?.user)
             && Tools.IsNotOnlyWhiteSpace(storage?.user?.jwt);
     }
-    /** */
+    /** Removes data from localStorage and sessionStorage, except for the user and navigate to root */
     static LogOut() {
         let storage = localStorage.getItem(this.storage);
         sessionStorage.removeItem(this.storage);
@@ -1210,15 +1123,63 @@ class Menu {
     }; }
 }
 
+/** Provides several methods for string manipulation */
+class Numbers {
+    /** Validates if the value is a numeric type */
+    static IsNumber(value) {
+        return typeof value === 'number' && !Number.isNaN(Number(value));
+    }
+    /** Validates if the value isn't a numeric type */
+    static IsNotNumber(value) {
+        return !this.IsNumber(value);
+    }
+    /** Return a string with numeric format */
+    static GetNumericFormat(value, decimals = 0) {
+        if (this.IsNotNumber(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}`;
+    }
+}
+
+/** Controls source information in sessionStorage */
 class Source {
     static { this.storage = 'COER-System'; }
-    /** */
-    static Set(page) {
+    /** Save the source to sessionStorage and add the breadcrumb */
+    static Set(pageName) {
         const ROUTER = inject(Router);
         let path = ROUTER.url;
         if (path.includes('?'))
             path = path.split('?')[0];
-        Breadcrumbs.Add(page, path);
+        Breadcrumbs.Add(pageName, path);
         const breadcrumbs = Breadcrumbs.Get();
         if (breadcrumbs.length >= 2) {
             breadcrumbs.pop();
@@ -1236,7 +1197,7 @@ class Source {
         storage = Object.assign({}, storage, { source });
         sessionStorage.setItem(this.storage, JSON.stringify(storage));
     }
-    /** */
+    /** Get the source from sessionStorage */
     static Get() {
         let storage = sessionStorage.getItem(this.storage);
         if (storage) {
@@ -1247,19 +1208,18 @@ class Source {
         }
         return null;
     }
-    /** */
+    /** Gets the first breadcrumb from sessionStorage */
     static GetRoot() {
-        const breadcrumbs = Breadcrumbs.Get();
-        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
+        return Breadcrumbs.GetFirst();
     }
-    /** */
+    /** Save the pageResponse to sessionStorage */
     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));
     }
-    /** */
+    /** Gets the pageResponse from sessionStorage */
     static GetPageResponse() {
         let storage = sessionStorage.getItem(this.storage);
         if (storage) {
@@ -1270,7 +1230,7 @@ class Source {
         }
         return null;
     }
-    /** */
+    /** Remove the pageResponse from sessionStorage */
     static ClearPageResponse() {
         let storage = sessionStorage.getItem(this.storage);
         storage = JSON.parse(storage);
@@ -1282,17 +1242,9 @@ class Source {
             sessionStorage.setItem(this.storage, JSON.stringify(storage));
         }
     }
-    /** */
+    /** Remove the sessionStorage */
     static Reset() {
-        let storage = localStorage.getItem(this.storage);
-        storage = JSON.parse(storage);
-        const user = storage?.user || null;
-        localStorage.removeItem(this.storage);
         sessionStorage.removeItem(this.storage);
-        if (Tools.IsNotNull(user)) {
-            storage = Object.assign({ user });
-            localStorage.setItem(this.storage, JSON.stringify(storage));
-        }
     }
 }
 
@@ -1328,7 +1280,7 @@ class Page {
         /** */
         this.GoBack = (path) => (() => {
             if (path)
-                Breadcrumbs.Remove(path);
+                Breadcrumbs.RemoveByPath(path);
             else
                 Breadcrumbs.RemoveLast();
         });
@@ -1343,8 +1295,8 @@ class Page {
         this.IsOnlyWhiteSpace = Tools.IsOnlyWhiteSpace;
         this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
         this.Sleep = Tools.Sleep;
-        //ElementsHTML
-        this.IsInvalidElement = ElementsHTML.IsInvalidElement;
+        //HTMLElements
+        this.IsInvalidElement = HTMLElements.IsInvalidElement;
         if (page.toUpperCase().toUpperCase() === 'HOME')
             Source.Reset();
         this.SetPageName(page);
@@ -1389,7 +1341,7 @@ class Page {
         if (this.breadcrumbs.length > 0) {
             this.breadcrumbs[this.breadcrumbs.length - 1].page = name;
             this.breadcrumbs[this.breadcrumbs.length - 1].path = this._path;
-            Breadcrumbs.SetLast(name, this._path);
+            Breadcrumbs.UpdateLast(name, this._path);
         }
         this.router.navigateByUrl(this._path);
     }
@@ -1501,33 +1453,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                 }] }] });
 
 class Screen {
+    /** Gets the width of the browser window */
     static get WINDOW_WIDTH() {
         return window.innerWidth;
     }
+    /** Gets the height of the screen window */
     static get WINDOW_HEIGHT() {
         return window.innerHeight;
     }
+    /** Gets the width of the device screen */
     static get DEVICE_WIDTH() {
         return window.screen.width;
     }
+    /** Gets the height of the device screen */
     static get DEVICE_HEIGHT() {
         return window.screen.height;
     }
+    /** gets the breakpoint based on the width of the browsing window */
     static get BREAKPOINT() {
-        if (window.innerWidth < 576)
+        if (this.WINDOW_WIDTH < 576)
             return 'xs';
-        else if (window.innerWidth >= 576 && window.innerWidth < 768)
+        else if (this.WINDOW_WIDTH >= 576 && this.WINDOW_WIDTH < 768)
             return 'sm';
-        else if (window.innerWidth >= 768 && window.innerWidth < 992)
+        else if (this.WINDOW_WIDTH >= 768 && this.WINDOW_WIDTH < 992)
             return 'md';
-        else if (window.innerWidth >= 992 && window.innerWidth < 1200)
+        else if (this.WINDOW_WIDTH >= 992 && this.WINDOW_WIDTH < 1200)
             return 'lg';
-        else if (window.innerWidth >= 1200 && window.innerWidth < 1400)
+        else if (this.WINDOW_WIDTH >= 1200 && this.WINDOW_WIDTH < 1400)
             return 'xl';
         else
             return 'xxl';
     }
-    /** */
+    /** Provides an observable for screen resizing */
     static { this.Resize = new Observable(subscriber => {
         const handleResize = () => {
             subscriber.next({
@@ -1543,7 +1500,7 @@ class Screen {
             window.removeEventListener("load", handleResize);
         };
     }); }
-    /** */
+    /** Provides an observable for the browser buttons */
     static { this.BackButtonBrowser = new Observable(subscriber => {
         const handlePopState = (popStateEvent) => {
             if (popStateEvent.state && popStateEvent.target) {
@@ -1557,35 +1514,39 @@ class Screen {
     }); }
 }
 
+/** Use this component to extend the functionality of a page section. */
 class Section {
     constructor() {
-        //Injection
+        /** */
         this.alert = inject(CoerAlert);
+        /** */
         this.router = inject(Router);
-        //Inputs   
+        /** */
         this.isLoading = input(false);
+        /** */
         this.isUpdate = input(false);
-        //Outputs
+        /** */
         this.onReady = output();
+        /** */
         this.onDestroy = output();
+        /** */
         this.onIsLoading = output();
+        /** */
         this.onUpdated = output();
-        //Variables
+        /** */
         this.enableAnimations = false;
+        /** */
         this.isReadySection = false;
-        //Grid Templates
-        this.isActiveTemplate = GridTemplates.isActiveTemplate;
-        this.coerSwitchTemplate = GridTemplates.coerSwitchTemplate;
-        this.coerTextboxTemplate = GridTemplates.coerTextboxTemplate;
-        this.coerIconTemplate = GridTemplates.coerIconTemplate;
-        //Tools
+        /** Returns true if the value is null or undefined, false otherwise */
         this.IsNull = Tools.IsNull;
+        /** Returns true if the value is not null or undefined, false otherwise */
         this.IsNotNull = Tools.IsNotNull;
+        /** Returns true if the value is null or undefined or is an empty string or contains only whitespace, false otherwise */
         this.IsOnlyWhiteSpace = Tools.IsOnlyWhiteSpace;
+        /** Returns true if it has a string value and is not all whitespace, false otherwise */
         this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
-        this.Sleep = Tools.Sleep;
-        //ElementsHTML
-        this.IsInvalidElement = ElementsHTML.IsInvalidElement;
+        /** */
+        this.IsInvalidElement = HTMLElements.IsInvalidElement;
     }
     async ngAfterViewInit() {
         await Tools.Sleep();
@@ -1601,10 +1562,10 @@ class Section {
     /** Main method. Starts after ngAfterViewInit() */
     RunSection() { }
     ;
-    /** */
-    Log(value, log = null) {
-        if (Tools.IsNotNull(log))
-            console.log({ log, value });
+    /** Emit a console.log() */
+    Log(value, logName = null) {
+        if (Tools.IsNotNull(logName))
+            console.log({ log: logName, value });
         else
             console.log(value);
     }
@@ -1616,12 +1577,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             args: [{ template: '' }]
         }] });
 
+/** Provides several methods for handling http requests */
 class Service {
     constructor() {
         //Injections
         this.alert = inject(CoerAlert);
         this.http = inject(HttpClient);
-        this.httpCode = {
+        this.HTTP_CODE = {
             Ok: 200,
             Created: 201,
             NoContent: 204,
@@ -1636,12 +1598,12 @@ class Service {
             InnerError: 500
         };
     }
-    /** */
+    /** Clear and release a subscription */
     ReleaseSubscription(subscription) {
         if (subscription && !subscription.closed)
             subscription.unsubscribe();
     }
-    /** HTTP GET */
+    /** Generates a GET http request */
     HTTP_GET(request, cancelPrevious = true) {
         const responseType = request?.responseType || 'json';
         return new Promise(Resolve => {
@@ -1726,7 +1688,7 @@ class Service {
             }
         });
     }
-    /** HTTP POST */
+    /** Generates a POST http request */
     HTTP_POST(request, cancelPrevious = true) {
         return new Promise(Resolve => {
             const responseType = request?.responseType || 'json';
@@ -1811,7 +1773,7 @@ class Service {
             }
         });
     }
-    /** HTTP PUT */
+    /** Generates a PUT http request */
     HTTP_PUT(request, cancelPrevious = true) {
         return new Promise(Resolve => {
             const responseType = request?.responseType || 'json';
@@ -1896,7 +1858,7 @@ class Service {
             }
         });
     }
-    /** HTTP PATCH */
+    /** Generates a PATCH http request */
     HTTP_PATCH(request, cancelPrevious = true) {
         return new Promise(Resolve => {
             const responseType = request?.responseType || 'json';
@@ -1981,7 +1943,7 @@ class Service {
             }
         });
     }
-    /** HTTP DELETE */
+    /** Generates a DELETE http request */
     HTTP_DELETE(request, cancelPrevious = true) {
         return new Promise(Resolve => {
             const responseType = request?.responseType || 'json';
@@ -2066,7 +2028,7 @@ class Service {
             }
         });
     }
-    /** */
+    /** Download a csv file from browser */
     DOWNLOAD_CSV(buffer, fileName = '') {
         if (Tools.IsOnlyWhiteSpace(fileName))
             fileName = 'COERSystem';
@@ -2076,7 +2038,7 @@ class Service {
         saveAs(BLOB, fileName);
         return BLOB;
     }
-    /** */
+    /** Download a txt file from browser */
     DOWNLOAD_TXT(buffer, fileName = '') {
         if (Tools.IsOnlyWhiteSpace(fileName))
             fileName = 'COERSystem';
@@ -2144,5 +2106,5 @@ class Service {
  * Generated bundle index. Do not edit.
  */
 
-export { Breadcrumbs, CONTROL_VALUE, CoerAlert, Colors, ControlValue, DateTime, ElementsHTML, Files, Filters, GridTemplates, Menu, Page, Screen, Section, Service, Source, StringTools, Tools, User };
+export { Breadcrumbs, CONTROL_VALUE, CoerAlert, Collections, Colors, ControlValue, Dates, Files, Filters, GridTemplates, HTMLElements, Menu, Numbers, Page, Screen, Section, Service, Source, Strings, Tools, User };
 //# sourceMappingURL=coer-elements-tools.mjs.map