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