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

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 +10 -5
  2. package/dist/index.es.js +434 -95
  3. package/package.json +2 -2
package/dist/Banner.d.ts CHANGED
@@ -1,15 +1,20 @@
1
- import { Container } from '@proximus/lavender-container';
2
- import { Grid } from '@proximus/lavender-grid';
3
- import { PxElement } from '@proximus/lavender-common';
4
- export declare class Banner extends PxElement<HTMLDivElement> {
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';
5
+ import { VerticallyExtendedElement } from '@proximus/lavender-common';
6
+ export declare class Banner extends VerticallyExtendedElement<HTMLDivElement> {
7
+ #private;
5
8
  static nativeName: string;
9
+ observer: MutationObserver;
6
10
  private template;
7
11
  constructor();
8
12
  static get observedAttributes(): string[];
9
13
  connectedCallback(): void;
10
14
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
15
+ disconnectedCallback(): void;
11
16
  createGridTemplateAreas(): void;
12
- createGridding(): void;
17
+ createGridding(value?: string): void;
13
18
  get $grid(): Grid;
14
19
  get $container(): Container;
15
20
  get $children(): NodeListOf<Element>;
package/dist/index.es.js CHANGED
@@ -1,28 +1,355 @@
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
+ 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
+ import "@proximus/lavender-container";
8
+ import { cssTokenBreakpoints as A, gapValues as v, PxElement as C, log as h, VerticallyExtendedElement as x, backgroundSizeValues as $, gradientValues as I, backgroundColorValues as S } from "@proximus/lavender-common";
9
+ const T = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8rem;height:100%}.banner[reduced]{min-height:5rem}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', L = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", f = new CSSStyleSheet();
10
+ f.replaceSync(L);
11
+ const M = [
12
+ "1",
13
+ "2",
14
+ "3",
15
+ "4",
16
+ "5",
17
+ "6",
18
+ "7",
19
+ "8",
20
+ "9",
21
+ "10",
22
+ "11",
23
+ "12"
24
+ ], G = [
25
+ "",
26
+ "start",
27
+ "end",
28
+ "center",
29
+ "space-between",
30
+ "space-around",
31
+ "space-evenly",
32
+ "stretch"
33
+ ], w = ["", "start", "end", "center", "stretch"], z = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .grid`, E = "px-spacing", P = A(
34
+ "gap",
35
+ z,
36
+ v,
37
+ E,
38
+ "--grid-gap"
39
+ ), u = class u extends C {
5
40
  constructor() {
6
- super(s), this.template = () => `<div class="banner">
41
+ super(f, P), this.template = () => `<div class="grid">
42
+ <slot></slot>
43
+ </div>`, this.shadowRoot.innerHTML = this.template();
44
+ }
45
+ static get observedAttributes() {
46
+ return [
47
+ ...super.observedAttributes,
48
+ "grid-cols",
49
+ "grid-cols--mobile",
50
+ "grid-cols--tablet",
51
+ "grid-cols--laptop",
52
+ "justify-content",
53
+ "justify-items",
54
+ "align-content",
55
+ "align-items",
56
+ "justify-content--mobile",
57
+ "justify-items--mobile",
58
+ "align-content--mobile",
59
+ "align-items--mobile",
60
+ "justify-content--tablet",
61
+ "justify-items--tablet",
62
+ "align-content--tablet",
63
+ "align-items--tablet",
64
+ "justify-content--laptop",
65
+ "justify-items--laptop",
66
+ "align-content--laptop",
67
+ "align-items--laptop",
68
+ "justify-content--desktop",
69
+ "justify-items--desktop",
70
+ "align-content--desktop",
71
+ "align-items--desktop"
72
+ ];
73
+ }
74
+ connectedCallback() {
75
+ this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
76
+ }
77
+ attributeChangedCallback(t, e, n) {
78
+ if (e !== n)
79
+ switch (t) {
80
+ case "grid-cols":
81
+ case "grid-cols--mobile":
82
+ case "grid-cols--tablet":
83
+ case "grid-cols--laptop":
84
+ this.updateAttribute(t, e, n, M);
85
+ break;
86
+ case "justify-content":
87
+ case "align-content":
88
+ case "justify-content--mobile":
89
+ case "align-content--mobile":
90
+ case "justify-content--tablet":
91
+ case "align-content--tablet":
92
+ case "justify-content--laptop":
93
+ case "align-content--laptop":
94
+ case "justify-content--desktop":
95
+ case "align-content--desktop":
96
+ this.updateAttribute(
97
+ t,
98
+ e,
99
+ n,
100
+ G
101
+ );
102
+ break;
103
+ case "justify-items":
104
+ case "align-items":
105
+ case "justify-items--mobile":
106
+ case "align-items--mobile":
107
+ case "justify-items--tablet":
108
+ case "align-items--tablet":
109
+ case "justify-items--laptop":
110
+ case "align-items--laptop":
111
+ case "justify-items--desktop":
112
+ case "align-items--desktop":
113
+ this.updateAttribute(
114
+ t,
115
+ e,
116
+ n,
117
+ w
118
+ );
119
+ break;
120
+ default:
121
+ super.attributeChangedCallback(t, e, n);
122
+ break;
123
+ }
124
+ }
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()}`
129
+ );
130
+ return;
131
+ }
132
+ const i = (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
+ i(t), i(e);
145
+ }
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()}`
149
+ );
150
+ }
151
+ get gap() {
152
+ return this.getAttribute("gap");
153
+ }
154
+ set gap(t) {
155
+ this.setAttribute("gap", t);
156
+ }
157
+ get gapMobile() {
158
+ return this.getAttribute("gap--mobile");
159
+ }
160
+ set gapMobile(t) {
161
+ this.setAttribute("gap--mobile", t);
162
+ }
163
+ get gapTablet() {
164
+ return this.getAttribute("gap--tablet");
165
+ }
166
+ set gapTablet(t) {
167
+ this.setAttribute("gap--tablet", t);
168
+ }
169
+ get gapLaptop() {
170
+ return this.getAttribute("gap--laptop");
171
+ }
172
+ set gapLaptop(t) {
173
+ this.setAttribute("gap--laptop", t);
174
+ }
175
+ get gridCols() {
176
+ return this.getAttribute("grid-cols");
177
+ }
178
+ set gridCols(t) {
179
+ this.setAttribute("grid-cols", t);
180
+ }
181
+ get gridColsMobile() {
182
+ return this.getAttribute("grid-cols--mobile");
183
+ }
184
+ set gridColsMobile(t) {
185
+ this.setAttribute("grid-cols--mobile", t);
186
+ }
187
+ get gridColsTablet() {
188
+ return this.getAttribute("grid-cols--tablet");
189
+ }
190
+ set gridColsTablet(t) {
191
+ this.setAttribute("grid-cols--tablet", t);
192
+ }
193
+ get gridColsLaptop() {
194
+ return this.getAttribute("grid-cols--laptop");
195
+ }
196
+ set gridColsLaptop(t) {
197
+ this.setAttribute("grid-cols--laptop", t);
198
+ }
199
+ get justifyContent() {
200
+ return this.getAttribute("justify-content");
201
+ }
202
+ set justifyContent(t) {
203
+ this.setAttribute("justify-content", t);
204
+ }
205
+ get justifyItems() {
206
+ return this.getAttribute("justify-items");
207
+ }
208
+ set justifyItems(t) {
209
+ this.setAttribute("justify-items", t);
210
+ }
211
+ get alignContent() {
212
+ return this.getAttribute("align-content");
213
+ }
214
+ set alignContent(t) {
215
+ this.setAttribute("align-content", t);
216
+ }
217
+ get alignItems() {
218
+ return this.getAttribute("align-items");
219
+ }
220
+ set alignItems(t) {
221
+ this.setAttribute("align-items", t);
222
+ }
223
+ get justifyContentMobile() {
224
+ return this.getAttribute("justify-content--mobile");
225
+ }
226
+ set justifyContentMobile(t) {
227
+ this.setAttribute("justify-content--mobile", t);
228
+ }
229
+ get justifyItemsMobile() {
230
+ return this.getAttribute("justify-items--mobile");
231
+ }
232
+ set justifyItemsMobile(t) {
233
+ this.setAttribute("justify-items--mobile", t);
234
+ }
235
+ get alignContentMobile() {
236
+ return this.getAttribute("align-content--mobile");
237
+ }
238
+ set alignContentMobile(t) {
239
+ this.setAttribute("align-content--mobile", t);
240
+ }
241
+ get alignItemsMobile() {
242
+ return this.getAttribute("align-items--mobile");
243
+ }
244
+ set alignItemsMobile(t) {
245
+ this.setAttribute("align-items--mobile", t);
246
+ }
247
+ get justifyContentTablet() {
248
+ return this.getAttribute("justify-content--tablet");
249
+ }
250
+ set justifyContentTablet(t) {
251
+ this.setAttribute("justify-content--tablet", t);
252
+ }
253
+ get justifyItemsTablet() {
254
+ return this.getAttribute("justify-items--tablet");
255
+ }
256
+ set justifyItemsTablet(t) {
257
+ this.setAttribute("justify-items--tablet", t);
258
+ }
259
+ get alignContentTablet() {
260
+ return this.getAttribute("align-content--tablet");
261
+ }
262
+ set alignContentTablet(t) {
263
+ this.setAttribute("align-content--tablet", t);
264
+ }
265
+ get alignItemsTablet() {
266
+ return this.getAttribute("align-items--tablet");
267
+ }
268
+ set alignItemsTablet(t) {
269
+ this.setAttribute("align-items--tablet", t);
270
+ }
271
+ get justifyContentLaptop() {
272
+ return this.getAttribute("justify-content--laptop");
273
+ }
274
+ set justifyContentLaptop(t) {
275
+ this.setAttribute("justify-content--laptop", t);
276
+ }
277
+ get justifyItemsLaptop() {
278
+ return this.getAttribute("justify-items--laptop");
279
+ }
280
+ set justifyItemsLaptop(t) {
281
+ this.setAttribute("justify-items--laptop", t);
282
+ }
283
+ get alignContentLaptop() {
284
+ return this.getAttribute("align-content--laptop");
285
+ }
286
+ set alignContentLaptop(t) {
287
+ this.setAttribute("align-content--laptop", t);
288
+ }
289
+ get alignItemsLaptop() {
290
+ return this.getAttribute("align-items--laptop");
291
+ }
292
+ set alignItemsLaptop(t) {
293
+ this.setAttribute("align-items--laptop", t);
294
+ }
295
+ get justifyContentDesktop() {
296
+ return this.getAttribute("justify-content--desktop");
297
+ }
298
+ set justifyContentDesktop(t) {
299
+ this.setAttribute("justify-content--desktop", t);
300
+ }
301
+ get justifyItemsDesktop() {
302
+ return this.getAttribute("justify-items--desktop");
303
+ }
304
+ set justifyItemsDesktop(t) {
305
+ this.setAttribute("justify-items--desktop", t);
306
+ }
307
+ get alignContentDesktop() {
308
+ return this.getAttribute("align-content--desktop");
309
+ }
310
+ set alignContentDesktop(t) {
311
+ this.setAttribute("align-content--desktop", t);
312
+ }
313
+ get alignItemsDesktop() {
314
+ return this.getAttribute("align-items--desktop");
315
+ }
316
+ set alignItemsDesktop(t) {
317
+ this.setAttribute("align-items--desktop", t);
318
+ }
319
+ };
320
+ u.nativeName = "div";
321
+ let c = u;
322
+ customElements.get("px-grid") || customElements.define("px-grid", c);
323
+ const y = new CSSStyleSheet();
324
+ y.replaceSync(T);
325
+ var o, d;
326
+ const p = class p extends x {
327
+ constructor() {
328
+ super(y);
329
+ m(this, o);
330
+ this.template = () => `<div class="banner">
7
331
  <div class="contrast-helper"></div>
8
- <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
9
- <px-grid gap="none">
10
- <px-container padding="none" background-color="none">
11
- <div class="banner-content">
12
- <slot name="tag"></slot>
13
- <slot name="media"></slot>
14
- <slot name="title"></slot>
15
- <slot name="description"></slot>
16
- <slot name="content"></slot>
17
- <slot name="action"></slot>
18
- </div>
19
- </px-container>
20
- </px-grid>
332
+ <px-container class="banner-container" padding--mobile="m" border-radius="main" >
333
+ <px-vstack>
334
+ <px-grid gap="none">
335
+ <px-container padding="none" background-color="none">
336
+ <div class="banner-content">
337
+ <slot name="tag"></slot>
338
+ <slot name="media"></slot>
339
+ <slot name="title"></slot>
340
+ <slot name="description"></slot>
341
+ <slot name="content"></slot>
342
+ </div>
343
+ </px-container>
344
+ </px-grid>
345
+ <slot name="action"></slot>
346
+ </px-vstack>
21
347
  </px-container>
22
348
  </div>`, this.shadowRoot.innerHTML = this.template();
23
349
  }
24
350
  static get observedAttributes() {
25
351
  return [
352
+ ...super.observedAttributes,
26
353
  "background-color",
27
354
  "background-gradient",
28
355
  "background-image",
@@ -42,100 +369,110 @@ const o = class o extends d {
42
369
  ];
43
370
  }
44
371
  connectedCallback() {
45
- var t;
46
- (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding();
372
+ var e;
373
+ (e = super.connectedCallback) == null || e.call(this), l(this, o, d).call(this), this.createGridTemplateAreas(), this.createGridding(), this.observer = new MutationObserver(() => {
374
+ this.createGridTemplateAreas(), this.createGridding();
375
+ }), this.observer.observe(this, {
376
+ childList: !0,
377
+ subtree: !0
378
+ });
47
379
  }
48
- attributeChangedCallback(t, i, e) {
49
- if (i !== e)
50
- switch (t) {
380
+ attributeChangedCallback(e, n, i) {
381
+ if (n !== i)
382
+ switch (e) {
51
383
  case "background-color":
52
- this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
384
+ this.$container.backgroundColor = S.indexOf(i) > 0 ? i : "none";
53
385
  break;
54
386
  case "background-gradient":
55
- this.$container.gradient = c.indexOf(e) > 0 ? e : "none";
387
+ this.$container.gradient = I.indexOf(i) > 0 ? i : "none";
56
388
  break;
57
389
  case "background-image":
58
- this.$container.backgroundImage = e;
390
+ this.$container.backgroundImage = i;
59
391
  break;
60
392
  case "background-image--mobile":
61
- this.$container.backgroundImageMobile = e;
393
+ this.$container.backgroundImageMobile = i;
62
394
  break;
63
395
  case "background-image--tablet":
64
- this.$container.backgroundImageTablet = e;
396
+ this.$container.backgroundImageTablet = i;
65
397
  break;
66
398
  case "background-image--laptop":
67
- this.$container.backgroundImageLaptop = e;
399
+ this.$container.backgroundImageLaptop = i;
68
400
  break;
69
401
  case "background-size":
70
- this.$container.backgroundSize = g.indexOf(e) > 0 ? e : "";
402
+ this.$container.backgroundSize = $.indexOf(i) > 0 ? i : "";
71
403
  break;
72
404
  case "background-position":
73
- this.$container.backgroundPosition = e;
405
+ this.$container.backgroundPosition = i;
74
406
  break;
75
407
  case "reduced":
76
- this.$el.toggleAttribute("reduced", e !== null), this.createGridTemplateAreas();
408
+ this.$el.toggleAttribute("reduced", i !== null), this.isConnected && l(this, o, d).call(this), this.createGridTemplateAreas();
77
409
  break;
78
410
  case "has-gridding":
79
411
  case "has-gridding--mobile":
80
412
  case "has-gridding--tablet":
81
413
  case "has-gridding--laptop":
82
- this.createGridding();
414
+ this.createGridding(i);
83
415
  break;
84
416
  case "inverted":
85
- for (let r = 0; r < this.$children.length; r++)
86
- this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
87
- this.$el.toggleAttribute("inverted", e !== null);
417
+ for (let s = 0; s < this.$children.length; s++)
418
+ this.$children[s].hasAttribute("inverted") || this.$children[s].toggleAttribute("inverted");
419
+ this.$el.toggleAttribute("inverted", i !== null);
88
420
  break;
89
421
  default:
90
- super.attributeChangedCallback(t, i, e);
422
+ super.attributeChangedCallback(e, n, i);
91
423
  break;
92
424
  }
93
425
  }
426
+ disconnectedCallback() {
427
+ this.observer.disconnect();
428
+ }
94
429
  createGridTemplateAreas() {
95
- const t = this.shadowRoot.querySelector(
430
+ const e = this.shadowRoot.querySelector(
96
431
  ".banner-content"
97
- ), i = ["tag", "media", "title", "description", "content", "action"];
98
- let e = "";
99
- this.reduced ? i.forEach((r) => {
100
- const a = this.shadowRoot.querySelector(
101
- `slot[name="${r}"]`
432
+ ), n = ["tag", "media", "title", "description", "content", "action"];
433
+ let i = "";
434
+ this.reduced ? n.forEach((s) => {
435
+ const r = this.shadowRoot.querySelector(
436
+ `slot[name="${s}"]`
102
437
  );
103
- if (a && a.assignedElements().length > 0) {
104
- if (r === "media") return;
105
- e += `'media ${r}'
438
+ if (r && r.assignedElements().length > 0) {
439
+ if (s === "media") return;
440
+ i += `'media ${s}'
106
441
  `;
107
442
  }
108
- }) : i.forEach((r) => {
109
- const a = this.shadowRoot.querySelector(
110
- `slot[name="${r}"]`
443
+ }) : n.forEach((s) => {
444
+ const r = this.shadowRoot.querySelector(
445
+ `slot[name="${s}"]`
111
446
  );
112
- a && a.assignedElements().length > 0 && (e += `'${r}'
447
+ r && r.assignedElements().length > 0 && (i += `'${s}'
113
448
  `);
114
- }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
449
+ }), i || (i = "'content'"), e.style.gridTemplateAreas = i;
115
450
  }
116
- createGridding() {
117
- const t = [
118
- { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
451
+ createGridding(e) {
452
+ const n = [
453
+ { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
119
454
  {
120
455
  prop: "hasGriddingMobile",
121
- gridProp: "gridColsMobile",
456
+ gridAttr: "grid-cols--mobile",
122
457
  attr: "col-span--mobile"
123
458
  },
124
459
  {
125
460
  prop: "hasGriddingTablet",
126
- gridProp: "gridColsTablet",
461
+ gridAttr: "grid-cols--tablet",
127
462
  attr: "col-span--tablet"
128
463
  },
129
464
  {
130
465
  prop: "hasGriddingLaptop",
131
- gridProp: "gridColsLaptop",
466
+ gridAttr: "grid-cols--laptop",
132
467
  attr: "col-span--laptop"
133
468
  }
134
469
  ], i = this.shadowRoot.querySelector(
135
470
  "px-grid > px-container"
136
471
  );
137
- t.forEach(({ prop: e, gridProp: r, attr: a }) => {
138
- this[e] && (this.$grid[r] = "3", i.setAttribute(a, "2"));
472
+ e !== null ? n.forEach(({ prop: s, gridAttr: r, attr: j }) => {
473
+ this[s] && (this.$grid.setAttribute(r, "3"), i == null || i.setAttribute(j, "2"));
474
+ }) : n.forEach(({ gridAttr: s, attr: r }) => {
475
+ this.$grid.setAttribute(s, "1"), i == null || i.setAttribute(r, "1");
139
476
  });
140
477
  }
141
478
  get $grid() {
@@ -150,103 +487,105 @@ const o = class o extends d {
150
487
  get backgroundColor() {
151
488
  return this.getAttribute("background-color");
152
489
  }
153
- set backgroundColor(t) {
154
- this.setAttribute("background-color", t);
490
+ set backgroundColor(e) {
491
+ this.setAttribute("background-color", e);
155
492
  }
156
493
  get gradient() {
157
494
  return this.getAttribute("background-gradient");
158
495
  }
159
- set gradient(t) {
160
- this.setAttribute("background-gradient", t);
496
+ set gradient(e) {
497
+ this.setAttribute("background-gradient", e);
161
498
  }
162
499
  get backgroundImage() {
163
500
  return this.getAttribute("background-image");
164
501
  }
165
- set backgroundImage(t) {
166
- this.setAttribute("background-image", t);
502
+ set backgroundImage(e) {
503
+ this.setAttribute("background-image", e);
167
504
  }
168
505
  get backgroundImageMobile() {
169
506
  return this.getAttribute("background-image--mobile");
170
507
  }
171
- set backgroundImageMobile(t) {
172
- this.setAttribute("background-image--mobile", t);
508
+ set backgroundImageMobile(e) {
509
+ this.setAttribute("background-image--mobile", e);
173
510
  }
174
511
  get backgroundImageTablet() {
175
512
  return this.getAttribute("background-image--tablet");
176
513
  }
177
- set backgroundImageTablet(t) {
178
- this.setAttribute("background-image--tablet", t);
514
+ set backgroundImageTablet(e) {
515
+ this.setAttribute("background-image--tablet", e);
179
516
  }
180
517
  get backgroundImageLaptop() {
181
518
  return this.getAttribute("background-image--laptop");
182
519
  }
183
- set backgroundImageLaptop(t) {
184
- this.setAttribute("background-image--laptop", t);
520
+ set backgroundImageLaptop(e) {
521
+ this.setAttribute("background-image--laptop", e);
185
522
  }
186
523
  get backgroundSize() {
187
524
  return this.getAttribute("background-size");
188
525
  }
189
- set backgroundSize(t) {
190
- this.setAttribute("background-size", t);
526
+ set backgroundSize(e) {
527
+ this.setAttribute("background-size", e);
191
528
  }
192
529
  get backgroundPosition() {
193
530
  return this.getAttribute("background-position");
194
531
  }
195
- set backgroundPosition(t) {
196
- this.setAttribute("background-position", t);
532
+ set backgroundPosition(e) {
533
+ this.setAttribute("background-position", e);
197
534
  }
198
535
  get gradientContrastHelper() {
199
536
  return this.hasAttribute("contrast-helper-gradient");
200
537
  }
201
- set gradientContrastHelper(t) {
202
- t ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
538
+ set gradientContrastHelper(e) {
539
+ e ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
203
540
  }
204
541
  get overlayContrastHelper() {
205
542
  return this.hasAttribute("contrast-helper-overlay");
206
543
  }
207
- set overlayContrastHelper(t) {
208
- t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
544
+ set overlayContrastHelper(e) {
545
+ e ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
209
546
  }
210
547
  get inverted() {
211
548
  return this.hasAttribute("inverted");
212
549
  }
213
- set inverted(t) {
214
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
550
+ set inverted(e) {
551
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
215
552
  }
216
553
  get reduced() {
217
554
  return this.hasAttribute("reduced");
218
555
  }
219
- set reduced(t) {
220
- t ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
556
+ set reduced(e) {
557
+ e ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
221
558
  }
222
559
  get hasGridding() {
223
560
  return this.hasAttribute("has-gridding");
224
561
  }
225
- set hasGridding(t) {
226
- t ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
562
+ set hasGridding(e) {
563
+ e ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
227
564
  }
228
565
  get hasGriddingMobile() {
229
566
  return this.hasAttribute("has-gridding--mobile");
230
567
  }
231
- set hasGriddingMobile(t) {
232
- t ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
568
+ set hasGriddingMobile(e) {
569
+ e ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
233
570
  }
234
571
  get hasGriddingTablet() {
235
572
  return this.hasAttribute("has-gridding--tablet");
236
573
  }
237
- set hasGriddingTablet(t) {
238
- t ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
574
+ set hasGriddingTablet(e) {
575
+ e ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
239
576
  }
240
577
  get hasGriddingLaptop() {
241
578
  return this.hasAttribute("has-gridding--laptop");
242
579
  }
243
- set hasGriddingLaptop(t) {
244
- t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
580
+ set hasGriddingLaptop(e) {
581
+ e ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
245
582
  }
246
583
  };
247
- o.nativeName = "div";
248
- let n = o;
249
- customElements.get("px-banner") || customElements.define("px-banner", n);
584
+ o = new WeakSet(), d = function() {
585
+ this.$container.setAttribute("padding", this.reduced ? "m" : "l");
586
+ }, p.nativeName = "div";
587
+ let g = p;
588
+ customElements.get("px-banner") || customElements.define("px-banner", g);
250
589
  export {
251
- n as Banner
590
+ g as Banner
252
591
  };
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.74",
4
4
  "description": "",
5
5
  "files": [
6
6
  "dist"
@@ -11,7 +11,7 @@
11
11
  "clean": "rm -rf dist",
12
12
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
13
13
  "test": "vitest run --coverage",
14
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
14
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
15
15
  },
16
16
  "publishConfig": {
17
17
  "access": "public"