@aurodesignsystem-dev/auro-table 0.0.0-pr142.1 → 0.0.0-pr144.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 +37 -229
  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 +10 -6
  13. package/dist/auro-table-Dx0M-P1P.js +0 -12
package/demo/auro-table.min.js CHANGED
@@ -117,6 +117,19 @@ class AuroLibraryRuntimeUtils {
117
117
 
118
118
  return elemTag === tag || elem.hasAttribute(tag);
119
119
  }
120
+
121
+ /**
122
+ * Gets the text content of a named slot.
123
+ * @returns {String}
124
+ * @private
125
+ */
126
+ getSlotText(elem, name) {
127
+ const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
128
+ const nodes = slot?.assignedNodes({ flatten: true }) || [];
129
+ const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
130
+
131
+ return text || null;
132
+ }
120
133
  }
121
134
 
122
135
  var styleCss = i$4`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host,auro-table,[auro-table]{display:block;overflow:auto}:host([nowrap]),auro-table[nowrap],[auro-table][nowrap]{white-space:nowrap}:host table,auro-table table,[auro-table] table{overflow:scroll;width:100%;margin-bottom:var(--ds-size-400, 2rem);border-collapse:collapse;border-spacing:var(--ds-size-100, .5rem)}:host table thead,auro-table table thead,[auro-table] table thead{border-bottom:1px solid var(--ds-auro-table-border-color);border-collapse:collapse}:host table tr:nth-child(2n),auro-table table tr:nth-child(2n),[auro-table] table tr:nth-child(2n){background-color:var(--ds-auro-table-alt-row-container-color)}:host table th,:host table td,auro-table table th,auro-table table td,[auro-table] table th,[auro-table] table td{padding:var(--ds-size-200, 1rem)}:host table th,auro-table table th,[auro-table] table th{text-align:left}
@@ -350,8 +363,11 @@ class ChildItemService {
350
363
 
351
364
 
352
365
  /**
366
+ *
367
+ * 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.
368
+ * @customElement auro-table
369
+ *
353
370
  * The AuroTable component provides two distinct functionalities for rendering and managing HTML tables:
354
- *
355
371
  * 1. **Data-driven Table Rendering**:
356
372
  * - When the `columnHeaders` and `componentData` properties are set, the component generates a table structure internally.
357
373
  * - Table headers are created from `columnHeaders`, and rows are populated from `componentData`.
@@ -458,6 +474,10 @@ class AuroTable extends i$1 {
458
474
  constructor() {
459
475
  super();
460
476
 
477
+ this._initializeDefaults();
478
+ }
479
+
480
+ _initializeDefaults() {
461
481
  this.nowrap = false;
462
482
  }
463
483
 
@@ -469,7 +489,7 @@ class AuroTable extends i$1 {
469
489
  */
470
490
  columnHeaders: {
471
491
  type: Array,
472
- reflect: true,
492
+ reflect: true
473
493
  },
474
494
 
475
495
  /**
@@ -477,7 +497,7 @@ class AuroTable extends i$1 {
477
497
  */
478
498
  componentData: {
479
499
  type: Array,
480
- reflect: true,
500
+ reflect: true
481
501
  },
482
502
 
483
503
  /**
@@ -485,7 +505,7 @@ class AuroTable extends i$1 {
485
505
  */
486
506
  nowrap: {
487
507
  type: Boolean,
488
- reflect: true,
508
+ reflect: true
489
509
  },
490
510
  };
491
511
  }
@@ -496,7 +516,7 @@ class AuroTable extends i$1 {
496
516
 
497
517
  /**
498
518
  * This will register this element with the browser.
499
- * @param {string} [name="auro-table"] - The name of element that you want to register to.
519
+ * @param {string} [name="auro-table"] - The name of the element that you want to register.
500
520
  *
501
521
  * @example
502
522
  * AuroTable.register("custom-table") // this will register this element to <custom-table/>
package/demo/index.html CHANGED
@@ -51,6 +51,6 @@
51
51
  <script type="module" src="./index.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/index.md CHANGED
@@ -1,20 +1,20 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `../docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Table
8
-
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
11
- Use the `auro-table` custom element to illustrate tabular data or content. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API.
7
+ # Table
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ Use the `auro-table` custom element to illustrate tabular data or content. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API. Alternatively, an HTML5 `<table>` may be used inside of the tag to create more dynamic tabular data.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## Use Cases
15
-
16
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
17
- <!-- The below content is automatically added from ../docs/partials/useCases.md -->
14
+ ## Use Cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
18
  The `<auro-table>` element should be used in situations where users may:
