@telefonica/mistica 16.3.0 → 16.4.0

package/dist-es/text-field-components.js

@@ -51,111 +51,129 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as c, jsx as r, Fragment as C } from "react/jsx-runtime";
-import * as g from "react";
-import m from "classnames";
-import { useIsInverseOrMediaVariant as I } from "./theme-variant-context.js";
-import { useTheme as S } from "./hooks.js";
+import { jsxs as c, jsx as e, Fragment as S } from "react/jsx-runtime";
+import * as v from "react";
+import f from "classnames";
+import { useIsInverseOrMediaVariant as T } from "./theme-variant-context.js";
+import { useTheme as C } from "./hooks.js";
 import { Text1 as x } from "./text.js";
-import { labelContainer as T, shrinked as E, labelText as F, helperText as v, leftHelperText as O, warnIcon as k, fieldContainer as W, fullWidth as A, normalWidth as L, disabled as P, field as j, background as b, helperContainer as w } from "./text-field-components.css-mistica.js";
+import { labelContainer as I, shrinked as O, labelText as k, helperText as y, leftHelperText as E, warnIcon as F, rightHelperText as H, fieldContainer as W, fullWidth as w, normalWidth as A, disabled as P, field as R, background as g, helperContainer as j } from "./text-field-components.css-mistica.js";
 import { vars as t } from "./skins/skin-contract.css-mistica.js";
 import { getPrefixedDataAttributes as D } from "./utils/dom.js";
