@rsltda/components

Web Components construidos con Vite + TypeScript. El paquete expone principalmente <rs-map> y <rs-whatsapp>, listos para integrarse en cualquier sitio mediante Web Components.

Alcance de uso

Este paquete se publica de forma abierta para fines de integracion tecnica, evaluacion y desarrollo. Sin embargo, el uso en produccion de marcas, nombres comerciales, endpoints, datos, logos, iconografia y otros activos asociados a Roland Spaarwater Ltda. debe realizarse unicamente con autorizacion expresa del titular correspondiente.

La publicacion de este paquete no concede por si misma derechos sobre marcas, identidad visual, contenidos ni datos comerciales de la empresa.

Instalacion

npm install @rsltda/components

Uso rapido

Importar el componente

import "@rsltda/components/rs-components.es.js";

Usarlo en HTML

<rs-map>

<rs-map
  marca="ktm"
  tipo="1"
  height="600px"
  google-maps-key="TU_KEY"
  cache-days="30"
></rs-map>

<rs-whatsapp>

<rs-whatsapp
  marca="ktm"
  position="top-right"
  --rs-whatsapp-z-index="10000"
  --rs-whatsapp-font-family="Inter, sans-serif"
  --rs-whatsapp-offset-x="32px"
  --rs-whatsapp-offset-y="32px"
  time-zone="America/Santiago"
>
  <rs-whatsapp-schedule dias="lun-vie" desde="09:00" hasta="18:00"></rs-whatsapp-schedule>
  <rs-whatsapp-schedule dias="sab" desde="10:00" hasta="14:00"></rs-whatsapp-schedule>

  <rs-whatsapp-option
    label="compra de motos"
    telefono="569XXXXXXXX"
    mensaje="Hola, quiero informacion sobre compra de motos"
    icon="motorcycle"
  ></rs-whatsapp-option>
  <rs-whatsapp-option
    label="repuestos"
    telefono="569XXXXXXXX"
    mensaje="Hola, quiero informacion sobre repuestos"
    icon="motorcycle"
  ></rs-whatsapp-option>
</rs-whatsapp>

Via jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/@rsltda/components/rs-components.es.js"></script>

Configuracion de <rs-map>

| Atributo | Descripcion | | --- | --- | | marca | Marca usada para filtrar puntos y resolver color/icono. | | tipo | 0/1 o sucursal/distribuidor. | | height | Altura CSS del componente. Por defecto 520px. | | google-maps-key | API key de Google Maps. | | points-api-url | Endpoint base de puntos. El componente usa un valor por defecto interno cuando no se especifica uno. | | cache-days | Dias de vigencia del cache local. Por defecto 30. | | marker-icon-base | URL base opcional para iconos por marca. | | marker-icon-default | Icono de respaldo si no se quiere usar icono por marca. |

Configuracion de <rs-whatsapp>

| Atributo | Descripcion | | --- | --- | | label | Texto visible cuando se usa show-label. Por defecto WhatsApp. | | menu-label | Texto de la accion por defecto dentro del menu. Por defecto compra de motos. | | menu-message | Fragmento HTML opcional que reemplaza el encabezado del menu. | | aria-label | Etiqueta accesible del boton. Por defecto Contactar por WhatsApp. | | position | Posicion flotante: bottom-right, bottom-center, bottom-left, center-right, center, center-left, top-right, top-center o top-left. Por defecto bottom-right. | | show-label | Muestra el texto junto al icono. | | target | Target del enlace. Por defecto _blank. | | marca | Variante visual para elementos internos como el icono de moto: ktm, hqv, gasgas, voge o rs. El boton principal mantiene el verde de WhatsApp. | | icon | Icono por defecto para opciones generadas. Usa una URL, un nombre disponible (gear o motorcycle) o none para ocultarlo. | | horario | Horario de atencion opcional en formato compacto. Ejemplo: lun-vie 09:00-18:00; sab 10:00-14:00. | | fuera-horario | Fuerza el estado fuera de horario manualmente. | | mensaje-fuera-horario | Mensaje mostrado cuando el componente esta fuera de horario. Si hay horario configurado, el componente agrega el resumen del horario. | | time-zone | Zona horaria IANA opcional para evaluar horario, por ejemplo America/Santiago. Si no se define, usa America/Santiago. |

Variables CSS configurables

Estas variables se pueden pasar como atributos que empiecen por --, por ejemplo --rs-whatsapp-z-index="10000".