19
19
 
20
20
  * Show static or dynamic tabular data or content
@@ -22,15 +22,13 @@ The `<auro-table>` element should be used in situations where users may:
22
22
 
23
23
  ## Example(s)
24
24
 
25
- 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.
26
-
27
- ### Attribute Data Table
25
+ ### Generated Table
28
26
 
29
27
  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.
30
28
 
31
29
  <div class="exampleWrapper">
32
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic_attributes.html) -->
33
- <!-- The below content is automatically added from ../apiExamples/basic_attributes.html -->
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-attributes.html) -->
31
+ <!-- The below content is automatically added from ../apiExamples/basic-attributes.html -->
34
32
  <auro-table
35
33
  columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
36
34
  componentData='[
@@ -45,8 +43,8 @@ In order to have the component generate your table for you, you can pass data to
45
43
  </div>
46
44
  <auro-accordion alignRight>
47
45
  <span slot="trigger">See code</span>
48
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic_attributes.html) -->
49
- <!-- The below code snippet is automatically added from ../apiExamples/basic_attributes.html -->
46
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-attributes.html) -->
47
+ <!-- The below code snippet is automatically added from ../apiExamples/basic-attributes.html -->
50
48
 
51
49
  ```html
52
50
  <auro-table
@@ -63,13 +61,13 @@ In order to have the component generate your table for you, you can pass data to
63
61
  <!-- AURO-GENERATED-CONTENT:END -->
64
62
  </auro-accordion>
65
63
 
66
- ### Custom Table
64
+ ### Projected Table
67
65
 
68
- Alternatively, you can simply provide your own table inside the `auro-table` tag and fill it with whatever content you like and it will be styled appropriately.
66
+ 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.
69
67
 
70
68
  <div class="exampleWrapper">
71
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic_slot.html) -->
72
- <!-- The below content is automatically added from ../apiExamples/basic_slot.html -->
69
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-slot.html) -->
70
+ <!-- The below content is automatically added from ../apiExamples/basic-slot.html -->
73
71
  <auro-table>
74
72
  <table>
75
73
  <thead>
@@ -132,8 +130,8 @@ Alternatively, you can simply provide your own table inside the `auro-table` tag
132
130
  </div>
133
131
  <auro-accordion alignRight>
134
132
  <span slot="trigger">See code</span>
135
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic_slot.html) -->
136
- <!-- The below code snippet is automatically added from ../apiExamples/basic_slot.html -->
133
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-slot.html) -->
134
+ <!-- The below code snippet is automatically added from ../apiExamples/basic-slot.html -->
137
135
 
138
136
  ```html
139
137
  <auro-table>
@@ -195,97 +193,5 @@ Alternatively, you can simply provide your own table inside the `auro-table` tag
195
193
  </table>
196
194
  </auro-table>
