@proximus/lavender-banner 1.4.4-alpha.9 → 1.4.4-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 +25 -22
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "@proximus/lavender-container";
|
|
2
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"]){
|
|
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}::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))}}', 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
4
|
g.replaceSync(v);
|
|
5
5
|
const C = [
|
|
6
6
|
"1",
|
|
@@ -321,18 +321,21 @@ const l = class l extends f {
|
|
|
321
321
|
super(d), this.template = () => `<div class="banner">
|
|
322
322
|
<div class="contrast-helper"></div>
|
|
323
323
|
<px-container class="banner-container" padding--mobile="m" border-radius="main" >
|
|
324
|
-
<px-
|
|
325
|
-
<px-
|
|
326
|
-
<
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
324
|
+
<px-vstack>
|
|
325
|
+
<px-grid gap="none">
|
|
326
|
+
<px-container padding="none" background-color="none">
|
|
327
|
+
<div class="banner-content">
|
|
328
|
+
<slot name="tag"></slot>
|
|
329
|
+
<slot name="media"></slot>
|
|
330
|
+
<slot name="title"></slot>
|
|
331
|
+
<slot name="description"></slot>
|
|
332
|
+
<slot name="content"></slot>
|
|
333
|
+
|
|
334
|
+
</div>
|
|
335
|
+
</px-container>
|
|
336
|
+
</px-grid>
|
|
337
|
+
<slot name="action"></slot>
|
|
338
|
+
</px-vstack>
|
|
336
339
|
</px-container>
|
|
337
340
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
338
341
|
}
|
|
@@ -358,7 +361,7 @@ const l = class l extends f {
|
|
|
358
361
|
}
|
|
359
362
|
connectedCallback() {
|
|
360
363
|
var t;
|
|
361
|
-
(t = super.connectedCallback) == null || t.call(this), this.
|
|
364
|
+
(t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding();
|
|
362
365
|
}
|
|
363
366
|
attributeChangedCallback(t, i, e) {
|
|
364
367
|
if (i !== e)
|
|
@@ -430,29 +433,29 @@ const l = class l extends f {
|
|
|
430
433
|
}
|
|
431
434
|
createGridding(t) {
|
|
432
435
|
const i = [
|
|
433
|
-
{ prop: "hasGridding",
|
|
436
|
+
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
434
437
|
{
|
|
435
438
|
prop: "hasGriddingMobile",
|
|
436
|
-
|
|
439
|
+
gridProp: "gridColsMobile",
|
|
437
440
|
attr: "col-span--mobile"
|
|
438
441
|
},
|
|
439
442
|
{
|
|
440
443
|
prop: "hasGriddingTablet",
|
|
441
|
-
|
|
444
|
+
gridProp: "gridColsTablet",
|
|
442
445
|
attr: "col-span--tablet"
|
|
443
446
|
},
|
|
444
447
|
{
|
|
445
448
|
prop: "hasGriddingLaptop",
|
|
446
|
-
|
|
449
|
+
gridProp: "gridColsLaptop",
|
|
447
450
|
attr: "col-span--laptop"
|
|
448
451
|
}
|
|
449
452
|
], e = this.shadowRoot.querySelector(
|
|
450
453
|
"px-grid > px-container"
|
|
451
454
|
);
|
|
452
|
-
t !== null ? i.forEach(({ prop: n,
|
|
453
|
-
this[n] && (this.$grid
|
|
454
|
-
}) : i.forEach(({
|
|
455
|
-
this.$grid
|
|
455
|
+
t !== null ? i.forEach(({ prop: n, gridProp: s, attr: p }) => {
|
|
456
|
+
this[n] && (this.$grid[s] = "3", e.setAttribute(p, "2"));
|
|
457
|
+
}) : i.forEach(({ gridProp: n, attr: s }) => {
|
|
458
|
+
this.$grid[n] = "1", e.removeAttribute(s);
|
|
456
459
|
});
|
|
457
460
|
}
|
|
458
461
|
get $grid() {
|