libreria-astro-lefebvre 0.1.93 → 0.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",

package/src/carbins/Grid_2026_Aldaia.ts

@@ -0,0 +1,57 @@
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'Grid_2026_Aldaia',
+  category: 'Contenido con listas',
+  name: 'Grid de cards con imagen, etiqueta, título y enlace "Más información" (4 columnas) 2026',
+  description: 'Bloque con título opcional (h2 centrado) y un grid de cards: 4 columnas en escritorio, 2 en tablet y 1 en móvil, que crece en filas según el número de ítems. Cada card muestra la imagen recortada a 154px de alto, una etiqueta en mayúsculas (fecha o keywords), el título y un enlace "Más información" con flecha; toda la card es clicable. Emite un ItemList en JSON-LD con los ítems',
+  framework: 'Astro',
+  priority: 1,
+  tags: ['grid', 'card', 'imagen', 'boletines', 'listado', 'enlace'],
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      mandatory: false,
+      label: 'Título del bloque',
+      help: 'Título (h2) centrado que aparece encima del grid. Si se deja vacío, no se muestra ningún título',
+      example_value: 'Descubre nuestros boletines'
+    },
+    {
+      name: 'etiquetaVisible',
+      type: 'select',
+      options: ['keywords', 'fecha'],
+      options_labels: ['Keywords', 'Fecha'],
+      mandatory: false,
+      label: 'Etiqueta visible en la card',
+      help: 'Qué se muestra como etiqueta en mayúsculas sobre el título de cada card: las keywords (p. ej. la materia) o la fecha. Default: keywords',
+      example_value: 'keywords'
+    },
+    {
+      name: 'linkText',
+      type: 'text',
+      mandatory: false,
+      label: 'Texto del enlace',
+      help: 'Texto del enlace con flecha que aparece al pie de cada card. Default: "Más información"',
+      example_value: 'Más información'
+    },
+    {
+      name: 'items',
+      type: 'list',
+      label: 'Listado de cards',
+      mandatory: false,
+      help: 'Cards del bloque. Se muestran en un grid de 4 columnas en escritorio (a partir de la quinta card se crea una nueva fila), 2 en tablet y 1 en móvil',
+      items: {
+        type: 'object',
+        fields: [
+          { name: 'title', type: 'text', label: 'Título', help: 'Título de la card (h3). Se muestra siempre', example_value: 'Apuntes & Consejos Impuestos' },
+          { name: 'keywords', type: 'text', label: 'Keywords', help: 'Palabras clave (p. ej. la materia). Se muestran como etiqueta en mayúsculas sobre el título si "Etiqueta visible" es Keywords, y se incluyen siempre en los datos estructurados (JSON-LD keywords)', example_value: 'Fiscal' },
+          { name: 'fecha', type: 'text', label: 'Fecha (etiqueta)', help: 'Fecha que aparece como etiqueta sobre el título cuando "Etiqueta visible" es Fecha. Si se deja vacía, NO se muestra', example_value: '10 de enero de 2026' },
+          { name: 'link', type: 'text', label: 'Url del enlace', help: 'URL de destino al hacer click en la card o en "Más información" (toda la card es clicable). Si se deja vacío, apunta a "#" (no navega)', example_value: '/fiscal-impuestos' },
+          { name: 'image', type: 'image', label: 'Imagen', help: 'Imagen de la card. Se recorta a 154px de alto mostrando la parte superior (object-fit cover, object-position top). Se renderiza siempre; si se deja vacía aparece una imagen rota', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
+          { name: 'altImage', type: 'text', label: 'Alt de la imagen', help: 'Texto alternativo de la imagen para accesibilidad', example_value: 'Portada del boletín Apuntes & Consejos Impuestos' }
+        ]
+      }
+    }
+  ]
+};

package/src/components/Astro/Grid_2026_Aldaia.astro

