@nysds/nys-table 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nys-table.js +181 -0
- package/dist/nys-table.js.map +1 -0
- package/package.json +43 -0
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { LitElement as v, unsafeCSS as g, html as _ } from "lit";
|
|
2
|
+
import { property as h, state as u } from "lit/decorators.js";
|
|
3
|
+
const x = ':host{--_nys-table-width: 100%;--_nys-table-radius: var(--nys-radius-xl, 12px);--_nys-table-padding: var(--nys-space-100, 8px);--_nys-table-border-color: transparent;--_nys-table-border-width: 0;--_nys-table-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif ) );--_nys-table-font-size: var(--nys-font-size-ui-md, 16px);--_nys-table-font-weight: var(--nys-font-weight-regular, 400);--_nys-table-line-height: 16px;--_nys-table-padding--caption: var(--nys-space-250, 20px) var(--nys-space-150, 12px);--_nys-table-font-size--caption: var(--nys-font-size-ui-lg, 18px);--_nys-table-font-weight--caption: var(--nys-font-weight-bold, 700);--_nys-table-padding--cell--x: var(--nys-space-150, 12px);--_nys-table-padding--cell--y: var(--nys-space-200, 16px);--_nys-table-background-color: var(--nys-color-ink-reverse, #fff);--_nys-table-background-color--striped: var(--nys-color-neutral-10, #f6f6f6)}:host([bordered]){--_nys-table-border-color: var(--nys-color-neutral-100, #d0d0ce);--_nys-table-border-width: var(--nys-space-1px, 1px)}:host([download]){display:flex;flex-direction:column;gap:var(--nys-space-150, 12px)}.nys-table{width:var(--_nys-table-width);font:var(--_nys-table-font-weight) var(--_nys-table-font-size)/var(--_nys-table-line-height) var(--_nys-table-font-family)}.nys-table table{width:var(--_nys-table-width);border-collapse:collapse;background-color:var(--_nys-table-background-color)}.nys-table caption{padding:var(--_nys-table-padding--caption);font-size:var(--_nys-table-font-size--caption);font-weight:var(--_nys-table-font-weight--caption);text-align:start}.nys-table caption div{display:flex;justify-content:space-between;align-items:center}.nys-table td{padding:var(--_nys-table-padding--cell--y) var(--_nys-table-padding--cell--x);border:var(--_nys-table-border-width) solid var(--_nys-table-border-color)}.nys-table th{border:var(--_nys-table-border-width) solid var(--_nys-table-border-color);overflow:hidden;text-overflow:ellipsis;padding:var(--_nys-table-padding--cell--y) var(--_nys-table-padding--cell--x)}.nys-table th:has(nys-button){padding:0}.nys-table th p{margin:0}.nys-table th nys-button{margin:0;width:auto;justify-content:space-between;--_nys-button-border-width: 0;--_nys-button-border-radius--start: 0;--_nys-button-border-radius--end: 0;--_nys-button-padding--x: var(--_nys-table-padding--cell--x);--_nys-button-justify-content: space-between;--_nys-button-outline-offset: -2px}.nys-table th.nys-table__sortedcolumn{background-color:var(--nys-color-theme-weak, #cddde9)}.nys-table td.nys-table__sortedcolumn{position:relative;z-index:0}.nys-table td.nys-table__sortedcolumn:after{content:"";position:absolute;inset:0;background-color:var(--nys-color-theme, #154973);opacity:.1;pointer-events:none;z-index:-1}:host([striped]) .nys-table tbody tr:nth-child(odd){background-color:var(--_nys-table-background-color--striped)}:host([sortable]) .nys-table th{cursor:pointer}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;margin:-1px!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}';
|
|
4
|
+
var w = Object.defineProperty, c = (m, t, r, s) => {
|
|
5
|
+
for (var e = void 0, n = m.length - 1, o; n >= 0; n--)
|
|
6
|
+
(o = m[n]) && (e = o(t, r, e) || e);
|
|
7
|
+
return e && w(t, r, e), e;
|
|
8
|
+
};
|
|
9
|
+
let C = 0;
|
|
10
|
+
const f = class f extends v {
|
|
11
|
+
/**************** Lifecycle Methods ****************/
|
|
12
|
+
constructor() {
|
|
13
|
+
super(), this.id = "", this.name = "", this.striped = !1, this.sortable = !1, this.bordered = !1, this.download = "", this._sortColumn = null, this._sortDirection = "none", this._captionText = "";
|
|
14
|
+
}
|
|
15
|
+
// Generate a unique ID if one is not provided
|
|
16
|
+
connectedCallback() {
|
|
17
|
+
super.connectedCallback(), this.id || (this.id = `nys-table-${Date.now()}-${C++}`);
|
|
18
|
+
}
|
|
19
|
+
/******************** Functions ********************/
|
|
20
|
+
// Placeholder for generic functions (component-specific)
|
|
21
|
+
firstUpdated() {
|
|
22
|
+
this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", () => this._handleSlotChange()), this._handleSlotChange();
|
|
23
|
+
}
|
|
24
|
+
_handleSlotChange() {
|
|
25
|
+
const t = this.shadowRoot?.querySelector(
|
|
26
|
+
"slot"
|
|
27
|
+
), r = this.shadowRoot?.querySelector(
|
|
28
|
+
".nys-table"
|
|
29
|
+
);
|
|
30
|
+
if (!t || !r) return;
|
|
31
|
+
r.innerHTML = "", t.assignedElements({ flatten: !0 }).forEach((e) => {
|
|
32
|
+
if (e.tagName === "TABLE") {
|
|
33
|
+
const n = e.cloneNode(!0);
|
|
34
|
+
this._normalizeTable(n), this.sortable && this._addSortIcons(n), r.appendChild(n);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
_normalizeTable(t) {
|
|
39
|
+
const r = t.querySelector("thead"), s = t.querySelector("tbody");
|
|
40
|
+
if (r && s) return;
|
|
41
|
+
let e = t.querySelector(
|
|
42
|
+
"caption"
|
|
43
|
+
);
|
|
44
|
+
e?.textContent?.trim() ? this._captionText = e.textContent.trim() : this._captionText = "";
|
|
45
|
+
const n = Array.from(t.querySelectorAll("tr"));
|
|
46
|
+
if (n.length === 0) return;
|
|
47
|
+
const o = document.createElement("thead"), l = document.createElement("tbody"), p = n.findIndex((a) => a.querySelector("th"));
|
|
48
|
+
if (p === -1)
|
|
49
|
+
n.forEach((a) => l.appendChild(a));
|
|
50
|
+
else {
|
|
51
|
+
const a = n[p];
|
|
52
|
+
a.querySelectorAll("th").forEach((y) => {
|
|
53
|
+
Array.from(y.childNodes).forEach((d) => {
|
|
54
|
+
if (d.nodeType === Node.TEXT_NODE && d.textContent?.trim()) {
|
|
55
|
+
const b = document.createElement("p");
|
|
56
|
+
b.textContent = d.textContent, y.replaceChild(b, d);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}), o.appendChild(a), n.forEach((y, d) => {
|
|
60
|
+
d !== p && l.appendChild(y);
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
if (t.innerHTML = "", this.sortable) {
|
|
64
|
+
e || (e = document.createElement("caption"), e.style.padding = "0");
|
|
65
|
+
const a = document.createElement("span");
|
|
66
|
+
a.setAttribute("class", "sr-only"), a.textContent = "Column headers with buttons are sortable.", e.appendChild(a);
|
|
67
|
+
}
|
|
68
|
+
e && t.appendChild(e), t.appendChild(o), t.appendChild(l);
|
|
69
|
+
}
|
|
70
|
+
_addSortIcons(t) {
|
|
71
|
+
const r = Array.from(t.querySelectorAll("thead th"));
|
|
72
|
+
r.length !== 0 && r.forEach((s, e) => {
|
|
73
|
+
if (s.querySelector("nys-button[part='sort-button']")) return;
|
|
74
|
+
const n = s.textContent?.trim();
|
|
75
|
+
if (!n) return;
|
|
76
|
+
s.textContent = "";
|
|
77
|
+
const o = document.createElement("nys-button");
|
|
78
|
+
o.setAttribute("part", "sort-button"), o.setAttribute("variant", "ghost"), o.setAttribute("label", n), o.setAttribute("suffixIcon", "slotted"), o.setAttribute("fullWidth", "true");
|
|
79
|
+
const l = document.createElement("nys-icon");
|
|
80
|
+
l.setAttribute("slot", "suffix-icon"), l.setAttribute("name", "height"), l.setAttribute("size", "24"), l.setAttribute("color", "var(--nys-color-text-weak, #4a4d4f)"), o.appendChild(l), o.addEventListener("nys-click", (p) => {
|
|
81
|
+
p.stopPropagation(), this._onSortClick(e, t);
|
|
82
|
+
}), s.appendChild(o);
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
_updateSortIcons(t) {
|
|
86
|
+
t.querySelectorAll("thead th").forEach((s, e) => {
|
|
87
|
+
const n = s.querySelector("nys-button[part='sort-button']"), o = n?.querySelector(
|
|
88
|
+
"nys-icon[slot='suffix-icon']"
|
|
89
|
+
);
|
|
90
|
+
if (!(!n || !o))
|
|
91
|
+
if (e === this._sortColumn)
|
|
92
|
+
switch (s.classList.add("nys-table__sortedcolumn"), this._sortDirection) {
|
|
93
|
+
case "asc":
|
|
94
|
+
o.setAttribute("name", "straight"), o.setAttribute("color", "var(--nys-color-ink, #1b1b1b)"), o.style.transform = "rotate(0deg)", s.setAttribute("aria-sort", "ascending");
|
|
95
|
+
break;
|
|
96
|
+
case "desc":
|
|
97
|
+
o.setAttribute("name", "straight"), o.setAttribute("color", "var(--nys-color-ink, #1b1b1b)"), o.style.transform = "rotate(180deg)", s.setAttribute("aria-sort", "descending");
|
|
98
|
+
break;
|
|
99
|
+
}
|
|
100
|
+
else
|
|
101
|
+
s.classList.remove("nys-table__sortedcolumn"), o.setAttribute("name", "height"), o.setAttribute("color", "var(--nys-color-text-weak, #4a4d4f)"), o.style.transform = "", s.removeAttribute("aria-sort");
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
_onSortClick(t, r) {
|
|
105
|
+
this._sortColumn !== t ? (this._sortColumn = t, this._sortDirection = "asc") : this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc", this._updateSortIcons(r), this._sortTable(r, t, this._sortDirection);
|
|
106
|
+
}
|
|
107
|
+
_sortTable(t, r, s) {
|
|
108
|
+
const e = t.querySelector("tbody");
|
|
109
|
+
if (!e) return;
|
|
110
|
+
const n = Array.from(e.querySelectorAll("tr"));
|
|
111
|
+
n.sort((o, l) => {
|
|
112
|
+
const p = o.children[r]?.textContent?.trim() ?? "", a = l.children[r]?.textContent?.trim() ?? "", y = Number(p), d = Number(a);
|
|
113
|
+
let b;
|
|
114
|
+
return !isNaN(y) && !isNaN(d) ? b = y - d : b = p.localeCompare(a), s === "asc" ? b : -b;
|
|
115
|
+
}), n.forEach((o) => e.appendChild(o)), this._updateSortedColumnStyles(t);
|
|
116
|
+
}
|
|
117
|
+
_updateSortedColumnStyles(t) {
|
|
118
|
+
t.querySelectorAll("tbody tr").forEach((s) => {
|
|
119
|
+
Array.from(s.children).forEach((e, n) => {
|
|
120
|
+
n === this._sortColumn ? e.classList.add("nys-table__sortedcolumn") : e.classList.remove("nys-table__sortedcolumn");
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
downloadFile() {
|
|
125
|
+
const t = document.createElement("a");
|
|
126
|
+
t.href = this.download, t.download = this.download.split("/").pop() || "table-data.csv", document.body.appendChild(t), t.click(), document.body.removeChild(t);
|
|
127
|
+
}
|
|
128
|
+
/****************** Event Handlers ******************/
|
|
129
|
+
// Placeholder for event handlers if needed
|
|
130
|
+
render() {
|
|
131
|
+
return _`
|
|
132
|
+
<div class="nys-table">
|
|
133
|
+
<div class="table-container"></div>
|
|
134
|
+
</div>
|
|
135
|
+
${this.download ? _` <nys-button
|
|
136
|
+
id="${this.id}-download-button"
|
|
137
|
+
label="Download table"
|
|
138
|
+
aria-label=${this._captionText ? `Download ${this._captionText}` : "Download table"}
|
|
139
|
+
size="sm"
|
|
140
|
+
variant="outline"
|
|
141
|
+
prefixIcon="download"
|
|
142
|
+
@nys-click=${this.downloadFile}
|
|
143
|
+
></nys-button>` : ""}
|
|
144
|
+
<slot style="display:none"></slot>
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
f.styles = g(x);
|
|
149
|
+
let i = f;
|
|
150
|
+
c([
|
|
151
|
+
h({ type: String, reflect: !0 })
|
|
152
|
+
], i.prototype, "id");
|
|
153
|
+
c([
|
|
154
|
+
h({ type: String, reflect: !0 })
|
|
155
|
+
], i.prototype, "name");
|
|
156
|
+
c([
|
|
157
|
+
h({ type: Boolean, reflect: !0 })
|
|
158
|
+
], i.prototype, "striped");
|
|
159
|
+
c([
|
|
160
|
+
h({ type: Boolean, reflect: !0 })
|
|
161
|
+
], i.prototype, "sortable");
|
|
162
|
+
c([
|
|
163
|
+
h({ type: Boolean, reflect: !0 })
|
|
164
|
+
], i.prototype, "bordered");
|
|
165
|
+
c([
|
|
166
|
+
h({ type: String, reflect: !0 })
|
|
167
|
+
], i.prototype, "download");
|
|
168
|
+
c([
|
|
169
|
+
u()
|
|
170
|
+
], i.prototype, "_sortColumn");
|
|
171
|
+
c([
|
|
172
|
+
u()
|
|
173
|
+
], i.prototype, "_sortDirection");
|
|
174
|
+
c([
|
|
175
|
+
u()
|
|
176
|
+
], i.prototype, "_captionText");
|
|
177
|
+
customElements.get("nys-table") || customElements.define("nys-table", i);
|
|
178
|
+
export {
|
|
179
|
+
i as NysTable
|
|
180
|
+
};
|
|
181
|
+
//# sourceMappingURL=nys-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nys-table.js","sources":["../src/nys-table.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-table.scss?inline\";\n\nlet componentIdCounter = 0;\n\n/**\n * `<nys-table>` is a responsive table component that can display native HTML tables,\n * supports striped and bordered styling, sortable columns, and CSV download.\n *\n * @slot - Accepts a `<table>` element. Only the first table is rendered.\n *\n * @fires nys-click - Fired when the download button or sortable headers are clicked.\n *\n * @method downloadFile - Triggers download of the CSV file if `download` is set.\n */\nexport class NysTable extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: Boolean, reflect: true }) striped = false;\n @property({ type: Boolean, reflect: true }) sortable = false;\n @property({ type: Boolean, reflect: true }) bordered = false;\n @property({ type: String, reflect: true }) download = \"\";\n\n @state() private _sortColumn: number | null = null;\n @state() private _sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n @state() private _captionText = \"\";\n\n /**************** Lifecycle Methods ****************/\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-table-${Date.now()}-${componentIdCounter++}`;\n }\n }\n\n /******************** Functions ********************/\n // Placeholder for generic functions (component-specific)\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n slot?.addEventListener(\"slotchange\", () => this._handleSlotChange());\n this._handleSlotChange();\n }\n\n _handleSlotChange() {\n const slot = this.shadowRoot?.querySelector(\n \"slot\",\n ) as HTMLSlotElement | null;\n const container = this.shadowRoot?.querySelector(\n \".nys-table\",\n ) as HTMLElement | null;\n if (!slot || !container) return;\n\n container.innerHTML = \"\";\n\n const assigned = slot.assignedElements({ flatten: true });\n\n assigned.forEach((node) => {\n if (node.tagName === \"TABLE\") {\n const table = node.cloneNode(true) as HTMLTableElement;\n this._normalizeTable(table);\n if (this.sortable) {\n this._addSortIcons(table);\n }\n container.appendChild(table);\n }\n });\n }\n\n _normalizeTable(table: HTMLTableElement) {\n const hasThead = table.querySelector(\"thead\");\n const hasTbody = table.querySelector(\"tbody\");\n\n if (hasThead && hasTbody) return;\n\n // Pull caption first\n let caption = table.querySelector(\n \"caption\",\n ) as HTMLTableCaptionElement | null;\n\n // Save caption text if it exists\n if (caption?.textContent?.trim()) {\n this._captionText = caption.textContent.trim();\n } else {\n this._captionText = \"\";\n }\n\n // Collect all rows\n const rows = Array.from(table.querySelectorAll(\"tr\"));\n if (rows.length === 0) return;\n\n const thead = document.createElement(\"thead\");\n const tbody = document.createElement(\"tbody\");\n\n // Find first row containing th\n const headerRowIndex = rows.findIndex((r) => r.querySelector(\"th\"));\n\n if (headerRowIndex === -1) {\n rows.forEach((r) => tbody.appendChild(r));\n } else {\n const headerRow = rows[headerRowIndex];\n\n // Wrap text nodes in <p> for each <th>\n headerRow.querySelectorAll(\"th\").forEach((th) => {\n // Only wrap text nodes, leave icons or other children\n Array.from(th.childNodes).forEach((node) => {\n if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n const p = document.createElement(\"p\");\n p.textContent = node.textContent;\n th.replaceChild(p, node);\n }\n });\n });\n\n thead.appendChild(headerRow);\n\n // Move remaining rows to tbody\n rows.forEach((r, i) => {\n if (i !== headerRowIndex) tbody.appendChild(r);\n });\n }\n\n // Wipe original table content\n table.innerHTML = \"\";\n\n // Handle caption and sortable message\n if (this.sortable) {\n if (!caption) {\n caption = document.createElement(\"caption\");\n caption.style.padding = \"0\";\n }\n\n const srOnly = document.createElement(\"span\");\n srOnly.setAttribute(\"class\", \"sr-only\");\n srOnly.textContent = \"Column headers with buttons are sortable.\";\n\n caption.appendChild(srOnly);\n }\n\n if (caption) table.appendChild(caption);\n\n table.appendChild(thead);\n table.appendChild(tbody);\n }\n\n _addSortIcons(table: HTMLTableElement) {\n const ths = Array.from(table.querySelectorAll(\"thead th\"));\n if (ths.length === 0) return;\n\n ths.forEach((th, index) => {\n // Prevent duplicates on slotchange or re-render\n if (th.querySelector(\"nys-button[part='sort-button']\")) return;\n\n // Get existing text content\n const label = th.textContent?.trim();\n if (!label) return;\n\n // Clear existing content\n th.textContent = \"\";\n\n const button = document.createElement(\"nys-button\");\n button.setAttribute(\"part\", \"sort-button\");\n button.setAttribute(\"variant\", \"ghost\");\n button.setAttribute(\"label\", label);\n button.setAttribute(\"suffixIcon\", \"slotted\");\n button.setAttribute(\"fullWidth\", \"true\");\n\n const icon = document.createElement(\"nys-icon\");\n icon.setAttribute(\"slot\", \"suffix-icon\");\n icon.setAttribute(\"name\", \"height\");\n icon.setAttribute(\"size\", \"24\");\n icon.setAttribute(\"color\", \"var(--nys-color-text-weak, #4a4d4f)\");\n\n button.appendChild(icon);\n\n button.addEventListener(\"nys-click\", (e) => {\n e.stopPropagation();\n this._onSortClick(index, table);\n });\n\n th.appendChild(button);\n });\n }\n\n _updateSortIcons(table: HTMLTableElement) {\n const ths = table.querySelectorAll(\"thead th\");\n\n ths.forEach((th, index) => {\n const button = th.querySelector(\"nys-button[part='sort-button']\");\n const icon = button?.querySelector(\n \"nys-icon[slot='suffix-icon']\",\n ) as HTMLElement | null;\n\n if (!button || !icon) return;\n\n if (index === this._sortColumn) {\n th.classList.add(\"nys-table__sortedcolumn\");\n switch (this._sortDirection) {\n case \"asc\":\n icon.setAttribute(\"name\", \"straight\");\n icon.setAttribute(\"color\", \"var(--nys-color-ink, #1b1b1b)\");\n icon.style.transform = \"rotate(0deg)\";\n th.setAttribute(\"aria-sort\", \"ascending\");\n break;\n case \"desc\":\n icon.setAttribute(\"name\", \"straight\");\n icon.setAttribute(\"color\", \"var(--nys-color-ink, #1b1b1b)\");\n icon.style.transform = \"rotate(180deg)\";\n th.setAttribute(\"aria-sort\", \"descending\");\n break;\n }\n } else {\n // Reset for all other columns\n th.classList.remove(\"nys-table__sortedcolumn\");\n icon.setAttribute(\"name\", \"height\");\n icon.setAttribute(\"color\", \"var(--nys-color-text-weak, #4a4d4f)\");\n icon.style.transform = \"\";\n th.removeAttribute(\"aria-sort\");\n }\n });\n }\n\n _onSortClick(columnIndex: number, table: HTMLTableElement) {\n if (this._sortColumn !== columnIndex) {\n // New column → start with ascending\n this._sortColumn = columnIndex;\n this._sortDirection = \"asc\";\n } else {\n // Same column → toggle\n this._sortDirection = this._sortDirection === \"asc\" ? \"desc\" : \"asc\";\n }\n\n this._updateSortIcons(table);\n this._sortTable(table, columnIndex, this._sortDirection);\n }\n\n _sortTable(\n table: HTMLTableElement,\n columnIndex: number,\n direction: \"asc\" | \"desc\",\n ) {\n const tbody = table.querySelector(\"tbody\");\n if (!tbody) return;\n\n const rows = Array.from(tbody.querySelectorAll(\"tr\"));\n\n rows.sort((a, b) => {\n const aText = a.children[columnIndex]?.textContent?.trim() ?? \"\";\n const bText = b.children[columnIndex]?.textContent?.trim() ?? \"\";\n\n const aNum = Number(aText);\n const bNum = Number(bText);\n\n let result;\n\n if (!isNaN(aNum) && !isNaN(bNum)) {\n result = aNum - bNum;\n } else {\n result = aText.localeCompare(bText);\n }\n\n return direction === \"asc\" ? result : -result;\n });\n\n // Re-append sorted rows\n rows.forEach((r) => tbody.appendChild(r));\n this._updateSortedColumnStyles(table);\n }\n\n _updateSortedColumnStyles(table: HTMLTableElement) {\n const rows = table.querySelectorAll(\"tbody tr\");\n\n rows.forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n if (index === this._sortColumn) {\n cell.classList.add(\"nys-table__sortedcolumn\");\n } else {\n cell.classList.remove(\"nys-table__sortedcolumn\");\n }\n });\n });\n }\n\n downloadFile() {\n // read file from this.download and trigger download\n const link = document.createElement(\"a\");\n link.href = this.download;\n link.download = this.download.split(\"/\").pop() || \"table-data.csv\";\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n\n /****************** Event Handlers ******************/\n // Placeholder for event handlers if needed\n\n render() {\n return html`\n <div class=\"nys-table\">\n <div class=\"table-container\"></div>\n </div>\n ${this.download\n ? html` <nys-button\n id=\"${this.id}-download-button\"\n label=\"Download table\"\n aria-label=${this._captionText\n ? `Download ${this._captionText}`\n : \"Download table\"}\n size=\"sm\"\n variant=\"outline\"\n prefixIcon=\"download\"\n @nys-click=${this.downloadFile}\n ></nys-button>`\n : \"\"}\n <slot style=\"display:none\"></slot>\n `;\n }\n}\n\nif (!customElements.get(\"nys-table\")) {\n customElements.define(\"nys-table\", NysTable);\n}\n"],"names":["componentIdCounter","_NysTable","LitElement","slot","container","node","table","hasThead","hasTbody","caption","rows","thead","tbody","headerRowIndex","r","headerRow","th","p","i","srOnly","ths","index","label","button","icon","e","columnIndex","direction","a","b","aText","bText","aNum","bNum","result","row","cell","link","html","unsafeCSS","styles","NysTable","__decorateClass","property","state"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nysds/nys-table",
|
|
3
|
+
"version": "1.13.0",
|
|
4
|
+
"description": "The Table component from the NYS Design System.",
|
|
5
|
+
"module": "dist/nys-table.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/nys-table.js",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"type": "module",
|
|
14
|
+
"files": [
|
|
15
|
+
"dist/"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"dev": "tsc --emitDeclarationOnly && vite",
|
|
19
|
+
"build": "tsc --emitDeclarationOnly && vite build",
|
|
20
|
+
"test": "vite build && wtr",
|
|
21
|
+
"build:watch": "tsc --emitDeclarationOnly && vite build --watch",
|
|
22
|
+
"test:watch": "vite build && wtr --watch",
|
|
23
|
+
"lit-analyze": "lit-analyzer '*.ts'"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"lit": "^3.3.1",
|
|
27
|
+
"typescript": "^5.9.3",
|
|
28
|
+
"vite": "^7.1.12",
|
|
29
|
+
"@nysds/nys-button": "^1.13.0",
|
|
30
|
+
"@nysds/nys-icon": "^1.13.0"
|
|
31
|
+
},
|
|
32
|
+
"keywords": [
|
|
33
|
+
"new-york-state",
|
|
34
|
+
"design-system",
|
|
35
|
+
"web-components",
|
|
36
|
+
"lit",
|
|
37
|
+
"nys",
|
|
38
|
+
"table",
|
|
39
|
+
"forms"
|
|
40
|
+
],
|
|
41
|
+
"author": "New York State Design System Team",
|
|
42
|
+
"license": "MIT"
|
|
43
|
+
}
|