@rsltda/components 1.0.22 → 1.0.25

package/README.md

@@ -42,10 +42,10 @@ import "@rsltda/components/rs-components.es.js";
 <rs-whatsapp
   marca="ktm"
   position="top-right"
-  offset-x="32"
-  offset-y="32"
   --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>
@@ -89,14 +89,11 @@ import "@rsltda/components/rs-components.es.js";
 
 | 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`. |
+| `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`. |
-| `offset-x` | Ajuste fino horizontal. Acepta una longitud CSS o un numero interpretado como `px`. En posiciones de borde afina la distancia al lado; en posiciones centradas desplaza respecto del centro. |
-| `offset-y` | Ajuste fino vertical. Acepta una longitud CSS o un numero interpretado como `px`. En posiciones de borde afina la distancia al borde; en posiciones centradas desplaza respecto del centro. |
 | `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. |
@@ -143,7 +140,7 @@ Estas variables se pueden pasar como atributos que empiecen por `--`, por ejempl
 | `--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.
+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"`.
 
@@ -152,6 +149,7 @@ Para evitar texto largo en atributos, usa `<rs-whatsapp-schedule>` para los bloq
 | 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>`. |

package/custom-elements.json

@@ -61,14 +61,6 @@
           "customElement": true,
           "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",
-              "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."
@@ -77,6 +69,10 @@
               "name": "menu-label",
               "description": "Texto de la accion por defecto dentro del menu. Por defecto compra de motos."
             },
+            {
+              "name": "menu-message",
+              "description": "Fragmento HTML opcional que reemplaza el encabezado del menu."
+            },
             {
               "name": "aria-label",
               "description": "Etiqueta accesible del boton. Por defecto Contactar por WhatsApp."
@@ -85,14 +81,6 @@
               "name": "position",
               "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": "offset-x",
-              "description": "Ajuste fino horizontal. Acepta una longitud CSS o un numero interpretado como px. En posiciones de borde afina la distancia al lado; en posiciones centradas desplaza respecto del centro."
-            },
-            {
-              "name": "offset-y",
-              "description": "Ajuste fino vertical. Acepta una longitud CSS o un numero interpretado como px. En posiciones de borde afina la distancia al borde; en posiciones centradas desplaza respecto del centro."
-            },
             {
               "name": "show-label",
               "description": "Muestra el texto del atributo label junto al icono."
@@ -138,6 +126,10 @@
               "name": "label",
               "description": "Texto visible de la opcion."
             },
+            {
+              "name": "sublabel",
+              "description": "Texto alternativo secundario que se muestra debajo del label."
+            },
             {
               "name": "telefono",
               "description": "Numero de destino con codigo de pais."

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

@@ -8,10 +8,13 @@ export declare class RsWhatsapp extends HTMLElement {
     private closedMessageEl;
     private closedMessageTextEl;
     private labelEl;
+    private menuHeadingEl;
     private hostAttributeObserver?;
     private childrenObserver?;
     private appliedCssVariableNames;
     static get observedAttributes(): string[];
+    get menuMessage(): string;
+    set menuMessage(value: string);
     constructor();
     connectedCallback(): void;
     private cacheShadowElements;
@@ -21,10 +24,11 @@ export declare class RsWhatsapp extends HTMLElement {
     private buildWhatsappUrl;
     private sanitizePhone;
     private syncCssVariablesFromAttributes;
-    private syncPositionOffsets;
-    private normalizeCssLength;
     private syncBrandVariant;
     private normalizeBrandKey;
+    private getMenuMessage;
+    private renderMenuHeading;
+    private getBrandLabel;
     private renderMenuOptions;
     private getWhatsappOptions;
     private createMenuLink;
@@ -50,6 +54,8 @@ export declare class RsWhatsapp extends HTMLElement {
 }
 export declare class RsWhatsappOption extends HTMLElement {
     static tag: string;
+    get sublabel(): string;
+    set sublabel(value: string);
 }
 export declare class RsWhatsappSchedule extends HTMLElement {
     static tag: string;