@aurodesignsystem-dev/auro-table 0.0.0-pr135.0 → 0.0.0-pr139.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.
Files changed (13) hide show
  1. package/README.md +110 -75
  2. package/custom-elements.json +14 -430
  3. package/demo/api.html +1 -1
  4. package/demo/api.md +32 -32
  5. package/demo/auro-table.min.js +25 -5
  6. package/demo/index.html +1 -1
  7. package/demo/index.md +25 -119
  8. package/dist/auro-table-C52RNUva.js +12 -0
  9. package/dist/index.d.ts +185 -18
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +16 -10
  13. package/dist/auro-table-Dx0M-P1P.js +0 -12
package/custom-elements.json CHANGED
@@ -4,445 +4,26 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "scripts/wca/auro-table.js",
7
+ "path": "src/auro-table.js",
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "description": "",
12
- "name": "AuroTableWCA",
13
- "superclass": {
14
- "name": "AuroTable",
15
- "module": "/src/auro-table.js"
16
- },
17
- "tagName": "auro-table",
18
- "customElement": true,
11
+ "description": "\nThe `auro-table` element supports two types of tables, either a generated table created by providing data for columns and rows via attributes, or by projecting your own custom table into the default slot of the component to be styled.",
12
+ "name": "AuroTable",
19
13
  "slots": [
20
14
  {
21
15
  "description": "Default slot for projecting a native `<table>` element. Only available when `columnHeaders` and `componentData` are not set.",
22
- "name": "",
23
- "inheritedFrom": {
24
- "name": "AuroTable",
25
- "module": "src/auro-table.js"
26
- }
27
- }
28
- ],
29
- "attributes": [
30
- {
31
- "name": "columnHeaders",
32
- "type": {
33
- "text": "array"
34
- },
35
- "description": "An array of strings representing the table's column headers.",
36
- "fieldName": "columnHeaders",
37
- "inheritedFrom": {
38
- "name": "AuroTable",
39
- "module": "src/auro-table.js"
40
- }
41
- },
42
- {
43
- "name": "componentData",
44
- "type": {
45
- "text": "array"
46
- },
47
- "description": "An array of objects representing the table's data rows.",
48
- "fieldName": "componentData",
49
- "inheritedFrom": {
50
- "name": "AuroTable",
51
- "module": "src/auro-table.js"
52
- }
53
- },
54
- {
55
- "name": "nowrap",
56
- "type": {
57
- "text": "boolean"
58
- },
59
- "description": "When true, prevents the table from wrapping its content.",
60
- "default": "false",
61
- "fieldName": "nowrap",
62
- "inheritedFrom": {
63
- "name": "AuroTable",
64
- "module": "src/auro-table.js"
65
- }
16
+ "name": ""
66
17
  }
67
18
  ],
