coer-elements 0.0.29 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/components/lib/coer-accordion/coer-accordion.component.d.ts +18 -0
  2. package/components/lib/coer-button/coer-button.component.d.ts +1 -1
  3. package/components/lib/coer-form/coer-form.component.d.ts +3 -1
  4. package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
  5. package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
  6. package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
  7. package/components/lib/components.module.d.ts +34 -33
  8. package/components/public-api.d.ts +1 -1
  9. package/esm2022/components/lib/coer-accordion/coer-accordion.component.mjs +53 -0
  10. package/esm2022/components/lib/coer-button/coer-button.component.mjs +11 -5
  11. package/esm2022/components/lib/coer-checkbox/coer-checkbox.component.mjs +2 -2
  12. package/esm2022/components/lib/coer-filebox/coer-filebox.component.mjs +3 -3
  13. package/esm2022/components/lib/coer-form/coer-form.component.mjs +9 -3
  14. package/esm2022/components/lib/coer-grid/coer-grid.component.mjs +3 -3
  15. package/esm2022/components/lib/coer-modal/coer-modal.component.mjs +1 -1
  16. package/esm2022/components/lib/coer-numberbox/coer-numberbox.component.mjs +2 -2
  17. package/esm2022/components/lib/coer-page-title/coer-page-title.component.mjs +2 -2
  18. package/esm2022/components/lib/coer-selectbox/coer-selectbox.component.mjs +2 -2
  19. package/esm2022/components/lib/coer-switch/coer-switch.component.mjs +2 -2
  20. package/esm2022/components/lib/coer-tab/coer-tab.component.mjs +2 -2
  21. package/esm2022/components/lib/coer-textarea/coer-textarea.component.mjs +2 -2
  22. package/esm2022/components/lib/coer-textbox/coer-textbox.component.mjs +2 -2
  23. package/esm2022/components/lib/components.module.mjs +8 -3
  24. package/esm2022/components/public-api.mjs +2 -2
  25. package/esm2022/tools/lib/coer-alert/coer-alert.component.mjs +8 -7
  26. package/esm2022/tools/lib/coer-grid.templates.mjs +34 -0
  27. package/esm2022/tools/lib/colors.class.mjs +68 -0
  28. package/esm2022/tools/lib/page.class.mjs +7 -1
  29. package/esm2022/tools/lib/service.class.mjs +2 -2
  30. package/esm2022/tools/public-api.mjs +3 -1
  31. package/fesm2022/coer-elements-components.mjs +104 -69
  32. package/fesm2022/coer-elements-components.mjs.map +1 -1
  33. package/fesm2022/coer-elements-tools.mjs +115 -8
  34. package/fesm2022/coer-elements-tools.mjs.map +1 -1
  35. package/package.json +1 -1
  36. package/styles/angular-material.scss +1 -0
  37. package/styles/bootstrap.scss +2 -7
  38. package/styles/coer-elements.css +314 -6
  39. package/styles/colors.scss +2 -0
  40. package/styles/containers.scss +2 -0
  41. package/{components/lib/coer-grid → tools/lib}/coer-grid.templates.d.ts +2 -0
  42. package/tools/lib/colors.class.d.ts +21 -0
  43. package/tools/lib/page.class.d.ts +4 -0
  44. package/tools/public-api.d.ts +2 -0
  45. package/esm2022/components/lib/coer-grid/coer-grid.templates.mjs +0 -30
@@ -228,6 +228,74 @@ const Tools = {
228
228
  }
229
229
  };
230
230
 
