sapenlinea-components 0.6.65 → 0.6.66

package/fesm2022/sapenlinea-components.mjs

@@ -3115,7 +3115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class FeatureCard {
     /** Objeto feature (con soporte para binding bidireccional vía señales) */
-    feature = model(undefined, ...(ngDevMode ? [{ debugName: "feature" }] : []));
+    feature = model(...(ngDevMode ? [undefined, { debugName: "feature" }] : []));
     showLeading = input(false, ...(ngDevMode ? [{ debugName: "showLeading" }] : []));
     showTrailling = input(false, ...(ngDevMode ? [{ debugName: "showTrailling" }] : []));
     /** Valor interno de la descripción mientras se edita */
@@ -5143,32 +5143,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n    <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-const Colors = {
-    primary: '#4B5E05',
-    secondary: '#063546',
-    tertiary: '#6B0518',
-    quaternary: '#F57C00',
-};
-class KpiCard {
-    title = input('Titulo', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    description = input('Descripción', ...(ngDevMode ? [{ debugName: "description" }] : []));
-    value = input('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
-    iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-    resolvedIconColor = computed(() => {
-        const color = this.iconColor();
-        // Revisa si es un predeterminado, si no, lo asume como hex code.
-        return Colors[color] || color;
-    }, ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: KpiCard, isStandalone: true, selector: "lib-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-kpi-card', imports: [CommonModule], template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }] } });
-
 class GeoAPIMaps {
+    points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
     map;
+    markers = [];
+    constructor() {
+        effect(() => {
+            const pts = this.points();
+            if (this.map && pts.length > 0) {
+                this.renderPoints(pts);
+            }
+        });
+    }
     ngAfterViewInit() {
         this.initMap();
     }
@@ -5177,11 +5163,11 @@ class GeoAPIMaps {
         if (!mapElement)
             return;
         this.map = new google.maps.Map(mapElement, {
-            center: { lat: 10.9878, lng: -74.7889 }, // Barranquilla
-            zoom: 15,
+            center: { lat: 10.96854, lng: -74.78132 }, // Barranquilla
+            zoom: 13,
             clickableIcons: false,
             mapId: '1b033ea586ba5df9c6dc091a',
-            // 🔥 Opciones para ocultar controles
+            // Opciones para ocultar controles
             mapTypeControl: false, // quita el botón "Mapa/Satélite"
             streetViewControl: true, // quita Street View
             fullscreenControl: false, // quita fullscreen
@@ -5191,6 +5177,10 @@ class GeoAPIMaps {
                 position: google.maps.ControlPosition.TOP_LEFT // mueve el zoom a la parte superior izquierda
             },
         });
+        // Render points if they already exist when map is ready
+        if (this.points().length > 0) {
+            this.renderPoints(this.points());
+        }
     }
     goToLocation(lat, lng) {
         if (!this.map)
@@ -5203,13 +5193,129 @@ class GeoAPIMaps {
         this.map.panTo(position);
         this.map.setZoom(18);
     }
+    clearMarkers() {
+        this.markers.forEach(m => m.map = null);
+        this.markers = [];
+    }
+    renderPoints(points) {
+        this.clearMarkers();
+        const infoWindow = new google.maps.InfoWindow();
+        let lockedMarker = null;
+        points.forEach(point => {
+            const dot = document.createElement('div');
+            dot.style.width = '16px';
+            dot.style.height = '16px';
+            dot.style.borderRadius = '50%';
+            dot.style.backgroundColor = point.immobilized ? '#ef4444' : '#3b82f6';
+            dot.style.border = '2px solid white';
+            dot.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+            dot.style.cursor = 'pointer';
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                position: { lat: point.latitude, lng: point.longitude },
+                map: this.map,
+                content: dot,
+            });
+            const content = `
+        <div style="padding: 0 12px 12px 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-width: 200px; color: #374151;">
+          <div style="font-weight: 700; font-size: 15px; color: #111827; margin-bottom: 8px; line-height: 1.2;">
+            ${point.subpoenaNumber}
+          </div>
+          <div style="font-size: 14px; color: #4b5563; margin-bottom: 4px;">
+            ${point.locationLabel}
+          </div>
+          <div style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">
+            ${point.dateTime.replace('T', ' - ').substring(0, 18)}
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; margin-top: 4px;">
+            <div style="font-size: 13px;">
+              <span style="color: #9ca3af;">Infracción:</span> 
+              <span style="font-weight: 500; color: #374151;">${point.infractionCode}</span>
+            </div>
+            <div style="font-size: 13px;">
+              <span style="color: #9ca3af;">Placa:</span> 
+              <span style="font-weight: 500; color: #374151;">${point.plate}</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 4px; color: ${point.immobilized ? '#ef4444' : '#3b82f6'};">
+              <span style="width: 8px; height: 8px; border-radius: 50%; background-color: ${point.immobilized ? '#ef4444' : '#3b82f6'};"></span>
+              ${point.immobilized ? 'Inmovilizado' : 'Normal'}
+            </div>
+          </div>
+        </div>
+      `;
+            marker.addListener('mouseover', () => {
+                if (!lockedMarker) {
+                    infoWindow.setContent(content);
+                    infoWindow.open(this.map, marker);
+                }
+            });
+            marker.addListener('mouseout', () => {
+                if (!lockedMarker) {
+                    infoWindow.close();
+                }
+            });
+            marker.addListener('click', () => {
+                lockedMarker = marker;
+                infoWindow.setContent(content);
+                infoWindow.open(this.map, marker);
+            });
+            infoWindow.addListener('closeclick', () => {
+                lockedMarker = null;
+            });
+            this.markers.push(marker);
+        });
+        // Auto-center and zoom to show all points
+        if (points.length > 0) {
+            const bounds = new google.maps.LatLngBounds();
+            points.forEach(p => bounds.extend({ lat: p.latitude, lng: p.longitude }));
+            this.map.fitBounds(bounds);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: GeoAPIMaps, isStandalone: true, selector: "lib-geo-api-maps", ngImport: i0, template: "<div id=\"map\"></div>\r\n", styles: ["#map{position:absolute;inset:0;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GeoAPIMaps, isStandalone: true, selector: "lib-geo-api-maps", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-geo-api-maps', imports: [CommonModule], template: "<div id=\"map\"></div>\r\n", styles: ["#map{position:absolute;inset:0;z-index:1}\n"] }]
-        }] });
+            args: [{ selector: 'lib-geo-api-maps', standalone: true, imports: [CommonModule], template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+
+class MapGeo {
+    title = input('Mapa Geográfico', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    toggleExpand() {
+        this.isExpanded.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MapGeo, isStandalone: true, selector: "lib-map-geo", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.map-geo-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.map-geo-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: GeoAPIMaps, selector: "lib-geo-api-maps", inputs: ["points"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-geo', imports: [GeoAPIMaps], template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.map-geo-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.map-geo-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+
+const Colors = {
+    primary: '#4B5E05',
+    secondary: '#063546',
+    tertiary: '#6B0518',
+    quaternary: '#F57C00',
+};
+class KpiCard {
+    title = input('Titulo', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    value = input('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    resolvedIconColor = computed(() => {
+        const color = this.iconColor();
+        // Revisa si es un predeterminado, si no, lo asume como hex code.
+        return Colors[color] || color;
+    }, ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: KpiCard, isStandalone: true, selector: "lib-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"kpi-description\">{{ description() }}</p>\n    } @else {\n      <div class=\"kpi-description\">\n        <ng-content select=\"[description]\"></ng-content>\n      </div>\n    }\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-kpi-card', imports: [CommonModule], template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"kpi-description\">{{ description() }}</p>\n    } @else {\n      <div class=\"kpi-description\">\n        <ng-content select=\"[description]\"></ng-content>\n      </div>\n    }\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }] } });
 
 // src/app/components/public-api.ts
 // Exportar los componentes
@@ -5218,5 +5324,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map