68
19
  "members": [
69
20
  {
70
21
  "kind": "method",
71
- "name": "#bindToSlottedTable",
72
- "privacy": "private",
73
- "parameters": [
74
- {
75
- "name": "table",
76
- "type": {
77
- "text": "HTMLTableElement"
78
- }
79
- }
80
- ],
81
- "description": "Binds the component to a slotted table element.\nThis includes extracting existing elements and observing for mutations.",
82
- "inheritedFrom": {
83
- "name": "AuroTable",
84
- "module": "src/auro-table.js"
85
- }
86
- },
87
- {
88
- "kind": "method",
89
- "name": "#classMapFor",
90
- "privacy": "private",
91
- "parameters": [
92
- {
93
- "name": "tag",
94
- "type": {
95
- "text": "HTMLElement.tagName"
96
- }
97
- }
98
- ],
99
- "description": "Gets the class map based on this.#elementClasses for a given tag.",
100
- "return": {
101
- "type": {
102
- "text": "Object"
103
- }
104
- },
105
- "inheritedFrom": {
106
- "name": "AuroTable",
107
- "module": "src/auro-table.js"
108
- }
109
- },
110
- {
111
- "kind": "field",
112
- "name": "#elementClasses",
113
- "privacy": "private",
22
+ "name": "_initializeDefaults",
114
23
  "type": {
115
- "text": "object"
116
- },
117
- "default": "{ 'TABLE': ['body-default'], 'TH': ['heading-2xs'], // 'TD': [], // No specific classes for TD as per current requirements // 'TR': [], // No specific classes for TR as per current requirements // 'THEAD': [], // No specific classes for THEAD as per current requirements // 'TBODY': [] // No specific classes for TBODY as per current requirements }",
118
- "inheritedFrom": {
119
- "name": "AuroTable",
120
- "module": "src/auro-table.js"
24
+ "text": "_initializeDefaults() => void"
121
25
  }
122
26
  },
123
- {
124
- "kind": "method",
125
- "name": "#extractElementsFromSlottedTable",
126
- "privacy": "private",
127
- "parameters": [
128
- {
129
- "name": "table",
130
- "type": {
131
- "text": "HTMLTableElement"
132
- }
133
- }
134
- ],
135
- "description": "Extracts relevant elements from a slotted table and adds them to collections for tracking.",
136
- "inheritedFrom": {
137
- "name": "AuroTable",
138
- "module": "src/auro-table.js"
139
- }
140
- },
141
- {
142
- "kind": "method",
143
- "name": "#extractHeaders",
144
- "privacy": "private",
145
- "description": "Extracts headers from the columnHeaders property and populates the table header.",
146
- "return": {
147
- "type": {
148
- "text": "void"
149
- }
150
- },
151
- "inheritedFrom": {
152
- "name": "AuroTable",
153
- "module": "src/auro-table.js"
154
- }
155
- },
156
- {
157
- "kind": "method",
158
- "name": "#extractRows",
159
- "privacy": "private",
160
- "description": "Extracts rows from the componentData property and populates the table body.",
161
- "return": {
162
- "type": {
163
- "text": "void"
164
- }
165
- },
166
- "inheritedFrom": {
167
- "name": "AuroTable",
168
- "module": "src/auro-table.js"
169
- }
170
- },
171
- {
172
- "kind": "method",
173
- "name": "#handleExternalTableSlotChange",
174
- "privacy": "private",
175
- "description": "Handles when elements are projected into the default slot",
176
- "return": {
177
- "type": {
178
- "text": "void"
179
- }
180
- },
181
- "inheritedFrom": {
182
- "name": "AuroTable",
183
- "module": "src/auro-table.js"
184
- }
185
- },
186
- {
187
- "kind": "method",
188
- "name": "#injectStylesIntoSlottedTable",
189
- "privacy": "private",
190
- "parameters": [
191
- {
192
- "name": "table",
193
- "type": {
194
- "text": "HTMLTableElement"
195
- }
196
- }
197
- ],
198
- "description": "Injects styles into the slotted table.",
199
- "return": {
200
- "type": {
201
- "text": "void"
202
- }
203
- },
204
- "inheritedFrom": {
205
- "name": "AuroTable",
206
- "module": "src/auro-table.js"
207
- }
208
- },
209
- {
210
- "kind": "method",
211
- "name": "#observeTableMutations",
212
- "privacy": "private",
213
- "parameters": [
214
- {
215
- "name": "table",
216
- "type": {
217
- "text": "HTMLTableElement"
218
- }
219
- }
220
- ],
221
- "description": "Observes mutations to the table element and adds or removes elements from collections accordingly.",
222
- "inheritedFrom": {
223
- "name": "AuroTable",
224
- "module": "src/auro-table.js"
225
- }
226
- },
227
- {
228
- "kind": "field",
229
- "name": "#runtimeUtils",
230
- "privacy": "private",
231
- "default": "new AuroLibraryRuntimeUtils()",
232
- "inheritedFrom": {
233
- "name": "AuroTable",
234
- "module": "src/auro-table.js"
235
- }
236
- },
237
- {
238
- "kind": "field",
239
- "name": "#tableBody",
240
- "privacy": "private",
241
- "readonly": true,
242
- "inheritedFrom": {
243
- "name": "AuroTable",
244
- "module": "src/auro-table.js"
245
- }
246
- },
247
- {
248
- "kind": "field",
249
- "name": "#tableBodyRef",
250
- "privacy": "private",
251
- "inheritedFrom": {
252
- "name": "AuroTable",
253
- "module": "src/auro-table.js"
254
- }
255
- },
256
- {
257
- "kind": "field",
258
- "name": "#tableHeader",
259
- "privacy": "private",
260
- "readonly": true,
261
- "inheritedFrom": {
262
- "name": "AuroTable",
263
- "module": "src/auro-table.js"
264
- }
265
- },
266
- {
267
- "kind": "field",
268
- "name": "#tableHeaderRef",
269
- "privacy": "private",
270
- "inheritedFrom": {
271
- "name": "AuroTable",
272
- "module": "src/auro-table.js"
273
- }
274
- },
275
- {
276
- "kind": "field",
277
- "name": "#tableObserver",
278
- "privacy": "private",
279
- "type": {
280
- "text": "null"
281
- },
282
- "default": "null",
283
- "inheritedFrom": {
284
- "name": "AuroTable",
285
- "module": "src/auro-table.js"
286
- }
287
- },
288
- {
289
- "kind": "field",
290
- "name": "#tableStylesTextContent",
291
- "privacy": "private",
292
- "static": true,
293
- "default": "`${styleCss.cssText} ${tokensCss.cssText}`",
294
- "readonly": true,
295
- "inheritedFrom": {
296
- "name": "AuroTable",
297
- "module": "src/auro-table.js"
298
- }
299
- },
300
- {
301
- "kind": "field",
302
- "name": "#tableTag",
303
- "privacy": "private",
304
- "readonly": true,
305
- "inheritedFrom": {
306
- "name": "AuroTable",
307
- "module": "src/auro-table.js"
308
- }
309
- },
310
- {
311
- "kind": "field",
312
- "name": "#tableTagRef",
313
- "privacy": "private",
314
- "inheritedFrom": {
315
- "name": "AuroTable",
316
- "module": "src/auro-table.js"
317
- }
318
- },
319
- {
320
- "kind": "field",
321
- "name": "#tagCollections",
322
- "privacy": "private",
323
- "description": "Creates a ChildItemService for each relevant table tag to manage collections of those elements.\nTo create a collection for a new tag, add it to the tagCollections array.",
324
- "type": {
325
- "text": "Object<string, ChildItemService>"
326
- },
327
- "inheritedFrom": {
328
- "name": "AuroTable",
329
- "module": "src/auro-table.js"
330
- }
331
- },
332
- {
333
- "kind": "field",
334
- "name": "collectionUpdated",
335
- "description": "Handles the addition of new elements to the table.\nCallback function for ChildItemService subscriptions contained in tagCollections.",
336
- "parameters": [
337
- {
338
- "name": "addedNodes",
339
- "type": {
340
- "text": "NodeList"
341
- }
342
- }
343
- ],
344
- "privacy": "private",
345
- "inheritedFrom": {
346
- "name": "AuroTable",
347
- "module": "src/auro-table.js"
348
- }
349
- },
350
- {
351
- "kind": "field",
352
- "name": "columnHeaders",
353
- "privacy": "public",
354
- "type": {
355
- "text": "array"
356
- },
357
- "description": "An array of strings representing the table's column headers.",
358
- "attribute": "columnHeaders",
359
- "reflects": true,
360
- "inheritedFrom": {
361
- "name": "AuroTable",
362
- "module": "src/auro-table.js"
363
- }
364
- },
365
- {
366
- "kind": "field",
367
- "name": "componentData",
368
- "privacy": "public",
369
- "type": {
370
- "text": "array"
371
- },
372
- "description": "An array of objects representing the table's data rows.",
373
- "attribute": "componentData",
374
- "reflects": true,
375
- "inheritedFrom": {
376
- "name": "AuroTable",
377
- "module": "src/auro-table.js"
378
- }
379
- },
380
- {
381
- "kind": "field",
382
- "name": "nowrap",
383
- "privacy": "public",
384
- "type": {
385
- "text": "boolean"
386
- },
387
- "description": "When true, prevents the table from wrapping its content.",
388
- "default": "false",
389
- "attribute": "nowrap",
390
- "reflects": true,
391
- "inheritedFrom": {
392
- "name": "AuroTable",
393
- "module": "src/auro-table.js"
394
- }
395
- },
396
- {
397
- "kind": "method",
398
- "name": "register",
399
- "static": true,
400
- "parameters": [
401
- {
402
- "name": "name",
403
- "default": "\"auro-table\"",
404
- "description": "The name of element that you want to register to.",
405
- "optional": true,
406
- "type": {
407
- "text": "string"
408
- }
409
- }
410
- ],
411
- "description": "This will register this element with the browser.",
412
- "inheritedFrom": {
413
- "name": "AuroTable",
414
- "module": "src/auro-table.js"
415
- }
416
- }
417
- ]
418
- }
419
- ],
420
- "exports": [
421
- {
422
- "kind": "custom-element-definition",
423
- "name": "auro-table",
424
- "declaration": {
425
- "name": "AuroTableWCA",
426
- "module": "scripts/wca/auro-table.js"
427
- }
428
- }
429
- ]
430
- },
431
- {
432
- "kind": "javascript-module",
433
- "path": "src/auro-table.js",
434
- "declarations": [
435
- {
436
- "kind": "class",
437
- "description": "The AuroTable component provides two distinct functionalities for rendering and managing HTML tables:\n\n1. **Data-driven Table Rendering**:\n - When the `columnHeaders` and `componentData` properties are set, the component generates a table structure internally.\n - Table headers are created from `columnHeaders`, and rows are populated from `componentData`.\n\n2. **Slotted Table**:\n - When a native `<table>` element is projected into the component's default slot, AuroTable enhances it by:\n - Injecting design system styles directly into the table.\n - Tracking and managing child elements (TH, TD, TR, THEAD, TBODY, TABLE) using internal collections.\n - Observing DOM mutations to dynamically update collections and apply appropriate classes.\n - This mode allows developers to use their own table markup while benefiting from AuroTable's styling and child management features.",
438
- "name": "AuroTable",
439
- "slots": [
440
- {
441
- "description": "Default slot for projecting a native `<table>` element. Only available when `columnHeaders` and `componentData` are not set.",
442
- "name": ""
443
- }
444
- ],
445
- "members": [
446
27
  {
447
28
  "kind": "method",
448
29
  "name": "#bindToSlottedTable",
@@ -674,7 +255,6 @@
674
255
  "text": "boolean"
675
256
  },
676
257
  "description": "When true, prevents the table from wrapping its content.",
677
- "default": "false",
678
258
  "attribute": "nowrap",
679
259
  "reflects": true
680
260
  },
@@ -686,14 +266,17 @@
686
266
  {
687
267
  "name": "name",
688
268
  "default": "\"auro-table\"",
689
- "description": "The name of element that you want to register to.",
269
+ "description": "The name of the element that you want to register.",
690
270
  "optional": true,
691
271
  "type": {
692
272
  "text": "string"
693
273
  }
694
274
  }
695
275
  ],
696
- "description": "This will register this element with the browser."
276
+ "description": "This will register this element with the browser.",
277
+ "type": {
278
+ "text": "register(name?: string = \"auro-table\") => void"
279
+ }
697
280
  }
698
281
  ],
