libreria-astro-lefebvre 0.1.92 → 0.1.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -56,19 +56,11 @@ export const metadata: ComponentMetadata = {
|
|
|
56
56
|
{
|
|
57
57
|
name: 'bigImage',
|
|
58
58
|
type: 'image',
|
|
59
|
-
help: 'Imagen subida desde Limbo que sustituye al icono SVG predefinido (solo si "Mostrar icono grande" está activado). Opcional: si se deja vacía se usa el icono seleccionado en "Icono". Se muestra a 66x66 px dentro de la caja blanca de 90x90',
|
|
60
|
-
label: 'Imagen del icono',
|
|
59
|
+
help: 'Imagen subida desde Limbo que sustituye al icono SVG predefinido (solo si "Mostrar icono grande" está activado). Opcional: si se deja vacía se usa el icono seleccionado en "Icono". Se muestra a 66x66 px dentro de la caja blanca de 90x90 y usa el "Texto del título" como texto alternativo',
|
|
60
|
+
label: 'Imagen del icono (Limbo)',
|
|
61
61
|
mandatory: false,
|
|
62
62
|
example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
|
|
63
63
|
},
|
|
64
|
-
{
|
|
65
|
-
name: 'bigImageAlt',
|
|
66
|
-
type: 'text',
|
|
67
|
-
help: 'Texto alternativo de la "Imagen del icono" para accesibilidad. Solo aplica si se ha subido una imagen',
|
|
68
|
-
label: 'Alt de la imagen del icono',
|
|
69
|
-
mandatory: false,
|
|
70
|
-
example_value: 'Sello de certificación ISO 27001'
|
|
71
|
-
},
|
|
72
64
|
{
|
|
73
65
|
name: 'bigIconUrl',
|
|
74
66
|
type: 'text',
|
|
@@ -94,8 +94,7 @@ export const metadata: ComponentMetadata = {
|
|
|
94
94
|
{ name: 'description', type: 'textArea', help: 'Descripción del item. Se muestra debajo del título centrada y como texto plano (no admite HTML)', label: 'Descripción', example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales' },
|
|
95
95
|
{ name: 'showBigIco', type: 'boolean', help: 'Si está activado, muestra el icono grande seleccionado junto al contenido del item. Si está desactivado, NO se muestra icono (el hueco queda vacío)', label: 'Mostrar icono grande', options: ['false', 'true'], options_labels: ['Falso', 'Verdadero'], example_value: true },
|
|
96
96
|
{ name: 'bigIcon', type: 'select', help: 'Icono grande que se muestra junto al item (solo si "Mostrar icono grande" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono. Se ignora si se rellena "Imagen del icono"', label: 'Icono grande', options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'], options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'], example_value: 'bigIso2' },
|
|
97
|
-
{ name: 'bigImage', type: 'image', help: 'Imagen subida desde Limbo que sustituye al icono SVG predefinido (solo si "Mostrar icono grande" está activado). Opcional: si se deja vacía se usa el icono seleccionado en "Icono grande". Se muestra a 66x66 px dentro de la caja blanca de 90x90', label: 'Imagen del icono', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
|
|
98
|
-
{ name: 'bigImageAlt', type: 'text', help: 'Texto alternativo de la "Imagen del icono" para accesibilidad. Solo aplica si se ha subido una imagen', label: 'Alt de la imagen del icono', example_value: 'Sello de certificación ISO 27001' },
|
|
97
|
+
{ name: 'bigImage', type: 'image', help: 'Imagen subida desde Limbo que sustituye al icono SVG predefinido (solo si "Mostrar icono grande" está activado). Opcional: si se deja vacía se usa el icono seleccionado en "Icono grande". Se muestra a 66x66 px dentro de la caja blanca de 90x90 y usa el "Título" del item como texto alternativo', label: 'Imagen del icono (Limbo)', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
|
|
99
98
|
{ name: 'bigIconUrl', type: 'text', help: 'URL de descarga del icono. Si se rellena, el icono se convierte en un enlace de descarga (atributo download). Si se deja vacío, el icono se muestra sin enlace. ATENCIÓN: el navegador solo fuerza la descarga si el archivo es del mismo origen', label: 'Enlace de descarga del icono', mandatory: false }
|
|
100
99
|
]
|
|
101
100
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
---
|
|
2
|
-
import LimboImage from '../LimboImage.astro';
|
|
3
2
|
import { extractImageUrl } from '../../lib/functions.js';
|
|
4
3
|
|
|
5
4
|
const {
|
|
@@ -9,7 +8,6 @@ const {
|
|
|
9
8
|
showBigIco = true,
|
|
10
9
|
bigIcon,
|
|
11
10
|
bigImage = "",
|
|
12
|
-
bigImageAlt = "",
|
|
13
11
|
bigIconUrl = "",
|
|
14
12
|
positionFlex = "items-center",
|
|
15
13
|
flexOrientationIcoText = "flex-row",
|
|
@@ -17,10 +15,6 @@ const {
|
|
|
17
15
|
|
|
18
16
|
const hasIconUrl = bigIconUrl.trim() !== "";
|
|
19
17
|
|
|
20
|
-
// Imagen subida desde Limbo. Si viene informada tiene prioridad sobre el SVG de `icons`.
|
|
21
|
-
const bigImageUrl = extractImageUrl(bigImage);
|
|
22
|
-
const hasBigImage = !!bigImageUrl;
|
|
23
|
-
|
|
24
18
|
const icons = {
|
|
25
19
|
bigIA: `<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 90 90" fill="none">
|
|
26
20
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.9743 10.2823C30.0487 10.4208 26.5609 10.7976 23.846 11.4846C17.4799 13.0969 13.4907 17.0832 11.8811 23.4491C10.8533 27.5047 10.5957 31.8345 10.5957 45.0207C10.5957 58.2069 10.8533 62.5368 11.8811 66.5951C12.7842 70.1631 14.5295 73.1328 16.8787 75.108C20.1892 77.8865 24.1369 79.1192 31.2649 79.6012C36.2598 79.9392 54.5797 79.9392 59.5718 79.6012C64.6082 79.2605 67.8799 78.5735 70.5727 77.2881C74.947 75.2021 77.7367 71.5926 79.011 66.368C79.9945 62.3401 80.241 58.0462 80.241 44.9792C80.241 32.0063 79.9917 27.6986 79.011 23.6735C77.4181 17.1497 73.4399 13.1135 66.9907 11.4818C64.1816 10.7699 60.9708 10.4347 55.4856 10.2768C52.358 10.1854 38.2405 10.1909 34.9716 10.2823H34.9743ZM35.2292 15.446C26.1869 15.748 22.4166 16.7009 19.7599 19.3603C17.3414 21.7787 16.3856 25.0143 15.9424 32.2722C15.7928 34.7239 15.7928 55.3204 15.9424 57.772C16.3856 65.0299 17.3414 68.2655 19.7599 70.6839C22.1783 73.1023 25.414 74.058 32.6722 74.5013C35.1239 74.6509 55.7211 74.6509 58.1756 74.5013C65.4338 74.058 68.6695 73.1023 71.088 70.6839C73.5064 68.2655 74.4622 65.0299 74.9054 57.772C75.055 55.3204 75.055 34.7239 74.9054 32.2722C74.4622 25.0143 73.5064 21.7787 71.088 19.3603C68.6972 16.9696 65.564 16.0277 58.4221 15.5513C57.1533 15.4654 37.3236 15.3767 35.232 15.4488L35.2292 15.446Z" fill="#262626"/>
|
|
@@ -63,7 +57,12 @@ const icons = {
|
|
|
63
57
|
</svg>`,
|
|
64
58
|
};
|
|
65
59
|
|
|
66
|
-
|
|
60
|
+
// bigImage llega como JSON de Limbo (original + recortes). extractImageUrl lo resuelve a la URL final.
|
|
61
|
+
// Si hay imagen de Limbo prevalece sobre el SVG predefinido.
|
|
62
|
+
const limboImageUrl = extractImageUrl(bigImage);
|
|
63
|
+
const iconSvg = limboImageUrl
|
|
64
|
+
? `<img src="${limboImageUrl}" alt="${title.replace(/"/g, '"')}" width="66" height="66" class="w-full h-full object-contain" loading="lazy" />`
|
|
65
|
+
: (icons[bigIcon] ?? "");
|
|
67
66
|
|
|
68
67
|
---
|
|
69
68
|
|
|
@@ -75,21 +74,10 @@ const iconSvg = icons[bigIcon] ?? "";
|
|
|
75
74
|
href={bigIconUrl}
|
|
76
75
|
download
|
|
77
76
|
class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<LimboImage src={bigImage} alt={bigImageAlt} class="w-full h-full object-contain" width="66" height="66" />
|
|
81
|
-
) : (
|
|
82
|
-
<Fragment set:html={iconSvg} />
|
|
83
|
-
)}
|
|
84
|
-
</a>
|
|
77
|
+
set:html={iconSvg}
|
|
78
|
+
/>
|
|
85
79
|
) : (
|
|
86
|
-
<div class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0"
|
|
87
|
-
{hasBigImage ? (
|
|
88
|
-
<LimboImage src={bigImage} alt={bigImageAlt} class="w-full h-full object-contain" width="66" height="66" />
|
|
89
|
-
) : (
|
|
90
|
-
<Fragment set:html={iconSvg} />
|
|
91
|
-
)}
|
|
92
|
-
</div>
|
|
80
|
+
<div class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0" set:html={iconSvg} />
|
|
93
81
|
)
|
|
94
82
|
) : (
|
|
95
83
|
<div class="w-0 h-0"></div>
|