@rcarls/rc-data-table 0.0.0-next-20261102181447 → 0.0.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/README.md CHANGED
@@ -1,41 +1,8 @@
1
- # `@rcarls/rc-data-table`
1
+ # @rcarls/rc-data-table
2
2
 
3
- Sortable-header enhancer for a native `<table>`, following the
4
- [WAI-ARIA sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/).
3
+ This version (`0.0.0`) is a placeholder, published only to register this package name on
4
+ npm so a Trusted Publisher can be configured for it before any real release. It contains no code.
5
5
 
6
- Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-data-table](https://richardcarls.github.io/rc-webcomponents/components/rc-data-table).
7
-
8
- ## Installation
9
-
10
- ```sh
11
- yarn add @rcarls/rc-data-table lit
12
- ```
13
-
14
- ```js
15
- import '@rcarls/rc-data-table/define';
16
- ```
17
-
18
- ## Usage
19
-
20
- ```html
21
- <rc-data-table sort-key="name" sort-direction="ascending">
22
- <table>
23
- <caption>
24
- Plants. Column headers with buttons are sortable.
25
- </caption>
26
- <thead>
27
- <tr>
28
- <th scope="col" data-rc-sort-key="name"><button type="button">Name</button></th>
29
- <th scope="col" data-rc-sort-key="price"><button type="button">Price</button></th>
30
- </tr>
31
- </thead>
32
- <tbody>
33
- <!-- rows, in the current sort order -->
34
- </tbody>
35
- </table>
36
- </rc-data-table>
37
- ```
38
-
39
- The element reflects the sort state as `aria-sort`, draws a sort indicator in every sortable
40
- header, and fires a cancelable `rc-data-table-sort` when a header is activated. It never
41
- sorts rows: re-render them in the requested order.
6
+ Do not install or depend on this version. The real package ships in a later version, published
7
+ automatically through this repository's normal release pipeline once Trusted Publishing is
8
+ configured.
package/package.json CHANGED
@@ -1,66 +1,14 @@
1
1
  {
2
2
  "name": "@rcarls/rc-data-table",
3
- "publishConfig": {
4
- "access": "public"
5
- },
6
- "version": "0.0.0-next-20261102181447",
7
- "description": "Sortable-header enhancer for a native <table>, following the WAI-ARIA sortable table example.",
3
+ "version": "0.0.0",
4
+ "description": "Placeholder published only to register this package name on npm before configuring Trusted Publishing. Contains no code. Do not install or depend on this version.",
8
5
  "repository": {
9
6
  "type": "git",
10
- "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
11
- "directory": "packages/rc-data-table"
7
+ "url": "git+https://github.com/richardcarls/rc-webcomponents.git"
12
8
  },
13
- "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-data-table",
14
9
  "license": "MIT",
15
- "type": "module",
16
- "files": [
17
- "dist"
18
- ],
19
- "module": "./dist/rc-data-table.js",
20
- "exports": {
21
- ".": {
22
- "import": {
23
- "types": "./dist/types/packages/rc-data-table/src/index.d.ts",
24
- "default": "./dist/rc-data-table.js"
25
- }
26
- },
27
- "./define": {
28
- "import": {
29
- "types": "./dist/types/packages/rc-data-table/src/define.d.ts",
30
- "default": "./dist/rc-data-table-define.js"
31
- }
32
- },
33
- "./base.css": "./dist/base.css"
34
- },
35
- "types": "./dist/types/packages/rc-data-table/src/index.d.ts",
36
- "sideEffects": [
37
- "./dist/rc-data-table-define.js",
38
- "./dist/base.css"
39
- ],
40
- "customElements": "dist/custom-elements.json",
41
- "scripts": {
42
- "build": "tsc && vite build && node ../../scripts/emit-light-dom-base-css.mjs && cem analyze",
43
- "cem:analyze": "cem analyze",
44
- "test:browser": "vitest --run",
45
- "test:browser:chrome": "vitest --run --project=chromium",
46
- "test:browser:firefox": "vitest --run --project=firefox"
47
- },
48
- "dependencies": {
49
- "@rcarls/rc-common": "0.0.0-next-20261102181447"
50
- },
51
- "devDependencies": {
52
- "@custom-elements-manifest/analyzer": "0.11.0",
53
- "@vitest/browser-playwright": "4.1.5",
54
- "lit": "^3.0.0",
55
- "playwright": "^1.56.0",
56
- "rollup": "^4.60.2",
57
- "typescript": "~5.9.3",
58
- "vite": "^7.1.7",
59
- "vite-plugin-dts": "^4.5.4",
60
- "vitest": "^4.0.6",
61
- "vitest-browser-lit": "^1.0.1"
62
- },
63
- "peerDependencies": {
64
- "lit": "^3.0.0"
10
+ "private": false,
11
+ "publishConfig": {
12
+ "access": "public"
65
13
  }
66
- }
14
+ }
package/CHANGELOG.md DELETED
@@ -1,87 +0,0 @@
1
- # @rcarls/rc-data-table
2
-
3
- ## 0.0.0-next-20261102181447
4
-
5
- ### Minor Changes
6
-
7
- - 4db22ea: Adds `rc-data-table`, a sortable-header enhancer for a native `<table>` that follows the
8
- WAI-ARIA sortable table example. Authored `<button>` or link controls in
9
- `<th data-rc-sort-key>` headers request a sort; the element reflects it as `aria-sort` on the
10
- active header, draws a distinct indicator for each sort state, and fires a cancelable
11
- `rc-data-table-sort` for the consumer to re-render the rows. It never sorts data itself. The
12
- host becomes a focusable group named by the caption while the table overflows. The aggregate,
13
- the React wrappers, and all four themes cover it.
14
-
15
- `rc-pagination` now places its live region on the document body instead of inside the
16
- element, so it never joins the consumer's markup.
17
-
18
- ### Patch Changes
19
-
20
- - 620e179: Preserve author-provided `role`, `tabindex`, and `aria-labelledby` when table overflow changes.
21
- Remove only the attributes and caption ID the table itself added.
22
- - b9fd59d: `LiveAnnouncer` mounts its region before each announcement in the open dialog or
23
- popover around its host, else the document's current body, and creates it on
24
- first use. An announcement after Turbo replaces `document.body` around a
25
- permanent element, or after a DOM morph removes the region, now reaches
26
- assistive technology instead of a detached node. `rc-pagination` and
27
- `rc-data-table` with `announce` also announce from inside an open modal dialog,
28
- where the body was inert. `announcerRootFor()` is exported for custom roots.
29
-
30
- Breaking changes:
31
-
32
- - `LiveAnnouncer` takes the host element and an optional `{ root }` resolver
33
- instead of a mount node. Replace `new LiveAnnouncer($root)` with
34
- `new LiveAnnouncer($host, { root: () => $root })`, or drop `root` to use the
35
- dialog-aware default.
36
-
37
- - 3c0b1f6: Elements write their attributes again after a DOM morph removes them. Turbo
38
- page refreshes, Livewire, htmx, and Blazor enhanced navigation diff the live DOM
39
- against server markup, which removed each element's default `role`,
40
- `tabindex`, ARIA state on native children, state attributes such as
41
- `has-label`, and the styles that hide a wrapped native control.
42
-
43
- `rc-common` adds `MorphRecoveryController`, which watches an element's host and
44
- light DOM for those attributes being removed and re-runs the element's sync.
45
-
46
- - Updated dependencies [e3dfa59]
47
- - Updated dependencies [50d5610]
48
- - Updated dependencies [9ee769c]
49
- - Updated dependencies [1179f24]
50
- - Updated dependencies [595fe37]
51
- - Updated dependencies [38cd00c]
52
- - Updated dependencies [5c006de]
53
- - Updated dependencies [a6553ff]
54
- - Updated dependencies [2205478]
55
- - Updated dependencies [4341311]
56
- - Updated dependencies [899bb5e]
57
- - Updated dependencies [25fcfe0]
58
- - Updated dependencies [51f6403]
59
- - Updated dependencies [9caca6b]
60
- - Updated dependencies [2a499c0]
61
- - Updated dependencies [b9fd59d]
62
- - Updated dependencies [b764a3c]
63
- - Updated dependencies [6c3a2d1]
64
- - Updated dependencies [54d9ead]
65
- - Updated dependencies [3c0b1f6]
66
- - Updated dependencies [9723b63]
67
- - Updated dependencies [b9175e9]
68
- - Updated dependencies [c8b762b]
69
- - Updated dependencies [55e1e7f]
70
- - Updated dependencies [f1ca82d]
71
- - Updated dependencies [b87f27b]
72
- - Updated dependencies [32ebead]
73
- - Updated dependencies [bfefedd]
74
- - Updated dependencies [c130173]
75
- - Updated dependencies [6fef402]
76
- - Updated dependencies [11680b6]
77
- - Updated dependencies [223d36c]
78
- - Updated dependencies [7b91a44]
79
- - Updated dependencies [aa04ead]
80
- - Updated dependencies [ac65b5b]
81
- - Updated dependencies [429a0c1]
82
- - Updated dependencies [ccdf1cf]
83
- - Updated dependencies [afcfef8]
84
- - Updated dependencies [3f21c58]
85
- - Updated dependencies [e00df90]
86
- - Updated dependencies [11ef1ad]
87
- - @rcarls/rc-common@0.0.0-next-20261102181447
package/dist/base.css DELETED
@@ -1,2 +0,0 @@
1
- /* rc-data-table light-DOM base styles. Link with data-rc-light-dom-base="rc-data-table" to skip the runtime copy. */
2
- @layer rc-base{rc-data-table{overflow-inline:auto;max-inline-size:100%;display:block;overflow-x:auto}rc-data-table>table :is(th,td){padding-block:var(--rc-data-table-cell-padding-block,revert);padding-inline:var(--rc-data-table-cell-padding-inline,revert)}rc-data-table>table th[data-rc-sort-key]>:is(button,a){align-items:center;gap:var(--rc-data-table-sort-indicator-gap,.25em);color:inherit;font:inherit;text-align:inherit;text-decoration:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}rc-data-table>table th[data-rc-sort-key]>:is(button,a):after{content:var(--rc-data-table-sort-none,"\25C7") / "";font-size:.75em}rc-data-table>table th[aria-sort=ascending]>:is(button,a):after{content:var(--rc-data-table-sort-ascending,"\25B2") / ""}rc-data-table>table th[aria-sort=descending]>:is(button,a):after{content:var(--rc-data-table-sort-descending,"\25BC") / ""}}
@@ -1,456 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "src/dataTableBaseStyles.ts",
8
- "declarations": [
9
- {
10
- "kind": "variable",
11
- "name": "DATA_TABLE_BASE_CSS",
12
- "default": "cssText` @layer rc-base { rc-data-table { display: block; max-inline-size: 100%; overflow-x: auto; overflow-inline: auto; } rc-data-table > table :is(th, td) { padding-block: var(--rc-data-table-cell-padding-block, revert); padding-inline: var(--rc-data-table-cell-padding-inline, revert); } rc-data-table > table th[data-rc-sort-key] > :is(button, a) { display: inline-flex; align-items: center; gap: var(--rc-data-table-sort-indicator-gap, 0.25em); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: inherit; cursor: pointer; } rc-data-table > table th[data-rc-sort-key] > :is(button, a)::after { content: var(--rc-data-table-sort-none, '\\\\25C7') / ''; font-size: 0.75em; } rc-data-table > table th[aria-sort='ascending'] > :is(button, a)::after { content: var(--rc-data-table-sort-ascending, '\\\\25B2') / ''; } rc-data-table > table th[aria-sort='descending'] > :is(button, a)::after { content: var(--rc-data-table-sort-descending, '\\\\25BC') / ''; } } `",
13
- "description": "Light-DOM base styles for the sortable table.\n\nThe consumer's `<table>` stays in light DOM. The host becomes the table's\ninline scroll container; sort buttons fill their header cell and read as\nheader text; and a CSS indicator shows each column's sort state with a\ndistinct shape, as generated content with empty alternative text. Cell\npadding and borders keep the user agent's defaults until a theme sets them."
14
- },
15
- {
16
- "kind": "variable",
17
- "name": "ensureDataTableBaseStyles",
18
- "type": {
19
- "text": "(root: Document | ShadowRoot) => void"
20
- },
21
- "description": "Installs the sortable table styles once per containing root."
22
- }
23
- ],
24
- "exports": [
25
- {
26
- "kind": "js",
27
- "name": "DATA_TABLE_BASE_CSS",
28
- "declaration": {
29
- "name": "DATA_TABLE_BASE_CSS",
30
- "module": "src/dataTableBaseStyles.ts"
31
- }
32
- },
33
- {
34
- "kind": "js",
35
- "name": "ensureDataTableBaseStyles",
36
- "declaration": {
37
- "name": "ensureDataTableBaseStyles",
38
- "module": "src/dataTableBaseStyles.ts"
39
- }
40
- }
41
- ]
42
- },
43
- {
44
- "kind": "javascript-module",
45
- "path": "src/define.ts",
46
- "declarations": [],
47
- "exports": [
48
- {
49
- "kind": "custom-element-definition",
50
- "name": "rc-data-table",
51
- "declaration": {
52
- "name": "RCDataTable",
53
- "module": "/src/index.js"
54
- }
55
- },
56
- {
57
- "kind": "js",
58
- "name": "*",
59
- "declaration": {
60
- "name": "*",
61
- "module": "src/index.js"
62
- }
63
- }
64
- ]
65
- },
66
- {
67
- "kind": "javascript-module",
68
- "path": "src/index.ts",
69
- "declarations": [],
70
- "exports": [
71
- {
72
- "kind": "js",
73
- "name": "*",
74
- "declaration": {
75
- "name": "*",
76
- "module": "src/rc-data-table.js"
77
- }
78
- },
79
- {
80
- "kind": "js",
81
- "name": "*",
82
- "declaration": {
83
- "name": "*",
84
- "module": "src/dataTableBaseStyles.js"
85
- }
86
- }
87
- ]
88
- },
89
- {
90
- "kind": "javascript-module",
91
- "path": "src/rc-data-table.ts",
92
- "declarations": [
93
- {
94
- "kind": "variable",
95
- "name": "DEFAULT_DATA_TABLE_MESSAGES",
96
- "type": {
97
- "text": "Readonly<RCDataTableMessages>"
98
- }
99
- },
100
- {
101
- "kind": "class",
102
- "description": "Sortable-header enhancer for a native `<table>`, following the WAI-ARIA\nsortable table example.\n\nThe consumer authors the table, and in each sortable column header a native\n`<button>`, or a link to a server-sorted URL, inside a\n`<th data-rc-sort-key=\"...\">`. The element never sorts rows: it reflects the\nsort state as `aria-sort` on the active header, draws a sort indicator for\nevery sortable column, and reports each request as `rc-data-table-sort` for\nthe consumer to re-render the rows. Headers that are links still navigate\nunless a listener cancels the event.\n\nThe host is the table's inline scroll container. While the table overflows,\nthe host becomes a focusable group named by the table's `<caption>`, so\nkeyboard users can scroll it.\n\nBuilt-in text follows the element's own `lang`, else `<html lang>`: per\nelement through `messages`, or for every instance through\n`registerMessages()` from `@rcarls/rc-common` under `rc-data-table`.",
103
- "name": "RCDataTable",
104
- "cssProperties": [
105
- {
106
- "description": "Cell block padding. Defers to the user agent when unset.",
107
- "name": "--rc-data-table-cell-padding-block"
108
- },
109
- {
110
- "description": "Cell inline padding. Defers to the user agent when unset.",
111
- "name": "--rc-data-table-cell-padding-inline"
112
- },
113
- {
114
- "description": "Space between a header label and its sort indicator.",
115
- "name": "--rc-data-table-sort-indicator-gap",
116
- "default": "0.25em"
117
- },
118
- {
119
- "description": "Indicator for a sortable column that is not sorted.",
120
- "name": "--rc-data-table-sort-none",
121
- "default": "'\\25C7'"
122
- },
123
- {
124
- "description": "Indicator for an ascending column.",
125
- "name": "--rc-data-table-sort-ascending",
126
- "default": "'\\25B2'"
127
- },
128
- {
129
- "description": "Indicator for a descending column.",
130
- "name": "--rc-data-table-sort-descending",
131
- "default": "'\\25BC'"
132
- }
133
- ],
134
- "members": [
135
- {
136
- "kind": "field",
137
- "name": "_morphRecovery",
138
- "privacy": "protected",
139
- "readonly": true,
140
- "default": "new MorphRecoveryController(this)",
141
- "description": "Writes the element's attributes again after a DOM morph removes them."
142
- },
143
- {
144
- "kind": "field",
145
- "name": "announce",
146
- "type": {
147
- "text": "boolean"
148
- },
149
- "default": "false",
150
- "description": "Announces each user sort through a polite live region."
151
- },
152
- {
153
- "kind": "field",
154
- "name": "messages",
155
- "type": {
156
- "text": "Partial<RCDataTableMessages> | undefined"
157
- },
158
- "description": "Built-in text overrides; unset keys fall back to registered text, then English."
159
- },
160
- {
161
- "kind": "field",
162
- "name": "_sortKey",
163
- "type": {
164
- "text": "string | undefined"
165
- },
166
- "privacy": "private"
167
- },
168
- {
169
- "kind": "field",
170
- "name": "_sortDirection",
171
- "type": {
172
- "text": "RCDataTableSortDirection | undefined"
173
- },
174
- "privacy": "private"
175
- },
176
- {
177
- "kind": "field",
178
- "name": "_defaultSortKey",
179
- "type": {
180
- "text": "string | undefined"
181
- },
182
- "privacy": "private"
183
- },
184
- {
185
- "kind": "field",
186
- "name": "_defaultSortDirection",
187
- "type": {
188
- "text": "RCDataTableSortDirection"
189
- },
190
- "privacy": "private",
191
- "default": "'ascending'"
192
- },
193
- {
194
- "kind": "field",
195
- "name": "_uncontrolledKey",
196
- "type": {
197
- "text": "string | undefined"
198
- },
199
- "privacy": "private"
200
- },
201
- {
202
- "kind": "field",
203
- "name": "_uncontrolledDirection",
204
- "type": {
205
- "text": "RCDataTableSortDirection | undefined"
206
- },
207
- "privacy": "private"
208
- },
209
- {
210
- "kind": "field",
211
- "name": "_messages",
212
- "privacy": "private",
213
- "readonly": true,
214
- "default": "new MessagesController( this, 'rc-data-table', DEFAULT_DATA_TABLE_MESSAGES, { overrides: () => this.messages }, )"
215
- },
216
- {
217
- "kind": "field",
218
- "name": "_mutationObserver",
219
- "type": {
220
- "text": "MutationObserver | undefined"
221
- },
222
- "privacy": "private"
223
- },
224
- {
225
- "kind": "field",
226
- "name": "_resizeObserver",
227
- "type": {
228
- "text": "ResizeObserver | undefined"
229
- },
230
- "privacy": "private"
231
- },
232
- {
233
- "kind": "field",
234
- "name": "_announcer",
235
- "type": {
236
- "text": "LiveAnnouncer | undefined"
237
- },
238
- "privacy": "private"
239
- },
240
- {
241
- "kind": "field",
242
- "name": "_$managedSort",
243
- "privacy": "private",
244
- "readonly": true,
245
- "default": "new Set<Element>()"
246
- },
247
- {
248
- "kind": "field",
249
- "name": "_scrollableWritten",
250
- "type": {
251
- "text": "boolean"
252
- },
253
- "privacy": "private",
254
- "default": "false"
255
- },
256
- {
257
- "kind": "field",
258
- "name": "_writtenCaptionId",
259
- "type": {
260
- "text": "string | null"
261
- },
262
- "privacy": "private",
263
- "default": "null"
264
- },
265
- {
266
- "kind": "field",
267
- "name": "_writtenTabIndex",
268
- "type": {
269
- "text": "string | null"
270
- },
271
- "privacy": "private",
272
- "default": "null"
273
- },
274
- {
275
- "kind": "field",
276
- "name": "_writtenRole",
277
- "type": {
278
- "text": "string | null"
279
- },
280
- "privacy": "private",
281
- "default": "null"
282
- },
283
- {
284
- "kind": "field",
285
- "name": "_writtenLabelledBy",
286
- "type": {
287
- "text": "string | null"
288
- },
289
- "privacy": "private",
290
- "default": "null"
291
- },
292
- {
293
- "kind": "field",
294
- "name": "sortKey",
295
- "type": {
296
- "text": "string | undefined"
297
- },
298
- "description": "Current sort column. Host writes are silent; assign `undefined` to release control."
299
- },
300
- {
301
- "kind": "field",
302
- "name": "sortDirection",
303
- "type": {
304
- "text": "RCDataTableSortDirection"
305
- },
306
- "description": "Current sort direction. Host writes are silent."
307
- },
308
- {
309
- "kind": "field",
310
- "name": "defaultSortKey",
311
- "type": {
312
- "text": "string | undefined"
313
- },
314
- "description": "Initial sort column for uncontrolled use."
315
- },
316
- {
317
- "kind": "field",
318
- "name": "defaultSortDirection",
319
- "type": {
320
- "text": "RCDataTableSortDirection"
321
- },
322
- "description": "Initial sort direction for uncontrolled use."
323
- },
324
- {
325
- "kind": "method",
326
- "name": "createRenderRoot",
327
- "privacy": "protected",
328
- "return": {
329
- "type": {
330
- "text": "HTMLElement"
331
- }
332
- },
333
- "description": "Renders nothing: the consumer's `<table>` stays the element's only content."
334
- },
335
- {
336
- "kind": "method",
337
- "name": "firstUpdated",
338
- "privacy": "protected",
339
- "return": {
340
- "type": {
341
- "text": "void"
342
- }
343
- }
344
- },
345
- {
346
- "kind": "method",
347
- "name": "updated",
348
- "privacy": "protected",
349
- "return": {
350
- "type": {
351
- "text": "void"
352
- }
353
- }
354
- },
355
- {
356
- "kind": "method",
357
- "name": "_headers",
358
- "privacy": "private",
359
- "return": {
360
- "type": {
361
- "text": "HTMLTableCellElement[]"
362
- }
363
- }
364
- },
365
- {
366
- "kind": "method",
367
- "name": "_sync",
368
- "privacy": "private",
369
- "return": {
370
- "type": {
371
- "text": "void"
372
- }
373
- }
374
- },
375
- {
376
- "kind": "method",
377
- "name": "_syncScrollable",
378
- "privacy": "private",
379
- "return": {
380
- "type": {
381
- "text": "void"
382
- }
383
- },
384
- "description": "While the table overflows, the host is a focusable group named by the caption."
385
- },
386
- {
387
- "kind": "field",
388
- "name": "_onClick",
389
- "privacy": "private"
390
- }
391
- ],
392
- "events": [
393
- {
394
- "description": "Fired when the user activates a sortable column header. Cancelable; canceling it also cancels the click, so a header link does not navigate.",
395
- "name": "rc-data-table-sort"
396
- }
397
- ],
398
- "attributes": [
399
- {
400
- "description": "Controlled sort column, matching a header's `data-rc-sort-key`. Host writes are silent.",
401
- "name": "sort-key"
402
- },
403
- {
404
- "description": "Controlled sort direction: `ascending` or `descending`.",
405
- "name": "sort-direction"
406
- },
407
- {
408
- "description": "Initial sort column for uncontrolled use.",
409
- "name": "default-sort-key"
410
- },
411
- {
412
- "description": "Initial sort direction for uncontrolled use.",
413
- "name": "default-sort-direction"
414
- },
415
- {
416
- "description": "Announces each user sort through a polite live region.",
417
- "name": "announce"
418
- }
419
- ],
420
- "superclass": {
421
- "name": "ReactiveElement",
422
- "package": "lit"
423
- },
424
- "tagName": "rc-data-table",
425
- "customElement": true
426
- }
427
- ],
428
- "exports": [
429
- {
430
- "kind": "js",
431
- "name": "DEFAULT_DATA_TABLE_MESSAGES",
432
- "declaration": {
433
- "name": "DEFAULT_DATA_TABLE_MESSAGES",
434
- "module": "src/rc-data-table.ts"
435
- }
436
- },
437
- {
438
- "kind": "js",
439
- "name": "RCDataTable",
440
- "declaration": {
441
- "name": "RCDataTable",
442
- "module": "src/rc-data-table.ts"
443
- }
444
- },
445
- {
446
- "kind": "js",
447
- "name": "default",
448
- "declaration": {
449
- "name": "RCDataTable",
450
- "module": "src/rc-data-table.ts"
451
- }
452
- }
453
- ]
454
- }
455
- ]
456
- }
@@ -1,146 +0,0 @@
1
- import { ReactiveElement as v } from "lit";
2
- import { property as a } from "lit/decorators.js";
3
- import { defineLightDomBaseStyles as g, cssText as S, MorphRecoveryController as m, MessagesController as D, LiveAnnouncer as w, syncDefaultAttribute as h } from "@rcarls/rc-common";
4
- const K = S`@layer rc-base{rc-data-table{overflow-inline:auto;max-inline-size:100%;display:block;overflow-x:auto}rc-data-table>table :is(th,td){padding-block:var(--rc-data-table-cell-padding-block,revert);padding-inline:var(--rc-data-table-cell-padding-inline,revert)}rc-data-table>table th[data-rc-sort-key]>:is(button,a){align-items:center;gap:var(--rc-data-table-sort-indicator-gap,.25em);color:inherit;font:inherit;text-align:inherit;text-decoration:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:inline-flex}rc-data-table>table th[data-rc-sort-key]>:is(button,a):after{content:var(--rc-data-table-sort-none,"\\25C7") / "";font-size:.75em}rc-data-table>table th[aria-sort=ascending]>:is(button,a):after{content:var(--rc-data-table-sort-ascending,"\\25B2") / ""}rc-data-table>table th[aria-sort=descending]>:is(button,a):after{content:var(--rc-data-table-sort-descending,"\\25BC") / ""}}`, A = g("rc-data-table", K);
5
- var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (s, t, e, r) => {
6
- for (var i = r > 1 ? void 0 : r ? E(t, e) : t, o = s.length - 1, n; o >= 0; o--)
7
- (n = s[o]) && (i = (r ? n(t, e, i) : n(i)) || i);
8
- return r && i && C(t, e, i), i;
9
- };
10
- const b = ":scope > table", _ = "th[data-rc-sort-key]", L = Object.freeze({
11
- sorted: (s, t) => `Sorted by ${s}, ${t}`
12
- }), u = (s) => s === "ascending" || s === "descending";
13
- class c extends v {
14
- constructor() {
15
- super(...arguments), this._morphRecovery = new m(this), this.announce = !1, this._defaultSortDirection = "ascending", this._messages = new D(
16
- this,
17
- "rc-data-table",
18
- L,
19
- { overrides: () => this.messages }
20
- ), this._$managedSort = /* @__PURE__ */ new Set(), this._scrollableWritten = !1, this._writtenCaptionId = null, this._writtenTabIndex = null, this._writtenRole = null, this._writtenLabelledBy = null, this._onClick = (t) => {
21
- const e = t.target?.closest?.(":is(button, a)"), r = e?.parentElement;
22
- if (!e || !(r instanceof HTMLTableCellElement) || !r.matches(_) || !this._headers().includes(r))
23
- return;
24
- const i = r.dataset.rcSortKey ?? "", o = this.sortKey, n = o === void 0 ? void 0 : this.sortDirection, f = r.getAttribute("data-rc-sort-first") === "descending" ? "descending" : "ascending", d = i === o ? n === "ascending" ? "descending" : "ascending" : f, y = new CustomEvent("rc-data-table-sort", {
25
- bubbles: !0,
26
- composed: !0,
27
- cancelable: !0,
28
- detail: { key: i, direction: d, previousKey: o, previousDirection: n }
29
- });
30
- if (!this.dispatchEvent(y)) {
31
- t.preventDefault();
32
- return;
33
- }
34
- if (this._sortKey === void 0 && this._sortDirection === void 0 && (this._uncontrolledKey = i, this._uncontrolledDirection = d, this.requestUpdate("sortKey", o), this.requestUpdate("sortDirection", n)), this.announce) {
35
- const p = e.textContent?.replace(/\s+/g, " ").trim() || i;
36
- this._announcer ??= new w(this), this._announcer.announce(this._messages.value.sorted(p, d));
37
- }
38
- };
39
- }
40
- get sortKey() {
41
- return this._sortKey ?? this._uncontrolledKey ?? this._defaultSortKey;
42
- }
43
- set sortKey(t) {
44
- const e = this.sortKey;
45
- this._sortKey = t ?? void 0, this.requestUpdate("sortKey", e);
46
- }
47
- get sortDirection() {
48
- const t = this._sortDirection ?? this._uncontrolledDirection ?? this._defaultSortDirection;
49
- return u(t) ? t : "ascending";
50
- }
51
- set sortDirection(t) {
52
- const e = this.sortDirection;
53
- this._sortDirection = u(t) ? t : void 0, this.requestUpdate("sortDirection", e);
54
- }
55
- get defaultSortKey() {
56
- return this._defaultSortKey;
57
- }
58
- set defaultSortKey(t) {
59
- const e = this._defaultSortKey;
60
- this._defaultSortKey = t ?? void 0, this.requestUpdate("defaultSortKey", e);
61
- }
62
- get defaultSortDirection() {
63
- return this._defaultSortDirection;
64
- }
65
- set defaultSortDirection(t) {
66
- const e = this._defaultSortDirection;
67
- this._defaultSortDirection = u(t) ? t : "ascending", this.requestUpdate("defaultSortDirection", e);
68
- }
69
- /** Renders nothing: the consumer's `<table>` stays the element's only content. */
70
- createRenderRoot() {
71
- return this;
72
- }
73
- connectedCallback() {
74
- super.connectedCallback(), A(this.getRootNode()), this._mutationObserver ??= new MutationObserver(() => this._sync()), this._mutationObserver.observe(this, {
75
- childList: !0,
76
- subtree: !0,
77
- attributes: !0,
78
- attributeFilter: ["data-rc-sort-key"]
79
- }), typeof ResizeObserver == "function" && (this._resizeObserver ??= new ResizeObserver(() => this._syncScrollable()), this._resizeObserver.observe(this)), this.addEventListener("click", this._onClick);
80
- }
81
- disconnectedCallback() {
82
- super.disconnectedCallback(), this._mutationObserver?.disconnect(), this._resizeObserver?.disconnect(), this.removeEventListener("click", this._onClick), this._announcer?.dispose(), this._announcer = void 0;
83
- }
84
- firstUpdated() {
85
- }
86
- updated() {
87
- this._sync();
88
- }
89
- _headers() {
90
- const t = this.querySelector(b);
91
- return t ? [...t.querySelectorAll(_)] : [];
92
- }
93
- _sync() {
94
- const t = this.sortKey, e = this.sortDirection, r = /* @__PURE__ */ new Set();
95
- for (const i of this._headers())
96
- t !== void 0 && i.dataset.rcSortKey === t && (r.add(i), i.getAttribute("aria-sort") !== e && i.setAttribute("aria-sort", e));
97
- for (const i of this._$managedSort)
98
- r.has(i) || i.removeAttribute("aria-sort");
99
- this._$managedSort.clear(), r.forEach((i) => this._$managedSort.add(i)), this._syncScrollable();
100
- }
101
- /** While the table overflows, the host is a focusable group named by the caption. */
102
- _syncScrollable() {
103
- const t = this.scrollWidth > this.clientWidth + 1 || this.scrollHeight > this.clientHeight + 1, e = this.querySelector(`${b} > caption`);
104
- if (t)
105
- this._writtenTabIndex = h(this, "tabindex", "0", this._writtenTabIndex), this._writtenRole = h(this, "role", "group", this._writtenRole), e && (!this.hasAttribute("aria-labelledby") || this._writtenLabelledBy) && (e.id || (e.id = `rc-data-table-caption-${crypto.randomUUID()}`, this._writtenCaptionId = e.id), this._writtenLabelledBy = h(
106
- this,
107
- "aria-labelledby",
108
- e.id,
109
- this._writtenLabelledBy
110
- )), this._scrollableWritten = !0;
111
- else if (this._scrollableWritten) {
112
- for (const [r, i] of [
113
- ["tabindex", this._writtenTabIndex],
114
- ["role", this._writtenRole],
115
- ["aria-labelledby", this._writtenLabelledBy]
116
- ])
117
- i !== null && this.getAttribute(r) === i && this.removeAttribute(r);
118
- this._writtenTabIndex = null, this._writtenRole = null, this._writtenLabelledBy = null, e && this._writtenCaptionId === e.id && e.removeAttribute("id"), this._writtenCaptionId = null, this._scrollableWritten = !1;
119
- }
120
- }
121
- }
122
- l([
123
- a({ type: Boolean })
124
- ], c.prototype, "announce", 2);
125
- l([
126
- a({ attribute: !1 })
127
- ], c.prototype, "messages", 2);
128
- l([
129
- a({ attribute: "sort-key" })
130
- ], c.prototype, "sortKey", 1);
131
- l([
132
- a({ attribute: "sort-direction" })
133
- ], c.prototype, "sortDirection", 1);
134
- l([
135
- a({ attribute: "default-sort-key" })
136
- ], c.prototype, "defaultSortKey", 1);
137
- l([
138
- a({ attribute: "default-sort-direction" })
139
- ], c.prototype, "defaultSortDirection", 1);
140
- export {
141
- K as D,
142
- c as R,
143
- L as a,
144
- A as e
145
- };
146
- //# sourceMappingURL=rc-data-table-B1Hznnt0.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rc-data-table-B1Hznnt0.js","sources":["../src/dataTableBaseStyles.ts","../src/rc-data-table.ts"],"sourcesContent":["import { cssText, defineLightDomBaseStyles } from '@rcarls/rc-common';\n\n/**\n * Light-DOM base styles for the sortable table.\n *\n * The consumer's `<table>` stays in light DOM. The host becomes the table's\n * inline scroll container; sort buttons fill their header cell and read as\n * header text; and a CSS indicator shows each column's sort state with a\n * distinct shape, as generated content with empty alternative text. Cell\n * padding and borders keep the user agent's defaults until a theme sets them.\n */\nexport const DATA_TABLE_BASE_CSS = cssText`\n@layer rc-base {\n rc-data-table {\n display: block;\n max-inline-size: 100%;\n overflow-x: auto;\n overflow-inline: auto;\n }\n\n rc-data-table > table :is(th, td) {\n padding-block: var(--rc-data-table-cell-padding-block, revert);\n padding-inline: var(--rc-data-table-cell-padding-inline, revert);\n }\n\n rc-data-table > table th[data-rc-sort-key] > :is(button, a) {\n display: inline-flex;\n align-items: center;\n gap: var(--rc-data-table-sort-indicator-gap, 0.25em);\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n text-align: inherit;\n text-decoration: inherit;\n cursor: pointer;\n }\n\n rc-data-table > table th[data-rc-sort-key] > :is(button, a)::after {\n content: var(--rc-data-table-sort-none, '\\\\25C7') / '';\n font-size: 0.75em;\n }\n\n rc-data-table > table th[aria-sort='ascending'] > :is(button, a)::after {\n content: var(--rc-data-table-sort-ascending, '\\\\25B2') / '';\n }\n\n rc-data-table > table th[aria-sort='descending'] > :is(button, a)::after {\n content: var(--rc-data-table-sort-descending, '\\\\25BC') / '';\n }\n}\n`;\n\n/** Installs the sortable table styles once per containing root. */\nexport const ensureDataTableBaseStyles: (root: Document | ShadowRoot) => void =\n defineLightDomBaseStyles('rc-data-table', DATA_TABLE_BASE_CSS);\n","import { ReactiveElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n LiveAnnouncer,\n MessagesController,\n MorphRecoveryController,\n syncDefaultAttribute,\n} from '@rcarls/rc-common';\nimport { ensureDataTableBaseStyles } from './dataTableBaseStyles.js';\n\nconst TABLE_SELECTOR = ':scope > table';\nconst SORTABLE_HEADER_SELECTOR = 'th[data-rc-sort-key]';\nconst SORT_CONTROL_SELECTOR = ':scope > :is(button, a)';\n\n/** The direction a column is sorted in. */\nexport type RCDataTableSortDirection = 'ascending' | 'descending';\n\n/** Built-in text of `rc-data-table`. */\nexport interface RCDataTableMessages {\n /** Announcement after a sort, when `announce` is set. */\n sorted: (column: string, direction: RCDataTableSortDirection) => string;\n}\n\nexport const DEFAULT_DATA_TABLE_MESSAGES: Readonly<RCDataTableMessages> = Object.freeze({\n sorted: (column: string, direction: RCDataTableSortDirection) =>\n `Sorted by ${column}, ${direction}`,\n});\n\ndeclare module '@rcarls/rc-common' {\n interface RcMessageCatalog {\n 'rc-data-table': RCDataTableMessages;\n }\n}\n\n/** Detail of `rc-data-table-sort`. */\nexport interface RCDataTableSortEvent {\n /** The `data-rc-sort-key` of the column the user asked to sort by. */\n key: string;\n /** The requested direction. */\n direction: RCDataTableSortDirection;\n /** The sort column before the request, if any. */\n previousKey: string | undefined;\n /** The sort direction before the request, if any. */\n previousDirection: RCDataTableSortDirection | undefined;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-data-table': RCDataTable;\n }\n\n interface HTMLElementEventMap {\n 'rc-data-table-sort': CustomEvent<RCDataTableSortEvent>;\n }\n}\n\nconst isDirection = (value: unknown): value is RCDataTableSortDirection =>\n value === 'ascending' || value === 'descending';\n\n/**\n * Sortable-header enhancer for a native `<table>`, following the WAI-ARIA\n * sortable table example.\n *\n * The consumer authors the table, and in each sortable column header a native\n * `<button>`, or a link to a server-sorted URL, inside a\n * `<th data-rc-sort-key=\"...\">`. The element never sorts rows: it reflects the\n * sort state as `aria-sort` on the active header, draws a sort indicator for\n * every sortable column, and reports each request as `rc-data-table-sort` for\n * the consumer to re-render the rows. Headers that are links still navigate\n * unless a listener cancels the event.\n *\n * The host is the table's inline scroll container. While the table overflows,\n * the host becomes a focusable group named by the table's `<caption>`, so\n * keyboard users can scroll it.\n *\n * Built-in text follows the element's own `lang`, else `<html lang>`: per\n * element through `messages`, or for every instance through\n * `registerMessages()` from `@rcarls/rc-common` under `rc-data-table`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-data-table rc-data-table docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ WAI-ARIA sortable table example}\n *\n * @fires rc-data-table-sort - Fired when the user activates a sortable column header.\n * Cancelable; canceling it also cancels the click, so a header link does not navigate.\n *\n * @attr sort-key - Controlled sort column, matching a header's `data-rc-sort-key`. Host writes\n * are silent.\n * @attr sort-direction - Controlled sort direction: `ascending` or `descending`.\n * @attr default-sort-key - Initial sort column for uncontrolled use.\n * @attr default-sort-direction - Initial sort direction for uncontrolled use.\n * @attr announce - Announces each user sort through a polite live region.\n *\n * @cssprop [--rc-data-table-cell-padding-block] - Cell block padding. Defers to the user agent\n * when unset.\n * @cssprop [--rc-data-table-cell-padding-inline] - Cell inline padding. Defers to the user\n * agent when unset.\n * @cssprop [--rc-data-table-sort-indicator-gap=0.25em] - Space between a header label and its\n * sort indicator.\n * @cssprop [--rc-data-table-sort-none='\\25C7'] - Indicator for a sortable column that is not\n * sorted.\n * @cssprop [--rc-data-table-sort-ascending='\\25B2'] - Indicator for an ascending column.\n * @cssprop [--rc-data-table-sort-descending='\\25BC'] - Indicator for a descending column.\n */\nexport class RCDataTable extends ReactiveElement {\n /** Writes the element's attributes again after a DOM morph removes them. */\n protected readonly _morphRecovery = new MorphRecoveryController(this);\n\n /** Announces each user sort through a polite live region. */\n @property({ type: Boolean })\n announce = false;\n\n /** Built-in text overrides; unset keys fall back to registered text, then English. */\n @property({ attribute: false })\n messages: Partial<RCDataTableMessages> | undefined;\n\n private _sortKey: string | undefined;\n private _sortDirection: RCDataTableSortDirection | undefined;\n private _defaultSortKey: string | undefined;\n private _defaultSortDirection: RCDataTableSortDirection = 'ascending';\n private _uncontrolledKey: string | undefined;\n private _uncontrolledDirection: RCDataTableSortDirection | undefined;\n\n private readonly _messages = new MessagesController(\n this,\n 'rc-data-table',\n DEFAULT_DATA_TABLE_MESSAGES,\n { overrides: () => this.messages },\n );\n\n // Created on connect or first use, so constructing the element without a\n // DOM (a server render) cannot throw.\n private _mutationObserver: MutationObserver | undefined;\n private _resizeObserver: ResizeObserver | undefined;\n private _announcer: LiveAnnouncer | undefined;\n private readonly _$managedSort = new Set<Element>();\n private _scrollableWritten = false;\n private _writtenCaptionId: string | null = null;\n private _writtenTabIndex: string | null = null;\n private _writtenRole: string | null = null;\n private _writtenLabelledBy: string | null = null;\n\n /** Current sort column. Host writes are silent; assign `undefined` to release control. */\n @property({ attribute: 'sort-key' })\n get sortKey(): string | undefined {\n return this._sortKey ?? this._uncontrolledKey ?? this._defaultSortKey;\n }\n\n set sortKey(value: string | undefined) {\n const oldValue = this.sortKey;\n\n this._sortKey = value ?? undefined;\n this.requestUpdate('sortKey', oldValue);\n }\n\n /** Current sort direction. Host writes are silent. */\n @property({ attribute: 'sort-direction' })\n get sortDirection(): RCDataTableSortDirection {\n const value = this._sortDirection ?? this._uncontrolledDirection ?? this._defaultSortDirection;\n\n return isDirection(value) ? value : 'ascending';\n }\n\n set sortDirection(value: RCDataTableSortDirection | undefined) {\n const oldValue = this.sortDirection;\n\n this._sortDirection = isDirection(value) ? value : undefined;\n this.requestUpdate('sortDirection', oldValue);\n }\n\n /** Initial sort column for uncontrolled use. */\n @property({ attribute: 'default-sort-key' })\n get defaultSortKey(): string | undefined {\n return this._defaultSortKey;\n }\n\n set defaultSortKey(value: string | undefined) {\n const oldValue = this._defaultSortKey;\n\n this._defaultSortKey = value ?? undefined;\n this.requestUpdate('defaultSortKey', oldValue);\n }\n\n /** Initial sort direction for uncontrolled use. */\n @property({ attribute: 'default-sort-direction' })\n get defaultSortDirection(): RCDataTableSortDirection {\n return this._defaultSortDirection;\n }\n\n set defaultSortDirection(value: RCDataTableSortDirection) {\n const oldValue = this._defaultSortDirection;\n\n this._defaultSortDirection = isDirection(value) ? value : 'ascending';\n this.requestUpdate('defaultSortDirection', oldValue);\n }\n\n /** Renders nothing: the consumer's `<table>` stays the element's only content. */\n protected override createRenderRoot(): HTMLElement {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n ensureDataTableBaseStyles(this.getRootNode() as Document | ShadowRoot);\n this._mutationObserver ??= new MutationObserver(() => this._sync());\n\n this._mutationObserver.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['data-rc-sort-key'],\n });\n\n if (typeof ResizeObserver === 'function') {\n this._resizeObserver ??= new ResizeObserver(() => this._syncScrollable());\n this._resizeObserver.observe(this);\n }\n\n this.addEventListener('click', this._onClick);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._mutationObserver?.disconnect();\n this._resizeObserver?.disconnect();\n this.removeEventListener('click', this._onClick);\n this._announcer?.dispose();\n this._announcer = undefined;\n }\n\n protected override firstUpdated(): void {\n if (!import.meta.env.DEV) {\n return;\n }\n\n const $table = this.querySelector(TABLE_SELECTOR);\n\n if (!$table) {\n console.warn(\n '[rc-data-table] No direct child <table> found. Place a native <table> inside <rc-data-table>.',\n this,\n );\n\n return;\n }\n\n for (const $th of $table.querySelectorAll(SORTABLE_HEADER_SELECTOR)) {\n if (!$th.querySelector(SORT_CONTROL_SELECTOR)) {\n console.warn(\n '[rc-data-table] A sortable header has no direct child <button> or <a>. Put the ' +\n 'header text in a native <button type=\"button\"> inside the <th>.',\n $th,\n );\n }\n }\n\n if (\n $table.querySelector(SORTABLE_HEADER_SELECTOR) &&\n !$table.querySelector(':scope > caption')\n ) {\n console.warn(\n '[rc-data-table] A sortable table has no <caption>. Name the table, and say there that ' +\n 'column headers with buttons sort the table.',\n $table,\n );\n }\n }\n\n protected override updated(): void {\n this._sync();\n }\n\n private _headers(): HTMLTableCellElement[] {\n const $table = this.querySelector(TABLE_SELECTOR);\n\n return $table\n ? [...$table.querySelectorAll<HTMLTableCellElement>(SORTABLE_HEADER_SELECTOR)]\n : [];\n }\n\n private _sync(): void {\n const key = this.sortKey;\n const direction = this.sortDirection;\n const $active = new Set<Element>();\n\n for (const $th of this._headers()) {\n if (key !== undefined && $th.dataset.rcSortKey === key) {\n $active.add($th);\n\n if ($th.getAttribute('aria-sort') !== direction) {\n $th.setAttribute('aria-sort', direction);\n }\n }\n }\n\n // Unsorted columns carry no aria-sort, rather than \"none\".\n for (const $th of this._$managedSort) {\n if (!$active.has($th)) {\n $th.removeAttribute('aria-sort');\n }\n }\n\n this._$managedSort.clear();\n $active.forEach(($th) => this._$managedSort.add($th));\n this._syncScrollable();\n }\n\n /** While the table overflows, the host is a focusable group named by the caption. */\n private _syncScrollable(): void {\n const overflowing =\n this.scrollWidth > this.clientWidth + 1 || this.scrollHeight > this.clientHeight + 1;\n const $caption = this.querySelector<HTMLElement>(`${TABLE_SELECTOR} > caption`);\n\n if (overflowing) {\n this._writtenTabIndex = syncDefaultAttribute(this, 'tabindex', '0', this._writtenTabIndex);\n\n this._writtenRole = syncDefaultAttribute(this, 'role', 'group', this._writtenRole);\n\n if ($caption && (!this.hasAttribute('aria-labelledby') || this._writtenLabelledBy)) {\n if (!$caption.id) {\n $caption.id = `rc-data-table-caption-${crypto.randomUUID()}`;\n this._writtenCaptionId = $caption.id;\n }\n\n this._writtenLabelledBy = syncDefaultAttribute(\n this,\n 'aria-labelledby',\n $caption.id,\n this._writtenLabelledBy,\n );\n }\n\n this._scrollableWritten = true;\n } else if (this._scrollableWritten) {\n for (const [name, written] of [\n ['tabindex', this._writtenTabIndex],\n ['role', this._writtenRole],\n ['aria-labelledby', this._writtenLabelledBy],\n ] as const) {\n if (written !== null && this.getAttribute(name) === written) {\n this.removeAttribute(name);\n }\n }\n\n this._writtenTabIndex = null;\n this._writtenRole = null;\n this._writtenLabelledBy = null;\n\n if ($caption && this._writtenCaptionId === $caption.id) {\n $caption.removeAttribute('id');\n }\n\n this._writtenCaptionId = null;\n this._scrollableWritten = false;\n }\n }\n\n private _onClick = (event: MouseEvent): void => {\n const $control = (event.target as Element | null)?.closest?.(':is(button, a)');\n const $th = $control?.parentElement;\n\n if (\n !$control ||\n !($th instanceof HTMLTableCellElement) ||\n !$th.matches(SORTABLE_HEADER_SELECTOR) ||\n !this._headers().includes($th)\n ) {\n return;\n }\n\n const key = $th.dataset.rcSortKey ?? '';\n const previousKey = this.sortKey;\n const previousDirection = previousKey === undefined ? undefined : this.sortDirection;\n const first =\n $th.getAttribute('data-rc-sort-first') === 'descending' ? 'descending' : 'ascending';\n const direction: RCDataTableSortDirection =\n key === previousKey\n ? previousDirection === 'ascending'\n ? 'descending'\n : 'ascending'\n : first;\n\n const sort = new CustomEvent<RCDataTableSortEvent>('rc-data-table-sort', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: { key, direction, previousKey, previousDirection },\n });\n\n if (!this.dispatchEvent(sort)) {\n event.preventDefault();\n\n return;\n }\n\n if (this._sortKey === undefined && this._sortDirection === undefined) {\n this._uncontrolledKey = key;\n this._uncontrolledDirection = direction;\n this.requestUpdate('sortKey', previousKey);\n this.requestUpdate('sortDirection', previousDirection);\n }\n\n if (this.announce) {\n const column = $control.textContent?.replace(/\\s+/g, ' ').trim() || key;\n\n // The live region lives outside the host so it never joins the\n // consumer's table markup, which a framework may own. It mounts in the\n // open dialog around the host, else the current body.\n this._announcer ??= new LiveAnnouncer(this);\n this._announcer.announce(this._messages.value.sorted(column, direction));\n }\n };\n}\n\nexport default RCDataTable;\n"],"names":["DATA_TABLE_BASE_CSS","cssText","ensureDataTableBaseStyles","defineLightDomBaseStyles","TABLE_SELECTOR","SORTABLE_HEADER_SELECTOR","DEFAULT_DATA_TABLE_MESSAGES","column","direction","isDirection","value","RCDataTable","ReactiveElement","MorphRecoveryController","MessagesController","event","$control","$th","key","previousKey","previousDirection","first","sort","LiveAnnouncer","oldValue","$table","$active","overflowing","$caption","syncDefaultAttribute","name","written","__decorateClass","property"],"mappings":"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"}
@@ -1,10 +0,0 @@
1
- import { R as a } from "./rc-data-table-B1Hznnt0.js";
2
- import { D as A, a as r, e as E } from "./rc-data-table-B1Hznnt0.js";
3
- customElements.get("rc-data-table") || customElements.define("rc-data-table", a);
4
- export {
5
- A as DATA_TABLE_BASE_CSS,
6
- r as DEFAULT_DATA_TABLE_MESSAGES,
7
- a as RCDataTable,
8
- E as ensureDataTableBaseStyles
9
- };
10
- //# sourceMappingURL=rc-data-table-define.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rc-data-table-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCDataTable } from './index.js';\n\nif (!customElements.get('rc-data-table')) {\n customElements.define('rc-data-table', RCDataTable);\n}\n\nexport * from './index.js';\n"],"names":["RCDataTable"],"mappings":";;AAEK,eAAe,IAAI,eAAe,KACrC,eAAe,OAAO,iBAAiBA,CAAW;"}
@@ -1,8 +0,0 @@
1
- import { D as e, a as s, R as S, e as T } from "./rc-data-table-B1Hznnt0.js";
2
- export {
3
- e as DATA_TABLE_BASE_CSS,
4
- s as DEFAULT_DATA_TABLE_MESSAGES,
5
- S as RCDataTable,
6
- T as ensureDataTableBaseStyles
7
- };
8
- //# sourceMappingURL=rc-data-table.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rc-data-table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -1,12 +0,0 @@
1
- /**
2
- * Light-DOM base styles for the sortable table.
3
- *
4
- * The consumer's `<table>` stays in light DOM. The host becomes the table's
5
- * inline scroll container; sort buttons fill their header cell and read as
6
- * header text; and a CSS indicator shows each column's sort state with a
7
- * distinct shape, as generated content with empty alternative text. Cell
8
- * padding and borders keep the user agent's defaults until a theme sets them.
9
- */
10
- export declare const DATA_TABLE_BASE_CSS: string;
11
- /** Installs the sortable table styles once per containing root. */
12
- export declare const ensureDataTableBaseStyles: (root: Document | ShadowRoot) => void;
@@ -1 +0,0 @@
1
- export * from './index.js';
@@ -1,2 +0,0 @@
1
- export * from './rc-data-table.js';
2
- export * from './dataTableBaseStyles.js';
@@ -1,126 +0,0 @@
1
- import { ReactiveElement } from 'lit';
2
- import { MorphRecoveryController } from '@rcarls/rc-common';
3
- /** The direction a column is sorted in. */
4
- export type RCDataTableSortDirection = 'ascending' | 'descending';
5
- /** Built-in text of `rc-data-table`. */
6
- export interface RCDataTableMessages {
7
- /** Announcement after a sort, when `announce` is set. */
8
- sorted: (column: string, direction: RCDataTableSortDirection) => string;
9
- }
10
- export declare const DEFAULT_DATA_TABLE_MESSAGES: Readonly<RCDataTableMessages>;
11
- declare module '@rcarls/rc-common' {
12
- interface RcMessageCatalog {
13
- 'rc-data-table': RCDataTableMessages;
14
- }
15
- }
16
- /** Detail of `rc-data-table-sort`. */
17
- export interface RCDataTableSortEvent {
18
- /** The `data-rc-sort-key` of the column the user asked to sort by. */
19
- key: string;
20
- /** The requested direction. */
21
- direction: RCDataTableSortDirection;
22
- /** The sort column before the request, if any. */
23
- previousKey: string | undefined;
24
- /** The sort direction before the request, if any. */
25
- previousDirection: RCDataTableSortDirection | undefined;
26
- }
27
- declare global {
28
- interface HTMLElementTagNameMap {
29
- 'rc-data-table': RCDataTable;
30
- }
31
- interface HTMLElementEventMap {
32
- 'rc-data-table-sort': CustomEvent<RCDataTableSortEvent>;
33
- }
34
- }
35
- /**
36
- * Sortable-header enhancer for a native `<table>`, following the WAI-ARIA
37
- * sortable table example.
38
- *
39
- * The consumer authors the table, and in each sortable column header a native
40
- * `<button>`, or a link to a server-sorted URL, inside a
41
- * `<th data-rc-sort-key="...">`. The element never sorts rows: it reflects the
42
- * sort state as `aria-sort` on the active header, draws a sort indicator for
43
- * every sortable column, and reports each request as `rc-data-table-sort` for
44
- * the consumer to re-render the rows. Headers that are links still navigate
45
- * unless a listener cancels the event.
46
- *
47
- * The host is the table's inline scroll container. While the table overflows,
48
- * the host becomes a focusable group named by the table's `<caption>`, so
49
- * keyboard users can scroll it.
50
- *
51
- * Built-in text follows the element's own `lang`, else `<html lang>`: per
52
- * element through `messages`, or for every instance through
53
- * `registerMessages()` from `@rcarls/rc-common` under `rc-data-table`.
54
- *
55
- * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-data-table rc-data-table docs}
56
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ WAI-ARIA sortable table example}
57
- *
58
- * @fires rc-data-table-sort - Fired when the user activates a sortable column header.
59
- * Cancelable; canceling it also cancels the click, so a header link does not navigate.
60
- *
61
- * @attr sort-key - Controlled sort column, matching a header's `data-rc-sort-key`. Host writes
62
- * are silent.
63
- * @attr sort-direction - Controlled sort direction: `ascending` or `descending`.
64
- * @attr default-sort-key - Initial sort column for uncontrolled use.
65
- * @attr default-sort-direction - Initial sort direction for uncontrolled use.
66
- * @attr announce - Announces each user sort through a polite live region.
67
- *
68
- * @cssprop [--rc-data-table-cell-padding-block] - Cell block padding. Defers to the user agent
69
- * when unset.
70
- * @cssprop [--rc-data-table-cell-padding-inline] - Cell inline padding. Defers to the user
71
- * agent when unset.
72
- * @cssprop [--rc-data-table-sort-indicator-gap=0.25em] - Space between a header label and its
73
- * sort indicator.
74
- * @cssprop [--rc-data-table-sort-none='\25C7'] - Indicator for a sortable column that is not
75
- * sorted.
76
- * @cssprop [--rc-data-table-sort-ascending='\25B2'] - Indicator for an ascending column.
77
- * @cssprop [--rc-data-table-sort-descending='\25BC'] - Indicator for a descending column.
78
- */
79
- export declare class RCDataTable extends ReactiveElement {
80
- /** Writes the element's attributes again after a DOM morph removes them. */
81
- protected readonly _morphRecovery: MorphRecoveryController;
82
- /** Announces each user sort through a polite live region. */
83
- announce: boolean;
84
- /** Built-in text overrides; unset keys fall back to registered text, then English. */
85
- messages: Partial<RCDataTableMessages> | undefined;
86
- private _sortKey;
87
- private _sortDirection;
88
- private _defaultSortKey;
89
- private _defaultSortDirection;
90
- private _uncontrolledKey;
91
- private _uncontrolledDirection;
92
- private readonly _messages;
93
- private _mutationObserver;
94
- private _resizeObserver;
95
- private _announcer;
96
- private readonly _$managedSort;
97
- private _scrollableWritten;
98
- private _writtenCaptionId;
99
- private _writtenTabIndex;
100
- private _writtenRole;
101
- private _writtenLabelledBy;
102
- /** Current sort column. Host writes are silent; assign `undefined` to release control. */
103
- get sortKey(): string | undefined;
104
- set sortKey(value: string | undefined);
105
- /** Current sort direction. Host writes are silent. */
106
- get sortDirection(): RCDataTableSortDirection;
107
- set sortDirection(value: RCDataTableSortDirection | undefined);
108
- /** Initial sort column for uncontrolled use. */
109
- get defaultSortKey(): string | undefined;
110
- set defaultSortKey(value: string | undefined);
111
- /** Initial sort direction for uncontrolled use. */
112
- get defaultSortDirection(): RCDataTableSortDirection;
113
- set defaultSortDirection(value: RCDataTableSortDirection);
114
- /** Renders nothing: the consumer's `<table>` stays the element's only content. */
115
- protected createRenderRoot(): HTMLElement;
116
- connectedCallback(): void;
117
- disconnectedCallback(): void;
118
- protected firstUpdated(): void;
119
- protected updated(): void;
120
- private _headers;
121
- private _sync;
122
- /** While the table overflows, the host is a focusable group named by the caption. */
123
- private _syncScrollable;
124
- private _onClick;
125
- }
126
- export default RCDataTable;