@proximus/lavender-card 2.0.0-alpha.5 → 2.0.0-alpha.50
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 +19 -20
- 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
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
var k = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
4
|
+
var y = (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 {
|
|
8
|
-
const
|
|
9
|
-
x.replaceSync(
|
|
10
|
-
const
|
|
6
|
+
var s = (r, n, t) => (y(r, n, "access private method"), t);
|
|
7
|
+
import { VerticallyExtendedElement as A, 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 only screen and (max-width: 48em){.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 only screen and (min-width: 48em) and (max-width: 64em){.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 only screen and (min-width: 48em){.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 only screen and (min-width: 64.0625em){.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 only screen and (max-width: 47.938em){: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 only screen and (min-width: 48em) and (max-width: 64em){: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 only screen and (min-width: 64.0625em){: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"], q = ["", "s", "m"], R = ["", "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 A {
|
|
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
|
);
|
|
@@ -38,11 +38,11 @@ const m = class m extends y {
|
|
|
38
38
|
<source media="(max-width: 48em)" >
|
|
39
39
|
<source media="(max-width: 64em)" >
|
|
40
40
|
<source media="(min-width: 64em)" >
|
|
41
|
-
<img loading="lazy"
|
|
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>
|
|
@@ -91,7 +91,7 @@ const m = class m extends y {
|
|
|
91
91
|
}
|
|
92
92
|
break;
|
|
93
93
|
case "background-color":
|
|
94
|
-
s(this, i, z).call(this, t, o, e,
|
|
94
|
+
s(this, i, z).call(this, t, o, e, C);
|
|
95
95
|
break;
|
|
96
96
|
case "background-size":
|
|
97
97
|
this.$container.setAttribute("background-size", e);
|
|
@@ -293,9 +293,8 @@ i = new WeakSet(), l = function(t, o) {
|
|
|
293
293
|
}
|
|
294
294
|
}, z = function(t, o, e, a) {
|
|
295
295
|
if (!S(a, e)) {
|
|
296
|
-
|
|
297
|
-
`${e} is not an allowed ${t} value
|
|
298
|
-
this.$el
|
|
296
|
+
P(
|
|
297
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
299
298
|
);
|
|
300
299
|
return;
|
|
301
300
|
}
|
|
@@ -314,8 +313,8 @@ let b = m;
|
|
|
314
313
|
customElements.get("px-card") || customElements.define("px-card", b);
|
|
315
314
|
export {
|
|
316
315
|
b as Card,
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
316
|
+
C as cardBackgroundColorValues,
|
|
317
|
+
q as cardMediaLeftSizeValues,
|
|
318
|
+
R as cardMediaPositionValues,
|
|
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.50",
|
|
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"
|