libreria-astro-lefebvre 0.1.74 → 0.1.76

package/package.json

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

package/src/carbins/Contenido_2025_Granada.ts

@@ -19,7 +19,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'description',
-      type: 'text',
+      type: 'textArea',
       help: 'Descripción que aparece debajo del título. Admite HTML. Alineada a la izquierda',
       label: 'Texto de la descripción',
       mandatory: false,

package/src/carbins/Contenido_2026_Estepona.ts

@@ -0,0 +1,31 @@
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'Contenido_2026_Estepona',
+  category: 'Contenido con listas',
+  name: 'Sección de tabs interactivas con contenido y miniatura lateral, nombre de pestaña opcional 2026',
+  description: 'Sección con pestañas horizontales en la parte superior que, al hacerse click, muestran un panel con título grande, listado de ítems (icono + texto) a la izquierda e imagen a la derecha. Incluye script inline que gestiona la conmutación entre pestañas y resalta la activa. La primera pestaña es la que se muestra al cargar la página. El nombre de la pestaña es opcional: los elementos sin nombre se agrupan en un único panel sin título, y si solo existe una pestaña no se muestra la barra de botones. Incluye structured data schema.org (WebPageElement con mainEntity ItemList de las pestañas)',
+  framework: 'Astro',
+  priority: 1,
+  tags: ['contenido'],
+  fields: [
+    {
+      name: 'items',
+      type: 'list',
+      help: 'Listado de pestañas del tab. Cada pestaña tiene su nombre (opcional), contenido (items internos con icono y texto) e imagen. Los elementos con el mismo nombre de pestaña se agrupan en la misma pestaña; los elementos sin nombre se agrupan en un único panel sin título. Si solo hay una pestaña, no se muestra la barra de botones. La primera pestaña se muestra al cargar; las demás arrancan ocultas y se activan al hacer click en su botón',
+      label: 'Listado de pestañas',
+      mandatory: false,
+      items: {
+        type: 'object',
+        fields: [
+            { name: 'name', type: 'text', help: 'Introduce el nombre de la pestaña (opcional). Los elementos sin nombre se agrupan en un único panel sin título de pestaña', label: 'Nombre de la pestaña', example_value: 'Pestaña 1' },
+            { name: 'title', type: 'text', help: 'Título del elemento (h4)', label: 'Título', example_value: 'Redacción de contratos' },
+            { name: 'description', type: 'textArea', help: 'Descripción del elemento', label: 'Descripción', example_value: 'Genera borradores de contratos a partir de plantillas personalizables en segundos' },
+            { name: 'icon', type: 'text', help: 'Nombre del icono a mostrar junto al elemento. Consulta los valores aceptados en el componente Contenido_2026_Menorca', label: 'Icono', example_value: 'edit' },
+            { name: 'buttonUrl', type: 'text', help: 'Introduce la URL de destino del botón (Solo es necesario completar este campo en uno de los elementos de la misma pestaña)', label: 'URL del botón', example_value: 'https://lefebvre.es' },
+            { name: 'image', type: 'image', help: 'Introduce la URL de la imagen de la pestaña (Solo es necesario completar este campo en uno de los elementos de la misma pestaña)', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' }
+        ]
+      }
+    }
+  ]
+};

package/src/components/Astro/Contenido_2026_Estepona.astro