@@ -0,0 +1,87 @@
+---
+import { extractImageUrl, PAGE_ENTITY_ID } from '../../lib/functions.js';
+
+interface AldaiaItem {
+    title?: string;
+    fecha?: string;     // etiqueta de fecha para mostrar
+    keywords?: string;  // keywords (p. ej. la materia), para etiqueta visual y JSON-LD
+    image?: string;
+    altImage?: string;
+    link?: string;
+}
+
+const {
+    title = '',
+    etiquetaVisible = "keywords",
+    linkText = 'Más información',
+    items = [],
+}: { title?: string; etiquetaVisible?: "fecha" | "keywords"; linkText?: string; items?: AldaiaItem[] } = Astro.props;
+
+// isPartOf hacia el nodo de página (#webpage por defecto). Opt-out con pageId="".
+// itemListId opcional: si se pasa, el ItemList lleva ese @id (para ser mainEntity de la CollectionPage).
+const { pageId = PAGE_ENTITY_ID, itemListId = '' } = Astro.props;
+
+const escapeJson = (s = "") => String(s).replace(/<[^>]*>/g, '').replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/[\n\r\t]+/g, ' ');
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "ItemList",${itemListId ? `
+    "@id": "${itemListId}",` : ''}${pageId ? `
+    "isPartOf": { "@id": "${pageId}" },` : ''}${title ? `
+    "name": "${escapeJson(title)}",` : ''}
+    "numberOfItems": ${items.length},
+    "itemListElement": [${items.map((item: AldaiaItem, i: number) => `{
+        "@type": "ListItem",
+        "position": ${i + 1},
+        "name": "${escapeJson(item.title)}"${item.image ? `,
+        "image": "${escapeJson(extractImageUrl(item.image))}"` : ""}${item.link ? `,
+        "url": "${escapeJson(item.link)}"` : ""}${item.keywords ? `,
+        "keywords": "${escapeJson(item.keywords)}"` : ""}
+    }`).join(',')}]
+}
+</script>`;
+---
+
+<section class="w-full max-w-7xl mx-auto flex flex-col mb-4">
+    {title && title.trim() !== '' && (
+        <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[48px] my-8 md:mb-8 px-8" set:html={title}></h2>
+    )}
+    <ul class="list-none m-0 w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-8 lg:px-0 mt-4 md:mt-0">
+        {items.map((item: AldaiaItem) => {
+            const tag = etiquetaVisible === "fecha" ? item.fecha : item.keywords;
+            return (
+            <li class="w-full flex flex-col">
+                <article class="relative w-full h-full flex flex-col rounded-lg border border-gray-200 shadow-article hover:bg-gradient-to-r from-[#001978] via-[#2134F1] to-[#F81BBD] transition-all duration-300 p-px">
+                    <div class="w-full h-full flex flex-col bg-white mt-px rounded-tl-[7px] rounded-tr-[7px] rounded-b-lg overflow-hidden">
+                        <img class="w-full h-[154px] object-cover object-top" src={extractImageUrl(item.image)} alt={item.altImage ?? ''} width="400" height="154" loading="lazy" />
+                        <div class="p-6 flex flex-col flex-grow">
+                            {tag && <p class="font-inter text-[#001978] text-sm font-semibold text-left tracking-[2px] uppercase mb-1">{tag}</p>}
+                            <h3 class="font-poppins text-xl font-semibold text-[#262626] mb-6">{item.title}</h3>
+                            <a href={item.link || '#'} class="mt-auto inline-flex items-center gap-3 font-inter text-base font-semibold text-[#363942] no-underline after:absolute after:inset-0 after:content-['']">
+                                {linkText}
+                                <svg class="chevron shrink-0" xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15" fill="none" aria-hidden="true">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.204584 14.8375C-0.0508271 14.6053 -0.06965 14.21 0.162542 13.9546L6.03034 7.5L0.162542 1.04542C-0.0696498 0.790005 -0.0508269 0.394725 0.204584 0.162533C0.459995 -0.0696602 0.855275 -0.0508366 1.08747 0.204574L7.33747 7.07958C7.55418 7.31796 7.55418 7.68203 7.33747 7.92042L1.08747 14.7954C0.855275 15.0508 0.459995 15.0696 0.204584 14.8375Z" fill="#363942"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </article>
+            </li>
+            );
+        })}
+    </ul>
+</section>
+
+<Fragment set:html={structuredData} />
+
+<style>
+    .shadow-article {
+        box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+    }
+    .chevron {
+        width: 15px;
+        height: 7.5px;
+        transform: rotate(-90deg);
+    }
+</style>

package/src/generated/componentRegistry.ts

@@ -48,6 +48,7 @@ import * as Formulario_2026_Carabanchel from '../carbins/Formulario_2026_Caraban
 import * as Formulario_2026_Wichita from '../carbins/Formulario_2026_Wichita.ts';
 import * as Galeria_2026_Segorbe from '../carbins/Galeria_2026_Segorbe.ts';
 import * as GeometricShapeCard from '../carbins/GeometricShapeCard.ts';
+import * as Grid_2026_Aldaia from '../carbins/Grid_2026_Aldaia.ts';
 import * as HeaderCorporativo from '../carbins/HeaderCorporativo.ts';
 import * as Hero_2025_Benidorm from '../carbins/Hero_2025_Benidorm.ts';
 import * as Hero_2026_Benidorm from '../carbins/Hero_2026_Benidorm.ts';
@@ -143,6 +144,7 @@ export const components = [
   {component: Formulario_2026_Wichita},
   {component: Galeria_2026_Segorbe},
   {component: GeometricShapeCard},
+  {component: Grid_2026_Aldaia},
   {component: HeaderCorporativo},
   {component: Hero_2025_Benidorm},
   {component: Hero_2026_Benidorm},

package/src/index.ts

@@ -55,6 +55,7 @@ import Formulario_2026_Wichita from './components/Astro/Formulario_2026_Wichita.
 import Galeria_2026_Segorbe from './components/Astro/Galeria_2026_Segorbe.astro';
 import GeometricShape from './components/Astro/GeometricShape.astro';
 import GeometricShapeCard from './components/Astro/GeometricShapeCard.astro';
+import Grid_2026_Aldaia from './components/Astro/Grid_2026_Aldaia.astro';
 import HeaderCorporativo from './components/Astro/HeaderCorporativo.astro';
 import Hero_2025_Benidorm from './components/Astro/Hero_2025_Benidorm.astro';
 import Hero_2026_Benidorm from './components/Astro/Hero_2026_Benidorm.astro';
@@ -103,7 +104,7 @@ import ReactButton from './components/React/ReactButton.jsx';
 // Exporta todos los componentes uno a uno para que puedan ser usados directamente.
 
 
-export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Dakota, Cabecera_2026_Madrid, Calculadora_2026_Lisboa, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estepona, Contenido_2026_Estocolmo, Contenido_2026_Huesca, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, Galeria_2026_Segorbe, GeometricShape, GeometricShapeCard, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, Hero_2026_Lliria, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Mapa_2026_Girona, Modal_2025_Sagunto, Modal_2026_Almeria, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Separador_2026_Teulada, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
+export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Dakota, Cabecera_2026_Madrid, Calculadora_2026_Lisboa, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estepona, Contenido_2026_Estocolmo, Contenido_2026_Huesca, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, Galeria_2026_Segorbe, GeometricShape, GeometricShapeCard, Grid_2026_Aldaia, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, Hero_2026_Lliria, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Mapa_2026_Girona, Modal_2025_Sagunto, Modal_2026_Almeria, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Separador_2026_Teulada, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
 
 
 // Exporta la función listComponents para que sea usado en el Pagebuilder en Vue.
@@ -170,6 +171,7 @@ export const components = {
   Galeria_2026_Segorbe: Galeria_2026_Segorbe,
   GeometricShape: GeometricShape,
   GeometricShapeCard: GeometricShapeCard,
+  Grid_2026_Aldaia: Grid_2026_Aldaia,
   HeaderCorporativo: HeaderCorporativo,
   Hero_2025_Benidorm: Hero_2025_Benidorm,
   Hero_2026_Benidorm: Hero_2026_Benidorm,