@telefonica/mistica 16.1.0 → 16.2.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.
- package/css/mistica.css +1 -1
- package/dist/accordion.css-mistica.js +12 -9
- package/dist/accordion.css.d.ts +1 -0
- package/dist/accordion.js +36 -39
- package/dist/align.css-mistica.js +12 -0
- package/dist/align.css.d.ts +1 -0
- package/dist/align.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/align.d.ts +12 -0
- package/dist/align.js +79 -0
- package/dist/box.css-mistica.js +41 -0
- package/dist/box.css.d.ts +23 -0
- package/dist/box.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/box.d.ts +4 -0
- package/dist/box.js +39 -31
- package/dist/boxed.css-mistica.js +10 -5
- package/dist/boxed.css.d.ts +3 -0
- package/dist/boxed.js +20 -24
- package/dist/callout.css-mistica.js +12 -4
- package/dist/callout.css.d.ts +1 -0
- package/dist/callout.js +14 -22
- package/dist/card.css-mistica.js +26 -23
- package/dist/card.css.d.ts +1 -0
- package/dist/card.js +17 -23
- package/dist/community/advanced-data-card.css-mistica.js +32 -23
- package/dist/community/advanced-data-card.css.d.ts +3 -0
- package/dist/community/advanced-data-card.js +46 -55
- package/dist/empty-state.css-mistica.js +11 -8
- package/dist/empty-state.css.d.ts +1 -0
- package/dist/empty-state.js +10 -13
- package/dist/form.css-mistica.js +12 -0
- package/dist/form.css.d.ts +1 -0
- package/dist/form.js +8 -10
- package/dist/grid.css-mistica.js +143 -126
- package/dist/grid.css.d.ts +13 -0
- package/dist/grid.js +35 -38
- package/dist/hero.css-mistica.js +14 -8
- package/dist/hero.css.d.ts +2 -0
- package/dist/hero.js +17 -25
- package/dist/image.js +23 -25
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -0
- package/dist/inline.js +10 -11
- package/dist/list.css-mistica.js +12 -9
- package/dist/list.css.d.ts +1 -0
- package/dist/list.js +43 -46
- package/dist/loading-screen.js +16 -16
- package/dist/logo-blau.d.ts +1 -1
- package/dist/logo-blau.js +10 -10
- package/dist/logo-common.d.ts +1 -0
- package/dist/logo-movistar.d.ts +1 -1
- package/dist/logo-movistar.js +4 -4
- package/dist/logo-o2-new.d.ts +1 -1
- package/dist/logo-o2-new.js +5 -5
- package/dist/logo-o2.d.ts +1 -1
- package/dist/logo-o2.js +5 -5
- package/dist/logo-telefonica.d.ts +1 -1
- package/dist/logo-telefonica.js +4 -4
- package/dist/logo-tu.d.ts +1 -1
- package/dist/logo-tu.js +5 -5
- package/dist/logo-vivo.d.ts +1 -1
- package/dist/logo-vivo.js +7 -7
- package/dist/logo.d.ts +9 -8
- package/dist/logo.js +125 -102
- package/dist/navigation-bar.css-mistica.js +23 -20
- package/dist/navigation-bar.css.d.ts +1 -0
- package/dist/navigation-bar.js +30 -37
- package/dist/package-version.js +1 -1
- package/dist/phone-number-field.d.ts +1 -4
- package/dist/phone-number-field.js +52 -82
- package/dist/popover.d.ts +1 -0
- package/dist/popover.js +9 -10
- package/dist/sheet-common.css-mistica.js +5 -5
- package/dist/skeleton-base.js +10 -12
- package/dist/skeletons.css-mistica.js +11 -5
- package/dist/skeletons.css.d.ts +1 -0
- package/dist/snackbar.css-mistica.js +20 -14
- package/dist/snackbar.css.d.ts +3 -1
- package/dist/snackbar.js +65 -75
- package/dist/tag.css-mistica.js +15 -4
- package/dist/tag.css.d.ts +2 -0
- package/dist/tag.js +20 -24
- package/dist/text-field-base.d.ts +1 -1
- package/dist/text-field-components.css-mistica.js +16 -10
- package/dist/text-field-components.css.d.ts +1 -0
- package/dist/text-field-components.js +32 -35
- package/dist/timer.js +42 -43
- package/dist/tooltip.d.ts +3 -1
- package/dist/tooltip.js +106 -106
- package/dist/touchable.js +47 -42
- package/dist-es/accordion.css-mistica.js +3 -3
- package/dist-es/accordion.js +58 -61
- package/dist-es/align.css-mistica.js +3 -0
- package/dist-es/align.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/align.js +70 -0
- package/dist-es/box.css-mistica.js +24 -0
- package/dist-es/box.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/box.js +43 -35
- package/dist-es/boxed.css-mistica.js +5 -3
- package/dist-es/boxed.js +28 -32
- package/dist-es/callout.css-mistica.js +7 -2
- package/dist-es/callout.js +44 -52
- package/dist-es/card.css-mistica.js +4 -4
- package/dist-es/card.js +11 -17
- package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
- package/dist-es/community/advanced-data-card.js +90 -99
- package/dist-es/empty-state.css-mistica.js +3 -3
- package/dist-es/empty-state.js +19 -22
- package/dist-es/form.css-mistica.js +3 -0
- package/dist-es/form.js +12 -14
- package/dist-es/grid.css-mistica.js +123 -112
- package/dist-es/grid.js +38 -41
- package/dist-es/hero.css-mistica.js +2 -2
- package/dist-es/hero.js +36 -44
- package/dist-es/image.js +28 -30
- package/dist-es/index.js +1844 -1843
- package/dist-es/inline.js +19 -20
- package/dist-es/list.css-mistica.js +2 -2
- package/dist-es/list.js +75 -78
- package/dist-es/loading-screen.js +30 -30
- package/dist-es/logo-blau.js +11 -11
- package/dist-es/logo-movistar.js +5 -5
- package/dist-es/logo-o2-new.js +8 -8
- package/dist-es/logo-o2.js +8 -8
- package/dist-es/logo-telefonica.js +4 -4
- package/dist-es/logo-tu.js +8 -8
- package/dist-es/logo-vivo.js +16 -16
- package/dist-es/logo.js +132 -109
- package/dist-es/navigation-bar.css-mistica.js +11 -11
- package/dist-es/navigation-bar.js +80 -87
- package/dist-es/package-version.js +1 -1
- package/dist-es/phone-number-field.js +59 -89
- package/dist-es/popover.js +17 -18
- package/dist-es/sheet-common.css-mistica.js +2 -2
- package/dist-es/skeleton-base.js +15 -17
- package/dist-es/skeletons.css-mistica.js +5 -2
- package/dist-es/snackbar.css-mistica.js +4 -4
- package/dist-es/snackbar.js +93 -103
- package/dist-es/style.css +1 -1
- package/dist-es/tag.css-mistica.js +2 -2
- package/dist-es/tag.js +34 -38
- package/dist-es/text-field-components.css-mistica.js +5 -2
- package/dist-es/text-field-components.js +48 -51
- package/dist-es/timer.js +80 -81
- package/dist-es/tooltip.js +148 -148
- package/dist-es/touchable.js +55 -50
- package/package.json +1 -1
- package/dist/sprinkles.css-mistica.js +0 -2494
- package/dist-es/sprinkles.css-mistica.js +0 -2485
package/dist/timer.js
CHANGED
|
@@ -11,16 +11,15 @@ function _export(target, all) {
|
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
13
|
TextTimer: function() {
|
|
14
|
-
return
|
|
14
|
+
return Re;
|
|
15
15
|
},
|
|
16
16
|
Timer: function() {
|
|
17
|
-
return
|
|
17
|
+
return _e;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _jsxruntime = require("react/jsx-runtime");
|
|
21
21
|
const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
|
|
22
22
|
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
23
|
-
const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
|
|
24
23
|
const _hooks = require("./hooks.js");
|
|
25
24
|
const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
|
|
26
25
|
const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
|
|
@@ -129,7 +128,7 @@ function _object_spread_props(target, source) {
|
|
|
129
128
|
}
|
|
130
129
|
return target;
|
|
131
130
|
}
|
|
132
|
-
const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z,
|
|
131
|
+
const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, ge = $ * P, H = (s, a, o, i)=>{
|
|
133
132
|
a = i === "none" && a === "days" ? "hours" : a, o = i === "none" && o === "days" ? "hours" : o;
|
|
134
133
|
const c = [
|
|
135
134
|
"seconds",
|
|
@@ -168,20 +167,20 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
168
167
|
}, [
|
|
169
168
|
s
|
|
170
169
|
]);
|
|
171
|
-
const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L /
|
|
170
|
+
const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L / ge), S = l === "hours" ? g + h * $ : g, y = l === "minutes" ? M + V * (h * $ + S) : M, n = l === "seconds" ? D + X * (h * $ * V + S * V + y) : D, [r, d] = _react.useState(W({
|
|
172
171
|
days: h,
|
|
173
172
|
hours: S,
|
|
174
|
-
minutes:
|
|
175
|
-
seconds:
|
|
173
|
+
minutes: y,
|
|
174
|
+
seconds: n
|
|
176
175
|
}, o, i, a));
|
|
177
176
|
return _react.useEffect(()=>{
|
|
178
177
|
const u = W({
|
|
179
178
|
days: h,
|
|
180
179
|
hours: S,
|
|
181
|
-
minutes:
|
|
182
|
-
seconds:
|
|
180
|
+
minutes: y,
|
|
181
|
+
seconds: n
|
|
183
182
|
}, o, i, a);
|
|
184
|
-
if (!(0, _helpers.isEqual)(u,
|
|
183
|
+
if (!(0, _helpers.isEqual)(u, r)) {
|
|
185
184
|
d(u);
|
|
186
185
|
const N = {};
|
|
187
186
|
u.forEach((I)=>N[I.unit] = I.value), c == null || c(N);
|
|
@@ -189,15 +188,15 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
189
188
|
}, [
|
|
190
189
|
h,
|
|
191
190
|
S,
|
|
192
|
-
|
|
193
|
-
|
|
191
|
+
y,
|
|
192
|
+
n,
|
|
194
193
|
a,
|
|
195
194
|
o,
|
|
196
195
|
i,
|
|
197
|
-
|
|
196
|
+
r,
|
|
198
197
|
c
|
|
199
|
-
]),
|
|
200
|
-
},
|
|
198
|
+
]), r;
|
|
199
|
+
}, Re = (param)=>{
|
|
201
200
|
let { endTimestamp: s, labelType: a = "none", minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
|
|
202
201
|
const { texts: e, t } = (0, _hooks.useTheme)(), p = _react.useId(), l = U({
|
|
203
202
|
endTimestamp: s,
|
|
@@ -220,50 +219,50 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
220
219
|
hours: e.timerHoursLongLabel || t(_texttokens.timerHoursLongLabel),
|
|
221
220
|
minutes: e.timerMinutesLongLabel || t(_texttokens.timerMinutesLongLabel),
|
|
222
221
|
seconds: e.timerSecondsLongLabel || t(_texttokens.timerSecondsLongLabel)
|
|
223
|
-
}, h = (
|
|
224
|
-
const
|
|
222
|
+
}, h = (n)=>{
|
|
223
|
+
const r = Math.max(String(n).length, a === "long" ? 1 : 2);
|
|
225
224
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
|
|
226
225
|
className: _timercssmistica.unitContainer,
|
|
227
226
|
style: {
|
|
228
|
-
minWidth: `${
|
|
227
|
+
minWidth: `${r}ch`
|
|
229
228
|
},
|
|
230
|
-
children: String(
|
|
229
|
+
children: String(n).padStart(r, "0")
|
|
231
230
|
});
|
|
232
231
|
}, S = ()=>{
|
|
233
232
|
switch(a){
|
|
234
233
|
case "none":
|
|
235
|
-
return l.map((
|
|
234
|
+
return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
236
235
|
children: [
|
|
237
|
-
|
|
238
|
-
h(
|
|
236
|
+
r > 0 && ":",
|
|
237
|
+
h(n.value)
|
|
239
238
|
]
|
|
240
|
-
},
|
|
239
|
+
}, r));
|
|
241
240
|
case "short":
|
|
242
|
-
return l.map((
|
|
241
|
+
return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
243
242
|
children: [
|
|
244
|
-
|
|
243
|
+
r > 0 && " ",
|
|
245
244
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
|
|
246
245
|
className: _timercssmistica.shortLabelText,
|
|
247
246
|
children: [
|
|
248
|
-
h(
|
|
249
|
-
` ${g[
|
|
247
|
+
h(n.value),
|
|
248
|
+
` ${g[n.unit]}`
|
|
250
249
|
]
|
|
251
250
|
})
|
|
252
251
|
]
|
|
253
|
-
},
|
|
252
|
+
}, r));
|
|
254
253
|
case "long":
|
|
255
254
|
default:
|
|
256
|
-
return l.map((
|
|
255
|
+
return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
257
256
|
children: [
|
|
258
|
-
|
|
259
|
-
h(
|
|
260
|
-
` ${
|
|
261
|
-
|
|
262
|
-
|
|
257
|
+
r > 0 && " ",
|
|
258
|
+
h(n.value),
|
|
259
|
+
` ${n.value === 1 ? M[n.unit] : D[n.unit]}`,
|
|
260
|
+
r === l.length - 2 && ` ${e.timerAnd || t(_texttokens.timerAnd)}`,
|
|
261
|
+
r < l.length - 2 && ","
|
|
263
262
|
]
|
|
264
|
-
},
|
|
263
|
+
}, r));
|
|
265
264
|
}
|
|
266
|
-
},
|
|
265
|
+
}, y = l.map((n, r)=>`${n.value} ${n.value === 1 ? M[n.unit] : D[n.unit]}${r === l.length - 1 ? "" : r === l.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join("");
|
|
267
266
|
return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({
|
|
268
267
|
role: "timer",
|
|
269
268
|
"aria-labelledby": p,
|
|
@@ -277,7 +276,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
277
276
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
|
|
278
277
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
|
|
279
278
|
id: p,
|
|
280
|
-
children: b ? `${b}. ${
|
|
279
|
+
children: b ? `${b}. ${y}` : y
|
|
281
280
|
})
|
|
282
281
|
}),
|
|
283
282
|
/* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
|
|
@@ -287,7 +286,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
287
286
|
})
|
|
288
287
|
]
|
|
289
288
|
}));
|
|
290
|
-
},
|
|
289
|
+
}, _e = (param)=>{
|
|
291
290
|
let { boxed: s, endTimestamp: a, minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
|
|
292
291
|
const { texts: e, t } = (0, _hooks.useTheme)(), p = _react.useId(), l = (0, _themevariantcontext.useThemeVariant)(), g = U({
|
|
293
292
|
endTimestamp: a,
|
|
@@ -314,7 +313,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
314
313
|
hours: e.timerHoursLongLabel || t(_texttokens.timerHoursLongLabel),
|
|
315
314
|
minutes: e.timerMinutesLongLabel || t(_texttokens.timerMinutesLongLabel),
|
|
316
315
|
seconds: e.timerSecondsLongLabel || t(_texttokens.timerSecondsLongLabel)
|
|
317
|
-
},
|
|
316
|
+
}, y = (d)=>{
|
|
318
317
|
const u = Math.max(String(d).length, 2);
|
|
319
318
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
|
|
320
319
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
@@ -325,7 +324,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
325
324
|
children: String(d).padStart(u, "0")
|
|
326
325
|
})
|
|
327
326
|
});
|
|
328
|
-
},
|
|
327
|
+
}, n = g.map((d, u)=>`${d.value} ${d.value === 1 ? h[d.unit] : S[d.unit]}${u === g.length - 1 ? "" : u === g.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join(""), r = ()=>g.map((d, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
329
328
|
className: (0, _classnames.default)({
|
|
330
329
|
[_timercssmistica.boxedTimerValueContainer[l]]: s
|
|
331
330
|
}),
|
|
@@ -336,7 +335,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
336
335
|
[_timercssmistica.boxedTimerDisplayValue]: s
|
|
337
336
|
}),
|
|
338
337
|
children: [
|
|
339
|
-
|
|
338
|
+
y(d.value),
|
|
340
339
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
341
340
|
regular: !0,
|
|
342
341
|
children: d.value === 1 ? M[d.unit] : D[d.unit]
|
|
@@ -354,7 +353,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
354
353
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
|
|
355
354
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
|
|
356
355
|
id: p,
|
|
357
|
-
children: b ? `${b}. ${
|
|
356
|
+
children: b ? `${b}. ${n}` : n
|
|
358
357
|
})
|
|
359
358
|
}),
|
|
360
359
|
/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
@@ -362,7 +361,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
|
|
|
362
361
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
|
|
363
362
|
space: s ? 8 : 16,
|
|
364
363
|
wrap: !0,
|
|
365
|
-
children:
|
|
364
|
+
children: r()
|
|
366
365
|
})
|
|
367
366
|
})
|
|
368
367
|
]
|
package/dist/tooltip.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ type Props = {
|
|
|
6
6
|
extra?: React.ReactNode;
|
|
7
7
|
description?: string;
|
|
8
8
|
target: React.ReactNode;
|
|
9
|
+
targetStyle?: React.CSSProperties;
|
|
9
10
|
title?: string;
|
|
10
11
|
position?: Position;
|
|
11
12
|
width?: number;
|
|
@@ -17,6 +18,7 @@ type Props = {
|
|
|
17
18
|
type BaseTooltipProps = {
|
|
18
19
|
content?: React.ReactNode;
|
|
19
20
|
target: React.ReactNode;
|
|
21
|
+
targetStyle?: React.CSSProperties;
|
|
20
22
|
position?: Position;
|
|
21
23
|
width?: number;
|
|
22
24
|
delay?: boolean;
|
|
@@ -28,6 +30,6 @@ type BaseTooltipProps = {
|
|
|
28
30
|
closeButtonLabel?: string;
|
|
29
31
|
trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
|
|
30
32
|
};
|
|
31
|
-
export declare const BaseTooltip: ({ content, target, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
|
|
33
|
+
export declare const BaseTooltip: ({ content, target, targetStyle, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
|
|
32
34
|
declare const Tooltip: ({ centerContent, extra, children, dataAttributes, title, description, ...props }: Props) => JSX.Element;
|
|
33
35
|
export default Tooltip;
|