coer-elements 0.0.29 → 0.0.31

package/fesm2022/coer-elements-tools.mjs

@@ -228,6 +228,74 @@ const Tools = {
     }
 };
 
+class Colors {
+    static { this.blue = '#0d6efd'; }
+    static { this.gray = '#6c757d'; }
+    static { this.green = '#198754'; }
+    static { this.yellow = '#ffc107'; }
+    static { this.red = '#dc3545'; }
+    static { this.white = '#f5f5f5'; }
+    static { this.black = '#252525'; }
+    static { this.orange = '#fd6031'; }
+    static { this.purple = '#a615bc'; }
+    /** Returns the color palette in hexadecimal */
+    static { this.colorsHex = new Map([
+        ['blue', '#0d6efd'],
+        ['gray', '#6c757d'],
+        ['green', '#198754'],
+        ['yellow', '#ffc107'],
+        ['red', '#dc3545'],
+        ['white', '#f5f5f5'],
+        ['black', '#252525'],
+        ['orange', '#fd6031'],
+        ['purple', '#a615bc'],
+    ]); }
+    /** Returns the color palette in RGB */
+    static { this.ColorsRGB = new Map([
+        ['blue', [13, 110, 253]],
+        ['gray', [108, 117, 125]],
+        ['green', [25, 135, 84]],
+        ['yellow', [225, 193, 7]],
+        ['red', [220, 53, 69]],
+        ['white', [245, 245, 245]],
+        ['black', [37, 37, 37]],
+        ['orange', [253, 96, 49]],
+        ['purple', [166, 21, 188]],
+    ]); }
+    /** Returns a random color in hexadecimal */
+    static { this.GetRandomColorHex = () => "#xxxxxx".replace(/x/g, () => (Math.random() * 16 | 0).toString(16)); }
+    /** Returns the number of colors requested */
+    static GetColorHexList(quantity) {
+        const colors = [];
+        let counter = 0;
+        while (counter < quantity) {
+            for (const color of this.colorsHex.values()) {
+                colors.push(color);
+                if (++counter === quantity)
+                    break;
+            }
+        }
+        return colors;
+    }
+    /** Returns the number of colors requested with opacity */
+    static GetColorRGBList(quantity) {
+        const colors = [];
+        let alpha = 1.0;
+        let counter = 0;
+        let lastColor = [...Array.from(this.ColorsRGB.keys())].pop();
+        while (counter < quantity) {
+            for (const [color, value] of this.ColorsRGB.entries()) {
+                colors.push(`rgba(${value[0]}, ${value[1]}, ${value[2]}, ${alpha})`);
+                if (color === lastColor)
+                    alpha -= 0.2;
+                if (++counter === quantity)
+                    break;
+            }
+        }
+        return colors;
+    }
+}
+
 class CoerAlert {
     /** */
     Success(message = null, title = null, icon = null, autohide = 3000) {
@@ -337,7 +405,7 @@ class CoerAlert {
                         if (Tools.IsNull(icon))
                             icon = 'bi-exclamation-octagon';
                         iconType = 'error';
-                        color = '#dc3545'; //red
+                        color = Colors.red;
                         break;
                     }
                     ;
@@ -346,7 +414,7 @@ class CoerAlert {
                         if (Tools.IsNull(icon))
                             icon = 'bi-check-circle';
                         iconType = 'info';
-                        color = '#198754'; //green
+                        color = Colors.green;
                         break;
                     }
                     ;
@@ -355,7 +423,7 @@ class CoerAlert {
                         if (Tools.IsNull(icon))
                             icon = 'bi-info-circle';
                         iconType = 'error';
-                        color = '#0d6efd'; //blue
+                        color = Colors.black;
                         break;
                     }
                     ;
@@ -363,7 +431,7 @@ class CoerAlert {
                     if (Tools.IsNull(icon))
                         icon = 'bi-exclamation-triangle-fill';
                     iconType = 'warning';
-                    color = '#ffc107'; //yellow
+                    color = Colors.yellow;
                     break;
                 }
             }
@@ -444,11 +512,11 @@ class CoerAlert {
         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, 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: ["*{--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"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: ["*{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.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', 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: ["*{--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"] }]
+            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: ["*{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.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 Breadcrumbs {
@@ -513,6 +581,40 @@ class Breadcrumbs {
     }
 }
 
+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
+    }),
+    /** Template for text property */
+    coerIconTemplate: (icon, color = 'black') => {
+        return `<i class='${icon} d-block w-100 text-center' style='color: ${color};'></i>`;
+    }
+};
+
 const CONTROL_VALUE = (component) => {
     return {
         provide: NG_VALUE_ACCESSOR,
@@ -804,6 +906,11 @@ class Page {
             else
                 Breadcrumbs.RemoveLast();
         });
+        //Grid Templates
+        this.isActiveTemplate = GridTemplates.isActiveTemplate;
+        this.coerSwitchTemplate = GridTemplates.coerSwitchTemplate;
+        this.coerTextboxTemplate = GridTemplates.coerTextboxTemplate;
+        this.coerIconTemplate = GridTemplates.coerIconTemplate;
         this.SetPageName(page);
         this.SetSource();
         this.GetSource();
@@ -1170,7 +1277,7 @@ class Service {
     AlertError(httpError, message) {
         if (httpError.status >= 500) {
             if (Tools.IsNotOnlyWhiteSpace(message)) {
-                this.alert.Error('', message, 'fa-solid fa-bug', null);
+                this.alert.Error(message, `BUG ${httpError.status}`, 'fa-solid fa-bug', null);
             }
         }
         else if (httpError.status < 500) {
@@ -1220,5 +1327,5 @@ class Service {
  * Generated bundle index. Do not edit.
  */
 
-export { Breadcrumbs, CONTROL_VALUE, CoerAlert, ControlValue, DateTime, Files, Menu, Page, Screen, Service, Source, Tools };
+export { Breadcrumbs, CONTROL_VALUE, CoerAlert, Colors, ControlValue, DateTime, Files, GridTemplates, Menu, Page, Screen, Service, Source, Tools };
 //# sourceMappingURL=coer-elements-tools.mjs.map