@rsltda/components

@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>

Versiones del bundle

El paquete publica dos builds equivalentes en dist/, ambos minificados:

Archivo	Formato	Cuando usarlo
dist/rs-components.es.js	Modulo ES (ESM)	Uso recomendado. Se importa con <script type="module"> o desde un bundler (import ... from "@rsltda/components/rs-components.es.js").
dist/rs-components.iife.js	IIFE (script clasico)	Para <script> sin type="module", por ejemplo sitios sin soporte de modulos o CMS que no permiten type="module". Expone la variable global RSComponents.

Ejemplo de uso del build IIFE:

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

Los custom elements (<rs-map>, <rs-whatsapp>, etc.) se registran automaticamente al cargar cualquiera de los dos builds; no hace falta usar la variable RSComponents salvo que necesites acceder a las clases exportadas (RSComponents.RsMap, etc.).

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.