@telefonica/mistica 14.28.1 → 14.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.d.ts +3 -0
  3. package/dist/accordion.js +71 -70
  4. package/dist/button-layout.css-mistica.js +11 -19
  5. package/dist/button-layout.css.d.ts +1 -5
  6. package/dist/button-layout.js +19 -90
  7. package/dist/button.css-mistica.js +18 -21
  8. package/dist/counter.css-mistica.js +48 -0
  9. package/dist/counter.css.d.ts +11 -0
  10. package/dist/counter.css.ts.vanilla.css-mistica.js +11 -0
  11. package/dist/counter.d.ts +19 -0
  12. package/dist/counter.js +240 -0
  13. package/dist/generated/mistica-icons/icon-add-more-filled.js +1 -1
  14. package/dist/generated/mistica-icons/icon-add-more-light.js +1 -1
  15. package/dist/generated/mistica-icons/icon-add-more-regular.js +2 -2
  16. package/dist/generated/mistica-icons/icon-subtract-filled.d.ts +4 -0
  17. package/dist/generated/mistica-icons/icon-subtract-light.js +21 -10
  18. package/dist/generated/mistica-icons/icon-subtract-regular.js +29 -8
  19. package/dist/index.d.ts +1 -0
  20. package/dist/index.js +4 -0
  21. package/dist/list.d.ts +3 -0
  22. package/dist/list.js +92 -92
  23. package/dist/loading-bar.js +5 -4
  24. package/dist/menu.js +11 -10
  25. package/dist/navigation-bar.js +27 -26
  26. package/dist/package-version.js +1 -1
  27. package/dist/snackbar.css-mistica.js +16 -13
  28. package/dist/snackbar.css.d.ts +3 -2
  29. package/dist/snackbar.d.ts +5 -1
  30. package/dist/snackbar.js +119 -64
  31. package/dist/theme.d.ts +6 -0
  32. package/dist/theme.js +52 -28
  33. package/dist-es/accordion.js +79 -78
  34. package/dist-es/button-layout.css-mistica.js +4 -6
  35. package/dist-es/button-layout.js +27 -98
  36. package/dist-es/button.css-mistica.js +3 -3
  37. package/dist-es/counter.css-mistica.js +4 -0
  38. package/dist-es/counter.css.ts.vanilla.css-mistica.js +2 -0
  39. package/dist-es/counter.js +187 -0
  40. package/dist-es/generated/mistica-icons/icon-add-more-filled.js +1 -1
  41. package/dist-es/generated/mistica-icons/icon-add-more-light.js +1 -1
  42. package/dist-es/generated/mistica-icons/icon-add-more-regular.js +2 -2
  43. package/dist-es/generated/mistica-icons/icon-subtract-light.js +24 -13
  44. package/dist-es/generated/mistica-icons/icon-subtract-regular.js +33 -12
  45. package/dist-es/index.js +1765 -1764
  46. package/dist-es/list.js +125 -125
  47. package/dist-es/loading-bar.js +12 -11
  48. package/dist-es/menu.js +9 -8
  49. package/dist-es/navigation-bar.js +26 -25
  50. package/dist-es/package-version.js +1 -1
  51. package/dist-es/snackbar.css-mistica.js +5 -2
  52. package/dist-es/snackbar.js +140 -85
  53. package/dist-es/style.css +1 -1
  54. package/dist-es/theme.js +56 -32
  55. package/package.json +1 -1
