@telefonica/mistica 14.15.0 → 14.16.1

package/dist/theme.d.ts

@@ -69,7 +69,7 @@ type LinkComponent = React.ComponentType<{
     onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>;
     children: React.ReactNode;
 }>;
-export declare const AnchorLink: LinkComponent;
+export declare const getMisticaLinkComponent: (Link?: ThemeConfig['Link']) => LinkComponent;
 export type ColorScheme = 'dark' | 'light' | 'auto';
 export type EventFormat = 'universal-analytics' | 'google-analytics-4';
 export type ThemeConfig = Readonly<{
@@ -92,7 +92,10 @@ export type ThemeConfig = Readonly<{
     dimensions?: Readonly<{
         headerMobileHeight: number | 'mistica';
     }>;
-    Link?: LinkComponent;
+    Link?: LinkComponent | {
+        type: 'ReactRouter5' | 'ReactRouter6' | 'Next12' | 'Next13';
+        Component: React.ComponentType<any>;
+    };
     useHrefDecorator?: () => (href: string) => string;
     useId?: () => string;
     enableTabFocus?: boolean;

package/dist/theme.js

@@ -9,20 +9,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    AnchorLink: function() {
-        return u;
-    },
     NAVBAR_HEIGHT_DESKTOP: function() {
-        return s;
+        return C;
     },
     NAVBAR_HEIGHT_MOBILE: function() {
-        return d;
+        return c;
     },
     dimensions: function() {
-        return m;
+        return E;
+    },
+    getMisticaLinkComponent: function() {
+        return h;
     },
     getTexts: function() {
-        return C;
+        return b;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -105,7 +105,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const t = {
+const l = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar u ocultar contrase\xf1a",
     loading: "Cargando",
@@ -136,7 +136,7 @@ const t = {
     clearButton: "Borrar",
     carouselNextButton: "siguiente",
     carouselPrevButton: "anterior"
-}, o = {
+}, n = {
     expirationDatePlaceholder: "MM/YY",
     togglePasswordVisibilityLabel: "Toggle password visibility",
     loading: "Loading",
@@ -167,7 +167,7 @@ const t = {
     clearButton: "Clear",
     carouselNextButton: "next",
     carouselPrevButton: "previous"
-}, n = {
+}, d = {
     expirationDatePlaceholder: "MM/JJ",
     togglePasswordVisibilityLabel: "Passwort un-/sichtbar machen",
     loading: "Wird gespeichert",
@@ -198,7 +198,7 @@ const t = {
     clearButton: "L\xf6schen",
     carouselNextButton: "n\xe4chste",
     carouselPrevButton: "vorherige"
-}, l = {
+}, s = {
     expirationDatePlaceholder: "MM/AA",
     togglePasswordVisibilityLabel: "Mostrar ou ocultar senha",
     loading: "Carregando",
@@ -229,31 +229,80 @@ const t = {
     clearButton: "Apagar",
     carouselNextButton: "pr\xf3ximo",
     carouselPrevButton: "anterior"
-}, C = (r)=>{
+}, b = (r)=>{
     switch(r.toLocaleLowerCase().split(/[-_]/)[0]){
         case "es":
-            return t;
-        case "pt":
             return l;
+        case "pt":
+            return s;
         case "de":
-            return n;
+            return d;
         case "en":
-            return o;
+            return n;
         default:
-            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), o;
+            return process.env.NODE_ENV !== "production" && console.error(`Invalid locale: ${r}`), n;
     }
-}, d = 56, s = 80, m = {
-    headerMobileHeight: d,
-    headerDesktopHeight: s
-}, u = (_param)=>/* @__PURE__ */ {
-    var { to: r , innerRef: e  } = _param, a = _object_without_properties(_param, [
+}, c = 56, C = 80, E = {
+    headerMobileHeight: c,
+    headerDesktopHeight: C
+}, m = (_param)=>/* @__PURE__ */ {
+    var { to: r , innerRef: e  } = _param, o = _object_without_properties(_param, [
         "to",
         "innerRef"
     ]);
     return (0, _jsxruntime.jsx)("a", _object_spread_props(_object_spread({
         ref: e,
         href: typeof r == "string" ? r : r == null ? void 0 : r.pathname
-    }, a), {
-        children: a.children
+    }, o), {
+        children: o.children
     }));
+}, u = (r)=>r, f = (r)=>(_param)=>/* @__PURE__ */ {
+        var { innerRef: e  } = _param, o = _object_without_properties(_param, [
+            "innerRef"
+        ]);
+        return (0, _jsxruntime.jsx)(r, _object_spread({
+            ref: e
+        }, o));
+    }, v = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return (0, _jsxruntime.jsx)(r, {
+            href: e,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("a", _object_spread_props(_object_spread({
+                ref: o
+            }, i), {
+                children: t
+            }))
+        });
+    }, p = (r)=>(_param)=>/* @__PURE__ */ {
+        var { to: e , innerRef: o , children: t  } = _param, i = _object_without_properties(_param, [
+            "to",
+            "innerRef",
+            "children"
+        ]);
+        return (0, _jsxruntime.jsx)(r, _object_spread_props(_object_spread({
+            href: e,
+            ref: o
+        }, i), {
+            children: t
+        }));
+    }, h = (r)=>{
+    if (!r) return m;
+    if (typeof r == "function" || r.$$typeof) return r;
+    switch(r.type){
+        case "ReactRouter5":
+            return u(r.Component);
+        case "ReactRouter6":
+            return f(r.Component);
+        case "Next12":
+            return v(r.Component);
+        case "Next13":
+            return p(r.Component);
+        default:
+            const e = r.type;
+            throw new Error(`Invalid Link type: ${e}`);
+    }
 };

package/dist/video.d.ts

@@ -37,5 +37,11 @@ export type VideoProps = {
     preload?: 'none' | 'metadata' | 'auto';
     dataAttributes?: DataAttributes;
 };
-declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export interface VideoElement extends HTMLDivElement {
+    play: () => Promise<void>;
+    pause: () => void;
+    load: () => void;
+    setCurrentTime: (time: number) => void;
+}
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<VideoElement>>;
 export default Video;

package/dist/video.js

@@ -10,22 +10,20 @@ function _export(target, all) {
 }
 _export(exports, {
     RATIO: function() {
-        return M;
+        return K;
     },
     default: function() {
-        return ne;
+        return re;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _image = require("./image.js");
 const _aspectratiosupport = require("./utils/aspect-ratio-support.js");
-const _common = require("./utils/common.js");
 const _dom = require("./utils/dom.js");
 const _platform = require("./utils/platform.js");
 const _videocssmistica = require("./video.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
-const _hooks = require("./hooks.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -144,14 +142,18 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const K = {
+const q = {
     loading: {
         play: "playing",
         pause: "paused",
         fail: "error",
         finishLoad: "loaded"
     },
-    loaded: {
+    /**
+   * This state represents the scenario when video.load() finishes, but the video isn't played yet. Some browsers don't actually load
+   * the video until someone plays it. In this case, we need to show the poster, because we may not have the first frame to display it.
+   * https://stackoverflow.com/questions/10235919/the-canplay-canplaythrough-events-for-an-html5-video-are-not-called-on-firefox/26430919#26430919
+   */ loaded: {
         play: "playing",
         pause: "paused",
         reset: "loading"
@@ -167,12 +169,12 @@ const K = {
     error: {
         reset: "loading"
     }
-}, L = (t, l)=>K[t][l] || t, M = {
+}, D = (r, u)=>q[r][u] || r, K = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, W = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", _ = /*#__PURE__*/ _react.forwardRef((_param, F)=>{
-    var { src: t , poster: l , autoPlay: u = "when-loaded" , muted: C = !0 , loop: E = !0 , preload: S = "none" , loadingTimeout: y = 1e4 , onLoad: h , onError: c , onPause: f , onPlay: m , aspectRatio: A = "1:1" , dataAttributes: T  } = _param, i = _object_without_properties(_param, [
+}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
+    var { src: r , poster: u , autoPlay: p = "when-loaded" , muted: x = !0 , loop: N = !0 , preload: k = "none" , loadingTimeout: T = 1e4 , onLoad: y , onError: h , onPause: R , onPlay: w , aspectRatio: c = "1:1" , dataAttributes: B  } = _param, n = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -187,104 +189,142 @@ const K = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [r, s] = _react.useReducer(L, "loading"), g = _react.useRef(null), b = _react.useRef(), w = (0, _image.useMediaBorderRadius)(), p = typeof A == "number" ? A : M[A], R = _react.useCallback(()=>{
-        r === "loading" && (s("fail"), c == null || c());
+    const [a, l] = _react.useReducer(D, "loading"), s = _react.useRef(null), C = _react.useRef(), f = _react.useRef(null), b = (0, _image.useMediaBorderRadius)(), m = typeof c == "number" ? c : K[c], v = _react.useCallback(()=>{
+        a === "loading" && (l("fail"), h == null || h());
     }, [
-        c,
-        r
+        h,
+        a
     ]);
     _react.useEffect(()=>{
         var e;
-        if (b.current !== t) {
-            b.current = t;
-            const n = setTimeout(R, y);
-            return (e = g.current) == null || e.load(), ()=>{
-                clearTimeout(n);
+        if (C.current !== r) {
+            C.current = r;
+            const t = setTimeout(v, T);
+            return l("reset"), (e = s.current) == null || e.load(), ()=>{
+                clearTimeout(t);
             };
         }
     }, [
-        t,
-        y,
-        R
+        r,
+        T,
+        v
     ]);
-    const v = ()=>{
-        h == null || h();
-        const e = g.current, n = u && !(0, _platform.isRunningAcceptanceTest)();
-        s("finishLoad"), e && n && e.paused && e.play();
-    }, x = (Array.isArray(t) ? t : [
-        t
+    const I = ()=>{
+        y == null || y();
+        const e = s.current, t = p && !(0, _platform.isRunningAcceptanceTest)();
+        l("finishLoad"), e && t && e.paused && e.play();
+    }, U = (Array.isArray(r) ? r : [
+        r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), a = r === "error" || r === "loading" || r === "loaded", { ref: I , width: N , height: k  } = (0, _hooks.useElementDimensions)(), B = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", _object_spread_props(_object_spread({
-        ref: (0, _common.combineRefs)(F, g),
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ (0, _jsxruntime.jsx)("video", _object_spread_props(_object_spread({
+        ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: C,
-        loop: E,
+        muted: x,
+        loop: N,
         className: _videocssmistica.video,
-        preload: S,
-        onLoadStart: ()=>{
-            s("reset");
-        },
-        onError: R,
+        preload: k,
+        onError: v,
         onPause: ()=>{
-            f == null || f(), s("pause");
+            R == null || R(), l("pause");
         },
-        onPlay: ()=>{
-            m == null || m(), s("play");
+        onTimeUpdate: ()=>{
+            var e;
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (w == null || w(), l("play"));
         },
         onCanPlay: ()=>{
-            u === "streaming" && v();
+            p === "streaming" && I();
         },
         onCanPlayThrough: ()=>{
-            u !== "streaming" && v();
+            p !== "streaming" && I();
         },
-        poster: W
-    }, (0, _dom.getPrefixedDataAttributes)(T)), {
+        poster: _
+    }, (0, _dom.getPrefixedDataAttributes)(B)), {
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? _skincontractcssmistica.vars.borderRadii.container : 0,
-            visibility: a ? "hidden" : "visible",
-            position: a || p !== 0 ? "absolute" : "static",
-            width: a ? N : "100%",
-            height: a ? k : "100%"
-        },
-        children: x.map((param, U)=>/* @__PURE__ */ {
-            let { src: e , type: n  } = param;
-            return (0, _jsxruntime.jsx)("source", {
-                src: e,
-                type: n
-            }, U);
-        })
-    })), j = !!(p !== 0 || i.width && i.height), G = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
-        ref: I,
-        aspectRatio: A,
-        width: i.width,
-        height: i.height,
-        src: l
-    }) : j ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        style: {
-            position: "absolute",
+            borderRadius: b ? _skincontractcssmistica.vars.borderRadii.container : 0,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
-            ref: I,
-            noBorderRadius: !w,
-            withIcon: r === "error"
+        children: U.map((param, i)=>/* @__PURE__ */ {
+            let { src: e , type: t  } = param;
+            return (0, _jsxruntime.jsx)("source", {
+                src: e,
+                type: t
+            }, i);
         })
-    }) : void 0;
+    })), E = !!(m !== 0 || n.width && n.height), F = a === "error", G = _react.useMemo(()=>u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageContent, {
+            aspectRatio: c,
+            width: n.width,
+            height: n.height,
+            src: u
+        }) : E ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%"
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.ImageError, {
+                noBorderRadius: !b,
+                withIcon: F
+            })
+        }) : void 0, [
+        c,
+        n.height,
+        n.width,
+        b,
+        F,
+        u,
+        E
+    ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_aspectratiosupport.AspectRatioElement, {
         style: {
             position: "relative"
         },
-        aspectRatio: p,
-        width: i.width,
-        height: i.height,
+        aspectRatio: m,
+        width: n.width,
+        height: n.height,
         children: [
-            B,
-            a && G
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%"
+                },
+                ref: (e)=>{
+                    const t = e || null;
+                    t && (t.play = ()=>{
+                        var i;
+                        return ((i = s.current) == null ? void 0 : i.play()) || Promise.resolve();
+                    }, t.pause = ()=>{
+                        var i;
+                        return (i = s.current) == null ? void 0 : i.pause();
+                    }, t.load = ()=>{
+                        var i;
+                        (i = f.current) != null && i.style && (f.current.style.width = "100%", f.current.style.height = "100%"), setTimeout(()=>{
+                            var S;
+                            l("reset"), (S = s.current) == null || S.load();
+                        }, 100);
+                    }, t.setCurrentTime = (i)=>{
+                        s.current && (s.current.currentTime = i);
+                    }), typeof A == "function" ? A(t) : A && (A.current = t);
+                }
+            }),
+            j,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: f,
+                style: {
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
+                    overflow: "hidden"
+                },
+                children: G
+            })
         ]
     });
-}), ne = _;
+}), re = z;