@rsltda/components 1.0.11

package/README.md

@@ -0,0 +1,73 @@
+# @rsltda/components
+
+Libreria de Web Components construida con Vite + TypeScript. El paquete expone principalmente el custom element `<rs-map>`, pensado para desplegar mapas de Google con puntos filtrables y panel lateral. El objetivo del `npm publish` es distribuir solo el bundle compilado (`dist/`) para poder reutilizar el componente via npm o CDN (jsDelivr) sin exponer el codigo fuente.
+
+## Instalacion
+
+```bash
+npm install @rsltda/components
+```
+
+Al instalar, el paquete ya incluye los bundles `rs-components.es.js` (ESM) y `rs-components.iife.js`, mas las declaraciones TypeScript generadas en `dist/index.d.ts`.
+
+El paquete tambien publica `custom-elements.json`, lo que permite a herramientas compatibles ofrecer autocompletado y documentacion de atributos para `<rs-map>`.
+
+## Uso rapido
+
+### 1. Registrar el componente
+
+```ts
+import "@rsltda/components/dist/rs-components.es.js";
+// El bundle llama a safeDefine internamente, por lo que <rs-map> queda disponible en customElements.
+```
+
+### 2. Insertar en el DOM
+
+```html
+<rs-map
+  marca="ktm"
+  tipo="1"
+  height="600px"
+  google-maps-key="TU_KEY"
+  points-api-url="https://you.api.com/PuntosMapas"
+  cache-days="30"
+  marker-icon-base="https://you.cdn.com/marker/"
+></rs-map>
+```
+
+Todos los valores sensibles se inyectan mediante atributos, de modo que el bundle publicado se mantiene agnostico de tus credenciales.
+
+### 3. Consumo via jsDelivr
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@rsltda/components/dist/rs-components.es.js"></script>
+```
+
+Tras cargar el script anterior, puedes usar `<rs-map>` en cualquier sitio estatico sin necesidad de build tooling.
+
+## Publicacion en npm
+
+Este repositorio solo publica la carpeta `dist/` gracias a la combinacion de `files` en `package.json` y `.npmignore`. Antes de `npm publish`, ejecuta `npm run prepublishOnly`, lo cual dispara `vite build` y luego `tsc -p tsconfig.build.json` para asegurar que los bundles y los `.d.ts` esten actualizados.
+
+## Atributos principales de `<rs-map>`
+
+| Atributo           | Descripcion                                                                 |
+| ------------------ | ---------------------------------------------------------------------------- |
+| `marca`            | String que determina filtros y colores (`ktm`, etc.).                        |
+| `tipo`             | `0`/`1` o `sucursal`/`distribuidor`.                                         |
+| `height`           | Altura CSS del componente (`520px` por defecto).                             |
+| `google-maps-key`  | API key de Google Maps utilizada para cargar el script JS.                   |
+| `points-api-url`   | Endpoint que devuelve los puntos. Se le agregan query params `marca` y `tipo`. Por defecto usa `https://ap2.rs-shop.cl/web/PuntosMapas`. |
+| `cache-days`       | Dias que el componente considera vigente el cache local; por defecto `30`.   |
+| `marker-icon-base` | URL base para los iconos de los marcadores; se concatena con `<marca>.png`. Por defecto usa `https://cdn.rsltda.cl/logos/marker/`. |
+| `marker-icon-default` | Icono a usar cuando no se definio `marker-icon-base`; si tampoco se provee, se usara el marcador estandar de Google. |
+
+El componente es auto contenido: inyecta su propio Shadow DOM, maneja estados `loading/ready/error`, agrupa puntos por zona y sincroniza la lista lateral con el mapa.
+
+## Estructura relevante
+
+- `src/components/rs-map.ts`: componente completo con la logica de Google Maps, fetch y UI.
+- `src/utils/define.ts`: helper `safeDefine` para evitar redefinir custom elements.
+- `src/index.ts`: entry principal que registra `RsMap` y reexporta la clase.
+
+Durante el build, Vite empaqueta `src/index.ts` siguiendo la configuracion de `vite.config.ts`, mientras que `tsconfig.build.json` genera las declaraciones de tipos en el mismo `dist/`. De esta forma, el paquete final listo para npm contiene unicamente artefactos compilados e ideales para distribuir de forma segura.

