@telefonica/mistica 10.17.0 → 10.21.0

package/dist/text.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
+    /** @deprecated use decoration prop */
     textDecoration?: 'underline' | 'line-through' | 'none';
+    decoration?: 'underline' | 'line-through' | 'inherit' | 'none';
+    transform?: 'uppercase' | 'capitalize' | 'lowercase' | 'inherit' | 'none';
     children?: React.ReactNode;
     truncate?: boolean | number;
+    /** @deprecated use transform */
     uppercase?: boolean;
     wordBreak?: boolean;
     id?: string;

package/dist/text.js

@@ -86,7 +86,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
         return 'initial';
     };
-    var _color, _textDecoration;
+    var _color, _decoration;
     return {
         text: _defineProperty({
             lineHeight: function lineHeight(param) {
@@ -94,8 +94,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return (0, _css).pxToRem(desktopLineHeight);
             },
             textTransform: function textTransform(param) {
-                var uppercase = param.uppercase;
-                return uppercase ? 'uppercase' : 'inherit';
+                var uppercase = param.uppercase, transform = param.transform;
+                if (uppercase) {
+                    return 'uppercase';
+                }
+                if (transform) {
+                    return transform;
+                }
+                return 'inherit';
             },
             fontSize: function fontSize(param) {
                 var desktopSize = param.desktopSize;
@@ -110,7 +116,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return isInverse ? (_color = inverseColorsMap[color1]) !== null && _color !== void 0 ? _color : color1 : color1;
             },
             textDecoration: function textDecoration(p) {
-                return (_textDecoration = p.textDecoration) !== null && _textDecoration !== void 0 ? _textDecoration : 'inherit';
+                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
             },
             letterSpacing: function letterSpacing(param) {
                 var letterSpacing1 = param.letterSpacing;
@@ -146,7 +152,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Text = function Text(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, truncate = param.truncate, uppercase = param.uppercase, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'];
+    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'];
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -156,8 +162,9 @@ var Text = function Text(param) {
         desktopLineHeight: desktopLineHeight,
         weight: weight,
         color: color,
-        textDecoration: textDecoration,
+        decoration: decoration,
         uppercase: uppercase,
+        transform: transform,
         wordBreak: wordBreak,
         letterSpacing: letterSpacing,
         truncate: truncate

package/dist/text.js.flow

@@ -4,9 +4,19 @@ import * as React from "react";
 declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
+
+  /**
+   * @deprecated use decoration prop
+   */
   textDecoration?: "underline" | "line-through" | "none",
+  decoration?: "underline" | "line-through" | "inherit" | "none",
+  transform?: "uppercase" | "capitalize" | "lowercase" | "inherit" | "none",
   children?: React.Node,
   truncate?: boolean | number,
+
+  /**
+   * @deprecated use transform
+   */
   uppercase?: boolean,
   wordBreak?: boolean,
   id?: string,

package/dist/theme-context-provider.js

@@ -148,6 +148,11 @@ var generateId = function() {
     // in frontend, use the same generator for all JssProvider renders, this way we avoid classname collisions
     return (0, _jss).createGenerateId();
 }();
+var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
+    return function(href) {
+        return href;
+    };
+};
 var ThemeContextProvider = function ThemeContextProvider(param) {
     var theme = param.theme, children = param.children;
     var classNamePrefix = React.useMemo(// we'll have missmatches when rendering client side. The disadvantage of this is that we can only have one instance of
@@ -173,7 +178,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             platform: (0, _platform).getPlatform(),
             insideNovumNativeApp: (0, _platform).isInsideNovumNativeApp()
         }, theme.platformOverrides);
-        var _mediaQueries1, _Link;
+        var _mediaQueries1, _Link, _useHrefDecorator;
         return {
             skinName: theme.skin.name,
             i18n: theme.i18n,
@@ -191,7 +196,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios'
+            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios',
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,

package/dist/theme.d.ts

@@ -98,6 +98,7 @@ export declare type ThemeConfig = {
         desktopOrTabletMinHeight: number;
     };
     Link?: LinkComponent;
+    useHrefDecorator?: () => (href: string) => string;
     enableTabFocus?: boolean;
 };
 export declare type Theme = {
@@ -132,5 +133,6 @@ export declare type Theme = {
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;
+    useHrefDecorator: () => (href: string) => string;
 };
 export {};

package/dist/theme.js.flow

@@ -102,6 +102,7 @@ export type ThemeConfig = {
     desktopOrTabletMinHeight: number,
   },
   Link?: LinkComponent,
+  useHrefDecorator?: () => (href: string) => string,
   enableTabFocus?: boolean,
 };
 export type Theme = {
@@ -136,6 +137,7 @@ export type Theme = {
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,
+  useHrefDecorator: () => (href: string) => string,
 };
 declare export {};
 

package/dist/touchable.js

@@ -114,7 +114,8 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
+    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link, useHrefDecorator = ref1.useHrefDecorator;
+    var hrefDecorator = useHrefDecorator();
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -150,7 +151,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     };
     var getHref = function getHref() {
         if (props.href) {
-            return props.href;
+            return hrefDecorator(props.href);
         }
         if (props.to && props.fullPageOnWebView) {
             if (typeof props.to === 'string') {

package/dist/video.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export declare type AspectRatio = '1:1' | '16:9' | '12:5';
+export declare const RATIO: {
+    '1:1': number;
+    '16:9': number;
+    '12:5': number;
+};
+declare type VideoSource = {
+    src: string;
+    type?: string;
+};
+export declare type VideoProps = {
+    /** defaults to 100% when no width and no height are given */
+    width?: number;
+    height?: number;
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    aspectRatio?: AspectRatio;
+    /** accepts multiple sources */
+    src: string | Array<string> | VideoSource | Array<VideoSource>;
+    /** defaults to true */
+    loop?: boolean;
+    /** defaults to true */
+    muted?: boolean;
+    /** defaults to true */
+    autoPlay?: boolean;
+    poster?: string;
+    children?: void;
+    /** defaults to none */
+    preload?: 'none' | 'metadata' | 'auto';
+};
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export default Video;

package/dist/video.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.RATIO = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _image = require("./image");
+var _jss = require("./jss");
+var _common = require("./utils/common");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(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 _objectWithoutPropertiesLoose(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;
+}
+var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+exports.RATIO = RATIO;
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? 'none' : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, props = _objectWithoutProperties(_param, [
+        "src",
+        "poster",
+        "autoPlay",
+        "muted",
+        "loop",
+        "preload",
+        "aspectRatio"
+    ]);
+    var noBorderRadius = (0, _image).useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", {
+        ref: (0, _common).combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return (0, _jsxRuntime).jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+var _default = Video;
+exports.default = _default;

package/dist/video.js.flow

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from "react";
+export type AspectRatio = "1:1" | "16:9" | "12:5";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "12:5": number,
+};
+declare type VideoSource = {
+  src: string,
+  type?: string,
+};
+export type VideoProps = {
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * accepts multiple sources
+  */
+ src: string | Array<string> | VideoSource | Array<VideoSource>,
+ /**
+  * defaults to true
+  */
+ loop?: boolean,
+ /**
+  * defaults to true
+  */
+ muted?: boolean,
+ /**
+  * defaults to true
+  */
+ autoPlay?: boolean,
+ poster?: string,
+ /**
+  * defaults to none
+  */
+ preload?: "none" | "metadata" | "auto",
+};
+declare var Video: React.ComponentType<{
+  ...VideoProps,
+  ref?: React.Ref<HTMLVideoElement>,
+}>;
+declare export default typeof Video;

package/dist-es/button-layout.js

@@ -4,6 +4,7 @@ import { createUseStyles } from './jss';
 import { useScreenSize, useIsomorphicLayoutEffect } from './hooks';
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
 import classNames from 'classnames';
+import debounce from 'lodash/debounce';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -174,28 +175,29 @@ var buttonsRange = [
 var ButtonLayout = function(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -210,8 +212,10 @@ var ButtonLayout = function(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -222,11 +226,18 @@ var ButtonLayout = function(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return debounce(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 50);
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/button.js

@@ -361,6 +361,11 @@ var Button = function(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             maybe: true
@@ -384,22 +389,25 @@ var Button = function(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var padding = 6;
@@ -456,6 +464,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
@@ -463,7 +476,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -471,7 +484,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -479,8 +492,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();