231
+ class Colors {
232
+ static { this.blue = '#0d6efd'; }
233
+ static { this.gray = '#6c757d'; }
234
+ static { this.green = '#198754'; }
235
+ static { this.yellow = '#ffc107'; }
236
+ static { this.red = '#dc3545'; }
237
+ static { this.white = '#f5f5f5'; }
238
+ static { this.black = '#252525'; }
239
+ static { this.orange = '#fd6031'; }
240
+ static { this.purple = '#a615bc'; }
241
+ /** Returns the color palette in hexadecimal */
242
+ static { this.colorsHex = new Map([
243
+ ['blue', '#0d6efd'],
244
+ ['gray', '#6c757d'],
245
+ ['green', '#198754'],
246
+ ['yellow', '#ffc107'],
247
+ ['red', '#dc3545'],
248
+ ['white', '#f5f5f5'],
249
+ ['black', '#252525'],
250
+ ['orange', '#fd6031'],
251
+ ['purple', '#a615bc'],
252
+ ]); }
253
+ /** Returns the color palette in RGB */
254
+ static { this.ColorsRGB = new Map([
255
+ ['blue', [13, 110, 253]],
256
+ ['gray', [108, 117, 125]],
257
+ ['green', [25, 135, 84]],
258
+ ['yellow', [225, 193, 7]],
259
+ ['red', [220, 53, 69]],
260
+ ['white', [245, 245, 245]],
261
+ ['black', [37, 37, 37]],
262
+ ['orange', [253, 96, 49]],
263
+ ['purple', [166, 21, 188]],
264
+ ]); }
265
+ /** Returns a random color in hexadecimal */
266
+ static { this.GetRandomColorHex = () => "#xxxxxx".replace(/x/g, () => (Math.random() * 16 | 0).toString(16)); }
267
+ /** Returns the number of colors requested */
268
+ static GetColorHexList(quantity) {
269
+ const colors = [];
270
+ let counter = 0;
271
+ while (counter < quantity) {
272
+ for (const color of this.colorsHex.values()) {
273
+ colors.push(color);
274
+ if (++counter === quantity)
275
+ break;
276
+ }
277
+ }
278
+ return colors;
279
+ }
280
+ /** Returns the number of colors requested with opacity */
281
+ static GetColorRGBList(quantity) {
282
+ const colors = [];
283
+ let alpha = 1.0;
284
+ let counter = 0;
285
+ let lastColor = [...Array.from(this.ColorsRGB.keys())].pop();
286
+ while (counter < quantity) {
287
+ for (const [color, value] of this.ColorsRGB.entries()) {
288
+ colors.push(`rgba(${value[0]}, ${value[1]}, ${value[2]}, ${alpha})`);
289
+ if (color === lastColor)
290
+ alpha -= 0.2;
291
+ if (++counter === quantity)
292
+ break;
293
+ }
294
+ }
295
+ return colors;
296
+ }
297
+ }
298
+
231
299
  class CoerAlert {
232
300
  /** */
233
301
  Success(message = null, title = null, icon = null, autohide = 3000) {
@@ -337,7 +405,7 @@ class CoerAlert {
337
405
  if (Tools.IsNull(icon))
338
406
  icon = 'bi-exclamation-octagon';
339
407
  iconType = 'error';
340
- color = '#dc3545'; //red
408
+ color = Colors.red;
341
409
  break;
342
410
  }
343
411
  ;
@@ -346,7 +414,7 @@ class CoerAlert {
346
414
  if (Tools.IsNull(icon))
347
415
  icon = 'bi-check-circle';
348
416
  iconType = 'info';
349
- color = '#198754'; //green
417
+ color = Colors.green;
350
418
  break;
351
419
  }
352
420
  ;
@@ -355,7 +423,7 @@ class CoerAlert {
355
423
  if (Tools.IsNull(icon))
356
424
  icon = 'bi-info-circle';
357
425
  iconType = 'error';
358
- color = '#0d6efd'; //blue
426
+ color = Colors.black;
359
427
  break;
360
428
  }
361
429
  ;
@@ -363,7 +431,7 @@ class CoerAlert {
363
431
  if (Tools.IsNull(icon))
364
432
  icon = 'bi-exclamation-triangle-fill';
365
433
  iconType = 'warning';
366
- color = '#ffc107'; //yellow
434
+ color = Colors.yellow;
367
435
  break;
368
436
  }
369
437
  }
@@ -444,11 +512,11 @@ class CoerAlert {
444
512
  return icon;
445
513
  }
446
514
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
447
- 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"] }); }
515
+ 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"] }); }
448
516
  }
449
517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, decorators: [{
450
518
  type: Component,
451
- 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"] }]
519
+ 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"] }]
452
520
  }] });
453
521
 
454
522
  class Breadcrumbs {
@@ -513,6 +581,40 @@ class Breadcrumbs {
513
581
  }
514
582
  }
515
583
 
584
+ const GridTemplates = {
585
+ /** Template for boolean property */
586
+ isActiveTemplate: (item) => {
587
+ if (item.value) {
588
+ return `
589
+ <span class='text-green-bold'>
590
+ <i class="fa-solid fa-circle-check"></i> Active
591
+ </span>
592
+ `;
593
+ }
594
+ else {
595
+ return `
596
+ <span class='text-gray-bold'>
597
+ <i class="fa-solid fa-circle-minus"></i> Disabled
598
+ </span>
599
+ `;
600
+ }
601
+ },
602
+ /** Template for boolean property */
603
+ coerSwitchTemplate: (item) => ({
604
+ isInput: true,
605
+ tooltip: `${item.value ? 'Active' : 'Disabled'}`
606
+ }),
607
+ /** Template for text property */
608
+ coerTextboxTemplate: (item) => ({
609
+ isInput: true,
610
+ isInvalid: item.value.length <= 0
611
+ }),
612
+ /** Template for text property */
613
+ coerIconTemplate: (icon, color = 'black') => {
614
+ return `<i class='${icon} d-block w-100 text-center' style='color: ${color};'></i>`;
615
+ }
616
+ };
617
+
516
618
  const CONTROL_VALUE = (component) => {
517
619
  return {
518
620
  provide: NG_VALUE_ACCESSOR,
@@ -804,6 +906,11 @@ class Page {
804
906
  else
805
907
  Breadcrumbs.RemoveLast();
806
908
  });
909
+ //Grid Templates
910
+ this.isActiveTemplate = GridTemplates.isActiveTemplate;
911
+ this.coerSwitchTemplate = GridTemplates.coerSwitchTemplate;
912
+ this.coerTextboxTemplate = GridTemplates.coerTextboxTemplate;
913
+ this.coerIconTemplate = GridTemplates.coerIconTemplate;
807
914
  this.SetPageName(page);
808
915
  this.SetSource();
809
916
  this.GetSource();
@@ -1170,7 +1277,7 @@ class Service {
1170
1277
  AlertError(httpError, message) {
1171
1278
  if (httpError.status >= 500) {
1172
1279
  if (Tools.IsNotOnlyWhiteSpace(message)) {
1173
- this.alert.Error('', message, 'fa-solid fa-bug', null);
1280
+ this.alert.Error(message, `BUG ${httpError.status}`, 'fa-solid fa-bug', null);
1174
1281
  }
1175
1282
  }
1176
1283
  else if (httpError.status < 500) {
@@ -1220,5 +1327,5 @@ class Service {
1220
1327
  * Generated bundle index. Do not edit.
1221
1328
  */
1222
1329
 
1223
- export { Breadcrumbs, CONTROL_VALUE, CoerAlert, ControlValue, DateTime, Files, Menu, Page, Screen, Service, Source, Tools };
1330
+ export { Breadcrumbs, CONTROL_VALUE, CoerAlert, Colors, ControlValue, DateTime, Files, GridTemplates, Menu, Page, Screen, Service, Source, Tools };
1224
1331
  //# sourceMappingURL=coer-elements-tools.mjs.map