@telefonica/mistica 14.37.0 → 14.39.0

package/dist/loading-screen.js

@@ -0,0 +1,398 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    BrandLoadingScreen: function() {
+        return pe;
+    },
+    LoadingScreen: function() {
+        return he;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _overscrollcolorcontext = /*#__PURE__*/ _interop_require_default(require("./overscroll-color-context.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _text = require("./text.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _loadingscreencssmistica = require("./loading-screen.css-mistica.js");
+const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _logo = require("./logo.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+const _hooks = require("./hooks.js");
+const _constants = require("./skins/constants.js");
+const _dom = require("./utils/dom.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const L = (param)=>{
+    let { isInverse: e } = param;
+    const r = `body {background:${e ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}`;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+        children: r
+    });
+}, Q = (param)=>{
+    let { animateText: e, isLoading: r, onClose: t, texts: c } = param;
+    const [o, s] = _react.useState(0), [a, l] = _react.useState(!1), u = _react.useCallback(()=>{
+        s((o + 1) % c.length), l(!1);
+    }, [
+        o,
+        c.length
+    ]);
+    _react.useEffect(()=>{
+        if (!r || c.length === 1) return;
+        var _c_o_duration;
+        const h = setTimeout(()=>{
+            e ? l(!0) : u();
+        }, (_c_o_duration = c[o].duration) !== null && _c_o_duration !== void 0 ? _c_o_duration : 5e3);
+        return ()=>{
+            clearTimeout(h);
+        };
+    }, [
+        e,
+        o,
+        a,
+        r,
+        u,
+        c
+    ]);
+    const m = ()=>{
+        if (!r) {
+            t == null || t();
+            return;
+        }
+        a && u();
+    }, { title: d, description: f } = c[o % c.length];
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreenText, {
+                [_loadingscreencssmistica.loadingScreenTextAnimatedOut]: e && (!r || a)
+            }),
+            onTransitionEnd: m,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 8,
+                children: [
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "h1",
+                            children: d
+                        })
+                    }),
+                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        style: {
+                            animationDelay: "200ms"
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "p",
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: f
+                        })
+                    })
+                ]
+            })
+        }, o)
+    });
+}, x = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { isInverse: e, children: r, isLoading: t = !0, animateText: c, animateBackground: o, onClose: s, dataAttributes: a, title: l, description: u, texts: m = [
+        {
+            title: l,
+            description: u
+        }
+    ] } = param;
+    const [f, h] = _react.useState(!1);
+    _react.useEffect(()=>{
+        if (!t) return;
+        const A = setTimeout(()=>{
+            h(!0);
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        t
+    ]);
+    const v = _react.useRef(!1), p = _react.useCallback(()=>{
+        !t && !v.current && (v.current = !0, s == null || s());
+    }, [
+        t,
+        s
+    ]);
+    _react.useEffect(()=>{
+        if (t) return;
+        if (!c && !o) {
+            s == null || s();
+            return;
+        }
+        const A = setTimeout(()=>{
+            p();
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        o,
+        c,
+        p,
+        t,
+        s
+    ]);
+    const b = !r;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        isInverse: e,
+        children: [
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+                ref: d
+            }, (0, _dom.getPrefixedDataAttributes)(a)), {
+                className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreen, _loadingscreencssmistica.screenBackground[e ? "inverse" : "default"], {
+                    [_loadingscreencssmistica.screenBackgroundFadeOut]: !t && o,
+                    [_loadingscreencssmistica.screenBackgroundAnimated]: o
+                }, (0, _sprinklescssmistica.sprinkles)({
+                    justifyContent: b ? "center" : "space-between"
+                })),
+                onAnimationEnd: ()=>{
+                    h(!0);
+                },
+                onTransitionEnd: p,
+                children: [
+                    r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _loadingscreencssmistica.loadingScreenChildren,
+                        children: r
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        delay: "0s",
+                        size: 32,
+                        color: e ? _skincontractcssmistica.vars.colors.inverse : void 0
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+                        animateText: c,
+                        isLoading: t,
+                        texts: m,
+                        onClose: p
+                    }),
+                    !b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            height: 104
+                        }
+                    })
+                ]
+            })),
+            t && f && /* @__PURE__ */ (0, _jsxruntime.jsx)(L, {
+                isInverse: !!e
+            })
+        ]
+    });
+}), he = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+        ref: r
+    }, e), {
+        dataAttributes: _object_spread({
+            "component-name": "LoadingScreen"
+        }, e.dataAttributes),
+        animateBackground: !0
+    }))), U = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { texts: c } = (0, _hooks.useTheme)(), [o, s] = _react.useState(!0), a = ()=>{
+        e || (r == null || r(), s(!1), t == null || t());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(_loadingscreencssmistica.logo, {
+            [_loadingscreencssmistica.pulseLogo]: o
+        }),
+        onAnimationIteration: a,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: c.loading
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+                size: 128
+            })
+        ]
+    });
+}, X = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./vivinho-loading-animation/index.js")))), Y = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { skinName: c } = (0, _hooks.useTheme)();
+    return c === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+            isLoading: e,
+            onCloseStart: r,
+            onCloseEnd: t
+        })
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+        isLoading: e,
+        onCloseStart: r,
+        onCloseEnd: t
+    });
+}, pe = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, c = _object_without_properties(_param, [
+        "isLoading",
+        "onClose",
+        "dataAttributes"
+    ]);
+    const [s, a] = _react.useState(!1), l = _react.useRef(!1), u = _react.useRef(!1), m = ()=>{
+        a(!0);
+    }, d = ()=>{
+        l.current && u.current && (r == null || r());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+        ref: o,
+        isInverse: !0
+    }, c), {
+        isLoading: e || !s,
+        onClose: ()=>{
+            u.current = !0, d();
+        },
+        animateText: !0,
+        dataAttributes: _object_spread({
+            "component-name": "BrandLoadingScreen"
+        }, t),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
+            isLoading: e,
+            onCloseStart: m,
+            onCloseEnd: ()=>{
+                l.current = !0, d();
+            }
+        })
+    }));
+});

package/dist/logo.css-mistica.js

@@ -2,11 +2,27 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "logoContainer", {
-    enumerable: true,
-    get: function() {
-        return r;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    logoContainer: function() {
+        return t;
+    },
+    svg: function() {
+        return a;
+    },
+    vars: function() {
+        return e;
     }
 });
 require("./logo.css.ts.vanilla.css-mistica.js");
-var r = "_140ft6x0";
+var t = "_140ft6x5", a = "_140ft6x4", e = {
+    size: "var(--_140ft6x0)",
+    sizeMobile: "var(--_140ft6x1)",
+    sizeTablet: "var(--_140ft6x2)",
+    sizeDesktop: "var(--_140ft6x3)"
+};

package/dist/logo.css.d.ts

@@ -1 +1,8 @@
+export declare const vars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    sizeMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    sizeTablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    sizeDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const svg: string;
 export declare const logoContainer: string;

package/dist/logo.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { DataAttributes, TrackingEvent } from './utils/types';
+import type { ByBreakpoint, DataAttributes, TrackingEvent } from './utils/types';
 import type { ExclusifyUnion } from './utils/utility-types';
 type LogoType = 'isotype' | 'imagotype' | 'vertical';
 type LogoPropsBase = {
-    size?: number;
+    size?: ByBreakpoint<number>;
     type?: LogoType;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;