@proximus/lavender-card 2.0.0-alpha.10 → 2.0.0-alpha.101
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/Card.d.ts +2 -2
- package/dist/index.es.js +34 -35
- package/package.json +2 -2
package/dist/Card.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
2
|
import { type Container } from '@proximus/lavender-container';
|
|
3
3
|
import { type Image } from '@proximus/lavender-image';
|
|
4
4
|
import { type Stack } from '@proximus/lavender-layout';
|
|
@@ -6,7 +6,7 @@ export declare const cardBackgroundColorValues: string[];
|
|
|
6
6
|
export declare const cardPaddingValues: string[];
|
|
7
7
|
export declare const cardMediaLeftSizeValues: string[];
|
|
8
8
|
export declare const cardMediaPositionValues: string[];
|
|
9
|
-
export declare class Card extends
|
|
9
|
+
export declare class Card extends VerticallyExtendedElement<HTMLLinkElement> {
|
|
10
10
|
#private;
|
|
11
11
|
static nativeName: string;
|
|
12
12
|
private template;
|
package/dist/index.es.js
CHANGED
|
@@ -4,14 +4,14 @@ var k = (r) => {
|
|
|
4
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
6
|
var s = (r, n, t) => (A(r, n, "access private method"), t);
|
|
7
|
-
import {
|
|
8
|
-
const
|
|
9
|
-
x.replaceSync(
|
|
10
|
-
const
|
|
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);flex-grow:1}::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
16
|
const m = class m extends y {
|
|
17
17
|
constructor() {
|
|
@@ -19,9 +19,9 @@ const m = class m extends y {
|
|
|
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,14 +35,14 @@ const m = class m extends y {
|
|
|
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">
|
|
44
44
|
<px-vstack gap="default">
|
|
45
|
-
<px-vstack gap="s">
|
|
45
|
+
<px-vstack gap="s" grow="1">
|
|
46
46
|
<slot name="title"></slot>
|
|
47
47
|
<slot name="content"></slot>
|
|
48
48
|
</px-vstack>
|
|
@@ -76,22 +76,22 @@ const m = class m extends y {
|
|
|
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 y {
|
|
|
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 y {
|
|
|
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.101",
|
|
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"
|