@proximus/lavender-card 2.0.0-alpha.13 → 2.0.0-alpha.130
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/dist/index.es.js +36 -37
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
var k = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
4
|
+
var A = (r, n, t) => n.has(r) || k("Cannot " + t);
|
|
5
5
|
var v = (r, n, t) => n.has(r) ? k("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t);
|
|
6
|
-
var s = (r, n, t) => (
|
|
7
|
-
import { VerticallyExtendedElement as
|
|
8
|
-
const
|
|
9
|
-
x.replaceSync(
|
|
10
|
-
const
|
|
6
|
+
var s = (r, n, t) => (A(r, n, "access private method"), t);
|
|
7
|
+
import { VerticallyExtendedElement as y, cssTokenBreakpoints as $, checkName as S, log as P } from "@proximus/lavender-common";
|
|
8
|
+
const _ = ':host{--card-background-color-default: var( --px-color-background-container-light-default );--card-media-left-size-s: 120px;--card-media-left-size-m: 250px;--card-media-left-size: var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position="background"]) picture{display:none!important}:host(:not([media-position="background"])) picture:has(img[src]){display:block}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__content{position:relative;flex-grow:1;z-index:2}.card .card__content>px-vstack{height:100%}.card px-container{background-color:var(--card-background-color-default)}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host([media-left-size="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-left-size="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}@media screen and (max-width: 48rem){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--mobile="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--mobile="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(1)[srcset]){display:block}:host([media-position="top"]) img,:host([media-position--mobile="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}:host([media-position="left"]:not([media-position--mobile="top"])) img,:host([media-position--mobile="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,.media-position-background--mobile px-container{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,.media-position-background--mobile:hover px-container{background-color:transparent}}@media screen and (min-width: 48rem) and (max-width: 64rem){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--tablet="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--tablet="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(2)[srcset]){display:block}:host([media-position="left"]:not([media-position--tablet="top"])) img,:host([media-position--tablet="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--tablet="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,.media-position-background--tablet px-container{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,.media-position-background--tablet:hover px-container{background-color:transparent}}@media screen and (min-width: 48rem){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}:host([media-left-size--laptop="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--laptop="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--laptop="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(3)[srcset]){display:block}:host([media-position="left"]:not([media-position--laptop="top"])) img,:host([media-position--laptop="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--laptop="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}img[src=null]{display:none}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,.media-position-background--laptop px-container{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,.media-position-background--laptop:hover px-container{background-color:transparent}}:host([inverted]){--card-background-color-inverted: var( --px-color-background-container-light-inverted )}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 47.938rem){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,:host([inverted]) .media-position-background--mobile px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,:host([inverted]) .media-position-background--mobile:hover px-container{background-color:transparent}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,:host([inverted]) .media-position-background--tablet px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,:host([inverted]) .media-position-background--tablet:hover px-container{background-color:transparent}}@media screen and (min-width: 64.0625rem){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,:host([inverted]) .media-position-background--laptop px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,:host([inverted]) .media-position-background--laptop:hover px-container{background-color:transparent}}', x = new CSSStyleSheet();
|
|
9
|
+
x.replaceSync(_);
|
|
10
|
+
const C = [
|
|
11
11
|
"",
|
|
12
12
|
"container-default",
|
|
13
13
|
"container-light"
|
|
14
|
-
],
|
|
14
|
+
], w = ["", "s", "m", "l"], j = ["", "s", "m"], q = ["", "top", "left", "background"], L = (r, n, t) => `:host([${r}${t ? `--${t}` : ""}='${n}']) .card__content`, M = "px-padding";
|
|
15
15
|
var i, l, p, z;
|
|
16
|
-
const m = class m extends
|
|
16
|
+
const m = class m extends y {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(
|
|
19
19
|
x,
|
|
20
20
|
$(
|
|
21
21
|
"padding",
|
|
22
|
-
w,
|
|
23
|
-
C,
|
|
24
22
|
L,
|
|
23
|
+
w,
|
|
24
|
+
M,
|
|
25
25
|
"--card__content-padding"
|
|
26
26
|
)
|
|
27
27
|
);
|
|
@@ -35,9 +35,9 @@ const m = class m extends A {
|
|
|
35
35
|
<px-container padding="none" background-color="none" border-radius="none">
|
|
36
36
|
<px-stack direction="column" id="stack-container" gap="none">
|
|
37
37
|
<picture>
|
|
38
|
-
<source media="(max-width:
|
|
39
|
-
<source media="(max-width:
|
|
40
|
-
<source media="(min-width:
|
|
38
|
+
<source media="(max-width: 48rem)" >
|
|
39
|
+
<source media="(max-width: 64rem)" >
|
|
40
|
+
<source media="(min-width: 64rem)" >
|
|
41
41
|
<img loading="lazy" alt="" />
|
|
42
42
|
</picture>
|
|
43
43
|
<div class="card__content">
|
|
@@ -76,22 +76,22 @@ const m = class m extends A {
|
|
|
76
76
|
"media-src--laptop"
|
|
77
77
|
];
|
|
78
78
|
}
|
|
79
|
-
attributeChangedCallback(t,
|
|
80
|
-
if (
|
|
79
|
+
attributeChangedCallback(t, a, e) {
|
|
80
|
+
if (a !== e)
|
|
81
81
|
switch (t) {
|
|
82
82
|
case "inverted":
|
|
83
83
|
if (e === null || e === "") {
|
|
84
84
|
this.$container.setAttribute("inverted", "");
|
|
85
|
-
for (let
|
|
86
|
-
this.$children[
|
|
85
|
+
for (let o = 0; o < this.$children.length; o++)
|
|
86
|
+
this.$children[o].setAttribute("inverted", "");
|
|
87
87
|
} else {
|
|
88
88
|
this.$container.removeAttribute("inverted");
|
|
89
|
-
for (let
|
|
90
|
-
this.$children[
|
|
89
|
+
for (let o = 0; o < this.$children.length; o++)
|
|
90
|
+
this.$children[o].removeAttribute("inverted");
|
|
91
91
|
}
|
|
92
92
|
break;
|
|
93
93
|
case "background-color":
|
|
94
|
-
s(this, i, z).call(this, t,
|
|
94
|
+
s(this, i, z).call(this, t, a, e, C);
|
|
95
95
|
break;
|
|
96
96
|
case "background-size":
|
|
97
97
|
this.$container.setAttribute("background-size", e);
|
|
@@ -124,7 +124,7 @@ const m = class m extends A {
|
|
|
124
124
|
s(this, i, p).call(this, e, "laptop");
|
|
125
125
|
break;
|
|
126
126
|
default:
|
|
127
|
-
super.attributeChangedCallback(t,
|
|
127
|
+
super.attributeChangedCallback(t, a, e);
|
|
128
128
|
break;
|
|
129
129
|
}
|
|
130
130
|
}
|
|
@@ -273,14 +273,14 @@ const m = class m extends A {
|
|
|
273
273
|
super._updateAttribute("media-src--laptop", t);
|
|
274
274
|
}
|
|
275
275
|
};
|
|
276
|
-
i = new WeakSet(), l = function(t,
|
|
277
|
-
const e =
|
|
278
|
-
t === "left" ? (this.$stackContainer.setAttribute(e, "row"),
|
|
279
|
-
}, p = function(t,
|
|
280
|
-
var e,
|
|
281
|
-
switch (
|
|
276
|
+
i = new WeakSet(), l = function(t, a) {
|
|
277
|
+
const e = a ? `direction--${a}` : "direction";
|
|
278
|
+
t === "left" ? (this.$stackContainer.setAttribute(e, "row"), a === "laptop" ? this.$stackContainer.setAttribute("direction--desktop", "row") : this.$stackContainer.removeAttribute("direction--desktop")) : (t === "top" || t === "null") && (this.$stackContainer.setAttribute(e, "column"), a === "laptop" ? this.$stackContainer.setAttribute("direction--desktop", "column") : this.$stackContainer.removeAttribute("direction--desktop"));
|
|
279
|
+
}, p = function(t, a) {
|
|
280
|
+
var e, o, c, d, u, h, g, f;
|
|
281
|
+
switch (a) {
|
|
282
282
|
case "mobile":
|
|
283
|
-
(this.mediaPosition === "background" || this.mediaPositionMobile === "background") && this.$container.setAttribute("background-image--mobile", t), t ? (e = this.$pictureSourceMobile) == null || e.setAttribute("srcset", t) : (
|
|
283
|
+
(this.mediaPosition === "background" || this.mediaPositionMobile === "background") && this.$container.setAttribute("background-image--mobile", t), t ? (e = this.$pictureSourceMobile) == null || e.setAttribute("srcset", t) : (o = this.$pictureSourceMobile) == null || o.removeAttribute("srcset");
|
|
284
284
|
break;
|
|
285
285
|
case "tablet":
|
|
286
286
|
(this.mediaPosition === "background" || this.mediaPositionTablet === "background") && this.$container.setAttribute("background-image--tablet", t), t ? (c = this.$pictureSourceTablet) == null || c.setAttribute("srcset", t) : (d = this.$pictureSourceTablet) == null || d.removeAttribute("srcset");
|
|
@@ -291,11 +291,10 @@ i = new WeakSet(), l = function(t, o) {
|
|
|
291
291
|
default:
|
|
292
292
|
this.mediaPosition === "background" && this.$container.setAttribute("background-image", t), t ? (g = this.$img) == null || g.setAttribute("src", t) : (f = this.$img) == null || f.removeAttribute("src");
|
|
293
293
|
}
|
|
294
|
-
}, z = function(t,
|
|
295
|
-
if (!S(
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
this.$el
|
|
294
|
+
}, z = function(t, a, e, o) {
|
|
295
|
+
if (!S(o, e)) {
|
|
296
|
+
P(
|
|
297
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
299
298
|
);
|
|
300
299
|
return;
|
|
301
300
|
}
|
|
@@ -308,14 +307,14 @@ i = new WeakSet(), l = function(t, o) {
|
|
|
308
307
|
`var(--px-color-background-${d}-inverted)`
|
|
309
308
|
));
|
|
310
309
|
};
|
|
311
|
-
c(
|
|
310
|
+
c(a), c(e);
|
|
312
311
|
}, m.nativeName = "a";
|
|
313
312
|
let b = m;
|
|
314
313
|
customElements.get("px-card") || customElements.define("px-card", b);
|
|
315
314
|
export {
|
|
316
315
|
b as Card,
|
|
317
|
-
|
|
318
|
-
|
|
316
|
+
C as cardBackgroundColorValues,
|
|
317
|
+
j as cardMediaLeftSizeValues,
|
|
319
318
|
q as cardMediaPositionValues,
|
|
320
|
-
|
|
319
|
+
w as cardPaddingValues
|
|
321
320
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-card",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.130",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|