@proximus/lavender-banner 2.0.0-alpha.63 → 2.0.0-alpha.64
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 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 x = [
|
|
|
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 x = [
|
|
|
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(
|
|
28
34
|
"gap",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
35
|
+
z,
|
|
36
|
+
v,
|
|
37
|
+
E,
|
|
32
38
|
"--grid-gap"
|
|
33
|
-
),
|
|
39
|
+
), u = class u extends C {
|
|
34
40
|
constructor() {
|
|
35
|
-
super(
|
|
41
|
+
super(f, P), this.template = () => `<div class="grid">
|
|
36
42
|
<slot></slot>
|
|
37
43
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
38
44
|
}
|
|
@@ -68,14 +74,14 @@ const x = [
|
|
|
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 x = [
|
|
|
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 x = [
|
|
|
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 x = [
|
|
|
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 x = [
|
|
|
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(T);
|
|
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>
|
|
@@ -360,57 +369,57 @@ const l = class l extends f {
|
|
|
360
369
|
];
|
|
361
370
|
}
|
|
362
371
|
connectedCallback() {
|
|
363
|
-
var
|
|
364
|
-
(
|
|
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(() => {
|
|
365
374
|
this.createGridTemplateAreas(), this.createGridding();
|
|
366
375
|
}), this.observer.observe(this, {
|
|
367
376
|
childList: !0,
|
|
368
377
|
subtree: !0
|
|
369
378
|
});
|
|
370
379
|
}
|
|
371
|
-
attributeChangedCallback(
|
|
372
|
-
if (
|
|
373
|
-
switch (
|
|
380
|
+
attributeChangedCallback(e, n, i) {
|
|
381
|
+
if (n !== i)
|
|
382
|
+
switch (e) {
|
|
374
383
|
case "background-color":
|
|
375
|
-
this.$container.backgroundColor =
|
|
384
|
+
this.$container.backgroundColor = S.indexOf(i) > 0 ? i : "none";
|
|
376
385
|
break;
|
|
377
386
|
case "background-gradient":
|
|
378
|
-
this.$container.gradient =
|
|
387
|
+
this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
|
|
379
388
|
break;
|
|
380
389
|
case "background-image":
|
|
381
|
-
this.$container.backgroundImage =
|
|
390
|
+
this.$container.backgroundImage = i;
|
|
382
391
|
break;
|
|
383
392
|
case "background-image--mobile":
|
|
384
|
-
this.$container.backgroundImageMobile =
|
|
393
|
+
this.$container.backgroundImageMobile = i;
|
|
385
394
|
break;
|
|
386
395
|
case "background-image--tablet":
|
|
387
|
-
this.$container.backgroundImageTablet =
|
|
396
|
+
this.$container.backgroundImageTablet = i;
|
|
388
397
|
break;
|
|
389
398
|
case "background-image--laptop":
|
|
390
|
-
this.$container.backgroundImageLaptop =
|
|
399
|
+
this.$container.backgroundImageLaptop = i;
|
|
391
400
|
break;
|
|
392
401
|
case "background-size":
|
|
393
|
-
this.$container.backgroundSize =
|
|
402
|
+
this.$container.backgroundSize = $.indexOf(i) > 0 ? i : "";
|
|
394
403
|
break;
|
|
395
404
|
case "background-position":
|
|
396
|
-
this.$container.backgroundPosition =
|
|
405
|
+
this.$container.backgroundPosition = i;
|
|
397
406
|
break;
|
|
398
407
|
case "reduced":
|
|
399
|
-
this.$el.toggleAttribute("reduced",
|
|
408
|
+
this.$el.toggleAttribute("reduced", i !== null), this.isConnected && l(this, o, d).call(this), this.createGridTemplateAreas();
|
|
400
409
|
break;
|
|
401
410
|
case "has-gridding":
|
|
402
411
|
case "has-gridding--mobile":
|
|
403
412
|
case "has-gridding--tablet":
|
|
404
413
|
case "has-gridding--laptop":
|
|
405
|
-
this.createGridding(
|
|
414
|
+
this.createGridding(i);
|
|
406
415
|
break;
|
|
407
416
|
case "inverted":
|
|
408
|
-
for (let
|
|
409
|
-
this.$children[
|
|
410
|
-
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);
|
|
411
420
|
break;
|
|
412
421
|
default:
|
|
413
|
-
super.attributeChangedCallback(
|
|
422
|
+
super.attributeChangedCallback(e, n, i);
|
|
414
423
|
break;
|
|
415
424
|
}
|
|
416
425
|
}
|
|
@@ -418,29 +427,29 @@ const l = class l extends f {
|
|
|
418
427
|
this.observer.disconnect();
|
|
419
428
|
}
|
|
420
429
|
createGridTemplateAreas() {
|
|
421
|
-
const
|
|
430
|
+
const e = this.shadowRoot.querySelector(
|
|
422
431
|
".banner-content"
|
|
423
|
-
),
|
|
424
|
-
let
|
|
425
|
-
this.reduced ?
|
|
426
|
-
const
|
|
427
|
-
`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}"]`
|
|
428
437
|
);
|
|
429
|
-
if (
|
|
430
|
-
if (
|
|
431
|
-
|
|
438
|
+
if (r && r.assignedElements().length > 0) {
|
|
439
|
+
if (s === "media") return;
|
|
440
|
+
i += `'media ${s}'
|
|
432
441
|
`;
|
|
433
442
|
}
|
|
434
|
-
}) :
|
|
435
|
-
const
|
|
436
|
-
`slot[name="${
|
|
443
|
+
}) : n.forEach((s) => {
|
|
444
|
+
const r = this.shadowRoot.querySelector(
|
|
445
|
+
`slot[name="${s}"]`
|
|
437
446
|
);
|
|
438
|
-
|
|
447
|
+
r && r.assignedElements().length > 0 && (i += `'${s}'
|
|
439
448
|
`);
|
|
440
|
-
}),
|
|
449
|
+
}), i || (i = "'content'"), e.style.gridTemplateAreas = i;
|
|
441
450
|
}
|
|
442
|
-
createGridding(
|
|
443
|
-
const
|
|
451
|
+
createGridding(e) {
|
|
452
|
+
const n = [
|
|
444
453
|
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
445
454
|
{
|
|
446
455
|
prop: "hasGriddingMobile",
|
|
@@ -457,13 +466,13 @@ const l = class l extends f {
|
|
|
457
466
|
gridAttr: "grid-cols--laptop",
|
|
458
467
|
attr: "col-span--laptop"
|
|
459
468
|
}
|
|
460
|
-
],
|
|
469
|
+
], i = this.shadowRoot.querySelector(
|
|
461
470
|
"px-grid > px-container"
|
|
462
471
|
);
|
|
463
|
-
|
|
464
|
-
this[
|
|
465
|
-
}) :
|
|
466
|
-
this.$grid.setAttribute(
|
|
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");
|
|
467
476
|
});
|
|
468
477
|
}
|
|
469
478
|
get $grid() {
|
|
@@ -478,103 +487,105 @@ const l = class l extends f {
|
|
|
478
487
|
get backgroundColor() {
|
|
479
488
|
return this.getAttribute("background-color");
|
|
480
489
|
}
|
|
481
|
-
set backgroundColor(
|
|
482
|
-
this.setAttribute("background-color",
|
|
490
|
+
set backgroundColor(e) {
|
|
491
|
+
this.setAttribute("background-color", e);
|
|
483
492
|
}
|
|
484
493
|
get gradient() {
|
|
485
494
|
return this.getAttribute("background-gradient");
|
|
486
495
|
}
|
|
487
|
-
set gradient(
|
|
488
|
-
this.setAttribute("background-gradient",
|
|
496
|
+
set gradient(e) {
|
|
497
|
+
this.setAttribute("background-gradient", e);
|
|
489
498
|
}
|
|
490
499
|
get backgroundImage() {
|
|
491
500
|
return this.getAttribute("background-image");
|
|
492
501
|
}
|
|
493
|
-
set backgroundImage(
|
|
494
|
-
this.setAttribute("background-image",
|
|
502
|
+
set backgroundImage(e) {
|
|
503
|
+
this.setAttribute("background-image", e);
|
|
495
504
|
}
|
|
496
505
|
get backgroundImageMobile() {
|
|
497
506
|
return this.getAttribute("background-image--mobile");
|
|
498
507
|
}
|
|
499
|
-
set backgroundImageMobile(
|
|
500
|
-
this.setAttribute("background-image--mobile",
|
|
508
|
+
set backgroundImageMobile(e) {
|
|
509
|
+
this.setAttribute("background-image--mobile", e);
|
|
501
510
|
}
|
|
502
511
|
get backgroundImageTablet() {
|
|
503
512
|
return this.getAttribute("background-image--tablet");
|
|
504
513
|
}
|
|
505
|
-
set backgroundImageTablet(
|
|
506
|
-
this.setAttribute("background-image--tablet",
|
|
514
|
+
set backgroundImageTablet(e) {
|
|
515
|
+
this.setAttribute("background-image--tablet", e);
|
|
507
516
|
}
|
|
508
517
|
get backgroundImageLaptop() {
|
|
509
518
|
return this.getAttribute("background-image--laptop");
|
|
510
519
|
}
|
|
511
|
-
set backgroundImageLaptop(
|
|
512
|
-
this.setAttribute("background-image--laptop",
|
|
520
|
+
set backgroundImageLaptop(e) {
|
|
521
|
+
this.setAttribute("background-image--laptop", e);
|
|
513
522
|
}
|
|
514
523
|
get backgroundSize() {
|
|
515
524
|
return this.getAttribute("background-size");
|
|
516
525
|
}
|
|
517
|
-
set backgroundSize(
|
|
518
|
-
this.setAttribute("background-size",
|
|
526
|
+
set backgroundSize(e) {
|
|
527
|
+
this.setAttribute("background-size", e);
|
|
519
528
|
}
|
|
520
529
|
get backgroundPosition() {
|
|
521
530
|
return this.getAttribute("background-position");
|
|
522
531
|
}
|
|
523
|
-
set backgroundPosition(
|
|
524
|
-
this.setAttribute("background-position",
|
|
532
|
+
set backgroundPosition(e) {
|
|
533
|
+
this.setAttribute("background-position", e);
|
|
525
534
|
}
|
|
526
535
|
get gradientContrastHelper() {
|
|
527
536
|
return this.hasAttribute("contrast-helper-gradient");
|
|
528
537
|
}
|
|
529
|
-
set gradientContrastHelper(
|
|
530
|
-
|
|
538
|
+
set gradientContrastHelper(e) {
|
|
539
|
+
e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
|
|
531
540
|
}
|
|
532
541
|
get overlayContrastHelper() {
|
|
533
542
|
return this.hasAttribute("contrast-helper-overlay");
|
|
534
543
|
}
|
|
535
|
-
set overlayContrastHelper(
|
|
536
|
-
|
|
544
|
+
set overlayContrastHelper(e) {
|
|
545
|
+
e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
|
|
537
546
|
}
|
|
538
547
|
get inverted() {
|
|
539
548
|
return this.hasAttribute("inverted");
|
|
540
549
|
}
|
|
541
|
-
set inverted(
|
|
542
|
-
|
|
550
|
+
set inverted(e) {
|
|
551
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
543
552
|
}
|
|
544
553
|
get reduced() {
|
|
545
554
|
return this.hasAttribute("reduced");
|
|
546
555
|
}
|
|
547
|
-
set reduced(
|
|
548
|
-
|
|
556
|
+
set reduced(e) {
|
|
557
|
+
e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
|
|
549
558
|
}
|
|
550
559
|
get hasGridding() {
|
|
551
560
|
return this.hasAttribute("has-gridding");
|
|
552
561
|
}
|
|
553
|
-
set hasGridding(
|
|
554
|
-
|
|
562
|
+
set hasGridding(e) {
|
|
563
|
+
e ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
|
|
555
564
|
}
|
|
556
565
|
get hasGriddingMobile() {
|
|
557
566
|
return this.hasAttribute("has-gridding--mobile");
|
|
558
567
|
}
|
|
559
|
-
set hasGriddingMobile(
|
|
560
|
-
|
|
568
|
+
set hasGriddingMobile(e) {
|
|
569
|
+
e ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
|
|
561
570
|
}
|
|
562
571
|
get hasGriddingTablet() {
|
|
563
572
|
return this.hasAttribute("has-gridding--tablet");
|
|
564
573
|
}
|
|
565
|
-
set hasGriddingTablet(
|
|
566
|
-
|
|
574
|
+
set hasGriddingTablet(e) {
|
|
575
|
+
e ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
|
|
567
576
|
}
|
|
568
577
|
get hasGriddingLaptop() {
|
|
569
578
|
return this.hasAttribute("has-gridding--laptop");
|
|
570
579
|
}
|
|
571
|
-
set hasGriddingLaptop(
|
|
572
|
-
|
|
580
|
+
set hasGriddingLaptop(e) {
|
|
581
|
+
e ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
|
|
573
582
|
}
|
|
574
583
|
};
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
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);
|
|
578
589
|
export {
|
|
579
|
-
|
|
590
|
+
g as Banner
|
|
580
591
|
};
|