@anoki/fse-ui
Version:
FSE UI components library
294 lines (293 loc) • 10.1 kB
JavaScript
import { j as e } from "./index.es278.js";
import { Pause as M } from "./index.es295.js";
import "./index.es.js";
import { splitInTwo as U } from "./index.es296.js";
import { clsx as p } from "./index.es280.js";
import { useMemo as F, useRef as G, useState as C, useCallback as I, useEffect as V } from "react";
import './sections/Slider/Slider.css';import './node_modules/swiper/modules/pagination.css';import './node_modules/swiper/modules/navigation.css';import './node_modules/swiper/swiper.css';/* empty css */
/* empty css */
/* empty css */
import z from "./index.es300.js";
import D from "./index.es301.js";
import q from "./index.es302.js";
import { Swiper as H, SwiperSlide as J } from "./index.es303.js";
/* empty css */
import { PlayVideo as K } from "./index.es210.js";
import { Tags as O } from "./index.es258.js";
import { Col as L } from "./index.es82.js";
import { CardCategory as Q } from "./index.es42.js";
import { File as W } from "./index.es134.js";
import { Row as P } from "./index.es219.js";
import { ArrowLeft as A } from "./index.es20.js";
var X = /* @__PURE__ */ ((s) => (s.FULL_IMAGE = "full-image", s.BLUR_IMAGE = "blur-image", s))(X || {});
const Y = ({
ImageComponent: s,
tagsLabelTitle: i = "Argomenti correlati",
gradientStyle: h,
withShadow: a,
...t
}) => {
var c;
const u = {
"--blur-percentage": t != null && t.blurPercentage ? `${t == null ? void 0 : t.blurPercentage}px` : "5px"
}, [o, l] = F(() => !t.slideTitle || t.slideTitle.trim() === "" ? [null, null] : t.slideTitle.trim().split(/\s+/).length >= 4 ? U(t.slideTitle.toUpperCase()) : [t.slideTitle.toUpperCase(), null], [t.slideTitle]);
return /* @__PURE__ */ e.jsxs(
"div",
{
className: p("is-event", "hero-event-container", {
"with-shadow": a
}),
style: h,
children: [
/* @__PURE__ */ e.jsx(
"img",
{
className: "hero-event-background",
src: t.src,
alt: `Evento ${t.alt}`,
style: u
}
),
/* @__PURE__ */ e.jsxs("div", { className: "hero-event-content", children: [
/* @__PURE__ */ e.jsxs("div", { className: "image-container", children: [
!!t.src && /* @__PURE__ */ e.jsx(
s,
{
alt: `${t.title} image`,
src: t.src,
style: { aspectRatio: 21 / 9 }
}
),
t.slideTitle && /* @__PURE__ */ e.jsxs("p", { className: p("short-title", t.titleAlignment), children: [
/* @__PURE__ */ e.jsx("span", { children: o }),
l && /* @__PURE__ */ e.jsx("span", { children: l })
] })
] }),
/* @__PURE__ */ e.jsxs(L, { className: "hero-event-card-container", children: [
/* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
Q,
{
title: t.title,
href: t.href || "#",
className: "w-full",
description2: t.description,
classNameTitle: "text-slate-20 fs-5 md-fs-custom-2",
classNameDescriptionTitle: "text-slate-28 fw-bold fs-6 md-fs-custom"
}
) }),
t.tags && ((c = t.tags) == null ? void 0 : c.length) > 0 && /* @__PURE__ */ e.jsx(O, { title: i, items: t.tags ?? [] })
] })
] })
]
}
);
}, Z = ({
autoplay: s,
toggleAutoPlay: i
}) => /* @__PURE__ */ e.jsx(
"button",
{
type: "button",
onClick: i,
"aria-label": s ? "Metti in pausa" : "Avvia riproduzione automatica",
children: s ? /* @__PURE__ */ e.jsx(M, { width: 20, height: 20 }) : /* @__PURE__ */ e.jsx(K, { width: 20, height: 20, color: "white" })
}
), ee = ({
slides: s,
currentIndex: i,
goPrev: h,
goNext: a,
autoplay: t,
toggleAutoPlay: u,
gradientColorStyle: o,
type: l,
paginationLabel: c = "di"
}) => /* @__PURE__ */ e.jsxs(
P,
{
className: p("pagination", l),
gap: "x20",
style: o,
children: [
s.length > 1 && /* @__PURE__ */ e.jsxs(P, { alignItems: "center", children: [
/* @__PURE__ */ e.jsx(
"button",
{
type: "button",
onClick: h,
"aria-label": "Slide precedente",
children: /* @__PURE__ */ e.jsx(A, { width: 40, height: 40, color: "white" })
}
),
/* @__PURE__ */ e.jsx(Z, { autoplay: t, toggleAutoPlay: u })
] }),
/* @__PURE__ */ e.jsx("span", { children: `${i + 1} ${c} ${s.length}` }),
s.length > 1 && /* @__PURE__ */ e.jsx(
"button",
{
type: "button",
onClick: a,
"aria-label": "Slide successiva",
className: "next",
children: /* @__PURE__ */ e.jsx(A, { width: 40, height: 40, color: "white" })
}
)
]
}
), Ne = ({
slides: s = [],
asLink: i = "a",
asImage: h = "img",
timeout: a = 3e3,
openInNewTab: t = !1,
paginationLabel: u = "di",
withShadow: o = !0,
gradientColor: l = "#3d6289",
swiperHeight: c = 574,
type: d = "full-image",
tagsLabelTitle: k = "Argomenti correlati"
}) => {
const E = i || "a", w = h, m = G(null), [v, $] = C(0), [g, R] = C(
/* true */
!1
), _ = () => {
R(!g);
}, f = I(() => {
if (!m.current) return;
const r = m.current;
r.isEnd && !r.params.loop ? r.slideTo(0) : r.slideNext();
}, []), B = I(() => {
if (!m.current) return;
const r = m.current;
r.isBeginning && !r.params.loop ? r.slideTo(r.slides.length - 1) : r.slidePrev();
}, []);
V(() => {
const r = g ? setInterval(() => {
f();
}, a) : null;
return () => {
r && clearInterval(r);
};
}, [g, f, a]);
const j = {
"--gradient": l
}, b = {
"--swiper-height": `${c}px`
};
return /* @__PURE__ */ e.jsx(
L,
{
className: p("ui-slider-section-wrapper-container", d),
style: b,
"aria-label": "Slider",
as: "section",
children: /* @__PURE__ */ e.jsx("div", { className: "ui-slider", children: /* @__PURE__ */ e.jsxs(
H,
{
modules: [z, D, q],
slidesPerView: 1,
autoplay: g,
observer: !0,
observeParents: !0,
loop: !0,
watchSlidesProgress: !0,
onSwiper: (r) => m.current = r,
onSlideChange: (r) => {
$(r.realIndex), r.slides.forEach((n) => {
n.inert = !n.classList.contains("swiper-slide-visible");
});
},
onInit: (r) => {
r.slides.forEach((n) => {
n.inert = !n.classList.contains("swiper-slide-visible");
});
},
style: b,
children: [
s.map((r, n) => {
var N, y, S;
return /* @__PURE__ */ e.jsx(
J,
{
className: p(
d === "blur-image" ? "ui-slider-section-wrapper-container" : ""
),
children: d === "blur-image" ? /* @__PURE__ */ e.jsx(
Y,
{
...r,
ImageComponent: w,
tagsLabelTitle: k,
withShadow: o,
gradientStyle: j
}
) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
w,
{
src: r.src,
alt: r.alt,
className: "slider-image",
onLoad: () => {
var x, T;
return (T = (x = m.current) == null ? void 0 : x.update) == null ? void 0 : T.call(x);
}
}
),
/* @__PURE__ */ e.jsx(
"div",
{
className: p("slider-content", {
"with-shadow": o
}),
style: j,
children: /* @__PURE__ */ e.jsx("div", { className: "container", children: /* @__PURE__ */ e.jsxs("div", { className: "slider-content-grid", children: [
/* @__PURE__ */ e.jsxs("div", { className: "category", children: [
r.category && /* @__PURE__ */ e.jsx(W, { fillColor: "#fff", width: 30, height: 30 }),
((N = r.category) == null ? void 0 : N.type) ?? " ",
/* @__PURE__ */ e.jsx("p", { className: "date", children: ((y = r.category) == null ? void 0 : y.published_at) ?? " " })
] }),
/* @__PURE__ */ e.jsx(
E,
{
href: ((S = s[v]) == null ? void 0 : S.href) || "",
target: t ? "_blank" : "_self",
children: /* @__PURE__ */ e.jsx("h1", { className: "title", children: r.title })
}
)
] }) })
}
)
] })
},
n
);
}),
/* @__PURE__ */ e.jsx(
ee,
{
slides: s,
currentIndex: v,
goPrev: B,
goNext: f,
autoplay: g,
toggleAutoPlay: _,
type: d,
gradientColorStyle: j,
paginationLabel: u
}
)
]
}
) })
}
);
};
export {
Z as AutoplayButton,
Y as BlurImageSlide,
Ne as Slider,
ee as SliderPagination,
X as SliderTypeEnum
};
//# sourceMappingURL=index.es27.js.map