197
195
  ```
198
- <!-- AURO-GENERATED-CONTENT:END -->
199
- </auro-accordion>
200
-
201
- ## React and Svelte support
202
-
203
- ```js
204
- const headers=JSON.stringify(["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]);
205
- const data=JSON.stringify([
206
- {"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
207
- {"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
208
- {"": "Team meeting", "Wednesday": "10:00am" },
209
- {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
210
- ])
211
-
212
- <auro-table nowrap columnHeaders={headers} componentData={data}>Default text</auro-table>
213
- ```
214
-
215
- Having a closing statement about your example helps to really complete the thought with your reader.
216
-
217
- ## WC Style Sheets support
218
-
219
- For use cases where the general design of the Auro Table is needed, but the component is unseable, please use the [.auro_table](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_table) styles from the Web Core Style Sheets library.
220
-
221
- ```html
222
- <table class="auro_table">
223
- <thead>
224
- <tr>
225
- <th>The table header</th>
226
- <th>The table header</th>
227
- </tr>
228
- </thead>
229
- <tbody>
230
- <tr>
231
- <td>The table body</td>
232
- <td>with two columns</td>
233
- </tr>
234
- <tr>
235
- <td>The table body</td>
236
- <td>with two columns</td>
237
- </tr>
238
- <tr>
239
- <td>The table body</td>
240
- <td>with two columns</td>
241
- </tr>
242
- </tbody>
243
- </table>
244
- ```
245
-
246
- ## Recommended Use and Version Control
247
-
248
- There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-table` custom element is defined automatically.
249
-
250
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroTable.register(name)` method and pass in a unique name.
251
-
252
- ```js
253
- import { AuroTable } from '@aurodesignsystem/auro-table/class'
254
-
255
- AuroTable.register('custom-table');
256
- ```
257
-
258
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.
259
-
260
- <div class="exampleWrapper">
261
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customTable.html) -->
262
- <!-- The below content is automatically added from ../apiExamples/customTable.html -->
263
- <custom-table
264
- columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
265
- componentData='[
266
- {"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
267
- {"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
268
- {"": "Team meeting", "Wednesday": "10:00am" },
269
- {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
270
- ]'>
271
- </custom-table>
272
- <!-- AURO-GENERATED-CONTENT:END -->
273
- </div>
274
- <auro-accordion alignRight>
275
- <span slot="trigger">See code</span>
276
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customTable.html) -->
277
- <!-- The below code snippet is automatically added from ../apiExamples/customTable.html -->
278
-
279
- ```html
280
- <custom-table
281
- columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
282
- componentData='[
283
- {"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
284
- {"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
285
- {"": "Team meeting", "Wednesday": "10:00am" },
286
- {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
287
- ]'>
288
- </custom-table>
289
- ```
290
- <!-- AURO-GENERATED-CONTENT:END -->
291
- </auro-accordion>
196
+ <!-- AURO-GENERATED-CONTENT:END -->
197
+
package/dist/auro-table-C52RNUva.js ADDED
@@ -0,0 +1,12 @@
1
+ import{css as e,LitElement as t,html as s}from"lit";import{createRef as a,ref as i}from"lit/directives/ref.js";import{classMap as l}from"lit/directives/class-map.js";class r{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,!0)}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(s?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var n=e`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host,auro-table,[auro-table]{display:block;overflow:auto}:host([nowrap]),auro-table[nowrap],[auro-table][nowrap]{white-space:nowrap}:host table,auro-table table,[auro-table] table{overflow:scroll;width:100%;margin-bottom:var(--ds-size-400, 2rem);border-collapse:collapse;border-spacing:var(--ds-size-100, .5rem)}:host table thead,auro-table table thead,[auro-table] table thead{border-bottom:1px solid var(--ds-auro-table-border-color);border-collapse:collapse}:host table tr:nth-child(2n),auro-table table tr:nth-child(2n),[auro-table] table tr:nth-child(2n){background-color:var(--ds-auro-table-alt-row-container-color)}:host table th,:host table td,auro-table table th,auro-table table td,[auro-table] table th,[auro-table] table td{padding:var(--ds-size-200, 1rem)}:host table th,auro-table table th,[auro-table] table th{text-align:left}
2
+ `,o=e`:host{--ds-auro-table-alt-row-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7);--ds-auro-table-border-color: var(--ds-basic-color-border-subtle, #dddddd)}
3
+ `;class c{#e=[];#t=[];#s=[];get current(){return this.#e}constructor({callback:e}={}){"function"==typeof e&&this.subscribe(e)}subscribe(e){if("function"!=typeof e)throw new Error("ChildItemService | subscribe: Callback must be a function");return this.#s.push(e),()=>this.unsubscribe(e)}unsubscribe(e){if("function"!=typeof e)throw new Error("ChildItemService | unsubscribe: Callback must be a function");return this.#s=this.#s.filter(t=>t!==e),!0}#a(){for(const e of this.#s)e({items:this.#e,previousItems:this.#t,addedItems:this.#e.filter(e=>!this.#t.includes(e)),removedItems:this.#t.filter(e=>!this.#e.includes(e))})}add(e){if("object"!=typeof e||null===e)throw new Error("ChildItemService | addItem: Item must be an object");this.#t=this.#i(),this.#e.push(e),this.#a()}addMany(e){if(!e||"function"!=typeof e[Symbol.iterator]||"string"==typeof e)throw new Error("ChildItemService | addMany: Items must be iterable (array, etc.)");this.#t=this.#i(),this.#e.push(...e),this.#a()}remove(e){if("object"!=typeof e||null===e)throw new Error("ChildItemService | removeItem: Item must be an object");this.#t=this.#i(),this.#e=this.#e.filter(t=>t!==e),this.#a()}clear(){this.#t=this.#i(),this.#e=[],this.#a()}getItemByIndex(e){return this.#e[e]}getItemByNumber(e){if(0===this.#e.length||"number"!=typeof e||e<0||e>this.#e.length)throw new Error("ChildItemService | getItemByNumber: Number must be a valid index within the range of items.");return this.#e[e-1]}getPreviousItem(e){if("number"!=typeof e||e<1||e>this.#e.length)throw new Error("ChildItemService | getPreviousItem: Index must be a valid number within the range of previous items.");let t=e-2;return t=t<0?this.#e.length-1:t,this.#e[t]}getNextItem(e){if("number"!=typeof e||e<1||e>this.#e.length)throw new Error("ChildItemService | getNextItem: Index must be a valid number within the range of previous items.");let t=e;return t=t>=this.#e.length?0:t,this.#e[t]}#i(){return[...this.#e]}}class m extends t{static#l=`${n.cssText} ${o.cssText}`;#r=new r;#n=null;#o=a();get#c(){return this.#o.value}#m=a();get#h(){return this.#m.value}#d=a();get#g(){return this.#d.value}#f={TABLE:["body-default"],TH:["heading-2xs"]};collectionUpdated=({addedItems:e})=>{if(e?.length){const t=e[0].tagName;if(!t)return;const s=this.#f[t];s&&e.forEach(e=>e.classList.add(...s))}};#y=["TH","TD","TR","THEAD","TBODY","TABLE"].reduce((e,t)=>(e[t]=new c({callback:this.collectionUpdated}),e),{});#p(e){const t=e?.toUpperCase();return this.#f[t]?.reduce((e,t)=>(e[t]=!0,e),{})||{}}constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.nowrap=!1}static get properties(){return{columnHeaders:{type:Array,reflect:!0},componentData:{type:Array,reflect:!0},nowrap:{type:Boolean,reflect:!0}}}static get styles(){return[n,o]}static register(e="auro-table"){r.prototype.registerComponent(e,m)}updated(e){e.has("columnHeaders")&&this.#b(),e.has("componentData")&&this.#u()}firstUpdated(){this.#r.handleComponentTagRename(this,"auro-table")}disconnectedCallback(){super.disconnectedCallback(),this.#n&&this.#n.disconnect()}#b(){if(this.columnHeaders){if(!this.#h)return void console.warn("auro-table: #tableHeader is null or undefined in #extractHeaders(). This may indicate a rendering or initialization issue.");this.#h.innerHTML="";const e=document.createElement("tr");this.#h.appendChild(e),this.columnHeaders.forEach(t=>{const s=document.createElement("th");s.classList.add(...this.#f.TH),s.innerHTML=t,e.appendChild(s)})}}#u(){if(this.#g){if(this.#g.innerHTML="",this.componentData&&this.columnHeaders){const e=document.createDocumentFragment();this.componentData.forEach(t=>{const s=document.createElement("tr");this.columnHeaders.forEach(e=>{const a=document.createElement("td"),i=t[e]||"";a.innerHTML=i,s.appendChild(a)}),e.appendChild(s)}),this.#g.appendChild(e)}}else console.error("auro-table: #tableBody is missing. Unable to extract rows.")}#w(e){this.#n&&this.#n.disconnect(),this.#n=new MutationObserver(e=>{for(const t of e)t.addedNodes.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&this.#y[e.tagName]?.add(e)}),t.removedNodes.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&this.#y[e.tagName]?.remove(e)})}),this.#n.observe(e,{childList:!0,subtree:!0})}#v(e){[...e.querySelectorAll("th"),...e.querySelectorAll("td"),...e.querySelectorAll("tr"),...e.querySelectorAll("thead"),...e.querySelectorAll("tbody"),e].forEach(e=>this.#y[e.tagName]?.add(e))}#x(e){this.#v(e),this.#w(e)}#S(e){if(e.querySelector(".auro-table--injected-styles"))return;const t=document.createElement("style");t.classList.add("auro-table--injected-styles"),t.textContent=m.#l,e.prepend(t)}#I(){const e=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0}).filter(e=>e.nodeType===Node.ELEMENT_NODE).find(e=>"TABLE"===e.nodeName);e&&(this.#x(e),this.#S(e))}render(){return this.columnHeaders?.length&&this.componentData?.length?s`
4
+ <table ${i(this.#o)} class=${l(this.#p("TABLE"))}>
5
+ <thead ${i(this.#m)}>
6
+ </thead>
7
+ <tbody ${i(this.#d)}>
8
+ </tbody>
9
+ </table>
10
+ `:s`
11
+ <slot @slotchange=${this.#I}></slot>
12
+ `}}export{m as A};
package/dist/index.d.ts CHANGED
@@ -1,18 +1,185 @@
1
- import { css, LitElement, html } from 'lit';
2
- import { createRef, ref } from 'lit/directives/ref.js';
3
- import { classMap } from 'lit/directives/class-map.js';
4
-
5
- class r{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{});}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,true);}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}}var n=css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host,auro-table,[auro-table]{display:block;overflow:auto}:host([nowrap]),auro-table[nowrap],[auro-table][nowrap]{white-space:nowrap}:host table,auro-table table,[auro-table] table{overflow:scroll;width:100%;margin-bottom:var(--ds-size-400, 2rem);border-collapse:collapse;border-spacing:var(--ds-size-100, .5rem)}:host table thead,auro-table table thead,[auro-table] table thead{border-bottom:1px solid var(--ds-auro-table-border-color);border-collapse:collapse}:host table tr:nth-child(2n),auro-table table tr:nth-child(2n),[auro-table] table tr:nth-child(2n){background-color:var(--ds-auro-table-alt-row-container-color)}:host table th,:host table td,auro-table table th,auro-table table td,[auro-table] table th,[auro-table] table td{padding:var(--ds-size-200, 1rem)}:host table th,auro-table table th,[auro-table] table th{text-align:left}
6
- `,o=css`:host{--ds-auro-table-alt-row-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7);--ds-auro-table-border-color: var(--ds-basic-color-border-subtle, #dddddd)}
7
- `;class c{#e=[];#t=[];#s=[];get current(){return this.#e}constructor({callback:e}={}){"function"==typeof e&&this.subscribe(e);}subscribe(e){if("function"!=typeof e)throw new Error("ChildItemService | subscribe: Callback must be a function");return this.#s.push(e),()=>this.unsubscribe(e)}unsubscribe(e){if("function"!=typeof e)throw new Error("ChildItemService | unsubscribe: Callback must be a function");return this.#s=this.#s.filter(t=>t!==e),true}#a(){for(const e of this.#s)e({items:this.#e,previousItems:this.#t,addedItems:this.#e.filter(e=>!this.#t.includes(e)),removedItems:this.#t.filter(e=>!this.#e.includes(e))});}add(e){if("object"!=typeof e||null===e)throw new Error("ChildItemService | addItem: Item must be an object");this.#t=this.#i(),this.#e.push(e),this.#a();}addMany(e){if(!e||"function"!=typeof e[Symbol.iterator]||"string"==typeof e)throw new Error("ChildItemService | addMany: Items must be iterable (array, etc.)");this.#t=this.#i(),this.#e.push(...e),this.#a();}remove(e){if("object"!=typeof e||null===e)throw new Error("ChildItemService | removeItem: Item must be an object");this.#t=this.#i(),this.#e=this.#e.filter(t=>t!==e),this.#a();}clear(){this.#t=this.#i(),this.#e=[],this.#a();}getItemByIndex(e){return this.#e[e]}getItemByNumber(e){if(0===this.#e.length||"number"!=typeof e||e<0||e>this.#e.length)throw new Error("ChildItemService | getItemByNumber: Number must be a valid index within the range of items.");return this.#e[e-1]}getPreviousItem(e){if("number"!=typeof e||e<1||e>this.#e.length)throw new Error("ChildItemService | getPreviousItem: Index must be a valid number within the range of previous items.");let t=e-2;return t=t<0?this.#e.length-1:t,this.#e[t]}getNextItem(e){if("number"!=typeof e||e<1||e>this.#e.length)throw new Error("ChildItemService | getNextItem: Index must be a valid number within the range of previous items.");let t=e;return t=t>=this.#e.length?0:t,this.#e[t]}#i(){return [...this.#e]}}class m extends LitElement{static#l=`${n.cssText} ${o.cssText}`;#r=new r;#n=null;#o=createRef();get#c(){return this.#o.value}#m=createRef();get#h(){return this.#m.value}#d=createRef();get#g(){return this.#d.value}#f={TABLE:["body-default"],TH:["heading-2xs"]};collectionUpdated=({addedItems:e})=>{if(e?.length){const t=e[0].tagName;if(!t)return;const s=this.#f[t];s&&e.forEach(e=>e.classList.add(...s));}};#y=["TH","TD","TR","THEAD","TBODY","TABLE"].reduce((e,t)=>(e[t]=new c({callback:this.collectionUpdated}),e),{});#p(e){const t=e?.toUpperCase();return this.#f[t]?.reduce((e,t)=>(e[t]=true,e),{})||{}}constructor(){super(),this.nowrap=false;}static get properties(){return {columnHeaders:{type:Array,reflect:true},componentData:{type:Array,reflect:true},nowrap:{type:Boolean,reflect:true}}}static get styles(){return [n,o]}static register(e="auro-table"){r.prototype.registerComponent(e,m);}updated(e){e.has("columnHeaders")&&this.#b(),e.has("componentData")&&this.#w();}firstUpdated(){this.#r.handleComponentTagRename(this,"auro-table");}disconnectedCallback(){super.disconnectedCallback(),this.#n&&this.#n.disconnect();}#b(){if(this.columnHeaders){if(!this.#h)return void console.warn("auro-table: #tableHeader is null or undefined in #extractHeaders(). This may indicate a rendering or initialization issue.");this.#h.innerHTML="";const e=document.createElement("tr");this.#h.appendChild(e),this.columnHeaders.forEach(t=>{const s=document.createElement("th");s.classList.add(...this.#f.TH),s.innerHTML=t,e.appendChild(s);});}}#w(){if(this.#g){if(this.#g.innerHTML="",this.componentData&&this.columnHeaders){const e=document.createDocumentFragment();this.componentData.forEach(t=>{const s=document.createElement("tr");this.columnHeaders.forEach(e=>{const a=document.createElement("td"),i=t[e]||"";a.innerHTML=i,s.appendChild(a);}),e.appendChild(s);}),this.#g.appendChild(e);}}else console.error("auro-table: #tableBody is missing. Unable to extract rows.");}#u(e){this.#n&&this.#n.disconnect(),this.#n=new MutationObserver(e=>{for(const t of e)t.addedNodes.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&this.#y[e.tagName]?.add(e);}),t.removedNodes.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&this.#y[e.tagName]?.remove(e);});}),this.#n.observe(e,{childList:true,subtree:true});}#v(e){[...e.querySelectorAll("th"),...e.querySelectorAll("td"),...e.querySelectorAll("tr"),...e.querySelectorAll("thead"),...e.querySelectorAll("tbody"),e].forEach(e=>this.#y[e.tagName]?.add(e));}#x(e){this.#v(e),this.#u(e);}#S(e){if(e.querySelector(".auro-table--injected-styles"))return;const t=document.createElement("style");t.classList.add("auro-table--injected-styles"),t.textContent=m.#l,e.prepend(t);}#I(){const e=this.shadowRoot.querySelector("slot").assignedNodes({flatten:true}).filter(e=>e.nodeType===Node.ELEMENT_NODE).find(e=>"TABLE"===e.nodeName);e&&(this.#x(e),this.#S(e));}render(){return this.columnHeaders?.length&&this.componentData?.length?html`
8
- <table ${ref(this.#o)} class=${classMap(this.#p("TABLE"))}>
9
- <thead ${ref(this.#m)}>
10
- </thead>
11
- <tbody ${ref(this.#d)}>
12
- </tbody>
13
- </table>
14
- `:html`
15
- <slot @slotchange=${this.#I}></slot>
16
- `}}
17
-
18
- export { m as AuroTable };
1
+
2
+ import type { AuroTable } from "src/auro-table.js";
3
+
4
+ /**
5
+ * This type can be used to create scoped tags for your components.
6
+ *
7
+ * Usage:
8
+ *
9
+ * ```ts
10
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
11
+ *
12
+ * declare module "my-library" {
13
+ * namespace JSX {
14
+ * interface IntrinsicElements
15
+ * extends ScopedElements<'test-', ''> {}
16
+ * }
17
+ * }
18
+ * ```
19
+ *
20
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
21
+ */
22
+ export type ScopedElements<
23
+ Prefix extends string = "",
24
+ Suffix extends string = ""
25
+ > = {
26
+ [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
27
+ };
28
+
29
+ type BaseProps<T extends HTMLElement> = {
30
+
31
+ /** Content added between the opening and closing tags of the element */
32
+ children?: any;
33
+ /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
34
+ class?: string;
35
+ /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
36
+ className?: string;
37
+ /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
38
+ classList?: Record<string, boolean | undefined>;
39
+ /** Specifies the text direction of the element. */
40
+ dir?: "ltr" | "rtl";
41
+ /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
42
+ exportparts?: string;
43
+ /** For <label> and <output>, lets you associate the label with some control. */
44
+ htmlFor?: string;
45
+ /** Specifies whether the element should be hidden. */
46
+ hidden?: boolean | string;
47
+ /** A unique identifier for the element. */
48
+ id?: string;
49
+ /** Keys tell React which array item each component corresponds to */
50
+ key?: string | number;
51
+ /** Specifies the language of the element. */
52
+ lang?: string;
53
+ /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
54
+ part?: string;
55
+ /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
56
+ ref?: T | ((e: T) => void);
57
+ /** Adds a reference for a custom element slot */
58
+ slot?: string;
59
+ /** Prop for setting inline styles */
60
+ style?: Record<string, string | number>;
61
+ /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
62
+ tabIndex?: number;
63
+ /** Specifies the tooltip text for the element. */
64
+ title?: string;
65
+ /** Passing 'no' excludes the element content from being translated. */
66
+ translate?: "yes" | "no";
67
+ /** The popover global attribute is used to designate an element as a popover element. */
68
+ popover?: "auto" | "hint" | "manual";
69
+ /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
70
+ popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
71
+ /** Specifies the action to be performed on a popover element being controlled by a control element. */
72
+ popovertargetaction?: "show" | "hide" | "toggle";
73
+
74
+ } ;
75
+
76
+ type BaseEvents = {
77
+
78
+
79
+ };
80
+
81
+
82
+
83
+ export type AuroTableProps = {
84
+ /** An array of strings representing the table's column headers. */
85
+ "columnHeaders"?: AuroTable['columnHeaders'];
86
+ /** An array of objects representing the table's data rows. */
87
+ "componentData"?: AuroTable['componentData'];
88
+ /** When true, prevents the table from wrapping its content. */
89
+ "nowrap"?: AuroTable['nowrap'];
90
+
91
+
92
+ }
93
+
94
+ export type CustomElements = {
95
+
96
+
97
+ /**
98
+ *
99
+ * 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.
100
+ *
101
+ * ## Attributes & Properties
102
+ *
103
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
104
+ *
105
+ * - `columnHeaders`: An array of strings representing the table's column headers.
106
+ * - `componentData`: An array of objects representing the table's data rows.
107
+ * - `nowrap`: When true, prevents the table from wrapping its content.
108
+ *
109
+ * ## Slots
110
+ *
111
+ * Areas where markup can be added to the component.
112
+ *
113
+ * - `(default)`: Default slot for projecting a native `<table>` element. Only available when `columnHeaders` and `componentData` are not set.
114
+ *
115
+ * ## Methods
116
+ *
117
+ * Methods that can be called to access component functionality.
118
+ *
119
+ * - `_initializeDefaults() => void`: undefined
120
+ * - `register(name?: string = "auro-table") => void`: This will register this element with the browser.
121
+ */
122
+ "auro-table": Partial<AuroTableProps & BaseProps<AuroTable> & BaseEvents>;
123
+ }
124
+
125
+ export type CustomCssProperties = {
126
+
127
+ }
128
+
129
+
130
+ declare module 'react' {
131
+ namespace JSX {
132
+ interface IntrinsicElements extends CustomElements {}
133
+ }
134
+
135
+ }
136
+
137
+ declare module 'preact' {
138
+ namespace JSX {
139
+ interface IntrinsicElements extends CustomElements {}
140
+ }
141
+
142
+ }
143
+
144
+ declare module '@builder.io/qwik' {
145
+ namespace JSX {
146
+ interface IntrinsicElements extends CustomElements {}
147
+ }
148
+
149
+ }
150
+
151
+ declare module '@stencil/core' {
152
+ namespace JSX {
153
+ interface IntrinsicElements extends CustomElements {}
154
+ }
155
+
156
+ }
157
+
158
+ declare module 'hono/jsx' {
159
+ namespace JSX {
160
+ interface IntrinsicElements extends CustomElements {}
161
+ }
162
+
163
+ }
164
+
165
+ declare module 'react-native' {
166
+ namespace JSX {
167
+ interface IntrinsicElements extends CustomElements {}
168
+ }
169
+
170
+ }
171
+
172
+ declare global {
173
+ namespace JSX {
174
+ interface IntrinsicElements extends CustomElements {}
175
+ }
176
+
177
+ }
178
+ declare global {
179
+ namespace svelteHTML {
180
+ interface IntrinsicElements extends CustomElements {}
181
+ }
182
+ }
183
+
184
+
185
+ export { AuroTable } from "./index.js";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroTable}from"./auro-table-Dx0M-P1P.js";import"lit";import"lit/directives/ref.js";import"lit/directives/class-map.js";
1
+ export{A as AuroTable}from"./auro-table-C52RNUva.js";import"lit";import"lit/directives/ref.js";import"lit/directives/class-map.js";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as i}from"./auro-table-Dx0M-P1P.js";import"lit";import"lit/directives/ref.js";import"lit/directives/class-map.js";i.register();
1
+ import{A as i}from"./auro-table-C52RNUva.js";import"lit";import"lit/directives/ref.js";import"lit/directives/class-map.js";i.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-table",
10
- "version": "0.0.0-pr142.1",
10
+ "version": "0.0.0-pr144.0",
11
11
  "description": "auro-table HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -24,12 +24,12 @@
24
24
  "lit": "^3.3.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.1.1",
27
+ "@aurodesignsystem/auro-cli": "^3.5.0",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
- "@aurodesignsystem/auro-library": "^5.5.3",
30
- "@aurodesignsystem/design-tokens": "^8.4.4",
29
+ "@aurodesignsystem/auro-library": "^5.5.4",
30
+ "@aurodesignsystem/design-tokens": "^8.7.0",
31
31
  "@aurodesignsystem/eslint-config": "1.3.5",
32
- "@aurodesignsystem/webcorestylesheets": "10.1.3",
32
+ "@aurodesignsystem/webcorestylesheets": "^10.1.4",
33
33
  "husky": "^9.1.7"
34
34
  },
35
35
  "browserslist": [
@@ -64,7 +64,11 @@
64
64
  "./package.json": "./package.json",
65
65
  "./custom-elements.json": "./custom-elements.json",
66
66
  "./readme.md": "./README.md",
67
- ".": "./dist/registered.js",
67
+ ".": {
68
+ "module": "./dist/registered.js",
69
+ "types": "./dist/index.d.ts",
70
+ "default": "./dist/registered.js"
71
+ },
68
72
  "./demo/*.md": "./demo/*.md",
69
73
  "./demo/*.js": "./demo/*.min.js",
70
74
  "./class": {