libreria-astro-lefebvre/src/carbins/Modal_2026_Almeria.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Modal_2026_Almeria',
  category: 'Formulario',
  name: 'Modal con formulario LF2 (businessAction) disparable por botón propio o enlace externo 2026',
  description: 'Mezcla de Modal_2025_Sagunto y Formulario_2025_Seul: modal con backdrop blur que contiene imagen lateral opcional, título h2, descripción HTML y formulario LF2 inyectado dinámicamente vía apiManager.pintarFormularioAutogestionado. A diferencia de Sagunto, soporta businessAction (accioncomercial) además de idebook/codprod/nomprod. Puede abrirse con su propio botón CTA (si se indica buttonText) y/o desde un enlace externo ya presente en la página (p. ej. el botón de la cabecera) indicando su hash en triggerHash. El formulario se pinta de forma diferida la primera vez que se abre el modal. Requiere LeadformApiManagerClass y apiManager disponibles globalmente en la página',
  framework: 'Astro',
  priority: 1,
  tags: ['boton', 'cta', 'modal', 'formulario', 'lf2', 'popup', 'businessAction', 'trigger-externo'],
  fields: [
    {
      name: 'buttonText',
      type: 'text',
      help: 'Texto visible del botón CTA propio que abre el modal. Si se deja vacío, NO se renderiza ningún botón y el modal solo podrá abrirse desde un disparador externo (triggerHash). No admite HTML',
      label: 'Label del botón (opcional)',
      mandatory: false,
      example_value: 'Pruébalo ya'
    },
    {
      name: 'frontColor',
      type: 'text',
      help: 'Color del texto del botón propio. Acepta nombre CSS (ej. "white") o hex (ej. "#2134F1"). No se invierte en hover. Solo aplica si hay buttonText',
      label: 'Color del texto (frontal)',
      mandatory: false,
      example_value: '#ffffff'
    },
    {
      name: 'backColor',
      type: 'text',
      help: 'Color de fondo del botón propio. Acepta nombre CSS o hex. Solo aplica si hay buttonText',
      label: 'Color de fondo',
      mandatory: false,
      example_value: '#2134F1'
    },
    {
      name: 'borderColor',
      type: 'text',
      help: 'Color del borde del botón propio (1px sólido). Acepta nombre CSS o hex. Solo aplica si hay buttonText',
      label: 'Color del borde',
      mandatory: false,
      example_value: '#2134F1'
    },
    {
      name: 'triggerHash',
      type: 'text',
      help: 'Disparador externo opcional: hash al que apunta un enlace <a href> ya existente en la página (p. ej. el botón de la cabecera). Se enlazan los clicks de esos enlaces para abrir el modal e impedir la navegación. Debe incluir la almohadilla. Ej.: "#formulario-genial"',
      label: 'Hash del disparador externo (opcional)',
      mandatory: false,
      example_value: ''
    },
    {
      name: 'imageModal',
      type: 'image',
      help: 'Imagen de la columna izquierda del modal. Si se deja vacía, el modal no incluye columna de imagen y el texto ocupa el ancho completo',
      label: 'Imagen del modal',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'
    },
    {
      name: 'altModal',
      type: 'text',
      help: 'Texto alternativo de la imagen del modal para accesibilidad. Solo aplica si el modal tiene imagen',
      label: 'Alt de la imagen del modal',
      mandatory: false,
      example_value: 'Captura del dashboard de GenIA-L con el asistente IA'
    },
    {
      name: 'titleModal',
      type: 'text',
      help: 'Título del modal (p con estilos h2). Si se deja vacío no se renderiza. No admite HTML',
      label: 'Título del modal',
      mandatory: false,
      example_value: 'Aprende a utilizar GenIA-L'
    },
    {
      name: 'descriptionModal',
      type: 'text',
      help: 'Descripción del modal que aparece debajo del título, antes del formulario. Si se deja vacía no se renderiza. Admite HTML',
      label: 'Descripción del modal',
      mandatory: false,
      example_value: 'Solicita tu demo personalizada y comprueba por ti mismo la certeza jurídica de GenIA-L.'
    },
    {
      name: 'lf2FormTitle',
      type: 'text',
      help: 'Nombre EXACTO del formulario tal como está dado de alta en LF2. Se pasa a apiManager.pintarFormularioAutogestionado() para cargar el formulario correcto. Si es erróneo, el formulario no se renderizará. Requiere LeadformApiManagerClass y apiManager globales',
      label: 'Nombre del formulario en LF2',
      mandatory: false,
      example_value: '27925 Formulario Lead Web GenIA-L'
    },
    {
      name: 'businessAction',
      type: 'text',
      help: 'Identificador de acción comercial de LF2 (accioncomercial) que se asociará al lead. Si se deja vacío, no se envía acción comercial (el formulario funciona pero sin tracking de acción específica)',
      label: 'businessAction del formulario en LF2',
      mandatory: false,
      example_value: '27925'
    },
    {
      name: 'idebook',
      type: 'text',
      help: 'ID del ebook, whitepaper o documento registrado en BI (formato EXXXXXXX) que se pasa como parámetro oculto (idebook/codprod) al formulario LF2. Solo para formularios que terminan en descarga',
      label: 'ID de documento en BI (opcional)',
      mandatory: false,
      example_value: ''
    },
    {
      name: 'nomprod',
      type: 'text',
      help: 'Nombre del producto (ebook, whitepaper o documento). Se envía como parámetro oculto junto a idebook. Solo aplica si se indica idebook',
      label: 'Nombre del producto (opcional)',
      mandatory: false,
      example_value: ''
    },
  ]
};