699
282
  "attributes": [
@@ -719,7 +302,6 @@
719
302
  "text": "boolean"
720
303
  },
721
304
  "description": "When true, prevents the table from wrapping its content.",
722
- "default": "false",
723
305
  "fieldName": "nowrap"
724
306
  }
725
307
  ],
@@ -727,7 +309,9 @@
727
309
  "name": "LitElement",
728
310
  "package": "lit"
729
311
  },
730
- "customElement": true
312
+ "tagName": "auro-table",
313
+ "customElement": true,
314
+ "modulePath": "src/auro-table.js"
731
315
  }
732
316
  ],
733
317
  "exports": [
package/demo/api.html CHANGED
@@ -51,6 +51,6 @@
51
51
  <script type="module" src="./api.min.js" data-demo-script="true"></script>
52
52
 
53
53
  <!-- If additional elements are needed for the demo, add them here. -->
54
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
55
55
  </body>
56
56
  </html>
package/demo/api.md CHANGED
@@ -1,21 +1,23 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-table
5
5
 
6
+ The `auro-table` element supports two types of tables, either a generated table created by providing data for columns and rows via attributes, or by projecting your own custom table into the default slot of the component to be styled.
7
+
6
8
  ### Properties & Attributes
7
9
 
8
- | Properties | Attributes | Type | Default | Description |
9
- | ------------- | ------------- | ------- | ------- | ------------------------------------------------------------ |
10
- | columnHeaders | columnHeaders | array | | An array of strings representing the table's column headers. |
11
- | componentData | componentData | array | | An array of objects representing the table's data rows. |
12
- | nowrap | nowrap | boolean | false | When true, prevents the table from wrapping its content. |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ------------- | ------------- | --------- | ------- | ------- | ------------------------------------------------------------ |
12
+ | columnHeaders | columnHeaders | | array | | An array of strings representing the table's column headers. |
13
+ | componentData | componentData | | array | | An array of objects representing the table's data rows. |
14
+ | nowrap | nowrap | | boolean | | When true, prevents the table from wrapping its content. |
13
15
 
14
16
  ### Methods
15
17
 
16
- | Name | Parameters | Return | Description |
17
- | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
18
- | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
18
+ | Name | Parameters | Return | Description |
19
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
20
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
19
21
 
20
22
  ### Slots
21
23
 
@@ -24,17 +26,12 @@
24
26
  | (default) | Default slot for projecting a native `<table>` element. Only available when `columnHeaders` and `componentData` are not set. |
25
27
  <!-- AURO-GENERATED-CONTENT:END -->
26
28
 
27
- ## API Examples
28
-
29
- The `auro-table` component supports two methods of table generation, either via data provided by attributes, or by projecting your own custom table into the component to be styled.
30
-
31
- ### Attribute Data Table
29
+ ## Generated Table
32
30
 
33
31
  In order to have the component generate your table for you, you can pass data to the `columnHeaders` and `componentData` attributes to define your column headers and cell data respectively.
34
32
 
35
- #### Attribute Definitions
36
-
37
- ##### `columnHeaders`
33
+ ### columnHeaders
34
+
38
35
  This attribute takes an array of column headers to use, and accepts blank strings for empty columns. It does not support duplicate values, including empty strings, as each value is used as a key to project data into the table cells via the `componentData` attribute.
39
36
 
40
37
  Example:
@@ -42,7 +39,8 @@ Example:
42
39
  ["Column 1", "Column 2", "Column 3"]
43
40
  ```
44
41
 
45
- ##### `componentData`
42
+ ### componentData
43
+
46
44
  This attribute takes an array of objects, with each object representing a row with data defined for each cell by specifying the matching column-header value.
47
45
 
48
46
  Example:
@@ -62,8 +60,8 @@ Example:
62
60
  ```
63
61
 
64
62
  <div class="exampleWrapper">
65
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic_attributes.html) -->
66
- <!-- The below content is automatically added from ../apiExamples/basic_attributes.html -->
63
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-attributes.html) -->
64
+ <!-- The below content is automatically added from ../apiExamples/basic-attributes.html -->
67
65
  <auro-table
