@proximus/lavender-card 2.0.0-alpha.2 → 2.0.0-alpha.200

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