ublo-lib 1.47.81 → 1.47.84

package/es/common/components/infinite-carousel/index.d.ts

@@ -0,0 +1,3 @@
+import InfiniteCarousel from "./infinite-carousel";
+export default InfiniteCarousel;
+//# sourceMappingURL=index.d.ts.map

package/es/common/components/infinite-carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/components/infinite-carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAEnD,eAAe,gBAAgB,CAAC"}

package/es/common/components/infinite-carousel/index.js

@@ -0,0 +1,2 @@
+import InfiniteCarousel from "./infinite-carousel";
+export default InfiniteCarousel;

package/es/common/components/infinite-carousel/infinite-carousel.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+type CarouselVariant = "wheel" | "scale";
+type Props = {
+    className?: string;
+    children: React.ReactNode;
+    variant?: CarouselVariant;
+    cloneNumber?: number;
+    options: {
+        hide_wheel_items?: boolean;
+        wheel_items_gap?: number;
+        scale_items_gap?: number;
+        scale_number?: number;
+        rotate_number?: number;
+        translateY_number?: number;
+        transition_duration?: number;
+    };
+};
+export default function InfiniteCarousel({ className, children, variant, options, cloneNumber, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=infinite-carousel.d.ts.map

package/es/common/components/infinite-carousel/infinite-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-carousel.d.ts","sourceRoot":"","sources":["../../../../src/common/components/infinite-carousel/infinite-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEzC,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE;QACP,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,OAAY,EACZ,WAAW,GACZ,EAAE,KAAK,2CAqSP"}

package/es/common/components/infinite-carousel/infinite-carousel.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import ChevronLeftIcon from "dt-design-system/es/icons/chevron-left";
+import ChevronRightIcon from "dt-design-system/es/icons/chevron-right";
+import ScrollbarSize from "../scrollbar-size";
+import css from "./infinite-carousel.module.css";
+export default function InfiniteCarousel({ className, children, variant = "wheel", options = {}, cloneNumber, }) {
+    const { cmsMode } = useUbloContext();
+    const zoneRef = React.useRef(null);
+    const itemWidth = React.useRef(null);
+    const itemHeight = React.useRef(null);
+    const [items, setItems] = React.useState([]);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [isTransitioning, setIsTransitioning] = React.useState(false);
+    const { wheel_items_gap = 100, scale_items_gap = 10, hide_wheel_items = false, scale_number = 0.75, rotate_number = 25, translateY_number = 80, transition_duration = 500, } = options;
+    const cloneCount = React.useMemo(() => {
+        if (cloneNumber !== undefined)
+            return cloneNumber;
+        return variant === "scale" ? 6 : 3;
+    }, [variant, cloneNumber]);
+    const extractItems = React.useCallback(() => {
+        if (!zoneRef.current)
+            return [];
+        const zone = zoneRef.current;
+        const sections = Array.from(zone.querySelectorAll("section:not([data-hidden], [hidden], [style*='display: none'])"));
+        return sections;
+    }, []);
+    React.useEffect(() => {
+        if (cmsMode)
+            return;
+        const foundItems = extractItems();
+        if (foundItems.length > 0) {
+            setItems(foundItems);
+            setCurrentIndex(cloneCount);
+            if (!itemWidth.current && !itemHeight.current) {
+                itemWidth.current = foundItems[0].offsetWidth;
+                itemHeight.current = foundItems[0].offsetHeight;
+            }
+        }
+    }, [extractItems, cmsMode, cloneCount]);
+    React.useEffect(() => {
+        if (!zoneRef.current || cmsMode)
+            return;
+        const observer = new MutationObserver(() => {
+            const foundItems = extractItems();
+            if (foundItems.length > 0 && items.length === 0) {
+                setItems(foundItems);
+            }
+        });
+        observer.observe(zoneRef.current, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => observer.disconnect();
+    }, [extractItems, items, cmsMode]);
+    const infiniteItems = React.useMemo(() => {
+        if (items.length === 0)
+            return [];
+        const createClone = (element) => {
+            const clone = element.cloneNode(true);
+            clone.setAttribute("aria-hidden", "true");
+            clone.removeAttribute("id");
+            clone.querySelectorAll("[id]").forEach((el) => {
+                el.removeAttribute("id");
+            });
+            return clone;
+        };
+        const beforeClones = [];
+        const afterClones = [];
+        for (let i = 0; i < cloneCount; i++) {
+            const itemIndex = (items.length - cloneCount + i + items.length) % items.length;
+            beforeClones.push(createClone(items[itemIndex]));
+        }
+        for (let i = 0; i < cloneCount; i++) {
+            const itemIndex = i % items.length;
+            afterClones.push(createClone(items[itemIndex]));
+        }
+        return [...beforeClones, ...items, ...afterClones];
+    }, [items, cloneCount]);
+    const slideTo = (direction) => {
+        if (isTransitioning || items.length === 0)
+            return;
+        setIsTransitioning(true);
+        setCurrentIndex((prev) => {
+            if (direction === "next") {
+                return prev + 1;
+            }
+            else {
+                return prev - 1;
+            }
+        });
+    };
+    React.useEffect(() => {
+        if (!isTransitioning)
+            return;
+        const timer = setTimeout(() => {
+            setIsTransitioning(false);
+            if (currentIndex === items.length + cloneCount) {
+                setCurrentIndex(cloneCount);
+            }
+            else if (currentIndex < cloneCount) {
+                setCurrentIndex(items.length + cloneCount - 1);
+            }
+        }, transition_duration);
+        return () => clearTimeout(timer);
+    }, [
+        isTransitioning,
+        currentIndex,
+        items.length,
+        cloneCount,
+        transition_duration,
+    ]);
+    const getItemStyle = (index) => {
+        const offset = index - currentIndex;
+        const absOffset = Math.abs(offset);
+        const width = itemWidth.current;
+        if (variant === "wheel") {
+            let rotate = 0;
+            let translateX = 0;
+            let translateY = 0;
+            let opacity = 1;
+            const gap = wheel_items_gap;
+            if (offset === 0) {
+                translateX = 0;
+                translateY = 0;
+            }
+            else {
+                rotate = rotate_number * offset;
+                translateX = (width + gap) * offset;
+                translateY = translateY_number * (absOffset * absOffset);
+                const condition = hide_wheel_items ? absOffset >= 2 : absOffset >= 3;
+                if (condition) {
+                    opacity = 0;
+                }
+            }
+            return {
+                transform: `translateX(${translateX}px) translateY(${translateY}px) rotate(${rotate}deg)`,
+                opacity,
+                transition: isTransitioning
+                    ? `all ${transition_duration}ms cubic-bezier(0.4, 0.0, 0.2, 1)`
+                    : "none",
+            };
+        }
+        else {
+            let scale = scale_number;
+            let opacity = 1;
+            let translateX = 0;
+            const gap = scale_items_gap;
+            if (offset === 0) {
+                translateX = 0;
+                scale = 1;
+            }
+            else if (absOffset === 1) {
+                translateX = offset * (width + gap - (width - width * scale) / 2);
+            }
+            else {
+                const sign = offset > 0 ? 1 : -1;
+                translateX = sign * (width + gap - (width - width * scale) / 2);
+                for (let i = 2; i <= absOffset; i++) {
+                    translateX += sign * (width * scale + gap);
+                }
+            }
+            return {
+                transform: `translateX(${translateX}px) scale(${scale})`,
+                opacity,
+                transition: isTransitioning
+                    ? `all ${transition_duration}ms cubic-bezier(0.4, 0.0, 0.2, 1)`
+                    : "none",
+            };
+        }
+    };
+    const classes = classNames(css.carousel, css[`carousel--${variant}`], className);
+    if (items.length === 0 || cmsMode) {
+        return (_jsx("div", { className: classes, children: _jsx("div", { className: css.inner, children: React.cloneElement(children, {
+                    ref: zoneRef,
+                }) }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes, style: {
+                    "--carousel-item-width": `${itemWidth.current}px`,
+                    "--carousel-item-height": `${itemHeight.current}px`,
+                }, children: [_jsxs("div", { className: css.controls, children: [_jsx(Button, { className: css.control, variant: "link", onClick: () => slideTo("prev"), "data-control": "prev", children: _jsx(ChevronLeftIcon, { className: css.controlIcon }) }), _jsx(Button, { className: css.control, variant: "link", onClick: () => slideTo("next"), "data-control": "next", children: _jsx(ChevronRightIcon, { className: css.controlIcon }) })] }), _jsx("div", { className: css.viewport, children: _jsx("div", { className: css.track, children: infiniteItems.map((item, index) => (_jsx("div", { className: css.item, style: getItemStyle(index), dangerouslySetInnerHTML: { __html: item.outerHTML } }, `item-${index}`))) }) }), _jsx("div", { style: { display: "none" }, children: React.cloneElement(children, {
+                            ref: zoneRef,
+                        }) })] }), _jsx(ScrollbarSize, {})] }));
+}

package/es/common/components/infinite-carousel/infinite-carousel.module.css

@@ -0,0 +1,173 @@
+.carousel {
+  --carousel-width: var(--content-width);
+  --carousel-padding-top: 60px;
+  --carousel-button-width: 48px;
+  --carousel-button-background: hsl(0, 0%, 100%);
+  --carousel-button-hover-background: hsl(0, 0%, 100%);
+  --carousel-left-button-glow: transparent;
+  --carousel-right-button-glow: transparent;
+  --carousel-button-radius: 50%;
+  --carousel-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --carousel-button-icon-size: 16px;
+  --carousel-button-icon-color: #081527;
+  --carousel-before-background: transparent;
+  --carousel-after-background: transparent;
+
+  position: relative;
+  display: flex;
+  justify-content: center;
+  /* 2px viennent des pseudo-elements after des boutons de control */
+  width: calc(100vw - var(--scrollbar-size) - 2px);
+  max-width: var(--carousel-width);
+  margin: 0 auto;
+  padding-top: var(--carousel-padding-top);
+}
+
+.carousel--wheel {
+  --carousel-height: calc(var(--carousel-item-height) + 150px);
+}
+
+.carousel--scale {
+  --carousel-height: calc(var(--carousel-item-height) + 100px);
+}
+
+/* ----- FALLBACK : Cas où il n'y a pas de logique de carousel ----- */
+
+.inner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: var(--content-width);
+  overflow-x: auto;
+}
+/* ---------- */
+
+.controls {
+  position: absolute;
+  top: var(--carousel-item-height);
+  left: 0;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.carousel--wheel .controls {
+  /* boutons au milieu de l'item central (item height / 2 - paddingtop carousel) */
+  top: calc((var(--carousel-item-height) + var(--carousel-padding-top)) / 2);
+  left: auto;
+  /* largeur de la taille de l'item + des boutons + petit écart */
+  width: calc(
+    var(--carousel-item-width) + (var(--carousel-button-width) * 2) + 20px
+  );
+  transform: none;
+}
+
+.control {
+  --ds-button-background: var(--carousel-button-background);
+  --ds-button-hover-background: var(--carousel-button-hover-background);
+  --ds-button-radius: var(--carousel-button-radius);
+  --ds-button-border: var(--carousel-button-border);
+  --ds-button-shadow: var(--carousel-button-shadow);
+
+  pointer-events: auto;
+  width: var(--carousel-button-width);
+  height: var(--carousel-button-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 240ms var(--transition-easing);
+}
+
+.control::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: -1px;
+  height: 100%;
+  width: 100%;
+  background-image: var(--carousel-left-button-glow);
+  border-radius: var(--carousel-button-radius);
+  z-index: -1;
+}
+
+.control + .control::after {
+  left: auto;
+  right: -1px;
+  background-image: var(--carousel-right-button-glow);
+  z-index: -1;
+}
+
+.controlIcon {
+  --size: var(--carousel-button-icon-size);
+
+  fill: var(--carousel-button-icon-color);
+}
+
+.viewport {
+  position: relative;
+  min-width: calc(100vw - var(--scrollbar-size));
+  height: 100%;
+  min-height: var(--carousel-height);
+  overflow: hidden;
+}
+
+.carousel--scale .viewport::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--carousel-item-width);
+  background: var(--carousel-before-background);
+  z-index: 1;
+}
+
+.carousel--scale .viewport::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--carousel-item-width);
+  background: var(--carousel-after-background);
+  z-index: 1;
+}
+
+.track {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  will-change: transform, opacity;
+  pointer-events: auto;
+}
+
+.carousel--wheel .item {
+  max-width: 90vw;
+}
+
+.carousel--scale .item {
+  max-width: 85vw;
+  transform-origin: top center;
+}
+
+/* CMS */
+[data-cms-mode="true"] .carousel {
+  pointer-events: none;
+}
+
+[data-cms-mode="true"] .controls {
+  display: none;
+}

