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