@luzmo/lucero 2.4.2 → 2.5.1
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/components/action-button/action-button.d.ts +3 -2
- package/components/action-button/index.cjs +1 -1
- package/components/action-button/index.js +1 -1
- package/components/action-button-B4_uvHiN.cjs +22 -0
- package/components/action-button-DU95RNNi.js +138 -0
- package/components/action-menu/action-menu.d.ts +16 -1
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.d.ts +1 -0
- package/components/action-menu/index.js +1 -1
- package/components/{action-menu-C0sHNsjG.js → action-menu-B6nNYwlL.js} +40 -22
- package/components/action-menu-C_vyFNJt.cjs +58 -0
- package/components/badge/index.cjs +1 -1
- package/components/badge/index.js +1 -1
- package/components/badge-Bp-1d70q.js +96 -0
- package/components/badge-CNeUkS4b.cjs +23 -0
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +1 -1
- package/components/button-B1V_2tHk.cjs +20 -0
- package/components/button-QXavBh1X.js +126 -0
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/{calendar-D1UtHvpY.js → calendar-BNGwCJsG.js} +1 -1
- package/components/{calendar-pQxEWdYC.cjs → calendar-CLGqcox8.cjs} +1 -1
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +1 -1
- package/components/{checkbox-BEjvkjfc.js → checkbox-CydI9yXG.js} +1 -1
- package/components/{checkbox-ClVrkeLp.cjs → checkbox-JCvBro0K.cjs} +1 -1
- package/components/date-range-picker/index.cjs +1 -1
- package/components/date-range-picker/index.js +1 -1
- package/components/{date-range-picker-DKVmGpUC.js → date-range-picker-5SDPe2fQ.js} +1 -1
- package/components/{date-range-picker-D149LIGC.cjs → date-range-picker-CLfEEYkE.cjs} +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/{date-time-picker-CRpvRk9T.cjs → date-time-picker-DXTksnPd.cjs} +1 -1
- package/components/{date-time-picker-6c19YzwF.js → date-time-picker-s3xujamC.js} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +23 -21
- package/components/match-media-B_0cVVtk.cjs +18 -0
- package/components/match-media-C5X2OZiD.js +34 -0
- package/components/notice/index.cjs +1 -1
- package/components/notice/index.js +1 -1
- package/components/{notice-CsWaqcq3.cjs → notice-CQFyo6OE.cjs} +1 -1
- package/components/{notice-N0-lxEf_.js → notice-CQI5kFRd.js} +1 -1
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +1 -1
- package/components/picker-C1tD-4ac.cjs +124 -0
- package/components/{picker-D0fMBZLb.js → picker-Czkf6auL.js} +7 -6
- package/components/progress-steps/index.cjs +1 -1
- package/components/progress-steps/index.js +1 -1
- package/components/progress-steps/progress-steps.d.ts +0 -5
- package/components/{progress-steps-BvCzsq9Z.js → progress-steps-CXJEaaUg.js} +2 -5
- package/components/{progress-steps-CvdQQwHc.cjs → progress-steps-Dqh53oC1.cjs} +2 -2
- package/components/prompt-box/index.cjs +1 -1
- package/components/prompt-box/index.js +1 -1
- package/components/{prompt-box-Cz_m2wso.js → prompt-box-CA8bsoZP.js} +2 -2
- package/components/{prompt-box-sp9_-Hnx.cjs → prompt-box-DyODaKXV.cjs} +1 -1
- package/components/question-box/index.cjs +1 -1
- package/components/question-box/index.js +1 -1
- package/components/{question-box-D7YSi_6c.js → question-box-DSwTpxAW.js} +4 -4
- package/components/{question-box-Bdtsgv1k.cjs → question-box-cBeVshAq.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +1 -1
- package/components/{search-DEjLSJ96.js → search-CFTOvmWA.js} +1 -1
- package/components/{search-PxJEuwHt.cjs → search-DJ6KwOam.cjs} +1 -1
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +1 -1
- package/components/{select-BUgHi69P.js → select-B86uAHme.js} +5 -4
- package/components/select-CKMCEJf7.cjs +158 -0
- package/components/status-light/index.cjs +1 -1
- package/components/status-light/index.js +1 -1
- package/components/{status-light-DwUnjE3t.js → status-light-B1T3aGJs.js} +1 -1
- package/components/status-light-COApWq-B.cjs +21 -0
- package/components/strategies-Bb7zEjrU.cjs +18 -0
- package/components/{strategies-Cl59wdNZ.js → strategies-COS7mShJ.js} +11 -24
- package/components/table/controllers/table-announcer.d.ts +12 -0
- package/components/table/controllers/table-column-resize.d.ts +41 -0
- package/components/table/controllers/table-grid-navigation.d.ts +28 -0
- package/components/table/controllers/table-layout.d.ts +55 -0
- package/components/table/controllers/table-row-expansion.d.ts +45 -0
- package/components/table/controllers/table-virtualizer.d.ts +42 -0
- package/components/table/index.cjs +18 -0
- package/components/table/index.d.ts +32 -0
- package/components/table/index.js +20 -0
- package/components/table/table-body.d.ts +24 -0
- package/components/table/table-cell.d.ts +27 -0
- package/components/table/table-checkbox-cell.d.ts +41 -0
- package/components/table/table-columns.d.ts +45 -0
- package/components/table/table-disclosure-cell.d.ts +21 -0
- package/components/table/table-head-cell.d.ts +77 -0
- package/components/table/table-head.d.ts +34 -0
- package/components/table/table-model.d.ts +56 -0
- package/components/table/table-row-details.d.ts +29 -0
- package/components/table/table-row.d.ts +64 -0
- package/components/table/table-styles.d.ts +9 -0
- package/components/table/table-templates.d.ts +41 -0
- package/components/table/table.d.ts +197 -0
- package/components/table/types.d.ts +81 -0
- package/components/table-BckZkgeh.js +1601 -0
- package/components/table-Bcq2K21l.cjs +180 -0
- package/components/tabs/index.cjs +1 -1
- package/components/tabs/index.js +1 -1
- package/components/{tabs-DxOD4QNt.cjs → tabs-CMU8X4ho.cjs} +1 -1
- package/components/{tabs-BD_ATrBg.js → tabs-D8U2PxcE.js} +1 -1
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/tags-D8F1o4UZ.cjs +47 -0
- package/components/tags-ZzY_q4TH.js +208 -0
- package/components/template-property-DNDi7lQv.js +47 -0
- package/components/template-property-yhcAmPXk.cjs +18 -0
- package/components/utils.cjs +1 -1
- package/components/utils.js +2 -1
- package/custom-elements.json +1 -1
- package/index.d.ts +1 -0
- package/package.json +9 -1
- package/standalone/accordion.js +1 -1
- package/standalone/action-bar.js +1 -1
- package/standalone/action-button.js +1 -1
- package/standalone/action-menu.js +5 -3
- package/standalone/avatar.js +1 -1
- package/standalone/badge.js +1 -1
- package/standalone/button.js +1 -1
- package/standalone/calendar.js +1 -1
- package/standalone/checkbox.js +1 -1
- package/standalone/chunks/action-button-BJGE_BDu.js +6 -0
- package/standalone/chunks/badge-SNXdnyCZ.js +7 -0
- package/standalone/chunks/button-DHan4NJY.js +4 -0
- package/standalone/chunks/{button-Dykw3TSO.js → button-DTL9dD2r.js} +1 -1
- package/standalone/chunks/{calendar-ZwUYkzVq.js → calendar-BOzu003d.js} +1 -1
- package/standalone/chunks/{checkbox-OQtakoP8.js → checkbox-DQ4wPgG_.js} +2 -2
- package/standalone/chunks/{clear-button-pVGfwye8.js → clear-button-3zpCVxG5.js} +1 -1
- package/standalone/chunks/{close-button-RpPiwBdf.js → close-button-C96dazyi.js} +1 -1
- package/standalone/chunks/{color-field-CrCF4kqZ.js → color-field-BFvUGE4L.js} +1 -1
- package/standalone/chunks/{color-menu-B5UOMYmX.js → color-menu-BIKuitbH.js} +2 -2
- package/standalone/chunks/{icon-Dy6J1QeX.js → icon-BypO7M7G.js} +1 -1
- package/standalone/chunks/luzmo-icons-B-pCv-xg.js +13 -0
- package/standalone/chunks/match-media-BMi7j6hf.js +2 -0
- package/standalone/chunks/{menu-nolJetlp.js → menu-DSMoQt1w.js} +1 -1
- package/standalone/chunks/{number-field-C3DYfl1s.js → number-field-B6BDXkL7.js} +3 -3
- package/standalone/chunks/{options-BjRSj630.js → options-CkmITqgV.js} +5 -5
- package/standalone/chunks/{picker-button-BeXTIgUt.js → picker-button-BZWqDoNQ.js} +1 -1
- package/{components/picker-BliQJlY_.cjs → standalone/chunks/picker-jZI5AjVJ.js} +31 -47
- package/standalone/chunks/{segments-factory-Ch3AAizU.js → segments-factory-Da9ojsLC.js} +1 -1
- package/standalone/chunks/strategies-C-vW4MlK.js +2 -0
- package/standalone/chunks/{swatch-m_4GcO2_.js → swatch-CGR_GWqO.js} +1 -1
- package/standalone/chunks/template-property-Dn64faHO.js +2 -0
- package/standalone/chunks/{text-field-BnZtyodU.js → text-field-4OKvLOXG.js} +1 -1
- package/standalone/chunks/{text-field-BrlDeJsx.js → text-field-C2oROxum.js} +1 -1
- package/standalone/clear-button.js +1 -1
- package/standalone/close-button.js +1 -1
- package/standalone/color-field.js +1 -1
- package/standalone/color-menu.js +1 -1
- package/standalone/color-picker.js +1 -1
- package/standalone/date-range-picker.js +1 -1
- package/standalone/date-time-picker.js +1 -1
- package/standalone/icon.js +1 -1
- package/standalone/manifest.json +25 -22
- package/standalone/menu.js +1 -1
- package/standalone/multi-language-field.js +1 -1
- package/standalone/notice.js +1 -1
- package/standalone/number-field.js +1 -1
- package/standalone/options.js +1 -1
- package/standalone/picker-button.js +1 -1
- package/standalone/picker.js +1 -1
- package/standalone/progress-steps.js +2 -2
- package/standalone/prompt-box.js +9 -9
- package/standalone/question-box.js +1 -1
- package/standalone/search.js +1 -1
- package/standalone/select.js +2 -2
- package/standalone/slider.js +1 -1
- package/standalone/status-light.js +1 -1
- package/standalone/swatch.js +1 -1
- package/standalone/table.js +185 -0
- package/standalone/tabs.js +1 -1
- package/standalone/tags.js +1 -1
- package/standalone/text-field.js +1 -1
- package/standalone/toast.js +1 -1
- package/standalone/utils.js +1 -1
- package/utils/index.d.ts +1 -0
- package/utils/template-property.d.ts +13 -0
- package/components/action-button-BRijXjEz.js +0 -138
- package/components/action-button-CX1uYbQp.cjs +0 -22
- package/components/action-menu-CwzRbF61.cjs +0 -56
- package/components/badge-D2Hjf-Ww.js +0 -96
- package/components/badge-D8pIDEoq.cjs +0 -23
- package/components/button-Bvnidb4x.cjs +0 -20
- package/components/button-DIV_j_U3.js +0 -126
- package/components/select-DsGVB01K.cjs +0 -158
- package/components/status-light-D3hdx8Pd.cjs +0 -21
- package/components/strategies-BwNbUXYS.cjs +0 -18
- package/components/tags-BIpFgOYy.js +0 -208
- package/components/tags-fLCGajv_.cjs +0 -47
- package/standalone/chunks/action-button-BzzPBqt5.js +0 -6
- package/standalone/chunks/badge-DD-tMgzi.js +0 -7
- package/standalone/chunks/button-Bv3v7VbN.js +0 -4
- package/standalone/chunks/luzmo-icons-CJa-aByT.js +0 -13
- package/standalone/chunks/picker-hbMQOkUX.js +0 -108
- package/standalone/chunks/strategies-kad_0dTB.js +0 -2
|
@@ -0,0 +1,1601 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2026 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
import "./tokens.js";
|
|
19
|
+
import { n as e, t } from "./decorate-CkCg3wfh.js";
|
|
20
|
+
import { n } from "./sized-mixin-DzQTebN-.js";
|
|
21
|
+
import { t as r } from "./roving-tabindex-pomAn3z-.js";
|
|
22
|
+
import { r as i, t as a } from "./language-resolution-BaKYDD1a.js";
|
|
23
|
+
import { r as o } from "./match-media-C5X2OZiD.js";
|
|
24
|
+
import "./checkbox-CydI9yXG.js";
|
|
25
|
+
import { n as s } from "./template-property-DNDi7lQv.js";
|
|
26
|
+
import { html as c, nothing as l, unsafeCSS as u } from "lit";
|
|
27
|
+
import { property as d, query as f, state as p } from "lit/decorators.js";
|
|
28
|
+
import { luzmoAngleDown as m, luzmoArrowDown as h, luzmoArrowUp as g, luzmoIcon as _ } from "@luzmo/icons";
|
|
29
|
+
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
30
|
+
import { classMap as y } from "lit/directives/class-map.js";
|
|
31
|
+
import { styleMap as b } from "lit/directives/style-map.js";
|
|
32
|
+
import { repeat as ee } from "lit/directives/repeat.js";
|
|
33
|
+
import { createTable as te, getCoreRowModel as ne, getSortedRowModel as re } from "@tanstack/table-core";
|
|
34
|
+
import { Virtualizer as ie, elementScroll as ae, observeElementOffset as oe, observeElementRect as se } from "@tanstack/virtual-core";
|
|
35
|
+
//#region src/components/table/controllers/table-announcer.ts
|
|
36
|
+
var ce = "data-luzmo-table-announcer", x, S = 0, C = 0, le = () => {
|
|
37
|
+
let e = document.createElement("div");
|
|
38
|
+
return e.setAttribute(ce, ""), e.setAttribute("aria-live", "polite"), e.setAttribute("aria-atomic", "true"), Object.assign(e.style, {
|
|
39
|
+
position: "absolute",
|
|
40
|
+
inlineSize: "1px",
|
|
41
|
+
blockSize: "1px",
|
|
42
|
+
margin: "-1px",
|
|
43
|
+
padding: "0",
|
|
44
|
+
border: "0",
|
|
45
|
+
overflow: "hidden",
|
|
46
|
+
clipPath: "inset(50%)",
|
|
47
|
+
whiteSpace: "nowrap"
|
|
48
|
+
}), e;
|
|
49
|
+
}, ue = class {
|
|
50
|
+
constructor(e) {
|
|
51
|
+
e.addController(this);
|
|
52
|
+
}
|
|
53
|
+
announce(e) {
|
|
54
|
+
if (typeof document > "u" || !C) return;
|
|
55
|
+
x ??= le(), x.isConnected || document.body.append(x);
|
|
56
|
+
let t = x;
|
|
57
|
+
t.textContent = "", cancelAnimationFrame(S), S = requestAnimationFrame(() => {
|
|
58
|
+
t.textContent = e;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
hostConnected() {
|
|
62
|
+
C += 1;
|
|
63
|
+
}
|
|
64
|
+
hostDisconnected() {
|
|
65
|
+
--C, C === 0 && (cancelAnimationFrame(S), x?.remove(), x = void 0);
|
|
66
|
+
}
|
|
67
|
+
}, w = (e) => typeof e == "number" && Number.isFinite(e) ? e : void 0, T = (e) => `luzmo-table-details-${[...e].map((e) => /^[A-Za-z0-9]$/.test(e) ? e : `_${e.codePointAt(0).toString(16)}_`).join("")}`, E = (e) => w(e.minWidth) ?? (e.resizable ? 48 : 0), D = (e) => w(e.maxWidth) ?? 1e4, O = (e, t) => Math.min(D(t), Math.max(E(t), Math.round(e))), de = (e, t) => {
|
|
68
|
+
let n = w(t) ?? w(e.width);
|
|
69
|
+
if (n !== void 0) return `${O(n, e)}px`;
|
|
70
|
+
let r = w(e.minWidth) ?? (e.resizable ? 48 : 0), i = w(e.maxWidth);
|
|
71
|
+
return i === void 0 ? r > 0 ? `minmax(${r}px, 1fr)` : "minmax(0px, 1fr)" : `minmax(${r}px, ${i}px)`;
|
|
72
|
+
}, fe = (e, t, n) => {
|
|
73
|
+
let r = [];
|
|
74
|
+
n.selects && r.push("var(--table-checkbox-cell-inline-size)"), n.expandable && r.push("var(--table-disclosure-cell-inline-size)");
|
|
75
|
+
for (let n of e) r.push(de(n, w(t[n.id])));
|
|
76
|
+
return r.join(" ");
|
|
77
|
+
}, pe = (e, t) => {
|
|
78
|
+
let n = w(t) ?? w(e.width);
|
|
79
|
+
return n === void 0 ? w(e.minWidth) ?? (e.resizable ? 48 : 0) : O(n, e);
|
|
80
|
+
}, me = (e, t, n) => {
|
|
81
|
+
let r = [];
|
|
82
|
+
n.selects && r.push("var(--table-checkbox-cell-inline-size)"), n.expandable && r.push("var(--table-disclosure-cell-inline-size)");
|
|
83
|
+
let i = e.reduce((e, n) => e + pe(n, w(t[n.id])), 0);
|
|
84
|
+
return r.push(`${i}px`), `calc(${r.join(" + ")})`;
|
|
85
|
+
}, he = (e) => ({
|
|
86
|
+
id: e.id,
|
|
87
|
+
header: typeof e.header == "string" ? e.header : e.id,
|
|
88
|
+
width: w(e.width),
|
|
89
|
+
minWidth: w(e.minWidth),
|
|
90
|
+
maxWidth: w(e.maxWidth),
|
|
91
|
+
resizable: e.resizable !== !1,
|
|
92
|
+
lineClamp: w(e.lineClamp)
|
|
93
|
+
}), ge = (e, t) => {
|
|
94
|
+
let n = e === "PageDown" || e === "PageUp";
|
|
95
|
+
switch (e) {
|
|
96
|
+
case "ArrowRight":
|
|
97
|
+
case "PageDown": return {
|
|
98
|
+
action: t ? "increase" : "decrease",
|
|
99
|
+
amount: n ? 64 : 16
|
|
100
|
+
};
|
|
101
|
+
case "ArrowLeft":
|
|
102
|
+
case "PageUp": return {
|
|
103
|
+
action: t ? "decrease" : "increase",
|
|
104
|
+
amount: n ? 64 : 16
|
|
105
|
+
};
|
|
106
|
+
case "Home": return {
|
|
107
|
+
action: "min",
|
|
108
|
+
amount: 0
|
|
109
|
+
};
|
|
110
|
+
case "End": return {
|
|
111
|
+
action: "max",
|
|
112
|
+
amount: 0
|
|
113
|
+
};
|
|
114
|
+
default: return;
|
|
115
|
+
}
|
|
116
|
+
}, _e = (e, t, n) => t.action === "min" ? E(n) : t.action === "max" ? D(n) : O(e + (t.action === "increase" ? 1 : -1) * t.amount, n), k = {
|
|
117
|
+
selectAll: "Select All",
|
|
118
|
+
selectRow: "Select row {index}",
|
|
119
|
+
sortAscending: "Sorted by {column}, ascending",
|
|
120
|
+
sortDescending: "Sorted by {column}, descending",
|
|
121
|
+
expandRow: "Expand {label}",
|
|
122
|
+
collapseRow: "Collapse {label}",
|
|
123
|
+
resizeColumn: "Resize {column}",
|
|
124
|
+
columnWidth: "{column}, {width} pixels"
|
|
125
|
+
}, ve = (e) => e.rowType === "information" || e._$rowType$ === 1, ye = (e) => e === "asc" ? "ascending" : e === "desc" ? "descending" : "none", be = (e) => e === "asc" ? "desc" : "asc", A = (e = {}, t) => {
|
|
126
|
+
let n = Object.fromEntries(Object.entries(e).filter(([, e]) => typeof e == "string" && e !== "")), r = {
|
|
127
|
+
...k,
|
|
128
|
+
...n
|
|
129
|
+
};
|
|
130
|
+
return t && (r.selectAll = t), r;
|
|
131
|
+
}, j = (e, t) => {
|
|
132
|
+
let n = e;
|
|
133
|
+
for (let [e, r] of Object.entries(t)) n = n.replaceAll(`{${e}}`, r);
|
|
134
|
+
return n;
|
|
135
|
+
}, xe = (e, t) => e.map((e, n) => ({
|
|
136
|
+
item: e,
|
|
137
|
+
value: t ? t(e, n) : String(n),
|
|
138
|
+
index: n,
|
|
139
|
+
information: ve(e)
|
|
140
|
+
})), Se = (e, t) => typeof e == "function" ? e(t) : e, Ce = class {
|
|
141
|
+
constructor() {
|
|
142
|
+
this.records = [], this.sorting = [], this.manualSorting = !1, this.rowSelection = {}, this.selectedOrder = [], this.columns = [], this.table = te({
|
|
143
|
+
data: [],
|
|
144
|
+
columns: [],
|
|
145
|
+
state: {},
|
|
146
|
+
onStateChange: () => {},
|
|
147
|
+
renderFallbackValue: null,
|
|
148
|
+
getCoreRowModel: ne(),
|
|
149
|
+
getSortedRowModel: re(),
|
|
150
|
+
getRowId: (e) => e.value,
|
|
151
|
+
enableRowSelection: (e) => !!this.selects && !e.original.information,
|
|
152
|
+
enableMultiRowSelection: () => this.selects === "multiple",
|
|
153
|
+
onRowSelectionChange: (e) => {
|
|
154
|
+
this.pendingSelection = Se(e, this.rowSelection);
|
|
155
|
+
}
|
|
156
|
+
}), this.compare = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : ((!this.collator || this.collatorLocale !== this.locale) && (this.collatorLocale = this.locale, this.collator = new Intl.Collator(this.locale, {
|
|
157
|
+
numeric: !0,
|
|
158
|
+
sensitivity: "base"
|
|
159
|
+
})), this.collator.compare(String(e), String(t)));
|
|
160
|
+
}
|
|
161
|
+
setRecords(e) {
|
|
162
|
+
this.records = e;
|
|
163
|
+
}
|
|
164
|
+
setSelected(e) {
|
|
165
|
+
this.selectedOrder = [...e], this.rowSelection = Object.fromEntries(e.map((e) => [e, !0]));
|
|
166
|
+
}
|
|
167
|
+
setSorting(e, t = !1) {
|
|
168
|
+
if (this.manualSorting = t, !e) {
|
|
169
|
+
this.sorting = [];
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
this.columns.some((t) => t.id === e.key) || (this.columns = [...this.columns, this.createSortColumn(e.key)]), this.sorting = [{
|
|
173
|
+
id: e.key,
|
|
174
|
+
desc: e.direction === "desc"
|
|
175
|
+
}];
|
|
176
|
+
}
|
|
177
|
+
get rows() {
|
|
178
|
+
this.sync();
|
|
179
|
+
let e = this.table.getRowModel().rows.map((e) => e.original).filter((e) => !e.information);
|
|
180
|
+
return e.length === this.records.length ? e : this.records.map((t) => t.information ? t : e.shift());
|
|
181
|
+
}
|
|
182
|
+
isSelected(e) {
|
|
183
|
+
return !!this.rowSelection[e];
|
|
184
|
+
}
|
|
185
|
+
get allSelected() {
|
|
186
|
+
let e = this.selectableRecords;
|
|
187
|
+
return e.length > 0 && e.every((e) => this.isSelected(e.value));
|
|
188
|
+
}
|
|
189
|
+
get someSelected() {
|
|
190
|
+
return this.selectableRecords.some((e) => this.isSelected(e.value));
|
|
191
|
+
}
|
|
192
|
+
toggle(e) {
|
|
193
|
+
this.sync();
|
|
194
|
+
let t = this.findRow(e);
|
|
195
|
+
if (t?.getCanSelect()) return this.capture(() => t.toggleSelected());
|
|
196
|
+
}
|
|
197
|
+
toggleAll(e) {
|
|
198
|
+
return this.sync(), this.capture(() => this.table.toggleAllRowsSelected(e));
|
|
199
|
+
}
|
|
200
|
+
get selectableRecords() {
|
|
201
|
+
return this.selects ? this.records.filter((e) => !e.information) : [];
|
|
202
|
+
}
|
|
203
|
+
findRow(e) {
|
|
204
|
+
return this.table.getCoreRowModel().rows.find((t) => t.original.value === e);
|
|
205
|
+
}
|
|
206
|
+
capture(e) {
|
|
207
|
+
this.pendingSelection = void 0, e();
|
|
208
|
+
let t = this.pendingSelection ?? this.rowSelection;
|
|
209
|
+
this.pendingSelection = void 0;
|
|
210
|
+
let n = this.selectedOrder.filter((e) => t[e]), r = [.../* @__PURE__ */ new Set([...this.records.map((e) => e.value), ...Object.keys(t)])].filter((e) => t[e] && !n.includes(e));
|
|
211
|
+
return [...n, ...r];
|
|
212
|
+
}
|
|
213
|
+
createSortColumn(e) {
|
|
214
|
+
return {
|
|
215
|
+
id: e,
|
|
216
|
+
accessorFn: (t) => t.item[e],
|
|
217
|
+
sortUndefined: "last",
|
|
218
|
+
sortingFn: (e, t, n) => this.compare(e.getValue(n), t.getValue(n))
|
|
219
|
+
};
|
|
220
|
+
}
|
|
221
|
+
sync() {
|
|
222
|
+
this.table.setOptions((e) => ({
|
|
223
|
+
...e,
|
|
224
|
+
data: this.records,
|
|
225
|
+
columns: this.columns,
|
|
226
|
+
manualSorting: this.manualSorting,
|
|
227
|
+
state: {
|
|
228
|
+
...this.table.initialState,
|
|
229
|
+
sorting: this.sorting,
|
|
230
|
+
rowSelection: this.rowSelection
|
|
231
|
+
}
|
|
232
|
+
}));
|
|
233
|
+
}
|
|
234
|
+
}, we = /* @__PURE__ */ new Set([
|
|
235
|
+
"luzmo-table-cell",
|
|
236
|
+
"luzmo-table-head-cell",
|
|
237
|
+
"luzmo-table-checkbox-cell"
|
|
238
|
+
]), M = (e) => e.find((e) => e instanceof HTMLElement && e.classList.contains("resize-handle")), Te = class {
|
|
239
|
+
constructor(e, t) {
|
|
240
|
+
this.handlePointerDown = (e) => {
|
|
241
|
+
if (!this.options.owns(e) || e.button !== 0) return;
|
|
242
|
+
let t = e.composedPath(), n = M(t), r = this.cellFromPath(t);
|
|
243
|
+
if (!n || r?.localName !== "luzmo-table-head-cell" || !r.resizable) return;
|
|
244
|
+
let i = r;
|
|
245
|
+
e.preventDefault();
|
|
246
|
+
let a = this.options.headCells().indexOf(i), o = i.toLayout(Math.max(a, 0));
|
|
247
|
+
this.drag = {
|
|
248
|
+
id: o.id,
|
|
249
|
+
pointerId: e.pointerId,
|
|
250
|
+
startWidth: i.getBoundingClientRect().width,
|
|
251
|
+
startX: e.clientX
|
|
252
|
+
};
|
|
253
|
+
try {
|
|
254
|
+
n.setPointerCapture(e.pointerId);
|
|
255
|
+
} catch {}
|
|
256
|
+
}, this.handlePointerMove = (e) => {
|
|
257
|
+
let t = this.drag;
|
|
258
|
+
if (!t || e.pointerId !== t.pointerId) return;
|
|
259
|
+
let n = this.options.layouts().find((e) => e.id === t.id);
|
|
260
|
+
if (!n) return;
|
|
261
|
+
let r = (e.clientX - t.startX) * (this.options.isLTR() ? 1 : -1);
|
|
262
|
+
this.setColumnWidth(n, t.startWidth + r, !1);
|
|
263
|
+
}, this.handlePointerUp = (e) => {
|
|
264
|
+
let t = this.drag;
|
|
265
|
+
if (!t || e.pointerId !== t.pointerId) return;
|
|
266
|
+
let n = this.options.layouts().find((e) => e.id === t.id);
|
|
267
|
+
if (this.drag = void 0, !n) return;
|
|
268
|
+
let r = (e.clientX - t.startX) * (this.options.isLTR() ? 1 : -1);
|
|
269
|
+
this.setColumnWidth(n, t.startWidth + r, !0);
|
|
270
|
+
}, this.host = e, this.options = t, e.addController(this);
|
|
271
|
+
}
|
|
272
|
+
hostConnected() {
|
|
273
|
+
this.host.addEventListener("pointerdown", this.handlePointerDown), this.host.addEventListener("pointermove", this.handlePointerMove), this.host.addEventListener("pointerup", this.handlePointerUp), this.host.addEventListener("pointercancel", this.handlePointerUp);
|
|
274
|
+
}
|
|
275
|
+
hostDisconnected() {
|
|
276
|
+
this.host.removeEventListener("pointerdown", this.handlePointerDown), this.host.removeEventListener("pointermove", this.handlePointerMove), this.host.removeEventListener("pointerup", this.handlePointerUp), this.host.removeEventListener("pointercancel", this.handlePointerUp), this.drag = void 0;
|
|
277
|
+
}
|
|
278
|
+
handleKeydown(e) {
|
|
279
|
+
if (e.defaultPrevented || !this.options.owns(e)) return;
|
|
280
|
+
let t = e.composedPath();
|
|
281
|
+
if (!M(t)) return;
|
|
282
|
+
let n = ge(e.code, this.options.isLTR()), r = this.cellFromPath(t);
|
|
283
|
+
n && r?.localName === "luzmo-table-head-cell" && (e.preventDefault(), e.stopPropagation(), this.resizeColumn(r, n));
|
|
284
|
+
}
|
|
285
|
+
resizeColumn(e, t) {
|
|
286
|
+
let n = this.options.headCells().indexOf(e), r = e.toLayout(Math.max(n, 0)), i = e.currentWidth || Math.round(e.getBoundingClientRect().width);
|
|
287
|
+
this.setColumnWidth(r, _e(i, t, r), !0);
|
|
288
|
+
}
|
|
289
|
+
setColumnWidth(e, t, n) {
|
|
290
|
+
let r = O(t, e), i = {
|
|
291
|
+
...this.host.columnWidths,
|
|
292
|
+
[e.id]: r
|
|
293
|
+
};
|
|
294
|
+
this.host.columnWidths = i;
|
|
295
|
+
let a = this.options.headCells().find((t, n) => t.toLayout(n).id === e.id);
|
|
296
|
+
if (a && (a.currentWidth = r), !n) return;
|
|
297
|
+
let o = A(this.options.labels(), this.options.selectAllLabel());
|
|
298
|
+
this.host.dispatchEvent(new CustomEvent("luzmo-column-resized", {
|
|
299
|
+
bubbles: !0,
|
|
300
|
+
composed: !0,
|
|
301
|
+
detail: {
|
|
302
|
+
columnId: e.id,
|
|
303
|
+
width: r,
|
|
304
|
+
columnWidths: { ...i }
|
|
305
|
+
}
|
|
306
|
+
})), this.options.announce(j(o.columnWidth, {
|
|
307
|
+
column: e.header,
|
|
308
|
+
width: this.formatWidth(r)
|
|
309
|
+
}));
|
|
310
|
+
}
|
|
311
|
+
formatWidth(e) {
|
|
312
|
+
let t = this.options.language();
|
|
313
|
+
return (!this.widthFormatter || this.formatterLanguage !== t) && (this.formatterLanguage = t, this.widthFormatter = new Intl.NumberFormat(t)), this.widthFormatter.format(e);
|
|
314
|
+
}
|
|
315
|
+
cellFromPath(e) {
|
|
316
|
+
return e.find((e) => e instanceof HTMLElement && we.has(e.localName));
|
|
317
|
+
}
|
|
318
|
+
}, Ee = "textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], input:not([type=\"checkbox\"]):not([type=\"radio\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"])", De = class extends r {
|
|
319
|
+
constructor(e, { rows: t, isLTR: n, ...r }) {
|
|
320
|
+
super(e, r), this.handleFocusout = (e) => {
|
|
321
|
+
let t = e.relatedTarget;
|
|
322
|
+
t instanceof HTMLElement && (this.elements.includes(t) || this.elements.some((e) => e.contains(t))) || queueMicrotask(() => {
|
|
323
|
+
this.activeGridCell() || this.hostNoLongerContainsFocus();
|
|
324
|
+
});
|
|
325
|
+
}, this.handleKeydown = (e) => {
|
|
326
|
+
if (e.defaultPrevented || !this.acceptsEventCode(e.code) || !this.owns(e)) return;
|
|
327
|
+
let t = e.composedPath()[0];
|
|
328
|
+
if (t instanceof HTMLElement && t.matches(Ee)) return;
|
|
329
|
+
let n = this.cellFromPath(e.composedPath());
|
|
330
|
+
if (!n) return;
|
|
331
|
+
let r = this.navigationTarget(n, e);
|
|
332
|
+
r && (e.preventDefault(), this.focusElement(r));
|
|
333
|
+
}, this.rows = t, this.isLTR = n;
|
|
334
|
+
}
|
|
335
|
+
acceptsEventCode(e) {
|
|
336
|
+
return e === "ArrowLeft" || e === "ArrowRight" || e === "ArrowUp" || e === "ArrowDown" || e === "Home" || e === "End";
|
|
337
|
+
}
|
|
338
|
+
focusElement(e, t) {
|
|
339
|
+
let n = this.elements.indexOf(e);
|
|
340
|
+
if (n === -1) return;
|
|
341
|
+
let r = this.elements[this.currentIndex];
|
|
342
|
+
r && r !== e && (r.tabIndex = -1), this.currentIndex = n, this.focus(t);
|
|
343
|
+
}
|
|
344
|
+
owns(e) {
|
|
345
|
+
for (let t of e.composedPath()) if (t instanceof HTMLElement && t.localName === "luzmo-table") return t === this.host;
|
|
346
|
+
return !0;
|
|
347
|
+
}
|
|
348
|
+
cellFromPath(e) {
|
|
349
|
+
let t = new Set(this.rows().flat());
|
|
350
|
+
return e.find((e) => e instanceof HTMLElement && t.has(e));
|
|
351
|
+
}
|
|
352
|
+
activeGridCell() {
|
|
353
|
+
let e = this.host.ownerDocument.activeElement;
|
|
354
|
+
for (; e instanceof HTMLElement && e.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
|
|
355
|
+
return e instanceof HTMLElement && this.rows().flat().includes(e) ? e : void 0;
|
|
356
|
+
}
|
|
357
|
+
navigationTarget(e, t) {
|
|
358
|
+
let n = this.rows(), r = n.findIndex((t) => t.includes(e));
|
|
359
|
+
if (r === -1) return;
|
|
360
|
+
let i = n[r].indexOf(e), a = n.length - 1, o = (e, t) => {
|
|
361
|
+
let r = n[Math.min(Math.max(e, 0), a)];
|
|
362
|
+
return r[Math.min(Math.max(t, 0), r.length - 1)];
|
|
363
|
+
}, s = (t) => {
|
|
364
|
+
let i = n[Math.min(Math.max(t, 0), a)];
|
|
365
|
+
return this.cellForKey(i, this.columnKey(n[r], e));
|
|
366
|
+
}, c = this.isLTR() ? 1 : -1, l = t.ctrlKey || t.metaKey;
|
|
367
|
+
switch (t.code) {
|
|
368
|
+
case "ArrowRight": return o(r, i + c);
|
|
369
|
+
case "ArrowLeft": return o(r, i - c);
|
|
370
|
+
case "ArrowDown": return s(r + 1);
|
|
371
|
+
case "ArrowUp": return s(r - 1);
|
|
372
|
+
case "Home": return o(l ? 0 : r, 0);
|
|
373
|
+
case "End": return l ? o(a, n[a].length - 1) : o(r, n[r].length - 1);
|
|
374
|
+
default: return;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
columnKey(e, t) {
|
|
378
|
+
if (t.classList.contains("resize-handle")) {
|
|
379
|
+
let n = e[e.indexOf(t) - 1];
|
|
380
|
+
return n ? this.columnKey(e, n) : "data:0";
|
|
381
|
+
}
|
|
382
|
+
if (t.localName === "luzmo-table-checkbox-cell") return "select";
|
|
383
|
+
if (t.localName === "luzmo-table-disclosure-cell") return "expand";
|
|
384
|
+
if (t.classList.contains("cell")) return "details";
|
|
385
|
+
let n = e.filter((e) => e.localName === "luzmo-table-cell" || e.localName === "luzmo-table-head-cell");
|
|
386
|
+
return `data:${Math.max(n.indexOf(t), 0)}`;
|
|
387
|
+
}
|
|
388
|
+
cellForKey(e, t) {
|
|
389
|
+
return t === "expand" ? e.find((e) => e.localName === "luzmo-table-disclosure-cell") ?? this.cellForKey(e, "data:0") : t === "details" ? this.cellForKey(e, "data:0") : e.find((n) => !n.classList.contains("resize-handle") && this.columnKey(e, n) === t) ?? e[0];
|
|
390
|
+
}
|
|
391
|
+
}, N = Symbol("table-details-closing"), P = (e) => {
|
|
392
|
+
let t = e.nextElementSibling;
|
|
393
|
+
return t?.localName === "luzmo-table-row-details" ? t : null;
|
|
394
|
+
}, F = (e) => e instanceof HTMLElement, Oe = class {
|
|
395
|
+
constructor(e, t) {
|
|
396
|
+
this.closingDetails = /* @__PURE__ */ new Set(), this.handleDetailsCollapsed = (e) => {
|
|
397
|
+
if (!this.options.owns(e)) return;
|
|
398
|
+
let t = e.target, n = [...this.closingDetails].find((e) => T(e) === t?.id);
|
|
399
|
+
if (!n) return;
|
|
400
|
+
let r = new Set(this.closingDetails);
|
|
401
|
+
r.delete(n), this.closingDetails = r, this.host.requestUpdate(N);
|
|
402
|
+
}, this.host = e, this.options = t, e.addController(this);
|
|
403
|
+
}
|
|
404
|
+
get closing() {
|
|
405
|
+
return this.closingDetails;
|
|
406
|
+
}
|
|
407
|
+
hostConnected() {
|
|
408
|
+
this.host.addEventListener("luzmo-table-details-collapsed", this.handleDetailsCollapsed);
|
|
409
|
+
}
|
|
410
|
+
hostDisconnected() {
|
|
411
|
+
this.host.removeEventListener("luzmo-table-details-collapsed", this.handleDetailsCollapsed);
|
|
412
|
+
}
|
|
413
|
+
clear() {
|
|
414
|
+
this.closingDetails = /* @__PURE__ */ new Set(), this.host.requestUpdate(N);
|
|
415
|
+
}
|
|
416
|
+
toggle(e) {
|
|
417
|
+
if (!e.expandable && !P(e)) return;
|
|
418
|
+
let t = this.isDataMode(), n = t ? e.value : e.value || String(this.declarativeRows().indexOf(e)), r = t ? !this.host.expanded.includes(n) : !e.expanded;
|
|
419
|
+
if (t) {
|
|
420
|
+
let e = this.host.expanded;
|
|
421
|
+
this.setClosing(n, !r), this.host.expanded = r ? [...e, n] : e.filter((e) => e !== n), this.dispatchToggle(n, r) || (this.host.expanded = e, this.setClosing(n, !1));
|
|
422
|
+
return;
|
|
423
|
+
}
|
|
424
|
+
if (e.expanded = r, !this.dispatchToggle(n, r)) {
|
|
425
|
+
e.expanded = !r;
|
|
426
|
+
return;
|
|
427
|
+
}
|
|
428
|
+
let i = P(e);
|
|
429
|
+
i && (i.open = r), e.disclosureLabel = this.expandLabel(n, e.checkboxLabel || e.querySelector(":scope > luzmo-table-cell")?.textContent?.trim() || n, this.declarativeRows().indexOf(e));
|
|
430
|
+
}
|
|
431
|
+
collapseFromPath(e) {
|
|
432
|
+
let t = e.find((e) => F(e) && e.localName === "luzmo-table-row-details"), n = (t?.previousElementSibling?.localName === "luzmo-table-row" ? t.previousElementSibling : void 0) ?? e.find((e) => F(e) && e.localName === "luzmo-table-row");
|
|
433
|
+
if (!n?.expanded) return;
|
|
434
|
+
this.toggle(n);
|
|
435
|
+
let r = n.shadowRoot?.querySelector("luzmo-table-disclosure-cell");
|
|
436
|
+
r && this.options.focusDisclosure(r);
|
|
437
|
+
}
|
|
438
|
+
setClosing(e, t) {
|
|
439
|
+
let n = new Set([...this.closingDetails].filter((t) => t !== e));
|
|
440
|
+
t && n.add(e), this.closingDetails = n, this.host.requestUpdate(N);
|
|
441
|
+
}
|
|
442
|
+
dispatchToggle(e, t) {
|
|
443
|
+
return this.host.dispatchEvent(new CustomEvent("luzmo-table-row-toggle", {
|
|
444
|
+
bubbles: !0,
|
|
445
|
+
composed: !0,
|
|
446
|
+
cancelable: !0,
|
|
447
|
+
detail: {
|
|
448
|
+
value: e,
|
|
449
|
+
expanded: t
|
|
450
|
+
}
|
|
451
|
+
}));
|
|
452
|
+
}
|
|
453
|
+
expandLabel(e, t, n) {
|
|
454
|
+
let r = A(this.host.labels, this.host.selectAllLabel);
|
|
455
|
+
return j(this.host.expanded.includes(e) || this.rowByValue(e)?.expanded ? r.collapseRow : r.expandRow, {
|
|
456
|
+
label: t,
|
|
457
|
+
index: String(n + 1)
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
rowByValue(e) {
|
|
461
|
+
return this.rows().find((t) => t.value === e);
|
|
462
|
+
}
|
|
463
|
+
isDataMode() {
|
|
464
|
+
return Array.isArray(this.host.items);
|
|
465
|
+
}
|
|
466
|
+
declarativeRows() {
|
|
467
|
+
return [...this.host.querySelectorAll(":scope > luzmo-table-body > luzmo-table-row")];
|
|
468
|
+
}
|
|
469
|
+
rows() {
|
|
470
|
+
return this.isDataMode() ? [...this.host.shadowRoot?.querySelectorAll("luzmo-table-row") ?? []] : this.declarativeRows();
|
|
471
|
+
}
|
|
472
|
+
}, I = (e) => e instanceof HTMLElement, ke = class {
|
|
473
|
+
constructor(e, t) {
|
|
474
|
+
this.handleBodyScroll = (e) => {
|
|
475
|
+
this.options.owns(e) && e.composedPath().find((e) => I(e) && e.localName === "luzmo-table-body") && this.host.requestUpdate();
|
|
476
|
+
}, this.host = e, this.options = t, e.addController(this);
|
|
477
|
+
}
|
|
478
|
+
hostConnected() {
|
|
479
|
+
this.host.addEventListener("luzmo-table-body-scroll", this.handleBodyScroll);
|
|
480
|
+
}
|
|
481
|
+
hostDisconnected() {
|
|
482
|
+
this.host.removeEventListener("luzmo-table-body-scroll", this.handleBodyScroll), this.bodyObserver?.disconnect(), this.observedBody = void 0;
|
|
483
|
+
}
|
|
484
|
+
hostUpdated() {
|
|
485
|
+
this.syncHeadScroll(), this.watchBodyScrollbar();
|
|
486
|
+
}
|
|
487
|
+
hasExpansion() {
|
|
488
|
+
return this.isDataMode() ? typeof this.host.renderDetails == "function" : this.declarativeRows().some((e) => e.nextElementSibling?.localName === "luzmo-table-row-details");
|
|
489
|
+
}
|
|
490
|
+
layouts() {
|
|
491
|
+
return this.isDataMode() && !this.slottedHead() ? this.host.columns.map(he) : this.headCells().map((e, t) => e.toLayout(t));
|
|
492
|
+
}
|
|
493
|
+
headCells() {
|
|
494
|
+
return [...this.head()?.querySelectorAll(":scope > luzmo-table-head-cell") ?? []];
|
|
495
|
+
}
|
|
496
|
+
applyGridMetrics() {
|
|
497
|
+
let e = {
|
|
498
|
+
selects: !!this.host.selects,
|
|
499
|
+
expandable: this.hasExpansion()
|
|
500
|
+
}, t = this.layouts();
|
|
501
|
+
this.host.style.setProperty("--table-grid-columns", fe(t, this.host.columnWidths, e) || "none"), this.host.style.setProperty("--table-min-inline-size", me(t, this.host.columnWidths, e));
|
|
502
|
+
}
|
|
503
|
+
syncPresentation() {
|
|
504
|
+
this.syncHead(), this.syncColumns(), this.isDataMode() || this.syncDeclarativeRows();
|
|
505
|
+
}
|
|
506
|
+
syncHeadTabStops() {
|
|
507
|
+
let e = this.head();
|
|
508
|
+
if (!e) return;
|
|
509
|
+
let t = e.shadowRoot?.querySelector("luzmo-table-checkbox-cell");
|
|
510
|
+
t && t.getAttribute("aria-hidden") !== "true" && t.tabIndex !== 0 && (t.tabIndex = 0);
|
|
511
|
+
for (let e of this.headCells()) e.tabIndex !== 0 && (e.tabIndex = 0);
|
|
512
|
+
}
|
|
513
|
+
syncHead() {
|
|
514
|
+
let e = this.body();
|
|
515
|
+
e && this.syncGridColumns(e);
|
|
516
|
+
let t = this.head();
|
|
517
|
+
if (!t) return;
|
|
518
|
+
this.syncGridColumns(t), this.syncHeadScroll(e, t);
|
|
519
|
+
let n = A(this.host.labels, this.host.selectAllLabel), r = this.options.model.allSelected, i = this.options.model.someSelected, a = this.host.selects === "multiple";
|
|
520
|
+
t.selects = this.host.selects, t.checked = a && r, t.indeterminate = a && i && !r, t.selected = i, t.emphasized = this.host.emphasized, t.checkboxLabel = n.selectAll, t.checkboxSize = this.host.size, t.expandable = this.hasExpansion();
|
|
521
|
+
}
|
|
522
|
+
watchBodyScrollbar() {
|
|
523
|
+
let e = this.body();
|
|
524
|
+
!e || e === this.observedBody || (this.bodyObserver?.disconnect(), this.observedBody = e, this.bodyObserver ??= new ResizeObserver(() => {
|
|
525
|
+
this.syncHeadScroll();
|
|
526
|
+
}), this.bodyObserver.observe(e, { box: "content-box" }));
|
|
527
|
+
}
|
|
528
|
+
syncHeadScroll(e = this.body(), t = this.head()) {
|
|
529
|
+
if (!e || !t) return;
|
|
530
|
+
let n = Math.max(0, e.offsetWidth - e.clientWidth), r = e.scrollWidth > e.clientWidth + 1;
|
|
531
|
+
t.style.paddingInlineEnd = n > 0 && !r ? `${n}px` : "", t.style.transform = `translateX(${-e.scrollLeft}px)`;
|
|
532
|
+
}
|
|
533
|
+
syncColumns() {
|
|
534
|
+
let e = this.layouts(), t = A(this.host.labels, this.host.selectAllLabel);
|
|
535
|
+
this.headCells().forEach((n, r) => {
|
|
536
|
+
let i = e[r];
|
|
537
|
+
if (!i) return;
|
|
538
|
+
let a = n.textContent?.trim() || i.header;
|
|
539
|
+
if (n.resizeLabel = j(t.resizeColumn, { column: a }), !n.resizable) return;
|
|
540
|
+
let o = w(this.host.columnWidths[i.id]) ?? i.width, s = Math.round(n.getBoundingClientRect().width), c = o ?? s;
|
|
541
|
+
c > 0 && n.currentWidth !== c && (n.currentWidth = c);
|
|
542
|
+
});
|
|
543
|
+
for (let t of this.rows()) {
|
|
544
|
+
this.syncGridColumns(t);
|
|
545
|
+
let n = P(t);
|
|
546
|
+
n && this.syncGridColumns(n), !t.spanAll && [...t.children].filter((e) => I(e) && e.localName === "luzmo-table-cell").forEach((t, n) => {
|
|
547
|
+
let r = e[n]?.lineClamp;
|
|
548
|
+
t.columnLineClamp !== r && (t.columnLineClamp = r);
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
syncDeclarativeRows() {
|
|
553
|
+
let e = this.host.selects, t = A(this.host.labels, this.host.selectAllLabel), n = this.hasExpansion(), r = this.declarativeRows();
|
|
554
|
+
r.forEach((i, a) => {
|
|
555
|
+
this.syncGridColumns(i);
|
|
556
|
+
let o = i.value || String(a), s = P(i), c = a === r.length - 1;
|
|
557
|
+
i.toggleAttribute("data-last-row", c), s && (this.syncGridColumns(s), s.toggleAttribute("data-last-row", c));
|
|
558
|
+
let l = i.querySelector(":scope > luzmo-table-cell")?.textContent?.trim() || o;
|
|
559
|
+
i.selectable = !!e, i.selectionColumn = !!e, i.selected = !!e && this.options.model.isSelected(o), i.selectsSingle = e === "single", i.emphasized = this.host.emphasized, i.checkboxSize = this.host.size, i.checkboxLabel = l, i.expandable = !!s, i.expansionColumn = n && !s, i.detailsId = s?.id ?? "", i.disclosureLabel = j(i.expanded ? t.collapseRow : t.expandRow, {
|
|
560
|
+
label: l,
|
|
561
|
+
index: String(a + 1)
|
|
562
|
+
}), s && (s.id || (s.id = T(o), i.detailsId = s.id), s.open = i.expanded);
|
|
563
|
+
});
|
|
564
|
+
}
|
|
565
|
+
syncGridColumns(e) {
|
|
566
|
+
for (let t of ["--table-grid-columns", "--table-min-inline-size"]) e.style.setProperty(t, this.host.style.getPropertyValue(t));
|
|
567
|
+
}
|
|
568
|
+
isDataMode() {
|
|
569
|
+
return Array.isArray(this.host.items);
|
|
570
|
+
}
|
|
571
|
+
slottedHead() {
|
|
572
|
+
return this.host.querySelector(":scope > luzmo-table-head");
|
|
573
|
+
}
|
|
574
|
+
head() {
|
|
575
|
+
return this.slottedHead() ?? (this.isDataMode() ? this.host.shadowRoot?.querySelector("luzmo-table-head") ?? null : null);
|
|
576
|
+
}
|
|
577
|
+
body() {
|
|
578
|
+
return this.isDataMode() ? this.host.shadowRoot?.querySelector("luzmo-table-body") ?? null : this.host.querySelector(":scope > luzmo-table-body");
|
|
579
|
+
}
|
|
580
|
+
declarativeRows() {
|
|
581
|
+
return [...this.host.querySelectorAll(":scope > luzmo-table-body > luzmo-table-row")];
|
|
582
|
+
}
|
|
583
|
+
rows() {
|
|
584
|
+
return this.isDataMode() ? [...this.host.shadowRoot?.querySelectorAll("luzmo-table-row") ?? []] : this.declarativeRows();
|
|
585
|
+
}
|
|
586
|
+
}, L = Symbol("table-virtual-range-updated"), Ae = 40, je = 4, R = (e) => e.getBoundingClientRect().height, Me = class {
|
|
587
|
+
constructor(e, t) {
|
|
588
|
+
this.connected = !1, this.keys = [], this.estimatedSize = Ae, this.host = e, this.options = t, e.addController(this);
|
|
589
|
+
}
|
|
590
|
+
get enabled() {
|
|
591
|
+
return !!this.virtualizer;
|
|
592
|
+
}
|
|
593
|
+
set enabled(e) {
|
|
594
|
+
if (e !== this.enabled) {
|
|
595
|
+
if (e) {
|
|
596
|
+
this.virtualizer = new ie(this.createOptions()), this.connected && (this.cleanup = this.virtualizer._didMount());
|
|
597
|
+
return;
|
|
598
|
+
}
|
|
599
|
+
this.cleanup?.(), this.cleanup = void 0, this.virtualizer = void 0, this.range = void 0;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
sync(e) {
|
|
603
|
+
return this.virtualizer ? (e !== this.keys && (this.keys = e, this.virtualizer.setOptions(this.createOptions())), this.virtualizer.getVirtualItems()) : [];
|
|
604
|
+
}
|
|
605
|
+
get totalSize() {
|
|
606
|
+
return this.virtualizer?.getTotalSize() ?? 0;
|
|
607
|
+
}
|
|
608
|
+
scrollToIndex(e) {
|
|
609
|
+
this.virtualizer?.scrollToIndex(e, { align: "start" });
|
|
610
|
+
}
|
|
611
|
+
hostConnected() {
|
|
612
|
+
this.connected = !0, this.virtualizer && !this.cleanup && (this.cleanup = this.virtualizer._didMount());
|
|
613
|
+
}
|
|
614
|
+
hostUpdated() {
|
|
615
|
+
if (!this.virtualizer) return;
|
|
616
|
+
this.virtualizer._willUpdate();
|
|
617
|
+
let e = this.options.getRowElements();
|
|
618
|
+
this.syncEstimate(e);
|
|
619
|
+
for (let t of e) this.virtualizer.measureElement(t);
|
|
620
|
+
}
|
|
621
|
+
hostDisconnected() {
|
|
622
|
+
this.connected = !1, this.cleanup?.(), this.cleanup = void 0;
|
|
623
|
+
}
|
|
624
|
+
syncEstimate(e) {
|
|
625
|
+
let t = e.filter((e) => this.options.isRendered(e)).map((e) => R(e)).filter(Boolean).sort((e, t) => e - t);
|
|
626
|
+
if (t.length === 0) return;
|
|
627
|
+
let n = t[Math.floor(t.length / 2)];
|
|
628
|
+
Math.abs(n - this.estimatedSize) >= .5 && (this.estimatedSize = n, this.virtualizer?.measure());
|
|
629
|
+
}
|
|
630
|
+
createOptions() {
|
|
631
|
+
return {
|
|
632
|
+
count: this.keys.length,
|
|
633
|
+
getScrollElement: this.options.getScrollElement,
|
|
634
|
+
estimateSize: () => this.estimatedSize,
|
|
635
|
+
getItemKey: (e) => this.keys[e] ?? e,
|
|
636
|
+
overscan: je,
|
|
637
|
+
useAnimationFrameWithResizeObserver: !0,
|
|
638
|
+
scrollToFn: ae,
|
|
639
|
+
observeElementRect: se,
|
|
640
|
+
observeElementOffset: oe,
|
|
641
|
+
measureElement: (e) => this.options.isRendered(e) && R(e) || this.estimatedSize,
|
|
642
|
+
onChange: (e) => {
|
|
643
|
+
let t = this.reportRange(e);
|
|
644
|
+
queueMicrotask(() => {
|
|
645
|
+
t ? this.host.requestUpdate(L, !1) : this.host.requestUpdate();
|
|
646
|
+
});
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
}
|
|
650
|
+
reportRange(e) {
|
|
651
|
+
let t = e.range;
|
|
652
|
+
if (!t || t.endIndex < t.startIndex) return !1;
|
|
653
|
+
let n = t.startIndex, r = t.endIndex;
|
|
654
|
+
return this.range?.first === n && this.range.last === r ? !1 : (this.range = {
|
|
655
|
+
first: n,
|
|
656
|
+
last: r
|
|
657
|
+
}, this.options.onRangeChanged({
|
|
658
|
+
first: n,
|
|
659
|
+
last: r
|
|
660
|
+
}), !0);
|
|
661
|
+
}
|
|
662
|
+
}, Ne = ":host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;display:grid;overflow:hidden;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-row-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-row-divider-color,var(--luzmo-table-border-color,var(--table-row-divider-color)))!important}:host([data-last-row]){border-block-end-width:0!important}:host([hidden]){display:none!important}.cell{outline:none;grid-column:1/-1;grid-template-rows:1fr;min-inline-size:0;display:grid;overflow:hidden}:host([data-last-row]) .cell{--table-focus-end-start-radius:var(--table-corner-radius);--table-focus-end-end-radius:var(--table-corner-radius)}.cell:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-details-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.content{padding-block:var(--table-details-padding-block);padding-inline:var(--table-details-padding-inline);overflow:hidden}:host([opening]) .content,:host([closing]) .content{min-block-size:0}:host([opening]) .cell{animation:table-details-open var(--luzmo-animation-duration) ease-out}:host([closing]) .cell{animation:table-details-close var(--luzmo-animation-duration) ease-in}@keyframes table-details-open{0%{opacity:0;grid-template-rows:0fr}}@keyframes table-details-close{to{opacity:0;grid-template-rows:0fr}}@media (prefers-reduced-motion:reduce){:host([opening]) .cell,:host([closing]) .cell{animation:none}}:host{--table-row-divider-color:var(--luzmo-border-color);--table-row-divider-width:var(--luzmo-border-width);--table-details-padding-block:var(--luzmo-spacing-4);--table-details-padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline))}@media (forced-colors:active){:host{--highcontrast-table-row-divider-color:CanvasText;--highcontrast-table-details-focus-indicator-color:Highlight}}";
|
|
663
|
+
//#endregion
|
|
664
|
+
//#region src/components/table/table-styles.ts
|
|
665
|
+
function z(e, t) {
|
|
666
|
+
return [...Array.isArray(e) ? e : e ? [e] : [], u(t)];
|
|
667
|
+
}
|
|
668
|
+
//#endregion
|
|
669
|
+
//#region src/components/table/table-row-details.ts
|
|
670
|
+
var B = class extends e {
|
|
671
|
+
constructor(...e) {
|
|
672
|
+
super(...e), this.role = "row", this.open = !1, this._phase = "closed", this.reducedMotion = new o(this, "(prefers-reduced-motion: reduce)"), this.handleAnimationEnd = (e) => {
|
|
673
|
+
e.target === this.renderRoot.querySelector(".cell") && (this._phase === "closing" ? this._finishClosing() : this._phase === "opening" && (this._phase = "open"), this.requestUpdate());
|
|
674
|
+
}, this._finishClosing = () => {
|
|
675
|
+
this._phase === "closing" && (window.clearTimeout(this._closeFallback), this._phase = "closed", this.hidden = !0, this.dispatchEvent(new Event("luzmo-table-details-collapsed", {
|
|
676
|
+
bubbles: !0,
|
|
677
|
+
composed: !0
|
|
678
|
+
})), this.requestUpdate());
|
|
679
|
+
};
|
|
680
|
+
}
|
|
681
|
+
static get styles() {
|
|
682
|
+
return z(super.styles, Ne);
|
|
683
|
+
}
|
|
684
|
+
disconnectedCallback() {
|
|
685
|
+
window.clearTimeout(this._closeFallback), super.disconnectedCallback();
|
|
686
|
+
}
|
|
687
|
+
willUpdate(e) {
|
|
688
|
+
if (super.willUpdate(e), !(!e.has("open") && this.hasUpdated)) {
|
|
689
|
+
if (this.open) {
|
|
690
|
+
this.hidden = !1, this._phase = this.hasUpdated && !this.reducedMotion.matches ? "opening" : "open";
|
|
691
|
+
return;
|
|
692
|
+
}
|
|
693
|
+
if (!this.hasUpdated || this.reducedMotion.matches || this._phase === "closed") {
|
|
694
|
+
this._phase = "closed", this.hidden = !0;
|
|
695
|
+
return;
|
|
696
|
+
}
|
|
697
|
+
this._phase = "closing";
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
render() {
|
|
701
|
+
return c`
|
|
702
|
+
<div
|
|
703
|
+
class="cell"
|
|
704
|
+
role="gridcell"
|
|
705
|
+
@animationend=${this.handleAnimationEnd}
|
|
706
|
+
>
|
|
707
|
+
<div class="content"><slot></slot></div>
|
|
708
|
+
</div>
|
|
709
|
+
`;
|
|
710
|
+
}
|
|
711
|
+
updated(e) {
|
|
712
|
+
super.updated(e), e.has("_phase") && (this.toggleAttribute("opening", this._phase === "opening"), this.toggleAttribute("closing", this._phase === "closing"), window.clearTimeout(this._closeFallback), this._phase === "closing" && (this._closeFallback = window.setTimeout(this._finishClosing, 200)));
|
|
713
|
+
}
|
|
714
|
+
};
|
|
715
|
+
t([d({ reflect: !0 })], B.prototype, "role", void 0), t([d({
|
|
716
|
+
type: Boolean,
|
|
717
|
+
reflect: !0
|
|
718
|
+
})], B.prototype, "open", void 0), t([p()], B.prototype, "_phase", void 0);
|
|
719
|
+
//#endregion
|
|
720
|
+
//#region src/components/table/table-templates.ts
|
|
721
|
+
var V = (e) => e.sortKey ?? e.accessorKey ?? e.id, H = (e, t) => {
|
|
722
|
+
let n = t[e.accessorKey ?? e.id];
|
|
723
|
+
return typeof n == "string" || typeof n == "number" ? String(n) : "";
|
|
724
|
+
}, Pe = (e, t, n) => {
|
|
725
|
+
let r = e.map((e) => {
|
|
726
|
+
let r = V(e), i = typeof e.header == "string" ? e.header : e.id;
|
|
727
|
+
return c`
|
|
728
|
+
<luzmo-table-head-cell
|
|
729
|
+
column-id=${e.id}
|
|
730
|
+
?sortable=${!!e.sortable}
|
|
731
|
+
.resizable=${e.resizable !== !1}
|
|
732
|
+
sort-key=${r}
|
|
733
|
+
.sortDirection=${t?.key === r ? t.direction : void 0}
|
|
734
|
+
.width=${e.width}
|
|
735
|
+
.minWidth=${e.minWidth}
|
|
736
|
+
.maxWidth=${e.maxWidth}
|
|
737
|
+
.lineClamp=${e.lineClamp}
|
|
738
|
+
.resizeLabel=${n.resizeLabel(i)}
|
|
739
|
+
>${e.header}</luzmo-table-head-cell
|
|
740
|
+
>
|
|
741
|
+
`;
|
|
742
|
+
});
|
|
743
|
+
return c`
|
|
744
|
+
<luzmo-table-head .expandable=${n.expandable}
|
|
745
|
+
>${r}</luzmo-table-head
|
|
746
|
+
>
|
|
747
|
+
`;
|
|
748
|
+
}, Fe = (e, t, n) => {
|
|
749
|
+
let { item: r, index: i } = e;
|
|
750
|
+
return n ? n(r, i) : e.information ? c`<luzmo-table-cell span-all
|
|
751
|
+
>${t[0] ? H(t[0], r) : ""}</luzmo-table-cell
|
|
752
|
+
>` : t.map((e) => c`
|
|
753
|
+
<luzmo-table-cell .columnLineClamp=${e.lineClamp}
|
|
754
|
+
>${e.cell ? e.cell(r, i) : H(e, r)}</luzmo-table-cell
|
|
755
|
+
>
|
|
756
|
+
`);
|
|
757
|
+
}, Ie = (e, t, { columns: n, renderItem: r, itemLabel: i, selectRowLabel: a }) => i ? i(e.item, e.index) : (!r && n[0] ? H(n[0], e.item) : "") || j(a, { index: String(t + 1) }), U = (e) => c`
|
|
758
|
+
<div
|
|
759
|
+
class="virtual-spacer"
|
|
760
|
+
aria-hidden="true"
|
|
761
|
+
style=${b({ blockSize: `${e}px` })}
|
|
762
|
+
></div>
|
|
763
|
+
`, Le = (e) => {
|
|
764
|
+
let { rows: t, columns: n, renderItem: r, selects: i, rowIndexOffset: a } = e, o = a !== void 0;
|
|
765
|
+
return c`
|
|
766
|
+
<luzmo-table-body>
|
|
767
|
+
${o ? U(e.paddingStart) : l}
|
|
768
|
+
${ee(t, ({ record: e }) => e.value, ({ record: t, position: s }) => {
|
|
769
|
+
let u = !!i && !t.information, d = e.expandable && !t.information, f = d && e.isExpanded(t.value), p = s === e.rowCount - 1, m = e.ariaIndexes?.get(t.value), h = m?.row ?? (a === void 0 ? void 0 : s + a), g = c`${c`
|
|
770
|
+
<luzmo-table-row
|
|
771
|
+
value=${t.value}
|
|
772
|
+
data-index=${v(o ? void 0 : s)}
|
|
773
|
+
aria-rowindex=${v(h)}
|
|
774
|
+
?data-last-row=${p}
|
|
775
|
+
.selectable=${u}
|
|
776
|
+
.selected=${u && e.isSelected(t.value)}
|
|
777
|
+
.selectionColumn=${!!i}
|
|
778
|
+
.selectsSingle=${i === "single"}
|
|
779
|
+
.emphasized=${e.emphasized}
|
|
780
|
+
.checkboxLabel=${u ? Ie(t, s, e) : ""}
|
|
781
|
+
.checkboxSize=${e.checkboxSize}
|
|
782
|
+
.expandable=${d}
|
|
783
|
+
.expanded=${f}
|
|
784
|
+
.expansionColumn=${e.expandable && !d}
|
|
785
|
+
.spanAll=${t.information}
|
|
786
|
+
.disclosureLabel=${d ? e.expandLabel(t, s) : ""}
|
|
787
|
+
.detailsId=${d ? T(t.value) : ""}
|
|
788
|
+
>${Fe(t, n, r)}</luzmo-table-row
|
|
789
|
+
>
|
|
790
|
+
`}${d ? c`
|
|
791
|
+
<luzmo-table-row-details
|
|
792
|
+
id=${T(t.value)}
|
|
793
|
+
.open=${f}
|
|
794
|
+
aria-rowindex=${v(m?.details)}
|
|
795
|
+
?data-last-row=${p}
|
|
796
|
+
>${e.renderDetails?.(t.item, t.index)}</luzmo-table-row-details
|
|
797
|
+
>
|
|
798
|
+
` : l}`;
|
|
799
|
+
return o ? c`<div class="row-group" data-index=${s}>${g}</div>` : g;
|
|
800
|
+
})}
|
|
801
|
+
${o ? U(e.paddingEnd) : l}
|
|
802
|
+
</luzmo-table-body>
|
|
803
|
+
`;
|
|
804
|
+
}, Re = ":host{box-sizing:border-box;font-family:var(--luzmo-font-family);font-size:var(--table-font-size);line-height:var(--luzmo-line-height);color:var(--table-font-color);background-color:var(--luzmo-table-background-color,var(--table-background-color));border-radius:var(--luzmo-table-border-radius,var(--table-border-radius));flex-direction:column;display:flex;position:relative;overflow:hidden;border-width:var(--table-border-width)!important;border-style:solid!important;border-color:var(--highcontrast-table-border-color,var(--luzmo-table-border-color,var(--table-border-color)))!important}slot.data::slotted(luzmo-table-body){display:none}:host{--table-font-size:var(--luzmo-font-size-m);--table-font-color:var(--luzmo-font-color);--table-background-color:var(--luzmo-background-color);--table-border-width:var(--luzmo-border-width);--table-border-color:var(--luzmo-border-color);--table-column-divider-width:0px;--table-column-divider-color:var(--table-border-color);--table-border-radius:var(--luzmo-border-radius);--table-row-min-block-size:calc(var(--luzmo-component-height) + var(--luzmo-spacing-3));--table-row-density-offset:0px;--table-cell-padding-block:var(--luzmo-spacing-2);--table-cell-padding-inline:var(--luzmo-spacing-4);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-m) + var(--luzmo-spacing-4) * 2);--table-disclosure-cell-inline-size:var(--table-checkbox-cell-inline-size);--table-sort-icon-size:var(--luzmo-icon-size-m);--table-row-selected-background-color:var(--luzmo-background-color-highlight);--table-row-selected-hover-background-color:var(--luzmo-background-color-highlight-hover);--table-body-overflow:hidden;--table-corner-radius:max(0px, calc(var(--luzmo-table-border-radius,var(--table-border-radius)) - var(--table-border-width)))}:host([size=s]){--table-font-size:var(--luzmo-font-size-s);--table-row-min-block-size:calc(var(--luzmo-component-height-s) + var(--luzmo-spacing-2));--table-cell-padding-inline:var(--luzmo-spacing-3);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-s) + var(--luzmo-spacing-3) * 2);--table-sort-icon-size:var(--luzmo-icon-size-s)}:host([size=l]){--table-font-size:var(--luzmo-font-size-l);--table-row-min-block-size:calc(var(--luzmo-component-height-l) + var(--luzmo-spacing-3));--table-cell-padding-inline:var(--luzmo-spacing-5);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-l) + var(--luzmo-spacing-5) * 2);--table-sort-icon-size:var(--luzmo-icon-size-l)}:host([size=xl]){--table-font-size:var(--luzmo-font-size-xl);--table-row-min-block-size:calc(var(--luzmo-component-height-xl) + var(--luzmo-spacing-5));--table-cell-padding-inline:var(--luzmo-spacing-5);--table-checkbox-cell-inline-size:calc(var(--luzmo-icon-size-xl) + var(--luzmo-spacing-5) * 2);--table-sort-icon-size:var(--luzmo-icon-size-xl)}:host([density=compact]){--table-row-density-offset:calc(var(--luzmo-spacing-3) * -1);--table-cell-padding-block:var(--luzmo-spacing-1)}:host([density=spacious]){--table-row-density-offset:var(--luzmo-spacing-3);--table-cell-padding-block:var(--luzmo-spacing-3)}:host([emphasized]){--table-row-selected-background-color:rgba(var(--luzmo-primary-rgb), .1);--table-row-selected-hover-background-color:rgba(var(--luzmo-primary-rgb), .16)}:host([quiet]){--table-border-width:0px;--table-background-color:rgba(var(--luzmo-background-color-rgb), 0);--table-border-radius:0px}:host([scroller]),:host([virtualized]){--table-body-overflow:auto}@media (forced-colors:active){:host{--highcontrast-table-border-color:CanvasText;--highcontrast-table-column-divider-color:CanvasText}}", ze = [
|
|
805
|
+
"items",
|
|
806
|
+
"itemValue",
|
|
807
|
+
"selects",
|
|
808
|
+
"selected",
|
|
809
|
+
"columns",
|
|
810
|
+
"expanded",
|
|
811
|
+
"renderDetails",
|
|
812
|
+
"columnWidths",
|
|
813
|
+
"_sort",
|
|
814
|
+
"_clientSort",
|
|
815
|
+
"_lightDomVersion",
|
|
816
|
+
N,
|
|
817
|
+
i
|
|
818
|
+
], Be = [
|
|
819
|
+
"labels",
|
|
820
|
+
"selectAllLabel",
|
|
821
|
+
"emphasized",
|
|
822
|
+
"size"
|
|
823
|
+
], W = /* @__PURE__ */ new Set([
|
|
824
|
+
"luzmo-table-cell",
|
|
825
|
+
"luzmo-table-head-cell",
|
|
826
|
+
"luzmo-table-checkbox-cell"
|
|
827
|
+
]), Ve = [
|
|
828
|
+
"a[href]",
|
|
829
|
+
"button",
|
|
830
|
+
"input",
|
|
831
|
+
"select",
|
|
832
|
+
"textarea",
|
|
833
|
+
"label",
|
|
834
|
+
"summary",
|
|
835
|
+
"[contenteditable=\"\"]",
|
|
836
|
+
"[contenteditable=\"true\"]",
|
|
837
|
+
"[role=\"button\"]",
|
|
838
|
+
"[role=\"link\"]",
|
|
839
|
+
"[role=\"checkbox\"]",
|
|
840
|
+
"[role=\"switch\"]",
|
|
841
|
+
"[role=\"menuitem\"]"
|
|
842
|
+
].join(","), He = "textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], input:not([type=\"checkbox\"]):not([type=\"radio\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"])", Ue = [
|
|
843
|
+
"columns",
|
|
844
|
+
"columnWidths",
|
|
845
|
+
"selects",
|
|
846
|
+
"items",
|
|
847
|
+
"renderDetails",
|
|
848
|
+
"_lightDomVersion"
|
|
849
|
+
], G = (e) => e instanceof HTMLElement, K = class extends n(e) {
|
|
850
|
+
static get styles() {
|
|
851
|
+
return z(super.styles, Re);
|
|
852
|
+
}
|
|
853
|
+
constructor() {
|
|
854
|
+
super(), this.role = "grid", this.emphasized = !1, this.quiet = !1, this.scroller = !1, this.selected = [], this.expanded = [], this.columnWidths = {}, this.columns = [], this.virtualized = !1, this.labels = {}, this._clientSort = !0, this._mode = "declarative", this._rows = [], this._rowKeys = [], this._warnedSlottedRows = !1, this.model = new Ce(), this.language = new a(this), this.announcer = new ue(this), this.layout = new ke(this, {
|
|
855
|
+
model: this.model,
|
|
856
|
+
owns: (e) => this._owns(e)
|
|
857
|
+
}), this.resize = new Te(this, {
|
|
858
|
+
owns: (e) => this._owns(e),
|
|
859
|
+
isLTR: () => this.isLTR,
|
|
860
|
+
language: () => this.language.language,
|
|
861
|
+
labels: () => this.labels,
|
|
862
|
+
selectAllLabel: () => this.selectAllLabel,
|
|
863
|
+
layouts: () => this.layout.layouts(),
|
|
864
|
+
headCells: () => this.layout.headCells(),
|
|
865
|
+
announce: (e) => {
|
|
866
|
+
this.announcer.announce(e);
|
|
867
|
+
}
|
|
868
|
+
}), this.expansion = new Oe(this, {
|
|
869
|
+
owns: (e) => this._owns(e),
|
|
870
|
+
focusDisclosure: (e) => {
|
|
871
|
+
this._activeCell = e, this.navigation.focusElement(e);
|
|
872
|
+
}
|
|
873
|
+
}), this._lightDomVersion = 0, this._modelSynced = !1, this.lightObserver = new MutationObserver(() => {
|
|
874
|
+
this._lightDomVersion += 1;
|
|
875
|
+
}), this.directionManaged = /* @__PURE__ */ new Set(), this.directionObserver = new MutationObserver(() => {
|
|
876
|
+
for (let e of this.directionManaged) this._syncDirection(e);
|
|
877
|
+
}), this.navigation = new De(this, {
|
|
878
|
+
direction: "grid",
|
|
879
|
+
elements: () => this._gridRows().flat(),
|
|
880
|
+
rows: () => this._gridRows(),
|
|
881
|
+
isLTR: () => this.isLTR,
|
|
882
|
+
focusInIndex: (e) => this._gridEntryIndex(e)
|
|
883
|
+
}), this.virtualizer = new Me(this, {
|
|
884
|
+
getScrollElement: () => this.shadowRoot?.querySelector("luzmo-table-body") ?? null,
|
|
885
|
+
getRowElements: () => this.virtualizer.enabled ? [...this.shadowRoot?.querySelectorAll(".row-group") ?? []] : this._rowElements(),
|
|
886
|
+
isRendered: (e) => !!e.querySelector("luzmo-table-row")?.hasUpdated,
|
|
887
|
+
onRangeChanged: (e) => this.dispatchEvent(new CustomEvent("luzmo-range-changed", {
|
|
888
|
+
bubbles: !0,
|
|
889
|
+
composed: !0,
|
|
890
|
+
detail: e
|
|
891
|
+
}))
|
|
892
|
+
}), this.handleChange = (e) => {
|
|
893
|
+
if (!this._owns(e)) return;
|
|
894
|
+
let t = e.composedPath(), n = t.find((e) => G(e) && e.localName === "luzmo-table-checkbox-cell");
|
|
895
|
+
if (!n) return;
|
|
896
|
+
if (e.stopPropagation(), e.preventDefault(), n.headCell) {
|
|
897
|
+
this._toggleAll();
|
|
898
|
+
return;
|
|
899
|
+
}
|
|
900
|
+
let r = t.find((e) => G(e) && e.localName === "luzmo-table-row");
|
|
901
|
+
r && this._toggleRow(r);
|
|
902
|
+
}, this.handleClick = (e) => {
|
|
903
|
+
if (!this._owns(e)) return;
|
|
904
|
+
let t = e.composedPath(), n = t.some((e) => G(e) && e.localName === "luzmo-table-disclosure-cell"), r = t.find((e) => G(e) && e.localName === "luzmo-table-row");
|
|
905
|
+
if (n && r) {
|
|
906
|
+
this.expansion.toggle(r);
|
|
907
|
+
return;
|
|
908
|
+
}
|
|
909
|
+
if (!r) return;
|
|
910
|
+
let i = t.indexOf(r);
|
|
911
|
+
if (!t.slice(0, i).some((e) => G(e) && (e.localName === "luzmo-table-checkbox-cell" || e.localName === "luzmo-table-disclosure-cell" || e.matches(Ve)))) {
|
|
912
|
+
if (this.selects) {
|
|
913
|
+
this._toggleRow(r);
|
|
914
|
+
return;
|
|
915
|
+
}
|
|
916
|
+
r.expandable && this.expansion.toggle(r);
|
|
917
|
+
}
|
|
918
|
+
}, this.handleFocusin = (e) => {
|
|
919
|
+
if (!this._owns(e)) return;
|
|
920
|
+
let t = this._gridElementFromPath(e.composedPath());
|
|
921
|
+
t && this.navigation.elements.includes(t) && (this._activeCell = t);
|
|
922
|
+
}, this.handleKeydown = (e) => {
|
|
923
|
+
if (e.defaultPrevented || !this._owns(e)) return;
|
|
924
|
+
let t = e.composedPath(), n = this._cellFromPath(t), r = this._gridElementFromPath(t), i = t[0], a = i === r;
|
|
925
|
+
if (!a && G(i) && i.matches(He)) return;
|
|
926
|
+
if (e.code === "Escape") {
|
|
927
|
+
this.expansion.collapseFromPath(t);
|
|
928
|
+
return;
|
|
929
|
+
}
|
|
930
|
+
if (M(t)) {
|
|
931
|
+
this.resize.handleKeydown(e);
|
|
932
|
+
return;
|
|
933
|
+
}
|
|
934
|
+
let o = this._virtualNavigationTarget(e);
|
|
935
|
+
if (o) {
|
|
936
|
+
e.preventDefault(), e.stopImmediatePropagation(), this._focusVirtualCell(o.index, o.column);
|
|
937
|
+
return;
|
|
938
|
+
}
|
|
939
|
+
if (r && (e.code === "Space" || e.code === "Enter" || e.code === "NumpadEnter")) {
|
|
940
|
+
if (e.repeat) {
|
|
941
|
+
a && e.preventDefault();
|
|
942
|
+
return;
|
|
943
|
+
}
|
|
944
|
+
if (a && r.localName === "luzmo-table-disclosure-cell") {
|
|
945
|
+
e.preventDefault();
|
|
946
|
+
let n = t.find((e) => G(e) && e.localName === "luzmo-table-row");
|
|
947
|
+
n && this.expansion.toggle(n);
|
|
948
|
+
return;
|
|
949
|
+
}
|
|
950
|
+
a && n && n.localName !== "luzmo-table-head-cell" && this.selects && (e.preventDefault(), this._activateCell(n));
|
|
951
|
+
}
|
|
952
|
+
}, this.handleSorted = (e) => {
|
|
953
|
+
if (!this._owns(e)) return;
|
|
954
|
+
let { sortKey: t, sortDirection: n } = e.detail, r = this._cellFromPath(e.composedPath())?.textContent?.trim() || t;
|
|
955
|
+
queueMicrotask(() => {
|
|
956
|
+
let i = A(this.labels, this.selectAllLabel);
|
|
957
|
+
this._sort = {
|
|
958
|
+
key: t,
|
|
959
|
+
direction: n
|
|
960
|
+
}, this._clientSort = !e.defaultPrevented, this.announcer.announce(j(n === "asc" ? i.sortAscending : i.sortDescending, { column: r }));
|
|
961
|
+
});
|
|
962
|
+
}, this.addEventListener("change", this.handleChange, { capture: !0 }), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusin", this.handleFocusin), this.addEventListener("luzmo-table-sorted", this.handleSorted);
|
|
963
|
+
}
|
|
964
|
+
get _isDataMode() {
|
|
965
|
+
return this._mode === "data";
|
|
966
|
+
}
|
|
967
|
+
focus(e) {
|
|
968
|
+
let t = this.navigation.elements, n = (this._activeCell && t.includes(this._activeCell) ? this._activeCell : void 0) ?? t[this._gridEntryIndex(t)];
|
|
969
|
+
n && this.navigation.focusElement(n, e);
|
|
970
|
+
}
|
|
971
|
+
scrollToIndex(e) {
|
|
972
|
+
if (this.virtualizer.enabled) {
|
|
973
|
+
this.virtualizer.scrollToIndex(e);
|
|
974
|
+
return;
|
|
975
|
+
}
|
|
976
|
+
this._rowElements()[e]?.scrollIntoView({ block: "nearest" });
|
|
977
|
+
}
|
|
978
|
+
startManagingContentDirection(e) {
|
|
979
|
+
this.directionManaged.add(e), this._syncDirection(e);
|
|
980
|
+
}
|
|
981
|
+
stopManagingContentDirection(e) {
|
|
982
|
+
this.directionManaged.delete(e);
|
|
983
|
+
}
|
|
984
|
+
connectedCallback() {
|
|
985
|
+
super.connectedCallback(), this.directionObserver.observe(this, {
|
|
986
|
+
attributes: !0,
|
|
987
|
+
attributeFilter: ["dir"]
|
|
988
|
+
}), this.lightObserver.observe(this, {
|
|
989
|
+
childList: !0,
|
|
990
|
+
subtree: !0,
|
|
991
|
+
characterData: !0,
|
|
992
|
+
attributes: !0,
|
|
993
|
+
attributeFilter: [
|
|
994
|
+
"value",
|
|
995
|
+
"expanded",
|
|
996
|
+
"line-clamp",
|
|
997
|
+
"width",
|
|
998
|
+
"min-width",
|
|
999
|
+
"max-width",
|
|
1000
|
+
"resizable",
|
|
1001
|
+
"column-id",
|
|
1002
|
+
"sort-key"
|
|
1003
|
+
]
|
|
1004
|
+
});
|
|
1005
|
+
}
|
|
1006
|
+
disconnectedCallback() {
|
|
1007
|
+
this.lightObserver.disconnect(), this.directionObserver.disconnect(), super.disconnectedCallback();
|
|
1008
|
+
}
|
|
1009
|
+
willUpdate(e) {
|
|
1010
|
+
super.willUpdate(e);
|
|
1011
|
+
let t = e;
|
|
1012
|
+
e.has("selects") && this.selects !== "single" && this.selects !== "multiple" && (this.selects = void 0);
|
|
1013
|
+
let n = Array.isArray(this.items) ? "data" : "declarative", r = n !== this._mode;
|
|
1014
|
+
if (r && (this._mode = n, this._sort = void 0, this._clientSort = !0, this._activeCell = void 0, this._warnedSlottedRows = !1, this.hasUpdated && !e.has("selected") && (this.selected = []), this.hasUpdated && !e.has("expanded") && (this.expanded = []), this.expansion.clear()), this._isDataMode && !this._sort && (this._sort = this._initialSort()), this.virtualizer.enabled = this._isDataMode && this.virtualized, (!this.hasUpdated || r || Ue.some((e) => t.has(e))) && this.layout.applyGridMetrics(), this._modelSynced = !this.hasUpdated || r || ze.some((e) => t.has(e)), !this._modelSynced) return;
|
|
1015
|
+
this.model.selects = this.selects, this.model.locale = this.language.language, this.model.setRecords(this._createRecords()), this.model.setSelected(this.selected), this.model.setSorting(this._isDataMode ? this._sort : void 0, !this._clientSort);
|
|
1016
|
+
let i = this.model.rows;
|
|
1017
|
+
(i.length !== this._rows.length || i.some((e, t) => e.value !== this._rows[t]?.value)) && (this._rowKeys = i.map((e) => e.value)), this._rows = i;
|
|
1018
|
+
}
|
|
1019
|
+
render() {
|
|
1020
|
+
return c`
|
|
1021
|
+
<slot class=${this._mode}></slot>
|
|
1022
|
+
${this._isDataMode ? this._renderData() : l}
|
|
1023
|
+
`;
|
|
1024
|
+
}
|
|
1025
|
+
updated(e) {
|
|
1026
|
+
super.updated(e), e.has("selects") && (this.selects === "multiple" ? this.setAttribute("aria-multiselectable", "true") : this.removeAttribute("aria-multiselectable"));
|
|
1027
|
+
let t = this._modelSynced;
|
|
1028
|
+
if (this._modelSynced = !1, t || e.has("virtualized")) if (this.virtualizer.enabled) {
|
|
1029
|
+
let e = this._rows.filter((e) => this.expanded.includes(e.value)).length;
|
|
1030
|
+
this.setAttribute("aria-rowcount", String(this._rows.length + e + +!!this._head()));
|
|
1031
|
+
} else this.removeAttribute("aria-rowcount");
|
|
1032
|
+
let n = e;
|
|
1033
|
+
(t || Be.some((e) => n.has(e))) && (this.layout.syncPresentation(), this._isDataMode && this._warnSlottedRows()), (t || n.has("columnWidths") || n.has("virtualized") || n.has("renderItem") || n.has(L)) && this._refreshNavigation();
|
|
1034
|
+
}
|
|
1035
|
+
_renderData() {
|
|
1036
|
+
let e = A(this.labels, this.selectAllLabel), t = this._slottedHead(), n = !!t || this.columns.length > 0, r = this.virtualizer.enabled ? this.virtualizer.sync(this._rowKeys) : void 0, i = r ? r.filter((e) => this._rows[e.index]).map((e) => ({
|
|
1037
|
+
record: this._rows[e.index],
|
|
1038
|
+
position: e.index
|
|
1039
|
+
})) : this._rows.map((e, t) => ({
|
|
1040
|
+
record: e,
|
|
1041
|
+
position: t
|
|
1042
|
+
})), a = r?.[0], o = r?.at(-1);
|
|
1043
|
+
return c`
|
|
1044
|
+
${t || this.columns.length === 0 ? l : Pe(this.columns, this._sort, {
|
|
1045
|
+
expandable: this.layout.hasExpansion(),
|
|
1046
|
+
resizeLabel: (t) => j(e.resizeColumn, { column: t })
|
|
1047
|
+
})}
|
|
1048
|
+
${Le({
|
|
1049
|
+
rows: i,
|
|
1050
|
+
rowCount: this._rows.length,
|
|
1051
|
+
columns: this.columns,
|
|
1052
|
+
renderItem: this.renderItem,
|
|
1053
|
+
itemLabel: this.itemLabel,
|
|
1054
|
+
selectRowLabel: e.selectRow,
|
|
1055
|
+
selects: this.selects,
|
|
1056
|
+
isSelected: (e) => this.model.isSelected(e),
|
|
1057
|
+
emphasized: this.emphasized,
|
|
1058
|
+
checkboxSize: this.size,
|
|
1059
|
+
rowIndexOffset: r ? n ? 2 : 1 : void 0,
|
|
1060
|
+
paddingStart: a?.start ?? 0,
|
|
1061
|
+
paddingEnd: o ? this.virtualizer.totalSize - o.end : 0,
|
|
1062
|
+
expandable: this.layout.hasExpansion(),
|
|
1063
|
+
isExpanded: (e) => this.expanded.includes(e),
|
|
1064
|
+
expandLabel: (t, n) => j(this.expanded.includes(t.value) ? e.collapseRow : e.expandRow, {
|
|
1065
|
+
label: this._rowLabel(t, n),
|
|
1066
|
+
index: String(n + 1)
|
|
1067
|
+
}),
|
|
1068
|
+
renderDetails: this.renderDetails,
|
|
1069
|
+
closing: this.expansion.closing,
|
|
1070
|
+
ariaIndexes: r ? this._ariaIndexes(n) : void 0
|
|
1071
|
+
})}
|
|
1072
|
+
`;
|
|
1073
|
+
}
|
|
1074
|
+
_syncDirection(e) {
|
|
1075
|
+
e.dir !== this.dir && (e.dir = this.dir);
|
|
1076
|
+
}
|
|
1077
|
+
_rowLabel(e, t) {
|
|
1078
|
+
if (this.itemLabel) return this.itemLabel(e.item, e.index);
|
|
1079
|
+
let n = this.columns[0], r = n ? e.item[n.accessorKey ?? n.id] : void 0;
|
|
1080
|
+
return typeof r == "string" || typeof r == "number" ? String(r) : e.value || String(t + 1);
|
|
1081
|
+
}
|
|
1082
|
+
_ariaIndexes(e) {
|
|
1083
|
+
let t = /* @__PURE__ */ new Map(), n = e ? 2 : 1;
|
|
1084
|
+
for (let e of this._rows) {
|
|
1085
|
+
let r = { row: n };
|
|
1086
|
+
n += 1, this.expanded.includes(e.value) && (r.details = n, n += 1), t.set(e.value, r);
|
|
1087
|
+
}
|
|
1088
|
+
return t;
|
|
1089
|
+
}
|
|
1090
|
+
_owns(e) {
|
|
1091
|
+
for (let t of e.composedPath()) if (t instanceof HTMLElement && t.localName === "luzmo-table") return t === this;
|
|
1092
|
+
return !0;
|
|
1093
|
+
}
|
|
1094
|
+
_initialSort() {
|
|
1095
|
+
let e = this.columns.find((e) => e.sortable && e.sortDirection);
|
|
1096
|
+
if (e?.sortDirection) return {
|
|
1097
|
+
key: V(e),
|
|
1098
|
+
direction: e.sortDirection
|
|
1099
|
+
};
|
|
1100
|
+
let t = this._slottedHead()?.querySelector(":scope > luzmo-table-head-cell[sortable][sort-direction]"), n = t?.getAttribute("sort-direction");
|
|
1101
|
+
if (t && (n === "asc" || n === "desc")) return {
|
|
1102
|
+
key: t.getAttribute("sort-key") ?? "",
|
|
1103
|
+
direction: n
|
|
1104
|
+
};
|
|
1105
|
+
}
|
|
1106
|
+
_createRecords() {
|
|
1107
|
+
return this._isDataMode ? xe(this.items ?? [], this.itemValue) : this._declarativeRows().map((e, t) => ({
|
|
1108
|
+
item: {},
|
|
1109
|
+
value: e.value || String(t),
|
|
1110
|
+
index: t,
|
|
1111
|
+
information: !1
|
|
1112
|
+
}));
|
|
1113
|
+
}
|
|
1114
|
+
_slottedHead() {
|
|
1115
|
+
return this.querySelector(":scope > luzmo-table-head");
|
|
1116
|
+
}
|
|
1117
|
+
_declarativeRows() {
|
|
1118
|
+
return [...this.querySelectorAll(":scope > luzmo-table-body > luzmo-table-row")];
|
|
1119
|
+
}
|
|
1120
|
+
_head() {
|
|
1121
|
+
return this._slottedHead() ?? (this._isDataMode ? this.shadowRoot?.querySelector("luzmo-table-head") ?? null : null);
|
|
1122
|
+
}
|
|
1123
|
+
_rowElements() {
|
|
1124
|
+
return this._isDataMode ? [...this.shadowRoot?.querySelectorAll("luzmo-table-row") ?? []] : this._declarativeRows();
|
|
1125
|
+
}
|
|
1126
|
+
_gridRows() {
|
|
1127
|
+
let e = [];
|
|
1128
|
+
for (let t of this._rowElements()) {
|
|
1129
|
+
let n = this._gridCells(t);
|
|
1130
|
+
n.length > 0 && e.push(n);
|
|
1131
|
+
let r = P(t), i = r && !r.hidden ? r.shadowRoot?.querySelector(".cell[role=\"gridcell\"]") : void 0;
|
|
1132
|
+
i && e.push([i]);
|
|
1133
|
+
}
|
|
1134
|
+
return e;
|
|
1135
|
+
}
|
|
1136
|
+
_gridEntryIndex(e) {
|
|
1137
|
+
let t = this._activeCell ? e.indexOf(this._activeCell) : -1;
|
|
1138
|
+
return Math.max(t, 0);
|
|
1139
|
+
}
|
|
1140
|
+
_virtualNavigationTarget(e) {
|
|
1141
|
+
if (!this.virtualizer.enabled || this._rows.length === 0) return;
|
|
1142
|
+
let t = this._gridElementFromPath(e.composedPath()), n = this._gridRows(), r = t ? n.findIndex((e) => e.includes(t)) : -1;
|
|
1143
|
+
if (!t || r === -1) return;
|
|
1144
|
+
let i = this._virtualDataIndex(t);
|
|
1145
|
+
if (i === void 0) return;
|
|
1146
|
+
let a = n[r].indexOf(t), o = e.ctrlKey || e.metaKey, s = this._rows.length - 1;
|
|
1147
|
+
if (o && e.code === "End") return {
|
|
1148
|
+
index: s,
|
|
1149
|
+
column: 2 ** 53 - 1
|
|
1150
|
+
};
|
|
1151
|
+
if (o && e.code === "Home") return {
|
|
1152
|
+
index: 0,
|
|
1153
|
+
column: 0
|
|
1154
|
+
};
|
|
1155
|
+
if (e.code === "ArrowDown" && r === n.length - 1 && i < s) return {
|
|
1156
|
+
index: i + 1,
|
|
1157
|
+
column: a
|
|
1158
|
+
};
|
|
1159
|
+
if (e.code === "ArrowUp" && r === 0 && i > 0) return {
|
|
1160
|
+
index: i - 1,
|
|
1161
|
+
column: a
|
|
1162
|
+
};
|
|
1163
|
+
}
|
|
1164
|
+
_virtualDataIndex(e) {
|
|
1165
|
+
let t = e.getRootNode(), n = (t instanceof ShadowRoot && t.host !== this ? t.host : e).closest(".row-group")?.dataset.index;
|
|
1166
|
+
if (!n) return;
|
|
1167
|
+
let r = Number(n);
|
|
1168
|
+
return Number.isInteger(r) ? r : void 0;
|
|
1169
|
+
}
|
|
1170
|
+
async _focusVirtualCell(e, t) {
|
|
1171
|
+
let n = await this._mountedVirtualRow(e);
|
|
1172
|
+
if (!n) return;
|
|
1173
|
+
await n.updateComplete, await this._refreshNavigation();
|
|
1174
|
+
let r = this._gridCells(n), i = r[Math.min(t, Math.max(r.length - 1, 0))];
|
|
1175
|
+
i && (this._activeCell = i, this.navigation.focusElement(i));
|
|
1176
|
+
}
|
|
1177
|
+
async _mountedVirtualRow(e) {
|
|
1178
|
+
let t = () => this._rowElements().find((t) => Number(t.closest(".row-group")?.dataset.index) === e);
|
|
1179
|
+
for (let n = 0; n < 8; n += 1) {
|
|
1180
|
+
this.virtualizer.scrollToIndex(e), await this.updateComplete, await new Promise((e) => {
|
|
1181
|
+
requestAnimationFrame(() => {
|
|
1182
|
+
e();
|
|
1183
|
+
});
|
|
1184
|
+
});
|
|
1185
|
+
let n = t();
|
|
1186
|
+
if (n) return n;
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
_gridCells(e) {
|
|
1190
|
+
return [
|
|
1191
|
+
e.shadowRoot?.querySelector("luzmo-table-checkbox-cell"),
|
|
1192
|
+
e.shadowRoot?.querySelector("luzmo-table-disclosure-cell"),
|
|
1193
|
+
...[...e.children].filter((e) => G(e) && W.has(e.localName))
|
|
1194
|
+
].filter((e) => e ? e.getAttribute("aria-hidden") !== "true" : !1);
|
|
1195
|
+
}
|
|
1196
|
+
_warnSlottedRows() {
|
|
1197
|
+
this._warnedSlottedRows || this._declarativeRows().length === 0 || (this._warnedSlottedRows = !0, console.warn("luzmo-table renders rows from `items`; slotted luzmo-table-row elements are ignored while `items` is set."));
|
|
1198
|
+
}
|
|
1199
|
+
async _refreshNavigation() {
|
|
1200
|
+
let e = this._head(), t = this._rowElements().map((e) => P(e)).filter((e) => !!e);
|
|
1201
|
+
await Promise.all([
|
|
1202
|
+
...e ? [e] : [],
|
|
1203
|
+
...this._rowElements(),
|
|
1204
|
+
...t
|
|
1205
|
+
].map((e) => e.updateComplete)), e && this.layout.syncHeadTabStops(), this.navigation.clearElementCache();
|
|
1206
|
+
let n = this._activeCell ? this.navigation.elements.indexOf(this._activeCell) : -1;
|
|
1207
|
+
n > -1 && (this.navigation.currentIndex = n);
|
|
1208
|
+
}
|
|
1209
|
+
_commitSelection(e) {
|
|
1210
|
+
let t = this.selected;
|
|
1211
|
+
this.selected = e, this.dispatchEvent(new Event("change", {
|
|
1212
|
+
bubbles: !0,
|
|
1213
|
+
composed: !0,
|
|
1214
|
+
cancelable: !0
|
|
1215
|
+
})) || (this.selected = t);
|
|
1216
|
+
}
|
|
1217
|
+
_toggleRow(e) {
|
|
1218
|
+
if (!e.selectable) return;
|
|
1219
|
+
let t = this._isDataMode ? e.value : e.value || String(this._declarativeRows().indexOf(e)), n = this.model.toggle(t);
|
|
1220
|
+
n && this._commitSelection(n);
|
|
1221
|
+
}
|
|
1222
|
+
_toggleAll() {
|
|
1223
|
+
this.selects === "multiple" && this._commitSelection(this.model.toggleAll(!this.model.allSelected));
|
|
1224
|
+
}
|
|
1225
|
+
_activateCell(e) {
|
|
1226
|
+
if (e.localName === "luzmo-table-head-cell" || !this.selects) return;
|
|
1227
|
+
let t = e;
|
|
1228
|
+
if (e.localName === "luzmo-table-checkbox-cell" && t.headCell) {
|
|
1229
|
+
this._toggleAll();
|
|
1230
|
+
return;
|
|
1231
|
+
}
|
|
1232
|
+
let n = e.parentElement ?? e.getRootNode().host;
|
|
1233
|
+
n?.localName === "luzmo-table-row" && this._toggleRow(n);
|
|
1234
|
+
}
|
|
1235
|
+
_cellFromPath(e) {
|
|
1236
|
+
return e.find((e) => G(e) && W.has(e.localName));
|
|
1237
|
+
}
|
|
1238
|
+
_gridElementFromPath(e) {
|
|
1239
|
+
return M(e) ?? e.find((e) => G(e) && (e.localName === "luzmo-table-disclosure-cell" || e.classList.contains("cell") && e.getAttribute("role") === "gridcell")) ?? this._cellFromPath(e);
|
|
1240
|
+
}
|
|
1241
|
+
};
|
|
1242
|
+
t([d({ reflect: !0 })], K.prototype, "role", void 0), t([d({ reflect: !0 })], K.prototype, "density", void 0), t([d({
|
|
1243
|
+
type: Boolean,
|
|
1244
|
+
reflect: !0
|
|
1245
|
+
})], K.prototype, "emphasized", void 0), t([d({
|
|
1246
|
+
type: Boolean,
|
|
1247
|
+
reflect: !0
|
|
1248
|
+
})], K.prototype, "quiet", void 0), t([d({
|
|
1249
|
+
type: Boolean,
|
|
1250
|
+
reflect: !0
|
|
1251
|
+
})], K.prototype, "scroller", void 0), t([d({ reflect: !0 })], K.prototype, "selects", void 0), t([d({ attribute: !1 })], K.prototype, "selected", void 0), t([d({
|
|
1252
|
+
reflect: !0,
|
|
1253
|
+
attribute: "select-all-label"
|
|
1254
|
+
})], K.prototype, "selectAllLabel", void 0), t([d({ attribute: !1 })], K.prototype, "items", void 0), t([d({ attribute: !1 })], K.prototype, "itemValue", void 0), t([d({ attribute: !1 })], K.prototype, "itemLabel", void 0), t([s({
|
|
1255
|
+
slot: "row",
|
|
1256
|
+
context: ["item", "index"],
|
|
1257
|
+
implicit: "item"
|
|
1258
|
+
})], K.prototype, "renderItem", void 0), t([d({ attribute: !1 })], K.prototype, "expanded", void 0), t([s({
|
|
1259
|
+
slot: "details",
|
|
1260
|
+
context: ["item", "index"],
|
|
1261
|
+
implicit: "item"
|
|
1262
|
+
})], K.prototype, "renderDetails", void 0), t([d({ attribute: !1 })], K.prototype, "columnWidths", void 0), t([d({ attribute: !1 })], K.prototype, "columns", void 0), t([d({
|
|
1263
|
+
type: Boolean,
|
|
1264
|
+
reflect: !0
|
|
1265
|
+
})], K.prototype, "virtualized", void 0), t([d({ attribute: !1 })], K.prototype, "labels", void 0), t([p()], K.prototype, "_sort", void 0), t([p()], K.prototype, "_clientSort", void 0), t([p()], K.prototype, "_lightDomVersion", void 0);
|
|
1266
|
+
//#endregion
|
|
1267
|
+
//#region src/components/table/table-body.module.scss?inline
|
|
1268
|
+
var We = ":host{box-sizing:border-box;min-block-size:0;min-inline-size:0;overflow-x:auto;overflow-y:var(--table-body-overflow,visible);overflow-anchor:none;outline:none;flex:auto;display:block}:host::-webkit-scrollbar{width:var(--luzmo-table-scrollbar-width,var(--table-body-scrollbar-width));height:var(--luzmo-table-scrollbar-width,var(--table-body-scrollbar-width))}:host::-webkit-scrollbar-track{background:var(--luzmo-table-scrollbar-track-background,var(--table-body-scrollbar-track-background));border-radius:var(--luzmo-table-scrollbar-track-border-radius,var(--table-body-scrollbar-track-border-radius))}:host::-webkit-scrollbar-thumb{background:var(--luzmo-table-scrollbar-thumb-background,var(--table-body-scrollbar-thumb-background));border-radius:var(--luzmo-table-scrollbar-thumb-border-radius,var(--table-body-scrollbar-thumb-border-radius))}:host::-webkit-scrollbar-thumb:hover{background:var(--luzmo-table-scrollbar-thumb-hover-background,var(--table-body-scrollbar-thumb-hover-background))}:host{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-table-scrollbar-thumb-background,var(--table-body-scrollbar-thumb-background)) var(--luzmo-table-scrollbar-track-background,var(--table-body-scrollbar-track-background))}::slotted(.row-group),::slotted(.virtual-spacer){min-inline-size:var(--table-min-inline-size,0);overflow-anchor:none;display:flow-root}:host(:focus-visible){outline:var(--table-body-focus-indicator-width) solid var(--highcontrast-table-body-focus-indicator-color,var(--table-body-focus-indicator-color));outline-offset:calc(var(--table-body-focus-indicator-width) * -1);border-end-end-radius:var(--table-corner-radius,0);border-end-start-radius:var(--table-corner-radius,0)}:host{--table-body-scrollbar-width:var(--luzmo-scrollbar-size);--table-body-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--table-body-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--table-body-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--table-body-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--table-body-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background);--table-body-focus-indicator-width:calc(var(--luzmo-indicator-width) * 2);--table-body-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-body-focus-indicator-color:Highlight}}", q = class extends e {
|
|
1269
|
+
static get styles() {
|
|
1270
|
+
return z(super.styles, We);
|
|
1271
|
+
}
|
|
1272
|
+
constructor() {
|
|
1273
|
+
super(), this.role = "rowgroup", this._handleScroll = () => {
|
|
1274
|
+
this.dispatchEvent(new Event("luzmo-table-body-scroll", {
|
|
1275
|
+
bubbles: !0,
|
|
1276
|
+
composed: !0
|
|
1277
|
+
}));
|
|
1278
|
+
}, this.addEventListener("scroll", this._handleScroll);
|
|
1279
|
+
}
|
|
1280
|
+
connectedCallback() {
|
|
1281
|
+
super.connectedCallback(), this.resizeObserver ??= new ResizeObserver(() => this._syncTabStop()), this.mutationObserver ??= new MutationObserver(() => this._syncTabStop()), this.resizeObserver.observe(this), this.mutationObserver.observe(this, { childList: !0 });
|
|
1282
|
+
}
|
|
1283
|
+
disconnectedCallback() {
|
|
1284
|
+
this.resizeObserver?.disconnect(), this.mutationObserver?.disconnect(), super.disconnectedCallback();
|
|
1285
|
+
}
|
|
1286
|
+
render() {
|
|
1287
|
+
return c`<slot @slotchange=${this._syncTabStop}></slot>`;
|
|
1288
|
+
}
|
|
1289
|
+
_syncTabStop() {
|
|
1290
|
+
this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
|
|
1291
|
+
}
|
|
1292
|
+
};
|
|
1293
|
+
t([d({ reflect: !0 })], q.prototype, "role", void 0);
|
|
1294
|
+
//#endregion
|
|
1295
|
+
//#region src/components/table/table-cell.module.scss?inline
|
|
1296
|
+
var Ge = ":host{box-sizing:border-box;min-inline-size:0;padding-block:var(--table-cell-padding-block);padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline));outline:none;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host([span-all]){grid-column:1/-1;border-inline-end-width:0!important}:host(:last-of-type){border-inline-end-width:0!important}.content{overflow-wrap:anywhere;min-inline-size:0;overflow:hidden}.content.clamped{-webkit-line-clamp:var(--table-cell-line-clamp);line-clamp:var(--table-cell-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}:host{--table-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-cell-focus-indicator-color:Highlight}}", J = class extends e {
|
|
1297
|
+
constructor(...e) {
|
|
1298
|
+
super(...e), this.role = "gridcell", this.spanAll = !1;
|
|
1299
|
+
}
|
|
1300
|
+
static get styles() {
|
|
1301
|
+
return z(super.styles, Ge);
|
|
1302
|
+
}
|
|
1303
|
+
willUpdate(e) {
|
|
1304
|
+
super.willUpdate(e), e.has("lineClamp") && !w(this.lineClamp) && (this.lineClamp = void 0);
|
|
1305
|
+
}
|
|
1306
|
+
render() {
|
|
1307
|
+
let e = w(this.lineClamp) ?? w(this.columnLineClamp);
|
|
1308
|
+
return c`
|
|
1309
|
+
<div
|
|
1310
|
+
class=${y({
|
|
1311
|
+
content: !0,
|
|
1312
|
+
clamped: e !== void 0
|
|
1313
|
+
})}
|
|
1314
|
+
style=${b(e ? { "--table-cell-line-clamp": String(e) } : {})}
|
|
1315
|
+
>
|
|
1316
|
+
<slot></slot>
|
|
1317
|
+
</div>
|
|
1318
|
+
`;
|
|
1319
|
+
}
|
|
1320
|
+
};
|
|
1321
|
+
t([d({ reflect: !0 })], J.prototype, "role", void 0), t([d({
|
|
1322
|
+
type: Number,
|
|
1323
|
+
reflect: !0,
|
|
1324
|
+
attribute: "line-clamp"
|
|
1325
|
+
})], J.prototype, "lineClamp", void 0), t([d({
|
|
1326
|
+
type: Boolean,
|
|
1327
|
+
reflect: !0,
|
|
1328
|
+
attribute: "span-all"
|
|
1329
|
+
})], J.prototype, "spanAll", void 0), t([p()], J.prototype, "columnLineClamp", void 0);
|
|
1330
|
+
//#endregion
|
|
1331
|
+
//#region src/components/table/table-checkbox-cell.module.scss?inline
|
|
1332
|
+
var Ke = ":host{flex:0 0 var(--table-checkbox-cell-inline-size);box-sizing:border-box;padding-block:var(--table-cell-padding-block);outline:none;justify-content:center;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-checkbox-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.checkbox{margin:0}.label{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host{--table-checkbox-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-checkbox-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-checkbox-cell-focus-indicator-color:Highlight}}", Y = class extends e {
|
|
1333
|
+
static get styles() {
|
|
1334
|
+
return z(super.styles, Ke);
|
|
1335
|
+
}
|
|
1336
|
+
constructor() {
|
|
1337
|
+
super(), this.role = "gridcell", this.headCell = !1, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.selectsSingle = !1, this.emphasized = !1, this.label = "", this.size = "m", this.handleClick = (e) => {
|
|
1338
|
+
!this.checkbox || e.composedPath().includes(this.checkbox) || this.checkbox.click();
|
|
1339
|
+
}, this.addEventListener("click", this.handleClick);
|
|
1340
|
+
}
|
|
1341
|
+
render() {
|
|
1342
|
+
return this.headCell && this.selectsSingle ? l : c`
|
|
1343
|
+
<luzmo-checkbox
|
|
1344
|
+
class="checkbox"
|
|
1345
|
+
tabindex="-1"
|
|
1346
|
+
size=${this.size}
|
|
1347
|
+
.checked=${this.checked}
|
|
1348
|
+
.indeterminate=${this.indeterminate}
|
|
1349
|
+
?disabled=${this.disabled}
|
|
1350
|
+
?emphasized=${this.emphasized}
|
|
1351
|
+
aria-hidden=${v(this.selectsSingle ? "true" : void 0)}
|
|
1352
|
+
>
|
|
1353
|
+
${this.label ? c`<span class="label">${this.label}</span>` : l}
|
|
1354
|
+
</luzmo-checkbox>
|
|
1355
|
+
`;
|
|
1356
|
+
}
|
|
1357
|
+
willUpdate(e) {
|
|
1358
|
+
super.willUpdate(e), (e.has("headCell") || e.has("selectsSingle")) && (this.role = this.headCell && !this.selectsSingle ? "columnheader" : "gridcell"), e.has("selectsSingle") && (this.selectsSingle ? (this.setAttribute("aria-hidden", "true"), this.tabIndex = -1) : this.removeAttribute("aria-hidden"));
|
|
1359
|
+
}
|
|
1360
|
+
};
|
|
1361
|
+
t([d({ reflect: !0 })], Y.prototype, "role", void 0), t([d({
|
|
1362
|
+
type: Boolean,
|
|
1363
|
+
reflect: !0,
|
|
1364
|
+
attribute: "head-cell"
|
|
1365
|
+
})], Y.prototype, "headCell", void 0), t([d({
|
|
1366
|
+
type: Boolean,
|
|
1367
|
+
reflect: !0
|
|
1368
|
+
})], Y.prototype, "checked", void 0), t([d({
|
|
1369
|
+
type: Boolean,
|
|
1370
|
+
reflect: !0
|
|
1371
|
+
})], Y.prototype, "indeterminate", void 0), t([d({
|
|
1372
|
+
type: Boolean,
|
|
1373
|
+
reflect: !0
|
|
1374
|
+
})], Y.prototype, "disabled", void 0), t([d({
|
|
1375
|
+
type: Boolean,
|
|
1376
|
+
reflect: !0,
|
|
1377
|
+
attribute: "selects-single"
|
|
1378
|
+
})], Y.prototype, "selectsSingle", void 0), t([d({
|
|
1379
|
+
type: Boolean,
|
|
1380
|
+
reflect: !0
|
|
1381
|
+
})], Y.prototype, "emphasized", void 0), t([d({ reflect: !0 })], Y.prototype, "label", void 0), t([p()], Y.prototype, "size", void 0), t([f("luzmo-checkbox")], Y.prototype, "checkbox", void 0);
|
|
1382
|
+
//#endregion
|
|
1383
|
+
//#region src/components/table/table-head.module.scss?inline
|
|
1384
|
+
var qe = ":host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;min-block-size:calc(var(--luzmo-table-row-min-block-size,var(--table-row-min-block-size)) + var(--table-row-density-offset));background-color:var(--table-head-background-color);flex:none;align-items:stretch;display:grid;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-head-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-head-divider-color,var(--luzmo-table-border-color,var(--table-head-divider-color)))!important}luzmo-table-checkbox-cell,.leading::slotted(luzmo-table-head-cell:first-of-type){--table-focus-start-start-radius:var(--table-corner-radius)}.disclosure-spacer{box-sizing:border-box;inline-size:var(--table-disclosure-cell-inline-size);align-self:stretch;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host{--table-head-background-color:rgba(var(--luzmo-background-color-rgb), 0);--table-head-divider-color:var(--luzmo-border-color);--table-head-divider-width:var(--luzmo-border-width)}@media (forced-colors:active){:host{--highcontrast-table-head-divider-color:CanvasText}}", X = class extends e {
|
|
1385
|
+
static get styles() {
|
|
1386
|
+
return z(super.styles, qe);
|
|
1387
|
+
}
|
|
1388
|
+
constructor() {
|
|
1389
|
+
super(), this.role = "row", this.selected = !1, this.checked = !1, this.indeterminate = !1, this.emphasized = !1, this.checkboxLabel = "", this.checkboxSize = "m", this.expandable = !1, this.handleSorted = (e) => {
|
|
1390
|
+
if (e.defaultPrevented) return;
|
|
1391
|
+
let t = e.target;
|
|
1392
|
+
for (let e of this.querySelectorAll(":scope > luzmo-table-head-cell")) e !== t && (e.sortDirection = void 0);
|
|
1393
|
+
}, this.addEventListener("luzmo-table-sorted", this.handleSorted);
|
|
1394
|
+
}
|
|
1395
|
+
render() {
|
|
1396
|
+
return c`${this.selects ? c`
|
|
1397
|
+
<luzmo-table-checkbox-cell
|
|
1398
|
+
head-cell
|
|
1399
|
+
.checked=${this.checked}
|
|
1400
|
+
.indeterminate=${this.indeterminate}
|
|
1401
|
+
.selectsSingle=${this.selects === "single"}
|
|
1402
|
+
.emphasized=${this.emphasized}
|
|
1403
|
+
.label=${this.checkboxLabel}
|
|
1404
|
+
.size=${this.checkboxSize}
|
|
1405
|
+
></luzmo-table-checkbox-cell>
|
|
1406
|
+
` : l}${this.expandable ? c`<span class="disclosure-spacer" role="gridcell"></span>` : l}<slot
|
|
1407
|
+
class=${!this.selects && !this.expandable ? "leading" : ""}
|
|
1408
|
+
></slot>`;
|
|
1409
|
+
}
|
|
1410
|
+
};
|
|
1411
|
+
t([d({ reflect: !0 })], X.prototype, "role", void 0), t([d({
|
|
1412
|
+
type: Boolean,
|
|
1413
|
+
reflect: !0
|
|
1414
|
+
})], X.prototype, "selected", void 0), t([p()], X.prototype, "selects", void 0), t([p()], X.prototype, "checked", void 0), t([p()], X.prototype, "indeterminate", void 0), t([p()], X.prototype, "emphasized", void 0), t([p()], X.prototype, "checkboxLabel", void 0), t([p()], X.prototype, "checkboxSize", void 0), t([p()], X.prototype, "expandable", void 0);
|
|
1415
|
+
//#endregion
|
|
1416
|
+
//#region src/components/table/table-head-cell.module.scss?inline
|
|
1417
|
+
var Je = ":host{align-self:stretch;align-items:center;gap:var(--luzmo-spacing-2);box-sizing:border-box;min-inline-size:0;padding-block:var(--table-cell-padding-block);padding-inline:var(--luzmo-table-cell-padding-inline,var(--table-cell-padding-inline));font-weight:var(--table-head-cell-font-weight);color:var(--table-head-cell-font-color);text-align:start;outline:none;display:flex;position:relative;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:last-of-type){--table-focus-start-end-radius:var(--table-corner-radius);border-inline-end-width:0!important}.content{overflow-wrap:anywhere;flex:auto;min-inline-size:0;overflow:hidden}.content.clamped{-webkit-line-clamp:var(--table-cell-line-clamp);line-clamp:var(--table-cell-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.resize-handle{z-index:1;inline-size:var(--luzmo-component-height-xs);box-sizing:border-box;cursor:col-resize;touch-action:none;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--luzmo-spacing-4) * -1)}.resize-handle:before{content:\"\";inline-size:var(--luzmo-indicator-gap,2px);background:var(--luzmo-indicator-color,currentColor);opacity:0}.resize-handle:hover:before,.resize-handle:active:before,.resize-handle:focus-visible:before{opacity:1}:host(:last-of-type) .resize-handle{justify-content:flex-end;inset-inline-end:0}.resize-handle:focus,.resize-handle:focus-visible{outline:none}:host([sortable]){cursor:pointer;-webkit-user-select:none;user-select:none}:host([sortable]:hover){color:var(--table-head-cell-font-color-hover)}:host([active]){color:var(--table-head-cell-font-color-down)}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-head-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.sort-icon{inline-size:var(--table-sort-icon-size);block-size:var(--table-sort-icon-size);flex:none;display:inline-flex}.sort-icon svg{fill:currentColor;block-size:100%;inline-size:100%}@media (forced-colors:active){.resize-handle:before{background:canvastext}}:host{--table-head-cell-font-weight:var(--luzmo-font-weight-bold);--table-head-cell-font-color:var(--luzmo-font-color);--table-head-cell-font-color-hover:var(--luzmo-font-color-hover);--table-head-cell-font-color-down:var(--luzmo-font-color-down);--table-head-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-head-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-head-cell-focus-indicator-color:Highlight}}", Z = class extends e {
|
|
1418
|
+
static get styles() {
|
|
1419
|
+
return z(super.styles, Je);
|
|
1420
|
+
}
|
|
1421
|
+
constructor() {
|
|
1422
|
+
super(), this.role = "columnheader", this.active = !1, this.sortable = !1, this.sortKey = "", this.columnId = "", this.resizable = !1, this.currentWidth = 0, this.resizeLabel = "", this.handleClick = (e) => {
|
|
1423
|
+
e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("resize-handle")) || this._sort();
|
|
1424
|
+
}, this.handleKeydown = (e) => {
|
|
1425
|
+
!this.sortable || e.composedPath()[0] !== this || (e.code === "Enter" || e.code === "NumpadEnter" ? (e.preventDefault(), this._sort()) : e.code === "Space" && (e.preventDefault(), this.active = !0));
|
|
1426
|
+
}, this.handleKeyup = (e) => {
|
|
1427
|
+
e.code !== "Space" || !this.active || (this.active = !1, this._sort());
|
|
1428
|
+
}, this.handleBlur = () => {
|
|
1429
|
+
this.active = !1;
|
|
1430
|
+
}, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("blur", this.handleBlur);
|
|
1431
|
+
}
|
|
1432
|
+
toLayout(e) {
|
|
1433
|
+
return {
|
|
1434
|
+
id: this.columnId || this.sortKey || `column-${e}`,
|
|
1435
|
+
header: this.textContent?.trim() || this.columnId || this.sortKey,
|
|
1436
|
+
width: w(this.width),
|
|
1437
|
+
minWidth: w(this.minWidth),
|
|
1438
|
+
maxWidth: w(this.maxWidth),
|
|
1439
|
+
resizable: this.resizable,
|
|
1440
|
+
lineClamp: w(this.lineClamp)
|
|
1441
|
+
};
|
|
1442
|
+
}
|
|
1443
|
+
render() {
|
|
1444
|
+
let e = w(this.lineClamp), t = this.sortable && this.sortDirection ? c`<span class="sort-icon" aria-hidden="true"
|
|
1445
|
+
>${_(this.sortDirection === "asc" ? g : h)}</span
|
|
1446
|
+
>` : l, n = this.toLayout(0), r = this.resizable ? c`
|
|
1447
|
+
<div
|
|
1448
|
+
class="resize-handle"
|
|
1449
|
+
tabindex="0"
|
|
1450
|
+
role="separator"
|
|
1451
|
+
aria-orientation="vertical"
|
|
1452
|
+
aria-valuemin=${E(n)}
|
|
1453
|
+
aria-valuemax=${D(n)}
|
|
1454
|
+
aria-valuenow=${Math.round(this.currentWidth)}
|
|
1455
|
+
aria-label=${v(this.resizeLabel || void 0)}
|
|
1456
|
+
aria-keyshortcuts="ArrowLeft ArrowRight PageUp PageDown Home End"
|
|
1457
|
+
></div>
|
|
1458
|
+
` : l;
|
|
1459
|
+
return c`
|
|
1460
|
+
<div
|
|
1461
|
+
class=${y({
|
|
1462
|
+
content: !0,
|
|
1463
|
+
clamped: e !== void 0
|
|
1464
|
+
})}
|
|
1465
|
+
style=${b(e ? { "--table-cell-line-clamp": String(e) } : {})}
|
|
1466
|
+
>
|
|
1467
|
+
<slot></slot>
|
|
1468
|
+
</div>
|
|
1469
|
+
${t}${r}
|
|
1470
|
+
`;
|
|
1471
|
+
}
|
|
1472
|
+
updated(e) {
|
|
1473
|
+
super.updated(e), (e.has("sortable") || e.has("sortDirection")) && (this.sortable ? this.setAttribute("aria-sort", ye(this.sortDirection)) : this.removeAttribute("aria-sort"));
|
|
1474
|
+
}
|
|
1475
|
+
_sort() {
|
|
1476
|
+
this.sortable && (this.sortDirection = be(this.sortDirection), this.dispatchEvent(new CustomEvent("luzmo-table-sorted", {
|
|
1477
|
+
bubbles: !0,
|
|
1478
|
+
composed: !0,
|
|
1479
|
+
cancelable: !0,
|
|
1480
|
+
detail: {
|
|
1481
|
+
sortKey: this.sortKey,
|
|
1482
|
+
sortDirection: this.sortDirection
|
|
1483
|
+
}
|
|
1484
|
+
})));
|
|
1485
|
+
}
|
|
1486
|
+
};
|
|
1487
|
+
t([d({ reflect: !0 })], Z.prototype, "role", void 0), t([d({
|
|
1488
|
+
type: Boolean,
|
|
1489
|
+
reflect: !0
|
|
1490
|
+
})], Z.prototype, "active", void 0), t([d({
|
|
1491
|
+
type: Boolean,
|
|
1492
|
+
reflect: !0
|
|
1493
|
+
})], Z.prototype, "sortable", void 0), t([d({
|
|
1494
|
+
reflect: !0,
|
|
1495
|
+
attribute: "sort-direction"
|
|
1496
|
+
})], Z.prototype, "sortDirection", void 0), t([d({
|
|
1497
|
+
reflect: !0,
|
|
1498
|
+
attribute: "sort-key"
|
|
1499
|
+
})], Z.prototype, "sortKey", void 0), t([d({
|
|
1500
|
+
reflect: !0,
|
|
1501
|
+
attribute: "column-id"
|
|
1502
|
+
})], Z.prototype, "columnId", void 0), t([d({
|
|
1503
|
+
type: Number,
|
|
1504
|
+
reflect: !0
|
|
1505
|
+
})], Z.prototype, "width", void 0), t([d({
|
|
1506
|
+
type: Number,
|
|
1507
|
+
reflect: !0,
|
|
1508
|
+
attribute: "min-width"
|
|
1509
|
+
})], Z.prototype, "minWidth", void 0), t([d({
|
|
1510
|
+
type: Number,
|
|
1511
|
+
reflect: !0,
|
|
1512
|
+
attribute: "max-width"
|
|
1513
|
+
})], Z.prototype, "maxWidth", void 0), t([d({
|
|
1514
|
+
type: Boolean,
|
|
1515
|
+
reflect: !0
|
|
1516
|
+
})], Z.prototype, "resizable", void 0), t([d({
|
|
1517
|
+
type: Number,
|
|
1518
|
+
reflect: !0,
|
|
1519
|
+
attribute: "line-clamp"
|
|
1520
|
+
})], Z.prototype, "lineClamp", void 0), t([p()], Z.prototype, "currentWidth", void 0), t([p()], Z.prototype, "resizeLabel", void 0);
|
|
1521
|
+
//#endregion
|
|
1522
|
+
//#region src/components/table/table-disclosure-cell.module.scss?inline
|
|
1523
|
+
var Ye = ":host{flex:0 0 var(--table-disclosure-cell-inline-size);box-sizing:border-box;min-inline-size:var(--table-disclosure-cell-inline-size);outline:none;justify-content:center;align-self:stretch;align-items:center;display:flex;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}:host(:focus-visible){outline:var(--luzmo-indicator-width,2px) solid var(--highcontrast-table-disclosure-cell-focus-indicator-color,var(--luzmo-indicator-color,currentColor));outline-offset:calc(var(--luzmo-indicator-width,2px) * -1);border-start-start-radius:var(--table-focus-start-start-radius,0);border-start-end-radius:var(--table-focus-start-end-radius,0);border-end-end-radius:var(--table-focus-end-end-radius,0);border-end-start-radius:var(--table-focus-end-start-radius,0)}.button{block-size:100%;inline-size:100%;min-inline-size:var(--luzmo-component-height-xs);min-block-size:var(--luzmo-component-height-xs);background:rgba(var(--luzmo-background-color-rgb), 0);color:inherit;cursor:pointer;border:0;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.icon{inline-size:var(--table-sort-icon-size);block-size:var(--table-sort-icon-size);display:inline-flex;transform:rotate(-90deg)}.icon svg{fill:currentColor;block-size:100%;inline-size:100%}:host([expanded]) .icon{transform:rotate(0)}:host([dir=rtl]:not([expanded])) .icon{transform:rotate(90deg)}@media (prefers-reduced-motion:no-preference){.icon{transition:transform var(--luzmo-animation-duration) ease}}:host{--table-disclosure-cell-focus-indicator-width:var(--luzmo-indicator-width);--table-disclosure-cell-focus-indicator-color:var(--luzmo-indicator-color)}@media (forced-colors:active){:host{--highcontrast-table-disclosure-cell-focus-indicator-color:Highlight}}", Q = class extends e {
|
|
1524
|
+
constructor(...e) {
|
|
1525
|
+
super(...e), this.role = "gridcell", this.expanded = !1, this.label = "";
|
|
1526
|
+
}
|
|
1527
|
+
static get styles() {
|
|
1528
|
+
return z(super.styles, Ye);
|
|
1529
|
+
}
|
|
1530
|
+
render() {
|
|
1531
|
+
return c`
|
|
1532
|
+
<button
|
|
1533
|
+
type="button"
|
|
1534
|
+
class="button"
|
|
1535
|
+
tabindex="-1"
|
|
1536
|
+
aria-expanded=${String(this.expanded)}
|
|
1537
|
+
aria-label=${v(this.label || void 0)}
|
|
1538
|
+
>
|
|
1539
|
+
<span class="icon" aria-hidden="true"
|
|
1540
|
+
>${_(m)}</span
|
|
1541
|
+
>
|
|
1542
|
+
</button>
|
|
1543
|
+
`;
|
|
1544
|
+
}
|
|
1545
|
+
};
|
|
1546
|
+
t([d({ reflect: !0 })], Q.prototype, "role", void 0), t([d({
|
|
1547
|
+
type: Boolean,
|
|
1548
|
+
reflect: !0
|
|
1549
|
+
})], Q.prototype, "expanded", void 0), t([d({ reflect: !0 })], Q.prototype, "label", void 0);
|
|
1550
|
+
//#endregion
|
|
1551
|
+
//#region src/components/table/table-row.module.scss?inline
|
|
1552
|
+
var Xe = ":host{grid-template-columns:var(--table-grid-columns);min-inline-size:var(--table-min-inline-size,0);box-sizing:border-box;min-block-size:calc(var(--luzmo-table-row-min-block-size,var(--table-row-min-block-size)) + var(--table-row-density-offset));align-items:stretch;display:grid;border-block-start:none!important;border-inline:none!important;border-block-end-width:var(--table-row-divider-width)!important;border-block-end-style:solid!important;border-block-end-color:var(--highcontrast-table-row-divider-color,var(--luzmo-table-border-color,var(--table-row-divider-color)))!important}:host([data-last-row]:not([expanded])){border-block-end-width:0!important}:host([data-last-row]:not([expanded])) .leading:not(slot),:host([data-last-row]:not([expanded])) slot.leading::slotted(luzmo-table-cell:first-of-type){--table-focus-end-start-radius:var(--table-corner-radius)}:host([data-last-row]:not([expanded])) ::slotted(luzmo-table-cell:last-of-type){--table-focus-end-end-radius:var(--table-corner-radius)}:host([selectable]){cursor:pointer}:host([selectable]:hover){background-color:var(--table-row-hover-background-color)}:host([selected]){background-color:var(--luzmo-table-row-selected-background-color,var(--table-row-selected-background-color))}:host([selected]:hover){background-color:var(--luzmo-table-row-selected-background-color,var(--table-row-selected-hover-background-color))}.selection-spacer{inline-size:var(--table-checkbox-cell-inline-size)}.selection-spacer,.disclosure-spacer{box-sizing:border-box;align-self:stretch;border-block:none!important;border-inline-start:none!important;border-inline-end-width:var(--luzmo-table-column-divider-width,var(--table-column-divider-width))!important;border-inline-end-style:solid!important;border-inline-end-color:var(--highcontrast-table-column-divider-color,var(--luzmo-table-column-divider-color,var(--table-column-divider-color)))!important}.disclosure-spacer{inline-size:var(--table-disclosure-cell-inline-size)}@media (forced-colors:active){:host([selected]){forced-color-adjust:none;color:highlighttext;background-color:highlight}}:host{--table-row-divider-color:var(--luzmo-border-color);--table-row-divider-width:var(--luzmo-border-width);--table-row-hover-background-color:var(--luzmo-background-color-hover)}@media (forced-colors:active){:host{--highcontrast-table-row-divider-color:CanvasText}}", $ = class extends e {
|
|
1553
|
+
constructor(...e) {
|
|
1554
|
+
super(...e), this.role = "row", this.value = "", this.selected = !1, this.selectable = !1, this.expanded = !1, this.expandable = !1, this.selectsSingle = !1, this.emphasized = !1, this.selectionColumn = !1, this.expansionColumn = !1, this.spanAll = !1, this.checkboxLabel = "", this.disclosureLabel = "", this.detailsId = "", this.checkboxSize = "m";
|
|
1555
|
+
}
|
|
1556
|
+
static get styles() {
|
|
1557
|
+
return z(super.styles, Xe);
|
|
1558
|
+
}
|
|
1559
|
+
render() {
|
|
1560
|
+
if (this.spanAll) return c`<slot class="leading"></slot>`;
|
|
1561
|
+
let e = this.selectable || this.selectionColumn, t = !e && (this.expandable || this.expansionColumn), n = l;
|
|
1562
|
+
this.selectable ? n = c`
|
|
1563
|
+
<luzmo-table-checkbox-cell
|
|
1564
|
+
class="leading"
|
|
1565
|
+
.checked=${this.selected}
|
|
1566
|
+
.selectsSingle=${this.selectsSingle}
|
|
1567
|
+
.emphasized=${this.emphasized}
|
|
1568
|
+
.label=${this.checkboxLabel}
|
|
1569
|
+
.size=${this.checkboxSize}
|
|
1570
|
+
></luzmo-table-checkbox-cell>
|
|
1571
|
+
` : this.selectionColumn && (n = c`<span class="selection-spacer"></span>`);
|
|
1572
|
+
let r = l;
|
|
1573
|
+
return this.expandable ? r = c`
|
|
1574
|
+
<luzmo-table-disclosure-cell
|
|
1575
|
+
class=${t ? "leading" : ""}
|
|
1576
|
+
.expanded=${this.expanded}
|
|
1577
|
+
.label=${this.disclosureLabel}
|
|
1578
|
+
></luzmo-table-disclosure-cell>
|
|
1579
|
+
` : this.expansionColumn && (r = c`<span class="disclosure-spacer"></span>`), c`${n}${r}<slot
|
|
1580
|
+
class=${!e && !t ? "leading" : ""}
|
|
1581
|
+
></slot>`;
|
|
1582
|
+
}
|
|
1583
|
+
updated(e) {
|
|
1584
|
+
super.updated(e), (e.has("selectable") || e.has("selected")) && (this.selectable ? this.setAttribute("aria-selected", String(this.selected)) : this.removeAttribute("aria-selected")), (e.has("expandable") || e.has("expanded") || e.has("detailsId")) && (this.expandable && this.detailsId ? this.setAttribute("aria-controls", this.detailsId) : this.removeAttribute("aria-controls"));
|
|
1585
|
+
}
|
|
1586
|
+
};
|
|
1587
|
+
t([d({ reflect: !0 })], $.prototype, "role", void 0), t([d({ reflect: !0 })], $.prototype, "value", void 0), t([d({
|
|
1588
|
+
type: Boolean,
|
|
1589
|
+
reflect: !0
|
|
1590
|
+
})], $.prototype, "selected", void 0), t([d({
|
|
1591
|
+
type: Boolean,
|
|
1592
|
+
reflect: !0
|
|
1593
|
+
})], $.prototype, "selectable", void 0), t([d({
|
|
1594
|
+
type: Boolean,
|
|
1595
|
+
reflect: !0
|
|
1596
|
+
})], $.prototype, "expanded", void 0), t([d({
|
|
1597
|
+
type: Boolean,
|
|
1598
|
+
reflect: !0
|
|
1599
|
+
})], $.prototype, "expandable", void 0), t([p()], $.prototype, "selectsSingle", void 0), t([p()], $.prototype, "emphasized", void 0), t([p()], $.prototype, "selectionColumn", void 0), t([p()], $.prototype, "expansionColumn", void 0), t([p()], $.prototype, "spanAll", void 0), t([p()], $.prototype, "checkboxLabel", void 0), t([p()], $.prototype, "disclosureLabel", void 0), t([p()], $.prototype, "detailsId", void 0), t([p()], $.prototype, "checkboxSize", void 0), typeof customElements < "u" && !customElements.get("luzmo-table") && customElements.define("luzmo-table", K), typeof customElements < "u" && !customElements.get("luzmo-table-head") && customElements.define("luzmo-table-head", X), typeof customElements < "u" && !customElements.get("luzmo-table-head-cell") && customElements.define("luzmo-table-head-cell", Z), typeof customElements < "u" && !customElements.get("luzmo-table-body") && customElements.define("luzmo-table-body", q), typeof customElements < "u" && !customElements.get("luzmo-table-row") && customElements.define("luzmo-table-row", $), typeof customElements < "u" && !customElements.get("luzmo-table-cell") && customElements.define("luzmo-table-cell", J), typeof customElements < "u" && !customElements.get("luzmo-table-checkbox-cell") && customElements.define("luzmo-table-checkbox-cell", Y), typeof customElements < "u" && !customElements.get("luzmo-table-disclosure-cell") && customElements.define("luzmo-table-disclosure-cell", Q), typeof customElements < "u" && !customElements.get("luzmo-table-row-details") && customElements.define("luzmo-table-row-details", B);
|
|
1600
|
+
//#endregion
|
|
1601
|
+
export { Y as a, K as c, X as i, B as l, Q as n, J as o, Z as r, q as s, $ as t, k as u };
|