@proximus/lavender-banner 2.0.0-alpha.9 → 2.0.0-alpha.90
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/Banner.d.ts +5 -2
- package/dist/index.es.js +156 -138
- package/package.json +2 -2
package/dist/Banner.d.ts
CHANGED
|
@@ -2,14 +2,17 @@ import type { Container } from '@proximus/lavender-container';
|
|
|
2
2
|
import '@proximus/lavender-container';
|
|
3
3
|
import type { Grid } from '@proximus/lavender-grid';
|
|
4
4
|
import '@proximus/lavender-grid';
|
|
5
|
-
import {
|
|
6
|
-
export declare class Banner extends
|
|
5
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
6
|
+
export declare class Banner extends VerticallyExtendedElement<HTMLDivElement> {
|
|
7
|
+
#private;
|
|
7
8
|
static nativeName: string;
|
|
9
|
+
observer: MutationObserver;
|
|
8
10
|
private template;
|
|
9
11
|
constructor();
|
|
10
12
|
static get observedAttributes(): string[];
|
|
11
13
|
connectedCallback(): void;
|
|
12
14
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
15
|
+
disconnectedCallback(): void;
|
|
13
16
|
createGridTemplateAreas(): void;
|
|
14
17
|
createGridding(value?: string): void;
|
|
15
18
|
get $grid(): Grid;
|
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
var b = (a) => {
|
|
2
|
+
throw TypeError(a);
|
|
3
|
+
};
|
|
4
|
+
var k = (a, t, e) => t.has(a) || b("Cannot " + e);
|
|
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
|
+
var l = (a, t, e) => (k(a, t, "access private method"), e);
|
|
1
7
|
import "@proximus/lavender-container";
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
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 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
|
+
f.replaceSync(L);
|
|
11
|
+
const M = [
|
|
6
12
|
"1",
|
|
7
13
|
"2",
|
|
8
14
|
"3",
|
|
@@ -15,7 +21,7 @@ const v = [
|
|
|
15
21
|
"10",
|
|
16
22
|
"11",
|
|
17
23
|
"12"
|
|
18
|
-
],
|
|
24
|
+
], G = [
|
|
19
25
|
"",
|
|
20
26
|
"start",
|
|
21
27
|
"end",
|
|
@@ -24,25 +30,17 @@ const v = [
|
|
|
24
30
|
"space-around",
|
|
25
31
|
"space-evenly",
|
|
26
32
|
"stretch"
|
|
27
|
-
],
|
|
33
|
+
], w = ["", "start", "end", "center", "stretch"], z = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .grid`, E = "px-spacing", P = A(
|
|
34
|
+
"gap",
|
|
35
|
+
z,
|
|
36
|
+
v,
|
|
37
|
+
E,
|
|
38
|
+
"--grid-gap"
|
|
39
|
+
), u = class u extends C {
|
|
28
40
|
constructor() {
|
|
29
|
-
super(
|
|
30
|
-
g,
|
|
31
|
-
b(
|
|
32
|
-
"gap",
|
|
33
|
-
$,
|
|
34
|
-
m,
|
|
35
|
-
I,
|
|
36
|
-
"--grid-gap"
|
|
37
|
-
)
|
|
38
|
-
), this.template = () => `<div class="grid">
|
|
41
|
+
super(f, P), this.template = () => `<div class="grid">
|
|
39
42
|
<slot></slot>
|
|
40
|
-
</div>`, this.
|
|
41
|
-
this,
|
|
42
|
-
"gap",
|
|
43
|
-
(t) => t,
|
|
44
|
-
"--gap"
|
|
45
|
-
), this.shadowRoot.innerHTML = this.template();
|
|
43
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
46
44
|
}
|
|
47
45
|
static get observedAttributes() {
|
|
48
46
|
return [
|
|
@@ -74,16 +72,16 @@ const v = [
|
|
|
74
72
|
];
|
|
75
73
|
}
|
|
76
74
|
connectedCallback() {
|
|
77
|
-
|
|
75
|
+
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
78
76
|
}
|
|
79
|
-
attributeChangedCallback(t,
|
|
80
|
-
if (
|
|
77
|
+
attributeChangedCallback(t, e, n) {
|
|
78
|
+
if (e !== n)
|
|
81
79
|
switch (t) {
|
|
82
80
|
case "grid-cols":
|
|
83
81
|
case "grid-cols--mobile":
|
|
84
82
|
case "grid-cols--tablet":
|
|
85
83
|
case "grid-cols--laptop":
|
|
86
|
-
this.updateAttribute(t,
|
|
84
|
+
this.updateAttribute(t, e, n, M);
|
|
87
85
|
break;
|
|
88
86
|
case "justify-content":
|
|
89
87
|
case "align-content":
|
|
@@ -97,9 +95,9 @@ const v = [
|
|
|
97
95
|
case "align-content--desktop":
|
|
98
96
|
this.updateAttribute(
|
|
99
97
|
t,
|
|
100
|
-
i,
|
|
101
98
|
e,
|
|
102
|
-
|
|
99
|
+
n,
|
|
100
|
+
G
|
|
103
101
|
);
|
|
104
102
|
break;
|
|
105
103
|
case "justify-items":
|
|
@@ -114,22 +112,24 @@ const v = [
|
|
|
114
112
|
case "align-items--desktop":
|
|
115
113
|
this.updateAttribute(
|
|
116
114
|
t,
|
|
117
|
-
i,
|
|
118
115
|
e,
|
|
119
|
-
|
|
116
|
+
n,
|
|
117
|
+
w
|
|
120
118
|
);
|
|
121
119
|
break;
|
|
122
120
|
default:
|
|
123
|
-
super.attributeChangedCallback(t,
|
|
121
|
+
super.attributeChangedCallback(t, e, n);
|
|
124
122
|
break;
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
|
-
updateGap(t,
|
|
128
|
-
if (!this.checkName(
|
|
129
|
-
|
|
125
|
+
updateGap(t, e, n) {
|
|
126
|
+
if (!this.checkName(n, e)) {
|
|
127
|
+
h(
|
|
128
|
+
`${e} is not an allowed gap value for ${this.tagName.toLowerCase()}`
|
|
129
|
+
);
|
|
130
130
|
return;
|
|
131
131
|
}
|
|
132
|
-
const
|
|
132
|
+
const i = (s) => {
|
|
133
133
|
s !== null && s !== "" && s !== "default" && (this.$el.style.setProperty(
|
|
134
134
|
"--grid-gap--mobile",
|
|
135
135
|
`var(--px-spacing-${s}-mobile)`
|
|
@@ -141,10 +141,12 @@ const v = [
|
|
|
141
141
|
`var(--px-spacing-${s}-laptop)`
|
|
142
142
|
));
|
|
143
143
|
};
|
|
144
|
-
|
|
144
|
+
i(t), i(e);
|
|
145
145
|
}
|
|
146
|
-
updateAttribute(t,
|
|
147
|
-
this.checkName(
|
|
146
|
+
updateAttribute(t, e, n, i) {
|
|
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
|
+
`${n} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
149
|
+
);
|
|
148
150
|
}
|
|
149
151
|
get gap() {
|
|
150
152
|
return this.getAttribute("gap");
|
|
@@ -315,33 +317,39 @@ const v = [
|
|
|
315
317
|
this.setAttribute("align-items--desktop", t);
|
|
316
318
|
}
|
|
317
319
|
};
|
|
318
|
-
|
|
319
|
-
let
|
|
320
|
-
customElements.get("px-grid") || customElements.define("px-grid",
|
|
321
|
-
const
|
|
322
|
-
|
|
323
|
-
|
|
320
|
+
u.nativeName = "div";
|
|
321
|
+
let c = u;
|
|
322
|
+
customElements.get("px-grid") || customElements.define("px-grid", c);
|
|
323
|
+
const y = new CSSStyleSheet();
|
|
324
|
+
y.replaceSync(T);
|
|
325
|
+
var o, d;
|
|
326
|
+
const p = class p extends x {
|
|
324
327
|
constructor() {
|
|
325
|
-
super(
|
|
328
|
+
super(y);
|
|
329
|
+
m(this, o);
|
|
330
|
+
this.template = () => `<div class="banner">
|
|
326
331
|
<div class="contrast-helper"></div>
|
|
327
|
-
<px-container class="banner-container" padding
|
|
328
|
-
<px-
|
|
329
|
-
<px-
|
|
330
|
-
<
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
332
|
+
<px-container class="banner-container" padding--mobile="m" border-radius="main" >
|
|
333
|
+
<px-vstack>
|
|
334
|
+
<px-grid gap="none">
|
|
335
|
+
<px-container padding="none" background-color="none">
|
|
336
|
+
<div class="banner-content">
|
|
337
|
+
<slot name="tag"></slot>
|
|
338
|
+
<slot name="media"></slot>
|
|
339
|
+
<slot name="title"></slot>
|
|
340
|
+
<slot name="description"></slot>
|
|
341
|
+
<slot name="content"></slot>
|
|
342
|
+
</div>
|
|
343
|
+
</px-container>
|
|
344
|
+
</px-grid>
|
|
345
|
+
<slot name="action"></slot>
|
|
346
|
+
</px-vstack>
|
|
340
347
|
</px-container>
|
|
341
348
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
342
349
|
}
|
|
343
350
|
static get observedAttributes() {
|
|
344
351
|
return [
|
|
352
|
+
...super.observedAttributes,
|
|
345
353
|
"background-color",
|
|
346
354
|
"background-gradient",
|
|
347
355
|
"background-image",
|
|
@@ -361,102 +369,110 @@ const l = class l extends c {
|
|
|
361
369
|
];
|
|
362
370
|
}
|
|
363
371
|
connectedCallback() {
|
|
364
|
-
var
|
|
365
|
-
(
|
|
372
|
+
var e;
|
|
373
|
+
(e = super.connectedCallback) == null || e.call(this), l(this, o, d).call(this), this.createGridTemplateAreas(), this.createGridding(), this.observer = new MutationObserver(() => {
|
|
374
|
+
this.createGridTemplateAreas(), this.createGridding();
|
|
375
|
+
}), this.observer.observe(this, {
|
|
376
|
+
childList: !0,
|
|
377
|
+
subtree: !0
|
|
378
|
+
});
|
|
366
379
|
}
|
|
367
|
-
attributeChangedCallback(
|
|
368
|
-
if (
|
|
369
|
-
switch (
|
|
380
|
+
attributeChangedCallback(e, n, i) {
|
|
381
|
+
if (n !== i)
|
|
382
|
+
switch (e) {
|
|
370
383
|
case "background-color":
|
|
371
|
-
this.$container.backgroundColor =
|
|
384
|
+
this.$container.backgroundColor = S.indexOf(i) > 0 ? i : "none";
|
|
372
385
|
break;
|
|
373
386
|
case "background-gradient":
|
|
374
|
-
this.$container.gradient =
|
|
387
|
+
this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
|
|
375
388
|
break;
|
|
376
389
|
case "background-image":
|
|
377
|
-
this.$container.backgroundImage =
|
|
390
|
+
this.$container.backgroundImage = i;
|
|
378
391
|
break;
|
|
379
392
|
case "background-image--mobile":
|
|
380
|
-
this.$container.backgroundImageMobile =
|
|
393
|
+
this.$container.backgroundImageMobile = i;
|
|
381
394
|
break;
|
|
382
395
|
case "background-image--tablet":
|
|
383
|
-
this.$container.backgroundImageTablet =
|
|
396
|
+
this.$container.backgroundImageTablet = i;
|
|
384
397
|
break;
|
|
385
398
|
case "background-image--laptop":
|
|
386
|
-
this.$container.backgroundImageLaptop =
|
|
399
|
+
this.$container.backgroundImageLaptop = i;
|
|
387
400
|
break;
|
|
388
401
|
case "background-size":
|
|
389
|
-
this.$container.backgroundSize =
|
|
402
|
+
this.$container.backgroundSize = $.indexOf(i) > 0 ? i : "";
|
|
390
403
|
break;
|
|
391
404
|
case "background-position":
|
|
392
|
-
this.$container.backgroundPosition =
|
|
405
|
+
this.$container.backgroundPosition = i;
|
|
393
406
|
break;
|
|
394
407
|
case "reduced":
|
|
395
|
-
this.$el.toggleAttribute("reduced",
|
|
408
|
+
this.$el.toggleAttribute("reduced", i !== null), this.isConnected && l(this, o, d).call(this), this.createGridTemplateAreas();
|
|
396
409
|
break;
|
|
397
410
|
case "has-gridding":
|
|
398
411
|
case "has-gridding--mobile":
|
|
399
412
|
case "has-gridding--tablet":
|
|
400
413
|
case "has-gridding--laptop":
|
|
401
|
-
this.createGridding(
|
|
414
|
+
this.createGridding(i);
|
|
402
415
|
break;
|
|
403
416
|
case "inverted":
|
|
404
|
-
for (let
|
|
405
|
-
this.$children[
|
|
406
|
-
this.$el.toggleAttribute("inverted",
|
|
417
|
+
for (let s = 0; s < this.$children.length; s++)
|
|
418
|
+
this.$children[s].hasAttribute("inverted") || this.$children[s].toggleAttribute("inverted");
|
|
419
|
+
this.$el.toggleAttribute("inverted", i !== null);
|
|
407
420
|
break;
|
|
408
421
|
default:
|
|
409
|
-
super.attributeChangedCallback(
|
|
422
|
+
super.attributeChangedCallback(e, n, i);
|
|
410
423
|
break;
|
|
411
424
|
}
|
|
412
425
|
}
|
|
426
|
+
disconnectedCallback() {
|
|
427
|
+
this.observer.disconnect();
|
|
428
|
+
}
|
|
413
429
|
createGridTemplateAreas() {
|
|
414
|
-
const
|
|
430
|
+
const e = this.shadowRoot.querySelector(
|
|
415
431
|
".banner-content"
|
|
416
|
-
),
|
|
417
|
-
let
|
|
418
|
-
this.reduced ?
|
|
419
|
-
const
|
|
420
|
-
`slot[name="${
|
|
432
|
+
), n = ["tag", "media", "title", "description", "content", "action"];
|
|
433
|
+
let i = "";
|
|
434
|
+
this.reduced ? n.forEach((s) => {
|
|
435
|
+
const r = this.shadowRoot.querySelector(
|
|
436
|
+
`slot[name="${s}"]`
|
|
421
437
|
);
|
|
422
|
-
if (
|
|
423
|
-
if (
|
|
424
|
-
|
|
438
|
+
if (r && r.assignedElements().length > 0) {
|
|
439
|
+
if (s === "media") return;
|
|
440
|
+
i += `'media ${s}'
|
|
425
441
|
`;
|
|
426
442
|
}
|
|
427
|
-
}) :
|
|
428
|
-
const
|
|
429
|
-
`slot[name="${
|
|
443
|
+
}) : n.forEach((s) => {
|
|
444
|
+
const r = this.shadowRoot.querySelector(
|
|
445
|
+
`slot[name="${s}"]`
|
|
430
446
|
);
|
|
431
|
-
|
|
447
|
+
r && r.assignedElements().length > 0 && (i += `'${s}'
|
|
432
448
|
`);
|
|
433
|
-
}),
|
|
449
|
+
}), i || (i = "'content'"), e.style.gridTemplateAreas = i;
|
|
434
450
|
}
|
|
435
|
-
createGridding(
|
|
436
|
-
const
|
|
437
|
-
{ prop: "hasGridding",
|
|
451
|
+
createGridding(e) {
|
|
452
|
+
const n = [
|
|
453
|
+
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
438
454
|
{
|
|
439
455
|
prop: "hasGriddingMobile",
|
|
440
|
-
|
|
456
|
+
gridAttr: "grid-cols--mobile",
|
|
441
457
|
attr: "col-span--mobile"
|
|
442
458
|
},
|
|
443
459
|
{
|
|
444
460
|
prop: "hasGriddingTablet",
|
|
445
|
-
|
|
461
|
+
gridAttr: "grid-cols--tablet",
|
|
446
462
|
attr: "col-span--tablet"
|
|
447
463
|
},
|
|
448
464
|
{
|
|
449
465
|
prop: "hasGriddingLaptop",
|
|
450
|
-
|
|
466
|
+
gridAttr: "grid-cols--laptop",
|
|
451
467
|
attr: "col-span--laptop"
|
|
452
468
|
}
|
|
453
|
-
],
|
|
469
|
+
], i = this.shadowRoot.querySelector(
|
|
454
470
|
"px-grid > px-container"
|
|
455
471
|
);
|
|
456
|
-
|
|
457
|
-
this[
|
|
458
|
-
}) :
|
|
459
|
-
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");
|
|
460
476
|
});
|
|
461
477
|
}
|
|
462
478
|
get $grid() {
|
|
@@ -471,103 +487,105 @@ const l = class l extends c {
|
|
|
471
487
|
get backgroundColor() {
|
|
472
488
|
return this.getAttribute("background-color");
|
|
473
489
|
}
|
|
474
|
-
set backgroundColor(
|
|
475
|
-
this.setAttribute("background-color",
|
|
490
|
+
set backgroundColor(e) {
|
|
491
|
+
this.setAttribute("background-color", e);
|
|
476
492
|
}
|
|
477
493
|
get gradient() {
|
|
478
494
|
return this.getAttribute("background-gradient");
|
|
479
495
|
}
|
|
480
|
-
set gradient(
|
|
481
|
-
this.setAttribute("background-gradient",
|
|
496
|
+
set gradient(e) {
|
|
497
|
+
this.setAttribute("background-gradient", e);
|
|
482
498
|
}
|
|
483
499
|
get backgroundImage() {
|
|
484
500
|
return this.getAttribute("background-image");
|
|
485
501
|
}
|
|
486
|
-
set backgroundImage(
|
|
487
|
-
this.setAttribute("background-image",
|
|
502
|
+
set backgroundImage(e) {
|
|
503
|
+
this.setAttribute("background-image", e);
|
|
488
504
|
}
|
|
489
505
|
get backgroundImageMobile() {
|
|
490
506
|
return this.getAttribute("background-image--mobile");
|
|
491
507
|
}
|
|
492
|
-
set backgroundImageMobile(
|
|
493
|
-
this.setAttribute("background-image--mobile",
|
|
508
|
+
set backgroundImageMobile(e) {
|
|
509
|
+
this.setAttribute("background-image--mobile", e);
|
|
494
510
|
}
|
|
495
511
|
get backgroundImageTablet() {
|
|
496
512
|
return this.getAttribute("background-image--tablet");
|
|
497
513
|
}
|
|
498
|
-
set backgroundImageTablet(
|
|
499
|
-
this.setAttribute("background-image--tablet",
|
|
514
|
+
set backgroundImageTablet(e) {
|
|
515
|
+
this.setAttribute("background-image--tablet", e);
|
|
500
516
|
}
|
|
501
517
|
get backgroundImageLaptop() {
|
|
502
518
|
return this.getAttribute("background-image--laptop");
|
|
503
519
|
}
|
|
504
|
-
set backgroundImageLaptop(
|
|
505
|
-
this.setAttribute("background-image--laptop",
|
|
520
|
+
set backgroundImageLaptop(e) {
|
|
521
|
+
this.setAttribute("background-image--laptop", e);
|
|
506
522
|
}
|
|
507
523
|
get backgroundSize() {
|
|
508
524
|
return this.getAttribute("background-size");
|
|
509
525
|
}
|
|
510
|
-
set backgroundSize(
|
|
511
|
-
this.setAttribute("background-size",
|
|
526
|
+
set backgroundSize(e) {
|
|
527
|
+
this.setAttribute("background-size", e);
|
|
512
528
|
}
|
|
513
529
|
get backgroundPosition() {
|
|
514
530
|
return this.getAttribute("background-position");
|
|
515
531
|
}
|
|
516
|
-
set backgroundPosition(
|
|
517
|
-
this.setAttribute("background-position",
|
|
532
|
+
set backgroundPosition(e) {
|
|
533
|
+
this.setAttribute("background-position", e);
|
|
518
534
|
}
|
|
519
535
|
get gradientContrastHelper() {
|
|
520
536
|
return this.hasAttribute("contrast-helper-gradient");
|
|
521
537
|
}
|
|
522
|
-
set gradientContrastHelper(
|
|
523
|
-
|
|
538
|
+
set gradientContrastHelper(e) {
|
|
539
|
+
e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
|
|
524
540
|
}
|
|
525
541
|
get overlayContrastHelper() {
|
|
526
542
|
return this.hasAttribute("contrast-helper-overlay");
|
|
527
543
|
}
|
|
528
|
-
set overlayContrastHelper(
|
|
529
|
-
|
|
544
|
+
set overlayContrastHelper(e) {
|
|
545
|
+
e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
|
|
530
546
|
}
|
|
531
547
|
get inverted() {
|
|
532
548
|
return this.hasAttribute("inverted");
|
|
533
549
|
}
|
|
534
|
-
set inverted(
|
|
535
|
-
|
|
550
|
+
set inverted(e) {
|
|
551
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
536
552
|
}
|
|
537
553
|
get reduced() {
|
|
538
554
|
return this.hasAttribute("reduced");
|
|
539
555
|
}
|
|
540
|
-
set reduced(
|
|
541
|
-
|
|
556
|
+
set reduced(e) {
|
|
557
|
+
e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
|
|
542
558
|
}
|
|
543
559
|
get hasGridding() {
|
|
544
560
|
return this.hasAttribute("has-gridding");
|
|
545
561
|
}
|
|
546
|
-
set hasGridding(
|
|
547
|
-
|
|
562
|
+
set hasGridding(e) {
|
|
563
|
+
e ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
|
|
548
564
|
}
|
|
549
565
|
get hasGriddingMobile() {
|
|
550
566
|
return this.hasAttribute("has-gridding--mobile");
|
|
551
567
|
}
|
|
552
|
-
set hasGriddingMobile(
|
|
553
|
-
|
|
568
|
+
set hasGriddingMobile(e) {
|
|
569
|
+
e ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
|
|
554
570
|
}
|
|
555
571
|
get hasGriddingTablet() {
|
|
556
572
|
return this.hasAttribute("has-gridding--tablet");
|
|
557
573
|
}
|
|
558
|
-
set hasGriddingTablet(
|
|
559
|
-
|
|
574
|
+
set hasGriddingTablet(e) {
|
|
575
|
+
e ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
|
|
560
576
|
}
|
|
561
577
|
get hasGriddingLaptop() {
|
|
562
578
|
return this.hasAttribute("has-gridding--laptop");
|
|
563
579
|
}
|
|
564
|
-
set hasGriddingLaptop(
|
|
565
|
-
|
|
580
|
+
set hasGriddingLaptop(e) {
|
|
581
|
+
e ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
|
|
566
582
|
}
|
|
567
583
|
};
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
584
|
+
o = new WeakSet(), d = function() {
|
|
585
|
+
this.$container.setAttribute("padding", this.reduced ? "m" : "l");
|
|
586
|
+
}, p.nativeName = "div";
|
|
587
|
+
let g = p;
|
|
588
|
+
customElements.get("px-banner") || customElements.define("px-banner", g);
|
|
571
589
|
export {
|
|
572
|
-
|
|
590
|
+
g as Banner
|
|
573
591
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-banner",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.90",
|
|
4
4
|
"description": "",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"clean": "rm -rf dist",
|
|
12
12
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
13
13
|
"test": "vitest run --coverage",
|
|
14
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
14
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
15
15
|
},
|
|
16
16
|
"publishConfig": {
|
|
17
17
|
"access": "public"
|