@proximus/lavender-table 1.4.16-beta.3 → 1.4.16-beta.5
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.
- package/dist/Table.d.ts +1 -1
- package/dist/Tbody.d.ts +1 -1
- package/dist/Td.d.ts +1 -1
- package/dist/Th.d.ts +1 -1
- package/dist/Thead.d.ts +1 -1
- package/dist/Tr.d.ts +1 -1
- package/dist/custom-elements.json +18 -30
- package/dist/index.es.js +50 -31
- package/dist/web-types.json +7 -25
- package/package.json +1 -1
package/dist/Table.d.ts
CHANGED
package/dist/Tbody.d.ts
CHANGED
package/dist/Td.d.ts
CHANGED
package/dist/Th.d.ts
CHANGED
package/dist/Thead.d.ts
CHANGED
package/dist/Tr.d.ts
CHANGED
|
@@ -14,11 +14,9 @@
|
|
|
14
14
|
{
|
|
15
15
|
"kind": "field",
|
|
16
16
|
"name": "template",
|
|
17
|
-
"privacy": "
|
|
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": "
|
|
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": "
|
|
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": "
|
|
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": "
|
|
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": "
|
|
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
|
|
4
|
-
|
|
5
|
-
var
|
|
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.
|
|
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",
|
|
17
|
+
customElements.get("px-table") || customElements.define("px-table", i);
|
|
14
18
|
//#endregion
|
|
15
19
|
//#region src/thead.css?inline
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
var
|
|
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.
|
|
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",
|
|
33
|
+
customElements.get("px-thead") || customElements.define("px-thead", s);
|
|
27
34
|
//#endregion
|
|
28
35
|
//#region src/tr.css?inline
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
var
|
|
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.
|
|
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",
|
|
49
|
+
customElements.get("px-tr") || customElements.define("px-tr", u);
|
|
40
50
|
//#endregion
|
|
41
51
|
//#region src/th.css?inline
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
var
|
|
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.
|
|
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",
|
|
67
|
+
customElements.get("px-th") || customElements.define("px-th", p);
|
|
55
68
|
//#endregion
|
|
56
69
|
//#region src/tbody.css?inline
|
|
57
|
-
var
|
|
58
|
-
|
|
59
|
-
var
|
|
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.
|
|
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",
|
|
83
|
+
customElements.get("px-tbody") || customElements.define("px-tbody", g);
|
|
68
84
|
//#endregion
|
|
69
85
|
//#region src/td.css?inline
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
var
|
|
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.
|
|
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 {
|
|
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.16-beta.
|
|
4
|
+
"version": "1.4.16-beta.5",
|
|
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
|
}
|