@proximus/lavender-banner 1.4.12-beta.1 → 1.4.13-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 +16 -17
- 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
|
}
|
|
@@ -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() {
|