@proximus/lavender-table 1.4.17-alpha.6 → 1.4.17-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Table.d.ts +1 -1
  2. package/dist/Tbody.d.ts +1 -1
  3. package/dist/Td.d.ts +1 -1
  4. package/dist/Th.d.ts +1 -1
  5. package/dist/Thead.d.ts +1 -1
  6. package/dist/Tr.d.ts +1 -1
  7. package/dist/custom-elements.json +18 -30
  8. package/dist/index.es.js +50 -31
  9. package/dist/web-types.json +7 -25
  10. package/package.json +1 -1
package/dist/Table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Table extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  connectedCallback(): void;
5
5
  }
package/dist/Tbody.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Tbody extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  connectedCallback(): void;
5
5
  }
package/dist/Td.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import '@proximus/lavender-layout';
2
2
  export declare class Td extends HTMLElement {
3
- private template;
3
+ protected static readonly template: HTMLTemplateElement;
4
4
  constructor();
5
5
  connectedCallback(): void;
6
6
  }
package/dist/Th.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Th extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  connectedCallback(): void;
5
5
  }
package/dist/Thead.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Thead extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  connectedCallback(): void;
5
5
  }
package/dist/Tr.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Tr extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  connectedCallback(): void;
5
5
  }
package/dist/custom-elements.json CHANGED
@@ -14,11 +14,9 @@
14
14
  {
15
15
  "kind": "field",
16
16
  "name": "template",
17
- "privacy": "private"
18
- },
19
- {
20
- "kind": "field",
21
- "name": "innerHTML"
17
+ "privacy": "protected",
18
+ "static": true,
19
+ "readonly": true
22
20
  },
