@rsltda/components 1.0.21 → 1.0.23

package/README.md

@@ -41,7 +41,11 @@ import "@rsltda/components/rs-components.es.js";
 ```html
 <rs-whatsapp
   marca="ktm"
-  position="bottom-right"
+  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>
@@ -90,7 +94,7 @@ import "@rsltda/components/rs-components.es.js";
 | `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`. |
+| `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. |
@@ -98,7 +102,44 @@ import "@rsltda/components/rs-components.es.js";
 | `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. |
+| `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, usa `telefono`, `mensaje` y `menu-label` del componente padre como opcion unica.
 

package/custom-elements.json

@@ -59,7 +59,7 @@
           "name": "RsWhatsapp",
           "tagName": "rs-whatsapp",
           "customElement": true,
-          "description": "Web component para mostrar un boton flotante de WhatsApp con menu configurable.",
+          "description": "Web component para mostrar un boton flotante de WhatsApp con menu configurable. Ademas, cualquier atributo que empiece por -- se copia al :host como variable CSS.",
           "attributes": [
             {
               "name": "telefono",
@@ -83,7 +83,7 @@
             },
             {
               "name": "position",
-              "description": "Posicion flotante: bottom-right, bottom-left, top-right o top-left. Por defecto bottom-right."
+              "description": "Posicion flotante: bottom-right, bottom-center, bottom-left, center-right, center, center-left, top-right, top-center o top-left. Por defecto bottom-right."
             },
             {
               "name": "show-label",
@@ -115,7 +115,7 @@
             },
             {
               "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."
+              "description": "Zona horaria IANA opcional para evaluar horario, por ejemplo America/Santiago. Si no se define, usa America/Santiago."
             }
           ]
         },

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

@@ -8,7 +8,9 @@ export declare class RsWhatsapp extends HTMLElement {
     private closedMessageEl;
     private closedMessageTextEl;
     private labelEl;
+    private hostAttributeObserver?;
     private childrenObserver?;
+    private appliedCssVariableNames;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -18,6 +20,7 @@ export declare class RsWhatsapp extends HTMLElement {
     private syncAttributesToState;
     private buildWhatsappUrl;
     private sanitizePhone;
+    private syncCssVariablesFromAttributes;
     private syncBrandVariant;
     private normalizeBrandKey;
     private renderMenuOptions;
@@ -38,6 +41,7 @@ export declare class RsWhatsapp extends HTMLElement {
     private handleButtonClick;
     private handleMenuClick;
     private handleCustomMenuSlotChange;
+    private handleHostAttributesMutation;
     private handleChildrenMutation;
     private handleDocumentClick;
     private handleDocumentKeydown;