@proximus/lavender-banner 2.0.0-alpha.7 → 2.0.0-alpha.8

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.
Files changed (3) hide show
  1. package/dist/Banner.d.ts +5 -3
  2. package/dist/index.es.js +351 -30
  3. package/package.json +1 -1
package/dist/Banner.d.ts CHANGED
@@ -1,5 +1,7 @@
1
- import { Container } from '@proximus/lavender-container';
2
- import { Grid } from '@proximus/lavender-grid';
1
+ import type { Container } from '@proximus/lavender-container';
2
+ import '@proximus/lavender-container';
3
+ import type { Grid } from '@proximus/lavender-grid';
4
+ import '@proximus/lavender-grid';
3
5
  import { PxElement } from '@proximus/lavender-common';
4
6
  export declare class Banner extends PxElement<HTMLDivElement> {
5
7
  static nativeName: string;
@@ -9,7 +11,7 @@ export declare class Banner extends PxElement<HTMLDivElement> {
9
11
  connectedCallback(): void;
10
12
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
11
13
  createGridTemplateAreas(): void;
12
- createGridding(): void;
14
+ createGridding(value?: string): void;
13
15
  get $grid(): Grid;
14
16
  get $container(): Container;
15
17
  get $children(): NodeListOf<Element>;
package/dist/index.es.js CHANGED
@@ -1,9 +1,328 @@
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 {
1
+ import "@proximus/lavender-container";
2
+ import { PxElement as c, cssTokenBreakpoints as b, gapValues as m, AttributeBreakpointHandlerDelegate as h, backgroundSizeValues as f, gradientValues as y, backgroundColorValues as j } from "@proximus/lavender-common";
3
+ const k = ':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))}}', A = ":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(A);
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 {
5
28
  constructor() {
6
- super(s), this.template = () => `<div class="banner">
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">
7
326
  <div class="contrast-helper"></div>
8
327
  <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
9
328
  <px-grid gap="none">
@@ -49,10 +368,10 @@ const o = class o extends d {
49
368
  if (i !== e)
50
369
  switch (t) {
51
370
  case "background-color":
52
- this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
371
+ this.$container.backgroundColor = j.indexOf(e) > 0 ? e : "none";
53
372
  break;
54
373
  case "background-gradient":
55
- this.$container.gradient = c.indexOf(e) > 0 ? e : "none";
374
+ this.$container.gradient = y.indexOf(e) > 0 ? e : "none";
56
375
  break;
57
376
  case "background-image":
58
377
  this.$container.backgroundImage = e;
@@ -67,7 +386,7 @@ const o = class o extends d {
67
386
  this.$container.backgroundImageLaptop = e;
68
387
  break;
69
388
  case "background-size":
70
- this.$container.backgroundSize = g.indexOf(e) > 0 ? e : "";
389
+ this.$container.backgroundSize = f.indexOf(e) > 0 ? e : "";
71
390
  break;
72
391
  case "background-position":
73
392
  this.$container.backgroundPosition = e;
@@ -79,11 +398,11 @@ const o = class o extends d {
79
398
  case "has-gridding--mobile":
80
399
  case "has-gridding--tablet":
81
400
  case "has-gridding--laptop":
82
- this.createGridding();
401
+ this.createGridding(e);
83
402
  break;
84
403
  case "inverted":
85
- for (let r = 0; r < this.$children.length; r++)
86
- this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
404
+ for (let n = 0; n < this.$children.length; n++)
405
+ this.$children[n].hasAttribute("inverted") || this.$children[n].toggleAttribute("inverted");
87
406
  this.$el.toggleAttribute("inverted", e !== null);
88
407
  break;
89
408
  default:
@@ -96,25 +415,25 @@ const o = class o extends d {
96
415
  ".banner-content"
97
416
  ), i = ["tag", "media", "title", "description", "content", "action"];
98
417
  let e = "";
99
- this.reduced ? i.forEach((r) => {
100
- const a = this.shadowRoot.querySelector(
101
- `slot[name="${r}"]`
418
+ this.reduced ? i.forEach((n) => {
419
+ const s = this.shadowRoot.querySelector(
420
+ `slot[name="${n}"]`
102
421
  );
103
- if (a && a.assignedElements().length > 0) {
104
- if (r === "media") return;
105
- e += `'media ${r}'
422
+ if (s && s.assignedElements().length > 0) {
423
+ if (n === "media") return;
424
+ e += `'media ${n}'
106
425
  `;
107
426
  }
108
- }) : i.forEach((r) => {
109
- const a = this.shadowRoot.querySelector(
110
- `slot[name="${r}"]`
427
+ }) : i.forEach((n) => {
428
+ const s = this.shadowRoot.querySelector(
429
+ `slot[name="${n}"]`
111
430
  );
112
- a && a.assignedElements().length > 0 && (e += `'${r}'
431
+ s && s.assignedElements().length > 0 && (e += `'${n}'
113
432
  `);
114
433
  }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
115
434
  }
116
- createGridding() {
117
- const t = [
435
+ createGridding(t) {
436
+ const i = [
118
437
  { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
119
438
  {
120
439
  prop: "hasGriddingMobile",
@@ -131,11 +450,13 @@ const o = class o extends d {
131
450
  gridProp: "gridColsLaptop",
132
451
  attr: "col-span--laptop"
133
452
  }
134
- ], i = this.shadowRoot.querySelector(
453
+ ], e = this.shadowRoot.querySelector(
135
454
  "px-grid > px-container"
136
455
  );
137
- t.forEach(({ prop: e, gridProp: r, attr: a }) => {
138
- this[e] && (this.$grid[r] = "3", i.setAttribute(a, "2"));
456
+ t !== null ? i.forEach(({ prop: n, gridProp: s, attr: p }) => {
457
+ this[n] && (this.$grid[s] = "3", e.setAttribute(p, "2"));
458
+ }) : i.forEach(({ gridProp: n, attr: s }) => {
459
+ this.$grid[n] = "1", e.removeAttribute(s);
139
460
  });
140
461
  }
141
462
  get $grid() {
@@ -244,9 +565,9 @@ const o = class o extends d {
244
565
  t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
245
566
  }
246
567
  };
247
- o.nativeName = "div";
248
- let n = o;
249
- customElements.get("px-banner") || customElements.define("px-banner", n);
568
+ l.nativeName = "div";
569
+ let r = l;
570
+ customElements.get("px-banner") || customElements.define("px-banner", r);
250
571
  export {
251
- n as Banner
572
+ r as Banner
252
573
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-banner",
3
- "version": "2.0.0-alpha.7",
3
+ "version": "2.0.0-alpha.8",
4
4
  "description": "",
5
5
  "files": [
6
6
  "dist"