@proximus/lavender-table 1.2.0-alpha.42 → 1.2.0-alpha.44

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 (2) hide show
  1. package/dist/index.es.js +41 -629
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,46 +1,46 @@
1
- import { WithExtraAttributes as d, AttributeBreakpointHandlerDelegate as v, gapValues as y, checkName as k, backgroundColorValues as w } from "@proximus/lavender-common";
2
- const A = ":host{display:table;width:100%}", c = new CSSStyleSheet();
3
- c.replaceSync(A);
4
- class S extends HTMLElement {
1
+ import "@proximus/lavender-layout";
2
+ const n = ":host{display:table;width:100%}", s = new CSSStyleSheet();
3
+ s.replaceSync(n);
4
+ class p extends HTMLElement {
5
5
  constructor() {
6
6
  super(), this.template = () => `
7
7
  <slot></slot>
8
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c];
8
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [s];
9
9
  }
10
10
  connectedCallback() {
11
11
  this.style.display = "table", this.setAttribute("role", "table");
12
12
  }
13
13
  }
14
- customElements.get("px-table") || customElements.define("px-table", S);
15
- const C = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}", h = new CSSStyleSheet();
16
- h.replaceSync(C);
17
- class $ extends HTMLElement {
14
+ customElements.get("px-table") || customElements.define("px-table", p);
15
+ const c = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}", l = new CSSStyleSheet();
16
+ l.replaceSync(c);
17
+ class h extends HTMLElement {
18
18
  constructor() {
19
19
  super(), this.template = () => `
20
20
  <slot></slot>
21
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [h];
21
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
22
22
  }
23
23
  connectedCallback() {
24
24
  this.style.display = "table-header-group", this.setAttribute("role", "rowgroup");
25
25
  }
26
26
  }
27
- customElements.get("px-thead") || customElements.define("px-thead", $);
28
- const z = ":host{display:table-row}", b = new CSSStyleSheet();
29
- b.replaceSync(z);
30
- class j extends HTMLElement {
27
+ customElements.get("px-thead") || customElements.define("px-thead", h);
28
+ const x = ":host{display:table-row}", a = new CSSStyleSheet();
29
+ a.replaceSync(x);
30
+ class m extends HTMLElement {
31
31
  constructor() {
32
32
  super(), this.template = () => `
33
33
  <slot></slot>
34
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b];
34
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [a];
35
35
  }
36
36
  connectedCallback() {
37
37
  this.style.display = "table-row", this.setAttribute("role", "row");
38
38
  }
39
39
  }
40
- customElements.get("px-tr") || customElements.define("px-tr", j);
41
- const T = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default, var(--px-color-border-main-default))}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', g = new CSSStyleSheet();
42
- g.replaceSync(T);
43
- class L extends HTMLElement {
40
+ customElements.get("px-tr") || customElements.define("px-tr", m);
41
+ const b = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default, var(--px-color-border-main-default))}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', d = new CSSStyleSheet();
42
+ d.replaceSync(b);
43
+ class y extends HTMLElement {
44
44
  constructor() {
45
45
  super(), this.template = () => `
46
46
  <div class="th">
@@ -52,625 +52,37 @@ class L extends HTMLElement {
52
52
  <slot name="description"></slot>
53
53
  </px-vstack>
54
54
  </div>
55
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [g];
55
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d];
56
56
  }
57
57
  connectedCallback() {
58
58
  this.style.display = "table-cell", this.style.verticalAlign = "middle", this.style.borderBottom = "var(--px-border-size-l) solid var(--th-border-color-default)", this.setAttribute("role", "columnheader");
59
59
  const t = this.querySelector('[slot="info"]');
60
- t && (t.setAttribute("size", "xs"), t.setAttribute("color", "content-brand"));
60
+ t && (t.setAttribute("size", "xs"), t.setAttribute("color", "brand"));
61
61
  }
62
62
  }
63
- customElements.get("px-th") || customElements.define("px-th", L);
64
- const E = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}::slotted(px-tr:hover){background-color:var(--px-color-background-state-hover-default)}", u = new CSSStyleSheet();
65
- u.replaceSync(E);
66
- class M extends HTMLElement {
63
+ customElements.get("px-th") || customElements.define("px-th", y);
64
+ const u = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}::slotted(px-tr:hover){background-color:var(--px-color-background-state-hover-default)}", i = new CSSStyleSheet();
65
+ i.replaceSync(u);
66
+ class f extends HTMLElement {
67
67
  constructor() {
68
68
  super(), this.template = () => `
69
69
  <slot></slot>
70
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
70
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
71
71
  }
72
72
  connectedCallback() {
73
73
  this.style.display = "table-row-group", this.setAttribute("role", "rowgroup");
74
74
  }
75
75
  }
76
- customElements.get("px-tbody") || customElements.define("px-tbody", M);
77
- const R = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-m) solid var(--td-border-color-default, var(--px-color-border-main-default))}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', H = ":host{display:block}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (min-width: 48em) and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}}", x = new CSSStyleSheet();
78
- x.replaceSync(H);
79
- const I = [
80
- "",
81
- "default",
82
- "row",
83
- "row-reverse",
84
- "column",
85
- "column-reverse"
86
- ], D = [
87
- "",
88
- "default",
89
- "stretch",
90
- "flex-start",
91
- "flex-end",
92
- "center",
93
- "baseline"
94
- ], P = [
95
- "",
96
- "default",
97
- "flex-start",
98
- "flex-end",
99
- "center",
100
- "space-between",
101
- "space-around",
102
- "space-evenly"
103
- ], X = ["", "default", "nowrap", "wrap", "wrap-reverse"], q = ["", "visible", "hidden", "scroll", "auto"];
104
- class l extends d {
105
- constructor() {
106
- super(x), this.overflowXAttributeDelegate = new v(
107
- this,
108
- "overflow-x",
109
- (t) => t,
110
- "--overflow-x"
111
- ), this.template = `<div class="flex-container">
112
- <slot></slot>
113
- </div>`, this.shadowRoot.innerHTML = this.template;
114
- }
115
- connectedCallback() {
116
- this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
117
- }
118
- static get observedAttributes() {
119
- return [
120
- ...super.observedAttributes,
121
- "direction",
122
- "direction--mobile",
123
- "direction--tablet",
124
- "direction--laptop",
125
- "direction--desktop",
126
- "gap",
127
- "gap--mobile",
128
- "gap--tablet",
129
- "gap--laptop",
130
- "gap--desktop",
131
- "justify-content",
132
- "justify-content--mobile",
133
- "justify-content--tablet",
134
- "justify-content--laptop",
135
- "justify-content--desktop",
136
- "align-items",
137
- "align-items--mobile",
138
- "align-items--tablet",
139
- "align-items--laptop",
140
- "align-items--desktop",
141
- "wrap",
142
- "wrap--mobile",
143
- "wrap--tablet",
144
- "wrap--laptop",
145
- "wrap--desktop",
146
- "overflow-x",
147
- "overflow-x--mobile",
148
- "overflow-x--tablet",
149
- "overflow-x--laptop",
150
- "overflow-x--desktop"
151
- ];
152
- }
153
- attributeChangedCallback(t, o, e) {
154
- switch (t) {
155
- case "gap":
156
- case "gap--mobile":
157
- case "gap--tablet":
158
- case "gap--laptop":
159
- case "gap--desktop":
160
- this.updateFlexProperties(t, o, e, y);
161
- break;
162
- case "justify-content":
163
- case "justify-content--mobile":
164
- case "justify-content--tablet":
165
- case "justify-content--laptop":
166
- case "justify-content--desktop":
167
- this.updateFlexProperties(
168
- t,
169
- o,
170
- e,
171
- P
172
- );
173
- break;
174
- case "align-items":
175
- case "align-items--mobile":
176
- case "align-items--tablet":
177
- case "align-items--laptop":
178
- case "align-items--desktop":
179
- this.updateFlexProperties(t, o, e, D);
180
- break;
181
- case "wrap":
182
- case "wrap--mobile":
183
- case "wrap--tablet":
184
- case "wrap--laptop":
185
- case "wrap--desktop":
186
- this.updateFlexProperties(t, o, e, X);
187
- break;
188
- case "direction":
189
- case "direction--mobile":
190
- case "direction--tablet":
191
- case "direction--laptop":
192
- case "direction--desktop":
193
- this.updateFlexProperties(t, o, e, I);
194
- break;
195
- case "overflow-x":
196
- case "overflow-x--mobile":
197
- case "overflow-x--tablet":
198
- case "overflow-x--laptop":
199
- case "overflow-x--desktop":
200
- this.updateOverflowX(t, o, e, q);
201
- break;
202
- default:
203
- super.attributeChangedCallback(t, o, e);
204
- break;
205
- }
206
- }
207
- updateOverflowX(t, o, e, s) {
208
- if (!k(s, e)) {
209
- console.error(
210
- `${e} is not an allowed ${t} value for`,
211
- this.$el
212
- );
213
- return;
214
- }
215
- this.overflowXAttributeDelegate.attributeChangedCallback(
216
- t,
217
- o,
218
- e
219
- );
220
- }
221
- updateFlexProperties(t, o, e, s) {
222
- this.checkName(s, e) || console.error(`Bad ${t} value for`, this.$el);
223
- const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, r = [];
224
- if (!p)
225
- this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((n) => {
226
- this.updateStyle(a, n, o, s), this.updateStyle(a, n, e, s);
227
- });
228
- else {
229
- const n = t.split("--")[1];
230
- this.updateStyle(a, n, o, s), this.updateStyle(a, n, e, s);
231
- }
232
- }
233
- updateStyle(t, o, e, s) {
234
- e && (t === "gap" && s && s.includes(e) ? this.$el.style.setProperty(
235
- `--flex-${t}--${o}-value`,
236
- `var(--px-spacing-${e}-${o === "laptop" ? "desktop" : o})`
237
- ) : this.$el.style.setProperty(
238
- `--flex-${t}--${o}-value`,
239
- e
240
- ));
241
- }
242
- checkName(t, o) {
243
- return t.includes(o);
244
- }
245
- get direction() {
246
- return this.getAttribute("direction");
247
- }
248
- set direction(t) {
249
- this.setAttribute("direction", t);
250
- }
251
- get directionMobile() {
252
- return this.getAttribute("direction--mobile");
253
- }
254
- set directionMobile(t) {
255
- this.setAttribute("direction--mobile", t);
256
- }
257
- get directionTablet() {
258
- return this.getAttribute("direction--tablet");
259
- }
260
- set directionTablet(t) {
261
- this.setAttribute("direction--tablet", t);
262
- }
263
- get directionLaptop() {
264
- return this.getAttribute("direction--laptop");
265
- }
266
- set directionLaptop(t) {
267
- this.setAttribute("direction--laptop", t);
268
- }
269
- get directionDesktop() {
270
- return this.getAttribute("direction--desktop");
271
- }
272
- set directionDesktop(t) {
273
- this.setAttribute("direction--desktop", t);
274
- }
275
- get gap() {
276
- return this.getAttribute("gap");
277
- }
278
- set gap(t) {
279
- this.setAttribute("gap", t);
280
- }
281
- get gapMobile() {
282
- return this.getAttribute("gap--mobile");
283
- }
284
- set gapMobile(t) {
285
- this.setAttribute("gap--mobile", t);
286
- }
287
- get gapTablet() {
288
- return this.getAttribute("gap--tablet");
289
- }
290
- set gapTablet(t) {
291
- this.setAttribute("gap--tablet", t);
292
- }
293
- get gapLaptop() {
294
- return this.getAttribute("gap--laptop");
295
- }
296
- set gapLaptop(t) {
297
- this.setAttribute("gap--laptop", t);
298
- }
299
- get justifyContent() {
300
- return this.getAttribute("justify-content");
301
- }
302
- set justifyContent(t) {
303
- this.setAttribute("justify-content", t);
304
- }
305
- get justifyContentMobile() {
306
- return this.getAttribute("justify-content--mobile");
307
- }
308
- set justifyContentMobile(t) {
309
- this.setAttribute("justify-content--mobile", t);
310
- }
311
- get justifyContentTablet() {
312
- return this.getAttribute("justify-content--tablet");
313
- }
314
- set justifyContentTablet(t) {
315
- this.setAttribute("justify-content--tablet", t);
316
- }
317
- get justifyContentLaptop() {
318
- return this.getAttribute("justify-content--laptop");
319
- }
320
- set justifyContentLaptop(t) {
321
- this.setAttribute("justify-content--laptop", t);
322
- }
323
- get justifyContentDesktop() {
324
- return this.getAttribute("justify-content--desktop");
325
- }
326
- set justifyContentDesktop(t) {
327
- this.setAttribute("justify-content--desktop", t);
328
- }
329
- get alignItems() {
330
- return this.getAttribute("align-items");
331
- }
332
- set alignItems(t) {
333
- this.setAttribute("align-items", t);
334
- }
335
- get alignItemsMobile() {
336
- return this.getAttribute("align-items--mobile");
337
- }
338
- set alignItemsMobile(t) {
339
- this.setAttribute("align-items--mobile", t);
340
- }
341
- get alignItemsTablet() {
342
- return this.getAttribute("align-items--tablet");
343
- }
344
- set alignItemsTablet(t) {
345
- this.setAttribute("align-items--tablet", t);
346
- }
347
- get alignItemsLaptop() {
348
- return this.getAttribute("align-items--laptop");
349
- }
350
- set alignItemsLaptop(t) {
351
- this.setAttribute("align-items--laptop", t);
352
- }
353
- get alignItemsDesktop() {
354
- return this.getAttribute("align-items--desktop");
355
- }
356
- set alignItemsDesktop(t) {
357
- this.setAttribute("align-items--desktop", t);
358
- }
359
- get wrap() {
360
- return this.getAttribute("wrap");
361
- }
362
- set wrap(t) {
363
- this.setAttribute("wrap", t);
364
- }
365
- get wrapMobile() {
366
- return this.getAttribute("wrap--mobile");
367
- }
368
- set wrapMobile(t) {
369
- this.setAttribute("wrap--mobile", t);
370
- }
371
- get wrapTablet() {
372
- return this.getAttribute("wrap--tablet");
373
- }
374
- set wrapTablet(t) {
375
- this.setAttribute("wrap--tablet", t);
376
- }
377
- get wrapLaptop() {
378
- return this.getAttribute("wrap--laptop");
379
- }
380
- set wrapLaptop(t) {
381
- this.setAttribute("wrap--laptop", t);
382
- }
383
- get wrapDesktop() {
384
- return this.getAttribute("wrap--desktop");
385
- }
386
- set wrapDesktop(t) {
387
- this.setAttribute("wrap--desktop", t);
388
- }
389
- get overflowX() {
390
- return this.getAttribute("overflow-x");
391
- }
392
- set overflowX(t) {
393
- this.setAttribute("overflow-x", t);
394
- }
395
- get overflowXMobile() {
396
- return this.getAttribute("overflow-x--mobile");
397
- }
398
- set overflowXMobile(t) {
399
- this.setAttribute("overflow-x--mobile", t);
400
- }
401
- get overflowXTablet() {
402
- return this.getAttribute("overflow-x--tablet");
403
- }
404
- set overflowXTablet(t) {
405
- this.setAttribute("overflow-x--tablet", t);
406
- }
407
- get overflowXLaptop() {
408
- return this.getAttribute("overflow-x--laptop");
409
- }
410
- set overflowXLaptop(t) {
411
- this.setAttribute("overflow-x--laptop", t);
412
- }
413
- get overflowXDesktop() {
414
- return this.getAttribute("overflow-x--desktop");
415
- }
416
- set overflowXDesktop(t) {
417
- this.setAttribute("overflow-x--desktop", t);
418
- }
419
- get $el() {
420
- return this.shadowRoot.querySelector(".flex-container");
421
- }
422
- }
423
- customElements.get("px-stack") || customElements.define("px-stack", l);
424
- class F extends l {
425
- constructor() {
426
- super();
427
- }
428
- connectedCallback() {
429
- super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
430
- }
431
- }
432
- customElements.get("px-vstack") || customElements.define("px-vstack", F);
433
- class B extends l {
434
- constructor() {
435
- super();
436
- }
437
- connectedCallback() {
438
- super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
439
- }
440
- }
441
- customElements.get("px-hstack") || customElements.define("px-hstack", B);
442
- class O extends HTMLElement {
443
- constructor() {
444
- super();
445
- }
446
- static get observedAttributes() {
447
- return ["grow"];
448
- }
449
- attributeChangedCallback(t, o, e) {
450
- t === "grow" && (this.style.flexGrow = e);
451
- }
452
- connectedCallback() {
453
- this.style.flexGrow = this.getAttribute("grow") || "1";
454
- }
455
- get grow() {
456
- return this.getAttribute("grow");
457
- }
458
- set grow(t) {
459
- this.setAttribute("grow", t);
460
- }
461
- }
462
- customElements.define("px-spacer", O);
463
- const G = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", m = new CSSStyleSheet();
464
- m.replaceSync(G);
465
- class N extends d {
466
- constructor() {
467
- super(m), this.template = (t) => `
468
- <px-container border-radius="none" padding="none">
469
- <px-vstack>
470
- <px-container id="header-container" border-radius="none">
471
- <px-hstack>
472
- <px-spacer></px-spacer>
473
- <px-vstack
474
- id="header-vstack-container"
475
- gap="1rem"
476
- grow="${this.grow}"
477
- basis="${this.basis}"
478
- >
479
- <slot name="header-container"></slot>
480
- </px-vstack>
481
- <px-spacer></px-spacer>
482
- </px-hstack>
483
- </px-container>
484
- <px-container
485
- id="image-container"
486
- border-radius="none"
487
- padding="none"
488
- padding-top="xl"
489
- id="image-box"
490
- background-size="cover"
491
- background-position="top center"
492
- padding-bottom="xl"
493
- border-radius="none"
494
- bgimg="${this.backgroundImage}"
495
- >
496
- <px-hstack>
497
- <px-spacer></px-spacer>
498
- <px-vstack grow="${this.grow}" basis="${this.basis}">
499
- <slot name="image-container"></slot>
500
- </px-vstack>
501
- <px-spacer></px-spacer>
502
- </px-hstack>
503
- </px-container>
504
- ${t ? ` <px-hstack>
505
- <px-spacer></px-spacer>
506
- <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
507
- <px-vstack gap="1rem">
508
- <slot name="image-sticky-container"></slot>
509
- </px-vstack>
510
- </px-container>
511
- <px-spacer></px-spacer>
512
- </px-hstack>` : ""}
513
- <px-container
514
- id="body-container"
515
- id="main"
516
- background-color="${this.backgroundColor}"
517
- padding="none"
518
- padding-top="xl"
519
- padding-bottom="xl"
520
- >
521
- <px-hstack>
522
- <px-spacer></px-spacer>
523
- <px-vstack
524
- id="body-vstack-container"
525
- gap="3rem"
526
- grow="${this.grow}"
527
- basis="${this.basis}"
528
- >
529
- <slot name="body-container"></slot>
530
- </px-vstack>
531
- <px-spacer></px-spacer>
532
- </px-hstack>
533
- </px-container>
534
- <px-container
535
- id="contact-container"
536
- border-radius="none"
537
- id="main"
538
- background-color="surface-default"
539
- padding="none"
540
- padding-top="xl"
541
- padding-bottom="xl"
542
- >
543
- <px-hstack>
544
- <px-spacer></px-spacer>
545
- <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
546
- <slot name="contact-container"></slot>
547
- </px-vstack>
548
- <px-spacer></px-spacer>
549
- </px-hstack>
550
- </px-container>
551
- <px-container
552
- id="footer-container"
553
- background-color="none"
554
- border-radius="none"
555
- style="background-color: rgb(108, 66, 156)"
556
- padding-top="xl"
557
- padding-bottom="xl"
558
- >
559
- <px-hstack>
560
- <px-spacer></px-spacer>
561
- <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
562
- <slot name="footer-container"></slot>
563
- </px-vstack>
564
- <px-spacer></px-spacer>
565
- </px-hstack>
566
- </px-container>
567
- </px-vstack>
568
- </px-container>
569
- `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
570
- }
571
- static get observedAttributes() {
572
- return [
573
- ...super.observedAttributes,
574
- "background-image",
575
- "gap",
576
- "background-color",
577
- "padding-vertical",
578
- "padding-horizontal"
579
- ];
580
- }
581
- get $wideImage() {
582
- return this.shadowRoot.querySelector("#image-box");
583
- }
584
- get $bodyVStackContainer() {
585
- return this.shadowRoot.querySelector("#header-vstack-container");
586
- }
587
- get $bodyContainer() {
588
- return this.shadowRoot.querySelector("#body-container");
589
- }
590
- get $contactContainer() {
591
- return this.shadowRoot.querySelector("#contact-container");
592
- }
593
- get $footerContainer() {
594
- return this.shadowRoot.querySelector("#footer-container");
595
- }
596
- get $headerContainer() {
597
- return this.shadowRoot.querySelector("#header-container");
598
- }
599
- get $imageContainer() {
600
- return this.shadowRoot.querySelector("#image-container");
601
- }
602
- get backgroundImage() {
603
- return this.getAttribute("background-image");
604
- }
605
- get $imageStickySlot() {
606
- return this.querySelector('*[slot="image-sticky-container"]');
607
- }
608
- get $main() {
609
- return this.shadowRoot.querySelector("#main");
610
- }
611
- get backgroundColor() {
612
- return this.getAttribute("background-color") || "none";
613
- }
614
- get paddingVertical() {
615
- return this.getAttribute("padding-vertical");
616
- }
617
- get paddingHorizontal() {
618
- return this.getAttribute("padding-horizontal");
619
- }
620
- set paddingVertical(t) {
621
- this.setAttribute("padding-vertical", t);
622
- }
623
- set paddingHorizontal(t) {
624
- this.setAttribute("padding-horizontal", t);
625
- }
626
- get gap() {
627
- return this.getAttribute("gap");
628
- }
629
- connectedCallback() {
630
- this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
631
- }
632
- attributeChangedCallback(t, o, e) {
633
- if (o !== e)
634
- switch (t) {
635
- case "background-image":
636
- this.$imageContainer.setAttribute("background-image", e);
637
- break;
638
- case "gap":
639
- this.$bodyVStackContainer.setAttribute("gap", e);
640
- break;
641
- case "background-color":
642
- this.$bodyContainer.setAttribute(
643
- "background-color",
644
- w.indexOf(e) > 0 ? e : "none"
645
- );
646
- break;
647
- case "padding-vertical":
648
- this.handlePaddingVerticalChange(e);
649
- break;
650
- case "padding-horizontal":
651
- this.handlePaddingHorizontalChange(e);
652
- break;
653
- default:
654
- super.attributeChangedCallback(t, o, e);
655
- }
656
- }
657
- handlePaddingVerticalChange(t) {
658
- this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
659
- }
660
- handlePaddingHorizontalChange(t) {
661
- this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
662
- }
663
- }
664
- customElements.get("px-page") === void 0 && customElements.define("px-page", N);
665
- const f = new CSSStyleSheet();
666
- f.replaceSync(R);
667
- class W extends HTMLElement {
76
+ customElements.get("px-tbody") || customElements.define("px-tbody", f);
77
+ const v = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-m) solid var(--td-border-color-default, var(--px-color-border-main-default))}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}', r = new CSSStyleSheet();
78
+ r.replaceSync(v);
79
+ class g extends HTMLElement {
668
80
  constructor() {
669
81
  super(), this.template = () => `
670
82
  <div class="td">
671
83
  <px-hstack gap="xs" align-items="center">
672
84
  <slot name="icon"></slot>
673
- <px-vstack gap="none" align-items="start">
85
+ <px-vstack gap="none" align-items="flex-start">
674
86
  <px-hstack gap="2xs" align-items="center">
675
87
  <slot></slot>
676
88
  <slot name="info"></slot>
@@ -679,22 +91,22 @@ class W extends HTMLElement {
679
91
  </px-vstack>
680
92
  </px-hstack>
681
93
  </div>
682
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [f];
94
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
683
95
  }
684
96
  connectedCallback() {
685
97
  this.style.display = "table-cell", this.style.verticalAlign = "middle", this.style.borderBottom = "var(--px-border-size-m) solid var(--td-border-color-default)", this.setAttribute("role", "cell");
686
98
  const t = this.querySelector('[slot="icon"]');
687
- t && (t.setAttribute("size", "l"), t.setAttribute("color", "content-neutral-strong"));
99
+ t && (t.setAttribute("size", "l"), t.setAttribute("color", "neutral"));
688
100
  const o = this.querySelector('[slot="info"]');
689
- o && (o.setAttribute("size", "xs"), o.setAttribute("color", "content-brand"));
101
+ o && (o.setAttribute("size", "xs"), o.setAttribute("color", "brand"));
690
102
  }
691
103
  }
692
- customElements.get("px-td") || customElements.define("px-td", W);
104
+ customElements.get("px-td") || customElements.define("px-td", g);
693
105
  export {
694
- S as Table,
695
- M as Tbody,
696
- W as Td,
697
- L as Th,
698
- $ as Thead,
699
- j as Tr
106
+ p as Table,
107
+ f as Tbody,
108
+ g as Td,
109
+ y as Th,
110
+ h as Thead,
111
+ m as Tr
700
112
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-table",
3
- "version": "1.2.0-alpha.42",
3
+ "version": "1.2.0-alpha.44",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "files": [