@proximus/lavender-banner 1.4.7-beta.1 → 1.4.8-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:8em;height:100%}.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}::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 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))}}', 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 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}}", 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() {
|