-import { formFieldOptionalLabelSuffix as H } from "./text-tokens.js";
-import R from "./generated/mistica-icons/icon-warning-regular.js";
-const U = (param)=>{
-    let { shrinkLabel: o, forId: l, inputState: e, error: s, children: i, style: a, optional: n } = param;
-    const f = o || e === "focused" || e === "filled", [u, h] = g.useState("initial"), { texts: d, t: y } = S();
-    g.useEffect(()=>{
-        const N = setTimeout(()=>{
-            process.env.NODE_ENV !== "test" && h("transform 150ms, width 150ms");
+import { formFieldOptionalLabelSuffix as V } from "./text-tokens.js";
+import q from "./generated/mistica-icons/icon-warning-regular.js";
+import B from "./screen-reader-only.js";
+const Z = (param)=>{
+    let { shrinkLabel: o, forId: d, inputState: r, error: s, children: l, style: i, optional: a } = param;
+    const n = o || r === "focused" || r === "filled", [m, p] = v.useState("initial"), { texts: u, t: N } = C();
+    v.useEffect(()=>{
+        const b = setTimeout(()=>{
+            process.env.NODE_ENV !== "test" && p("transform 150ms, width 150ms");
         });
         return ()=>{
-            clearTimeout(N);
+            clearTimeout(b);
         };
     }, []);
-    let p = t.colors.textSecondary;
-    return s && e !== "default" ? p = t.colors.textError : e === "focused" && (p = t.colors.textActivated), /* @__PURE__ */ c("label", {
-        className: m(T, {
-            [E]: f
+    let h = t.colors.textSecondary;
+    return s && r !== "default" ? h = t.colors.textError : r === "focused" && (h = t.colors.textActivated), /* @__PURE__ */ c("label", {
+        className: f(I, {
+            [O]: n
         }),
-        htmlFor: l,
+        htmlFor: d,
         style: _object_spread_props(_object_spread({
-            color: p
-        }, a), {
-            transition: u
+            color: h
+        }, i), {
+            transition: m
         }),
+        "data-testid": "label",
         children: [
-            /* @__PURE__ */ r("span", {
-                className: F,
-                children: i
+            /* @__PURE__ */ e("span", {
+                className: k,
+                children: l
             }),
-            n ? /* @__PURE__ */ c("span", {
+            a ? /* @__PURE__ */ c("span", {
                 children: [
                     "\xa0(",
-                    d.formFieldOptionalLabelSuffix || y(H),
+                    u.formFieldOptionalLabelSuffix || N(V),
                     ")"
                 ]
             }) : null
         ]
     });
-}, X = (param)=>{
-    let { leftText: o, rightText: l, error: e, id: s } = param;
-    const i = I(), a = i ? t.colors.textPrimaryInverse : e ? t.colors.textError : t.colors.textSecondary, n = i ? t.colors.textPrimaryInverse : t.colors.textSecondary;
-    return /* @__PURE__ */ c(C, {
+}, $ = (param)=>{
+    let { leftText: o, leftTextId: d, rightText: r, rightTextId: s, rightTextLabel: l, error: i } = param;
+    const a = T(), n = a ? t.colors.textPrimaryInverse : i ? t.colors.textError : t.colors.textSecondary, m = a ? t.colors.textPrimaryInverse : t.colors.textSecondary;
+    return /* @__PURE__ */ c(S, {
         children: [
             o && /* @__PURE__ */ c("p", {
-                className: m(v, O),
+                className: f(y, E),
+                "data-testid": i ? "errorText" : "helperText",
                 children: [
-                    e && /* @__PURE__ */ r(x, {
+                    i && /* @__PURE__ */ e(x, {
                         regular: !0,
-                        children: /* @__PURE__ */ r(R, {
-                            color: a,
-                            className: k
+                        children: /* @__PURE__ */ e(q, {
+                            color: n,
+                            className: F
                         })
                     }),
-                    /* @__PURE__ */ r(x, {
-                        color: a,
+                    /* @__PURE__ */ e(x, {
+                        color: n,
                         regular: !0,
-                        id: s,
+                        id: d,
                         children: o
                     })
                 ]
             }),
-            l && /* @__PURE__ */ r("div", {
-                className: m(v),
-                children: /* @__PURE__ */ r(x, {
-                    color: n,
+            r && /* @__PURE__ */ e("div", {
+                className: f(y, {
+                    [H]: !!o
+                }),
+                "data-testid": "endHelperText",
+                children: /* @__PURE__ */ c(x, {
+                    color: m,
                     regular: !0,
                     as: "p",
                     textAlign: "right",
-                    children: l
+                    wordBreak: !1,
+                    id: s,
+                    children: [
+                        l && /* @__PURE__ */ e(B, {
+                            children: /* @__PURE__ */ e("span", {
+                                children: l
+                            })
+                        }),
+                        /* @__PURE__ */ e("span", {
+                            "aria-hidden": l !== void 0,
+                            children: r
+                        })
+                    ]
                 })
             })
         ]
     });
-}, Y = (param)=>{
-    let { multiline: o, disabled: l, children: e, helperText: s, className: i, fieldRef: a, fullWidth: n, readOnly: f, dataAttributes: u } = param;
+}, ee = (param)=>{
+    let { multiline: o, disabled: d, children: r, helperText: s, className: l, fieldRef: i, fullWidth: a, readOnly: n, dataAttributes: m } = param;
     return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ c("div", _object_spread_props(_object_spread({
-        className: m(W, n ? A : L, {
-            [P]: l
+        className: f(W, a ? w : A, {
+            [P]: d
         }),
-        onClick: (h)=>{
-            var d;
-            (d = h.currentTarget.querySelector(o ? "textarea" : "input")) == null || d.focus();
+        onClick: (p)=>{
+            var u;
+            (u = p.currentTarget.querySelector(o ? "textarea" : "input")) == null || u.focus();
         }
-    }, D(u)), {
+    }, D(m)), {
         children: [
-            /* @__PURE__ */ r("div", {
-                className: m(j, f ? b.readOnly : b.default, i),
-                ref: a,
-                children: e
+            /* @__PURE__ */ e("div", {
+                className: f(R, n ? g.readOnly : g.default, l),
+                ref: i,
+                children: r
             }),
-            s && /* @__PURE__ */ r("div", {
-                className: w,
+            s && /* @__PURE__ */ e("div", {
+                className: j,
                 children: s
             })
         ]
     })));
 };
-export { Y as FieldContainer, X as HelperText, U as Label };
+export { ee as FieldContainer, $ as HelperText, Z as Label };

package/dist-es/text-field.js

@@ -94,8 +94,8 @@ const I = (i, t, r, c)=>{
         r,
         i
     ]);
-}, K = /*#__PURE__*/ f.forwardRef((_param, F)=>{
-    var { disabled: i, error: t, helperText: r, name: c, label: m, optional: a, validate: p, onChangeValue: d, onChange: R, value: T, defaultValue: x, onBlur: l, onFocus: u, onPress: g, dataAttributes: v } = _param, s = _object_without_properties(_param, [
+}, K = /*#__PURE__*/ f.forwardRef((_param, v)=>{
+    var { disabled: i, error: t, helperText: r, name: c, label: m, optional: a, validate: d, onChangeValue: p, onChange: T, value: x, defaultValue: R, onBlur: n, onFocus: u, onPress: F, dataAttributes: g } = _param, s = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -113,7 +113,7 @@ const I = (i, t, r, c)=>{
         "dataAttributes"
     ]);
     const e = f.useRef(null), b = (o)=>o, h = (o)=>{
-        s.multiline && e.current && (e.current.scrollTop = 0), l == null || l(o);
+        s.multiline && e.current && (e.current.scrollTop = 0), n == null || n(o);
     }, y = (o)=>{
         s.multiline && setTimeout(()=>{
             if (e.current) {
@@ -121,29 +121,30 @@ const I = (i, t, r, c)=>{
                 e.current.value = "", e.current.value = A, e.current.scrollTop = e.current.scrollHeight;
             }
         }, 0), u == null || u(o);
-    }, n = j({
+    }, l = j({
         name: c,
         label: m,
-        value: T,
-        defaultValue: x,
+        value: x,
+        defaultValue: R,
         processValue: b,
         helperText: r,
         optional: a,
         error: t,
         disabled: i,
         onBlur: h,
-        validate: p,
-        onChange: R,
-        onChangeValue: d
+        validate: d,
+        onChange: T,
+        onChangeValue: p
     });
-    return I(e.current, n.value, s.maxLength, n.onChange), /* @__PURE__ */ E(k, _object_spread_props(_object_spread({}, s, n), {
-        onClick: g,
-        inputRef: w(e, n.inputRef, F),
+    return I(e.current, l.value, s.maxLength, l.onChange), /* @__PURE__ */ E(k, _object_spread_props(_object_spread({}, s, l), {
+        onClick: F,
+        inputRef: w(e, l.inputRef, v),
         onFocus: y,
         type: "text",
         dataAttributes: _object_spread({
-            "component-name": "TextField"
-        }, v)
+            "component-name": "TextField",
+            testid: "TextField"
+        }, g)
     }));
 }), G = K;
 export { G as default };

package/dist-es/text-link.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-link.css.ts.vanilla.css-mistica.js";
-var v = {
-    default: "_1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2j",
-    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2k",
-    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfi8 _1y2v1nfhn _1y2v1nfkk _1y2v1nf2j"
+var r = {
+    default: "_1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2l",
+    inverseLight: "_1m1n0pr6 _1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2m",
+    inverseDark: "_1m1n0pr7 _1m1n0pr1 _1y2v1nfic _1y2v1nfhr _1y2v1nfko _1y2v1nf2l"
 };
-export { v as variants };
+export { r as variants };

package/dist-es/text-tokens.js

@@ -113,7 +113,7 @@ const e = {
     en: "Invalid date",
     de: "Unzul\xe4ssiges Datum",
     pt: "Data n\xe3o permitida"
-}, S = {
+}, $ = {
     es: "Email incorrecto",
     en: "Invalid email",
     de: "Falsche E-Mail-Adresse",
@@ -123,6 +123,11 @@ const e = {
     en: "Incorrect IBAN",
     de: "Falsche IBAN",
     pt: "IBAN incorreto"
+}, S = {
+    es: "1$s de 2$s caracteres",
+    en: "1$s of 2$s characters",
+    de: "1$s von 2$s Zeichen",
+    pt: "1$s de 2$s caracteres"
 }, E = {
     es: "Cerrar",
     en: "Close",
@@ -138,87 +143,87 @@ const e = {
     en: "menu",
     de: "Men\xfc",
     pt: "menu"
-}, $ = {
+}, x = {
     es: "Abrir men\xfa de navegaci\xf3n",
     en: "Open navigation menu",
     de: "Navigationsmen\xfc \xf6ffnen",
     pt: "Abrir menu de navega\xe7\xe3o"
-}, x = {
+}, D = {
     es: "Cerrar men\xfa de navegaci\xf3n",
     en: "Close navigation menu",
     de: "Navigationsmen\xfc schlie\xdfen",
     pt: "Fechar menu de navega\xe7\xe3o"
-}, D = {
+}, I = {
     es: "Atr\xe1s",
     en: "Back",
     de: "Zur\xfcck",
     pt: "Voltar"
-}, I = {
+}, N = {
     es: "Borrar",
     en: "Clear",
     de: "L\xf6schen",
     pt: "Apagar"
-}, N = {
+}, P = {
     es: "siguiente",
     en: "next",
     de: "n\xe4chste",
     pt: "pr\xf3ximo"
-}, P = {
+}, k = {
     es: "anterior",
     en: "previous",
     de: "vorherige",
     pt: "anterior"
-}, k = {
+}, F = {
     es: "Reproducir",
     en: "Play",
     de: "Abspielen",
     pt: "Reproduzir"
-}, F = {
+}, w = {
     es: "Pausar",
     en: "Pause",
     de: "Pausieren",
     pt: "Pausar"
-}, w = {
+}, O = {
     es: "Continuar",
     en: "Continue",
     de: "Fortfahren",
     pt: "Continuar"
-}, O = {
+}, T = {
     es: "completo",
     en: "completed",
     de: "vollendet",
     pt: "conclu\xeddo"
-}, T = {
+}, R = {
     es: "Paso 1$s de 2$s",
     en: "Step 1$s of 2$s",
     de: "Schritt 1$s von 2$s",
     pt: "Etapa 1$s de 2$s"
-}, R = {
+}, H = {
     es: "D\xedgito 1$s de 2$s",
     en: "Digit 1$s of 2$s",
     de: "Ziffer 1$s von 2$s",
     pt: "D\xedgito 1$s de 2$s"
-}, H = {
+}, j = {
     es: "Borrar elemento",
     en: "Remove element",
     de: "Element entfernen",
     pt: "Remover elemento"
-}, j = {
+}, z = {
     es: "Aumentar valor",
     en: "Increase value",
     de: "Wert steigern",
     pt: "aumentar valor"
-}, z = {
+}, q = {
     es: "Disminuir valor",
     en: "Decrease value",
     de: "Wert verringern",
     pt: "diminuir valor"
-}, q = {
+}, W = {
     es: "cantidad",
     en: "quantity",
     de: "menge",
     pt: "quantidade"
-}, W = {
+}, Z = {
     es: "m\xednimo",
     en: "minimum of",
     de: "minimal",
@@ -228,115 +233,115 @@ const e = {
     en: "maximum of",
     de: "maximal",
     pt: "m\xe1ximo"
-}, Z = {
+}, G = {
     es: "d",
     en: "d",
     de: "Tg.",
     pt: "d"
-}, G = {
+}, J = {
     es: "h",
     en: "h",
     de: "Std.",
     pt: "h"
-}, J = {
+}, Q = {
     es: "min",
     en: "min",
     de: "Min.",
     pt: "min"
-}, Q = {
+}, Y = {
     es: "s",
     en: "s",
     de: "Sek.",
     pt: "s"
-}, Y = {
+}, U = {
     es: "y",
     en: "and",
     de: "und",
     pt: "e"
-}, U = {
+}, X = {
     es: "d\xeda",
     en: "day",
     de: "Tag",
     pt: "dia"
-}, X = {
+}, _ = {
     es: "d\xedas",
     en: "days",
     de: "Tage",
     pt: "dias"
-}, _ = {
+}, ee = {
     es: "hora",
     en: "hour",
     de: "Stunde",
     pt: "hora"
-}, ee = {
+}, ne = {
     es: "horas",
     en: "hours",
     de: "Stunden",
     pt: "horas"
-}, ne = {
+}, te = {
     es: "minuto",
     en: "minute",
     de: "Minute",
     pt: "minuto"
-}, te = {
+}, oe = {
     es: "minutos",
     en: "minutes",
     de: "Minuten",
     pt: "minutos"
-}, oe = {
+}, se = {
     es: "segundo",
     en: "second",
     de: "Sekunde",
     pt: "segundo"
-}, se = {
+}, re = {
     es: "segundos",
     en: "seconds",
     de: "Sekunden",
     pt: "segundos"
-}, re = {
+}, ae = {
     es: "min",
     en: "min",
     de: "Min.",
     pt: "min"
-}, ae = {
+}, ie = {
     es: "seg",
     en: "sec",
     de: "Sek.",
     pt: "seg"
-}, ie = {
+}, de = {
     es: "Acciones",
     en: "Actions",
     de: "Aktionen",
     pt: "A\xe7\xf5es"
-}, de = {
+}, ce = {
     es: "muy malo",
     en: "very bad",
     de: "sehr schlecht",
     pt: "muito ruim"
-}, ce = {
+}, le = {
     es: "malo",
     en: "bad",
     de: "schlecht",
     pt: "ruim"
-}, le = {
+}, ue = {
     es: "regular",
     en: "regular",
     de: "regular",
     pt: "regular"
-}, ue = {
+}, me = {
     es: "bueno",
     en: "good",
     de: "gut",
     pt: "bom"
-}, me = {
+}, pe = {
     es: "muy bueno",
     en: "very good",
     de: "sehr gut",
     pt: "muito bom"
-}, pe = {
+}, ge = {
     es: "1$s de 2$s",
     en: "1$s out of 2$s",
     de: "1$s von 2$s",
     pt: "1$s de 2$s"
 };
-export { D as backNavigationBar, N as carouselNextButton, P as carouselPrevButton, I as clearButton, E as closeButtonLabel, x as closeNavigationMenu, z as counterDecreaseLabel, j as counterIncreaseLabel, K as counterMaxValue, W as counterMinValue, q as counterQuantity, H as counterRemoveLabel, d as dialogAcceptButton, i as dialogCancelButton, t as disablePasswordVisibility, n as enablePasswordVisibility, e as expirationDatePlaceholder, C as formCreditCardCvvError, g as formCreditCardCvvLabel, f as formCreditCardCvvTooltipAmex, v as formCreditCardCvvTooltipVisaMc, h as formCreditCardCvvTooltipVisaMcButtonClose, b as formCreditCardCvvTooltipVisaMcButtonOpen, V as formCreditCardExpirationError, p as formCreditCardExpirationLabel, L as formCreditCardNumberError, m as formCreditCardNumberLabel, A as formDateOutOfRangeError, S as formEmailError, c as formErrorsAlertMessage, u as formFieldErrorIsMandatory, l as formFieldOptionalLabelSuffix, M as formIbanError, y as formSearchClear, r as linkOpensInCurrentPage, s as linkOpensInNewTab, o as loading, B as menuLabelSuffix, a as modalClose, $ as openNavigationMenu, F as pauseIconButtonLabel, R as pinFieldInputLabel, k as playIconButtonLabel, O as progressBarCompletedLabel, T as progressBarStepLabel, ce as ratingBadLabel, ue as ratingGoodLabel, pe as ratingQuantitativeLabel, le as ratingRegularLabel, de as ratingVeryBadLabel, me as ratingVeryGoodLabel, w as sheetConfirmButton, ie as tableActionsHeaderLabel, Y as timerAnd, U as timerDayLongLabel, X as timerDaysLongLabel, Z as timerDaysShortLabel, re as timerDisplayMinutesLabel, ae as timerDisplaySecondsLabel, _ as timerHourLongLabel, ee as timerHoursLongLabel, G as timerHoursShortLabel, ne as timerMinuteLongLabel, te as timerMinutesLongLabel, J as timerMinutesShortLabel, oe as timerSecondLongLabel, se as timerSecondsLongLabel, Q as timerSecondsShortLabel };
+export { I as backNavigationBar, P as carouselNextButton, k as carouselPrevButton, N as clearButton, E as closeButtonLabel, D as closeNavigationMenu, q as counterDecreaseLabel, z as counterIncreaseLabel, K as counterMaxValue, Z as counterMinValue, W as counterQuantity, j as counterRemoveLabel, d as dialogAcceptButton, i as dialogCancelButton, t as disablePasswordVisibility, n as enablePasswordVisibility, e as expirationDatePlaceholder, C as formCreditCardCvvError, g as formCreditCardCvvLabel, f as formCreditCardCvvTooltipAmex, v as formCreditCardCvvTooltipVisaMc, h as formCreditCardCvvTooltipVisaMcButtonClose, b as formCreditCardCvvTooltipVisaMcButtonOpen, V as formCreditCardExpirationError, p as formCreditCardExpirationLabel, L as formCreditCardNumberError, m as formCreditCardNumberLabel, A as formDateOutOfRangeError, $ as formEmailError, c as formErrorsAlertMessage, u as formFieldErrorIsMandatory, l as formFieldOptionalLabelSuffix, M as formIbanError, y as formSearchClear, S as formTextMultilineMaxCount, r as linkOpensInCurrentPage, s as linkOpensInNewTab, o as loading, B as menuLabelSuffix, a as modalClose, x as openNavigationMenu, w as pauseIconButtonLabel, H as pinFieldInputLabel, F as playIconButtonLabel, T as progressBarCompletedLabel, R as progressBarStepLabel, le as ratingBadLabel, me as ratingGoodLabel, ge as ratingQuantitativeLabel, ue as ratingRegularLabel, ce as ratingVeryBadLabel, pe as ratingVeryGoodLabel, O as sheetConfirmButton, de as tableActionsHeaderLabel, U as timerAnd, X as timerDayLongLabel, _ as timerDaysLongLabel, G as timerDaysShortLabel, ae as timerDisplayMinutesLabel, ie as timerDisplaySecondsLabel, ee as timerHourLongLabel, ne as timerHoursLongLabel, J as timerHoursShortLabel, te as timerMinuteLongLabel, oe as timerMinutesLongLabel, Q as timerMinutesShortLabel, se as timerSecondLongLabel, re as timerSecondsLongLabel, Y as timerSecondsShortLabel };