@proximus/lavender-banner 1.4.1-alpha.9 → 1.4.1
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 +3 -5
- package/dist/index.es.js +30 -351
- package/package.json +1 -1
package/dist/Banner.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import '@proximus/lavender-
|
|
3
|
-
import type { Grid } from '@proximus/lavender-grid';
|
|
4
|
-
import '@proximus/lavender-grid';
|
|
1
|
+
import { Container } from '@proximus/lavender-container';
|
|
2
|
+
import { Grid } from '@proximus/lavender-grid';
|
|
5
3
|
import { PxElement } from '@proximus/lavender-common';
|
|
6
4
|
export declare class Banner extends PxElement<HTMLDivElement> {
|
|
7
5
|
static nativeName: string;
|
|
@@ -11,7 +9,7 @@ export declare class Banner extends PxElement<HTMLDivElement> {
|
|
|
11
9
|
connectedCallback(): void;
|
|
12
10
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
13
11
|
createGridTemplateAreas(): void;
|
|
14
|
-
createGridding(
|
|
12
|
+
createGridding(): void;
|
|
15
13
|
get $grid(): Grid;
|
|
16
14
|
get $container(): Container;
|
|
17
15
|
get $children(): NodeListOf<Element>;
|
package/dist/index.es.js
CHANGED
|
@@ -1,328 +1,9 @@
|
|
|
1
|
-
import "@proximus/lavender-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const v = [
|
|
6
|
-
"1",
|
|
7
|
-
"2",
|
|
8
|
-
"3",
|
|
9
|
-
"4",
|
|
10
|
-
"5",
|
|
11
|
-
"6",
|
|
12
|
-
"7",
|
|
13
|
-
"8",
|
|
14
|
-
"9",
|
|
15
|
-
"10",
|
|
16
|
-
"11",
|
|
17
|
-
"12"
|
|
18
|
-
], C = [
|
|
19
|
-
"",
|
|
20
|
-
"start",
|
|
21
|
-
"end",
|
|
22
|
-
"center",
|
|
23
|
-
"space-between",
|
|
24
|
-
"space-around",
|
|
25
|
-
"space-evenly",
|
|
26
|
-
"stretch"
|
|
27
|
-
], x = ["", "start", "end", "center", "stretch"], $ = (u, t, i) => `:host([${u}${i ? `--${i}` : ""}='${t}']) .grid`, I = "px-spacing", o = class o extends c {
|
|
1
|
+
import { PxElement as d, backgroundSizeValues as g, gradientValues as c, backgroundColorValues as l } from "@proximus/lavender-common";
|
|
2
|
+
const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.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}:host(:not([reduced])) ::slotted([slot="action"]){grid-area: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))}}', s = new CSSStyleSheet();
|
|
3
|
+
s.replaceSync(b);
|
|
4
|
+
const o = class o extends d {
|
|
28
5
|
constructor() {
|
|
29
|
-
super(
|
|
30
|
-
g,
|
|
31
|
-
b(
|
|
32
|
-
"gap",
|
|
33
|
-
$,
|
|
34
|
-
m,
|
|
35
|
-
I,
|
|
36
|
-
"--grid-gap"
|
|
37
|
-
)
|
|
38
|
-
), this.template = () => `<div class="grid">
|
|
39
|
-
<slot></slot>
|
|
40
|
-
</div>`, this.gapAttributeDelegate = new h(
|
|
41
|
-
this,
|
|
42
|
-
"gap",
|
|
43
|
-
(t) => t,
|
|
44
|
-
"--gap"
|
|
45
|
-
), this.shadowRoot.innerHTML = this.template();
|
|
46
|
-
}
|
|
47
|
-
static get observedAttributes() {
|
|
48
|
-
return [
|
|
49
|
-
...super.observedAttributes,
|
|
50
|
-
"grid-cols",
|
|
51
|
-
"grid-cols--mobile",
|
|
52
|
-
"grid-cols--tablet",
|
|
53
|
-
"grid-cols--laptop",
|
|
54
|
-
"justify-content",
|
|
55
|
-
"justify-items",
|
|
56
|
-
"align-content",
|
|
57
|
-
"align-items",
|
|
58
|
-
"justify-content--mobile",
|
|
59
|
-
"justify-items--mobile",
|
|
60
|
-
"align-content--mobile",
|
|
61
|
-
"align-items--mobile",
|
|
62
|
-
"justify-content--tablet",
|
|
63
|
-
"justify-items--tablet",
|
|
64
|
-
"align-content--tablet",
|
|
65
|
-
"align-items--tablet",
|
|
66
|
-
"justify-content--laptop",
|
|
67
|
-
"justify-items--laptop",
|
|
68
|
-
"align-content--laptop",
|
|
69
|
-
"align-items--laptop",
|
|
70
|
-
"justify-content--desktop",
|
|
71
|
-
"justify-items--desktop",
|
|
72
|
-
"align-content--desktop",
|
|
73
|
-
"align-items--desktop"
|
|
74
|
-
];
|
|
75
|
-
}
|
|
76
|
-
connectedCallback() {
|
|
77
|
-
super.connectedCallback(), this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
78
|
-
}
|
|
79
|
-
attributeChangedCallback(t, i, e) {
|
|
80
|
-
if (i !== e)
|
|
81
|
-
switch (t) {
|
|
82
|
-
case "grid-cols":
|
|
83
|
-
case "grid-cols--mobile":
|
|
84
|
-
case "grid-cols--tablet":
|
|
85
|
-
case "grid-cols--laptop":
|
|
86
|
-
this.updateAttribute(t, i, e, v);
|
|
87
|
-
break;
|
|
88
|
-
case "justify-content":
|
|
89
|
-
case "align-content":
|
|
90
|
-
case "justify-content--mobile":
|
|
91
|
-
case "align-content--mobile":
|
|
92
|
-
case "justify-content--tablet":
|
|
93
|
-
case "align-content--tablet":
|
|
94
|
-
case "justify-content--laptop":
|
|
95
|
-
case "align-content--laptop":
|
|
96
|
-
case "justify-content--desktop":
|
|
97
|
-
case "align-content--desktop":
|
|
98
|
-
this.updateAttribute(
|
|
99
|
-
t,
|
|
100
|
-
i,
|
|
101
|
-
e,
|
|
102
|
-
C
|
|
103
|
-
);
|
|
104
|
-
break;
|
|
105
|
-
case "justify-items":
|
|
106
|
-
case "align-items":
|
|
107
|
-
case "justify-items--mobile":
|
|
108
|
-
case "align-items--mobile":
|
|
109
|
-
case "justify-items--tablet":
|
|
110
|
-
case "align-items--tablet":
|
|
111
|
-
case "justify-items--laptop":
|
|
112
|
-
case "align-items--laptop":
|
|
113
|
-
case "justify-items--desktop":
|
|
114
|
-
case "align-items--desktop":
|
|
115
|
-
this.updateAttribute(
|
|
116
|
-
t,
|
|
117
|
-
i,
|
|
118
|
-
e,
|
|
119
|
-
x
|
|
120
|
-
);
|
|
121
|
-
break;
|
|
122
|
-
default:
|
|
123
|
-
super.attributeChangedCallback(t, i, e);
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
updateGap(t, i, e) {
|
|
128
|
-
if (!this.checkName(e, i)) {
|
|
129
|
-
console.error(`${i} is not a valid gap value`);
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
const n = (s) => {
|
|
133
|
-
s !== null && s !== "" && s !== "default" && (this.$el.style.setProperty(
|
|
134
|
-
"--grid-gap--mobile",
|
|
135
|
-
`var(--px-spacing-${s}-mobile)`
|
|
136
|
-
), this.$el.style.setProperty(
|
|
137
|
-
"--grid-gap--tablet",
|
|
138
|
-
`var(--px-spacing-${s}-tablet)`
|
|
139
|
-
), this.$el.style.setProperty(
|
|
140
|
-
"--grid-gap--laptop",
|
|
141
|
-
`var(--px-spacing-${s}-laptop)`
|
|
142
|
-
));
|
|
143
|
-
};
|
|
144
|
-
n(t), n(i);
|
|
145
|
-
}
|
|
146
|
-
updateAttribute(t, i, e, n) {
|
|
147
|
-
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}`)) : console.error(`${e} is not an allowed ${t} value`);
|
|
148
|
-
}
|
|
149
|
-
get gap() {
|
|
150
|
-
return this.getAttribute("gap");
|
|
151
|
-
}
|
|
152
|
-
set gap(t) {
|
|
153
|
-
this.setAttribute("gap", t);
|
|
154
|
-
}
|
|
155
|
-
get gapMobile() {
|
|
156
|
-
return this.getAttribute("gap--mobile");
|
|
157
|
-
}
|
|
158
|
-
set gapMobile(t) {
|
|
159
|
-
this.setAttribute("gap--mobile", t);
|
|
160
|
-
}
|
|
161
|
-
get gapTablet() {
|
|
162
|
-
return this.getAttribute("gap--tablet");
|
|
163
|
-
}
|
|
164
|
-
set gapTablet(t) {
|
|
165
|
-
this.setAttribute("gap--tablet", t);
|
|
166
|
-
}
|
|
167
|
-
get gapLaptop() {
|
|
168
|
-
return this.getAttribute("gap--laptop");
|
|
169
|
-
}
|
|
170
|
-
set gapLaptop(t) {
|
|
171
|
-
this.setAttribute("gap--laptop", t);
|
|
172
|
-
}
|
|
173
|
-
get gridCols() {
|
|
174
|
-
return this.getAttribute("grid-cols");
|
|
175
|
-
}
|
|
176
|
-
set gridCols(t) {
|
|
177
|
-
this.setAttribute("grid-cols", t);
|
|
178
|
-
}
|
|
179
|
-
get gridColsMobile() {
|
|
180
|
-
return this.getAttribute("grid-cols--mobile");
|
|
181
|
-
}
|
|
182
|
-
set gridColsMobile(t) {
|
|
183
|
-
this.setAttribute("grid-cols--mobile", t);
|
|
184
|
-
}
|
|
185
|
-
get gridColsTablet() {
|
|
186
|
-
return this.getAttribute("grid-cols--tablet");
|
|
187
|
-
}
|
|
188
|
-
set gridColsTablet(t) {
|
|
189
|
-
this.setAttribute("grid-cols--tablet", t);
|
|
190
|
-
}
|
|
191
|
-
get gridColsLaptop() {
|
|
192
|
-
return this.getAttribute("grid-cols--laptop");
|
|
193
|
-
}
|
|
194
|
-
set gridColsLaptop(t) {
|
|
195
|
-
this.setAttribute("grid-cols--laptop", t);
|
|
196
|
-
}
|
|
197
|
-
get justifyContent() {
|
|
198
|
-
return this.getAttribute("justify-content");
|
|
199
|
-
}
|
|
200
|
-
set justifyContent(t) {
|
|
201
|
-
this.setAttribute("justify-content", t);
|
|
202
|
-
}
|
|
203
|
-
get justifyItems() {
|
|
204
|
-
return this.getAttribute("justify-items");
|
|
205
|
-
}
|
|
206
|
-
set justifyItems(t) {
|
|
207
|
-
this.setAttribute("justify-items", t);
|
|
208
|
-
}
|
|
209
|
-
get alignContent() {
|
|
210
|
-
return this.getAttribute("align-content");
|
|
211
|
-
}
|
|
212
|
-
set alignContent(t) {
|
|
213
|
-
this.setAttribute("align-content", t);
|
|
214
|
-
}
|
|
215
|
-
get alignItems() {
|
|
216
|
-
return this.getAttribute("align-items");
|
|
217
|
-
}
|
|
218
|
-
set alignItems(t) {
|
|
219
|
-
this.setAttribute("align-items", t);
|
|
220
|
-
}
|
|
221
|
-
get justifyContentMobile() {
|
|
222
|
-
return this.getAttribute("justify-content--mobile");
|
|
223
|
-
}
|
|
224
|
-
set justifyContentMobile(t) {
|
|
225
|
-
this.setAttribute("justify-content--mobile", t);
|
|
226
|
-
}
|
|
227
|
-
get justifyItemsMobile() {
|
|
228
|
-
return this.getAttribute("justify-items--mobile");
|
|
229
|
-
}
|
|
230
|
-
set justifyItemsMobile(t) {
|
|
231
|
-
this.setAttribute("justify-items--mobile", t);
|
|
232
|
-
}
|
|
233
|
-
get alignContentMobile() {
|
|
234
|
-
return this.getAttribute("align-content--mobile");
|
|
235
|
-
}
|
|
236
|
-
set alignContentMobile(t) {
|
|
237
|
-
this.setAttribute("align-content--mobile", t);
|
|
238
|
-
}
|
|
239
|
-
get alignItemsMobile() {
|
|
240
|
-
return this.getAttribute("align-items--mobile");
|
|
241
|
-
}
|
|
242
|
-
set alignItemsMobile(t) {
|
|
243
|
-
this.setAttribute("align-items--mobile", t);
|
|
244
|
-
}
|
|
245
|
-
get justifyContentTablet() {
|
|
246
|
-
return this.getAttribute("justify-content--tablet");
|
|
247
|
-
}
|
|
248
|
-
set justifyContentTablet(t) {
|
|
249
|
-
this.setAttribute("justify-content--tablet", t);
|
|
250
|
-
}
|
|
251
|
-
get justifyItemsTablet() {
|
|
252
|
-
return this.getAttribute("justify-items--tablet");
|
|
253
|
-
}
|
|
254
|
-
set justifyItemsTablet(t) {
|
|
255
|
-
this.setAttribute("justify-items--tablet", t);
|
|
256
|
-
}
|
|
257
|
-
get alignContentTablet() {
|
|
258
|
-
return this.getAttribute("align-content--tablet");
|
|
259
|
-
}
|
|
260
|
-
set alignContentTablet(t) {
|
|
261
|
-
this.setAttribute("align-content--tablet", t);
|
|
262
|
-
}
|
|
263
|
-
get alignItemsTablet() {
|
|
264
|
-
return this.getAttribute("align-items--tablet");
|
|
265
|
-
}
|
|
266
|
-
set alignItemsTablet(t) {
|
|
267
|
-
this.setAttribute("align-items--tablet", t);
|
|
268
|
-
}
|
|
269
|
-
get justifyContentLaptop() {
|
|
270
|
-
return this.getAttribute("justify-content--laptop");
|
|
271
|
-
}
|
|
272
|
-
set justifyContentLaptop(t) {
|
|
273
|
-
this.setAttribute("justify-content--laptop", t);
|
|
274
|
-
}
|
|
275
|
-
get justifyItemsLaptop() {
|
|
276
|
-
return this.getAttribute("justify-items--laptop");
|
|
277
|
-
}
|
|
278
|
-
set justifyItemsLaptop(t) {
|
|
279
|
-
this.setAttribute("justify-items--laptop", t);
|
|
280
|
-
}
|
|
281
|
-
get alignContentLaptop() {
|
|
282
|
-
return this.getAttribute("align-content--laptop");
|
|
283
|
-
}
|
|
284
|
-
set alignContentLaptop(t) {
|
|
285
|
-
this.setAttribute("align-content--laptop", t);
|
|
286
|
-
}
|
|
287
|
-
get alignItemsLaptop() {
|
|
288
|
-
return this.getAttribute("align-items--laptop");
|
|
289
|
-
}
|
|
290
|
-
set alignItemsLaptop(t) {
|
|
291
|
-
this.setAttribute("align-items--laptop", t);
|
|
292
|
-
}
|
|
293
|
-
get justifyContentDesktop() {
|
|
294
|
-
return this.getAttribute("justify-content--desktop");
|
|
295
|
-
}
|
|
296
|
-
set justifyContentDesktop(t) {
|
|
297
|
-
this.setAttribute("justify-content--desktop", t);
|
|
298
|
-
}
|
|
299
|
-
get justifyItemsDesktop() {
|
|
300
|
-
return this.getAttribute("justify-items--desktop");
|
|
301
|
-
}
|
|
302
|
-
set justifyItemsDesktop(t) {
|
|
303
|
-
this.setAttribute("justify-items--desktop", t);
|
|
304
|
-
}
|
|
305
|
-
get alignContentDesktop() {
|
|
306
|
-
return this.getAttribute("align-content--desktop");
|
|
307
|
-
}
|
|
308
|
-
set alignContentDesktop(t) {
|
|
309
|
-
this.setAttribute("align-content--desktop", t);
|
|
310
|
-
}
|
|
311
|
-
get alignItemsDesktop() {
|
|
312
|
-
return this.getAttribute("align-items--desktop");
|
|
313
|
-
}
|
|
314
|
-
set alignItemsDesktop(t) {
|
|
315
|
-
this.setAttribute("align-items--desktop", t);
|
|
316
|
-
}
|
|
317
|
-
};
|
|
318
|
-
o.nativeName = "div";
|
|
319
|
-
let a = o;
|
|
320
|
-
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
321
|
-
const d = new CSSStyleSheet();
|
|
322
|
-
d.replaceSync(k);
|
|
323
|
-
const l = class l extends c {
|
|
324
|
-
constructor() {
|
|
325
|
-
super(d), this.template = () => `<div class="banner">
|
|
6
|
+
super(s), this.template = () => `<div class="banner">
|
|
326
7
|
<div class="contrast-helper"></div>
|
|
327
8
|
<px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
|
|
328
9
|
<px-grid gap="none">
|
|
@@ -368,10 +49,10 @@ const l = class l extends c {
|
|
|
368
49
|
if (i !== e)
|
|
369
50
|
switch (t) {
|
|
370
51
|
case "background-color":
|
|
371
|
-
this.$container.backgroundColor =
|
|
52
|
+
this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
|
|
372
53
|
break;
|
|
373
54
|
case "background-gradient":
|
|
374
|
-
this.$container.gradient =
|
|
55
|
+
this.$container.gradient = c.indexOf(e) > 0 ? e : "none";
|
|
375
56
|
break;
|
|
376
57
|
case "background-image":
|
|
377
58
|
this.$container.backgroundImage = e;
|
|
@@ -386,7 +67,7 @@ const l = class l extends c {
|
|
|
386
67
|
this.$container.backgroundImageLaptop = e;
|
|
387
68
|
break;
|
|
388
69
|
case "background-size":
|
|
389
|
-
this.$container.backgroundSize =
|
|
70
|
+
this.$container.backgroundSize = g.indexOf(e) > 0 ? e : "";
|
|
390
71
|
break;
|
|
391
72
|
case "background-position":
|
|
392
73
|
this.$container.backgroundPosition = e;
|
|
@@ -398,11 +79,11 @@ const l = class l extends c {
|
|
|
398
79
|
case "has-gridding--mobile":
|
|
399
80
|
case "has-gridding--tablet":
|
|
400
81
|
case "has-gridding--laptop":
|
|
401
|
-
this.createGridding(
|
|
82
|
+
this.createGridding();
|
|
402
83
|
break;
|
|
403
84
|
case "inverted":
|
|
404
|
-
for (let
|
|
405
|
-
this.$children[
|
|
85
|
+
for (let r = 0; r < this.$children.length; r++)
|
|
86
|
+
this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
|
|
406
87
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
407
88
|
break;
|
|
408
89
|
default:
|
|
@@ -415,25 +96,25 @@ const l = class l extends c {
|
|
|
415
96
|
".banner-content"
|
|
416
97
|
), i = ["tag", "media", "title", "description", "content", "action"];
|
|
417
98
|
let e = "";
|
|
418
|
-
this.reduced ? i.forEach((
|
|
419
|
-
const
|
|
420
|
-
`slot[name="${
|
|
99
|
+
this.reduced ? i.forEach((r) => {
|
|
100
|
+
const a = this.shadowRoot.querySelector(
|
|
101
|
+
`slot[name="${r}"]`
|
|
421
102
|
);
|
|
422
|
-
if (
|
|
423
|
-
if (
|
|
424
|
-
e += `'media ${
|
|
103
|
+
if (a && a.assignedElements().length > 0) {
|
|
104
|
+
if (r === "media") return;
|
|
105
|
+
e += `'media ${r}'
|
|
425
106
|
`;
|
|
426
107
|
}
|
|
427
|
-
}) : i.forEach((
|
|
428
|
-
const
|
|
429
|
-
`slot[name="${
|
|
108
|
+
}) : i.forEach((r) => {
|
|
109
|
+
const a = this.shadowRoot.querySelector(
|
|
110
|
+
`slot[name="${r}"]`
|
|
430
111
|
);
|
|
431
|
-
|
|
112
|
+
a && a.assignedElements().length > 0 && (e += `'${r}'
|
|
432
113
|
`);
|
|
433
114
|
}), e || (e = "'content'"), t.style.gridTemplateAreas = e;
|
|
434
115
|
}
|
|
435
|
-
createGridding(
|
|
436
|
-
const
|
|
116
|
+
createGridding() {
|
|
117
|
+
const t = [
|
|
437
118
|
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
438
119
|
{
|
|
439
120
|
prop: "hasGriddingMobile",
|
|
@@ -450,13 +131,11 @@ const l = class l extends c {
|
|
|
450
131
|
gridProp: "gridColsLaptop",
|
|
451
132
|
attr: "col-span--laptop"
|
|
452
133
|
}
|
|
453
|
-
],
|
|
134
|
+
], i = this.shadowRoot.querySelector(
|
|
454
135
|
"px-grid > px-container"
|
|
455
136
|
);
|
|
456
|
-
t
|
|
457
|
-
this[
|
|
458
|
-
}) : i.forEach(({ gridProp: n, attr: s }) => {
|
|
459
|
-
this.$grid[n] = "1", e.removeAttribute(s);
|
|
137
|
+
t.forEach(({ prop: e, gridProp: r, attr: a }) => {
|
|
138
|
+
this[e] && (this.$grid[r] = "3", i.setAttribute(a, "2"));
|
|
460
139
|
});
|
|
461
140
|
}
|
|
462
141
|
get $grid() {
|
|
@@ -565,9 +244,9 @@ const l = class l extends c {
|
|
|
565
244
|
t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
|
|
566
245
|
}
|
|
567
246
|
};
|
|
568
|
-
|
|
569
|
-
let
|
|
570
|
-
customElements.get("px-banner") || customElements.define("px-banner",
|
|
247
|
+
o.nativeName = "div";
|
|
248
|
+
let n = o;
|
|
249
|
+
customElements.get("px-banner") || customElements.define("px-banner", n);
|
|
571
250
|
export {
|
|
572
|
-
|
|
251
|
+
n as Banner
|
|
573
252
|
};
|