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