@kaufmann-lab/ui 0.1.26 → 0.1.27

package/fesm2022/kaufmann-lab-ui-map.mjs

@@ -350,6 +350,7 @@ const MAP_READY_FALLBACK_TIMEOUT_MS = 4000;
  *   <kf-map label="Ubicación del vehículo y del destino" [markers]="markers()" />
  *   <kf-map size="sm" variant="preview" label="Vista previa de la ruta" [route]="route()" />
  *   <kf-map label="Flota completa" [markers]="fleet()" [controls]="['zoom', 'recenter', 'cluster', 'follow']" />
+ *   <kf-map label="Flota completa" [markers]="fleet()" [clusterAbove]="50" />
  */
 class MapView {
     size = input('md', /* @ts-ignore */
@@ -381,6 +382,16 @@ class MapView {
     /** Controles flotantes a mostrar — ver JSDoc de la clase y `MapControls.ts`. */
     controls = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /**
+     * Umbral de agrupado automático: con `markers().length > clusterAbove` el
+     * mapa entra en modo cluster (el mismo que activa el control `cluster`),
+     * en vez de apilar cientos de pins y de paradas de Tab. `null` (default)
+     * conserva el comportamiento de siempre: nunca agrupa solo. Con el control
+     * `cluster` visible, el botón sigue mandando: un clic reemplaza lo
+     * automático hasta que se destruya el mapa.
+     */
+    clusterAbove = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterAbove" }] : /* istanbul ignore next */ []));
     /**
      * Descripción accesible real del mapa — el `<div>` donde Mapbox renderiza
      * su canvas queda vacío de semántica para un lector de pantalla. Requerido
@@ -426,7 +437,15 @@ class MapView {
      * `MapThemePicker` (vía `MapControls`) para marcar la opción activa. */
     activeTheme = computed(() => this.resolvedTheme(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
-    clusterActive = signal(false, /* @ts-ignore */
+    /** Elección manual del botón `cluster`; `null` = sin elegir, manda `clusterAbove`. */
+    clusterChoice = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterChoice" }] : /* istanbul ignore next */ []));
+    clusterAutomatic = computed(() => {
+        const threshold = this.clusterAbove();
+        return threshold !== null && this.markers().length > threshold;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clusterAutomatic" }] : /* istanbul ignore next */ []));
+    clusterActive = computed(() => this.clusterChoice() ?? this.clusterAutomatic(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clusterActive" }] : /* istanbul ignore next */ []));
     followActive = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "followActive" }] : /* istanbul ignore next */ []));
@@ -1548,7 +1567,7 @@ class MapView {
         this.syncCamera();
     }
     handleClusterToggle() {
-        this.clusterActive.update((value) => !value);
+        this.clusterChoice.set(!this.clusterActive());
         this.syncMarkers();
     }
     /** Reemplaza al viejo ciclado de un click (`handleStyleCycle`): la
@@ -1569,7 +1588,7 @@ class MapView {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MapView, isStandalone: true, selector: "kf-map", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, fitToMarkers: { classPropertyName: "fitToMarkers", publicName: "fitToMarkers", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerSelect: "markerSelect", markerAction: "markerAction" }, host: { properties: { "class.kf-map--sm": "size() === 'sm'", "class.kf-map--md": "size() === 'md'", "class.kf-map--lg": "size() === 'lg'", "class.kf-map--full": "size() === 'full'" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #mapContainer\n  class=\"kf-map__container\"\n  [attr.role]=\"containerRole()\"\n  [attr.aria-label]=\"label()\"\n  [attr.tabindex]=\"isPreview() ? -1 : null\"\n></div>\n\n@if (status() === 'loading') {\n  <div class=\"kf-map__overlay\" aria-live=\"polite\">\n    <kf-spinner label=\"Cargando mapa\u2026\" />\n  </div>\n} @else if (status() === 'error') {\n  <div class=\"kf-map__overlay kf-map__overlay--error\" role=\"alert\">\n    <kf-icon name=\"alert-triangle\" size=\"lg\" />\n    <kf-text as=\"p\" variant=\"body\" tone=\"error\">No pudimos cargar el mapa</kf-text>\n  </div>\n}\n\n@if (showControls()) {\n  <kf-map-controls\n    class=\"kf-map__controls\"\n    [controls]=\"effectiveControls()\"\n    [clusterActive]=\"clusterActive()\"\n    [followActive]=\"followActive()\"\n    [canFollow]=\"hasLiveMarker()\"\n    [isFullscreen]=\"isFullscreen()\"\n    [styleLabel]=\"styleLabel()\"\n    [activeTheme]=\"activeTheme()\"\n    (zoomIn)=\"handleZoomIn()\"\n    (zoomOut)=\"handleZoomOut()\"\n    (recenter)=\"handleRecenter()\"\n    (followToggle)=\"handleFollowToggle()\"\n    (clusterToggle)=\"handleClusterToggle()\"\n    (themeSelect)=\"handleThemeSelect($event)\"\n    (fullscreenToggle)=\"handleFullscreenToggle()\"\n  />\n}\n", styles: ["kf-map{display:block;position:relative;width:100%;border-radius:var(--kf-radius-md);overflow:hidden;background:var(--kf-color-gray-100)}kf-map.kf-map--sm{height:200px}kf-map.kf-map--md{height:320px}kf-map.kf-map--lg{height:480px}kf-map.kf-map--full{height:100%}kf-map:fullscreen,kf-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}.kf-map__container{width:100%;height:100%}.kf-map__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-sm);background:var(--kf-color-gray-100);text-align:center;padding:var(--kf-space-md);box-sizing:border-box}.kf-map__overlay--error{background:var(--kf-color-error-soft)}.kf-map__controls{position:absolute;top:var(--kf-space-sm);right:var(--kf-space-sm);z-index:3}.kf-map__marker{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--kf-color-white);box-shadow:var(--kf-shadow-md);color:var(--kf-color-white);z-index:1}.kf-map__marker:hover,.kf-map__marker:focus-within{z-index:3}.kf-map__marker--neutral{background:var(--kf-color-gray-700)}.kf-map__marker--ok{background:var(--kf-color-success)}.kf-map__marker--warn{background:var(--kf-color-warning)}.kf-map__marker--error{background:var(--kf-color-error)}.kf-map__marker--info{background:var(--kf-color-info)}.kf-map__marker--live:before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:var(--kf-color-white);opacity:.45;animation:kf-map-marker-pulse 1.8s ease-out infinite}@keyframes kf-map-marker-pulse{0%{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}.kf-map__marker--clickable{cursor:pointer}.kf-map__marker--clickable:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;transition:background-color .12s ease}.kf-map__marker--clickable:hover:after{background-color:color-mix(in srgb,var(--kf-color-ink) 12%,transparent)}.kf-map__marker--clickable:active{filter:brightness(.85)}.kf-map__marker--clickable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}@media(prefers-reduced-motion:reduce){.kf-map__marker--clickable:after{transition:none}.kf-map__marker--live:before{animation:none}}.kf-map__cluster-marker{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer}.kf-map__cluster-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}.kf-map__marker-popup{--kf-map-popup-tx: -50%;--kf-map-popup-ty: 4px;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(var(--kf-map-popup-tx),var(--kf-map-popup-ty));display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:240px;max-width:320px;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:var(--kf-space-md);text-align:left;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:4}.kf-map__marker-popup:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--kf-color-white)}.kf-map__marker:hover .kf-map__marker-popup,.kf-map__marker:focus-within .kf-map__marker-popup{opacity:1;transform:translate(var(--kf-map-popup-tx));pointer-events:auto}.kf-map__marker-popup--align-start{left:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--align-end{left:auto;right:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--below{bottom:auto;top:calc(100% + 12px);--kf-map-popup-ty: -4px}.kf-map__marker-popup--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--kf-color-white)}.kf-map__marker-popup-heading{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-map__marker-popup-tone{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__marker-popup-tone--neutral{background:var(--kf-color-gray-700)}.kf-map__marker-popup-tone--ok{background:var(--kf-color-success)}.kf-map__marker-popup-tone--warn{background:var(--kf-color-warning)}.kf-map__marker-popup-tone--error{background:var(--kf-color-error)}.kf-map__marker-popup-tone--info{background:var(--kf-color-info)}.kf-map__marker-popup-title{font-family:var(--kf-font-mono);font-weight:700;font-size:.9375rem;line-height:1.25;color:var(--kf-color-primary)}.kf-map__marker-popup-description{font-size:.8125rem;line-height:1.4;color:var(--kf-color-text)}.kf-map__marker-popup-details{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:var(--kf-space-xs) 0 0;border-top:1px solid var(--kf-color-border)}.kf-map__marker-popup-detail{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kf-space-sm);margin:0}.kf-map__marker-popup-detail-label{font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted);white-space:nowrap}.kf-map__marker-popup-detail-value{margin:0;font-size:.75rem;font-weight:600;color:var(--kf-color-text);text-align:right}.kf-map__marker-popup-actions{display:flex;gap:var(--kf-space-xs);margin-top:2px}.kf-map__marker-popup-action{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.75rem;font-weight:700;border:1px solid transparent;border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.kf-map__marker-popup-action-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__marker-popup-action--primary{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-map__marker-popup-action--primary:hover{background:var(--kf-color-primary-hover);border-color:var(--kf-color-primary-hover)}.kf-map__marker-popup-action--ghost{color:var(--kf-color-primary);background:transparent}.kf-map__marker-popup-action--ghost:hover{background:var(--kf-color-primary-soft)}.kf-map__marker-popup-action:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__marker-popup-action svg,.kf-map__cluster-popup-close svg,.kf-map__cluster-popup-expand svg{width:14px;height:14px;flex:none}@media(prefers-reduced-motion:reduce){.kf-map__marker-popup,.kf-map__marker-popup-action{transition:none}}.kf-map__cluster-popup{position:absolute;display:flex;flex-direction:column;width:280px;max-width:calc(100% - 2 * var(--kf-space-sm));background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);overflow:hidden;z-index:5}.kf-map__cluster-popup-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-map__cluster-popup-title{font-weight:700;font-size:.8125rem;color:var(--kf-color-text)}.kf-map__cluster-popup-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-text-muted);cursor:pointer;flex:none}.kf-map__cluster-popup-close:hover{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-map__cluster-popup-close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__cluster-popup-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;margin:0;padding:var(--kf-space-xs) 0;list-style:none}.kf-map__cluster-popup-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-md)}.kf-map__cluster-popup-item--clickable{cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-item--clickable:hover,.kf-map__cluster-popup-item--clickable:focus-visible{background:var(--kf-color-surface);outline:none}.kf-map__cluster-popup-dot{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__cluster-popup-dot--neutral{background:var(--kf-color-gray-700)}.kf-map__cluster-popup-dot--ok{background:var(--kf-color-success)}.kf-map__cluster-popup-dot--warn{background:var(--kf-color-warning)}.kf-map__cluster-popup-dot--error{background:var(--kf-color-error)}.kf-map__cluster-popup-dot--info{background:var(--kf-color-info)}.kf-map__cluster-popup-text{display:flex;flex-direction:column;min-width:0;gap:1px}.kf-map__cluster-popup-item-title{font-weight:600;font-size:.8125rem;color:var(--kf-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-item-description{font-size:.75rem;color:var(--kf-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-map__cluster-popup-expand{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;font:inherit;font-size:.75rem;font-weight:700;color:var(--kf-color-primary);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-expand:hover{background:var(--kf-color-primary-soft)}.kf-map__cluster-popup-expand:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-map__cluster-popup-item--clickable,.kf-map__cluster-popup-expand{transition:none}}\n"], dependencies: [{ kind: "component", type: MapControls, selector: "kf-map-controls", inputs: ["controls", "clusterActive", "followActive", "canFollow", "isFullscreen", "styleLabel", "activeTheme"], outputs: ["zoomIn", "zoomOut", "recenter", "followToggle", "clusterToggle", "themeSelect", "fullscreenToggle"] }, { kind: "component", type: Spinner, selector: "kf-spinner", inputs: ["size", "label", "onDark"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MapView, isStandalone: true, selector: "kf-map", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, fitToMarkers: { classPropertyName: "fitToMarkers", publicName: "fitToMarkers", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, clusterAbove: { classPropertyName: "clusterAbove", publicName: "clusterAbove", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerSelect: "markerSelect", markerAction: "markerAction" }, host: { properties: { "class.kf-map--sm": "size() === 'sm'", "class.kf-map--md": "size() === 'md'", "class.kf-map--lg": "size() === 'lg'", "class.kf-map--full": "size() === 'full'" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #mapContainer\n  class=\"kf-map__container\"\n  [attr.role]=\"containerRole()\"\n  [attr.aria-label]=\"label()\"\n  [attr.tabindex]=\"isPreview() ? -1 : null\"\n></div>\n\n@if (status() === 'loading') {\n  <div class=\"kf-map__overlay\" aria-live=\"polite\">\n    <kf-spinner label=\"Cargando mapa\u2026\" />\n  </div>\n} @else if (status() === 'error') {\n  <div class=\"kf-map__overlay kf-map__overlay--error\" role=\"alert\">\n    <kf-icon name=\"alert-triangle\" size=\"lg\" />\n    <kf-text as=\"p\" variant=\"body\" tone=\"error\">No pudimos cargar el mapa</kf-text>\n  </div>\n}\n\n@if (showControls()) {\n  <kf-map-controls\n    class=\"kf-map__controls\"\n    [controls]=\"effectiveControls()\"\n    [clusterActive]=\"clusterActive()\"\n    [followActive]=\"followActive()\"\n    [canFollow]=\"hasLiveMarker()\"\n    [isFullscreen]=\"isFullscreen()\"\n    [styleLabel]=\"styleLabel()\"\n    [activeTheme]=\"activeTheme()\"\n    (zoomIn)=\"handleZoomIn()\"\n    (zoomOut)=\"handleZoomOut()\"\n    (recenter)=\"handleRecenter()\"\n    (followToggle)=\"handleFollowToggle()\"\n    (clusterToggle)=\"handleClusterToggle()\"\n    (themeSelect)=\"handleThemeSelect($event)\"\n    (fullscreenToggle)=\"handleFullscreenToggle()\"\n  />\n}\n", styles: ["kf-map{display:block;position:relative;width:100%;border-radius:var(--kf-radius-md);overflow:hidden;background:var(--kf-color-gray-100)}kf-map.kf-map--sm{height:200px}kf-map.kf-map--md{height:320px}kf-map.kf-map--lg{height:480px}kf-map.kf-map--full{height:100%}kf-map:fullscreen,kf-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}.kf-map__container{width:100%;height:100%}.kf-map__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-sm);background:var(--kf-color-gray-100);text-align:center;padding:var(--kf-space-md);box-sizing:border-box}.kf-map__overlay--error{background:var(--kf-color-error-soft)}.kf-map__controls{position:absolute;top:var(--kf-space-sm);right:var(--kf-space-sm);z-index:3}.kf-map__marker{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--kf-color-white);box-shadow:var(--kf-shadow-md);color:var(--kf-color-white);z-index:1}.kf-map__marker:hover,.kf-map__marker:focus-within{z-index:3}.kf-map__marker--neutral{background:var(--kf-color-gray-700)}.kf-map__marker--ok{background:var(--kf-color-success)}.kf-map__marker--warn{background:var(--kf-color-warning)}.kf-map__marker--error{background:var(--kf-color-error)}.kf-map__marker--info{background:var(--kf-color-info)}.kf-map__marker--live:before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:var(--kf-color-white);opacity:.45;animation:kf-map-marker-pulse 1.8s ease-out infinite}@keyframes kf-map-marker-pulse{0%{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}.kf-map__marker--clickable{cursor:pointer}.kf-map__marker--clickable:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;transition:background-color .12s ease}.kf-map__marker--clickable:hover:after{background-color:color-mix(in srgb,var(--kf-color-ink) 12%,transparent)}.kf-map__marker--clickable:active{filter:brightness(.85)}.kf-map__marker--clickable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}@media(prefers-reduced-motion:reduce){.kf-map__marker--clickable:after{transition:none}.kf-map__marker--live:before{animation:none}}.kf-map__cluster-marker{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer}.kf-map__cluster-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}.kf-map__marker-popup{--kf-map-popup-tx: -50%;--kf-map-popup-ty: 4px;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(var(--kf-map-popup-tx),var(--kf-map-popup-ty));display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:240px;max-width:320px;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:var(--kf-space-md);text-align:left;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:4}.kf-map__marker-popup:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--kf-color-white)}.kf-map__marker:hover .kf-map__marker-popup,.kf-map__marker:focus-within .kf-map__marker-popup{opacity:1;transform:translate(var(--kf-map-popup-tx));pointer-events:auto}.kf-map__marker-popup--align-start{left:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--align-end{left:auto;right:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--below{bottom:auto;top:calc(100% + 12px);--kf-map-popup-ty: -4px}.kf-map__marker-popup--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--kf-color-white)}.kf-map__marker-popup-heading{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-map__marker-popup-tone{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__marker-popup-tone--neutral{background:var(--kf-color-gray-700)}.kf-map__marker-popup-tone--ok{background:var(--kf-color-success)}.kf-map__marker-popup-tone--warn{background:var(--kf-color-warning)}.kf-map__marker-popup-tone--error{background:var(--kf-color-error)}.kf-map__marker-popup-tone--info{background:var(--kf-color-info)}.kf-map__marker-popup-title{font-family:var(--kf-font-mono);font-weight:700;font-size:.9375rem;line-height:1.25;color:var(--kf-color-primary)}.kf-map__marker-popup-description{font-size:.8125rem;line-height:1.4;color:var(--kf-color-text)}.kf-map__marker-popup-details{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:var(--kf-space-xs) 0 0;border-top:1px solid var(--kf-color-border)}.kf-map__marker-popup-detail{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kf-space-sm);margin:0}.kf-map__marker-popup-detail-label{font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted);white-space:nowrap}.kf-map__marker-popup-detail-value{margin:0;font-size:.75rem;font-weight:600;color:var(--kf-color-text);text-align:right}.kf-map__marker-popup-actions{display:flex;gap:var(--kf-space-xs);margin-top:2px}.kf-map__marker-popup-action{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.75rem;font-weight:700;border:1px solid transparent;border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.kf-map__marker-popup-action-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__marker-popup-action--primary{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-map__marker-popup-action--primary:hover{background:var(--kf-color-primary-hover);border-color:var(--kf-color-primary-hover)}.kf-map__marker-popup-action--ghost{color:var(--kf-color-primary);background:transparent}.kf-map__marker-popup-action--ghost:hover{background:var(--kf-color-primary-soft)}.kf-map__marker-popup-action:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__marker-popup-action svg,.kf-map__cluster-popup-close svg,.kf-map__cluster-popup-expand svg{width:14px;height:14px;flex:none}@media(prefers-reduced-motion:reduce){.kf-map__marker-popup,.kf-map__marker-popup-action{transition:none}}.kf-map__cluster-popup{position:absolute;display:flex;flex-direction:column;width:280px;max-width:calc(100% - 2 * var(--kf-space-sm));background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);overflow:hidden;z-index:5}.kf-map__cluster-popup-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-map__cluster-popup-title{font-weight:700;font-size:.8125rem;color:var(--kf-color-text)}.kf-map__cluster-popup-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-text-muted);cursor:pointer;flex:none}.kf-map__cluster-popup-close:hover{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-map__cluster-popup-close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__cluster-popup-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;margin:0;padding:var(--kf-space-xs) 0;list-style:none}.kf-map__cluster-popup-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-md)}.kf-map__cluster-popup-item--clickable{cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-item--clickable:hover,.kf-map__cluster-popup-item--clickable:focus-visible{background:var(--kf-color-surface);outline:none}.kf-map__cluster-popup-dot{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__cluster-popup-dot--neutral{background:var(--kf-color-gray-700)}.kf-map__cluster-popup-dot--ok{background:var(--kf-color-success)}.kf-map__cluster-popup-dot--warn{background:var(--kf-color-warning)}.kf-map__cluster-popup-dot--error{background:var(--kf-color-error)}.kf-map__cluster-popup-dot--info{background:var(--kf-color-info)}.kf-map__cluster-popup-text{display:flex;flex-direction:column;min-width:0;gap:1px}.kf-map__cluster-popup-item-title{font-weight:600;font-size:.8125rem;color:var(--kf-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-item-description{font-size:.75rem;color:var(--kf-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-map__cluster-popup-expand{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;font:inherit;font-size:.75rem;font-weight:700;color:var(--kf-color-primary);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-expand:hover{background:var(--kf-color-primary-soft)}.kf-map__cluster-popup-expand:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-map__cluster-popup-item--clickable,.kf-map__cluster-popup-expand{transition:none}}\n"], dependencies: [{ kind: "component", type: MapControls, selector: "kf-map-controls", inputs: ["controls", "clusterActive", "followActive", "canFollow", "isFullscreen", "styleLabel", "activeTheme"], outputs: ["zoomIn", "zoomOut", "recenter", "followToggle", "clusterToggle", "themeSelect", "fullscreenToggle"] }, { kind: "component", type: Spinner, selector: "kf-spinner", inputs: ["size", "label", "onDark"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MapView, decorators: [{
             type: Component,
@@ -1579,7 +1598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.kf-map--lg]': "size() === 'lg'",
                         '[class.kf-map--full]': "size() === 'full'",
                     }, template: "<div\n  #mapContainer\n  class=\"kf-map__container\"\n  [attr.role]=\"containerRole()\"\n  [attr.aria-label]=\"label()\"\n  [attr.tabindex]=\"isPreview() ? -1 : null\"\n></div>\n\n@if (status() === 'loading') {\n  <div class=\"kf-map__overlay\" aria-live=\"polite\">\n    <kf-spinner label=\"Cargando mapa\u2026\" />\n  </div>\n} @else if (status() === 'error') {\n  <div class=\"kf-map__overlay kf-map__overlay--error\" role=\"alert\">\n    <kf-icon name=\"alert-triangle\" size=\"lg\" />\n    <kf-text as=\"p\" variant=\"body\" tone=\"error\">No pudimos cargar el mapa</kf-text>\n  </div>\n}\n\n@if (showControls()) {\n  <kf-map-controls\n    class=\"kf-map__controls\"\n    [controls]=\"effectiveControls()\"\n    [clusterActive]=\"clusterActive()\"\n    [followActive]=\"followActive()\"\n    [canFollow]=\"hasLiveMarker()\"\n    [isFullscreen]=\"isFullscreen()\"\n    [styleLabel]=\"styleLabel()\"\n    [activeTheme]=\"activeTheme()\"\n    (zoomIn)=\"handleZoomIn()\"\n    (zoomOut)=\"handleZoomOut()\"\n    (recenter)=\"handleRecenter()\"\n    (followToggle)=\"handleFollowToggle()\"\n    (clusterToggle)=\"handleClusterToggle()\"\n    (themeSelect)=\"handleThemeSelect($event)\"\n    (fullscreenToggle)=\"handleFullscreenToggle()\"\n  />\n}\n", styles: ["kf-map{display:block;position:relative;width:100%;border-radius:var(--kf-radius-md);overflow:hidden;background:var(--kf-color-gray-100)}kf-map.kf-map--sm{height:200px}kf-map.kf-map--md{height:320px}kf-map.kf-map--lg{height:480px}kf-map.kf-map--full{height:100%}kf-map:fullscreen,kf-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}.kf-map__container{width:100%;height:100%}.kf-map__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-sm);background:var(--kf-color-gray-100);text-align:center;padding:var(--kf-space-md);box-sizing:border-box}.kf-map__overlay--error{background:var(--kf-color-error-soft)}.kf-map__controls{position:absolute;top:var(--kf-space-sm);right:var(--kf-space-sm);z-index:3}.kf-map__marker{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--kf-color-white);box-shadow:var(--kf-shadow-md);color:var(--kf-color-white);z-index:1}.kf-map__marker:hover,.kf-map__marker:focus-within{z-index:3}.kf-map__marker--neutral{background:var(--kf-color-gray-700)}.kf-map__marker--ok{background:var(--kf-color-success)}.kf-map__marker--warn{background:var(--kf-color-warning)}.kf-map__marker--error{background:var(--kf-color-error)}.kf-map__marker--info{background:var(--kf-color-info)}.kf-map__marker--live:before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:var(--kf-color-white);opacity:.45;animation:kf-map-marker-pulse 1.8s ease-out infinite}@keyframes kf-map-marker-pulse{0%{transform:scale(.6);opacity:.45}to{transform:scale(1.6);opacity:0}}.kf-map__marker--clickable{cursor:pointer}.kf-map__marker--clickable:after{content:\"\";position:absolute;inset:-6px;border-radius:50%;transition:background-color .12s ease}.kf-map__marker--clickable:hover:after{background-color:color-mix(in srgb,var(--kf-color-ink) 12%,transparent)}.kf-map__marker--clickable:active{filter:brightness(.85)}.kf-map__marker--clickable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}@media(prefers-reduced-motion:reduce){.kf-map__marker--clickable:after{transition:none}.kf-map__marker--live:before{animation:none}}.kf-map__cluster-marker{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer}.kf-map__cluster-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kf-color-white),0 0 0 4px var(--kf-color-ink)}.kf-map__marker-popup{--kf-map-popup-tx: -50%;--kf-map-popup-ty: 4px;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(var(--kf-map-popup-tx),var(--kf-map-popup-ty));display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:240px;max-width:320px;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);padding:var(--kf-space-md);text-align:left;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:4}.kf-map__marker-popup:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--kf-color-white)}.kf-map__marker:hover .kf-map__marker-popup,.kf-map__marker:focus-within .kf-map__marker-popup{opacity:1;transform:translate(var(--kf-map-popup-tx));pointer-events:auto}.kf-map__marker-popup--align-start{left:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--align-end{left:auto;right:0;--kf-map-popup-tx: 0%}.kf-map__marker-popup--below{bottom:auto;top:calc(100% + 12px);--kf-map-popup-ty: -4px}.kf-map__marker-popup--below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--kf-color-white)}.kf-map__marker-popup-heading{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-map__marker-popup-tone{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__marker-popup-tone--neutral{background:var(--kf-color-gray-700)}.kf-map__marker-popup-tone--ok{background:var(--kf-color-success)}.kf-map__marker-popup-tone--warn{background:var(--kf-color-warning)}.kf-map__marker-popup-tone--error{background:var(--kf-color-error)}.kf-map__marker-popup-tone--info{background:var(--kf-color-info)}.kf-map__marker-popup-title{font-family:var(--kf-font-mono);font-weight:700;font-size:.9375rem;line-height:1.25;color:var(--kf-color-primary)}.kf-map__marker-popup-description{font-size:.8125rem;line-height:1.4;color:var(--kf-color-text)}.kf-map__marker-popup-details{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:var(--kf-space-xs) 0 0;border-top:1px solid var(--kf-color-border)}.kf-map__marker-popup-detail{display:flex;align-items:baseline;justify-content:space-between;gap:var(--kf-space-sm);margin:0}.kf-map__marker-popup-detail-label{font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted);white-space:nowrap}.kf-map__marker-popup-detail-value{margin:0;font-size:.75rem;font-weight:600;color:var(--kf-color-text);text-align:right}.kf-map__marker-popup-actions{display:flex;gap:var(--kf-space-xs);margin-top:2px}.kf-map__marker-popup-action{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.75rem;font-weight:700;border:1px solid transparent;border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.kf-map__marker-popup-action-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__marker-popup-action--primary{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-map__marker-popup-action--primary:hover{background:var(--kf-color-primary-hover);border-color:var(--kf-color-primary-hover)}.kf-map__marker-popup-action--ghost{color:var(--kf-color-primary);background:transparent}.kf-map__marker-popup-action--ghost:hover{background:var(--kf-color-primary-soft)}.kf-map__marker-popup-action:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__marker-popup-action svg,.kf-map__cluster-popup-close svg,.kf-map__cluster-popup-expand svg{width:14px;height:14px;flex:none}@media(prefers-reduced-motion:reduce){.kf-map__marker-popup,.kf-map__marker-popup-action{transition:none}}.kf-map__cluster-popup{position:absolute;display:flex;flex-direction:column;width:280px;max-width:calc(100% - 2 * var(--kf-space-sm));background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-md);overflow:hidden;z-index:5}.kf-map__cluster-popup-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-map__cluster-popup-title{font-weight:700;font-size:.8125rem;color:var(--kf-color-text)}.kf-map__cluster-popup-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-text-muted);cursor:pointer;flex:none}.kf-map__cluster-popup-close:hover{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-map__cluster-popup-close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-map__cluster-popup-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;margin:0;padding:var(--kf-space-xs) 0;list-style:none}.kf-map__cluster-popup-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-md)}.kf-map__cluster-popup-item--clickable{cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-item--clickable:hover,.kf-map__cluster-popup-item--clickable:focus-visible{background:var(--kf-color-surface);outline:none}.kf-map__cluster-popup-dot{inline-size:8px;block-size:8px;border-radius:var(--kf-radius-pill);flex:none}.kf-map__cluster-popup-dot--neutral{background:var(--kf-color-gray-700)}.kf-map__cluster-popup-dot--ok{background:var(--kf-color-success)}.kf-map__cluster-popup-dot--warn{background:var(--kf-color-warning)}.kf-map__cluster-popup-dot--error{background:var(--kf-color-error)}.kf-map__cluster-popup-dot--info{background:var(--kf-color-info)}.kf-map__cluster-popup-text{display:flex;flex-direction:column;min-width:0;gap:1px}.kf-map__cluster-popup-item-title{font-weight:600;font-size:.8125rem;color:var(--kf-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-item-description{font-size:.75rem;color:var(--kf-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-map__cluster-popup-footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-map__cluster-popup-expand{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:100%;font:inherit;font-size:.75rem;font-weight:700;color:var(--kf-color-primary);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);padding:6px 10px;cursor:pointer;transition:background .12s ease}.kf-map__cluster-popup-expand:hover{background:var(--kf-color-primary-soft)}.kf-map__cluster-popup-expand:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-map__cluster-popup-item--clickable,.kf-map__cluster-popup-expand{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], fitToMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToMarkers", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], markerSelect: [{ type: i0.Output, args: ["markerSelect"] }], markerAction: [{ type: i0.Output, args: ["markerAction"] }], containerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], fitToMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToMarkers", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], clusterAbove: [{ type: i0.Input, args: [{ isSignal: true, alias: "clusterAbove", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], markerSelect: [{ type: i0.Output, args: ["markerSelect"] }], markerAction: [{ type: i0.Output, args: ["markerAction"] }], containerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
 
 /*
  * Public API Surface of ui/map — entry point secundario, `@kaufmann-lab/ui/map`.