@proximus/lavender-card 2.0.0-alpha.202 → 2.0.0-alpha.204
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 +1 -1
- package/dist/custom-elements.json +7 -9
- package/dist/index.es.js +19 -19
- package/dist/web-types.json +2 -3
- package/package.json +1 -1
package/dist/Card.d.ts
CHANGED
|
@@ -8,8 +8,8 @@ export declare const cardMediaLeftSizeValues: string[];
|
|
|
8
8
|
export declare const cardMediaPositionValues: string[];
|
|
9
9
|
export declare class Card extends VerticallyExtendedElement<HTMLLinkElement> {
|
|
10
10
|
#private;
|
|
11
|
+
protected static readonly template: HTMLTemplateElement;
|
|
11
12
|
static nativeName: string;
|
|
12
|
-
private template;
|
|
13
13
|
constructor();
|
|
14
14
|
connectedCallback(): void;
|
|
15
15
|
static get observedAttributes(): string[];
|
|
@@ -43,6 +43,13 @@
|
|
|
43
43
|
"description": "",
|
|
44
44
|
"name": "Card",
|
|
45
45
|
"members": [
|
|
46
|
+
{
|
|
47
|
+
"kind": "field",
|
|
48
|
+
"name": "template",
|
|
49
|
+
"privacy": "protected",
|
|
50
|
+
"static": true,
|
|
51
|
+
"readonly": true
|
|
52
|
+
},
|
|
46
53
|
{
|
|
47
54
|
"kind": "field",
|
|
48
55
|
"name": "nativeName",
|
|
@@ -52,11 +59,6 @@
|
|
|
52
59
|
"static": true,
|
|
53
60
|
"default": "'a'"
|
|
54
61
|
},
|
|
55
|
-
{
|
|
56
|
-
"kind": "method",
|
|
57
|
-
"name": "template",
|
|
58
|
-
"privacy": "private"
|
|
59
|
-
},
|
|
60
62
|
{
|
|
61
63
|
"kind": "method",
|
|
62
64
|
"name": "configureCard"
|
|
@@ -242,10 +244,6 @@
|
|
|
242
244
|
{
|
|
243
245
|
"kind": "field",
|
|
244
246
|
"name": "mediaSrcLaptop"
|
|
245
|
-
},
|
|
246
|
-
{
|
|
247
|
-
"kind": "field",
|
|
248
|
-
"name": "innerHTML"
|
|
249
247
|
}
|
|
250
248
|
],
|
|
251
249
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { VerticallyExtendedElement as e, checkName as t,
|
|
1
|
+
import { VerticallyExtendedElement as e, checkName as t, createTemplate as n, cssTokenBreakpoints as r, log as i, renderTemplate as a } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/card.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var o = ":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{height:100%;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);border:var(--px-size-border-m) solid transparent;text-decoration:none;display:block;position:relative;overflow:hidden}.card .contrast-helper{z-index:1;pointer-events:none;display:none;position:absolute;inset:0}:host([contrast-helper-gradient]) :is(.card .contrast-helper){background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%);display:block}:host([contrast-helper-overlay]) :is(.card .contrast-helper){background-color:#ffffffb3;display:block}.card .card__content{z-index:2;flex-grow:1;position:relative}.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-line-height-ratio-l);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 (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:first-child[srcset]){display:block}:is(:host([media-position=top]),:host([media-position--mobile=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}:is(:host([media-position=left]:not([media-position--mobile=top])),:host([media-position--mobile=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),.media-position-background--mobile) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),.media-position-background--mobile):hover px-container{background-color:#0000}}@media screen and (width>=48rem) and (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}:is(:host([media-position=left]:not([media-position--tablet=top])),:host([media-position--tablet=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(:host([media-position=top]),:host([media-position--tablet=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}:is(.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),.media-position-background--tablet) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),.media-position-background--tablet):hover px-container{background-color:#0000}}@media screen and (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 (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}:is(:host([media-position=left]:not([media-position--laptop=top])),:host([media-position--laptop=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(:host([media-position=top]),:host([media-position--laptop=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}.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}:is(.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),.media-position-background--laptop) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),.media-position-background--laptop):hover px-container{background-color:#0000}}: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 (width<=47.938rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),:host([inverted]) .media-position-background--mobile) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),:host([inverted]) .media-position-background--mobile):hover px-container{background-color:#0000}}@media screen and (width>=48rem) and (width<=64rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),:host([inverted]) .media-position-background--tablet) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),:host([inverted]) .media-position-background--tablet):hover px-container{background-color:#0000}}@media screen and (width>=64.0625rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),:host([inverted]) .media-position-background--laptop) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),:host([inverted]) .media-position-background--laptop):hover px-container{background-color:#0000}}", s = new CSSStyleSheet();
|
|
4
|
+
s.replaceSync(o);
|
|
5
|
+
var c = [
|
|
6
6
|
"",
|
|
7
7
|
"container-default",
|
|
8
8
|
"container-light"
|
|
9
|
-
],
|
|
9
|
+
], l = [
|
|
10
10
|
"",
|
|
11
11
|
"s",
|
|
12
12
|
"m",
|
|
13
13
|
"l"
|
|
14
|
-
],
|
|
14
|
+
], u = [
|
|
15
15
|
"",
|
|
16
16
|
"s",
|
|
17
17
|
"m"
|
|
18
|
-
],
|
|
18
|
+
], d = [
|
|
19
19
|
"",
|
|
20
20
|
"top",
|
|
21
21
|
"left",
|
|
22
22
|
"background"
|
|
23
|
-
],
|
|
23
|
+
], f = r("padding", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .card__content`, l, "px-padding", "--card__content-padding"), p = class r extends e {
|
|
24
24
|
static {
|
|
25
|
-
this.
|
|
25
|
+
this.template = n("<a class=\"card\"><div class=\"contrast-helper\"></div><px-container padding=\"none\" background-color=\"none\" border-radius=\"none\"><px-stack direction=\"column\" id=\"stack-container\" gap=\"none\"><picture><source media=\"(max-width: 48rem)\" ><source media=\"(max-width: 64rem)\" ><source media=\"(min-width: 64rem)\" ><img loading=\"lazy\" alt=\"\" /></picture><div class=\"card__content\"><px-vstack gap=\"default\"><px-vstack gap=\"s\" grow=\"1\"><slot name=\"title\"></slot><slot name=\"content\"></slot></px-vstack><slot></slot></px-vstack></div></px-stack></px-container></a>");
|
|
26
26
|
}
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
static {
|
|
28
|
+
this.nativeName = "a";
|
|
29
29
|
}
|
|
30
30
|
constructor() {
|
|
31
|
-
super(
|
|
31
|
+
super(s, f), a(this.shadowRoot, r.template);
|
|
32
32
|
}
|
|
33
33
|
connectedCallback() {
|
|
34
34
|
super.connectedCallback(), this.configureCard();
|
|
@@ -64,7 +64,7 @@ var o = [
|
|
|
64
64
|
}
|
|
65
65
|
break;
|
|
66
66
|
case "background-color":
|
|
67
|
-
this.#n(e, t, n,
|
|
67
|
+
this.#n(e, t, n, c);
|
|
68
68
|
break;
|
|
69
69
|
case "background-size":
|
|
70
70
|
this.$container.setAttribute("background-size", n);
|
|
@@ -120,15 +120,15 @@ var o = [
|
|
|
120
120
|
default: this.mediaPosition === "background" && this.$container.setAttribute("background-image", e), e ? this.$img?.setAttribute("src", e) : this.$img?.removeAttribute("src");
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
#n(e, n,
|
|
124
|
-
if (!t(a,
|
|
125
|
-
|
|
123
|
+
#n(e, n, r, a) {
|
|
124
|
+
if (!t(a, r)) {
|
|
125
|
+
i(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${a.join("\", \"")}".`);
|
|
126
126
|
return;
|
|
127
127
|
}
|
|
128
128
|
let o = (e) => {
|
|
129
129
|
e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--card-background-color-default", `var(--px-color-background-${e}-default)`), this.$el.style.setProperty("--card-background-color-inverted", `var(--px-color-background-${e}-inverted)`));
|
|
130
130
|
};
|
|
131
|
-
o(n), o(
|
|
131
|
+
o(n), o(r);
|
|
132
132
|
}
|
|
133
133
|
get $children() {
|
|
134
134
|
return this.querySelectorAll("px-card > *");
|
|
@@ -266,6 +266,6 @@ var o = [
|
|
|
266
266
|
this._updateAttribute("media-src--laptop", e);
|
|
267
267
|
}
|
|
268
268
|
};
|
|
269
|
-
customElements.get("px-card") || customElements.define("px-card",
|
|
269
|
+
customElements.get("px-card") || customElements.define("px-card", p);
|
|
270
270
|
//#endregion
|
|
271
|
-
export {
|
|
271
|
+
export { p as Card, c as cardBackgroundColorValues, u as cardMediaLeftSizeValues, d as cardMediaPositionValues, l as cardPaddingValues };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-card",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.204",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -60,8 +60,7 @@
|
|
|
60
60
|
{ "name": "mediaSrc" },
|
|
61
61
|
{ "name": "mediaSrcMobile" },
|
|
62
62
|
{ "name": "mediaSrcTablet" },
|
|
63
|
-
{ "name": "mediaSrcLaptop" }
|
|
64
|
-
{ "name": "innerHTML" }
|
|
63
|
+
{ "name": "mediaSrcLaptop" }
|
|
65
64
|
],
|
|
66
65
|
"events": []
|
|
67
66
|
}
|