@proximus/lavender-card 1.0.2 → 1.0.3
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 +9 -10
- package/dist/index.es.js +155 -233
- package/package.json +1 -1
package/dist/Card.d.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
-
import { Container } from '@proximus/lavender-container';
|
|
2
|
+
import { type Container } from '@proximus/lavender-container';
|
|
3
|
+
import { type Image } from '@proximus/lavender-image';
|
|
4
|
+
import { type Stack } from '@proximus/lavender-layout';
|
|
3
5
|
export declare const cardBackgroundColorValues: string[];
|
|
4
6
|
export declare const cardPaddingValues: string[];
|
|
5
7
|
export declare const cardMediaLeftSizeValues: string[];
|
|
6
8
|
export declare const cardMediaPositionValues: string[];
|
|
7
9
|
export declare class Card extends PxElement<HTMLLinkElement> {
|
|
10
|
+
#private;
|
|
8
11
|
static nativeName: string;
|
|
9
12
|
private template;
|
|
10
13
|
constructor();
|
|
@@ -12,17 +15,13 @@ export declare class Card extends PxElement<HTMLLinkElement> {
|
|
|
12
15
|
static get observedAttributes(): string[];
|
|
13
16
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
14
17
|
configureCard(): void;
|
|
15
|
-
updateMediaPosition(attrName: string, newValue: string, attrValue: string[]): void;
|
|
16
|
-
updateMediaPositionTop(cssPropertyName: string): void;
|
|
17
|
-
updateMediaPositionLeft(cssPropertyName: string): void;
|
|
18
|
-
updateMediaPositionBackground(cssPropertyName: string): void;
|
|
19
|
-
createImgTop(device: string, src: string): void;
|
|
20
|
-
createDivLeft(device: string, src: string): void;
|
|
21
|
-
updateBackgroundColor(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
22
|
-
updateMediaLeftSize(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
23
18
|
get $children(): NodeListOf<Element>;
|
|
19
|
+
get $img(): Image;
|
|
20
|
+
get $pictureSourceMobile(): Image;
|
|
21
|
+
get $pictureSourceTablet(): Image;
|
|
22
|
+
get $pictureSourceLaptop(): Image;
|
|
23
|
+
get $stackContainer(): Stack;
|
|
24
24
|
get $container(): Container;
|
|
25
|
-
get $cardContainer(): HTMLDivElement;
|
|
26
25
|
get inverted(): boolean;
|
|
27
26
|
set inverted(value: boolean);
|
|
28
27
|
get backgroundColor(): string;
|
package/dist/index.es.js
CHANGED
|
@@ -1,48 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var k = (r) => {
|
|
2
|
+
throw TypeError(r);
|
|
3
|
+
};
|
|
4
|
+
var A = (r, n, t) => n.has(r) || k("Cannot " + t);
|
|
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) => (A(r, n, "access private method"), t);
|
|
7
|
+
import { PxElement as y, cssTokenBreakpoints as $, checkName as S } from "@proximus/lavender-common";
|
|
8
|
+
const P = ':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 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 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(P);
|
|
4
10
|
const _ = [
|
|
5
11
|
"",
|
|
6
12
|
"container-default",
|
|
7
13
|
"container-light"
|
|
8
|
-
],
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"top",
|
|
12
|
-
"left",
|
|
13
|
-
"background"
|
|
14
|
-
], $ = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .card__content`, A = "px-padding", p = class p extends u {
|
|
15
|
-
template() {
|
|
16
|
-
return `
|
|
17
|
-
<div class="contrast-helper"></div>
|
|
18
|
-
<px-container padding="none" background-color="none" border-radius="none">
|
|
19
|
-
<div class="card__container">
|
|
20
|
-
<div class="card__content">
|
|
21
|
-
<px-vstack gap="default">
|
|
22
|
-
<px-vstack gap="s">
|
|
23
|
-
<slot name="title"></slot>
|
|
24
|
-
<slot name="content"></slot>
|
|
25
|
-
</px-vstack>
|
|
26
|
-
<slot></slot>
|
|
27
|
-
</px-vstack>
|
|
28
|
-
</div>
|
|
29
|
-
</card>
|
|
30
|
-
</px-container>
|
|
31
|
-
`;
|
|
32
|
-
}
|
|
14
|
+
], C = ["", "s", "m", "l"], B = ["", "s", "m"], q = ["", "top", "left", "background"], w = (r, n, t) => `:host([${r}${t ? `--${t}` : ""}='${n}']) .card__content`, L = "px-padding";
|
|
15
|
+
var i, l, p, z;
|
|
16
|
+
const m = class m extends y {
|
|
33
17
|
constructor() {
|
|
34
18
|
super(
|
|
35
|
-
|
|
36
|
-
|
|
19
|
+
x,
|
|
20
|
+
$(
|
|
37
21
|
"padding",
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
w,
|
|
23
|
+
C,
|
|
24
|
+
L,
|
|
41
25
|
"--card__content-padding"
|
|
42
26
|
)
|
|
43
27
|
);
|
|
44
|
-
|
|
45
|
-
|
|
28
|
+
v(this, i);
|
|
29
|
+
this.shadowRoot.innerHTML = this.template();
|
|
30
|
+
}
|
|
31
|
+
template() {
|
|
32
|
+
return `
|
|
33
|
+
<a class="card">
|
|
34
|
+
<div class="contrast-helper"></div>
|
|
35
|
+
<px-container padding="none" background-color="none" border-radius="none">
|
|
36
|
+
<px-stack direction="column" id="stack-container" gap="none">
|
|
37
|
+
<picture>
|
|
38
|
+
<source media="(max-width: 48em)" >
|
|
39
|
+
<source media="(max-width: 64em)" >
|
|
40
|
+
<source media="(min-width: 64em)" >
|
|
41
|
+
<img loading="lazy">
|
|
42
|
+
</picture>
|
|
43
|
+
<div class="card__content">
|
|
44
|
+
<px-vstack gap="default">
|
|
45
|
+
<px-vstack gap="s">
|
|
46
|
+
<slot name="title"></slot>
|
|
47
|
+
<slot name="content"></slot>
|
|
48
|
+
</px-vstack>
|
|
49
|
+
<slot></slot>
|
|
50
|
+
</px-vstack>
|
|
51
|
+
</div>
|
|
52
|
+
</px-stack>
|
|
53
|
+
</px-container>
|
|
54
|
+
</a>
|
|
55
|
+
`;
|
|
46
56
|
}
|
|
47
57
|
connectedCallback() {
|
|
48
58
|
super.connectedCallback(), this.configureCard();
|
|
@@ -56,10 +66,6 @@ const _ = [
|
|
|
56
66
|
"background-position",
|
|
57
67
|
"contrast-helper-gradient",
|
|
58
68
|
"contrast-helper-overlay",
|
|
59
|
-
"media-left-size",
|
|
60
|
-
"media-left-size--mobile",
|
|
61
|
-
"media-left-size--tablet",
|
|
62
|
-
"media-left-size--laptop",
|
|
63
69
|
"media-position",
|
|
64
70
|
"media-position--mobile",
|
|
65
71
|
"media-position--tablet",
|
|
@@ -70,330 +76,246 @@ const _ = [
|
|
|
70
76
|
"media-src--laptop"
|
|
71
77
|
];
|
|
72
78
|
}
|
|
73
|
-
attributeChangedCallback(t,
|
|
74
|
-
if (
|
|
79
|
+
attributeChangedCallback(t, o, e) {
|
|
80
|
+
if (o !== e)
|
|
75
81
|
switch (t) {
|
|
76
82
|
case "inverted":
|
|
77
|
-
if (
|
|
83
|
+
if (e === null || e === "") {
|
|
78
84
|
this.$container.setAttribute("inverted", "");
|
|
79
|
-
for (let
|
|
80
|
-
this.$children[
|
|
85
|
+
for (let a = 0; a < this.$children.length; a++)
|
|
86
|
+
this.$children[a].setAttribute("inverted", "");
|
|
81
87
|
} else {
|
|
82
88
|
this.$container.removeAttribute("inverted");
|
|
83
|
-
for (let
|
|
84
|
-
this.$children[
|
|
89
|
+
for (let a = 0; a < this.$children.length; a++)
|
|
90
|
+
this.$children[a].removeAttribute("inverted");
|
|
85
91
|
}
|
|
86
92
|
break;
|
|
87
93
|
case "background-color":
|
|
88
|
-
this.
|
|
89
|
-
t,
|
|
90
|
-
e,
|
|
91
|
-
i,
|
|
92
|
-
_
|
|
93
|
-
);
|
|
94
|
+
s(this, i, z).call(this, t, o, e, _);
|
|
94
95
|
break;
|
|
95
96
|
case "background-size":
|
|
96
|
-
this.$container.
|
|
97
|
+
this.$container.setAttribute("background-size", e);
|
|
97
98
|
break;
|
|
98
99
|
case "background-position":
|
|
99
|
-
this.$container.
|
|
100
|
+
this.$container.setAttribute("background-position", e);
|
|
100
101
|
break;
|
|
101
102
|
case "media-position":
|
|
103
|
+
s(this, i, l).call(this, e);
|
|
104
|
+
break;
|
|
102
105
|
case "media-position--mobile":
|
|
106
|
+
s(this, i, l).call(this, e, "mobile");
|
|
107
|
+
break;
|
|
103
108
|
case "media-position--tablet":
|
|
104
|
-
|
|
105
|
-
this.updateMediaPosition(t, i, m);
|
|
109
|
+
s(this, i, l).call(this, e, "tablet");
|
|
106
110
|
break;
|
|
107
|
-
case "media-
|
|
108
|
-
|
|
109
|
-
case "media-left-size--tablet":
|
|
110
|
-
case "media-left-size--laptop":
|
|
111
|
-
this.updateMediaLeftSize(
|
|
112
|
-
t,
|
|
113
|
-
e,
|
|
114
|
-
i,
|
|
115
|
-
v
|
|
116
|
-
);
|
|
111
|
+
case "media-position--laptop":
|
|
112
|
+
s(this, i, l).call(this, e, "laptop");
|
|
117
113
|
break;
|
|
118
114
|
case "media-src":
|
|
115
|
+
s(this, i, p).call(this, e);
|
|
116
|
+
break;
|
|
119
117
|
case "media-src--mobile":
|
|
118
|
+
s(this, i, p).call(this, e, "mobile");
|
|
119
|
+
break;
|
|
120
120
|
case "media-src--tablet":
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
o && (r += `--${o}`);
|
|
126
|
-
const a = this.getAttribute(r) || this.mediaPosition;
|
|
127
|
-
this.updateMediaPosition(
|
|
128
|
-
r,
|
|
129
|
-
a,
|
|
130
|
-
m
|
|
131
|
-
);
|
|
121
|
+
s(this, i, p).call(this, e, "tablet");
|
|
122
|
+
break;
|
|
123
|
+
case "media-src--laptop":
|
|
124
|
+
s(this, i, p).call(this, e, "laptop");
|
|
132
125
|
break;
|
|
133
|
-
}
|
|
134
126
|
default:
|
|
135
|
-
super.attributeChangedCallback(t,
|
|
127
|
+
super.attributeChangedCallback(t, o, e);
|
|
136
128
|
break;
|
|
137
129
|
}
|
|
138
130
|
}
|
|
139
131
|
configureCard() {
|
|
140
|
-
this.
|
|
141
|
-
}
|
|
142
|
-
updateMediaPosition(t, e, i) {
|
|
143
|
-
if (!c(i, e)) {
|
|
144
|
-
console.error(
|
|
145
|
-
`${e} is not an allowed ${t} value`,
|
|
146
|
-
this.$el
|
|
147
|
-
);
|
|
148
|
-
return;
|
|
149
|
-
}
|
|
150
|
-
const o = t.includes("--"), r = o ? t.split("--")[0] : t;
|
|
151
|
-
if (!o)
|
|
152
|
-
this.$el.classList.contains(`media-position-${e}`) || this.$el.classList.add(`media-position-${e}`), e === "top" ? this.updateMediaPositionTop(r) : e === "left" ? this.updateMediaPositionLeft(r) : e === "background" && this.updateMediaPositionBackground(r);
|
|
153
|
-
else {
|
|
154
|
-
const a = t.split("--")[1];
|
|
155
|
-
this.$el.classList.contains(
|
|
156
|
-
`media-position-${e}--${a}`
|
|
157
|
-
) || this.$el.classList.add(`media-position-${e}--${a}`), e === "top" && this.createImgTop(
|
|
158
|
-
a,
|
|
159
|
-
this.getAttribute(`media-src--${a}`)
|
|
160
|
-
), e === "left" && this.createDivLeft(
|
|
161
|
-
a,
|
|
162
|
-
this.getAttribute(`media-src--${a}`)
|
|
163
|
-
), e === "background" && this.$container.setAttribute(
|
|
164
|
-
`background-image--${a}`,
|
|
165
|
-
this.getAttribute(`media-src--${a}`) || ""
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
updateMediaPositionTop(t) {
|
|
170
|
-
if (this.mediaSrc) {
|
|
171
|
-
const e = document.createElement("img");
|
|
172
|
-
e.className = "card__media-top", e.src = this.mediaSrc || "", e.alt = "", ["mobile", "tablet", "laptop"].forEach((i) => {
|
|
173
|
-
(this.getAttribute(`${t}--${i}`) || !this.getAttribute(`${t}--${i}`) && this.getAttribute(`media-src--${i}`)) && e.classList.add(`hidden--${i}`);
|
|
174
|
-
}), this.$cardContainer.querySelector(".card__media-top") ? this.$cardContainer.querySelector(".card__media-top").replaceWith(e) : this.$cardContainer.insertBefore(e, this.$cardContainer.firstChild);
|
|
175
|
-
}
|
|
176
|
-
["laptop", "tablet", "mobile"].forEach((e) => {
|
|
177
|
-
!this.getAttribute(`${t}--${e}`) && this.getAttribute(`media-src--${e}`) && this.createImgTop(e, this.getAttribute(`media-src--${e}`));
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
updateMediaPositionLeft(t) {
|
|
181
|
-
if (this.mediaSrc) {
|
|
182
|
-
const e = document.createElement("div");
|
|
183
|
-
e.className = "card__media-left", e.style.backgroundImage = `url(${this.mediaSrc || ""})`, ["mobile", "tablet", "laptop"].forEach((i) => {
|
|
184
|
-
(this.getAttribute(`${t}--${i}`) || !this.getAttribute(`${t}--${i}`) && this.getAttribute(`media-src--${i}`)) && e.classList.add(`hidden--${i}`);
|
|
185
|
-
}), this.$cardContainer.querySelector(".card__media-left") ? this.$cardContainer.querySelector(".card__media-left").replaceWith(e) : this.$cardContainer.insertBefore(e, this.$cardContainer.firstChild);
|
|
186
|
-
}
|
|
187
|
-
["laptop", "tablet", "mobile"].forEach((e) => {
|
|
188
|
-
!this.getAttribute(`${t}--${e}`) && this.getAttribute(`media-src--${e}`) && this.createDivLeft(e, this.getAttribute(`media-src--${e}`));
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
updateMediaPositionBackground(t) {
|
|
192
|
-
this.mediaSrc ? (this.$container.setAttribute(
|
|
193
|
-
"background-image--mobile",
|
|
194
|
-
this.mediaSrc || ""
|
|
195
|
-
), this.$container.setAttribute(
|
|
196
|
-
"background-image--tablet",
|
|
197
|
-
this.mediaSrc || ""
|
|
198
|
-
), this.$container.setAttribute(
|
|
199
|
-
"background-image--laptop",
|
|
200
|
-
this.mediaSrc || ""
|
|
201
|
-
), ["mobile", "tablet", "laptop"].forEach((e) => {
|
|
202
|
-
const i = this.getAttribute(`media-src--${e}`), o = this.getAttribute(
|
|
203
|
-
`${t}--${e}`
|
|
204
|
-
);
|
|
205
|
-
i && !o ? this.$container.setAttribute(
|
|
206
|
-
`background-image--${e}`,
|
|
207
|
-
i
|
|
208
|
-
) : o && this.$container.removeAttribute(`background-image--${e}`);
|
|
209
|
-
})) : ["mobile", "tablet", "laptop"].forEach((e) => {
|
|
210
|
-
!this.getAttribute(`${t}--${e}`) && this.getAttribute(`media-src--${e}`) && this.$container.setAttribute(
|
|
211
|
-
`background-image--${e}`,
|
|
212
|
-
this.getAttribute(`media-src--${e}`)
|
|
213
|
-
);
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
createImgTop(t, e) {
|
|
217
|
-
const i = document.createElement("img");
|
|
218
|
-
i.className = `card__media-top--${t}`, i.src = e || "", i.classList.add(`shown--${t}`), i.alt = "", this.$cardContainer.querySelector(`.card__media-top--${t}`) ? this.$cardContainer.querySelector(`.card__media-top--${t}`).replaceWith(i) : this.$cardContainer.insertBefore(i, this.$cardContainer.firstChild);
|
|
219
|
-
}
|
|
220
|
-
createDivLeft(t, e) {
|
|
221
|
-
const i = document.createElement("div");
|
|
222
|
-
i.className = `card__media-left--${t}`, i.style.backgroundImage = `url(${e || ""})`, i.classList.add(`shown--${t}`), this.$cardContainer.querySelector(`.card__media-left--${t}`) ? this.$cardContainer.querySelector(`.card__media-left--${t}`).replaceWith(i) : this.$cardContainer.insertBefore(i, this.$cardContainer.firstChild);
|
|
223
|
-
}
|
|
224
|
-
updateBackgroundColor(t, e, i, o) {
|
|
225
|
-
if (!c(o, i)) {
|
|
226
|
-
console.error(
|
|
227
|
-
`${i} is not an allowed ${t} value`,
|
|
228
|
-
this.$el
|
|
229
|
-
);
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
const r = (a) => {
|
|
233
|
-
a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
|
|
234
|
-
"--card-background-color-default",
|
|
235
|
-
`var(--px-color-background-${a}-default)`
|
|
236
|
-
), this.$el.style.setProperty(
|
|
237
|
-
"--card-background-color-inverted",
|
|
238
|
-
`var(--px-color-background-${a}-inverted)`
|
|
239
|
-
));
|
|
240
|
-
};
|
|
241
|
-
r(e), r(i);
|
|
242
|
-
}
|
|
243
|
-
updateMediaLeftSize(t, e, i, o) {
|
|
244
|
-
if (!c(o, i)) {
|
|
245
|
-
console.error(
|
|
246
|
-
`${i} is not an allowed ${t} value`,
|
|
247
|
-
this.$el
|
|
248
|
-
);
|
|
249
|
-
return;
|
|
250
|
-
}
|
|
251
|
-
const r = (n, s) => {
|
|
252
|
-
if (s !== null && s !== "") {
|
|
253
|
-
let d = "";
|
|
254
|
-
s === "s" && (d = "120px"), s === "m" && (d = "240px"), this.$el.style.setProperty(
|
|
255
|
-
`--card-media-left-size${n ? `--${n}` : ""}`,
|
|
256
|
-
d
|
|
257
|
-
);
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
if (t.includes("--")) {
|
|
261
|
-
const n = t.split("--")[1];
|
|
262
|
-
r(n, e), r(n, i);
|
|
263
|
-
} else
|
|
264
|
-
r("", e), r("", i);
|
|
132
|
+
this.padding || (this.padding = "m"), this.mediaPosition || (this.mediaPosition = "top"), this.mediaPosition === "background" && (this.backgroundPosition || (this.backgroundPosition = "center"), this.backgroundSize || (this.backgroundSize = "cover"));
|
|
265
133
|
}
|
|
266
134
|
get $children() {
|
|
267
135
|
return this.querySelectorAll("px-card > *");
|
|
268
136
|
}
|
|
137
|
+
get $img() {
|
|
138
|
+
return this.shadowRoot.querySelector("picture > img");
|
|
139
|
+
}
|
|
140
|
+
get $pictureSourceMobile() {
|
|
141
|
+
return this.shadowRoot.querySelector(
|
|
142
|
+
"picture > source:nth-child(1)"
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
get $pictureSourceTablet() {
|
|
146
|
+
return this.shadowRoot.querySelector(
|
|
147
|
+
"picture > source:nth-child(2)"
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
get $pictureSourceLaptop() {
|
|
151
|
+
return this.shadowRoot.querySelector(
|
|
152
|
+
"picture > source:nth-child(3)"
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
get $stackContainer() {
|
|
156
|
+
return this.shadowRoot.querySelector("#stack-container");
|
|
157
|
+
}
|
|
269
158
|
get $container() {
|
|
270
159
|
return this.shadowRoot.querySelector("px-container");
|
|
271
160
|
}
|
|
272
|
-
get $cardContainer() {
|
|
273
|
-
return this.shadowRoot.querySelector(".card__container");
|
|
274
|
-
}
|
|
275
161
|
get inverted() {
|
|
276
162
|
return this.hasAttribute("inverted");
|
|
277
163
|
}
|
|
278
164
|
set inverted(t) {
|
|
279
|
-
|
|
165
|
+
super._updateBooleanAttribute("inverted", t);
|
|
280
166
|
}
|
|
281
167
|
get backgroundColor() {
|
|
282
168
|
return this.getAttribute("background-color");
|
|
283
169
|
}
|
|
284
170
|
set backgroundColor(t) {
|
|
285
|
-
|
|
171
|
+
super._updateAttribute("background-color", t);
|
|
286
172
|
}
|
|
287
173
|
get backgroundSize() {
|
|
288
174
|
return this.getAttribute("background-size");
|
|
289
175
|
}
|
|
290
176
|
set backgroundSize(t) {
|
|
291
|
-
|
|
177
|
+
super._updateAttribute("background-size", t);
|
|
292
178
|
}
|
|
293
179
|
get backgroundPosition() {
|
|
294
180
|
return this.getAttribute("background-position");
|
|
295
181
|
}
|
|
296
182
|
set backgroundPosition(t) {
|
|
297
|
-
|
|
183
|
+
super._updateAttribute("background-position", t);
|
|
298
184
|
}
|
|
299
185
|
get padding() {
|
|
300
186
|
return this.getAttribute("padding");
|
|
301
187
|
}
|
|
302
188
|
set padding(t) {
|
|
303
|
-
|
|
189
|
+
super._updateAttribute("padding", t);
|
|
304
190
|
}
|
|
305
191
|
get gradientContrastHelper() {
|
|
306
192
|
return this.hasAttribute("contrast-helper-gradient");
|
|
307
193
|
}
|
|
308
194
|
set gradientContrastHelper(t) {
|
|
309
|
-
|
|
195
|
+
super._updateBooleanAttribute("contrast-helper-gradient", t);
|
|
310
196
|
}
|
|
311
197
|
get overlayContrastHelper() {
|
|
312
198
|
return this.hasAttribute("contrast-helper-overlay");
|
|
313
199
|
}
|
|
314
200
|
set overlayContrastHelper(t) {
|
|
315
|
-
|
|
201
|
+
super._updateBooleanAttribute("contrast-helper-overlay", t);
|
|
316
202
|
}
|
|
317
203
|
get mediaLeftSize() {
|
|
318
204
|
return this.getAttribute("media-left-size");
|
|
319
205
|
}
|
|
320
206
|
set mediaLeftSize(t) {
|
|
321
|
-
|
|
207
|
+
super._updateAttribute("media-left-size", t);
|
|
322
208
|
}
|
|
323
209
|
get mediaLeftSizeMobile() {
|
|
324
210
|
return this.getAttribute("media-left-size--mobile");
|
|
325
211
|
}
|
|
326
212
|
set mediaLeftSizeMobile(t) {
|
|
327
|
-
|
|
213
|
+
super._updateAttribute("media-left-size--mobile", t);
|
|
328
214
|
}
|
|
329
215
|
get mediaLeftSizeTablet() {
|
|
330
216
|
return this.getAttribute("media-left-size--tablet");
|
|
331
217
|
}
|
|
332
218
|
set mediaLeftSizeTablet(t) {
|
|
333
|
-
|
|
219
|
+
super._updateAttribute("media-left-size--tablet", t);
|
|
334
220
|
}
|
|
335
221
|
get mediaLeftSizeLaptop() {
|
|
336
222
|
return this.getAttribute("media-left-size--laptop");
|
|
337
223
|
}
|
|
338
224
|
set mediaLeftSizeLaptop(t) {
|
|
339
|
-
|
|
225
|
+
super._updateAttribute("media-left-size--laptop", t);
|
|
340
226
|
}
|
|
341
227
|
get mediaPosition() {
|
|
342
228
|
return this.getAttribute("media-position");
|
|
343
229
|
}
|
|
344
230
|
set mediaPosition(t) {
|
|
345
|
-
|
|
231
|
+
super._updateAttribute("media-position", t);
|
|
346
232
|
}
|
|
347
233
|
get mediaPositionMobile() {
|
|
348
234
|
return this.getAttribute("media-position--mobile");
|
|
349
235
|
}
|
|
350
236
|
set mediaPositionMobile(t) {
|
|
351
|
-
|
|
237
|
+
super._updateAttribute("media-position--mobile", t);
|
|
352
238
|
}
|
|
353
239
|
get mediaPositionTablet() {
|
|
354
240
|
return this.getAttribute("media-position--tablet");
|
|
355
241
|
}
|
|
356
242
|
set mediaPositionTablet(t) {
|
|
357
|
-
|
|
243
|
+
super._updateAttribute("media-position--tablet", t);
|
|
358
244
|
}
|
|
359
245
|
get mediaPositionLaptop() {
|
|
360
246
|
return this.getAttribute("media-position--laptop");
|
|
361
247
|
}
|
|
362
248
|
set mediaPositionLaptop(t) {
|
|
363
|
-
|
|
249
|
+
super._updateAttribute("media-position--laptop", t);
|
|
364
250
|
}
|
|
365
251
|
get mediaSrc() {
|
|
366
252
|
return this.getAttribute("media-src");
|
|
367
253
|
}
|
|
368
254
|
set mediaSrc(t) {
|
|
369
|
-
|
|
255
|
+
super._updateAttribute("media-src", t);
|
|
370
256
|
}
|
|
371
257
|
get mediaSrcMobile() {
|
|
372
258
|
return this.getAttribute("media-src--mobile");
|
|
373
259
|
}
|
|
374
260
|
set mediaSrcMobile(t) {
|
|
375
|
-
|
|
261
|
+
super._updateAttribute("media-src--mobile", t);
|
|
376
262
|
}
|
|
377
263
|
get mediaSrcTablet() {
|
|
378
264
|
return this.getAttribute("media-src--tablet");
|
|
379
265
|
}
|
|
380
266
|
set mediaSrcTablet(t) {
|
|
381
|
-
|
|
267
|
+
super._updateAttribute("media-src--tablet", t);
|
|
382
268
|
}
|
|
383
269
|
get mediaSrcLaptop() {
|
|
384
270
|
return this.getAttribute("media-src--laptop");
|
|
385
271
|
}
|
|
386
272
|
set mediaSrcLaptop(t) {
|
|
387
|
-
|
|
273
|
+
super._updateAttribute("media-src--laptop", t);
|
|
388
274
|
}
|
|
389
275
|
};
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
276
|
+
i = new WeakSet(), l = function(t, o) {
|
|
277
|
+
const e = o ? `direction--${o}` : "direction";
|
|
278
|
+
t === "left" ? (this.$stackContainer.setAttribute(e, "row"), o === "laptop" ? this.$stackContainer.setAttribute("direction--desktop", "row") : this.$stackContainer.removeAttribute("direction--desktop")) : (t === "top" || t === "null") && (this.$stackContainer.setAttribute(e, "column"), o === "laptop" ? this.$stackContainer.setAttribute("direction--desktop", "column") : this.$stackContainer.removeAttribute("direction--desktop"));
|
|
279
|
+
}, p = function(t, o) {
|
|
280
|
+
var e, a, c, d, u, h, g, f;
|
|
281
|
+
switch (o) {
|
|
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) : (a = this.$pictureSourceMobile) == null || a.removeAttribute("srcset");
|
|
284
|
+
break;
|
|
285
|
+
case "tablet":
|
|
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");
|
|
287
|
+
break;
|
|
288
|
+
case "laptop":
|
|
289
|
+
(this.mediaPosition === "background" || this.mediaPositionLaptop === "background") && this.$container.setAttribute("background-image--laptop", t), t ? (u = this.$pictureSourceLaptop) == null || u.setAttribute("srcset", t) : (h = this.$pictureSourceLaptop) == null || h.removeAttribute("srcset");
|
|
290
|
+
break;
|
|
291
|
+
default:
|
|
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
|
+
}
|
|
294
|
+
}, z = function(t, o, e, a) {
|
|
295
|
+
if (!S(a, e)) {
|
|
296
|
+
console.error(
|
|
297
|
+
`${e} is not an allowed ${t} value`,
|
|
298
|
+
this.$el
|
|
299
|
+
);
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
const c = (d) => {
|
|
303
|
+
d !== null && d !== "" && d !== "default" && (this.$el.style.setProperty(
|
|
304
|
+
"--card-background-color-default",
|
|
305
|
+
`var(--px-color-background-${d}-default)`
|
|
306
|
+
), this.$el.style.setProperty(
|
|
307
|
+
"--card-background-color-inverted",
|
|
308
|
+
`var(--px-color-background-${d}-inverted)`
|
|
309
|
+
));
|
|
310
|
+
};
|
|
311
|
+
c(o), c(e);
|
|
312
|
+
}, m.nativeName = "a";
|
|
313
|
+
let b = m;
|
|
314
|
+
customElements.get("px-card") || customElements.define("px-card", b);
|
|
393
315
|
export {
|
|
394
|
-
|
|
316
|
+
b as Card,
|
|
395
317
|
_ as cardBackgroundColorValues,
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
318
|
+
B as cardMediaLeftSizeValues,
|
|
319
|
+
q as cardMediaPositionValues,
|
|
320
|
+
C as cardPaddingValues
|
|
399
321
|
};
|