@telefonica/mistica 14.21.0 → 14.22.1

package/dist-es/community/advanced-data-card.js

@@ -50,47 +50,47 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as t, jsx as e, Fragment as G } from "react/jsx-runtime";
-import * as M from "react";
-import { Boxed as U } from "../boxed.js";
-import { sprinkles as N } from "../sprinkles.css-mistica.js";
-import T from "../stack.js";
-import { dataCard as V, touchableContainer as X, hoverEffect as Y, cardContentStyle as Z, minHeight as q, paddingX as J, divider as K, actions as Q, actionsVariants as $, marginRightButton as ee, buttonMobile as R, footerDirection as te, marginRightAuto as re, footerText as ae, adjustButtonLink as ie, button as oe } from "./advanced-data-card.css-mistica.js";
+import { jsx as e, jsxs as t, Fragment as M } from "react/jsx-runtime";
+import * as U from "react";
+import { Boxed as V } from "../boxed.js";
+import { sprinkles as T } from "../sprinkles.css-mistica.js";
+import x from "../stack.js";
+import { dataCard as X, touchableContainer as Y, touchable as Z, touchableCardOverlay as q, cardContentStyle as J, minHeight as K, paddingX as Q, divider as $, actions as ee, actionsVariants as te, marginRightButton as re, buttonMobile as R, footerDirection as ae, marginRightAuto as ie, footerText as oe, adjustButtonLink as ne, button as se } from "./advanced-data-card.css-mistica.js";
 import F from "../divider.js";
-import { Text2 as f, Text as ne } from "../text.js";
+import { Text2 as f, Text as ce } from "../text.js";
 import { vars as y } from "../skins/skin-contract.css-mistica.js";
 import v from "../box.js";
