@anoki/fse-ui 2.3.0-RC22 → 2.3.0-RC23

package/dist/index.es267.js

@@ -1,5 +1,5 @@
 import { j as C } from "./index.es278.js";
-import { createColorClasses as a } from "./index.es352.js";
+import { createColorClasses as a } from "./index.es313.js";
 import { clsx as p } from "./index.es280.js";
 const x = ({
   width: e = 24,

package/dist/index.es270.js

@@ -1,14 +1,14 @@
 import { j as t } from "./index.es278.js";
-import { ArrowDown as V } from "./index.es19.js";
-import { RichText as S } from "./index.es218.js";
+import { ArrowDown as G } from "./index.es19.js";
+import { RichText as U } from "./index.es218.js";
 import { clsx as n } from "./index.es280.js";
-import { useState as p, useRef as G } from "react";
+import { useState as m, useRef as B } from "react";
 import './components/ui/VideoPlayer/VideoPlayer.css';/* empty css            */
 import { VIDEO_PLAYER_SIZE as e } from "./index.es268.js";
-import U from "./index.es508.js";
-import { Col as B } from "./index.es82.js";
-import { PlayVideo as F } from "./index.es210.js";
-const O = {
+import F from "./index.es508.js";
+import { Col as O } from "./index.es82.js";
+import { PlayVideo as X } from "./index.es210.js";
+const $ = {
   [e.SMALL]: {
     width: "311px"
   },
@@ -27,7 +27,7 @@ const O = {
   [e.VERTICAL]: {
     width: "360px"
   }
-}, E = {
+}, L = {
   [e.SMALL]: {
     heightImg: "170px"
   },
@@ -46,44 +46,44 @@ const O = {
   [e.FULL_WIDTH]: {
     heightImg: "525px"
   }
-}, tt = ({
-  btnText: L = "Trascrizione",
+}, nt = ({
+  btnText: E = "Trascrizione",
   sizeComp: o = e.LARGE,
-  transcription: m,
-  previewImageSrc: u,
-  videoSrc: g,
-  videoTitle: f,
+  transcription: u,
+  previewImageSrc: g,
+  videoSrc: f,
+  videoTitle: b,
   videoLang: y,
   playButtonLabel: R = "Riproduci",
   videoAriaLabel: A = "Video player",
   showDivider: N = !0
 }) => {
-  const [b, P] = p(!1), [s, T] = p(!1), [r, W] = p(!1), v = G(null), w = U(), { width: l } = O[o];
-  let a, d;
-  if (l.includes("%"))
-    a = l, d = E[o].heightImg;
+  const [v, S] = m(!1), [s, W] = m(!1), [a, M] = m(!1), w = B(null), l = F(), { width: d } = $[o];
+  let r, h;
+  if (d.includes("%"))
+    r = d, h = L[o].heightImg;
   else {
-    const i = parseInt(l, 10), x = parseInt(E[o].heightImg, 10) / i, I = w ? Math.min(i, w) : i, M = Math.round(I * x);
-    a = `${I}px`, d = `${M}px`;
+    const i = parseInt(d, 10), p = parseInt(L[o].heightImg, 10) / i, H = o === e.SMALL || o === e.MEDIUM ? 32 : 0, _ = l ? l - H : i, j = l ? Math.min(i, _) : i, V = Math.round(j * p);
+    r = `${j}px`, h = `${V}px`;
   }
-  const c = o === e.VERTICAL, k = o === e.EXTRA_LARGE || o === e.FULL_WIDTH, j = c ? "642px" : a, H = c ? "640px" : d, _ = c ? "360px" : a, D = async (i) => {
+  const c = o === e.VERTICAL, P = o === e.EXTRA_LARGE || o === e.FULL_WIDTH, I = c ? "642px" : r, T = c ? "640px" : h, k = c ? "360px" : r, D = async (i) => {
     i && (i.preventDefault(), i.stopPropagation());
-    const h = v.current;
-    if (!h) {
+    const x = w.current;
+    if (!x) {
       console.error("no video element found");
       return;
     }
     try {
-      s || (T(!0), P(!0), await h.play());
-    } catch (x) {
-      console.error("Error controlling video:", x);
+      s || (W(!0), S(!0), await x.play());
+    } catch (p) {
+      console.error("Error controlling video:", p);
     }
   };
   return /* @__PURE__ */ t.jsxs(
-    B,
+    O,
     {
       br: "x4",
-      style: { width: j },
+      style: { width: I },
       className: n("video-section-container"),
       children: [
         /* @__PURE__ */ t.jsxs(
@@ -91,8 +91,8 @@ const O = {
           {
             className: "video-player-container",
             style: {
-              height: H,
-              width: _,
+              height: T,
+              width: k,
               ...c && { alignSelf: "center" }
             },
             children: [
@@ -100,16 +100,16 @@ const O = {
                 "button",
                 {
                   className: n("start-video-container", {
-                    "fade-out": b || s
+                    "fade-out": v || s
                   }),
                   style: {
-                    backgroundImage: u && !s ? `url("${u}")` : "none",
+                    backgroundImage: g && !s ? `url("${g}")` : "none",
                     display: s ? "none" : "block"
                   },
                   onClick: (i) => D(i),
                   type: "button",
-                  children: /* @__PURE__ */ t.jsxs("div", { className: n("play-button-container", { hidden: b }), children: [
-                    /* @__PURE__ */ t.jsx("div", { className: "play-button-icon", children: /* @__PURE__ */ t.jsx(F, { decorative: !0 }) }),
+                  children: /* @__PURE__ */ t.jsxs("div", { className: n("play-button-container", { hidden: v }), children: [
+                    /* @__PURE__ */ t.jsx("div", { className: "play-button-icon", children: /* @__PURE__ */ t.jsx(X, { decorative: !0 }) }),
                     /* @__PURE__ */ t.jsx("div", { className: "play-button-text", children: R })
                   ] })
                 }
@@ -117,13 +117,13 @@ const O = {
               /* @__PURE__ */ t.jsx("div", { className: "video-container", children: /* @__PURE__ */ t.jsxs(
                 "video",
                 {
-                  ref: v,
+                  ref: w,
                   controls: !0,
-                  src: g || void 0,
+                  src: f || void 0,
                   "aria-label": A,
-                  title: f || void 0,
+                  title: b || void 0,
                   children: [
-                    /* @__PURE__ */ t.jsx("source", { src: g || void 0 }),
+                    /* @__PURE__ */ t.jsx("source", { src: f || void 0 }),
                     y && /* @__PURE__ */ t.jsx("track", { kind: "subtitles", src: "subtitles_en.vtt", srcLang: y === "italiano" ? "it" : "en" }),
                     " "
                   ]
@@ -132,14 +132,14 @@ const O = {
             ]
           }
         ),
-        m && /* @__PURE__ */ t.jsxs(
+        u && /* @__PURE__ */ t.jsxs(
           "div",
           {
             className: n(
-              k ? "transcription-container" : "ui-has-border-bottom",
+              P ? "transcription-container" : "ui-has-border-bottom",
               !N && "ui-video-no-divider"
             ),
-            style: { width: j },
+            style: { width: I },
             children: [
               /* @__PURE__ */ t.jsx(
                 "div",
@@ -157,8 +157,8 @@ const O = {
                         "base-row justify-content-between align-items-center"
                       ),
                       type: "button",
-                      onClick: () => W(!r),
-                      "aria-expanded": r,
+                      onClick: () => M(!a),
+                      "aria-expanded": a,
                       "aria-controls": "transcription-content",
                       children: [
                         /* @__PURE__ */ t.jsx(
@@ -167,14 +167,14 @@ const O = {
                             className: n(
                               "fw-semibold text-primary base-col justify-content-center fs-custom text-decoration-underline"
                             ),
-                            children: L
+                            children: E
                           }
                         ),
                         /* @__PURE__ */ t.jsx(
-                          V,
+                          G,
                           {
                             color: "primary",
-                            className: n("ui-arrow", { expanded: r }),
+                            className: n("ui-arrow", { expanded: a }),
                             decorative: !0
                           }
                         )
@@ -183,7 +183,7 @@ const O = {
                   )
                 }
               ),
-              r && /* @__PURE__ */ t.jsx(
+              a && /* @__PURE__ */ t.jsx(
                 "div",
                 {
                   id: "transcription-content",
@@ -192,11 +192,11 @@ const O = {
                     "pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black"
                   ),
                   children: /* @__PURE__ */ t.jsx(
-                    S,
+                    U,
                     {
                       additionalClass: "text-black text-charcoal-dust rich-text-element",
                       classNameTitle: "heading-2-lg fw-extra-bold text-black text-charcoal-dust",
-                      description: m
+                      description: u
                     }
                   )
                 }
@@ -210,6 +210,6 @@ const O = {
 };
 export {
   e as VIDEO_PLAYER_SIZE,
-  tt as VideoPlayer
+  nt as VideoPlayer
 };
 //# sourceMappingURL=index.es270.js.map

package/dist/index.es270.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es270.js","sources":["../src/components/ui/VideoPlayer/index.tsx"],"sourcesContent":["import { Col } from \"@/components\";\nimport { PlayVideo } from \"@/icons\";\nimport { ArrowDown } from \"@/icons/ArrowDown\";\nimport { RichText } from \"@/sections/RichText\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport \"./VideoPlayer.scss\";\nimport type { VideoPlayerProps } from \"./VideoPlayer.types\";\nimport { VIDEO_PLAYER_SIZE } from \"./VideoPlayer.types\";\nimport useWindowWidth from \"@/hooks/useWindowWidth\";\n\nconst sizeStyles = {\n  [VIDEO_PLAYER_SIZE.SMALL]: {\n    width: \"311px\",\n  },\n  [VIDEO_PLAYER_SIZE.MEDIUM]: {\n    width: \"388px\",\n  },\n  [VIDEO_PLAYER_SIZE.LARGE]: {\n    width: \"642px\",\n  },\n  [VIDEO_PLAYER_SIZE.EXTRA_LARGE]: {\n    width: \"992px\",\n  },\n  [VIDEO_PLAYER_SIZE.FULL_WIDTH]: {\n    width: \"100%\",\n  },\n  [VIDEO_PLAYER_SIZE.VERTICAL]: {\n    width: \"360px\",\n  },\n};\n\nconst imgSize = {\n  [VIDEO_PLAYER_SIZE.SMALL]: {\n    heightImg: \"170px\",\n  },\n  [VIDEO_PLAYER_SIZE.MEDIUM]: {\n    heightImg: \"183px\",\n  },\n  [VIDEO_PLAYER_SIZE.LARGE]: {\n    heightImg: \"357px\",\n  },\n  [VIDEO_PLAYER_SIZE.EXTRA_LARGE]: {\n    heightImg: \"400px\",\n  },\n  [VIDEO_PLAYER_SIZE.VERTICAL]: {\n    heightImg: \"640px\",\n  },\n  [VIDEO_PLAYER_SIZE.FULL_WIDTH]: {\n    heightImg: \"525px\",\n  },\n};\n\nexport const VideoPlayer = ({\n  btnText = \"Trascrizione\",\n  sizeComp = VIDEO_PLAYER_SIZE.LARGE,\n  transcription,\n  previewImageSrc,\n  videoSrc,\n  videoTitle,\n  videoLang,\n  playButtonLabel = \"Riproduci\",\n  videoAriaLabel = \"Video player\",\n  showDivider = true,\n}: VideoPlayerProps) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [hasPlayedOnce, setHasPlayedOnce] = useState(false);\n\n  const [isExpanded, setExpanded] = useState(false);\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const windowWidth = useWindowWidth();\n\n  const { width: componentBaseWidthString } = sizeStyles[sizeComp];\n\n  let width;\n  let calculatedHeight;\n\n  if (componentBaseWidthString.includes(\"%\")) {\n    width = componentBaseWidthString;\n\n    calculatedHeight = imgSize[sizeComp].heightImg;\n  } else {\n    const componentBaseWidth = parseInt(componentBaseWidthString, 10);\n    const componentBaseHeight = parseInt(imgSize[sizeComp].heightImg, 10);\n\n    const aspectRatio = componentBaseHeight / componentBaseWidth;\n\n    const finalWidthInPx = windowWidth\n      ? Math.min(componentBaseWidth, windowWidth)\n      : componentBaseWidth;\n\n    const finalHeightInPx = Math.round(finalWidthInPx * aspectRatio);\n\n    width = `${finalWidthInPx}px`;\n    calculatedHeight = `${finalHeightInPx}px`;\n  }\n\n  const isVertical = sizeComp === VIDEO_PLAYER_SIZE.VERTICAL;\n  const isLargeSize =\n    sizeComp === VIDEO_PLAYER_SIZE.EXTRA_LARGE ||\n    sizeComp === VIDEO_PLAYER_SIZE.FULL_WIDTH;\n\n  const containerWidth = isVertical ? \"642px\" : width;\n  const videoHeight = isVertical ? \"640px\" : calculatedHeight;\n  const videoWidth = isVertical ? \"360px\" : width;\n\n  const handlePlay = async (e?: React.MouseEvent) => {\n    if (e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n\n    const video = videoRef.current;\n\n    if (!video) {\n      console.error(\"no video element found\");\n      return;\n    }\n\n    try {\n      if (!hasPlayedOnce) {\n        setHasPlayedOnce(true);\n        setIsPlaying(true);\n        await video.play();\n      }\n    } catch (error) {\n      console.error(\"Error controlling video:\", error);\n    }\n  };\n\n  return (\n    <Col\n      br={\"x4\"}\n      style={{ width: containerWidth }}\n      className={clsx(\"video-section-container\")}\n    >\n      <div\n        className=\"video-player-container\"\n        style={{\n          height: videoHeight,\n          width: videoWidth,\n          ...(isVertical && { alignSelf: \"center\" }),\n        }}\n      >\n        <button\n          className={clsx(\"start-video-container\", {\n            \"fade-out\": isPlaying || hasPlayedOnce,\n          })}\n          style={{\n            backgroundImage:\n              previewImageSrc && !hasPlayedOnce\n                ? `url(\"${previewImageSrc}\")`\n                : \"none\",\n            display: hasPlayedOnce ? \"none\" : \"block\",\n          }}\n          onClick={(e) => handlePlay(e)}\n          type=\"button\"\n        >\n          <div className={clsx(\"play-button-container\", { hidden: isPlaying })}>\n            <div className=\"play-button-icon\">\n              <PlayVideo decorative />\n            </div>\n            <div className=\"play-button-text\">{playButtonLabel}</div>\n          </div>\n        </button>\n        <div className=\"video-container\">\n          <video\n            ref={videoRef}\n            controls\n            src={videoSrc || undefined}\n            aria-label={videoAriaLabel}\n            title={videoTitle ? videoTitle : undefined}\n          >\n            <source src={videoSrc || undefined} />\n            {videoLang  && (\n              <track kind=\"subtitles\" src=\"subtitles_en.vtt\" srcLang={videoLang === 'italiano' ? \"it\" : \"en\"} />\n            )} {/* da integrare con file VTT :  www.w3schools.com/TAGS/att_srclang.asp */}\n          </video>\n        </div>\n      </div>\n\n      {transcription && (\n        <div\n          className={clsx(\n            isLargeSize ? \"transcription-container\" : \"ui-has-border-bottom\",\n            !showDivider && \"ui-video-no-divider\",\n          )}\n          style={{ width: containerWidth }}\n        >\n          <div\n            className={clsx(\n              \"expand-button-container\",\n              \"accordion\",\n              \"base-row justify-content-between align-items-center\",\n            )}\n          >\n            <button\n              className={clsx(\n                \"ui-btn-accordion-video\",\n                \"base-row justify-content-between align-items-center\",\n              )}\n              type=\"button\"\n              onClick={() => setExpanded(!isExpanded)}\n              aria-expanded={isExpanded}\n              aria-controls=\"transcription-content\"\n            >\n              <span\n                className={clsx(\n                  \"fw-semibold text-primary base-col justify-content-center fs-custom text-decoration-underline\",\n                )}\n              >\n                {btnText}\n              </span>\n              <ArrowDown\n                color={\"primary\"}\n                className={clsx(\"ui-arrow\", { expanded: isExpanded })}\n                decorative\n              />\n            </button>\n          </div>\n          {isExpanded && (\n            <div\n              id=\"transcription-content\"\n              className={clsx(\n                \"transcription-text-container\",\n                \"pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black\",\n              )}\n            >\n              <RichText\n                additionalClass=\"text-black text-charcoal-dust rich-text-element\"\n                classNameTitle=\"heading-2-lg fw-extra-bold text-black text-charcoal-dust\"\n                description={transcription}\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </Col>\n  );\n};\n\nexport { VIDEO_PLAYER_SIZE };\nexport type { VideoPlayerProps };\n"],"names":["sizeStyles","VIDEO_PLAYER_SIZE","imgSize","VideoPlayer","btnText","sizeComp","transcription","previewImageSrc","videoSrc","videoTitle","videoLang","playButtonLabel","videoAriaLabel","showDivider","isPlaying","setIsPlaying","useState","hasPlayedOnce","setHasPlayedOnce","isExpanded","setExpanded","videoRef","useRef","windowWidth","useWindowWidth","componentBaseWidthString","width","calculatedHeight","componentBaseWidth","aspectRatio","finalWidthInPx","finalHeightInPx","isVertical","isLargeSize","containerWidth","videoHeight","videoWidth","handlePlay","e","video","error","jsxs","Col","clsx","jsx","PlayVideo","ArrowDown","RichText"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAa;AAAA,EACjB,CAACC,EAAkB,KAAK,GAAG;AAAA,IACzB,OAAO;AAAA,EAAA;AAAA,EAET,CAACA,EAAkB,MAAM,GAAG;AAAA,IAC1B,OAAO;AAAA,EAAA;AAAA,EAET,CAACA,EAAkB,KAAK,GAAG;AAAA,IACzB,OAAO;AAAA,EAAA;AAAA,EAET,CAACA,EAAkB,WAAW,GAAG;AAAA,IAC/B,OAAO;AAAA,EAAA;AAAA,EAET,CAACA,EAAkB,UAAU,GAAG;AAAA,IAC9B,OAAO;AAAA,EAAA;AAAA,EAET,CAACA,EAAkB,QAAQ,GAAG;AAAA,IAC5B,OAAO;AAAA,EAAA;AAEX,GAEMC,IAAU;AAAA,EACd,CAACD,EAAkB,KAAK,GAAG;AAAA,IACzB,WAAW;AAAA,EAAA;AAAA,EAEb,CAACA,EAAkB,MAAM,GAAG;AAAA,IAC1B,WAAW;AAAA,EAAA;AAAA,EAEb,CAACA,EAAkB,KAAK,GAAG;AAAA,IACzB,WAAW;AAAA,EAAA;AAAA,EAEb,CAACA,EAAkB,WAAW,GAAG;AAAA,IAC/B,WAAW;AAAA,EAAA;AAAA,EAEb,CAACA,EAAkB,QAAQ,GAAG;AAAA,IAC5B,WAAW;AAAA,EAAA;AAAA,EAEb,CAACA,EAAkB,UAAU,GAAG;AAAA,IAC9B,WAAW;AAAA,EAAA;AAEf,GAEaE,KAAc,CAAC;AAAA,EAC1B,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAWJ,EAAkB;AAAA,EAC7B,eAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC,IAAiB;AAAA,EACjB,aAAAC,IAAc;AAChB,MAAwB;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAeC,CAAgB,IAAIF,EAAS,EAAK,GAElD,CAACG,GAAYC,CAAW,IAAIJ,EAAS,EAAK,GAC1CK,IAAWC,EAAyB,IAAI,GAExCC,IAAcC,EAAA,GAEd,EAAE,OAAOC,MAA6BzB,EAAWK,CAAQ;AAE/D,MAAIqB,GACAC;AAEJ,MAAIF,EAAyB,SAAS,GAAG;AACvC,IAAAC,IAAQD,GAERE,IAAmBzB,EAAQG,CAAQ,EAAE;AAAA,OAChC;AACL,UAAMuB,IAAqB,SAASH,GAA0B,EAAE,GAG1DI,IAFsB,SAAS3B,EAAQG,CAAQ,EAAE,WAAW,EAAE,IAE1BuB,GAEpCE,IAAiBP,IACnB,KAAK,IAAIK,GAAoBL,CAAW,IACxCK,GAEEG,IAAkB,KAAK,MAAMD,IAAiBD,CAAW;AAE/D,IAAAH,IAAQ,GAAGI,CAAc,MACzBH,IAAmB,GAAGI,CAAe;AAAA,EACvC;AAEA,QAAMC,IAAa3B,MAAaJ,EAAkB,UAC5CgC,IACJ5B,MAAaJ,EAAkB,eAC/BI,MAAaJ,EAAkB,YAE3BiC,IAAiBF,IAAa,UAAUN,GACxCS,IAAcH,IAAa,UAAUL,GACrCS,IAAaJ,IAAa,UAAUN,GAEpCW,IAAa,OAAOC,MAAyB;AACjD,IAAIA,MACFA,EAAE,eAAA,GACFA,EAAE,gBAAA;AAGJ,UAAMC,IAAQlB,EAAS;AAEvB,QAAI,CAACkB,GAAO;AACV,cAAQ,MAAM,wBAAwB;AACtC;AAAA,IACF;AAEA,QAAI;AACF,MAAKtB,MACHC,EAAiB,EAAI,GACrBH,EAAa,EAAI,GACjB,MAAMwB,EAAM,KAAA;AAAA,IAEhB,SAASC,GAAO;AACd,cAAQ,MAAM,4BAA4BA,CAAK;AAAA,IACjD;AAAA,EACF;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,OAAO,EAAE,OAAOR,EAAA;AAAA,MAChB,WAAWS,EAAK,yBAAyB;AAAA,MAEzC,UAAA;AAAA,QAAAF,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,QAAQN;AAAA,cACR,OAAOC;AAAA,cACP,GAAIJ,KAAc,EAAE,WAAW,SAAA;AAAA,YAAS;AAAA,YAG1C,UAAA;AAAA,cAAAY,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,EAAK,yBAAyB;AAAA,oBACvC,YAAY7B,KAAaG;AAAA,kBAAA,CAC1B;AAAA,kBACD,OAAO;AAAA,oBACL,iBACEV,KAAmB,CAACU,IAChB,QAAQV,CAAe,OACvB;AAAA,oBACN,SAASU,IAAgB,SAAS;AAAA,kBAAA;AAAA,kBAEpC,SAAS,CAACqB,MAAMD,EAAWC,CAAC;AAAA,kBAC5B,MAAK;AAAA,kBAEL,UAAAG,gBAAAA,EAAAA,KAAC,SAAI,WAAWE,EAAK,yBAAyB,EAAE,QAAQ7B,EAAA,CAAW,GACjE,UAAA;AAAA,oBAAA8B,gBAAAA,EAAAA,IAAC,SAAI,WAAU,oBACb,gCAACC,GAAA,EAAU,YAAU,IAAC,EAAA,CACxB;AAAA,oBACAD,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAjC,EAAA,CAAgB;AAAA,kBAAA,EAAA,CACrD;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEFiC,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,mBACb,UAAAH,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAKpB;AAAA,kBACL,UAAQ;AAAA,kBACR,KAAKb,KAAY;AAAA,kBACjB,cAAYI;AAAA,kBACZ,OAAOH,KAA0B;AAAA,kBAEjC,UAAA;AAAA,oBAAAmC,gBAAAA,EAAAA,IAAC,UAAA,EAAO,KAAKpC,KAAY,OAAA,CAAW;AAAA,oBACnCE,KACCkC,gBAAAA,EAAAA,IAAC,SAAA,EAAM,MAAK,aAAY,KAAI,oBAAmB,SAASlC,MAAc,aAAa,OAAO,KAAA,CAAM;AAAA,oBAChG;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA,EACJ,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGDJ,KACCmC,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTV,IAAc,4BAA4B;AAAA,cAC1C,CAACpB,KAAe;AAAA,YAAA;AAAA,YAElB,OAAO,EAAE,OAAOqB,EAAA;AAAA,YAEhB,UAAA;AAAA,cAAAU,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAGF,UAAAF,gBAAAA,EAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWE;AAAA,wBACT;AAAA,wBACA;AAAA,sBAAA;AAAA,sBAEF,MAAK;AAAA,sBACL,SAAS,MAAMvB,EAAY,CAACD,CAAU;AAAA,sBACtC,iBAAeA;AAAA,sBACf,iBAAc;AAAA,sBAEd,UAAA;AAAA,wBAAAyB,gBAAAA,EAAAA;AAAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAWD;AAAA,8BACT;AAAA,4BAAA;AAAA,4BAGD,UAAAvC;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAEHwC,gBAAAA,EAAAA;AAAAA,0BAACE;AAAA,0BAAA;AAAA,4BACC,OAAO;AAAA,4BACP,WAAWH,EAAK,YAAY,EAAE,UAAUxB,GAAY;AAAA,4BACpD,YAAU;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACZ;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,cAEDA,KACCyB,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAG;AAAA,kBACH,WAAWD;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAGF,UAAAC,gBAAAA,EAAAA;AAAAA,oBAACG;AAAA,oBAAA;AAAA,sBACC,iBAAgB;AAAA,sBAChB,gBAAe;AAAA,sBACf,aAAazC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACf;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index.es270.js","sources":["../src/components/ui/VideoPlayer/index.tsx"],"sourcesContent":["import { Col } from \"@/components\";\nimport { PlayVideo } from \"@/icons\";\nimport { ArrowDown } from \"@/icons/ArrowDown\";\nimport { RichText } from \"@/sections/RichText\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport \"./VideoPlayer.scss\";\nimport type { VideoPlayerProps } from \"./VideoPlayer.types\";\nimport { VIDEO_PLAYER_SIZE } from \"./VideoPlayer.types\";\nimport useWindowWidth from \"@/hooks/useWindowWidth\";\n\nconst sizeStyles = {\n  [VIDEO_PLAYER_SIZE.SMALL]: {\n    width: \"311px\",\n  },\n  [VIDEO_PLAYER_SIZE.MEDIUM]: {\n    width: \"388px\",\n  },\n  [VIDEO_PLAYER_SIZE.LARGE]: {\n    width: \"642px\",\n  },\n  [VIDEO_PLAYER_SIZE.EXTRA_LARGE]: {\n    width: \"992px\",\n  },\n  [VIDEO_PLAYER_SIZE.FULL_WIDTH]: {\n    width: \"100%\",\n  },\n  [VIDEO_PLAYER_SIZE.VERTICAL]: {\n    width: \"360px\",\n  },\n};\n\nconst imgSize = {\n  [VIDEO_PLAYER_SIZE.SMALL]: {\n    heightImg: \"170px\",\n  },\n  [VIDEO_PLAYER_SIZE.MEDIUM]: {\n    heightImg: \"183px\",\n  },\n  [VIDEO_PLAYER_SIZE.LARGE]: {\n    heightImg: \"357px\",\n  },\n  [VIDEO_PLAYER_SIZE.EXTRA_LARGE]: {\n    heightImg: \"400px\",\n  },\n  [VIDEO_PLAYER_SIZE.VERTICAL]: {\n    heightImg: \"640px\",\n  },\n  [VIDEO_PLAYER_SIZE.FULL_WIDTH]: {\n    heightImg: \"525px\",\n  },\n};\n\nexport const VideoPlayer = ({\n  btnText = \"Trascrizione\",\n  sizeComp = VIDEO_PLAYER_SIZE.LARGE,\n  transcription,\n  previewImageSrc,\n  videoSrc,\n  videoTitle,\n  videoLang,\n  playButtonLabel = \"Riproduci\",\n  videoAriaLabel = \"Video player\",\n  showDivider = true,\n}: VideoPlayerProps) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [hasPlayedOnce, setHasPlayedOnce] = useState(false);\n\n  const [isExpanded, setExpanded] = useState(false);\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const windowWidth = useWindowWidth();\n\n  const { width: componentBaseWidthString } = sizeStyles[sizeComp];\n\n  let width;\n  let calculatedHeight;\n\n  if (componentBaseWidthString.includes(\"%\")) {\n    width = componentBaseWidthString;\n\n    calculatedHeight = imgSize[sizeComp].heightImg;\n  } else {\n    const componentBaseWidth = parseInt(componentBaseWidthString, 10);\n    const componentBaseHeight = parseInt(imgSize[sizeComp].heightImg, 10);\n\n    const aspectRatio = componentBaseHeight / componentBaseWidth;\n\n    // For small sizes, account for device padding (16px on each side)\n    const isSmallSize =\n      sizeComp === VIDEO_PLAYER_SIZE.SMALL ||\n      sizeComp === VIDEO_PLAYER_SIZE.MEDIUM;\n    const padding = isSmallSize ? 32 : 0; // 16px left + 16px right\n    const availableWidth = windowWidth\n      ? windowWidth - padding\n      : componentBaseWidth;\n\n    const finalWidthInPx = windowWidth\n      ? Math.min(componentBaseWidth, availableWidth)\n      : componentBaseWidth;\n\n    const finalHeightInPx = Math.round(finalWidthInPx * aspectRatio);\n\n    width = `${finalWidthInPx}px`;\n    calculatedHeight = `${finalHeightInPx}px`;\n  }\n\n  const isVertical = sizeComp === VIDEO_PLAYER_SIZE.VERTICAL;\n  const isLargeSize =\n    sizeComp === VIDEO_PLAYER_SIZE.EXTRA_LARGE ||\n    sizeComp === VIDEO_PLAYER_SIZE.FULL_WIDTH;\n\n  const containerWidth = isVertical ? \"642px\" : width;\n  const videoHeight = isVertical ? \"640px\" : calculatedHeight;\n  const videoWidth = isVertical ? \"360px\" : width;\n\n  const handlePlay = async (e?: React.MouseEvent) => {\n    if (e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n\n    const video = videoRef.current;\n\n    if (!video) {\n      console.error(\"no video element found\");\n      return;\n    }\n\n    try {\n      if (!hasPlayedOnce) {\n        setHasPlayedOnce(true);\n        setIsPlaying(true);\n        await video.play();\n      }\n    } catch (error) {\n      console.error(\"Error controlling video:\", error);\n    }\n  };\n\n  return (\n    <Col\n      br={\"x4\"}\n      style={{ width: containerWidth }}\n      className={clsx(\"video-section-container\")}\n    >\n      <div\n        className=\"video-player-container\"\n        style={{\n          height: videoHeight,\n          width: videoWidth,\n          ...(isVertical && { alignSelf: \"center\" }),\n        }}\n      >\n        <button\n          className={clsx(\"start-video-container\", {\n            \"fade-out\": isPlaying || hasPlayedOnce,\n          })}\n          style={{\n            backgroundImage:\n              previewImageSrc && !hasPlayedOnce\n                ? `url(\"${previewImageSrc}\")`\n                : \"none\",\n            display: hasPlayedOnce ? \"none\" : \"block\",\n          }}\n          onClick={(e) => handlePlay(e)}\n          type=\"button\"\n        >\n          <div className={clsx(\"play-button-container\", { hidden: isPlaying })}>\n            <div className=\"play-button-icon\">\n              <PlayVideo decorative />\n            </div>\n            <div className=\"play-button-text\">{playButtonLabel}</div>\n          </div>\n        </button>\n        <div className=\"video-container\">\n          <video\n            ref={videoRef}\n            controls\n            src={videoSrc || undefined}\n            aria-label={videoAriaLabel}\n            title={videoTitle ? videoTitle : undefined}\n          >\n            <source src={videoSrc || undefined} />\n            {videoLang  && (\n              <track kind=\"subtitles\" src=\"subtitles_en.vtt\" srcLang={videoLang === 'italiano' ? \"it\" : \"en\"} />\n            )} {/* da integrare con file VTT :  www.w3schools.com/TAGS/att_srclang.asp */}\n          </video>\n        </div>\n      </div>\n\n      {transcription && (\n        <div\n          className={clsx(\n            isLargeSize ? \"transcription-container\" : \"ui-has-border-bottom\",\n            !showDivider && \"ui-video-no-divider\",\n          )}\n          style={{ width: containerWidth }}\n        >\n          <div\n            className={clsx(\n              \"expand-button-container\",\n              \"accordion\",\n              \"base-row justify-content-between align-items-center\",\n            )}\n          >\n            <button\n              className={clsx(\n                \"ui-btn-accordion-video\",\n                \"base-row justify-content-between align-items-center\",\n              )}\n              type=\"button\"\n              onClick={() => setExpanded(!isExpanded)}\n              aria-expanded={isExpanded}\n              aria-controls=\"transcription-content\"\n            >\n              <span\n                className={clsx(\n                  \"fw-semibold text-primary base-col justify-content-center fs-custom text-decoration-underline\",\n                )}\n              >\n                {btnText}\n              </span>\n              <ArrowDown\n                color={\"primary\"}\n                className={clsx(\"ui-arrow\", { expanded: isExpanded })}\n                decorative\n              />\n            </button>\n          </div>\n          {isExpanded && (\n            <div\n              id=\"transcription-content\"\n              className={clsx(\n                \"transcription-text-container\",\n                \"pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black\",\n              )}\n            >\n              <RichText\n                additionalClass=\"text-black text-charcoal-dust rich-text-element\"\n                classNameTitle=\"heading-2-lg fw-extra-bold text-black text-charcoal-dust\"\n                description={transcription}\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </Col>\n  );\n};\n\nexport { VIDEO_PLAYER_SIZE };\nexport type { VideoPlayerProps };\n"],"names":["sizeStyles","VIDEO_PLAYER_SIZE","imgSize","VideoPlayer","btnText","sizeComp","transcription","previewImageSrc","videoSrc","videoTitle","videoLang","playButtonLabel","videoAriaLabel","showDivider","isPlaying","setIsPlaying","useState","hasPlayedOnce","setHasPlayedOnce","isExpanded","setExpanded","videoRef","useRef","windowWidth","useWindowWidth","componentBaseWidthString","width","calculatedHeight","componentBaseWidth","aspectRatio","padding","availableWidth","finalWidthInPx","finalHeightInPx","isVertical","isLargeSize","containerWidth","videoHeight","videoWidth","handlePlay","e","video","error","jsxs","Col","clsx","jsx","PlayVideo","ArrowDown","RichText"],"mappings":"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"}

package/dist/index.es271.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es278.js";
 import { clsx as m } from "./index.es280.js";
-import { createColorClasses as n } from "./index.es352.js";
+import { createColorClasses as n } from "./index.es313.js";
 const x = ({
   width: e = 24,
   height: o = 24,

package/dist/index.es275.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es278.js";
 import { clsx as e } from "./index.es280.js";
-import { createColorClasses as z } from "./index.es352.js";
+import { createColorClasses as z } from "./index.es313.js";
 const M = ({
   width: r = 24,
   height: s = 24,

package/dist/index.es276.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es278.js";
 import { clsx as a } from "./index.es280.js";
-import { createColorClasses as m } from "./index.es352.js";
+import { createColorClasses as m } from "./index.es313.js";
 const p = ({
   width: s = 21,
   height: t = 22,

package/dist/index.es277.js

@@ -1,6 +1,6 @@
 import { j as r } from "./index.es278.js";
 import { clsx as m } from "./index.es280.js";
-import { createColorClasses as n } from "./index.es352.js";
+import { createColorClasses as n } from "./index.es313.js";
 const u = ({
   width: s = 21,
   height: t = 3,

package/dist/index.es28.js

@@ -1,5 +1,5 @@
 import { j as s } from "./index.es278.js";
-import { createColorClasses as l } from "./index.es352.js";
+import { createColorClasses as l } from "./index.es313.js";
 import { clsx as x } from "./index.es280.js";
 const p = ({
   initials: e,

package/dist/index.es313.js

@@ -0,0 +1,5 @@
+const t = ["bg", "text", "color", "border"], e = (o) => t.map((r) => o[r] ? r === "color" ? `text-${o[r]}` : `${r}-${o[r]}` : "").filter(Boolean);
+export {
+  e as createColorClasses
+};
+//# sourceMappingURL=index.es313.js.map

package/dist/index.es313.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es313.js","sources":["../src/theme/colors.ts"],"sourcesContent":["export type ColorKeys =\n  | \"primary\"\n  | \"white\"\n  | \"status-success\"\n  | \"warning\"\n  | \"error\"\n  | \"muted\"\n  | \"emphasis\"\n  | \"slate-20\"\n  | \"slate-14\"\n  | \"slate-28\"\n  | \"border-divider\"\n  | \"transparent\"\n  | \"blue-30\"\n  | \"blue-15\"\n  | \"disabled\"\n  | \"lightblue-a01\"\n  | \"lightblue-a02\"\n  | \"lightblue-a03\"\n  | \"secondary\"\n  | \"blue-48\";\n\nexport type ColorProps = {\n  bg?: ColorKeys;\n  text?: ColorKeys;\n  color?: ColorKeys;\n  border?: ColorKeys;\n};\n\nexport type ColorPropsKeys = keyof ColorProps;\nconst colorPropsKeys: ColorPropsKeys[] = [\"bg\", \"text\", \"color\", \"border\"];\n\nexport const createColorClasses = <TProps extends ColorProps>(\n  props: TProps,\n) => {\n  return colorPropsKeys\n    .map((key) => {\n      if (!props[key]) return \"\";\n\n      if (key === \"color\") return `text-${props[key]}`;\n      return `${key}-${props[key]}`;\n    })\n    .filter(Boolean);\n};\n"],"names":["colorPropsKeys","createColorClasses","props","key"],"mappings":"AA8BA,MAAMA,IAAmC,CAAC,MAAM,QAAQ,SAAS,QAAQ,GAE5DC,IAAqB,CAChCC,MAEOF,EACJ,IAAI,CAACG,MACCD,EAAMC,CAAG,IAEVA,MAAQ,UAAgB,QAAQD,EAAMC,CAAG,CAAC,KACvC,GAAGA,CAAG,IAAID,EAAMC,CAAG,CAAC,KAHH,EAIzB,EACA,OAAO,OAAO;"}

package/dist/{index.es314.js → index.es315.js}

@@ -22,4 +22,4 @@ const i = ({
 export {
   i as BreadcrumbItem
 };
-//# sourceMappingURL=index.es314.js.map
+//# sourceMappingURL=index.es315.js.map

package/dist/{index.es314.js.map → index.es315.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.es314.js","sources":["../src/components/navigations/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import \"./Breadcrumb.scss\";\nimport clsx from \"clsx\";\nimport { ComponentType } from \"react\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href?: string;\n  isClickable?: boolean;\n  asLink?: \"a\" | ComponentType<any>;\n};\n\nexport const BreadcrumbItem = ({\n  label,\n  href,\n  isClickable,\n  asLink = \"a\",\n}: BreadcrumbItemProps) => {\n  const LinkComponent = asLink;\n  return (\n    <span\n      className={clsx(\"ui-breadcrumb-item\", {\n        \"active text-slate-20 fw-semibold\": isClickable,\n        \"text-slate-28\": !isClickable,\n      })}\n    >\n      {href && isClickable ? (\n        <LinkComponent href={href}>{label}</LinkComponent>\n      ) : (\n        label\n      )}\n    </span>\n  );\n};\n"],"names":["BreadcrumbItem","label","href","isClickable","asLink","LinkComponent","jsx","clsx"],"mappings":";;;AAWO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAA2B;AACzB,QAAMC,IAAgBD;AACtB,SACEE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,sBAAsB;AAAA,QACpC,oCAAoCJ;AAAA,QACpC,iBAAiB,CAACA;AAAA,MAAA,CACnB;AAAA,MAEA,eAAQA,IACPG,gBAAAA,MAACD,GAAA,EAAc,MAAAH,GAAa,aAAM,IAElCD;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index.es315.js","sources":["../src/components/navigations/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import \"./Breadcrumb.scss\";\nimport clsx from \"clsx\";\nimport { ComponentType } from \"react\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href?: string;\n  isClickable?: boolean;\n  asLink?: \"a\" | ComponentType<any>;\n};\n\nexport const BreadcrumbItem = ({\n  label,\n  href,\n  isClickable,\n  asLink = \"a\",\n}: BreadcrumbItemProps) => {\n  const LinkComponent = asLink;\n  return (\n    <span\n      className={clsx(\"ui-breadcrumb-item\", {\n        \"active text-slate-20 fw-semibold\": isClickable,\n        \"text-slate-28\": !isClickable,\n      })}\n    >\n      {href && isClickable ? (\n        <LinkComponent href={href}>{label}</LinkComponent>\n      ) : (\n        label\n      )}\n    </span>\n  );\n};\n"],"names":["BreadcrumbItem","label","href","isClickable","asLink","LinkComponent","jsx","clsx"],"mappings":";;;AAWO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAA2B;AACzB,QAAMC,IAAgBD;AACtB,SACEE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,sBAAsB;AAAA,QACpC,oCAAoCJ;AAAA,QACpC,iBAAiB,CAACA;AAAA,MAAA,CACnB;AAAA,MAEA,eAAQA,IACPG,gBAAAA,MAACD,GAAA,EAAc,MAAAH,GAAa,aAAM,IAElCD;AAAA,IAAA;AAAA,EAAA;AAIR;"}