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.
- package/components/lib/coer-accordion/coer-accordion.component.d.ts +18 -0
- package/components/lib/coer-button/coer-button.component.d.ts +1 -1
- package/components/lib/coer-form/coer-form.component.d.ts +3 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/components/lib/components.module.d.ts +34 -33
- package/components/public-api.d.ts +1 -1
- package/esm2022/components/lib/coer-accordion/coer-accordion.component.mjs +53 -0
- package/esm2022/components/lib/coer-button/coer-button.component.mjs +11 -5
- package/esm2022/components/lib/coer-checkbox/coer-checkbox.component.mjs +2 -2
- package/esm2022/components/lib/coer-filebox/coer-filebox.component.mjs +3 -3
- package/esm2022/components/lib/coer-form/coer-form.component.mjs +9 -3
- package/esm2022/components/lib/coer-grid/coer-grid.component.mjs +3 -3
- package/esm2022/components/lib/coer-modal/coer-modal.component.mjs +1 -1
- package/esm2022/components/lib/coer-numberbox/coer-numberbox.component.mjs +2 -2
- package/esm2022/components/lib/coer-page-title/coer-page-title.component.mjs +2 -2
- package/esm2022/components/lib/coer-selectbox/coer-selectbox.component.mjs +2 -2
- package/esm2022/components/lib/coer-switch/coer-switch.component.mjs +2 -2
- package/esm2022/components/lib/coer-tab/coer-tab.component.mjs +2 -2
- package/esm2022/components/lib/coer-textarea/coer-textarea.component.mjs +2 -2
- package/esm2022/components/lib/coer-textbox/coer-textbox.component.mjs +2 -2
- package/esm2022/components/lib/components.module.mjs +8 -3
- package/esm2022/components/public-api.mjs +2 -2
- package/esm2022/tools/lib/coer-alert/coer-alert.component.mjs +8 -7
- package/esm2022/tools/lib/coer-grid.templates.mjs +34 -0
- package/esm2022/tools/lib/colors.class.mjs +68 -0
- package/esm2022/tools/lib/page.class.mjs +7 -1
- package/esm2022/tools/lib/service.class.mjs +2 -2
- package/esm2022/tools/public-api.mjs +3 -1
- package/fesm2022/coer-elements-components.mjs +104 -69
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +115 -8
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/angular-material.scss +1 -0
- package/styles/bootstrap.scss +2 -7
- package/styles/coer-elements.css +314 -6
- package/styles/colors.scss +2 -0
- package/styles/containers.scss +2 -0
- package/{components/lib/coer-grid → tools/lib}/coer-grid.templates.d.ts +2 -0
- package/tools/lib/colors.class.d.ts +21 -0
- package/tools/lib/page.class.d.ts +4 -0
- package/tools/public-api.d.ts +2 -0
- 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 =
|
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 =
|
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 =
|
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 =
|
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(
|
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
|