-import se from "../touchable.js";
-import h from "classnames";
-import { CardActionsGroup as ce, TOP_ACTION_BUTTON_SIZE as de } from "../card.js";
-import { useTheme as le } from "../hooks.js";
-import { getPrefixedDataAttributes as he } from "../utils/dom.js";
-import me from "../inline.js";
-const pe = (param)=>{
-    let { headline: i , pretitle: a , pretitleAs: n = "p" , pretitleLinesMax: m , title: s , titleAs: c = "h3" , titleLinesMax: d , subtitle: l , subtitleLinesMax: o , description: r , descriptionLinesMax: p  } = param;
-    const { textPresets: x  } = le();
-    return /* @__PURE__ */ t(T, {
+import de from "../touchable.js";
+import u from "classnames";
+import { CardActionsGroup as le, TOP_ACTION_BUTTON_SIZE as he } from "../card.js";
+import { useTheme as me } from "../hooks.js";
+import { getPrefixedDataAttributes as pe } from "../utils/dom.js";
+import ue from "../inline.js";
+const ge = (param)=>{
+    let { headline: i , pretitle: a , pretitleAs: n = "p" , pretitleLinesMax: h , title: s , titleAs: c = "h3" , titleLinesMax: d , subtitle: l , subtitleLinesMax: o , description: r , descriptionLinesMax: m  } = param;
+    const { textPresets: N  } = me();
+    return /* @__PURE__ */ t(x, {
         space: 4,
         children: [
             i,
-            /* @__PURE__ */ t(T, {
+            /* @__PURE__ */ t(x, {
                 space: 4,
                 children: [
                     a && /* @__PURE__ */ e(f, {
                         color: y.colors.textPrimary,
-                        truncate: m,
+                        truncate: h,
                         as: n,
                         regular: !0,
                         hyphens: "auto",
                         children: a
                     }),
-                    /* @__PURE__ */ e(ne, {
+                    /* @__PURE__ */ e(ce, {
                         mobileSize: 18,
                         mobileLineHeight: "24px",
                         desktopSize: 20,
                         desktopLineHeight: "28px",
                         truncate: d,
-                        weight: x.cardTitle.weight,
+                        weight: N.cardTitle.weight,
                         as: c,
                         hyphens: "auto",
                         children: s
@@ -106,7 +106,7 @@ const pe = (param)=>{
                 ]
             }),
             r && /* @__PURE__ */ e(f, {
-                truncate: p,
+                truncate: m,
                 as: "p",
                 regular: !0,
                 color: y.colors.textSecondary,
@@ -115,30 +115,30 @@ const pe = (param)=>{
             })
         ]
     });
-}, ue = (param)=>{
-    let { button: i , footerImage: a , footerText: n , footerTextLinesMax: m , buttonLink: s  } = param;
-    const c = !!i, d = !!a, l = !!n, o = !!s, r = c && (d || l) && o, p = o && !r ? "178px" : "";
-    return /* @__PURE__ */ t(G, {
+}, fe = (param)=>{
+    let { button: i , footerImage: a , footerText: n , footerTextLinesMax: h , buttonLink: s  } = param;
+    const c = !!i, d = !!a, l = !!n, o = !!s, r = c && (d || l) && o, m = o && !r ? "178px" : "";
+    return /* @__PURE__ */ t(M, {
         children: [
             /* @__PURE__ */ e("div", {
-                className: K,
+                className: $,
                 children: /* @__PURE__ */ e(F, {})
             }),
             /* @__PURE__ */ t("div", {
-                className: h(Q, $[r ? "mobile" : "default"]),
+                className: u(ee, te[r ? "mobile" : "default"]),
                 children: [
                     c && /* @__PURE__ */ e("div", {
-                        className: h(ee, R),
+                        className: u(re, R),
                         children: i
                     }),
                     /* @__PURE__ */ t("div", {
-                        className: h(te, r ? re : N({
+                        className: u(ae, r ? ie : T({
                             paddingTop: 16
                         })),
                         children: [
                             d && /* @__PURE__ */ e(v, {
                                 paddingRight: 16,
-                                className: N({
+                                className: T({
                                     alignItems: "center",
                                     display: "flex"
                                 }),
@@ -146,11 +146,11 @@ const pe = (param)=>{
                             }),
                             l && /* @__PURE__ */ e("div", {
                                 style: {
-                                    maxWidth: p
+                                    maxWidth: m
                                 },
-                                className: ae,
+                                className: oe,
                                 children: /* @__PURE__ */ e(f, {
-                                    truncate: m,
+                                    truncate: h,
                                     regular: !0,
                                     children: n
                                 })
@@ -158,112 +158,116 @@ const pe = (param)=>{
                         ]
                     }),
                     o && /* @__PURE__ */ e("div", {
-                        className: h(ie, r ? oe : R),
+                        className: u(ne, r ? se : R),
                         children: s
                     })
                 ]
             })
         ]
     });
-}, ge = /*#__PURE__*/ M.forwardRef((param, O)=>{
-    let { onPress: i , stackingGroup: a , headline: n , pretitle: m , pretitleAs: s , pretitleLinesMax: c , title: d , titleAs: l , titleLinesMax: o , subtitle: r , subtitleLinesMax: p , description: x , descriptionLinesMax: P , extra: u , extraDividerPadding: j = 24 , button: C , footerImage: b , footerText: A , footerTextLinesMax: k , buttonLink: B , dataAttributes: E , actions: g , "aria-label": H , onClose: S  } = param;
-    const _ = {
-        button: C,
-        footerImage: b,
+}, ve = /*#__PURE__*/ U.forwardRef((param, _)=>{
+    let { onPress: i , stackingGroup: a , headline: n , pretitle: h , pretitleAs: s , pretitleLinesMax: c , title: d , titleAs: l , titleLinesMax: o , subtitle: r , subtitleLinesMax: m , description: N , descriptionLinesMax: P , extra: p , extraDividerPadding: O = 24 , button: b , footerImage: C , footerText: A , footerTextLinesMax: j , buttonLink: B , dataAttributes: k , actions: g , "aria-label": H , onClose: S  } = param;
+    const z = !!i, E = {
+        button: b,
+        footerImage: C,
         footerText: A,
-        footerTextLinesMax: k,
+        footerTextLinesMax: j,
         buttonLink: B
-    }, w = !!C || !!b || !!A || !!B, D = !!(u != null && u.length), z = ((g == null ? void 0 : g.length) || 0) + (S ? 1 : 0), L = {
+    }, w = !!b || !!C || !!A || !!B, D = !!(p != null && p.length), L = ((g == null ? void 0 : g.length) || 0) + (S ? 1 : 0), W = {
         marginRight: -16,
         marginTop: -24,
-        width: de * z
+        width: he * L
     };
-    return /* @__PURE__ */ t("section", _object_spread_props(_object_spread({
-        className: N({
+    return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
+        className: T({
             position: "relative",
             height: "100%"
         })
-    }, he(E, "AdvancedDataCard")), {
-        ref: O,
-        children: [
-            /* @__PURE__ */ t(U, {
-                className: V,
-                height: "100%",
-                children: [
-                    /* @__PURE__ */ t(se, {
-                        onPress: i,
-                        tabIndex: 0,
-                        maybe: !0,
-                        className: h(X, {
-                            [Y]: !!i
-                        }),
-                        "aria-label": H,
-                        children: [
-                            /* @__PURE__ */ e("div", {
-                                className: h(Z, !w && !D ? q : ""),
-                                children: /* @__PURE__ */ e(v, {
-                                    paddingTop: 8,
-                                    children: /* @__PURE__ */ t(me, {
-                                        space: 0,
-                                        children: [
-                                            /* @__PURE__ */ t(T, {
-                                                space: 8,
-                                                children: [
-                                                    a,
-                                                    /* @__PURE__ */ e(pe, {
-                                                        headline: n,
-                                                        pretitle: m,
-                                                        pretitleAs: s,
-                                                        pretitleLinesMax: c,
-                                                        title: d,
-                                                        titleAs: l,
-                                                        titleLinesMax: o,
-                                                        subtitle: r,
-                                                        subtitleLinesMax: p,
-                                                        description: x,
-                                                        descriptionLinesMax: P
-                                                    })
-                                                ]
-                                            }),
-                                            !a && /* @__PURE__ */ e("div", {
-                                                style: L
-                                            })
-                                        ]
+    }, pe(k, "AdvancedDataCard")), {
+        ref: _,
+        children: /* @__PURE__ */ t(V, {
+            className: X,
+            children: [
+                /* @__PURE__ */ t("div", {
+                    className: Y,
+                    children: [
+                        /* @__PURE__ */ t(de, {
+                            onPress: i,
+                            tabIndex: 0,
+                            maybe: !0,
+                            className: Z,
+                            "aria-label": H,
+                            children: [
+                                z && /* @__PURE__ */ e("div", {
+                                    className: q
+                                }),
+                                /* @__PURE__ */ e("div", {
+                                    className: u(J, !w && !D ? K : ""),
+                                    children: /* @__PURE__ */ e(v, {
+                                        paddingTop: 8,
+                                        children: /* @__PURE__ */ t(ue, {
+                                            space: 0,
+                                            children: [
+                                                /* @__PURE__ */ t(x, {
+                                                    space: 8,
+                                                    children: [
+                                                        a,
+                                                        /* @__PURE__ */ e(ge, {
+                                                            headline: n,
+                                                            pretitle: h,
+                                                            pretitleAs: s,
+                                                            pretitleLinesMax: c,
+                                                            title: d,
+                                                            titleAs: l,
+                                                            titleLinesMax: o,
+                                                            subtitle: r,
+                                                            subtitleLinesMax: m,
+                                                            description: N,
+                                                            descriptionLinesMax: P
+                                                        })
+                                                    ]
+                                                }),
+                                                !a && /* @__PURE__ */ e("div", {
+                                                    style: W
+                                                })
+                                            ]
+                                        })
                                     })
+                                }),
+                                /* @__PURE__ */ e("div", {
+                                    style: {
+                                        flexGrow: 1
+                                    }
+                                }),
+                                D && /* @__PURE__ */ e(v, {
+                                    paddingTop: 16,
+                                    paddingBottom: 24,
+                                    width: "100%",
+                                    children: p.map((G, I)=>/* @__PURE__ */ t("div", {
+                                            children: [
+                                                /* @__PURE__ */ e("div", {
+                                                    className: Q,
+                                                    children: G
+                                                }),
+                                                I + 1 !== p.length && /* @__PURE__ */ e(v, {
+                                                    paddingY: O,
+                                                    children: /* @__PURE__ */ e(F, {})
+                                                })
+                                            ]
+                                        }, I))
                                 })
-                            }),
-                            /* @__PURE__ */ e("div", {
-                                style: {
-                                    flexGrow: 1
-                                }
-                            }),
-                            D && /* @__PURE__ */ e(v, {
-                                paddingTop: 16,
-                                paddingBottom: 24,
-                                width: "100%",
-                                children: u.map((W, I)=>/* @__PURE__ */ t("div", {
-                                        children: [
-                                            /* @__PURE__ */ e("div", {
-                                                className: J,
-                                                children: W
-                                            }),
-                                            I + 1 !== u.length && /* @__PURE__ */ e(v, {
-                                                paddingY: j,
-                                                children: /* @__PURE__ */ e(F, {})
-                                            })
-                                        ]
-                                    }, I))
-                            })
-                        ]
-                    }),
-                    w && /* @__PURE__ */ e(ue, _object_spread({}, _))
-                ]
-            }),
-            /* @__PURE__ */ e(ce, {
-                actions: g,
-                onClose: S
-            })
-        ]
+                            ]
+                        }),
+                        /* @__PURE__ */ e(le, {
+                            actions: g,
+                            onClose: S,
+                            padding: 7
+                        })
+                    ]
+                }),
+                w && /* @__PURE__ */ e(fe, _object_spread({}, E))
+            ]
+        })
     }));
-}), Fe = ge;
-export { ge as AdvancedDataCard, Fe as default };
+}), Oe = ve;
+export { ve as AdvancedDataCard, Oe as default };

package/dist-es/community/blocks.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import p from "../stack.js";
 import { column as x, rightContent as y } from "./blocks.css-mistica.js";
-import { Text2 as i, Text5 as f, Text8 as h, Text3 as v } from "../text.js";
+import { Text2 as n, Text5 as f, Text8 as h, Text3 as v } from "../text.js";
 import { vars as c } from "../skins/skin-contract.css-mistica.js";
 import s from "../inline.js";
 import u from "../box.js";
@@ -20,12 +20,12 @@ const g = (param)=>{
                 color: c.colors.textPrimary,
                 children: o
             }),
-            l && l.map((t, n)=>/* @__PURE__ */ r(i, {
+            l && l.map((t, i)=>/* @__PURE__ */ r(n, {
                     regular: !0,
                     color: c.colors.textSecondary,
                     as: "p",
                     children: t
-                }, n))
+                }, i))
         ]
     });
 }, L = (param)=>/* @__PURE__ */ {
@@ -38,12 +38,12 @@ const g = (param)=>{
             children: [
                 o && /* @__PURE__ */ r(u, {
                     paddingRight: 32,
-                    children: /* @__PURE__ */ r(i, {
+                    children: /* @__PURE__ */ r(n, {
                         regular: !0,
                         children: o
                     })
                 }),
-                e || /* @__PURE__ */ r(i, {
+                e || /* @__PURE__ */ r(n, {
                     regular: !0,
                     color: c.colors.textSecondary,
                     children: l
@@ -60,7 +60,7 @@ const g = (param)=>{
             alignItems: "center",
             children: [
                 o,
-                /* @__PURE__ */ r(i, {
+                /* @__PURE__ */ r(n, {
                     regular: !0,
                     color: c.colors.textSecondary,
                     children: e
@@ -69,7 +69,7 @@ const g = (param)=>{
         })
     });
 }, q = (param)=>/* @__PURE__ */ {
-    let { title: o , description: e , secondaryValue: l , value: t , valueColor: n = c.colors.textPrimary , "aria-label": d  } = param;
+    let { title: o , description: e , secondaryValue: l , value: t , valueColor: i = c.colors.textPrimary , "aria-label": d  } = param;
     return a(s, {
         space: "between",
         alignItems: "flex-end",
@@ -82,13 +82,13 @@ const g = (param)=>{
             /* @__PURE__ */ a("div", {
                 className: B(x, y),
                 children: [
-                    /* @__PURE__ */ r(i, {
+                    /* @__PURE__ */ r(n, {
                         regular: !0,
                         color: c.colors.textSecondary,
                         children: l
                     }),
                     /* @__PURE__ */ r(f, {
-                        color: n,
+                        color: i,
                         children: t
                     })
                 ]
@@ -96,7 +96,7 @@ const g = (param)=>{
         ]
     });
 }, z = (param)=>/* @__PURE__ */ {
-    let { headline: o , mainHeading: e , secondHeading: l , secondaryValue: t , title: n , description: d , valueColor: m = c.colors.textPrimary , "aria-label": b  } = param;
+    let { headline: o , mainHeading: e , secondHeading: l , secondaryValue: t , title: i , description: d , valueColor: m = c.colors.textPrimary , "aria-label": b  } = param;
     return a("div", {
         "aria-label": b,
         children: [
@@ -115,7 +115,7 @@ const g = (param)=>{
                                 color: m,
                                 children: e.value
                             }),
-                            /* @__PURE__ */ r(i, {
+                            /* @__PURE__ */ r(n, {
                                 regular: !0,
                                 color: c.colors.textSecondary,
                                 children: e.text
@@ -130,7 +130,7 @@ const g = (param)=>{
                                 color: m,
                                 children: l.value
                             }),
-                            /* @__PURE__ */ r(i, {
+                            /* @__PURE__ */ r(n, {
                                 regular: !0,
                                 color: c.colors.textSecondary,
                                 children: l.text
@@ -143,22 +143,22 @@ const g = (param)=>{
                     })
                 ]
             }),
-            n || d ? /* @__PURE__ */ r(u, {
+            i || d ? /* @__PURE__ */ r(u, {
                 paddingTop: 8,
                 children: /* @__PURE__ */ r(g, {
-                    title: n,
+                    title: i,
                     description: d
                 })
             }) : null
         ]
     });
 }, A = (param)=>/* @__PURE__ */ {
-    let { title: o , value: e , description: l , valueColor: t = c.colors.textPrimary , "aria-label": n  } = param;
+    let { title: o , value: e , description: l , valueColor: t = c.colors.textPrimary , "aria-label": i  } = param;
     return a("div", {
-        "aria-label": n,
+        "aria-label": i,
         className: x,
         children: [
-            /* @__PURE__ */ r(i, {
+            /* @__PURE__ */ r(n, {
                 regular: !0,
                 color: c.colors.textPrimary,
                 children: o
@@ -173,7 +173,7 @@ const g = (param)=>{
         ]
     });
 }, D = (param)=>/* @__PURE__ */ {
-    let { title: o , stackingGroup: e , progressPercent: l , reverse: t , heading: n , description: d , "aria-label": m  } = param;
+    let { title: o , stackingGroup: e , progressPercent: l , reverse: t , heading: i , description: d , "aria-label": m  } = param;
     return r("div", {
         "aria-label": m,
         children: /* @__PURE__ */ a(p, {
@@ -185,7 +185,7 @@ const g = (param)=>{
                     children: [
                         /* @__PURE__ */ r(u, {
                             paddingRight: 32,
-                            children: /* @__PURE__ */ r(i, {
+                            children: /* @__PURE__ */ r(n, {
                                 regular: !0,
                                 children: o
                             })
@@ -193,7 +193,7 @@ const g = (param)=>{
                         e
                     ]
                 }),
-                l && /* @__PURE__ */ r(S, {
+                l !== void 0 && /* @__PURE__ */ r(S, {
                     progressPercent: l,
                     reverse: t
                 }),
@@ -202,17 +202,17 @@ const g = (param)=>{
                     alignItems: "baseline",
                     children: [
                         /* @__PURE__ */ r(h, {
-                            color: n.valueColor || c.colors.textPrimary,
-                            children: n.value
+                            color: i.valueColor || c.colors.textPrimary,
+                            children: i.value
                         }),
-                        /* @__PURE__ */ r(i, {
+                        /* @__PURE__ */ r(n, {
                             regular: !0,
                             color: c.colors.textSecondary,
-                            children: n.text
+                            children: i.text
                         })
                     ]
                 }),
-                d && /* @__PURE__ */ r(i, {
+                d && /* @__PURE__ */ r(n, {
                     regular: !0,
                     color: c.colors.textSecondary,
                     children: d

package/dist-es/date-time-field.js

@@ -84,11 +84,15 @@ import { TextFieldBaseAutosuggest as x } from "./text-field-base.js";
 import { isInputTypeSupported as O } from "./utils/dom.js";
 import { isServerSide as b } from "./utils/environment.js";
 import { getLocalDateTimeString as o } from "./utils/time.js";
-import E from "./generated/mistica-icons/icon-calendar-regular.js";
-import { isFirefox as V } from "./utils/platform.js";
-import { useTheme as j } from "./hooks.js";
-const w = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), z = (_param)=>{
-    var { disabled: D , error: F , helperText: T , name: h , optional: f , validate: n , onChange: y , onChangeValue: a , onBlur: R , value: S , defaultValue: k , min: i , max: s  } = _param, l = _object_without_properties(_param, [
+import w from "./generated/mistica-icons/icon-calendar-regular.js";
+import { isFirefox as E } from "./utils/platform.js";
+import { useTheme as V } from "./hooks.js";
+const j = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), z = (_param)=>{
+    var { disabled: T , error: g , helperText: F , name: h , optional: f , validate: n , onChange: y , onChangeValue: a , onBlur: R , value: S , defaultValue: k , min: i , /**
+   * When typing a datetime value into the input field (inside a test for example), some browsers like Chrome
+   * force the year to have exactly 6 digits. In order to prevent this, in case max value was not provided we
+   * set it so that it only accepts datetime values with years having up to 4 digits.
+   */ max: s = /* @__PURE__ */ new Date("9999-12-31T23:59")  } = _param, l = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -103,7 +107,7 @@ const w = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "min",
         "max"
     ]);
-    const u = m.useMemo(()=>V() ? !1 : O("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v  } = j(), c = (e)=>{
+    const u = m.useMemo(()=>E() ? !1 : O("datetime-local"), []), d = (e)=>u ? e : e.replace(/\s/, "T"), { texts: v  } = V(), c = (e)=>{
         const t = d(e);
         return !(i && t && t < o(i) || s && t && t > o(s));
     }, p = I({
@@ -111,17 +115,17 @@ const w = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker
         value: S,
         defaultValue: k,
         processValue: d,
-        helperText: T,
+        helperText: F,
         optional: f,
-        error: F,
-        disabled: D,
+        error: g,
+        disabled: T,
         onBlur: R,
         validate: (e, t)=>c(e) ? n == null ? void 0 : n(e, t) : v.formDateOutOfRangeError,
         onChange: y,
         onChangeValue: (e, t)=>{
             c(e) && (a == null || a(e, t));
         }
-    }), g = /* @__PURE__ */ r(x, _object_spread_props(_object_spread({}, l, p), {
+    }), D = /* @__PURE__ */ r(x, _object_spread_props(_object_spread({}, l, p), {
         min: i ? o(i) : void 0,
         max: s ? o(s) : void 0,
         type: "datetime-local",
@@ -132,12 +136,12 @@ const w = /*#__PURE__*/ m.lazy(()=>import(/* webpackChunkName: "date-time-picker
                 right: 16,
                 pointerEvents: "none"
             },
-            children: /* @__PURE__ */ r(E, {})
+            children: /* @__PURE__ */ r(w, {})
         })
     }));
-    return u || b() ? g : /* @__PURE__ */ r(m.Suspense, {
-        fallback: g,
-        children: /* @__PURE__ */ r(w, _object_spread_props(_object_spread({}, l, p), {
+    return u || b() ? D : /* @__PURE__ */ r(m.Suspense, {
+        fallback: D,
+        children: /* @__PURE__ */ r(j, _object_spread_props(_object_spread({}, l, p), {
             optional: f,
             withTime: !0,
             isValidDate: (e)=>c(o(e.toDate()))