@anoki/fse-ui
Version:
FSE UI components library
292 lines (291 loc) • 9.49 kB
JavaScript
import { j as e } from "./index.es237.js";
import { Pause as U } from "./index.es255.js";
import "./index.es.js";
import { splitInTwo as F } from "./index.es256.js";
import { clsx as m } from "./index.es238.js";
import { useMemo as M, useRef as G, useState as b, 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 D from "./index.es260.js";
import q from "./index.es261.js";
import z from "./index.es262.js";
import { Swiper as H, SwiperSlide as J } from "./index.es263.js";
/* empty css */
import { Tags as K } from "./index.es147.js";
import { PlayVideo as O } from "./index.es220.js";
import { Col as A } from "./index.es61.js";
import { CardCategory as Q } from "./index.es36.js";
import { Row as P } from "./index.es116.js";
import { ArrowLeft as S } from "./index.es166.js";
import { File as W } from "./index.es199.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: p,
withShadow: n,
...t
}) => {
var l;
const h = {
"--blur-percentage": t != null && t.blurPercentage ? `${t == null ? void 0 : t.blurPercentage}px` : "5px"
}, [o, a] = M(() => !t.slideTitle || t.slideTitle.trim() === "" ? [null, null] : t.slideTitle.trim().split(/\s+/).length >= 4 ? F(t.slideTitle.toUpperCase()) : [t.slideTitle.toUpperCase(), null], [t.slideTitle]);
return /* @__PURE__ */ e.jsxs(
"div",
{
className: m("is-event", "hero-event-container", {
"with-shadow": n
}),
style: p,
children: [
/* @__PURE__ */ e.jsx(
"img",
{
className: "hero-event-background",
src: t.src,
alt: `Evento ${t.alt}`,
style: h
}
),
/* @__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: m("short-title", t.titleAlignment), children: [
/* @__PURE__ */ e.jsx("span", { children: o }),
a && /* @__PURE__ */ e.jsx("span", { children: a })
] })
] }),
/* @__PURE__ */ e.jsxs(A, { 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 && ((l = t.tags) == null ? void 0 : l.length) > 0 && /* @__PURE__ */ e.jsx(K, { title: i, items: t.tags ?? [] })
] })
] })
]
}
);
}, Z = ({
autoplay: s,
toggleAutoPlay: i
}) => s ? /* @__PURE__ */ e.jsx(
U,
{
width: 20,
height: 20,
onClick: i,
className: "cursor-pointer"
}
) : /* @__PURE__ */ e.jsx(
O,
{
width: 20,
height: 20,
onClick: i,
color: "white",
className: "cursor-pointer"
}
), ee = ({
slides: s,
currentIndex: i,
goPrev: p,
goNext: n,
autoplay: t,
toggleAutoPlay: h,
gradientColorStyle: o,
type: a,
paginationLabel: l = "di"
}) => /* @__PURE__ */ e.jsxs(
P,
{
className: m("pagination", a),
gap: "x20",
style: o,
children: [
s.length > 1 && /* @__PURE__ */ e.jsxs(P, { alignItems: "center", children: [
/* @__PURE__ */ e.jsx(
S,
{
width: 40,
height: 40,
onClick: p,
color: "white",
className: "cursor-pointer"
}
),
/* @__PURE__ */ e.jsx(Z, { autoplay: t, toggleAutoPlay: h })
] }),
/* @__PURE__ */ e.jsx("span", { children: `${i + 1} ${l} ${s.length}` }),
s.length > 1 && /* @__PURE__ */ e.jsx(
S,
{
width: 40,
height: 40,
className: "next cursor-pointer",
onClick: n,
color: "white"
}
)
]
}
), ye = ({
slides: s = [],
asLink: i = "a",
asImage: p = "img",
timeout: n = 3e3,
openInNewTab: t = !1,
paginationLabel: h = "di",
withShadow: o = !0,
gradientColor: a = "#3d6289",
swiperHeight: l = 574,
type: u = "full-image",
tagsLabelTitle: k = "Argomenti correlati"
}) => {
const L = i || "a", j = p, c = G(null), [w, $] = b(0), [g, R] = b(
/* true */
!1
), E = () => {
R(!g);
}, x = I(() => {
if (!c.current) return;
const r = c.current;
r.isEnd && !r.params.loop ? r.slideTo(0) : r.slideNext();
}, []), _ = I(() => {
if (!c.current) return;
const r = c.current;
r.isBeginning && !r.params.loop ? r.slideTo(r.slides.length - 1) : r.slidePrev();
}, []);
V(() => {
const r = g ? setInterval(() => {
x();
}, n) : null;
return () => {
r && clearInterval(r);
};
}, [g, x, n]);
const f = {
"--gradient": a
}, N = {
"--swiper-height": `${l}px`
};
return /* @__PURE__ */ e.jsx(
A,
{
className: m("ui-slider-section-wrapper-container", u),
style: N,
children: /* @__PURE__ */ e.jsx("div", { className: "ui-slider", children: /* @__PURE__ */ e.jsxs(
H,
{
modules: [D, q, z],
slidesPerView: 1,
autoplay: g,
observer: !0,
observeParents: !0,
loop: !0,
onSwiper: (r) => c.current = r,
onSlideChange: (r) => $(r.realIndex),
style: N,
children: [
s.map((r, B) => {
var v, y, C;
return /* @__PURE__ */ e.jsx(
J,
{
className: m(
u === "blur-image" ? "ui-slider-section-wrapper-container" : ""
),
children: u === "blur-image" ? /* @__PURE__ */ e.jsx(
Y,
{
...r,
ImageComponent: j,
tagsLabelTitle: k,
withShadow: o,
gradientStyle: f
}
) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
j,
{
src: r.src,
alt: r.alt,
className: "slider-image",
onLoad: () => {
var d, T;
return (T = (d = c.current) == null ? void 0 : d.update) == null ? void 0 : T.call(d);
}
}
),
/* @__PURE__ */ e.jsx(
"div",
{
className: m("slider-content", {
"with-shadow": o
}),
style: f,
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 }),
((v = r.category) == null ? void 0 : v.type) ?? " ",
/* @__PURE__ */ e.jsx("p", { className: "date", children: ((y = r.category) == null ? void 0 : y.published_at) ?? " " })
] }),
/* @__PURE__ */ e.jsx(
L,
{
href: ((C = s[w]) == null ? void 0 : C.href) || "",
target: t ? "_blank" : "_self",
children: /* @__PURE__ */ e.jsx("h1", { className: "title", children: r.title })
}
)
] }) })
}
)
] })
},
B
);
}),
/* @__PURE__ */ e.jsx(
ee,
{
slides: s,
currentIndex: w,
goPrev: _,
goNext: x,
autoplay: g,
toggleAutoPlay: E,
type: u,
gradientColorStyle: f,
paginationLabel: h
}
)
]
}
) })
}
);
};
export {
Z as AutoplayButton,
Y as BlurImageSlide,
ye as Slider,
ee as SliderPagination,
X as SliderTypeEnum
};
//# sourceMappingURL=index.es153.js.map