@telefonica/mistica 15.11.0 → 15.11.1
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/card.js +86 -86
- package/dist/package-version.js +1 -1
- package/dist-es/card.js +106 -106
- package/dist-es/package-version.js +1 -1
- package/dist-es/style.css +1 -1
- package/package.json +1 -1
package/dist-es/card.js
CHANGED
|
@@ -88,7 +88,7 @@ import { Boxed as ce, InternalBoxed as ye } from "./boxed.js";
|
|
|
88
88
|
import me from "./button-group.js";
|
|
89
89
|
import he from "./image.js";
|
|
90
90
|
import { BaseTouchable as W } from "./touchable.js";
|
|
91
|
-
import { vars as
|
|
91
|
+
import { vars as u } from "./skins/skin-contract.css-mistica.js";
|
|
92
92
|
import { cardContainer as $e, touchableContainer as _, boxed as K, touchable as $, touchableMediaCardOverlay as qe, mediaCard as ue, mediaCardContent as Je, mediaCardIcon as xe, touchableNakedMediaOverlay as be, circularMediaOverlay as Ce, nakedCardContent as Te, touchableCardOverlay as ne, dataCard as Ke, vars as Ne, dataCardTopActionsWithoutIcon as Qe, actions as Be, snapCard as Ue, displayCardContainer as ke, displayCardBackground as Re, displayCardContent as Se, displayCardGradient as Ie, flexColumn as we, touchableCardOverlayInverse as pe, touchableCardOverlayMedia as Ae } from "./card.css-mistica.js";
|
|
93
93
|
import { vars as F } from "./image.css-mistica.js";
|
|
94
94
|
import { useTheme as J } from "./hooks.js";
|
|
@@ -150,8 +150,8 @@ const w = ()=>{
|
|
|
150
150
|
});
|
|
151
151
|
}, Q = (param)=>{
|
|
152
152
|
let { actions: a, padding: r = 16, onClose: i, type: t = "default" } = param;
|
|
153
|
-
const
|
|
154
|
-
return
|
|
153
|
+
const n = De(a, i);
|
|
154
|
+
return n.length > 0 ? /* @__PURE__ */ e(He.Provider, {
|
|
155
155
|
value: t,
|
|
156
156
|
children: /* @__PURE__ */ e("div", {
|
|
157
157
|
style: {
|
|
@@ -162,7 +162,7 @@ const w = ()=>{
|
|
|
162
162
|
},
|
|
163
163
|
children: /* @__PURE__ */ e(Me, {
|
|
164
164
|
space: 16,
|
|
165
|
-
children:
|
|
165
|
+
children: n.map((o, s)=>"Icon" in o || "checkedProps" in o ? /* @__PURE__ */ e(la, _object_spread({}, o), s) : o)
|
|
166
166
|
})
|
|
167
167
|
})
|
|
168
168
|
}) : /* @__PURE__ */ e(Xe, {});
|
|
@@ -173,11 +173,11 @@ const w = ()=>{
|
|
|
173
173
|
"9:10": 9 / 10,
|
|
174
174
|
auto: 0
|
|
175
175
|
})[a] : 0, q = /*#__PURE__*/ b.forwardRef((param, s)=>{
|
|
176
|
-
let { children: a, width: r, height: i, aspectRatio: t, dataAttributes:
|
|
176
|
+
let { children: a, width: r, height: i, aspectRatio: t, dataAttributes: n, className: d, "aria-label": o } = param;
|
|
177
177
|
const v = r && i ? void 0 : ca(t);
|
|
178
|
-
return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({}, da(
|
|
178
|
+
return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({}, da(n)), {
|
|
179
179
|
ref: s,
|
|
180
|
-
"aria-label":
|
|
180
|
+
"aria-label": o,
|
|
181
181
|
className: ve(d, $e),
|
|
182
182
|
style: _object_spread({
|
|
183
183
|
width: r || "100%",
|
|
@@ -237,37 +237,37 @@ const w = ()=>{
|
|
|
237
237
|
size: 12
|
|
238
238
|
});
|
|
239
239
|
}, Le = (a, r, i)=>{
|
|
240
|
-
const { texts: t } = J(),
|
|
240
|
+
const { texts: t } = J(), n = b.useRef(null), [d, o] = b.useReducer(ha, "loading");
|
|
241
241
|
b.useEffect(()=>{
|
|
242
|
-
var
|
|
243
|
-
const c = setTimeout(()=>
|
|
244
|
-
return (
|
|
245
|
-
clearTimeout(c),
|
|
242
|
+
var h;
|
|
243
|
+
const c = setTimeout(()=>o("showSpinner"), 2e3);
|
|
244
|
+
return (h = n.current) == null || h.load(), ()=>{
|
|
245
|
+
clearTimeout(c), o("reset");
|
|
246
246
|
};
|
|
247
247
|
}, [
|
|
248
248
|
a
|
|
249
249
|
]);
|
|
250
250
|
const s = b.useMemo(()=>a !== void 0 ? /* @__PURE__ */ e(oa, {
|
|
251
|
-
ref: ta(
|
|
251
|
+
ref: ta(n, i),
|
|
252
252
|
src: a,
|
|
253
253
|
width: "100%",
|
|
254
254
|
height: "100%",
|
|
255
255
|
poster: r,
|
|
256
|
-
onError: ()=>
|
|
257
|
-
onPause: ()=>
|
|
258
|
-
onPlay: ()=>
|
|
256
|
+
onError: ()=>o("fail"),
|
|
257
|
+
onPause: ()=>o("pause"),
|
|
258
|
+
onPlay: ()=>o("play")
|
|
259
259
|
}) : void 0, [
|
|
260
260
|
i,
|
|
261
261
|
a,
|
|
262
262
|
r
|
|
263
263
|
]), v = ()=>{
|
|
264
|
-
const c =
|
|
265
|
-
c && (d === "loading" ?
|
|
264
|
+
const c = n.current;
|
|
265
|
+
c && (d === "loading" ? o("showSpinner") : d === "paused" ? c.play() : d === "playing" && c.pause());
|
|
266
266
|
};
|
|
267
267
|
if (d === "error") return {
|
|
268
268
|
video: s
|
|
269
269
|
};
|
|
270
|
-
const
|
|
270
|
+
const m = s ? {
|
|
271
271
|
uncheckedProps: {
|
|
272
272
|
Icon: d === "loadingTimeout" && !sa() ? ua : pa,
|
|
273
273
|
label: d === "loadingTimeout" ? "" : t.pauseIconButtonLabel
|
|
@@ -282,10 +282,10 @@ const w = ()=>{
|
|
|
282
282
|
} : void 0;
|
|
283
283
|
return {
|
|
284
284
|
video: s,
|
|
285
|
-
videoAction:
|
|
285
|
+
videoAction: m
|
|
286
286
|
};
|
|
287
287
|
}, ge = (param)=>{
|
|
288
|
-
let { headline: a, headlineRef: r, pretitle: i, pretitleLinesMax: t, title:
|
|
288
|
+
let { headline: a, headlineRef: r, pretitle: i, pretitleLinesMax: t, title: n, titleAs: d = "h3", titleLinesMax: o, subtitle: s, subtitleLinesMax: v, description: m, descriptionLinesMax: c, extra: h, extraRef: g, button: p, buttonLink: y } = param;
|
|
289
289
|
const { textPresets: N } = J();
|
|
290
290
|
return /* @__PURE__ */ l("div", {
|
|
291
291
|
className: Ye({
|
|
@@ -298,20 +298,20 @@ const w = ()=>{
|
|
|
298
298
|
/* @__PURE__ */ l("div", {
|
|
299
299
|
className: we,
|
|
300
300
|
children: [
|
|
301
|
-
|
|
301
|
+
n && /* @__PURE__ */ e("div", {
|
|
302
302
|
style: {
|
|
303
|
-
paddingBottom: 4
|
|
303
|
+
paddingBottom: s || m ? 4 : 0
|
|
304
304
|
},
|
|
305
305
|
children: /* @__PURE__ */ e(te, {
|
|
306
306
|
mobileSize: 18,
|
|
307
307
|
mobileLineHeight: "24px",
|
|
308
308
|
desktopSize: 20,
|
|
309
309
|
desktopLineHeight: "28px",
|
|
310
|
-
truncate:
|
|
310
|
+
truncate: o,
|
|
311
311
|
weight: N.cardTitle.weight,
|
|
312
312
|
as: d,
|
|
313
313
|
hyphens: "auto",
|
|
314
|
-
children:
|
|
314
|
+
children: n
|
|
315
315
|
})
|
|
316
316
|
}),
|
|
317
317
|
a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
|
|
@@ -341,7 +341,7 @@ const w = ()=>{
|
|
|
341
341
|
}),
|
|
342
342
|
s && /* @__PURE__ */ e("div", {
|
|
343
343
|
style: {
|
|
344
|
-
paddingBottom: 4
|
|
344
|
+
paddingBottom: m ? 4 : 0
|
|
345
345
|
},
|
|
346
346
|
children: /* @__PURE__ */ e(M, {
|
|
347
347
|
truncate: v,
|
|
@@ -351,24 +351,24 @@ const w = ()=>{
|
|
|
351
351
|
children: s
|
|
352
352
|
})
|
|
353
353
|
}),
|
|
354
|
-
|
|
354
|
+
m && // this is tricky, when headline exists, the 8px padding is added by it.
|
|
355
355
|
// Otherwise, only 4px are added by title|pretitle|subtitle, so we need to add 4px more
|
|
356
356
|
/* @__PURE__ */ e("div", {
|
|
357
357
|
style: {
|
|
358
|
-
paddingTop: i ||
|
|
358
|
+
paddingTop: i || n || s ? 4 : 0
|
|
359
359
|
},
|
|
360
360
|
children: /* @__PURE__ */ e(M, {
|
|
361
361
|
truncate: c,
|
|
362
362
|
as: "p",
|
|
363
363
|
regular: !0,
|
|
364
|
-
color:
|
|
364
|
+
color: u.colors.textSecondary,
|
|
365
365
|
hyphens: "auto",
|
|
366
|
-
children:
|
|
366
|
+
children: m
|
|
367
367
|
})
|
|
368
368
|
}),
|
|
369
|
-
|
|
369
|
+
h && /* @__PURE__ */ e("div", {
|
|
370
370
|
ref: g,
|
|
371
|
-
children:
|
|
371
|
+
children: h
|
|
372
372
|
})
|
|
373
373
|
]
|
|
374
374
|
}),
|
|
@@ -382,7 +382,7 @@ const w = ()=>{
|
|
|
382
382
|
]
|
|
383
383
|
});
|
|
384
384
|
}, Fa = /*#__PURE__*/ b.forwardRef((_param, A)=>{
|
|
385
|
-
var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax:
|
|
385
|
+
var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax: n, subtitle: d, subtitleLinesMax: o, title: s, titleAs: v = "h3", titleLinesMax: m, description: c, descriptionLinesMax: h, extra: g, actions: p, button: y, buttonLink: N, dataAttributes: x, "aria-label": C, onClose: T } = _param, f = _object_without_properties(_param, [
|
|
386
386
|
"media",
|
|
387
387
|
"icon",
|
|
388
388
|
"headline",
|
|
@@ -447,14 +447,14 @@ const w = ()=>{
|
|
|
447
447
|
headline: i,
|
|
448
448
|
headlineRef: j,
|
|
449
449
|
pretitle: t,
|
|
450
|
-
pretitleLinesMax:
|
|
450
|
+
pretitleLinesMax: n,
|
|
451
451
|
title: s,
|
|
452
452
|
titleAs: v,
|
|
453
|
-
titleLinesMax:
|
|
453
|
+
titleLinesMax: m,
|
|
454
454
|
subtitle: d,
|
|
455
|
-
subtitleLinesMax:
|
|
455
|
+
subtitleLinesMax: o,
|
|
456
456
|
description: c,
|
|
457
|
-
descriptionLinesMax:
|
|
457
|
+
descriptionLinesMax: h,
|
|
458
458
|
extra: g,
|
|
459
459
|
extraRef: S,
|
|
460
460
|
button: y,
|
|
@@ -473,7 +473,7 @@ const w = ()=>{
|
|
|
473
473
|
},
|
|
474
474
|
children: /* @__PURE__ */ e("div", {
|
|
475
475
|
style: P({
|
|
476
|
-
[F.mediaBorderRadius]:
|
|
476
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
477
477
|
}),
|
|
478
478
|
children: r
|
|
479
479
|
})
|
|
@@ -491,7 +491,7 @@ const w = ()=>{
|
|
|
491
491
|
]
|
|
492
492
|
});
|
|
493
493
|
}), Wa = /*#__PURE__*/ b.forwardRef((_param, A)=>{
|
|
494
|
-
var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax:
|
|
494
|
+
var { media: a, icon: r, headline: i, pretitle: t, pretitleLinesMax: n, subtitle: d, subtitleLinesMax: o, title: s, titleAs: v = "h3", titleLinesMax: m, description: c, descriptionLinesMax: h, extra: g, actions: p, button: y, buttonLink: N, dataAttributes: x, "aria-label": C, onClose: T } = _param, f = _object_without_properties(_param, [
|
|
495
495
|
"media",
|
|
496
496
|
"icon",
|
|
497
497
|
"headline",
|
|
@@ -555,14 +555,14 @@ const w = ()=>{
|
|
|
555
555
|
headline: i,
|
|
556
556
|
headlineRef: D,
|
|
557
557
|
pretitle: t,
|
|
558
|
-
pretitleLinesMax:
|
|
558
|
+
pretitleLinesMax: n,
|
|
559
559
|
title: s,
|
|
560
560
|
titleAs: v,
|
|
561
|
-
titleLinesMax:
|
|
561
|
+
titleLinesMax: m,
|
|
562
562
|
subtitle: d,
|
|
563
|
-
subtitleLinesMax:
|
|
563
|
+
subtitleLinesMax: o,
|
|
564
564
|
description: c,
|
|
565
|
-
descriptionLinesMax:
|
|
565
|
+
descriptionLinesMax: h,
|
|
566
566
|
extra: g,
|
|
567
567
|
extraRef: H,
|
|
568
568
|
button: y,
|
|
@@ -581,7 +581,7 @@ const w = ()=>{
|
|
|
581
581
|
},
|
|
582
582
|
children: /* @__PURE__ */ e("div", {
|
|
583
583
|
style: P({
|
|
584
|
-
[F.mediaBorderRadius]:
|
|
584
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
585
585
|
}),
|
|
586
586
|
children: r
|
|
587
587
|
})
|
|
@@ -597,7 +597,7 @@ const w = ()=>{
|
|
|
597
597
|
]
|
|
598
598
|
});
|
|
599
599
|
}), _a = /*#__PURE__*/ b.forwardRef((_param, g)=>{
|
|
600
|
-
var { media: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle:
|
|
600
|
+
var { media: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle: n, subtitleLinesMax: d, description: o, descriptionLinesMax: s, extra: v, dataAttributes: m, "aria-label": c } = _param, h = _object_without_properties(_param, [
|
|
601
601
|
"media",
|
|
602
602
|
"title",
|
|
603
603
|
"titleAs",
|
|
@@ -610,22 +610,22 @@ const w = ()=>{
|
|
|
610
610
|
"dataAttributes",
|
|
611
611
|
"aria-label"
|
|
612
612
|
]);
|
|
613
|
-
const p = !!(
|
|
613
|
+
const p = !!(h.href || h.to || h.onPress), y = a && a.type === he && a.props.circular, { textPresets: N } = J(), { text: x, ref: C } = w(), T = c || [
|
|
614
614
|
r,
|
|
615
|
-
o,
|
|
616
615
|
n,
|
|
616
|
+
o,
|
|
617
617
|
x
|
|
618
618
|
].filter(Boolean).join(" ");
|
|
619
619
|
return /* @__PURE__ */ e(q, {
|
|
620
620
|
ref: g,
|
|
621
621
|
dataAttributes: _object_spread({
|
|
622
622
|
"component-name": "SmallNakedCard"
|
|
623
|
-
},
|
|
623
|
+
}, m),
|
|
624
624
|
"aria-label": p ? void 0 : c,
|
|
625
625
|
className: p ? _ : void 0,
|
|
626
626
|
children: /* @__PURE__ */ e(W, _object_spread_props(_object_spread({
|
|
627
627
|
maybe: !0
|
|
628
|
-
},
|
|
628
|
+
}, h), {
|
|
629
629
|
className: $,
|
|
630
630
|
"aria-label": p ? T : void 0,
|
|
631
631
|
children: /* @__PURE__ */ l("div", {
|
|
@@ -662,20 +662,20 @@ const w = ()=>{
|
|
|
662
662
|
hyphens: "auto",
|
|
663
663
|
children: r
|
|
664
664
|
}),
|
|
665
|
-
|
|
665
|
+
n && /* @__PURE__ */ e(M, {
|
|
666
666
|
truncate: d,
|
|
667
667
|
regular: !0,
|
|
668
668
|
as: "p",
|
|
669
669
|
hyphens: "auto",
|
|
670
|
-
children:
|
|
670
|
+
children: n
|
|
671
671
|
}),
|
|
672
|
-
|
|
672
|
+
o && /* @__PURE__ */ e(M, {
|
|
673
673
|
truncate: s,
|
|
674
674
|
regular: !0,
|
|
675
675
|
as: "p",
|
|
676
|
-
color:
|
|
676
|
+
color: u.colors.textSecondary,
|
|
677
677
|
hyphens: "auto",
|
|
678
|
-
children:
|
|
678
|
+
children: o
|
|
679
679
|
})
|
|
680
680
|
]
|
|
681
681
|
})
|
|
@@ -691,7 +691,7 @@ const w = ()=>{
|
|
|
691
691
|
}))
|
|
692
692
|
});
|
|
693
693
|
}), $a = /*#__PURE__*/ b.forwardRef((_param, A)=>{
|
|
694
|
-
var { icon: a, headline: r, pretitle: i, pretitleLinesMax: t, title:
|
|
694
|
+
var { icon: a, headline: r, pretitle: i, pretitleLinesMax: t, title: n, titleAs: d = "h3", titleLinesMax: o, subtitle: s, subtitleLinesMax: v, description: m, descriptionLinesMax: c, extra: h, actions: g, button: p, buttonLink: y, dataAttributes: N, "aria-label": x, onClose: C, aspectRatio: T } = _param, f = _object_without_properties(_param, [
|
|
695
695
|
"icon",
|
|
696
696
|
"headline",
|
|
697
697
|
"pretitle",
|
|
@@ -713,10 +713,10 @@ const w = ()=>{
|
|
|
713
713
|
"aspectRatio"
|
|
714
714
|
]);
|
|
715
715
|
const B = !!a || !!r, z = !!(f.href || f.to || f.onPress), { text: j, ref: D } = w(), { text: S, ref: H } = w(), k = De(g, C), R = x || [
|
|
716
|
-
|
|
716
|
+
n,
|
|
717
717
|
j,
|
|
718
718
|
i,
|
|
719
|
-
|
|
719
|
+
m,
|
|
720
720
|
S
|
|
721
721
|
].filter(Boolean).join(" ");
|
|
722
722
|
return /* @__PURE__ */ l(q, {
|
|
@@ -752,7 +752,7 @@ const w = ()=>{
|
|
|
752
752
|
children: [
|
|
753
753
|
a && /* @__PURE__ */ e("div", {
|
|
754
754
|
style: P({
|
|
755
|
-
[F.mediaBorderRadius]:
|
|
755
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
756
756
|
}),
|
|
757
757
|
children: a
|
|
758
758
|
}),
|
|
@@ -761,12 +761,12 @@ const w = ()=>{
|
|
|
761
761
|
headlineRef: D,
|
|
762
762
|
pretitle: i,
|
|
763
763
|
pretitleLinesMax: t,
|
|
764
|
-
title:
|
|
764
|
+
title: n,
|
|
765
765
|
titleAs: d,
|
|
766
|
-
titleLinesMax:
|
|
766
|
+
titleLinesMax: o,
|
|
767
767
|
subtitle: s,
|
|
768
768
|
subtitleLinesMax: v,
|
|
769
|
-
description:
|
|
769
|
+
description: m,
|
|
770
770
|
descriptionLinesMax: c
|
|
771
771
|
})
|
|
772
772
|
]
|
|
@@ -779,9 +779,9 @@ const w = ()=>{
|
|
|
779
779
|
})
|
|
780
780
|
]
|
|
781
781
|
}),
|
|
782
|
-
|
|
782
|
+
h && /* @__PURE__ */ e("div", {
|
|
783
783
|
ref: H,
|
|
784
|
-
children:
|
|
784
|
+
children: h
|
|
785
785
|
}),
|
|
786
786
|
(p || y) && /* @__PURE__ */ e("div", {
|
|
787
787
|
className: Be,
|
|
@@ -803,7 +803,7 @@ const w = ()=>{
|
|
|
803
803
|
]
|
|
804
804
|
});
|
|
805
805
|
}), qa = /*#__PURE__*/ b.forwardRef((_param, y)=>{
|
|
806
|
-
var { icon: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle:
|
|
806
|
+
var { icon: a, title: r, titleAs: i = "h3", titleLinesMax: t, subtitle: n, subtitleLinesMax: d, description: o, descriptionLinesMax: s, dataAttributes: v, "aria-label": m, extra: c, isInverse: h = !1, aspectRatio: g } = _param, p = _object_without_properties(_param, [
|
|
807
807
|
"icon",
|
|
808
808
|
"title",
|
|
809
809
|
"titleAs",
|
|
@@ -818,10 +818,10 @@ const w = ()=>{
|
|
|
818
818
|
"isInverse",
|
|
819
819
|
"aspectRatio"
|
|
820
820
|
]);
|
|
821
|
-
const { textPresets: N } = J(), x = !!(p.href || p.to || p.onPress), C =
|
|
821
|
+
const { textPresets: N } = J(), x = !!(p.href || p.to || p.onPress), C = h ? pe : ne, { text: T, ref: f } = w(), A = m || [
|
|
822
822
|
r,
|
|
823
|
-
o,
|
|
824
823
|
n,
|
|
824
|
+
o,
|
|
825
825
|
T
|
|
826
826
|
].filter(Boolean).join(" ");
|
|
827
827
|
return /* @__PURE__ */ e(q, {
|
|
@@ -831,10 +831,10 @@ const w = ()=>{
|
|
|
831
831
|
ref: y,
|
|
832
832
|
className: _,
|
|
833
833
|
aspectRatio: g,
|
|
834
|
-
"aria-label": x ? void 0 :
|
|
834
|
+
"aria-label": x ? void 0 : m,
|
|
835
835
|
children: /* @__PURE__ */ e(ce, {
|
|
836
836
|
className: K,
|
|
837
|
-
isInverse:
|
|
837
|
+
isInverse: h,
|
|
838
838
|
width: "100%",
|
|
839
839
|
minHeight: "100%",
|
|
840
840
|
children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
|
|
@@ -853,7 +853,7 @@ const w = ()=>{
|
|
|
853
853
|
children: [
|
|
854
854
|
a && /* @__PURE__ */ e("div", {
|
|
855
855
|
style: P({
|
|
856
|
-
[F.mediaBorderRadius]:
|
|
856
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
857
857
|
}),
|
|
858
858
|
children: /* @__PURE__ */ e(L, {
|
|
859
859
|
paddingBottom: 16,
|
|
@@ -874,21 +874,21 @@ const w = ()=>{
|
|
|
874
874
|
hyphens: "auto",
|
|
875
875
|
children: r
|
|
876
876
|
}),
|
|
877
|
-
|
|
877
|
+
n && /* @__PURE__ */ e(M, {
|
|
878
878
|
truncate: d,
|
|
879
879
|
regular: !0,
|
|
880
|
-
color:
|
|
880
|
+
color: u.colors.textPrimary,
|
|
881
881
|
as: "p",
|
|
882
882
|
hyphens: "auto",
|
|
883
|
-
children:
|
|
883
|
+
children: n
|
|
884
884
|
}),
|
|
885
|
-
|
|
885
|
+
o && /* @__PURE__ */ e(M, {
|
|
886
886
|
truncate: s,
|
|
887
887
|
regular: !0,
|
|
888
|
-
color:
|
|
888
|
+
color: u.colors.textSecondary,
|
|
889
889
|
as: "p",
|
|
890
890
|
hyphens: "auto",
|
|
891
|
-
children:
|
|
891
|
+
children: o
|
|
892
892
|
})
|
|
893
893
|
]
|
|
894
894
|
})
|
|
@@ -905,19 +905,19 @@ const w = ()=>{
|
|
|
905
905
|
})
|
|
906
906
|
});
|
|
907
907
|
}), je = (param)=>{
|
|
908
|
-
let { title: a, headline: r, pretitle: i, subtitle: t, description:
|
|
908
|
+
let { title: a, headline: r, pretitle: i, subtitle: t, description: n, extra: d, headlineRef: o, extraRef: s } = param;
|
|
909
909
|
return /* @__PURE__ */ l("div", {
|
|
910
910
|
className: we,
|
|
911
911
|
children: [
|
|
912
912
|
a && /* @__PURE__ */ e("div", {
|
|
913
913
|
style: {
|
|
914
|
-
paddingBottom: 4
|
|
914
|
+
paddingBottom: t || n ? 4 : 0
|
|
915
915
|
},
|
|
916
916
|
children: a
|
|
917
917
|
}),
|
|
918
918
|
r && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
|
|
919
919
|
/* @__PURE__ */ e("div", {
|
|
920
|
-
ref:
|
|
920
|
+
ref: o,
|
|
921
921
|
style: {
|
|
922
922
|
order: -2,
|
|
923
923
|
paddingBottom: 16
|
|
@@ -933,17 +933,17 @@ const w = ()=>{
|
|
|
933
933
|
}),
|
|
934
934
|
t && /* @__PURE__ */ e("div", {
|
|
935
935
|
style: {
|
|
936
|
-
paddingBottom: 4
|
|
936
|
+
paddingBottom: t ? 4 : 0
|
|
937
937
|
},
|
|
938
938
|
children: t
|
|
939
939
|
}),
|
|
940
|
-
|
|
940
|
+
n && // this is tricky, the padding between a headline and a description is 16px
|
|
941
941
|
// but the padding between a title|pretitle|subtitle and a description is 8px (4px + 4px)
|
|
942
942
|
/* @__PURE__ */ e("div", {
|
|
943
943
|
style: {
|
|
944
944
|
paddingTop: i || a || t ? 4 : 0
|
|
945
945
|
},
|
|
946
|
-
children:
|
|
946
|
+
children: n
|
|
947
947
|
}),
|
|
948
948
|
d && /* @__PURE__ */ e("div", {
|
|
949
949
|
ref: s,
|
|
@@ -952,7 +952,7 @@ const w = ()=>{
|
|
|
952
952
|
]
|
|
953
953
|
});
|
|
954
954
|
}, Ve = /*#__PURE__*/ b.forwardRef((_param, H)=>{
|
|
955
|
-
var { isInverse: a, backgroundImage: r, backgroundVideo: i, backgroundVideoRef: t, poster:
|
|
955
|
+
var { isInverse: a, backgroundImage: r, backgroundVideo: i, backgroundVideoRef: t, poster: n, icon: d, headline: o, pretitle: s, pretitleLinesMax: v, title: m, titleAs: c = "h3", titleLinesMax: h, description: g, descriptionLinesMax: p, extra: y, button: N, secondaryButton: x, onClose: C, actions: T, buttonLink: f, dataAttributes: A, width: B, height: z, aspectRatio: j, "aria-label": D } = _param, S = _object_without_properties(_param, [
|
|
956
956
|
"isInverse",
|
|
957
957
|
"backgroundImage",
|
|
958
958
|
"backgroundVideo",
|
|
@@ -979,12 +979,12 @@ const w = ()=>{
|
|
|
979
979
|
"aspectRatio",
|
|
980
980
|
"aria-label"
|
|
981
981
|
]);
|
|
982
|
-
const k = r !== void 0, R = i !== void 0, E = Oe(r), { video: I, videoAction: U } = Le(i,
|
|
982
|
+
const k = r !== void 0, R = i !== void 0, E = Oe(r), { video: I, videoAction: U } = Le(i, n, t), { text: oe, ref: Y } = w(), { text: de, ref: se } = w();
|
|
983
983
|
R && (T = U ? [
|
|
984
984
|
U
|
|
985
985
|
] : []);
|
|
986
986
|
const Z = ze(), V = k || R, G = V ? "0 0 16px rgba(0,0,0,0.4)" : void 0, O = (T == null ? void 0 : T.length) || C, X = !!(S.href || S.to || S.onPress), ee = k || R ? Ae : a ? pe : ne, le = D || [
|
|
987
|
-
|
|
987
|
+
m,
|
|
988
988
|
oe,
|
|
989
989
|
s,
|
|
990
990
|
g,
|
|
@@ -1000,12 +1000,12 @@ const w = ()=>{
|
|
|
1000
1000
|
className: _,
|
|
1001
1001
|
children: [
|
|
1002
1002
|
/* @__PURE__ */ e(ye, {
|
|
1003
|
-
borderRadius:
|
|
1003
|
+
borderRadius: u.borderRadii.legacyDisplay,
|
|
1004
1004
|
className: K,
|
|
1005
1005
|
width: "100%",
|
|
1006
1006
|
minHeight: "100%",
|
|
1007
1007
|
isInverse: a,
|
|
1008
|
-
background: k || R ? Z ?
|
|
1008
|
+
background: k || R ? Z ? u.colors.backgroundContainerBrandOverInverse : u.colors.backgroundContainer : void 0,
|
|
1009
1009
|
children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
|
|
1010
1010
|
maybe: !0
|
|
1011
1011
|
}, S), {
|
|
@@ -1033,7 +1033,7 @@ const w = ()=>{
|
|
|
1033
1033
|
children: [
|
|
1034
1034
|
d ? /* @__PURE__ */ e("div", {
|
|
1035
1035
|
style: P({
|
|
1036
|
-
[F.mediaBorderRadius]:
|
|
1036
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
1037
1037
|
}),
|
|
1038
1038
|
children: /* @__PURE__ */ e(L, {
|
|
1039
1039
|
paddingBottom: V ? 0 : 40,
|
|
@@ -1052,15 +1052,15 @@ const w = ()=>{
|
|
|
1052
1052
|
space: 24,
|
|
1053
1053
|
children: [
|
|
1054
1054
|
/* @__PURE__ */ e(je, {
|
|
1055
|
-
title:
|
|
1055
|
+
title: m ? /* @__PURE__ */ e(We, {
|
|
1056
1056
|
forceMobileSizes: !0,
|
|
1057
|
-
truncate:
|
|
1057
|
+
truncate: h,
|
|
1058
1058
|
as: c,
|
|
1059
1059
|
textShadow: G,
|
|
1060
1060
|
hyphens: "auto",
|
|
1061
|
-
children:
|
|
1061
|
+
children: m
|
|
1062
1062
|
}) : void 0,
|
|
1063
|
-
headline:
|
|
1063
|
+
headline: o,
|
|
1064
1064
|
pretitle: s ? /* @__PURE__ */ e(M, {
|
|
1065
1065
|
forceMobileSizes: !0,
|
|
1066
1066
|
truncate: v,
|
|
@@ -1074,7 +1074,7 @@ const w = ()=>{
|
|
|
1074
1074
|
truncate: p,
|
|
1075
1075
|
as: "p",
|
|
1076
1076
|
regular: !0,
|
|
1077
|
-
color: V ?
|
|
1077
|
+
color: V ? u.colors.textPrimary : u.colors.textSecondary,
|
|
1078
1078
|
textShadow: G,
|
|
1079
1079
|
hyphens: "auto",
|
|
1080
1080
|
children: g
|
|
@@ -1127,7 +1127,7 @@ const w = ()=>{
|
|
|
1127
1127
|
}, a)
|
|
1128
1128
|
}));
|
|
1129
1129
|
}), Qa = /*#__PURE__*/ b.forwardRef((_param, R)=>{
|
|
1130
|
-
var { dataAttributes: a, backgroundImage: r, backgroundVideo: i, poster: t, backgroundVideoRef:
|
|
1130
|
+
var { dataAttributes: a, backgroundImage: r, backgroundVideo: i, poster: t, backgroundVideoRef: n, width: d, height: o, aspectRatio: s = "7:10", ariaLabel: v, ["aria-label"]: m = v, actions: c, onClose: h, icon: g, headline: p, pretitle: y, pretitleLinesMax: N, title: x, titleAs: C = "h3", titleLinesMax: T, subtitle: f, subtitleLinesMax: A, description: B, descriptionLinesMax: z, extra: j, variant: D, isInverse: S, backgroundColor: H } = _param, k = _object_without_properties(_param, [
|
|
1131
1131
|
"dataAttributes",
|
|
1132
1132
|
"backgroundImage",
|
|
1133
1133
|
"backgroundVideo",
|
|
@@ -1156,15 +1156,15 @@ const w = ()=>{
|
|
|
1156
1156
|
"isInverse",
|
|
1157
1157
|
"backgroundColor"
|
|
1158
1158
|
]);
|
|
1159
|
-
const E = r !== void 0, I = i !== void 0, U = Oe(r), { video: oe, videoAction: Y } = Le(i, t,
|
|
1159
|
+
const E = r !== void 0, I = i !== void 0, U = Oe(r), { video: oe, videoAction: Y } = Le(i, t, n), { text: de, ref: se } = w(), { text: Z, ref: V } = w();
|
|
1160
1160
|
I && (c = Y ? [
|
|
1161
1161
|
Y
|
|
1162
1162
|
] : []);
|
|
1163
|
-
const G = ze(), O = E || I, X = O ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ee = (c == null ? void 0 : c.length) ||
|
|
1164
|
-
default:
|
|
1165
|
-
inverse: G ?
|
|
1166
|
-
alternative:
|
|
1167
|
-
})[re], Ee = E || I ? Ae : re === "inverse" ? pe : ne, Ge =
|
|
1163
|
+
const G = ze(), O = E || I, X = O ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ee = (c == null ? void 0 : c.length) || h, { textPresets: le } = J(), ae = !!(k.href || k.to || k.onPress), re = D || (S ? "inverse" : "default"), Pe = ()=>H || ({
|
|
1164
|
+
default: u.colors.backgroundContainer,
|
|
1165
|
+
inverse: G ? u.colors.backgroundContainerBrandOverInverse : u.colors.backgroundBrand,
|
|
1166
|
+
alternative: u.colors.backgroundAlternative
|
|
1167
|
+
})[re], Ee = E || I ? Ae : re === "inverse" ? pe : ne, Ge = m || [
|
|
1168
1168
|
x,
|
|
1169
1169
|
de,
|
|
1170
1170
|
y,
|
|
@@ -1174,22 +1174,22 @@ const w = ()=>{
|
|
|
1174
1174
|
].filter(Boolean).join(" ");
|
|
1175
1175
|
return /* @__PURE__ */ l(q, {
|
|
1176
1176
|
width: d,
|
|
1177
|
-
height:
|
|
1177
|
+
height: o,
|
|
1178
1178
|
dataAttributes: _object_spread({
|
|
1179
1179
|
"component-name": "PosterCard"
|
|
1180
1180
|
}, a),
|
|
1181
1181
|
ref: R,
|
|
1182
1182
|
aspectRatio: s,
|
|
1183
1183
|
className: _,
|
|
1184
|
-
"aria-label": ae ? void 0 :
|
|
1184
|
+
"aria-label": ae ? void 0 : m,
|
|
1185
1185
|
children: [
|
|
1186
1186
|
/* @__PURE__ */ e(ye, {
|
|
1187
|
-
borderRadius:
|
|
1187
|
+
borderRadius: u.borderRadii.legacyDisplay,
|
|
1188
1188
|
className: K,
|
|
1189
1189
|
width: "100%",
|
|
1190
1190
|
minHeight: "100%",
|
|
1191
1191
|
isInverse: E || I || re === "inverse",
|
|
1192
|
-
background: E || I ? G ?
|
|
1192
|
+
background: E || I ? G ? u.colors.backgroundContainerBrandOverInverse : u.colors.backgroundContainer : Pe(),
|
|
1193
1193
|
children: /* @__PURE__ */ l(W, _object_spread_props(_object_spread({
|
|
1194
1194
|
maybe: !0
|
|
1195
1195
|
}, k), {
|
|
@@ -1219,7 +1219,7 @@ const w = ()=>{
|
|
|
1219
1219
|
children: [
|
|
1220
1220
|
g ? /* @__PURE__ */ e("div", {
|
|
1221
1221
|
style: P({
|
|
1222
|
-
[F.mediaBorderRadius]:
|
|
1222
|
+
[F.mediaBorderRadius]: u.borderRadii.mediaSmall
|
|
1223
1223
|
}),
|
|
1224
1224
|
children: /* @__PURE__ */ e(L, {
|
|
1225
1225
|
paddingBottom: O ? 0 : 40,
|
|
@@ -1274,7 +1274,7 @@ const w = ()=>{
|
|
|
1274
1274
|
as: "p",
|
|
1275
1275
|
regular: !0,
|
|
1276
1276
|
textShadow: X,
|
|
1277
|
-
color: O ?
|
|
1277
|
+
color: O ? u.colors.textPrimary : u.colors.textSecondary,
|
|
1278
1278
|
children: B
|
|
1279
1279
|
}) : void 0,
|
|
1280
1280
|
headlineRef: se,
|
|
@@ -1290,7 +1290,7 @@ const w = ()=>{
|
|
|
1290
1290
|
}))
|
|
1291
1291
|
}),
|
|
1292
1292
|
/* @__PURE__ */ e(Q, {
|
|
1293
|
-
onClose:
|
|
1293
|
+
onClose: h,
|
|
1294
1294
|
actions: c,
|
|
1295
1295
|
type: E || I ? "media" : re === "inverse" ? "inverse" : "default"
|
|
1296
1296
|
})
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const o = "15.11.
|
|
1
|
+
const o = "15.11.1";
|
|
2
2
|
export { o as PACKAGE_VERSION };
|