23
21
  {
24
22
  "kind": "field",
@@ -67,11 +65,9 @@
67
65
  {
68
66
  "kind": "field",
69
67
  "name": "template",
70
- "privacy": "private"
71
- },
72
- {
73
- "kind": "field",
74
- "name": "innerHTML"
68
+ "privacy": "protected",
69
+ "static": true,
70
+ "readonly": true
75
71
  },
76
72
  {
77
73
  "kind": "field",
@@ -120,11 +116,9 @@
120
116
  {
121
117
  "kind": "field",
122
118
  "name": "template",
123
- "privacy": "private"
124
- },
125
- {
126
- "kind": "field",
127
- "name": "innerHTML"
119
+ "privacy": "protected",
120
+ "static": true,
121
+ "readonly": true
128
122
  },
129
123
  {
130
124
  "kind": "field",
@@ -173,11 +167,9 @@
173
167
  {
174
168
  "kind": "field",
175
169
  "name": "template",
176
- "privacy": "private"
177
- },
178
- {
179
- "kind": "field",
180
- "name": "innerHTML"
170
+ "privacy": "protected",
171
+ "static": true,
172
+ "readonly": true
181
173
  },
182
174
  {
183
175
  "kind": "field",
@@ -226,11 +218,9 @@
226
218
  {
227
219
  "kind": "field",
228
220
  "name": "template",
229
- "privacy": "private"
230
- },
231
- {
232
- "kind": "field",
233
- "name": "innerHTML"
221
+ "privacy": "protected",
222
+ "static": true,
223
+ "readonly": true
234
224
  },
235
225
  {
236
226
  "kind": "field",
@@ -279,11 +269,9 @@
279
269
  {
280
270
  "kind": "field",
281
271
  "name": "template",
282
- "privacy": "private"
283
- },
284
- {
285
- "kind": "field",
286
- "name": "innerHTML"
272
+ "privacy": "protected",
273
+ "static": true,
274
+ "readonly": true
287
275
  },
288
276
  {
289
277
  "kind": "field",
package/dist/index.es.js CHANGED
@@ -1,49 +1,62 @@
1
+ import { createTemplate as e, renderTemplate as t } from "@proximus/lavender-common";
1
2
  import "@proximus/lavender-layout";
2
3
  //#region src/table.css?inline
3
- var e = ":host{width:100%;display:table}", t = new CSSStyleSheet();
4
- t.replaceSync(e);
5
- var n = class extends HTMLElement {
4
+ var n = ":host{width:100%;display:table}", r = new CSSStyleSheet();
5
+ r.replaceSync(n);
6
+ var i = class n extends HTMLElement {
7
+ static {
8
+ this.template = e("<slot></slot>");
9
+ }
6
10
  constructor() {
7
- super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [t];
11
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [r];
8
12
  }
9
13
  connectedCallback() {
10
14
  this.style.display = "table", this.setAttribute("role", "table");
11
15
  }
12
16
  };
13
- customElements.get("px-table") || customElements.define("px-table", n);
17
+ customElements.get("px-table") || customElements.define("px-table", i);
14
18
  //#endregion
15
19
  //#region src/thead.css?inline
16
- var r = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}", i = new CSSStyleSheet();
17
- i.replaceSync(r);
18
- var a = class extends HTMLElement {
20
+ var a = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}", o = new CSSStyleSheet();
21
+ o.replaceSync(a);
22
+ var s = class n extends HTMLElement {
23
+ static {
24
+ this.template = e("<slot></slot>");
25
+ }
19
26
  constructor() {
20
- super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
27
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [o];
21
28
  }
22
29
  connectedCallback() {
23
30
  this.style.display = "table-header-group", this.setAttribute("role", "rowgroup");
24
31
  }
25
32
  };
26
- customElements.get("px-thead") || customElements.define("px-thead", a);
33
+ customElements.get("px-thead") || customElements.define("px-thead", s);
27
34
  //#endregion
28
35
  //#region src/tr.css?inline
29
- var o = ":host{display:table-row}", s = new CSSStyleSheet();
30
- s.replaceSync(o);
31
- var c = class extends HTMLElement {
36
+ var c = ":host{display:table-row}", l = new CSSStyleSheet();
37
+ l.replaceSync(c);
38
+ var u = class n extends HTMLElement {
39
+ static {
40
+ this.template = e("<slot></slot>");
41
+ }
32
42
  constructor() {
33
- super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [s];
43
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [l];
34
44
  }
35
45
  connectedCallback() {
36
46
  this.style.display = "table-row", this.setAttribute("role", "row");
37
47
  }
38
48
  };
39
- customElements.get("px-tr") || customElements.define("px-tr", c);
49
+ customElements.get("px-tr") || customElements.define("px-tr", u);
40
50
  //#endregion
41
51
  //#region src/th.css?inline
42
- var l = ":host{vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default,var(--px-color-border-main-default));display:table-cell}.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);color:var(--px-color-text-neutral-default);line-height:var(--px-line-height-ratio-l)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}.th ::slotted(*){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}@media screen and (width>=48rem){.th{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-tablet)}.th ::slotted(*){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.th{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-laptop)}.th ::slotted(*){font-size:var(--px-text-size-body-m-laptop)}}", u = new CSSStyleSheet();
43
- u.replaceSync(l);
44
- var d = class extends HTMLElement {
52
+ var d = ":host{vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default,var(--px-color-border-main-default));display:table-cell}.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);color:var(--px-color-text-neutral-default);line-height:var(--px-line-height-ratio-l)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}.th ::slotted(*){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}@media screen and (width>=48rem){.th{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-tablet)}.th ::slotted(*){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.th{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.th ::slotted([slot=description]){font-size:var(--px-text-size-body-s-laptop)}.th ::slotted(*){font-size:var(--px-text-size-body-m-laptop)}}", f = new CSSStyleSheet();
53
+ f.replaceSync(d);
54
+ var p = class n extends HTMLElement {
55
+ static {
56
+ this.template = e("<div class=\"th\"><px-vstack gap=\"none\"><px-hstack gap=\"2xs\" align-items=\"center\"><slot></slot><slot name=\"info\"></slot></px-hstack><slot name=\"description\"></slot></px-vstack></div>");
57
+ }
45
58
  constructor() {
46
- super(), this.template = () => "\n <div class=\"th\">\n <px-vstack gap=\"none\">\n <px-hstack gap=\"2xs\" align-items=\"center\">\n <slot></slot>\n <slot name=\"info\"></slot>\n </px-hstack>\n <slot name=\"description\"></slot>\n </px-vstack>\n </div>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
59
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [f];
47
60
  }
48
61
  connectedCallback() {
49
62
  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");
@@ -51,27 +64,33 @@ var d = class extends HTMLElement {
51
64
  e && (e.setAttribute("size", "xs"), e.setAttribute("color", "brand"));
52
65
  }
53
66
  };
54
- customElements.get("px-th") || customElements.define("px-th", d);
67
+ customElements.get("px-th") || customElements.define("px-th", p);
55
68
  //#endregion
56
69
  //#region src/tbody.css?inline
57
- var f = ":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)}", p = new CSSStyleSheet();
58
- p.replaceSync(f);
59
- var m = class extends HTMLElement {
70
+ var m = ":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)}", h = new CSSStyleSheet();
71
+ h.replaceSync(m);
72
+ var g = class n extends HTMLElement {
73
+ static {
74
+ this.template = e("<slot></slot>");
75
+ }
60
76
  constructor() {
61
- super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [p];
77
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [h];
62
78
  }
63
79
  connectedCallback() {
64
80
  this.style.display = "table-row-group", this.setAttribute("role", "rowgroup");
65
81
  }
66
82
  };
67
- customElements.get("px-tbody") || customElements.define("px-tbody", m);
83
+ customElements.get("px-tbody") || customElements.define("px-tbody", g);
68
84
  //#endregion
69
85
  //#region src/td.css?inline
70
- var h = ":host{vertical-align:middle;line-height:var(--px-line-height-ratio-l);border-bottom:var(--px-size-border-m) solid var(--td-border-color-default,var(--px-color-border-main-default));display:table-cell}.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-line-height-ratio-l);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)}.td ::slotted(*){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}@media screen and (width>=48rem){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot=description]){font-size:var(--px-text-size-body-s-tablet)}.td ::slotted(*){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.td{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.td ::slotted([slot=description]){font-size:var(--px-text-size-body-s-laptop)}.td ::slotted(*){font-size:var(--px-text-size-body-m-laptop)}}", g = new CSSStyleSheet();
71
- g.replaceSync(h);
72
- var _ = class extends HTMLElement {
86
+ var _ = ":host{vertical-align:middle;line-height:var(--px-line-height-ratio-l);border-bottom:var(--px-size-border-m) solid var(--td-border-color-default,var(--px-color-border-main-default));display:table-cell}.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-line-height-ratio-l);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)}.td ::slotted(*){font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}@media screen and (width>=48rem){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot=description]){font-size:var(--px-text-size-body-s-tablet)}.td ::slotted(*){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.td{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.td ::slotted([slot=description]){font-size:var(--px-text-size-body-s-laptop)}.td ::slotted(*){font-size:var(--px-text-size-body-m-laptop)}}", v = new CSSStyleSheet();
87
+ v.replaceSync(_);
88
+ var y = class n extends HTMLElement {
89
+ static {
90
+ this.template = e("<div class=\"td\"><px-hstack gap=\"xs\" align-items=\"center\"><slot name=\"icon\"></slot><px-vstack gap=\"none\" align-items=\"flex-start\"><px-hstack gap=\"2xs\" align-items=\"center\"><slot></slot><slot name=\"info\"></slot></px-hstack><slot name=\"description\"></slot></px-vstack></px-hstack></div>");
91
+ }
73
92
  constructor() {
74
- super(), this.template = () => "\n <div class=\"td\">\n <px-hstack gap=\"xs\" align-items=\"center\">\n <slot name=\"icon\"></slot>\n <px-vstack gap=\"none\" align-items=\"flex-start\">\n <px-hstack gap=\"2xs\" align-items=\"center\">\n <slot></slot>\n <slot name=\"info\"></slot>\n </px-hstack>\n <slot name=\"description\"></slot>\n </px-vstack>\n </px-hstack>\n </div>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [g];
93
+ super(), this.attachShadow({ mode: "open" }), t(this.shadowRoot, n.template), this.shadowRoot.adoptedStyleSheets = [v];
75
94
  }
76
95
  connectedCallback() {
77
96
  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");
@@ -81,6 +100,6 @@ var _ = class extends HTMLElement {
81
100
  t && (t.setAttribute("size", "xs"), t.setAttribute("color", "brand"));
82
101
  }
83
102
  };
84
- customElements.get("px-td") || customElements.define("px-td", _);
103
+ customElements.get("px-td") || customElements.define("px-td", y);
85
104
  //#endregion
86
- export { n as Table, m as Tbody, _ as Td, d as Th, a as Thead, c as Tr };
105
+ export { i as Table, g as Tbody, y as Td, p as Th, s as Thead, u as Tr };
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-table",
4
- "version": "1.4.17-alpha.6",
4
+ "version": "1.4.17-alpha.8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -13,10 +13,7 @@
13
13
  "attributes": [],
14
14
  "events": [],
15
15
  "js": {
16
- "properties": [
17
- { "name": "innerHTML" },
18
- { "name": "adoptedStyleSheets", "type": "array" }
19
- ],
16
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
20
17
  "events": []
21
18
  }
22
19
  },
@@ -27,10 +24,7 @@
27
24
  "attributes": [],
28
25
  "events": [],
29
26
  "js": {
30
- "properties": [
31
- { "name": "innerHTML" },
32
- { "name": "adoptedStyleSheets", "type": "array" }
33
- ],
27
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
34
28
  "events": []
35
29
  }
36
30
  },
@@ -41,10 +35,7 @@
41
35
  "attributes": [],
42
36
  "events": [],
43
37
  "js": {
44
- "properties": [
45
- { "name": "innerHTML" },
46
- { "name": "adoptedStyleSheets", "type": "array" }
47
- ],
38
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
48
39
  "events": []
49
40
  }
50
41
  },
@@ -55,10 +46,7 @@
55
46
  "attributes": [],
56
47
  "events": [],
57
48
  "js": {
58
- "properties": [
59
- { "name": "innerHTML" },
60
- { "name": "adoptedStyleSheets", "type": "array" }
61
- ],
49
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
62
50
  "events": []
63
51
  }
64
52
  },
@@ -69,10 +57,7 @@
69
57
  "attributes": [],
70
58
  "events": [],
71
59
  "js": {
72
- "properties": [
73
- { "name": "innerHTML" },
74
- { "name": "adoptedStyleSheets", "type": "array" }
75
- ],
60
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
76
61
  "events": []
77
62
  }
78
63
  },
@@ -83,10 +68,7 @@
83
68
  "attributes": [],
84
69
  "events": [],
85
70
  "js": {
86
- "properties": [
87
- { "name": "innerHTML" },
88
- { "name": "adoptedStyleSheets", "type": "array" }
89
- ],
71
+ "properties": [{ "name": "adoptedStyleSheets", "type": "array" }],
90
72
  "events": []
91
73
  }
92
74
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-table",
3
- "version": "1.4.17-alpha.6",
3
+ "version": "1.4.17-alpha.8",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",