package/es/esf/components/instructors-book/book.js

@@ -14,7 +14,7 @@ export default function Book({ instructors, trombi }) {
     const [language, setLanguage] = React.useState("");
     const [search, setSearch] = React.useState("");
     const [loading, setLoading] = React.useState(false);
-    const isTrombi = trombi || !Object.keys(prefixes).includes(lang);
+    const isTrombi = !Object.keys(prefixes).includes(lang) || trombi;
     const refreshContext = React.useCallback(async () => {
         try {
             setLoading(true);

package/es/esf/components/instructors-book/instructor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instructor.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/instructors-book/instructor.js"],"names":[],"mappings":"AAYA;;;;;;4CAyFC"}
+{"version":3,"file":"instructor.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/instructors-book/instructor.js"],"names":[],"mappings":"AAYA;;;;;;4CA2FC"}

package/es/esf/components/instructors-book/instructor.js

@@ -16,6 +16,7 @@ export default function Instructor({ instructor, formFields, formSendFunction, t
     const [loading, setLoading] = React.useState(true);
     const [picture, setPicture] = React.useState(photo);
     const [popupOpened, setPopupOpened] = React.useState(false);
+    const prefixLang = lang === "fr" ? "fr" : "en";
     const openPopup = async (e) => {
         if (!popup)
             return;
@@ -28,7 +29,7 @@ export default function Instructor({ instructor, formFields, formSendFunction, t
     const Tag = trombi ? "div" : Link;
     const divProps = {};
     const linkProps = {
-        href: `${prefixes[lang]}/${uri}`,
+        href: `${prefixes[prefixLang]}/${uri}`,
         onClick: openPopup,
     };
     const props = trombi ? divProps : linkProps;

package/es/esf/components/instructors-book/prefixes.d.ts

@@ -2,6 +2,5 @@ export default prefixes;
 declare namespace prefixes {
     let fr: string;
     let en: string;
-    let nl: string;
 }
 //# sourceMappingURL=prefixes.d.ts.map

package/es/esf/components/instructors-book/prefixes.js

@@ -1,6 +1,5 @@
 const prefixes = {
     fr: "/moniteur",
     en: "/instructor",
-    nl: "/instructeur",
 };
 export default prefixes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.47.81",
+  "version": "1.47.84",
   "peerDependencies": {
     "classnames": "^2.5.1",
     "dt-design-system": "^3.12.0",