@proximus/lavender-table 1.4.14-beta.3 → 1.4.14
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/index.es.js +110 -84
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,86 +1,112 @@
|
|
|
1
1
|
import "@proximus/lavender-layout";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
const n = ":host{display:table;width:100%}", s = new CSSStyleSheet();
|
|
3
|
+
s.replaceSync(n);
|
|
4
|
+
class p extends HTMLElement {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(), this.template = () => `
|
|
7
|
+
<slot></slot>
|
|
8
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [s];
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
this.style.display = "table", this.setAttribute("role", "table");
|
|
12
|
+
}
|
|
13
|
+
}
|
|
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
|
+
constructor() {
|
|
19
|
+
super(), this.template = () => `
|
|
20
|
+
<slot></slot>
|
|
21
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
|
|
22
|
+
}
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
this.style.display = "table-header-group", this.setAttribute("role", "rowgroup");
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
customElements.get("px-thead") || customElements.define("px-thead", h);
|
|
28
|
+
const m = ":host{display:table-row}", a = new CSSStyleSheet();
|
|
29
|
+
a.replaceSync(m);
|
|
30
|
+
class x extends HTMLElement {
|
|
31
|
+
constructor() {
|
|
32
|
+
super(), this.template = () => `
|
|
33
|
+
<slot></slot>
|
|
34
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [a];
|
|
35
|
+
}
|
|
36
|
+
connectedCallback() {
|
|
37
|
+
this.style.display = "table-row", this.setAttribute("role", "row");
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
customElements.get("px-tr") || customElements.define("px-tr", x);
|
|
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-line-height-ratio-l);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 screen and (min-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)}}@media screen and (min-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)}}', i = new CSSStyleSheet();
|
|
42
|
+
i.replaceSync(b);
|
|
43
|
+
class y extends HTMLElement {
|
|
44
|
+
constructor() {
|
|
45
|
+
super(), this.template = () => `
|
|
46
|
+
<div class="th">
|
|
47
|
+
<px-vstack gap="none">
|
|
48
|
+
<px-hstack gap="2xs" align-items="center">
|
|
49
|
+
<slot></slot>
|
|
50
|
+
<slot name="info"></slot>
|
|
51
|
+
</px-hstack>
|
|
52
|
+
<slot name="description"></slot>
|
|
53
|
+
</px-vstack>
|
|
54
|
+
</div>
|
|
55
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
|
|
56
|
+
}
|
|
57
|
+
connectedCallback() {
|
|
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
|
+
const t = this.querySelector('[slot="info"]');
|
|
60
|
+
t && (t.setAttribute("size", "xs"), t.setAttribute("color", "brand"));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
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)}", d = new CSSStyleSheet();
|
|
65
|
+
d.replaceSync(u);
|
|
66
|
+
class f extends HTMLElement {
|
|
67
|
+
constructor() {
|
|
68
|
+
super(), this.template = () => `
|
|
69
|
+
<slot></slot>
|
|
70
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d];
|
|
71
|
+
}
|
|
72
|
+
connectedCallback() {
|
|
73
|
+
this.style.display = "table-row-group", this.setAttribute("role", "rowgroup");
|
|
74
|
+
}
|
|
75
|
+
}
|
|
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-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)}@media screen and (min-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)}}@media screen and (min-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)}}', r = new CSSStyleSheet();
|
|
78
|
+
r.replaceSync(v);
|
|
79
|
+
class g extends HTMLElement {
|
|
80
|
+
constructor() {
|
|
81
|
+
super(), this.template = () => `
|
|
82
|
+
<div class="td">
|
|
83
|
+
<px-hstack gap="xs" align-items="center">
|
|
84
|
+
<slot name="icon"></slot>
|
|
85
|
+
<px-vstack gap="none" align-items="flex-start">
|
|
86
|
+
<px-hstack gap="2xs" align-items="center">
|
|
87
|
+
<slot></slot>
|
|
88
|
+
<slot name="info"></slot>
|
|
89
|
+
</px-hstack>
|
|
90
|
+
<slot name="description"></slot>
|
|
91
|
+
</px-vstack>
|
|
92
|
+
</px-hstack>
|
|
93
|
+
</div>
|
|
94
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
|
|
95
|
+
}
|
|
96
|
+
connectedCallback() {
|
|
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");
|
|
98
|
+
const t = this.querySelector('[slot="icon"]');
|
|
99
|
+
t && (t.setAttribute("size", "l"), t.setAttribute("color", "neutral"));
|
|
100
|
+
const o = this.querySelector('[slot="info"]');
|
|
101
|
+
o && (o.setAttribute("size", "xs"), o.setAttribute("color", "brand"));
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
customElements.get("px-td") || customElements.define("px-td", g);
|
|
105
|
+
export {
|
|
106
|
+
p as Table,
|
|
107
|
+
f as Tbody,
|
|
108
|
+
g as Td,
|
|
109
|
+
y as Th,
|
|
110
|
+
h as Thead,
|
|
111
|
+
x as Tr
|
|
12
112
|
};
|
|
13
|
-
customElements.get("px-table") || customElements.define("px-table", n);
|
|
14
|
-
//#endregion
|
|
15
|
-
//#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 {
|
|
19
|
-
constructor() {
|
|
20
|
-
super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
|
|
21
|
-
}
|
|
22
|
-
connectedCallback() {
|
|
23
|
-
this.style.display = "table-header-group", this.setAttribute("role", "rowgroup");
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
customElements.get("px-thead") || customElements.define("px-thead", a);
|
|
27
|
-
//#endregion
|
|
28
|
-
//#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 {
|
|
32
|
-
constructor() {
|
|
33
|
-
super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [s];
|
|
34
|
-
}
|
|
35
|
-
connectedCallback() {
|
|
36
|
-
this.style.display = "table-row", this.setAttribute("role", "row");
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
customElements.get("px-tr") || customElements.define("px-tr", c);
|
|
40
|
-
//#endregion
|
|
41
|
-
//#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 {
|
|
45
|
-
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];
|
|
47
|
-
}
|
|
48
|
-
connectedCallback() {
|
|
49
|
-
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");
|
|
50
|
-
let e = this.querySelector("[slot=\"info\"]");
|
|
51
|
-
e && (e.setAttribute("size", "xs"), e.setAttribute("color", "brand"));
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
customElements.get("px-th") || customElements.define("px-th", d);
|
|
55
|
-
//#endregion
|
|
56
|
-
//#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 {
|
|
60
|
-
constructor() {
|
|
61
|
-
super(), this.template = () => "\n <slot></slot>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [p];
|
|
62
|
-
}
|
|
63
|
-
connectedCallback() {
|
|
64
|
-
this.style.display = "table-row-group", this.setAttribute("role", "rowgroup");
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
customElements.get("px-tbody") || customElements.define("px-tbody", m);
|
|
68
|
-
//#endregion
|
|
69
|
-
//#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 {
|
|
73
|
-
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];
|
|
75
|
-
}
|
|
76
|
-
connectedCallback() {
|
|
77
|
-
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");
|
|
78
|
-
let e = this.querySelector("[slot=\"icon\"]");
|
|
79
|
-
e && (e.setAttribute("size", "l"), e.setAttribute("color", "neutral"));
|
|
80
|
-
let t = this.querySelector("[slot=\"info\"]");
|
|
81
|
-
t && (t.setAttribute("size", "xs"), t.setAttribute("color", "brand"));
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
customElements.get("px-td") || customElements.define("px-td", _);
|
|
85
|
-
//#endregion
|
|
86
|
-
export { n as Table, m as Tbody, _ as Td, d as Th, a as Thead, c as Tr };
|