@proximus/lavender-banner 1.4.7-alpha.9 → 1.4.7-beta.1
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 +17 -16
- 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 T } from "@proximus/lavender-common";
|
|
9
|
+
const S = ':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"], E = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .grid`, P = "px-spacing", z = A(
|
|
34
34
|
"gap",
|
|
35
|
-
z,
|
|
36
|
-
v,
|
|
37
35
|
E,
|
|
36
|
+
v,
|
|
37
|
+
P,
|
|
38
38
|
"--grid-gap"
|
|
39
39
|
), u = class u extends C {
|
|
40
40
|
constructor() {
|
|
41
|
-
super(f,
|
|
41
|
+
super(f, z), 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(S);
|
|
325
325
|
var o, d;
|
|
326
326
|
const p = class p extends x {
|
|
327
327
|
constructor() {
|
|
@@ -339,6 +339,7 @@ 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
|
+
|
|
342
343
|
</div>
|
|
343
344
|
</px-container>
|
|
344
345
|
</px-grid>
|
|
@@ -381,7 +382,7 @@ const p = class p extends x {
|
|
|
381
382
|
if (n !== i)
|
|
382
383
|
switch (e) {
|
|
383
384
|
case "background-color":
|
|
384
|
-
this.$container.backgroundColor =
|
|
385
|
+
this.$container.backgroundColor = T.indexOf(i) > 0 ? i : "none";
|
|
385
386
|
break;
|
|
386
387
|
case "background-gradient":
|
|
387
388
|
this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
|
|
@@ -450,29 +451,29 @@ const p = class p extends x {
|
|
|
450
451
|
}
|
|
451
452
|
createGridding(e) {
|
|
452
453
|
const n = [
|
|
453
|
-
{ prop: "hasGridding",
|
|
454
|
+
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
454
455
|
{
|
|
455
456
|
prop: "hasGriddingMobile",
|
|
456
|
-
|
|
457
|
+
gridProp: "gridColsMobile",
|
|
457
458
|
attr: "col-span--mobile"
|
|
458
459
|
},
|
|
459
460
|
{
|
|
460
461
|
prop: "hasGriddingTablet",
|
|
461
|
-
|
|
462
|
+
gridProp: "gridColsTablet",
|
|
462
463
|
attr: "col-span--tablet"
|
|
463
464
|
},
|
|
464
465
|
{
|
|
465
466
|
prop: "hasGriddingLaptop",
|
|
466
|
-
|
|
467
|
+
gridProp: "gridColsLaptop",
|
|
467
468
|
attr: "col-span--laptop"
|
|
468
469
|
}
|
|
469
470
|
], i = this.shadowRoot.querySelector(
|
|
470
471
|
"px-grid > px-container"
|
|
471
472
|
);
|
|
472
|
-
e !== null ? n.forEach(({ prop: s,
|
|
473
|
-
this[s] && (this.$grid
|
|
474
|
-
}) : n.forEach(({
|
|
475
|
-
this.$grid
|
|
473
|
+
e !== null ? n.forEach(({ prop: s, gridProp: r, attr: j }) => {
|
|
474
|
+
this[s] && (this.$grid[r] = "3", i.setAttribute(j, "2"));
|
|
475
|
+
}) : n.forEach(({ gridProp: s, attr: r }) => {
|
|
476
|
+
this.$grid[s] = "1", i.removeAttribute(r);
|
|
476
477
|
});
|
|
477
478
|
}
|
|
478
479
|
get $grid() {
|