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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Modal_2025_Sagunto',
  category: 'Formulario',
  name: 'Botón CTA que abre modal con backdrop blur y formulario LF2 inyectado 2025',
  description: 'Botón CTA con colores configurables (texto, fondo, borde) que NO se invierten en hover, a diferencia de CTA_2025_Formentera. Al pulsarse abre un 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. Requiere LeadformApiManagerClass y apiManager disponibles globalmente en la página',
  framework: 'Astro',
  priority: 1,
  tags: ['boton', 'cta', 'modal', 'formulario', 'lf2', 'popup', 'personalizable'],
  fields: [
    {
      name: 'buttonText',
      type: 'text',
      help: 'Texto visible del botón CTA que abre el modal. Se ajusta al ancho del contenido (w-fit). No admite HTML',
      label: 'Label del botón',
      mandatory: false,
      example_value: 'Solicita una demo'
    },
    {
      name: 'frontColor',
      type: 'text',
      help: 'Color del texto del botón. Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#2134F1"). NO se invierte en hover (a diferencia de CTA_2025_Formentera)',
      label: 'Color del texto (frontal)',
      mandatory: false,
      example_value: '#ffffff'
    },
    {
      name: 'backColor',
      type: 'text',
      help: 'Color de fondo del botón. Acepta nombre CSS o código hex',
      label: 'Color de fondo',
      mandatory: false,
      example_value: '#2134F1'
    },
    {
      name: 'borderColor',
      type: 'text',
      help: 'Color del borde del botón (1px sólido). Acepta nombre CSS o código hex',
      label: 'Color del borde',
      mandatory: false,
      example_value: '#2134F1'
    },
    {
      name: 'imageModal',
      type: 'image',
      help: 'Imagen que se muestra en 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 (h2). Se renderiza siempre; si se deja vacío aparece el h2 vacío. No admite HTML',
      label: 'Título del modal',
      mandatory: false,
      example_value: 'Descubre GenIA-L'
    },
    {
      name: 'descriptionModal',
      type: 'text',
      help: 'Descripción del modal que aparece debajo del título, antes del formulario. Admite HTML',
      label: 'Descripción del modal',
      mandatory: false,
      example_value: 'Déjanos tus datos y uno de nuestros comerciales se pondrá en contacto contigo para programar una demo personalizada'
    },
    {
      name: 'lf2FormTitle',
      type: 'text',
      help: 'Nombre EXACTO del formulario tal como está dado de alta en LF2 (plataforma de leadforms de Lefebvre). Se pasa a apiManager.pintarFormularioAutogestionado() para cargar el formulario correcto. Si es erróneo, el formulario no se renderizará. Requiere que LeadformApiManagerClass y apiManager estén disponibles globalmente en la página',
      label: 'Nombre del formulario en LF2',
      mandatory: false,
      example_value: '27925 Formulario Solicitar Demo GenIA-L'
    },
    {
      name: 'idebook',
      type: 'text',
      help: 'ID del ebook, whitepaper o documento registrado en BI con formato EXXXXXXX para pasar como parámetro oculto al formulario de LF2. No es obligatorio, solo debe usarse para formularios que acabaran con una descarga',
      label: 'ID de documento en BI (opcional)',
      mandatory: false,
      example_value: ''
    },
    {
      name: 'nomprod',
      type: 'text',
      help: 'Nombre del producto (ebook, whitepaper o documento registrado). No es obligatorio, pero se recomienda usarlo para identificar el producto en el formulario',
      label: 'Nombre del producto (opcional)',
      mandatory: false,
      example_value: ''
    },
  ]
};