| Variable CSS | Valor por defecto | Descripcion | | --- | --- | --- | | --rs-whatsapp-right | 24px | Separacion horizontal desde la derecha en bottom-right y top-right. | | --rs-whatsapp-left | 24px | Separacion horizontal desde la izquierda en bottom-left, top-left, center-left y bottom-center/top-center cuando aplica. | | --rs-whatsapp-top | 24px | Separacion vertical desde arriba en top-right, top-left, top-center y variantes centradas verticalmente. | | --rs-whatsapp-bottom | 24px | Separacion vertical desde abajo en bottom-right, bottom-left, bottom-center y variantes centradas verticalmente. | | --rs-whatsapp-mobile-right | 16px | Separacion horizontal desde la derecha en mobile. | | --rs-whatsapp-mobile-left | 16px | Separacion horizontal desde la izquierda en mobile. | | --rs-whatsapp-mobile-top | 16px | Separacion vertical desde arriba en mobile. | | --rs-whatsapp-mobile-bottom | 16px | Separacion vertical desde abajo en mobile. | | --rs-whatsapp-offset-x | 0px | Ajuste fino horizontal adicional para desplazar la posicion. | | --rs-whatsapp-offset-y | 0px | Ajuste fino vertical adicional para desplazar la posicion. | | --rs-whatsapp-z-index | 9999 | Orden de apilado del componente. | | --rs-whatsapp-font-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | Familia tipografica del componente. | | --rs-whatsapp-size | 60px | Tamano del boton principal. | | --rs-whatsapp-bg | #25d366 | Color de fondo del boton principal. | | --rs-whatsapp-color | #ffffff | Color del icono y texto del boton principal. | | --rs-whatsapp-shadow | 0 10px 24px rgb(0 0 0 / 22%) | Sombra del boton principal. | | --rs-whatsapp-shadow-hover | 0 14px 28px rgb(0 0 0 / 26%) | Sombra del boton principal en hover. | | --rs-whatsapp-menu-width | 280px | Ancho maximo del menu. | | --rs-whatsapp-menu-border | #e5e7eb | Borde del menu. | | --rs-whatsapp-menu-radius | 8px | Radio de borde del menu. | | --rs-whatsapp-menu-bg | #ffffff | Fondo del menu. | | --rs-whatsapp-menu-color | #111827 | Color de texto del menu. | | --rs-whatsapp-menu-shadow | 0 18px 38px rgb(0 0 0 / 18%) | Sombra del menu. | | --rs-whatsapp-menu-muted | #4b5563 | Color del texto secundario del encabezado del menu. | | --rs-whatsapp-menu-brand | #111827 | Color del texto principal del encabezado del menu. | | --rs-whatsapp-menu-hover-bg | #f3f4f6 | Fondo de hover para las opciones del menu. | | --rs-whatsapp-menu-icon-color | var(--rs-whatsapp-brand-color) | Color de los iconos del menu. | | --rs-whatsapp-closed-bg | #f3f4f6 | Fondo del mensaje fuera de horario. | | --rs-whatsapp-closed-color | #374151 | Color del mensaje fuera de horario. | | --rs-whatsapp-brand-color | #25d366 | Color de marca usado por iconos internos y algunos acentos. Puede ser ajustado por marca o sobrescrito manualmente. |

Si <rs-whatsapp> contiene uno o mas <rs-whatsapp-option>, el menu se genera desde esas opciones. Las opciones sin telefono no se muestran. Si no contiene opciones, el menu no genera enlaces.

Para evitar texto largo en atributos, usa <rs-whatsapp-schedule> para los bloques de horario. El mensaje fuera de horario tiene un texto por defecto y agrega el horario configurado; si necesitas reemplazarlo por completo, usa slot="fuera-horario".

Configuracion de <rs-whatsapp-option>

| Atributo | Descripcion | | --- | --- | | label | Texto visible de la opcion. | | sublabel | Texto alternativo secundario que se muestra debajo del label. | | telefono | Numero de destino con codigo de pais. | | mensaje | Mensaje inicial opcional para esta opcion. | | target | Target del enlace. Si no se define, hereda el target de <rs-whatsapp>. | | icon | Icono de esta opcion. Usa una URL, un nombre disponible (gear o motorcycle) o none para ocultarlo. |

Configuracion de <rs-whatsapp-schedule>

| Atributo | Descripcion | | --- | --- | | dias | Dias del bloque, por ejemplo lun-vie, sab o todos. | | desde | Hora de inicio en formato HH:mm. | | hasta | Hora de termino en formato HH:mm. |

Defaults importantes

• points-api-url: valor interno por defecto
• cache-days: 30

Si no existe un pin local para la marca/tipo ni se define marker-icon-default, Google Maps usa su marcador por defecto.

Cache y primera carga

rs-map primero intenta leer puntos desde IndexedDB y usa localStorage como respaldo.

Si aun no existe cache local, el componente puede mostrar una primera carga optimizada mientras actualiza los datos y persiste el resultado en cache para las siguientes visitas.

Tipos y tooling

El paquete incluye:

• dist/index.d.ts
• custom-elements.json

Eso ayuda con autocompletado en tooling compatible y tipado de los custom elements.