@@ -0,0 +1,187 @@
1
+ function _define_property(obj, key, value) {
2
+ if (key in obj) {
3
+ Object.defineProperty(obj, key, {
4
+ value: value,
5
+ enumerable: true,
6
+ configurable: true,
7
+ writable: true
8
+ });
9
+ } else {
10
+ obj[key] = value;
11
+ }
12
+ return obj;
13
+ }
14
+ function _object_spread(target) {
15
+ for(var i = 1; i < arguments.length; i++){
16
+ var source = arguments[i] != null ? arguments[i] : {};
17
+ var ownKeys = Object.keys(source);
18
+ if (typeof Object.getOwnPropertySymbols === "function") {
19
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
20
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
21
+ }));
22
+ }
23
+ ownKeys.forEach(function(key) {
24
+ _define_property(target, key, source[key]);
25
+ });
26
+ }
27
+ return target;
28
+ }
29
+ function ownKeys(object, enumerableOnly) {
30
+ var keys = Object.keys(object);
31
+ if (Object.getOwnPropertySymbols) {
32
+ var symbols = Object.getOwnPropertySymbols(object);
33
+ if (enumerableOnly) {
34
+ symbols = symbols.filter(function(sym) {
35
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
36
+ });
37
+ }
38
+ keys.push.apply(keys, symbols);
39
+ }
40
+ return keys;
41
+ }
42
+ function _object_spread_props(target, source) {
43
+ source = source != null ? source : {};
44
+ if (Object.getOwnPropertyDescriptors) {
45
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
46
+ } else {
47
+ ownKeys(Object(source)).forEach(function(key) {
48
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
49
+ });
50
+ }
51
+ return target;
52
+ }
53
+ import { jsx as r, jsxs as I } from "react/jsx-runtime";
54
+ import * as V from "react";
55
+ import { getPrefixedDataAttributes as L } from "./utils/dom.js";
56
+ import { counter as R, disabled as g, buttonContainer as B, hasTrashIcon as j, isButtonDisabled as M, button as y, buttonBackground as S, decreaseButtonIcon as E, trashButtonIcon as O, valueContainer as Q, defaultButtonIcon as Z } from "./counter.css-mistica.js";
57
+ import { useThemeVariant as _, ThemeVariant as q } from "./theme-variant-context.js";
58
+ import { vars as c } from "./skins/skin-contract.css-mistica.js";
59
+ import w from "./inline.js";
60
+ import { Text3 as F } from "./text.js";
61
+ import { BaseTouchable as P } from "./touchable.js";
62
+ import G from "./generated/mistica-icons/icon-subtract-regular.js";
63
+ import H from "./generated/mistica-icons/icon-add-more-regular.js";
64
+ import J from "./generated/mistica-icons/icon-trash-can-regular.js";
65
+ import { useTheme as K } from "./hooks.js";
66
+ import N from "classnames";
67
+ import U from "./screen-reader-only.js";
68
+ const x = 20, W = (param)=>{
69
+ let { value: h , defaultValue: b , min: m , max: s , onChangeValue: a } = param;
70
+ const i = h !== void 0, f = V.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
71
+ m,
72
+ s
73
+ ]), [e, p] = V.useState(f(b)), v = (n)=>{
74
+ i || p(n), a == null || a(n);
75
+ };
76
+ return [
77
+ i ? f(h) : e,
78
+ v
79
+ ];
80
+ }, X = (param)=>{
81
+ let { value: h , defaultValue: b , onChangeValue: m , onRemove: s , min: a , max: i , dataAttributes: f , disabled: e , removeLabel: p , increaseLabel: v , decreaseLabel: n , valueLabel: C } = param;
82
+ const A = _(), { texts: u } = K(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
83
+ value: h,
84
+ defaultValue: b,
85
+ min: l,
86
+ max: d,
87
+ onChangeValue: m
88
+ }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>n === void 0 ? u.counterDecreaseLabel : n, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
89
+ return /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
90
+ className: N(R, {
91
+ [g]: e
92
+ })
93
+ }, L(f, "Counter")), {
94
+ style: {
95
+ border: `1px solid ${A === "inverse" ? c.colors.backgroundContainer : c.colors.border}`
96
+ },
97
+ children: /* @__PURE__ */ I(w, {
98
+ space: 8,
99
+ alignItems: "center",
100
+ children: [
101
+ /* @__PURE__ */ r("div", {
102
+ className: N(B, {
103
+ [j]: o,
104
+ [M]: e || !o && t === l,
105
+ [g]: !e && !o && t === l
106
+ }),
107
+ children: /* @__PURE__ */ I(P, {
108
+ className: y,
109
+ disabled: !o && t === l || e,
110
+ onPress: ()=>o ? s == null ? void 0 : s() : T(t - 1),
111
+ "aria-label": o ? D() : k(),
112
+ children: [
113
+ /* @__PURE__ */ r("div", {
114
+ className: S
115
+ }),
116
+ /* @__PURE__ */ r("div", {
117
+ className: E,
118
+ "aria-hidden": o,
119
+ children: /* @__PURE__ */ r(G, {
120
+ size: x,
121
+ color: t === l && !o || e ? c.colors.control : c.colors.controlActivated
122
+ })
123
+ }),
124
+ /* @__PURE__ */ r("div", {
125
+ className: O,
126
+ "aria-hidden": !o,
127
+ children: /* @__PURE__ */ r(J, {
128
+ size: x,
129
+ color: c.colors.controlError
130
+ })
131
+ })
132
+ ]
133
+ })
134
+ }),
135
+ /* @__PURE__ */ r("div", {
136
+ className: Q,
137
+ style: {
138
+ width: `${Math.max(3, String(d).length) * 1.25}ch`
139
+ },
140
+ children: /* @__PURE__ */ I(q, {
141
+ variant: "default",
142
+ children: [
143
+ /* @__PURE__ */ r("div", {
144
+ "aria-hidden": !0,
145
+ children: /* @__PURE__ */ r(F, {
146
+ regular: !0,
147
+ color: c.colors.textPrimary,
148
+ children: t
149
+ })
150
+ }),
151
+ /* @__PURE__ */ r(U, {
152
+ children: /* @__PURE__ */ r("span", {
153
+ children: z()
154
+ })
155
+ })
156
+ ]
157
+ })
158
+ }),
159
+ /* @__PURE__ */ r("div", {
160
+ className: N(B, {
161
+ [M]: e || t === d,
162
+ [g]: !e && t === d
163
+ }),
164
+ children: /* @__PURE__ */ I(P, {
165
+ className: y,
166
+ disabled: t === d || e,
167
+ onPress: ()=>T(t + 1),
168
+ "aria-label": $(),
169
+ children: [
170
+ /* @__PURE__ */ r("div", {
171
+ className: S
172
+ }),
173
+ /* @__PURE__ */ r("div", {
174
+ className: Z,
175
+ children: /* @__PURE__ */ r(H, {
176
+ size: x,
177
+ color: t === d || e ? c.colors.control : c.colors.controlActivated
178
+ })
179
+ })
180
+ ]
181
+ })
182
+ })
183
+ ]
184
+ })
185
+ }));
186
+ }, hr = X;
187
+ export { hr as default };
@@ -94,7 +94,7 @@ const a = (_param)=>{
94
94
  }, s), {
95
95
  children: /* @__PURE__ */ r("path", {
96
96
  fill: l,
97
- d: "M12 4a1 1 0 0 0-1 1v5.498H6.002a1.002 1.002 0 1 0 0 2.004H11V18a1 1 0 1 0 2 0v-5.498h4.998a1.002 1.002 0 1 0 0-2.004H13V5a1 1 0 0 0-1-1Z"
97
+ d: "M12 2a1 1 0 0 0-1 1v7.498H3.002a1.002 1.002 0 1 0 0 2.004H11V21a1 1 0 1 0 2 0v-8.498h7.998a1.002 1.002 0 1 0 0-2.004H13V3a1 1 0 0 0-1-1Z"
98
98
  })
99
99
  }));
