@proximus/lavender-banner 1.4.2-beta.1 → 1.4.3-alpha.2
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/index.es.js +36 -32
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "@proximus/lavender-container";
|
|
2
|
-
import { cssTokenBreakpoints as
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
2
|
+
import { cssTokenBreakpoints as b, gapValues as m, PxElement as h, log as c, VerticallyExtendedElement as f, backgroundSizeValues as y, gradientValues as j, backgroundColorValues as k } from "@proximus/lavender-common";
|
|
3
|
+
const A = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', v = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", g = new CSSStyleSheet();
|
|
4
|
+
g.replaceSync(v);
|
|
5
|
+
const C = [
|
|
6
6
|
"1",
|
|
7
7
|
"2",
|
|
8
8
|
"3",
|
|
@@ -15,7 +15,7 @@ const v = [
|
|
|
15
15
|
"10",
|
|
16
16
|
"11",
|
|
17
17
|
"12"
|
|
18
|
-
],
|
|
18
|
+
], x = [
|
|
19
19
|
"",
|
|
20
20
|
"start",
|
|
21
21
|
"end",
|
|
@@ -24,15 +24,15 @@ const v = [
|
|
|
24
24
|
"space-around",
|
|
25
25
|
"space-evenly",
|
|
26
26
|
"stretch"
|
|
27
|
-
],
|
|
27
|
+
], $ = ["", "start", "end", "center", "stretch"], I = (u, t, i) => `:host([${u}${i ? `--${i}` : ""}='${t}']) .grid`, S = "px-spacing", T = b(
|
|
28
28
|
"gap",
|
|
29
|
-
$,
|
|
30
|
-
b,
|
|
31
29
|
I,
|
|
30
|
+
m,
|
|
31
|
+
S,
|
|
32
32
|
"--grid-gap"
|
|
33
|
-
), o = class o extends
|
|
33
|
+
), o = class o extends h {
|
|
34
34
|
constructor() {
|
|
35
|
-
super(
|
|
35
|
+
super(g, T), this.template = () => `<div class="grid">
|
|
36
36
|
<slot></slot>
|
|
37
37
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
38
38
|
}
|
|
@@ -75,7 +75,7 @@ const v = [
|
|
|
75
75
|
case "grid-cols--mobile":
|
|
76
76
|
case "grid-cols--tablet":
|
|
77
77
|
case "grid-cols--laptop":
|
|
78
|
-
this.updateAttribute(t, i, e,
|
|
78
|
+
this.updateAttribute(t, i, e, C);
|
|
79
79
|
break;
|
|
80
80
|
case "justify-content":
|
|
81
81
|
case "align-content":
|
|
@@ -91,7 +91,7 @@ const v = [
|
|
|
91
91
|
t,
|
|
92
92
|
i,
|
|
93
93
|
e,
|
|
94
|
-
|
|
94
|
+
x
|
|
95
95
|
);
|
|
96
96
|
break;
|
|
97
97
|
case "justify-items":
|
|
@@ -108,7 +108,7 @@ const v = [
|
|
|
108
108
|
t,
|
|
109
109
|
i,
|
|
110
110
|
e,
|
|
111
|
-
|
|
111
|
+
$
|
|
112
112
|
);
|
|
113
113
|
break;
|
|
114
114
|
default:
|
|
@@ -118,7 +118,9 @@ const v = [
|
|
|
118
118
|
}
|
|
119
119
|
updateGap(t, i, e) {
|
|
120
120
|
if (!this.checkName(e, i)) {
|
|
121
|
-
|
|
121
|
+
c(
|
|
122
|
+
`${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
|
|
123
|
+
);
|
|
122
124
|
return;
|
|
123
125
|
}
|
|
124
126
|
const n = (s) => {
|
|
@@ -136,7 +138,9 @@ const v = [
|
|
|
136
138
|
n(t), n(i);
|
|
137
139
|
}
|
|
138
140
|
updateAttribute(t, i, e, n) {
|
|
139
|
-
this.checkName(n, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) :
|
|
141
|
+
this.checkName(n, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : c(
|
|
142
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
143
|
+
);
|
|
140
144
|
}
|
|
141
145
|
get gap() {
|
|
142
146
|
return this.getAttribute("gap");
|
|
@@ -310,13 +314,13 @@ const v = [
|
|
|
310
314
|
o.nativeName = "div";
|
|
311
315
|
let a = o;
|
|
312
316
|
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
313
|
-
const
|
|
314
|
-
|
|
315
|
-
const l = class l extends
|
|
317
|
+
const d = new CSSStyleSheet();
|
|
318
|
+
d.replaceSync(A);
|
|
319
|
+
const l = class l extends f {
|
|
316
320
|
constructor() {
|
|
317
|
-
super(
|
|
321
|
+
super(d), this.template = () => `<div class="banner">
|
|
318
322
|
<div class="contrast-helper"></div>
|
|
319
|
-
<px-container class="banner-container" padding
|
|
323
|
+
<px-container class="banner-container" padding--mobile="m" border-radius="main" >
|
|
320
324
|
<px-grid gap="none">
|
|
321
325
|
<px-container padding="none" background-color="none">
|
|
322
326
|
<div class="banner-content">
|
|
@@ -354,16 +358,16 @@ const l = class l extends h {
|
|
|
354
358
|
}
|
|
355
359
|
connectedCallback() {
|
|
356
360
|
var t;
|
|
357
|
-
(t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding();
|
|
361
|
+
(t = super.connectedCallback) == null || t.call(this), this.reduced ? this.$container.setAttribute("padding", "m") : this.$container.setAttribute("padding", "l"), this.createGridTemplateAreas(), this.createGridding();
|
|
358
362
|
}
|
|
359
363
|
attributeChangedCallback(t, i, e) {
|
|
360
364
|
if (i !== e)
|
|
361
365
|
switch (t) {
|
|
362
366
|
case "background-color":
|
|
363
|
-
this.$container.backgroundColor =
|
|
367
|
+
this.$container.backgroundColor = k.indexOf(e) > 0 ? e : "none";
|
|
364
368
|
break;
|
|
365
369
|
case "background-gradient":
|
|
366
|
-
this.$container.gradient =
|
|
370
|
+
this.$container.gradient = j.indexOf(e) > 0 ? e : "none";
|
|
367
371
|
break;
|
|
368
372
|
case "background-image":
|
|
369
373
|
this.$container.backgroundImage = e;
|
|
@@ -378,7 +382,7 @@ const l = class l extends h {
|
|
|
378
382
|
this.$container.backgroundImageLaptop = e;
|
|
379
383
|
break;
|
|
380
384
|
case "background-size":
|
|
381
|
-
this.$container.backgroundSize =
|
|
385
|
+
this.$container.backgroundSize = y.indexOf(e) > 0 ? e : "";
|
|
382
386
|
break;
|
|
383
387
|
case "background-position":
|
|
384
388
|
this.$container.backgroundPosition = e;
|
|
@@ -426,29 +430,29 @@ const l = class l extends h {
|
|
|
426
430
|
}
|
|
427
431
|
createGridding(t) {
|
|
428
432
|
const i = [
|
|
429
|
-
{ prop: "hasGridding",
|
|
433
|
+
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
430
434
|
{
|
|
431
435
|
prop: "hasGriddingMobile",
|
|
432
|
-
|
|
436
|
+
gridAttr: "grid-cols--mobile",
|
|
433
437
|
attr: "col-span--mobile"
|
|
434
438
|
},
|
|
435
439
|
{
|
|
436
440
|
prop: "hasGriddingTablet",
|
|
437
|
-
|
|
441
|
+
gridAttr: "grid-cols--tablet",
|
|
438
442
|
attr: "col-span--tablet"
|
|
439
443
|
},
|
|
440
444
|
{
|
|
441
445
|
prop: "hasGriddingLaptop",
|
|
442
|
-
|
|
446
|
+
gridAttr: "grid-cols--laptop",
|
|
443
447
|
attr: "col-span--laptop"
|
|
444
448
|
}
|
|
445
449
|
], e = this.shadowRoot.querySelector(
|
|
446
450
|
"px-grid > px-container"
|
|
447
451
|
);
|
|
448
|
-
t !== null ? i.forEach(({ prop: n,
|
|
449
|
-
this[n] && (this.$grid
|
|
450
|
-
}) : i.forEach(({
|
|
451
|
-
this.$grid
|
|
452
|
+
t !== null ? i.forEach(({ prop: n, gridAttr: s, attr: p }) => {
|
|
453
|
+
this[n] && (this.$grid.setAttribute(s, "3"), e == null || e.setAttribute(p, "2"));
|
|
454
|
+
}) : i.forEach(({ gridAttr: n, attr: s }) => {
|
|
455
|
+
this.$grid.setAttribute(n, "1"), e == null || e.setAttribute(s, "1");
|
|
452
456
|
});
|
|
453
457
|
}
|
|
454
458
|
get $grid() {
|