package/custom-elements.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://raw.githubusercontent.com/webcomponents/custom-elements-manifest/main/schema.json",
+  "schemaVersion": "2.1.0",
+  "readme": "README.md",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/rs-map.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "RsMap",
+          "tagName": "rs-map",
+          "customElement": true,
+          "description": "Web component para mostrar un mapa de Google con puntos filtrados por marca y tipo, con cache local e interfaz lateral.",
+          "attributes": [
+            {
+              "name": "marca",
+              "description": "Marca usada para filtrar puntos y resolver color/icono del componente."
+            },
+            {
+              "name": "tipo",
+              "description": "Tipo de punto: 0/1 o sucursal/distribuidor."
+            },
+            {
+              "name": "height",
+              "description": "Altura CSS del componente. Por defecto 520px."
+            },
+            {
+              "name": "google-maps-key",
+              "description": "API key usada para cargar Google Maps JS."
+            },
+            {
+              "name": "points-api-url",
+              "description": "Endpoint base de puntos. Por defecto usa https://ap2.rs-shop.cl/web/PuntosMapas."
+            },
+            {
+              "name": "cache-days",
+              "description": "Tiempo de vigencia del cache local en dias. Por defecto 30."
+            },
+            {
+              "name": "marker-icon-base",
+              "description": "URL base para iconos por marca. Por defecto usa https://cdn.rsltda.cl/logos/marker/ y concatena <marca>.png."
+            },
+            {
+              "name": "marker-icon-default",
+              "description": "Icono de respaldo cuando no se quiere usar la base por marca."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/dist/components/rs-hello.d.ts

@@ -0,0 +1,4 @@
+export declare class RsHello extends HTMLElement {
+    static tag: string;
+    constructor();
+}

package/dist/components/rs-map.d.ts

@@ -0,0 +1,97 @@
+export declare class RsMap extends HTMLElement {
+    static tag: string;
+    private static googleMapsLoaderPromise;
+    private static pointsCacheDbPromise;
+    private root;
+    private mapEl;
+    private map;
+    private markers;
+    private marca;
+    private marcaKey;
+    private tipo;
+    private tipoCode;
+    private pointsController?;
+    private points;
+    private pointsByZone;
+    private initialViewApplied;
+    private zonesContainer;
+    private componentMessageEl;
+    private mapLayoutEl;
+    private zoneButtons;
+    private nearestButton;
+    private panelTitleEl;
+    private activeZone;
+    private mapHeight;
+    private googleMapsApiKey;
+    private pointsApiUrl;
+    private markerIconBaseUrl;
+    private defaultMarkerIconUrl;
+    private pointsCacheTtlMs;
+    private static fontAwesomeAttached;
+    private panAnimationFrame;
+    private highlightTimeout;
+    private isSyncingInitialAttributes;
+    private refreshQueued;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    private loadGoogleMaps;
+    private initMap;
+    private getInitialCenter;
+    private getFirstValidPoint;
+    private syncAttributesToState;
+    private setMapHeight;
+    private setGoogleMapsKey;
+    private setPointsApiUrl;
+    private setCacheDays;
+    private setMarkerIconBase;
+    private setDefaultMarkerIcon;
+    private setMarca;
+    private setTipo;
+    private queueRefreshPoints;
+    get marcaFilter(): string;
+    get tipoFilter(): string;
+    private updatePanelTitle;
+    private getTipoLabel;
+    private applyBrandColor;
+    private normalizeTipo;
+    private refreshPoints;
+    private applyPointsPayload;
+    private getPointsCacheKey;
+    private readPointsCache;
+    private writePointsCache;
+    private readPointsCacheFromIndexedDb;
+    private writePointsCacheToIndexedDb;
+    private static openPointsCacheDb;
+    private transformPoints;
+    private renderPoints;
+    private groupPoints;
+    private createPointCard;
+    private getZoneForPoint;
+    private normalizeRegionName;
+    private normalizeBrandKey;
+    private getMarkerIcon;
+    private updateMarkers;
+    private handleZoneButtonClick;
+    private setActiveZone;
+    private scrollToZoneSection;
+    private updateZoneButtons;
+    private updateZoneButtonCounts;
+    private updateZoneVisibility;
+    private handleNearestClick;
+    private findNearestPoint;
+    private haversine;
+    private scrollToPointCard;
+    private highlightPointCard;
+    private setComponentState;
+    private centerMapOnPoint;
+    private focusPointWithZoom;
+    private wait;
+    private animateZoomTo;
+    private animateMapPan;
+    private static ensureFontAwesome;
+    private createIconElement;
+    private getWhatsappLink;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { safeDefine } from './utils/define';
+import { RsMap } from './components/rs-map';
+export { RsMap, safeDefine };
+declare global {
+    interface HTMLElementTagNameMap {
+        'rs-map': RsMap;
+    }
+}