100
100
  }, h = a;
@@ -95,7 +95,7 @@ const v = (_param)=>{
95
95
  }, e), {
96
96
  children: /* @__PURE__ */ r("path", {
97
97
  fill: t,
98
- d: "M11.676 4.35a.35.35 0 1 1 .7 0v6.8h4.414a.35.35 0 1 1 0 .7h-4.414v6.8a.35.35 0 1 1-.7 0v-6.8H5.35a.35.35 0 1 1 0-.7h6.326v-6.8Zm6.752 7.72a.573.573 0 0 0 .572-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
98
+ d: "M11.676 2.35a.35.35 0 1 1 .7 0v8.8h7.414a.35.35 0 1 1 0 .7h-7.414v9.8a.35.35 0 1 1-.7 0v-9.8H2.35a.35.35 0 1 1 0-.7h9.326v-8.8Zm9.752 9.72a.573.573 0 0 0 .572-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
99
99
  })
100
100
  })) : /* @__PURE__ */ r("svg", _object_spread_props(_object_spread({
101
101
  width: o,
@@ -95,7 +95,7 @@ const v = (_param)=>{
95
95
  }, o), {
96
96
  children: /* @__PURE__ */ r("path", {
97
97
  fill: t,
98
- d: "M18.524 11.525h-6.057v-6.05a.475.475 0 0 0-.951 0v6.05H5.459a.476.476 0 1 0 0 .95h6.057v6.05a.476.476 0 0 0 .95 0v-6.05h6.058a.475.475 0 1 0 0-.95Z"
98
+ d: "M21.321 11.321h-8.643V2.68a.679.679 0 1 0-1.357 0v8.642H2.679a.679.679 0 1 0 0 1.357h8.642v8.643a.679.679 0 0 0 1.357 0v-8.643h8.643a.679.679 0 1 0 0-1.357Z"
99
99
  })
100
100
  })) : a.match(/^o2/i) ? /* @__PURE__ */ r("svg", _object_spread_props(_object_spread({
101
101
  width: e,
@@ -105,7 +105,7 @@ const v = (_param)=>{
105
105
  }, o), {
106
106
  children: /* @__PURE__ */ r("path", {
107
107
  fill: t,
108
- d: "M11.42 4.72a.722.722 0 0 1 .716-.716.722.722 0 0 1 .716.716l.003 6.064 5.426.003a.722.722 0 0 1 .716.716.84.84 0 0 1-.22.552c-.127.127-.3.16-.493.16l-5.432.003v6.073a.703.703 0 0 1-.713.712.722.722 0 0 1-.715-.715v-6.072l-5.712.005a.722.722 0 0 1-.716-.715.722.722 0 0 1 .716-.716l5.712-.006-.003-6.064Z"
108
+ d: "M11.42 2.72a.722.722 0 0 1 .716-.716.722.722 0 0 1 .716.716l.003 8.064 8.426.003a.722.722 0 0 1 .716.716.84.84 0 0 1-.22.552c-.127.127-.3.16-.493.16l-8.432.003v9.073a.703.703 0 0 1-.713.712.722.722 0 0 1-.715-.715v-9.072l-8.712.005a.722.722 0 0 1-.716-.715.722.722 0 0 1 .716-.716l8.711-.006-.002-8.064Z"
109
109
  })
110
110
  })) : /* @__PURE__ */ r("svg", _object_spread_props(_object_spread({
111
111
  width: e,
@@ -77,25 +77,36 @@ function _object_without_properties_loose(source, excluded) {
77
77
  }
78
78
  return target;
79
79
  }
80
- import { jsx as t } from "react/jsx-runtime";
80
+ import { jsx as o } from "react/jsx-runtime";
81
+ import { useTheme as h } from "../../hooks.js";
81
82
  import { useIsInverseVariant as c } from "../../theme-variant-context.js";
82
- import { vars as o } from "../../skins/skin-contract.css-mistica.js";
83
- const a = (_param)=>{
84
- var { color: e , size: r = 24 } = _param, s = _object_without_properties(_param, [
83
+ import { vars as i } from "../../skins/skin-contract.css-mistica.js";
84
+ const l = (_param)=>{
85
+ var { color: n , size: t = 24 } = _param, r = _object_without_properties(_param, [
85
86
  "color",
86
87
  "size"
87
88
  ]);
88
- const i = c(), n = e !== null && e !== void 0 ? e : i ? o.colors.inverse : o.colors.neutralHigh;
89
- return /* @__PURE__ */ t("svg", _object_spread_props(_object_spread({
90
- width: r,
91
- height: r,
89
+ const s = c(), e = n !== null && n !== void 0 ? n : s ? i.colors.inverse : i.colors.neutralHigh, { skinName: a } = h();
90
+ return a.match(/^o2/i) ? /* @__PURE__ */ o("svg", _object_spread_props(_object_spread({
91
+ width: t,
92
+ height: t,
92
93
  viewBox: "0 0 24 24",
93
94
  role: "presentation"
94
- }, s), {
95
- children: /* @__PURE__ */ t("path", {
96
- fill: n,
95
+ }, r), {
96
+ children: /* @__PURE__ */ o("path", {
97
+ fill: e,
98
+ d: "M19.79 11.15a.35.35 0 1 1 0 .7H2.35a.35.35 0 1 1 0-.7h17.44Zm1.639.92a.573.573 0 0 0 .571-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
99
+ })
100
+ })) : /* @__PURE__ */ o("svg", _object_spread_props(_object_spread({
101
+ width: t,
102
+ height: t,
103
+ viewBox: "0 0 24 24",
104
+ role: "presentation"
105
+ }, r), {
106
+ children: /* @__PURE__ */ o("path", {
107
+ fill: e,
97
108
  d: "M3 12.001c0-.333.269-.6.6-.6h16.803a.6.6 0 0 1-.002 1.199H3.599A.6.6 0 0 1 3 12.002Z"
98
109
  })
99
110
  }));
100
- }, m = a;
101
- export { m as default };
111
+ }, v = l;
112
+ export { v as default };
@@ -77,25 +77,46 @@ function _object_without_properties_loose(source, excluded) {
77
77
  }
78
78
  return target;
79
79
  }
80
- import { jsx as o } from "react/jsx-runtime";
81
- import { useIsInverseVariant as i } from "../../theme-variant-context.js";
82
- import { vars as t } from "../../skins/skin-contract.css-mistica.js";
83
- const l = (_param)=>{
84
- var { color: e , size: r = 24 } = _param, s = _object_without_properties(_param, [
80
+ import { jsx as t } from "react/jsx-runtime";
81
+ import { useTheme as h } from "../../hooks.js";
82
+ import { useIsInverseVariant as s } from "../../theme-variant-context.js";
83
+ import { vars as a } from "../../skins/skin-contract.css-mistica.js";
84
+ const c = (_param)=>{
85
+ var { color: n , size: r = 24 } = _param, e = _object_without_properties(_param, [
85
86
  "color",
86
87
  "size"
87
88
  ]);
88
- const n = i(), a = e !== null && e !== void 0 ? e : n ? t.colors.inverse : t.colors.neutralHigh;
89
- return /* @__PURE__ */ o("svg", _object_spread_props(_object_spread({
89
+ const l = s(), o = n !== null && n !== void 0 ? n : l ? a.colors.inverse : a.colors.neutralHigh, { skinName: i } = h();
90
+ return i.match(/^blau/i) ? /* @__PURE__ */ t("svg", _object_spread_props(_object_spread({
90
91
  width: r,
91
92
  height: r,
92
93
  viewBox: "0 0 24 24",
93
94
  role: "presentation"
94
- }, s), {
95
- children: /* @__PURE__ */ o("path", {
96
- fill: a,
95
+ }, e), {
96
+ children: /* @__PURE__ */ t("path", {
97
+ fill: o,
98
+ d: "M21.321 11.321H2.679a.679.679 0 1 0 0 1.357h18.642a.679.679 0 1 0 0-1.357Z"
99
+ })
100
+ })) : i.match(/^o2/i) ? /* @__PURE__ */ t("svg", _object_spread_props(_object_spread({
101
+ width: r,
102
+ height: r,
103
+ viewBox: "0 0 24 24",
104
+ role: "presentation"
105
+ }, e), {
106
+ children: /* @__PURE__ */ t("path", {
107
+ fill: o,
108
+ d: "M21.285 10.783a.722.722 0 0 1 .715.716.84.84 0 0 1-.219.551c-.127.128-.3.161-.493.161-11.82.004-6.036-.002-18.572.006A.722.722 0 0 1 2 11.5a.722.722 0 0 1 .716-.715c11.312-.008 6.967-.007 18.569-.003Z"
109
+ })
110
+ })) : /* @__PURE__ */ t("svg", _object_spread_props(_object_spread({
111
+ width: r,
112
+ height: r,
113
+ viewBox: "0 0 24 24",
114
+ role: "presentation"
115
+ }, e), {
116
+ children: /* @__PURE__ */ t("path", {
117
+ fill: o,
97
118
  d: "M3.001 12.047a.879.879 0 0 1 .828-.924h16.34a.876.876 0 0 1 .003 1.752H3.829A.876.876 0 0 1 3 12.047Z"
98
119
  })
99
120
  }));
100
- }, f = l;
101
- export { f as default };
121
+ }, d = c;
122
+ export { d as default };