@proximus/lavender-banner 2.0.0-alpha.13 → 2.0.0-alpha.131

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