@rsltda/components 1.0.16 → 1.0.17

package/README.md

@@ -1,6 +1,6 @@
 # @rsltda/components
 
-Web Components construidos con Vite + TypeScript. El paquete expone principalmente `<rs-map>`, listo para integrarse en cualquier sitio mediante Web 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
 
@@ -24,6 +24,8 @@ import "@rsltda/components/rs-components.es.js";
 
 ### Usarlo en HTML
 
+#### `<rs-map>`
+
 ```html
 <rs-map
   marca="ktm"
@@ -34,6 +36,32 @@ import "@rsltda/components/rs-components.es.js";
 ></rs-map>
 ```
 
+#### `<rs-whatsapp>`
+
+```html
+<rs-whatsapp
+  marca="ktm"
+  position="bottom-right"
+  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
 
 ```html
@@ -53,6 +81,47 @@ import "@rsltda/components/rs-components.es.js";
 | `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 |
+| --- | --- |
+| `telefono` | Numero de destino con codigo de pais. Se permiten espacios, simbolos y guiones. |
+| `mensaje` | Mensaje inicial opcional para el enlace de WhatsApp. |
+| `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`. |
+| `aria-label` | Etiqueta accesible del boton. Por defecto `Contactar por WhatsApp`. |
+| `position` | Posicion flotante: `bottom-right`, `bottom-left`, `top-right` o `top-left`. |
+| `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 el nombre de un SVG en `src/ws` sin extension, por ejemplo `motorcycle`. Usa `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 la zona horaria del navegador. |
+
+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, usa `telefono`, `mensaje` y `menu-label` del componente padre como opcion unica.
+
+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. |
+| `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 el nombre de un SVG en `src/ws` sin extension, por ejemplo `motorcycle`. Usa `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
@@ -73,4 +142,4 @@ El paquete incluye:
 - `dist/index.d.ts`
 - `custom-elements.json`
 
-Eso ayuda con autocompletado en tooling compatible y tipado de `<rs-map>`.
+Eso ayuda con autocompletado en tooling compatible y tipado de los custom elements.

package/custom-elements.json

@@ -49,6 +49,127 @@
           ]
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/rs-whatsapp.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "RsWhatsapp",
+          "tagName": "rs-whatsapp",
+          "customElement": true,
+          "description": "Web component para mostrar un boton flotante de WhatsApp con menu configurable.",
+          "attributes": [
+            {
+              "name": "telefono",
+              "description": "Numero de destino con codigo de pais. El componente elimina espacios, simbolos y guiones."
+            },
+            {
+              "name": "mensaje",
+              "description": "Mensaje inicial opcional que se codifica en el enlace de WhatsApp."
+            },
+            {
+              "name": "label",
+              "description": "Texto visible cuando se usa el atributo show-label."
+            },
+            {
+              "name": "menu-label",
+              "description": "Texto de la accion por defecto dentro del menu. Por defecto compra de motos."
+            },
+            {
+              "name": "aria-label",
+              "description": "Etiqueta accesible del boton. Por defecto Contactar por WhatsApp."
+            },
+            {
+              "name": "position",
+              "description": "Posicion flotante: bottom-right, bottom-left, top-right o top-left. Por defecto bottom-right."
+            },
+            {
+              "name": "show-label",
+              "description": "Muestra el texto del atributo label junto al icono."
+            },
+            {
+              "name": "target",
+              "description": "Target del enlace. Por defecto _blank."
+            },
+            {
+              "name": "marca",
+              "description": "Variante visual para elementos internos como el icono de moto. Colores: ktm #ff6600, hqv #002550, gasgas #cb0d25, voge #000000, rs #000000. El boton principal mantiene el verde de WhatsApp."
+            },
+            {
+              "name": "icon",
+              "description": "Icono por defecto para opciones generadas. Usa el nombre de un SVG en src/ws sin extension, por ejemplo motorcycle. Usa none para ocultarlo."
+            },
+            {
+              "name": "horario",
+              "description": "Horario de atencion opcional. Formato ejemplo: lun-vie 09:00-18:00; sab 10:00-14:00. Si la hora actual queda fuera, se ocultan las opciones."
+            },
+            {
+              "name": "fuera-horario",
+              "description": "Fuerza el estado fuera de horario y muestra solo el mensaje."
+            },
+            {
+              "name": "mensaje-fuera-horario",
+              "description": "Mensaje mostrado cuando el componente esta fuera de horario. Si hay horario configurado, el componente agrega el resumen del horario."
+            },
+            {
+              "name": "time-zone",
+              "description": "Zona horaria IANA opcional para evaluar horario, por ejemplo America/Santiago. Si no se define, usa la zona horaria del navegador."
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "name": "RsWhatsappOption",
+          "tagName": "rs-whatsapp-option",
+          "customElement": true,
+          "description": "Opcion de destino para el menu de rs-whatsapp.",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Texto visible de la opcion."
+            },
+            {
+              "name": "telefono",
+              "description": "Numero de destino con codigo de pais."
+            },
+            {
+              "name": "mensaje",
+              "description": "Mensaje inicial opcional para esta opcion."
+            },
+            {
+              "name": "target",
+              "description": "Target del enlace de esta opcion. Si no se define, hereda el target de rs-whatsapp."
+            },
+            {
+              "name": "icon",
+              "description": "Icono de esta opcion. Usa el nombre de un SVG en src/ws sin extension, por ejemplo motorcycle. Usa none para ocultarlo."
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "name": "RsWhatsappSchedule",
+          "tagName": "rs-whatsapp-schedule",
+          "customElement": true,
+          "description": "Bloque legible de horario para rs-whatsapp.",
+          "attributes": [
+            {
+              "name": "dias",
+              "description": "Dias del bloque, por ejemplo lun-vie, sab o todos."
+            },
+            {
+              "name": "desde",
+              "description": "Hora de inicio en formato HH:mm."
+            },
+            {
+              "name": "hasta",
+              "description": "Hora de termino en formato HH:mm."
+            }
+          ]
+        }
+      ]
     }
   ]
 }

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

@@ -0,0 +1,49 @@
+export declare class RsWhatsapp extends HTMLElement {
+    static tag: string;
+    private root;
+    private buttonEl;
+    private menuEl;
+    private generatedOptionsEl;
+    private customMenuSlotEl;
+    private closedMessageEl;
+    private closedMessageTextEl;
+    private labelEl;
+    private childrenObserver?;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private syncAttributesToState;
+    private buildWhatsappUrl;
+    private sanitizePhone;
+    private syncBrandVariant;
+    private normalizeBrandKey;
+    private renderMenuOptions;
+    private getWhatsappOptions;
+    private createMenuLink;
+    private createOptionIcon;
+    private getClosedMessage;
+    private isOutsideBusinessHours;
+    private getScheduleSegments;
+    private getScheduleSummary;
+    private isWithinBusinessHours;
+    private getCurrentTimeParts;
+    private isScheduleSegmentActive;
+    private parseScheduleDays;
+    private parseScheduleDay;
+    private parseScheduleTime;
+    private setMenuOpen;
+    private handleButtonClick;
+    private handleMenuClick;
+    private handleCustomMenuSlotChange;
+    private handleChildrenMutation;
+    private handleDocumentClick;
+    private handleDocumentKeydown;
+}
+export declare class RsWhatsappOption extends HTMLElement {
+    static tag: string;
+}
+export declare class RsWhatsappSchedule extends HTMLElement {
+    static tag: string;
+}

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 import { safeDefine } from './utils/define';
 import { RsMap } from './components/rs-map';
-export { RsMap, safeDefine };
+import { RsWhatsapp, RsWhatsappOption, RsWhatsappSchedule } from './components/rs-whatsapp';
+export { RsMap, RsWhatsapp, RsWhatsappOption, RsWhatsappSchedule, safeDefine };
 declare global {
     interface HTMLElementTagNameMap {
         'rs-map': RsMap;
+        'rs-whatsapp': RsWhatsapp;
+        'rs-whatsapp-option': RsWhatsappOption;
+        'rs-whatsapp-schedule': RsWhatsappSchedule;
     }
 }