@proximus/lavender-banner 1.4.9-beta.1 → 1.4.10-alpha.10
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 +18 -19
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -5,8 +5,8 @@ var k = (a, t, e) => t.has(a) || b("Cannot " + e);
|
|
|
5
5
|
var m = (a, t, e) => t.has(a) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(a) : t.set(a, e);
|
|
6
6
|
var l = (a, t, e) => (k(a, t, "access private method"), e);
|
|
7
7
|
import "@proximus/lavender-container";
|
|
8
|
-
import { cssTokenBreakpoints as A, gapValues as v, PxElement as C, log as h, VerticallyExtendedElement as x, backgroundSizeValues as $, gradientValues as I, backgroundColorValues as
|
|
9
|
-
const
|
|
8
|
+
import { cssTokenBreakpoints as A, gapValues as v, PxElement as C, log as h, VerticallyExtendedElement as x, backgroundSizeValues as $, gradientValues as I, backgroundColorValues as S } from "@proximus/lavender-common";
|
|
9
|
+
const T = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8rem;height:100%}.banner[reduced]{min-height:5rem}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}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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))}}', L = ":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 screen and (max-width: 47.938rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.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 screen and (min-width: 64.0625rem){.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}}", f = new CSSStyleSheet();
|
|
10
10
|
f.replaceSync(L);
|
|
11
11
|
const M = [
|
|
12
12
|
"1",
|
|
@@ -30,15 +30,15 @@ const M = [
|
|
|
30
30
|
"space-around",
|
|
31
31
|
"space-evenly",
|
|
32
32
|
"stretch"
|
|
33
|
-
], w = ["", "start", "end", "center", "stretch"],
|
|
33
|
+
], w = ["", "start", "end", "center", "stretch"], z = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .grid`, E = "px-spacing", P = A(
|
|
34
34
|
"gap",
|
|
35
|
-
|
|
35
|
+
z,
|
|
36
36
|
v,
|
|
37
|
-
|
|
37
|
+
E,
|
|
38
38
|
"--grid-gap"
|
|
39
39
|
), u = class u extends C {
|
|
40
40
|
constructor() {
|
|
41
|
-
super(f,
|
|
41
|
+
super(f, P), this.template = () => `<div class="grid">
|
|
42
42
|
<slot></slot>
|
|
43
43
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
44
44
|
}
|
|
@@ -125,7 +125,7 @@ const M = [
|
|
|
125
125
|
updateGap(t, e, n) {
|
|
126
126
|
if (!this.checkName(n, e)) {
|
|
127
127
|
h(
|
|
128
|
-
|
|
128
|
+
`"${e}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join('", "')}".`
|
|
129
129
|
);
|
|
130
130
|
return;
|
|
131
131
|
}
|
|
@@ -145,7 +145,7 @@ const M = [
|
|
|
145
145
|
}
|
|
146
146
|
updateAttribute(t, e, n, i) {
|
|
147
147
|
this.checkName(i, n) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, n) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`)) : h(
|
|
148
|
-
|
|
148
|
+
`"${n}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
149
149
|
);
|
|
150
150
|
}
|
|
151
151
|
get gap() {
|
|
@@ -321,7 +321,7 @@ u.nativeName = "div";
|
|
|
321
321
|
let c = u;
|
|
322
322
|
customElements.get("px-grid") || customElements.define("px-grid", c);
|
|
323
323
|
const y = new CSSStyleSheet();
|
|
324
|
-
y.replaceSync(
|
|
324
|
+
y.replaceSync(T);
|
|
325
325
|
var o, d;
|
|
326
326
|
const p = class p extends x {
|
|
327
327
|
constructor() {
|
|
@@ -339,7 +339,6 @@ const p = class p extends x {
|
|
|
339
339
|
<slot name="title"></slot>
|
|
340
340
|
<slot name="description"></slot>
|
|
341
341
|
<slot name="content"></slot>
|
|
342
|
-
|
|
343
342
|
</div>
|
|
344
343
|
</px-container>
|
|
345
344
|
</px-grid>
|
|
@@ -382,7 +381,7 @@ const p = class p extends x {
|
|
|
382
381
|
if (n !== i)
|
|
383
382
|
switch (e) {
|
|
384
383
|
case "background-color":
|
|
385
|
-
this.$container.backgroundColor =
|
|
384
|
+
this.$container.backgroundColor = S.indexOf(i) > 0 ? i : "none";
|
|
386
385
|
break;
|
|
387
386
|
case "background-gradient":
|
|
388
387
|
this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
|
|
@@ -451,29 +450,29 @@ const p = class p extends x {
|
|
|
451
450
|
}
|
|
452
451
|
createGridding(e) {
|
|
453
452
|
const n = [
|
|
454
|
-
{ prop: "hasGridding",
|
|
453
|
+
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
455
454
|
{
|
|
456
455
|
prop: "hasGriddingMobile",
|
|
457
|
-
|
|
456
|
+
gridAttr: "grid-cols--mobile",
|
|
458
457
|
attr: "col-span--mobile"
|
|
459
458
|
},
|
|
460
459
|
{
|
|
461
460
|
prop: "hasGriddingTablet",
|
|
462
|
-
|
|
461
|
+
gridAttr: "grid-cols--tablet",
|
|
463
462
|
attr: "col-span--tablet"
|
|
464
463
|
},
|
|
465
464
|
{
|
|
466
465
|
prop: "hasGriddingLaptop",
|
|
467
|
-
|
|
466
|
+
gridAttr: "grid-cols--laptop",
|
|
468
467
|
attr: "col-span--laptop"
|
|
469
468
|
}
|
|
470
469
|
], i = this.shadowRoot.querySelector(
|
|
471
470
|
"px-grid > px-container"
|
|
472
471
|
);
|
|
473
|
-
e !== null ? n.forEach(({ prop: s,
|
|
474
|
-
this[s] && (this.$grid
|
|
475
|
-
}) : n.forEach(({
|
|
476
|
-
this.$grid
|
|
472
|
+
e !== null ? n.forEach(({ prop: s, gridAttr: r, attr: j }) => {
|
|
473
|
+
this[s] && (this.$grid.setAttribute(r, "3"), i == null || i.setAttribute(j, "2"));
|
|
474
|
+
}) : n.forEach(({ gridAttr: s, attr: r }) => {
|
|
475
|
+
this.$grid.setAttribute(s, "1"), i == null || i.setAttribute(r, "1");
|
|
477
476
|
});
|
|
478
477
|
}
|
|
479
478
|
get $grid() {
|