ngx-dsxlibrary 1.0.52 → 1.0.54
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/fesm2022/ngx-dsxlibrary-src-lib-components.mjs +15 -3
- package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs.map +1 -1
- package/fesm2022/ngx-dsxlibrary.mjs +191 -4
- package/fesm2022/ngx-dsxlibrary.mjs.map +1 -1
- package/lib/components/kpicard/kpicard.component.d.ts +2 -2
- package/lib/directives/only-rango-pattern.directive.d.ts +39 -0
- package/lib/services/utility-add.service.d.ts +56 -0
- package/ngx-dsxlibrary-1.0.54.tgz +0 -0
- package/package.json +13 -13
- package/public-api.d.ts +1 -0
- package/src/lib/components/kpicard/kpicard.component.d.ts +2 -2
- package/ngx-dsxlibrary-1.0.52.tgz +0 -0
|
@@ -33,7 +33,7 @@ class KpicardComponent {
|
|
|
33
33
|
currency: {
|
|
34
34
|
startVal: 0,
|
|
35
35
|
duration: 0.5,
|
|
36
|
-
prefix: 'Q',
|
|
36
|
+
//prefix: 'Q',
|
|
37
37
|
decimalPlaces: 2, // Decimales
|
|
38
38
|
useGrouping: true, // Separador de miles
|
|
39
39
|
separator: ',', // Carácter separador
|
|
@@ -55,17 +55,29 @@ class KpicardComponent {
|
|
|
55
55
|
enableScrollSpy: true,
|
|
56
56
|
scrollSpyOnce: true,
|
|
57
57
|
},
|
|
58
|
+
percent: {
|
|
59
|
+
startVal: 0,
|
|
60
|
+
duration: 0.5,
|
|
61
|
+
suffix: '%',
|
|
62
|
+
decimalPlaces: 2, // Decimales
|
|
63
|
+
useGrouping: true, // Separador de miles
|
|
64
|
+
separator: ',', // Carácter separador
|
|
65
|
+
decimal: '.', // Carácter decimal
|
|
66
|
+
scrollSpyDelay: 200, // Retardo antes de la animación
|
|
67
|
+
enableScrollSpy: true,
|
|
68
|
+
scrollSpyOnce: true,
|
|
69
|
+
},
|
|
58
70
|
};
|
|
59
71
|
// ✅ Método auxiliar para obtener la opción con seguridad
|
|
60
72
|
getSelectedOption() {
|
|
61
73
|
return this.options[this.option()] ?? this.options.currency; // Si no existe, usa `currency`
|
|
62
74
|
}
|
|
63
75
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#
|
|
76
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}#container{width:1200px;display:flex}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"], dependencies: [{ kind: "ngmodule", type: CountUpModule }, { kind: "directive", type: i1$1.CountUpDirective, selector: "[countUp]", inputs: ["countUp", "options", "reanimateOnClick"], outputs: ["complete"] }] });
|
|
65
77
|
}
|
|
66
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KpicardComponent, decorators: [{
|
|
67
79
|
type: Component,
|
|
68
|
-
args: [{ selector: 'app-kpicard', imports: [CountUpModule], template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#
|
|
80
|
+
args: [{ selector: 'app-kpicard', imports: [CountUpModule], template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}#container{width:1200px;display:flex}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"] }]
|
|
69
81
|
}] });
|
|
70
82
|
|
|
71
83
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-dsxlibrary-src-lib-components.mjs","sources":["../../../projects/ngx-dsx/src/lib/components/app-message-error/app-message-error.component.ts","../../../projects/ngx-dsx/src/lib/components/app-message-error/app-message-error.component.html","../../../projects/ngx-dsx/src/lib/components/kpicard/kpicard.component.ts","../../../projects/ngx-dsx/src/lib/components/kpicard/kpicard.component.html","../../../projects/ngx-dsx/src/lib/components/ngx-dsxlibrary-src-lib-components.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { AbstractControl, FormGroup } from '@angular/forms';\r\nimport { TagModule } from 'primeng/tag';\r\n\r\n@Component({\r\n selector: 'app-message-error',\r\n imports: [TagModule],\r\n templateUrl: './app-message-error.component.html',\r\n styleUrl: './app-message-error.component.css',\r\n})\r\nexport class AppMessageErrorComponent {\r\n // Control de formulario que se pasa como input\r\n @Input() control!: AbstractControl | null;\r\n @Input() form: FormGroup | null = null;\r\n}\r\n","@if(control?.touched && control?.invalid){\r\n<div class=\"absolute dsx-error-message\">\r\n @if(control?.errors?.['required']){ El campo <strong>es requerido.</strong>\r\n } @else if(control?.errors?.['invalidNIT']){\r\n <strong>{{ control?.errors?.['invalidNIT']?.message }}</strong\r\n >. }@else if(control?.errors?.['invalidCUI']){\r\n <strong>{{ control?.errors?.['invalidCUI']?.message }}</strong\r\n >. } @else if(control?.errors?.['invalidDateRange']){\r\n <strong>{{ control?.errors?.['invalidDateRange']?.message }}</strong\r\n >. } @else if(control?.errors?.['dateNotRange']){\r\n <strong>{{ control?.errors?.['dateNotRange']?.message }}</strong\r\n >. } @else if(control?.errors?.['minlength']){ Debe tener al menos\r\n <strong>{{ control?.errors?.['minlength']?.requiredLength }}</strong>\r\n caracteres. } @else if(control?.errors?.['maxlength']){ Debe tener como máximo\r\n <strong>{{ control?.errors?.['maxlength']?.requiredLength }}</strong>\r\n caracteres. } @else if(control?.errors?.['min']){ El valor mínimo permitido es\r\n <strong>{{ control?.errors?.['min']?.min }}</strong\r\n >. } @else if(control?.errors?.['max']){ El valor máximo permitido es\r\n <strong>{{ control?.errors?.['max']?.max }}</strong\r\n >. } @else if(control?.errors?.['email']){ Debe ser una dirección de correo\r\n válida. } @else if(control?.errors?.['pattern']){ El campo no tiene el formato\r\n requerido. } @else{ Existe un error aún no identificado. }\r\n</div>\r\n}\r\n<!-- mensaje para formulario en general -->\r\n@if(form?.invalid && form?.touched){\r\n<div class=\"mt-2 mb-2\">\r\n @if(this.form?.errors?.['atLeastOneRequired']){\r\n <p-tag severity=\"danger\" [rounded]=\"true\">\r\n {{ form?.getError(\"atLeastOneRequired\")?.message }}</p-tag\r\n >\r\n }\r\n</div>\r\n}\r\n","import { Component, input } from '@angular/core';\r\nimport { CountUpModule } from 'ngx-countup';\r\n\r\n@Component({\r\n selector: 'app-kpicard',\r\n imports: [CountUpModule],\r\n templateUrl: './kpicard.component.html',\r\n styleUrl: './kpicard.component.css',\r\n})\r\nexport class KpicardComponent {\r\n //type = input.required<string>();\r\n option = input.required<'currency' | 'integer'>();\r\n label = input.required<string>();\r\n iconType = input<string>('fa-regular fa-bell');\r\n color = input<string>();\r\n valor = input<number>(0);\r\n theme = input<\r\n | 'light'\r\n | 'dark'\r\n | 'aqua'\r\n | 'sunset'\r\n | 'mint'\r\n | 'peach'\r\n | 'plasma'\r\n | 'nebula'\r\n >('light');\r\n\r\n options: Record<'currency' | 'integer', any> = {\r\n currency: {\r\n startVal: 0,\r\n duration: 0.5,\r\n prefix: 'Q',\r\n decimalPlaces: 2, // Decimales\r\n useGrouping: true, // Separador de miles\r\n separator: ',', // Carácter separador\r\n decimal: '.', // Carácter decimal\r\n suffix: ' GTQ', // Sufijo\r\n scrollSpyDelay: 200, // Retardo antes de la animación\r\n enableScrollSpy: true,\r\n scrollSpyOnce: true,\r\n },\r\n integer: {\r\n startVal: 0,\r\n duration: 0.5,\r\n prefix: 'Cant. ',\r\n decimalPlaces: 2, // Decimales\r\n useGrouping: true, // Separador de miles\r\n separator: ',', // Carácter separador\r\n decimal: '.', // Carácter decimal\r\n scrollSpyDelay: 200, // Retardo antes de la animación\r\n enableScrollSpy: true,\r\n scrollSpyOnce: true,\r\n },\r\n };\r\n\r\n // ✅ Método auxiliar para obtener la opción con seguridad\r\n getSelectedOption() {\r\n return this.options[this.option()] ?? this.options.currency; // Si no existe, usa `currency`\r\n }\r\n}\r\n","<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":";;;;;;;MAUa,wBAAwB,CAAA;;AAE1B,IAAA,OAAO;IACP,IAAI,GAAqB,IAAI;wGAH3B,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,kzDAkCA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED5BY,SAAS,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAIR,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,SAAS;+BACE,mBAAmB,EAAA,OAAA,EACpB,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,kzDAAA,EAAA;8BAMX,OAAO,EAAA,CAAA;sBAAf;gBACQ,IAAI,EAAA,CAAA;sBAAZ;;;MEJU,gBAAgB,CAAA;;AAE3B,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"ngx-dsxlibrary-src-lib-components.mjs","sources":["../../../projects/ngx-dsx/src/lib/components/app-message-error/app-message-error.component.ts","../../../projects/ngx-dsx/src/lib/components/app-message-error/app-message-error.component.html","../../../projects/ngx-dsx/src/lib/components/kpicard/kpicard.component.ts","../../../projects/ngx-dsx/src/lib/components/kpicard/kpicard.component.html","../../../projects/ngx-dsx/src/lib/components/ngx-dsxlibrary-src-lib-components.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { AbstractControl, FormGroup } from '@angular/forms';\r\nimport { TagModule } from 'primeng/tag';\r\n\r\n@Component({\r\n selector: 'app-message-error',\r\n imports: [TagModule],\r\n templateUrl: './app-message-error.component.html',\r\n styleUrl: './app-message-error.component.css',\r\n})\r\nexport class AppMessageErrorComponent {\r\n // Control de formulario que se pasa como input\r\n @Input() control!: AbstractControl | null;\r\n @Input() form: FormGroup | null = null;\r\n}\r\n","@if(control?.touched && control?.invalid){\r\n<div class=\"absolute dsx-error-message\">\r\n @if(control?.errors?.['required']){ El campo <strong>es requerido.</strong>\r\n } @else if(control?.errors?.['invalidNIT']){\r\n <strong>{{ control?.errors?.['invalidNIT']?.message }}</strong\r\n >. }@else if(control?.errors?.['invalidCUI']){\r\n <strong>{{ control?.errors?.['invalidCUI']?.message }}</strong\r\n >. } @else if(control?.errors?.['invalidDateRange']){\r\n <strong>{{ control?.errors?.['invalidDateRange']?.message }}</strong\r\n >. } @else if(control?.errors?.['dateNotRange']){\r\n <strong>{{ control?.errors?.['dateNotRange']?.message }}</strong\r\n >. } @else if(control?.errors?.['minlength']){ Debe tener al menos\r\n <strong>{{ control?.errors?.['minlength']?.requiredLength }}</strong>\r\n caracteres. } @else if(control?.errors?.['maxlength']){ Debe tener como máximo\r\n <strong>{{ control?.errors?.['maxlength']?.requiredLength }}</strong>\r\n caracteres. } @else if(control?.errors?.['min']){ El valor mínimo permitido es\r\n <strong>{{ control?.errors?.['min']?.min }}</strong\r\n >. } @else if(control?.errors?.['max']){ El valor máximo permitido es\r\n <strong>{{ control?.errors?.['max']?.max }}</strong\r\n >. } @else if(control?.errors?.['email']){ Debe ser una dirección de correo\r\n válida. } @else if(control?.errors?.['pattern']){ El campo no tiene el formato\r\n requerido. } @else{ Existe un error aún no identificado. }\r\n</div>\r\n}\r\n<!-- mensaje para formulario en general -->\r\n@if(form?.invalid && form?.touched){\r\n<div class=\"mt-2 mb-2\">\r\n @if(this.form?.errors?.['atLeastOneRequired']){\r\n <p-tag severity=\"danger\" [rounded]=\"true\">\r\n {{ form?.getError(\"atLeastOneRequired\")?.message }}</p-tag\r\n >\r\n }\r\n</div>\r\n}\r\n","import { Component, input } from '@angular/core';\r\nimport { CountUpModule } from 'ngx-countup';\r\n\r\n@Component({\r\n selector: 'app-kpicard',\r\n imports: [CountUpModule],\r\n templateUrl: './kpicard.component.html',\r\n styleUrl: './kpicard.component.css',\r\n})\r\nexport class KpicardComponent {\r\n //type = input.required<string>();\r\n option = input.required<'currency' | 'integer' | 'percent'>();\r\n label = input.required<string>();\r\n iconType = input<string>('fa-regular fa-bell');\r\n color = input<string>();\r\n valor = input<number>(0);\r\n theme = input<\r\n | 'light'\r\n | 'dark'\r\n | 'aqua'\r\n | 'sunset'\r\n | 'mint'\r\n | 'peach'\r\n | 'plasma'\r\n | 'nebula'\r\n >('light');\r\n\r\n options: Record<'currency' | 'integer' | 'percent', any> = {\r\n currency: {\r\n startVal: 0,\r\n duration: 0.5,\r\n //prefix: 'Q',\r\n decimalPlaces: 2, // Decimales\r\n useGrouping: true, // Separador de miles\r\n separator: ',', // Carácter separador\r\n decimal: '.', // Carácter decimal\r\n suffix: ' GTQ', // Sufijo\r\n scrollSpyDelay: 200, // Retardo antes de la animación\r\n enableScrollSpy: true,\r\n scrollSpyOnce: true,\r\n },\r\n integer: {\r\n startVal: 0,\r\n duration: 0.5,\r\n prefix: 'Cant. ',\r\n decimalPlaces: 2, // Decimales\r\n useGrouping: true, // Separador de miles\r\n separator: ',', // Carácter separador\r\n decimal: '.', // Carácter decimal\r\n scrollSpyDelay: 200, // Retardo antes de la animación\r\n enableScrollSpy: true,\r\n scrollSpyOnce: true,\r\n },\r\n percent: {\r\n startVal: 0,\r\n duration: 0.5,\r\n suffix: '%',\r\n decimalPlaces: 2, // Decimales\r\n useGrouping: true, // Separador de miles\r\n separator: ',', // Carácter separador\r\n decimal: '.', // Carácter decimal\r\n scrollSpyDelay: 200, // Retardo antes de la animación\r\n enableScrollSpy: true,\r\n scrollSpyOnce: true,\r\n },\r\n };\r\n\r\n // ✅ Método auxiliar para obtener la opción con seguridad\r\n getSelectedOption() {\r\n return this.options[this.option()] ?? this.options.currency; // Si no existe, usa `currency`\r\n }\r\n}\r\n","<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}
|
|
@@ -49,7 +49,7 @@ class KpicardComponent {
|
|
|
49
49
|
currency: {
|
|
50
50
|
startVal: 0,
|
|
51
51
|
duration: 0.5,
|
|
52
|
-
prefix: 'Q',
|
|
52
|
+
//prefix: 'Q',
|
|
53
53
|
decimalPlaces: 2, // Decimales
|
|
54
54
|
useGrouping: true, // Separador de miles
|
|
55
55
|
separator: ',', // Carácter separador
|
|
@@ -71,17 +71,29 @@ class KpicardComponent {
|
|
|
71
71
|
enableScrollSpy: true,
|
|
72
72
|
scrollSpyOnce: true,
|
|
73
73
|
},
|
|
74
|
+
percent: {
|
|
75
|
+
startVal: 0,
|
|
76
|
+
duration: 0.5,
|
|
77
|
+
suffix: '%',
|
|
78
|
+
decimalPlaces: 2, // Decimales
|
|
79
|
+
useGrouping: true, // Separador de miles
|
|
80
|
+
separator: ',', // Carácter separador
|
|
81
|
+
decimal: '.', // Carácter decimal
|
|
82
|
+
scrollSpyDelay: 200, // Retardo antes de la animación
|
|
83
|
+
enableScrollSpy: true,
|
|
84
|
+
scrollSpyOnce: true,
|
|
85
|
+
},
|
|
74
86
|
};
|
|
75
87
|
// ✅ Método auxiliar para obtener la opción con seguridad
|
|
76
88
|
getSelectedOption() {
|
|
77
89
|
return this.options[this.option()] ?? this.options.currency; // Si no existe, usa `currency`
|
|
78
90
|
}
|
|
79
91
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#
|
|
92
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}#container{width:1200px;display:flex}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"], dependencies: [{ kind: "ngmodule", type: CountUpModule }, { kind: "directive", type: i1$1.CountUpDirective, selector: "[countUp]", inputs: ["countUp", "options", "reanimateOnClick"], outputs: ["complete"] }] });
|
|
81
93
|
}
|
|
82
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KpicardComponent, decorators: [{
|
|
83
95
|
type: Component,
|
|
84
|
-
args: [{ selector: 'app-kpicard', imports: [CountUpModule], template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#
|
|
96
|
+
args: [{ selector: 'app-kpicard', imports: [CountUpModule], template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n <div class=\"kpi-container\">\r\n <span\r\n [countUp]=\"valor()\"\r\n [options]=\"getSelectedOption()\"\r\n [class]=\"`card-value-${theme()}`\"\r\n >0</span\r\n >\r\n <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n </div>\r\n <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}#container{width:1200px;display:flex}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"] }]
|
|
85
97
|
}] });
|
|
86
98
|
|
|
87
99
|
class JsonHighlightPipe {
|
|
@@ -539,6 +551,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
539
551
|
], template: "<p-menubar>\r\n <ng-template #start>\r\n <p-image\r\n class=\"ms-15\"\r\n [src]=\"urlLogo()\"\r\n alt=\"Image\"\r\n [width]=\"logoWidth()\"\r\n />\r\n <span class=\"version-text\">{{ appVersion() }}</span>\r\n </ng-template>\r\n <ng-template #end>\r\n <div class=\"flex items-center me-5\">\r\n <p-button\r\n class=\"mr-2\"\r\n label=\"Permisos\"\r\n variant=\"text\"\r\n severity=\"info\"\r\n (click)=\"actualizarSeguridadIT()\"\r\n >\r\n <span class=\"material-symbols-outlined mr-1\">local_police</span>\r\n </p-button>\r\n <label class=\"ui-switch\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"checked\"\r\n (click)=\"onThemeChange(!checked ? true : false)\"\r\n />\r\n <div class=\"slider\">\r\n <div class=\"circle\"></div>\r\n </div>\r\n </label>\r\n <!-- <p-inputSwitch\r\n [(ngModel)]=\"checked\"\r\n (onChange)=\"onThemeChange($event.checked)\"\r\n ></p-inputSwitch> -->\r\n </div>\r\n </ng-template>\r\n</p-menubar>\r\n", styles: [".ui-switch{--switch-bg: rgb(135, 150, 165);--switch-width: 48px;--switch-height: 20px;--circle-diameter: 32px;--circle-bg: rgb(232, 89, 15);--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2)}.ui-switch input{display:none}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);border-radius:999px;position:relative;cursor:pointer}.slider .circle{top:calc(var(--circle-inset) * -1);left:0;width:var(--circle-diameter);height:var(--circle-diameter);position:absolute;background:var(--circle-bg);border-radius:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+);background-repeat:no-repeat;background-position:center center;-webkit-transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,-webkit-transform .15s cubic-bezier(.4,0,.2,1) 0ms;-o-transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,transform .15s cubic-bezier(.4,0,.2,1) 0ms;transition:left .15s cubic-bezier(.4,0,.2,1) 0ms,transform .15s cubic-bezier(.4,0,.2,1) 0ms,-webkit-transform .15s cubic-bezier(.4,0,.2,1) 0ms;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.slider .circle:before{content:\"\";position:absolute;width:100%;height:100%;background:#ffffffbf;border-radius:inherit;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;opacity:0}.ui-switch input:checked+.slider .circle{left:calc(100% - var(--circle-diameter));background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=);background-color:#003892}.ui-switch input:active+.slider .circle:before{-webkit-transition:0s;-o-transition:0s;transition:0s;opacity:1;width:0;height:0}\n"] }]
|
|
540
552
|
}] });
|
|
541
553
|
|
|
554
|
+
/**
|
|
555
|
+
* Directiva que permite solo la entrada de:
|
|
556
|
+
* - Dígitos (0-9)
|
|
557
|
+
* - Separadores punto (.)
|
|
558
|
+
* - Rango con guión (-)
|
|
559
|
+
*
|
|
560
|
+
* Ejemplos válidos:
|
|
561
|
+
* - 1.2.3
|
|
562
|
+
* - 4-6
|
|
563
|
+
* - 1.3.5-9
|
|
564
|
+
*
|
|
565
|
+
* Restringe:
|
|
566
|
+
* - Letras
|
|
567
|
+
* - Espacios
|
|
568
|
+
* - Caracteres especiales
|
|
569
|
+
* - Doble punto (..), doble guión (--), o combinaciones como (.-)
|
|
570
|
+
*/
|
|
571
|
+
class OnlyRangoPatternDirective {
|
|
572
|
+
el;
|
|
573
|
+
constructor(el) {
|
|
574
|
+
this.el = el;
|
|
575
|
+
}
|
|
576
|
+
/**
|
|
577
|
+
* Expresión regular para permitir caracteres válidos individualmente (tecla por tecla).
|
|
578
|
+
*/
|
|
579
|
+
keyRegex = /^[0-9.\-]$/;
|
|
580
|
+
/**
|
|
581
|
+
* Escucha el evento de teclado y permite únicamente teclas válidas.
|
|
582
|
+
* También evita combinaciones inválidas como `..`, `--`, `.1`, etc.
|
|
583
|
+
*/
|
|
584
|
+
onKeyDown(event) {
|
|
585
|
+
const input = this.el.nativeElement;
|
|
586
|
+
const currentValue = input.value;
|
|
587
|
+
const cursorPos = input.selectionStart ?? 0;
|
|
588
|
+
const nextValue = currentValue.slice(0, cursorPos) +
|
|
589
|
+
event.key +
|
|
590
|
+
currentValue.slice(cursorPos);
|
|
591
|
+
const allowedKeys = [
|
|
592
|
+
'Backspace',
|
|
593
|
+
'Delete',
|
|
594
|
+
'ArrowLeft',
|
|
595
|
+
'ArrowRight',
|
|
596
|
+
'Tab',
|
|
597
|
+
'Home',
|
|
598
|
+
'End',
|
|
599
|
+
];
|
|
600
|
+
if (allowedKeys.includes(event.key))
|
|
601
|
+
return;
|
|
602
|
+
if (!this.keyRegex.test(event.key)) {
|
|
603
|
+
event.preventDefault();
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
// No permitir más de un punto o guión seguido, o combinaciones como ".-", "-.", etc.
|
|
607
|
+
if (/(\.\.|--|-\.)|(\.-)/.test(nextValue)) {
|
|
608
|
+
event.preventDefault();
|
|
609
|
+
return;
|
|
610
|
+
}
|
|
611
|
+
// No permitir iniciar con punto o guión
|
|
612
|
+
if (cursorPos === 0 && (event.key === '.' || event.key === '-')) {
|
|
613
|
+
event.preventDefault();
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
/**
|
|
617
|
+
* Previene el pegado de cadenas que no cumplan con la estructura válida.
|
|
618
|
+
* Solo permite: número o número separados por punto o guión correctamente.
|
|
619
|
+
*/
|
|
620
|
+
onPaste(event) {
|
|
621
|
+
const pasted = event.clipboardData?.getData('text') ?? '';
|
|
622
|
+
const sanitized = pasted.trim();
|
|
623
|
+
// Patrón completo de cadena válida: ej. 1.2.3.4-6
|
|
624
|
+
const pattern = /^(\d+(-\d+)?)(\.\d+(-\d+)?)*$/;
|
|
625
|
+
if (!pattern.test(sanitized)) {
|
|
626
|
+
event.preventDefault();
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OnlyRangoPatternDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
630
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OnlyRangoPatternDirective, isStandalone: true, selector: "[appOnlyRangoPattern]", host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
|
|
631
|
+
}
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OnlyRangoPatternDirective, decorators: [{
|
|
633
|
+
type: Directive,
|
|
634
|
+
args: [{
|
|
635
|
+
selector: '[appOnlyRangoPattern]',
|
|
636
|
+
}]
|
|
637
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onKeyDown: [{
|
|
638
|
+
type: HostListener,
|
|
639
|
+
args: ['keydown', ['$event']]
|
|
640
|
+
}], onPaste: [{
|
|
641
|
+
type: HostListener,
|
|
642
|
+
args: ['paste', ['$event']]
|
|
643
|
+
}] } });
|
|
644
|
+
|
|
542
645
|
class SelectAllOnFocusDirective {
|
|
543
646
|
selectAll(event) {
|
|
544
647
|
const htmlInput = event.target;
|
|
@@ -1208,6 +1311,90 @@ class UtilityAddService {
|
|
|
1208
1311
|
}, []);
|
|
1209
1312
|
return uniqueValues.sort((a, b) => a.value.localeCompare(b.value));
|
|
1210
1313
|
}
|
|
1314
|
+
/**
|
|
1315
|
+
* Función pura que procesa una cadena de texto conteniendo números individuales y/o rangos numéricos,
|
|
1316
|
+
* devolviendo un array con todos los números expandidos.
|
|
1317
|
+
*
|
|
1318
|
+
* @param input - Cadena de texto con el formato: número[.número][.inicio-fin][...]
|
|
1319
|
+
* @returns Array de números con todos los valores individuales y rangos expandidos
|
|
1320
|
+
*
|
|
1321
|
+
* @example
|
|
1322
|
+
* // Uso básico
|
|
1323
|
+
* const result = parseNumericRanges('1.5.7.10-12');
|
|
1324
|
+
* // Retorna: [1, 5, 7, 10, 11, 12]
|
|
1325
|
+
*
|
|
1326
|
+
* @example
|
|
1327
|
+
* // Con espacios y caracteres especiales
|
|
1328
|
+
* const result = parseNumericRanges(' 3. 5-7 .10-12abc');
|
|
1329
|
+
* // Retorna: [3, 5, 6, 7, 10, 11, 12]
|
|
1330
|
+
*
|
|
1331
|
+
* @example
|
|
1332
|
+
* // Rangos invertidos (serán ignorados)
|
|
1333
|
+
* const result = parseNumericRanges('10-8');
|
|
1334
|
+
* // Retorna: [] (array vacío)
|
|
1335
|
+
*
|
|
1336
|
+
* @note
|
|
1337
|
+
* Características especiales:
|
|
1338
|
+
* - Elimina automáticamente espacios y caracteres no numéricos
|
|
1339
|
+
* - Los números deben estar separados por puntos (.)
|
|
1340
|
+
* - Los rangos deben usar guión (-) sin espacios entre números
|
|
1341
|
+
* - Es tolerante a formatos inconsistentes
|
|
1342
|
+
* - Omite elementos inválidos sin generar errores
|
|
1343
|
+
*/
|
|
1344
|
+
parseNumericRanges(input) {
|
|
1345
|
+
const cleanString = input.replace(/[^\d.\- ]/g, '').replace(/\s+/g, '');
|
|
1346
|
+
const parts = cleanString.split('.');
|
|
1347
|
+
const result = [];
|
|
1348
|
+
for (const part of parts) {
|
|
1349
|
+
if (!part)
|
|
1350
|
+
continue;
|
|
1351
|
+
if (part.includes('-')) {
|
|
1352
|
+
const [startStr, endStr] = part.split('-');
|
|
1353
|
+
const start = parseInt(startStr, 10);
|
|
1354
|
+
const end = parseInt(endStr, 10);
|
|
1355
|
+
if (!isNaN(start) && !isNaN(end) && start <= end) {
|
|
1356
|
+
for (let i = start; i <= end; i++) {
|
|
1357
|
+
result.push(i);
|
|
1358
|
+
}
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
else {
|
|
1362
|
+
const number = parseInt(part, 10);
|
|
1363
|
+
if (!isNaN(number)) {
|
|
1364
|
+
result.push(number);
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
return result;
|
|
1369
|
+
}
|
|
1370
|
+
/**
|
|
1371
|
+
* Adaptador para procesar eventos de input y extraer rangos numéricos.
|
|
1372
|
+
*
|
|
1373
|
+
* @param event - Objeto Event del DOM, preferiblemente de un elemento input
|
|
1374
|
+
* @returns Array de números generado a partir del valor del input
|
|
1375
|
+
*
|
|
1376
|
+
* @example
|
|
1377
|
+
* // Uso en template Angular
|
|
1378
|
+
* <input (input)="processNumericRangesFromEvent($event)">
|
|
1379
|
+
*
|
|
1380
|
+
* @example
|
|
1381
|
+
* // Uso directo
|
|
1382
|
+
* const result = processNumericRangesFromEvent(inputEvent);
|
|
1383
|
+
*
|
|
1384
|
+
* @note
|
|
1385
|
+
* Esta función es un wrapper que:
|
|
1386
|
+
* - Extrae el valor del input del evento
|
|
1387
|
+
* - Delega el procesamiento a parseNumericRanges()
|
|
1388
|
+
* - Mantiene compatibilidad con eventos de diferentes frameworks
|
|
1389
|
+
*
|
|
1390
|
+
* @dependencies
|
|
1391
|
+
* Requiere que el evento tenga la propiedad target.value (standard DOM)
|
|
1392
|
+
* Para otros tipos de eventos (ej. Angular Material) puede necesitar ajustes
|
|
1393
|
+
*/
|
|
1394
|
+
processNumericRangesFromEvent(event) {
|
|
1395
|
+
const inputValue = event.target.value;
|
|
1396
|
+
return this.parseNumericRanges(inputValue);
|
|
1397
|
+
}
|
|
1211
1398
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UtilityAddService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1212
1399
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UtilityAddService, providedIn: 'root' });
|
|
1213
1400
|
}
|
|
@@ -1449,5 +1636,5 @@ function CUICorrecto(cui) {
|
|
|
1449
1636
|
* Generated bundle index. Do not edit.
|
|
1450
1637
|
*/
|
|
1451
1638
|
|
|
1452
|
-
export { AlertaService, AppMessageErrorComponent, AuthorizeService, CACHE_KEYS, CacheService, ENVIRONMENT, EndpointService, INITIAL_PARAMETERS, JsonHighlightPipe, JsonValuesDebujComponent, KpicardComponent, LoadingComponent, NavbarDsxComponent, ParameterValuesService, SecurityService, SelectAllOnFocusDirective, TruncatePipe, UtilityAddService, atLeastOneFieldRequiredValidator, createInitialCache, cuiValidator, dateMinMaxValidator, dateRangeValidator, httpAuthorizeInterceptor, nitValidator };
|
|
1639
|
+
export { AlertaService, AppMessageErrorComponent, AuthorizeService, CACHE_KEYS, CacheService, ENVIRONMENT, EndpointService, INITIAL_PARAMETERS, JsonHighlightPipe, JsonValuesDebujComponent, KpicardComponent, LoadingComponent, NavbarDsxComponent, OnlyRangoPatternDirective, ParameterValuesService, SecurityService, SelectAllOnFocusDirective, TruncatePipe, UtilityAddService, atLeastOneFieldRequiredValidator, createInitialCache, cuiValidator, dateMinMaxValidator, dateRangeValidator, httpAuthorizeInterceptor, nitValidator };
|
|
1453
1640
|
//# sourceMappingURL=ngx-dsxlibrary.mjs.map
|