68
66
  columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
69
67
  componentData='[
@@ -78,8 +76,8 @@ Example:
78
76
  </div>
79
77
  <auro-accordion alignRight>
80
78
  <span slot="trigger">See code</span>
81
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic_attributes.html) -->
82
- <!-- The below code snippet is automatically added from ../apiExamples/basic_attributes.html -->
79
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-attributes.html) -->
80
+ <!-- The below code snippet is automatically added from ../apiExamples/basic-attributes.html -->
83
81
 
84
82
  ```html
85
83
  <auro-table
@@ -96,13 +94,13 @@ Example:
96
94
  <!-- AURO-GENERATED-CONTENT:END -->
97
95
  </auro-accordion>
98
96
 
99
- ### Custom Table
97
+ ## Projected Table
100
98
 
101
- Alternatively, you can simply provide your own table into the `auro-table` tag and fill it with whatever content you like and it will be styled appropriately.
99
+ For more dynamic content, you can provide your own custom HTML5 `<table>` element inside the `auro-table` tag to be projected into the default slot and styled appropriately. The `auro-table` component will add any supporting classes needed for styling. Mutations to the table, such as adding and removing columns and cells, are supported.
102
100
 
103
101
  <div class="exampleWrapper">
104
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic_slot.html) -->
105
- <!-- The below content is automatically added from ../apiExamples/basic_slot.html -->
102
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-slot.html) -->
103
+ <!-- The below content is automatically added from ../apiExamples/basic-slot.html -->
106
104
  <auro-table>
107
105
  <table>
108
106
  <thead>
@@ -165,8 +163,8 @@ Alternatively, you can simply provide your own table into the `auro-table` tag a
165
163
  </div>
166
164
  <auro-accordion alignRight>
167
165
  <span slot="trigger">See code</span>
168
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic_slot.html) -->
169
- <!-- The below code snippet is automatically added from ../apiExamples/basic_slot.html -->
166
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-slot.html) -->
167
+ <!-- The below code snippet is automatically added from ../apiExamples/basic-slot.html -->
170
168
 
171
169
  ```html
172
170
  <auro-table>
@@ -231,7 +229,9 @@ Alternatively, you can simply provide your own table into the `auro-table` tag a
231
229
  <!-- AURO-GENERATED-CONTENT:END -->
232
230
  </auro-accordion>
233
231
 
234
- #### noWrap
232
+ ## Property & Attribute Examples
233
+
234
+ ### noWrap
235
235
 
236
236
  The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
237
237
 
@@ -270,9 +270,9 @@ The `nowrap` attribute, when applied, will prevent table content from word wrapp
270
270
  <!-- AURO-GENERATED-CONTENT:END -->
271
271
  </auro-accordion>
272
272
 
273
- ## Theme Support
273
+ ## Restyle Component with CSS Variables
274
274
 
275
- The component may be restyled using the following code sample and changing the values of the following token(s).
275
+ The component may be restyled by changing the values of the following token(s).
276
276
 
277
277
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
278
278
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->