@@ -0,0 +1,175 @@
+---
+
+import Contenido_2026_Menorca from './Contenido_2026_Menorca.astro';
+import Titulo_2025_Algeciras from './Titulo_2025_Algeciras.astro';
+import { extractImageUrl, PAGE_ENTITY_ID } from '../../lib/functions.js';
+
+const {
+    items = [],
+} = Astro.props;
+
+// isPartOf hacia el nodo de página (#webpage por defecto). Genérico: opt-out con pageId="".
+// itemListId opcional: @id del ItemList (para ser mainEntity de la CollectionPage).
+const { pageId = PAGE_ENTITY_ID, itemListId = '' } = Astro.props;
+
+type TabPoint = { title: string; description: string; icon: string; showIco: boolean };
+type Tab = { name: string; buttonUrl: string; image: string; points: TabPoint[] };
+
+// El nombre de pestaña es opcional: los items sin nombre se normalizan a '' y agrupan juntos.
+const tabs = items.reduce((acc: Tab[], item: any) => {
+    const name = item.name || '';
+    const existing = acc.find((t: Tab) => t.name === name);
+    if (existing) {
+        if (!existing.buttonUrl && item.buttonUrl) existing.buttonUrl = item.buttonUrl;
+        if (!existing.image && item.image) existing.image = item.image;
+        existing.points.push({ title: item.title, description: item.description, icon: item.icon, showIco: !!item.icon });
+    } else {
+        acc.push({
+            name,
+            buttonUrl: item.buttonUrl || '',
+            image: item.image || '',
+            points: [{ title: item.title, description: item.description, icon: item.icon, showIco: !!item.icon }]
+        });
+    }
+    return acc;
+}, []);
+
+// Con una única pestaña no hay nada que conmutar: se omite la barra de botones.
+const showTabBar = tabs.length > 1;
+const tabNames = tabs.map((t: Tab) => t.name).filter(Boolean).join(' · ');
+
+const identifier = 'js-megablock'+ Math.random().toString(36).substring(2, 15);
+
+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": "WebPageElement",${tabNames ? `
+    "name": "${escapeJson(tabNames)}",` : ''}
+    "mainEntity": {
+        "@type": "ItemList",${itemListId ? `
+        "@id": "${itemListId}",` : ''}${pageId ? `
+        "isPartOf": { "@id": "${pageId}" },` : ''}
+        "numberOfItems": ${tabs.length},
+        "itemListElement": [${tabs.map((tab: Tab, index: number) => `{
+            "@type": "ListItem",
+            "position": ${index + 1}${tab.name ? `,
+            "name": "${escapeJson(tab.name)}"` : ''}${tab.image ? `,
+            "image": "${escapeJson(extractImageUrl(tab.image))}"` : ''}${tab.buttonUrl ? `,
+            "url": "${escapeJson(tab.buttonUrl)}"` : ''}${tab.points && tab.points.length ? `,
+            "description": "${escapeJson(tab.points.map((p: TabPoint) => p.title).filter(Boolean).join(' · '))}"` : ''}
+        }`).join(',')}]
+    }
+}
+</script>`;
+
+---
+
+
+<section class="w-full flex items-center justify-center">
+    <article class="w-full flex flex-col items-center justify-center">
+        {showTabBar && (
+            <div class="w-full flex justify-center items-center relative text-[56px] text-center font inter leading-[64px] mt-10">
+                <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg"> -->
+                    <div class="flex gap-1 md:gap-8 items-center">
+                        {tabs.map((tab: Tab, index: number) => (
+                            <p class="text-base">
+                                <button data-linkedto={`${identifier}${index + 1}`}
+                                class={`
+                                    btn py-3.5 px-5 font-inter
+                                    cursor-pointer border border-[#b6b7bb]
+                                    hover:border hover:border-[#5F6168] hover:!bg-[#ffffff] rounded-lg ${identifier}button
+                                    ${index === 0 ? 'active' : ''}
+                                    bg-F2F3F8 text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
+                                    md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                    `}
+                                >{tab.name || `Pestaña ${index + 1}`}</button>
+                            </p>
+                        ))}
+                    </div>
+            </div>
+        )}
+        <div class="lg:max-w-7xl md:w-full px-6 md:w-4/5 md:px-0 col my-10">
+            {tabs.map((tab: Tab, index: number) => (
+                <div id={`${identifier}${index + 1}`} class={`${index === 0 ? '' : 'hidden'} collapse-arrow ${identifier}item`}>
+
+                    <div class="w-full flex-col flex md:flex-row gap-4 md:gap-12">
+                        <div class="w-full md:w-1/2">
+                            <Contenido_2026_Menorca
+                                flexOrientationIcoText="flex-row"
+                                flexOrientationBlockIcoText="flex-col"
+                                positionFlex="items-start"
+                                positionBtnFlex="justify-start"
+                                items={tab.points}
+                                headingType="h4"
+                                showBtn={false}
+                                btnLabel="Ver experiencias de uso"
+                                buttonUrl={tab.buttonUrl}
+                                widthArticle="w-4/5"
+                            />
+                        </div>
+                        <div class="w-full md:w-1/2 p-0 md:pr-2">
+                            <img src={extractImageUrl(tab.image)} alt={tab.name || 'Imagen de sección'} width="600" height="450" loading="lazy" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
+                        </div>
+                    </div>
+
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+
+
+<style>
+    .bg-F2F3F8 {
+        background-color: #F2F3F8;
+    }
+    .active{
+        background-color: #ffffff;
+        border: 1px solid #5F6168;
+        color: black;
+        max-width: none;
+        max-height: none;
+        font-size: 16px;
+
+        &:hover{
+            background-color: #ffffff;
+            border: 1px solid #5F6168;
+        }
+    }
+</style>
+
+<script is:inline define:vars={{ identifier }}>
+
+document.querySelectorAll(`.${identifier}button`).forEach(btn => {
+
+    btn.addEventListener('click', (e) => {
+        const linkedId = btn.getAttribute('data-linkedto');
+        const targetItem = document.getElementById(linkedId);
+        if (targetItem) {
+
+            const collapseCount = document.querySelectorAll(`.${identifier}item.collapse`).length;
+            const hiddenCount = document.querySelectorAll(`.${identifier}item.hidden`).length;
+            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+
+            document.querySelectorAll(`.${identifier}item`).forEach(item => {
+                if (item === targetItem) return;
+                if (item.classList.contains(desiredClass)) return;
+                item.classList.add(desiredClass);
+            });
+            targetItem.classList.toggle(desiredClass);
+
+
+            document.querySelectorAll(`.${identifier}button`).forEach(item => {
+                if (item === btn) return;
+                item.classList.remove('active');
+            });
+            btn.classList.toggle('active');
+        }
+    });
+});
+</script>
+
+<Fragment set:html={structuredData} />

package/src/components/Astro/Contenido_2026_Huesca.astro

@@ -45,14 +45,14 @@ const randomId = Math.floor(Math.random() * 1000);
 
             <div class="w-full md:w-1/2 flex items-center justify-end">
                 {videoUrl ? (
-                    <video autoplay loop muted playsinline preload="metadata" class="w-full md:w-3/5 h-auto object-cover rounded-lg">
+                    <video autoplay loop muted playsinline preload="metadata" class="w-full h-auto object-cover rounded-lg">
                         <source src={videoUrl} type="video/mp4" />
                     </video>
                 ) : (
                     <img
                         src={imageUrl}
                         alt={altImage}
-                        class="w-full md:w-3/5 h-auto object-cover rounded-lg"
+                        class="w-full h-auto object-cover rounded-lg"
                         loading={loading}
                     />
                 )}

package/src/generated/componentRegistry.ts

@@ -17,6 +17,7 @@ import * as Contenido_2025_Montevideo from '../carbins/Contenido_2025_Montevideo
 import * as Contenido_2026_Cabra from '../carbins/Contenido_2026_Cabra.ts';
 import * as Contenido_2026_Denia from '../carbins/Contenido_2026_Denia.ts';
 import * as Contenido_2026_Dubai from '../carbins/Contenido_2026_Dubai.ts';
+import * as Contenido_2026_Estepona from '../carbins/Contenido_2026_Estepona.ts';
 import * as Contenido_2026_Estocolmo from '../carbins/Contenido_2026_Estocolmo.ts';
 import * as Contenido_2026_Huesca from '../carbins/Contenido_2026_Huesca.ts';
 import * as Contenido_2026_Jaen from '../carbins/Contenido_2026_Jaen.ts';
@@ -109,6 +110,7 @@ export const components = [
   {component: Contenido_2026_Cabra},
   {component: Contenido_2026_Denia},
   {component: Contenido_2026_Dubai},
+  {component: Contenido_2026_Estepona},
   {component: Contenido_2026_Estocolmo},
   {component: Contenido_2026_Huesca},
   {component: Contenido_2026_Jaen},

package/src/index.ts

@@ -22,6 +22,7 @@ import Contenido_2025_Montevideo from './components/Astro/Contenido_2025_Montevi
 import Contenido_2026_Cabra from './components/Astro/Contenido_2026_Cabra.astro';
 import Contenido_2026_Denia from './components/Astro/Contenido_2026_Denia.astro';
 import Contenido_2026_Dubai from './components/Astro/Contenido_2026_Dubai.astro';
+import Contenido_2026_Estepona from './components/Astro/Contenido_2026_Estepona.astro';
 import Contenido_2026_Estocolmo from './components/Astro/Contenido_2026_Estocolmo.astro';
 import Contenido_2026_Huesca from './components/Astro/Contenido_2026_Huesca.astro';
 import Contenido_2026_Jaen from './components/Astro/Contenido_2026_Jaen.astro';
@@ -100,7 +101,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_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, 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, 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, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, 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, 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.
@@ -134,6 +135,7 @@ export const components = {
   Contenido_2026_Cabra: Contenido_2026_Cabra,
   Contenido_2026_Denia: Contenido_2026_Denia,
   Contenido_2026_Dubai: Contenido_2026_Dubai,
+  Contenido_2026_Estepona: Contenido_2026_Estepona,
   Contenido_2026_Estocolmo: Contenido_2026_Estocolmo,
   Contenido_2026_Huesca: Contenido_2026_Huesca,
   Contenido_2026_Jaen: Contenido_2026_Jaen,