@zywave/zui-table 4.0.0-pre.2 → 4.0.1-pre.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/demo/index.html +99 -17
  3. package/dist/custom-elements.json +109 -51
  4. package/dist/zui-table-cell.d.ts +0 -4
  5. package/dist/zui-table-cell.js +1 -14
  6. package/dist/zui-table-cell.js.map +1 -1
  7. package/dist/zui-table-footer.d.ts +1 -1
  8. package/dist/zui-table-footer.js +1 -1
  9. package/dist/zui-table-footer.js.map +1 -1
  10. package/dist/zui-table-row-css.js +1 -1
  11. package/dist/zui-table-row-css.js.map +1 -1
  12. package/dist/zui-table-row.d.ts +8 -2
  13. package/dist/zui-table-row.js +42 -5
  14. package/dist/zui-table-row.js.map +1 -1
  15. package/dist/zui-table.d.ts +5 -7
  16. package/dist/zui-table.js +9 -15
  17. package/dist/zui-table.js.map +1 -1
  18. package/lab.html +98 -17
  19. package/package.json +3 -13
  20. package/src/zui-table-cell.ts +1 -13
  21. package/src/zui-table-footer.ts +1 -1
  22. package/src/zui-table-row-css.js +1 -1
  23. package/src/zui-table-row.scss +1 -1
  24. package/src/zui-table-row.ts +39 -5
  25. package/src/zui-table.ts +10 -15
  26. package/test/zui-table.test.ts +14 -30
package/CHANGELOG.md ADDED
@@ -0,0 +1,8 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ # [4.0.0](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-table@4.0.0-pre.3...@zywave/zui-table@4.0.0) (2021-12-10)
7
+
8
+ **Note:** Version bump only for package @zywave/zui-table
package/demo/index.html CHANGED
@@ -14,8 +14,8 @@
14
14
  import("../../../../scripts/demo/demo.js");
15
15
  </script>
16
16
 
17
- <section component="zui-table" heading="Table with 5 columns">
18
- <zui-table columns="5">
17
+ <section component="zui-table" heading="Basic table">
18
+ <zui-table>
19
19
  <zui-table-row>
20
20
  <zui-table-cell>Paulus Atreides</zui-table-cell>
21
21
  <zui-table-cell>Old Duke</zui-table-cell>
@@ -55,7 +55,7 @@
55
55
  </section>
56
56
 
57
57
  <section component="zui-table" heading="Table with 1-2 actions">
58
- <zui-table columns="6">
58
+ <zui-table>
59
59
  <zui-table-row>
60
60
  <zui-table-cell>Paulus Atreides</zui-table-cell>
61
61
  <zui-table-cell>Old Duke</zui-table-cell>
@@ -110,7 +110,7 @@
110
110
  </section>
111
111
 
112
112
  <section component="zui-table" heading="Table with 3+ actions">
113
- <zui-table columns="6">
113
+ <zui-table>
114
114
  <zui-table-row>
115
115
  <zui-table-cell>Paulus Atreides</zui-table-cell>
116
116
  <zui-table-cell>Old Duke</zui-table-cell>
@@ -195,7 +195,7 @@
195
195
  </section>
196
196
 
197
197
  <section component="zui-table" heading="Table with row headers">
198
- <zui-table columns="6">
198
+ <zui-table>
199
199
  <zui-table-row header>
200
200
  <zui-table-cell>Name</zui-table-cell>
201
201
  <zui-table-cell>Title</zui-table-cell>
@@ -258,7 +258,7 @@
258
258
  </section>
259
259
 
260
260
  <section component="zui-table" heading="Table with summary row">
261
- <zui-table columns="6">
261
+ <zui-table>
262
262
  <zui-table-row header>
263
263
  <zui-table-cell>Name</zui-table-cell>
264
264
  <zui-table-cell>Title</zui-table-cell>
@@ -318,7 +318,7 @@
318
318
  </zui-table-cell>
319
319
  </zui-table-row>
320
320
  <zui-table-row summary>
321
- <zui-table-cell span="6" style="text-align: right;">
321
+ <zui-table-cell style="text-align: right;">
322
322
  Average lifespan: 742 years
323
323
  </zui-table-cell>
324
324
  </zui-table-row>
@@ -326,7 +326,7 @@
326
326
  </section>
327
327
 
328
328
  <section component="zui-table" heading="Table topbar with search and counter">
329
- <zui-table columns="6">
329
+ <zui-table>
330
330
  <zui-table-topbar>
331
331
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
332
332
  <div slot="counter">5 family members</div>
@@ -390,7 +390,7 @@
390
390
  </zui-table-cell>
391
391
  </zui-table-row>
392
392
  <zui-table-row summary>
393
- <zui-table-cell span="6" style="text-align: right;">
393
+ <zui-table-cell style="text-align: right;">
394
394
  Average lifespan: 742 years
395
395
  </zui-table-cell>
396
396
  </zui-table-row>
@@ -398,7 +398,7 @@
398
398
  </section>
399
399
 
400
400
  <section component="zui-table" heading="Table topbar with search, counter, and actions">
401
- <zui-table columns="6">
401
+ <zui-table>
402
402
  <zui-table-topbar>
403
403
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
404
404
  <div slot="counter">5 family members</div>
@@ -464,7 +464,7 @@
464
464
  </zui-table-cell>
465
465
  </zui-table-row>
466
466
  <zui-table-row summary>
467
- <zui-table-cell span="6" style="text-align: right;">
467
+ <zui-table-cell style="text-align: right;">
468
468
  Average lifespan: 742 years
469
469
  </zui-table-cell>
470
470
  </zui-table-row>
@@ -472,7 +472,7 @@
472
472
  </section>
473
473
 
474
474
  <section component="zui-table" heading="Table with footer">
475
- <zui-table columns="6">
475
+ <zui-table>
476
476
  <zui-table-topbar>
477
477
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
478
478
  <div slot="counter">5 family members</div>
@@ -538,7 +538,7 @@
538
538
  </zui-table-cell>
539
539
  </zui-table-row>
540
540
  <zui-table-row summary>
541
- <zui-table-cell span="6" style="text-align: right;">
541
+ <zui-table-cell style="text-align: right;">
542
542
  Average lifespan: 742 years
543
543
  </zui-table-cell>
544
544
  </zui-table-row>
@@ -549,7 +549,7 @@
549
549
  </section>
550
550
 
551
551
  <section component="zui-table" heading="No results table with simple custom message">
552
- <zui-table columns="6" no-results>
552
+ <zui-table no-results>
553
553
  <zui-table-topbar>
554
554
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
555
555
  <div slot="counter">0 family members</div>
@@ -572,7 +572,7 @@
572
572
  </section>
573
573
 
574
574
  <section component="zui-table" heading="No results table with elaborate custom message">
575
- <zui-table columns="6" no-results>
575
+ <zui-table no-results>
576
576
  <zui-table-topbar>
577
577
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
578
578
  <div slot="counter">0 family members</div>
@@ -599,7 +599,7 @@
599
599
  </section>
600
600
 
601
601
  <section component="zui-table" heading="Table with banded rows">
602
- <zui-table columns="6" banded>
602
+ <zui-table banded>
603
603
  <zui-table-topbar>
604
604
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
605
605
  <div slot="counter">5 family members</div>
@@ -665,7 +665,89 @@
665
665
  </zui-table-cell>
666
666
  </zui-table-row>
667
667
  <zui-table-row summary>
668
- <zui-table-cell span="6" style="text-align: right;">
668
+ <zui-table-cell style="text-align: right;">
669
+ Average lifespan: 742 years
670
+ </zui-table-cell>
671
+ </zui-table-row>
672
+ <zui-table-footer>
673
+ <zui-pager current-page="1" total-pages="10"></zui-pager>
674
+ </zui-table-footer>
675
+ </zui-table>
676
+ </section>
677
+
678
+ <section component="zui-table" heading="Table with custom column widths">
679
+ <style>
680
+ .custom-column-widths-example zui-table-row:not([summary]) {
681
+ --zui-table-columns-template: 1fr 1fr 14ch 14ch 17ch 7.1875rem;
682
+ }
683
+ </style>
684
+ <zui-table class="custom-column-widths-example" banded>
685
+ <zui-table-topbar>
686
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
687
+ <div slot="counter">5 family members</div>
688
+ <zui-button slot="action" class="secondary">Whisper</zui-button>
689
+ <zui-button slot="action">Add a family member</zui-button>
690
+ </zui-table-topbar>
691
+ <zui-table-row header>
692
+ <zui-table-cell>Name</zui-table-cell>
693
+ <zui-table-cell>Title</zui-table-cell>
694
+ <zui-table-cell>Born</zui-table-cell>
695
+ <zui-table-cell>Died</zui-table-cell>
696
+ <zui-table-cell>Age</zui-table-cell>
697
+ <zui-table-cell>Action</zui-table-cell>
698
+ </zui-table-row>
699
+ <zui-table-row>
700
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
701
+ <zui-table-cell>Old Duke</zui-table-cell>
702
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
703
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
704
+ <zui-table-cell>67 years old</zui-table-cell>
705
+ <zui-table-cell action>
706
+ <zui-button class="secondary">Betray</zui-button>
707
+ </zui-table-cell>
708
+ </zui-table-row>
709
+ <zui-table-row>
710
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
711
+ <zui-table-cell>Red Duke</zui-table-cell>
712
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
713
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
714
+ <zui-table-cell>51 years old</zui-table-cell>
715
+ <zui-table-cell action>
716
+ <zui-button class="secondary">Betray</zui-button>
717
+ </zui-table-cell>
718
+ </zui-table-row>
719
+ <zui-table-row>
720
+ <zui-table-cell>Paul Atreides</zui-table-cell>
721
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
722
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
723
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
724
+ <zui-table-cell>43 years old</zui-table-cell>
725
+ <zui-table-cell action>
726
+ <zui-button class="secondary">Betray</zui-button>
727
+ </zui-table-cell>
728
+ </zui-table-row>
729
+ <zui-table-row>
730
+ <zui-table-cell>Alia Atreides</zui-table-cell>
731
+ <zui-table-cell>Imperial Regent</zui-table-cell>
732
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
733
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
734
+ <zui-table-cell>28 years old</zui-table-cell>
735
+ <zui-table-cell action>
736
+ <zui-button class="secondary">Betray</zui-button>
737
+ </zui-table-cell>
738
+ </zui-table-row>
739
+ <zui-table-row>
740
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
741
+ <zui-table-cell>God Emperor</zui-table-cell>
742
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
743
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
744
+ <zui-table-cell>3,521 years old</zui-table-cell>
745
+ <zui-table-cell action>
746
+ <zui-button class="secondary">Betray</zui-button>
747
+ </zui-table-cell>
748
+ </zui-table-row>
749
+ <zui-table-row summary>
750
+ <zui-table-cell style="text-align: right;">
669
751
  Average lifespan: 742 years
670
752
  </zui-table-cell>
671
753
  </zui-table-row>
package/dist/custom-elements.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "name": "ZuiTableCellElement",
13
13
  "cssProperties": [
14
14
  {
15
- "description": "- Override cell padding",
15
+ "description": "Override cell padding",
16
16
  "name": "--zui-table-cell-padding",
17
17
  "default": "13px 20px"
18
18
  }
@@ -20,37 +20,36 @@
20
20
  "slots": [
21
21
  {
22
22
  "description": "Default slot; table cell content goes here",
23
- "name": "-"
23
+ "name": ""
24
24
  }
25
25
  ],
26
26
  "members": [
27
- {
28
- "kind": "field",
29
- "name": "span",
30
- "description": "Set number of columns the table cell should span",
31
- "default": "1"
32
- },
33
27
  {
34
28
  "kind": "field",
35
29
  "name": "action",
36
- "description": "Set to decrease table cell padding to accommodate action button(s)"
30
+ "type": {
31
+ "text": "boolean"
32
+ },
33
+ "default": "false",
34
+ "description": "Set to decrease table cell padding to accommodate action button(s)",
35
+ "attribute": "action",
36
+ "reflects": true
37
37
  }
38
38
  ],
39
39
  "attributes": [
40
- {
41
- "name": "span",
42
- "description": "Set number of columns the table cell should span",
43
- "default": "1",
44
- "fieldName": "span"
45
- },
46
40
  {
47
41
  "name": "action",
42
+ "type": {
43
+ "text": "boolean"
44
+ },
45
+ "default": "false",
48
46
  "description": "Set to decrease table cell padding to accommodate action button(s)",
49
47
  "fieldName": "action"
50
48
  }
51
49
  ],
52
50
  "superclass": {
53
- "name": "ZuiBaseElement"
51
+ "name": "ZuiBaseElement",
52
+ "package": "@zywave/zui-base"
54
53
  },
55
54
  "tagName": "zui-table-cell",
56
55
  "customElement": true
@@ -85,7 +84,7 @@
85
84
  "name": "ZuiTableFooterElement",
86
85
  "cssProperties": [
87
86
  {
88
- "description": "- Margin between the table and footer of the table",
87
+ "description": "Override the margin between the table and footer of the table",
89
88
  "name": "--zui-table-footer-margin",
90
89
  "default": "10px"
91
90
  }
@@ -93,12 +92,13 @@
93
92
  "slots": [
94
93
  {
95
94
  "description": "Default slot; table footer content goes here",
96
- "name": "-"
95
+ "name": ""
97
96
  }
98
97
  ],
99
98
  "members": [],
100
99
  "superclass": {
101
- "name": "ZuiBaseElement"
100
+ "name": "ZuiBaseElement",
101
+ "package": "@zywave/zui-base"
102
102
  },
103
103
  "tagName": "zui-table-footer",
104
104
  "customElement": true
@@ -133,12 +133,17 @@
133
133
  "name": "ZuiTableRowElement",
134
134
  "cssProperties": [
135
135
  {
136
- "description": "- Set the table summary background color",
136
+ "description": "Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.",
137
+ "name": "--zui-table-columns-template",
138
+ "default": "repeat(auto-fit, minmax(0, 1fr))"
139
+ },
140
+ {
141
+ "description": "Override the table summary background color",
137
142
  "name": "--zui-table-summary-background-color",
138
143
  "default": "var(--zui-gray-600)"
139
144
  },
140
145
  {
141
- "description": "- Set the the table summary text color",
146
+ "description": "Override the table summary text color",
142
147
  "name": "--zui-table-summary-text-color",
143
148
  "default": "#fff"
144
149
  }
@@ -146,35 +151,73 @@
146
151
  "slots": [
147
152
  {
148
153
  "description": "Default slot; `<zui-table-cell>`s are declared here",
149
- "name": "-"
154
+ "name": ""
150
155
  }
151
156
  ],
152
157
  "members": [
153
158
  {
154
159
  "kind": "field",
155
160
  "name": "header",
156
- "description": "Declare a table header; typically the first row in `<zui-table>`"
161
+ "type": {
162
+ "text": "boolean"
163
+ },
164
+ "default": "false",
165
+ "description": "Declare a table header; typically the first row in `<zui-table>`",
166
+ "attribute": "header",
167
+ "reflects": true
157
168
  },
158
169
  {
159
170
  "kind": "field",
160
171
  "name": "summary",
161
- "description": "Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`"
172
+ "type": {
173
+ "text": "boolean"
174
+ },
175
+ "default": "false",
176
+ "description": "Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`",
177
+ "attribute": "summary",
178
+ "reflects": true
179
+ },
180
+ {
181
+ "kind": "field",
182
+ "name": "_slotEl",
183
+ "type": {
184
+ "text": "HTMLSlotElement | undefined"
185
+ },
186
+ "privacy": "private"
187
+ },
188
+ {
189
+ "kind": "field",
190
+ "name": "_slottedCells",
191
+ "privacy": "private"
192
+ },
193
+ {
194
+ "kind": "method",
195
+ "name": "#setCellsRole"
162
196
  }
163
197
  ],
164
198
  "attributes": [
165
199
  {
166
200
  "name": "header",
201
+ "type": {
202
+ "text": "boolean"
203
+ },
204
+ "default": "false",
167
205
  "description": "Declare a table header; typically the first row in `<zui-table>`",
168
206
  "fieldName": "header"
169
207
  },
170
208
  {
171
209
  "name": "summary",
210
+ "type": {
211
+ "text": "boolean"
212
+ },
213
+ "default": "false",
172
214
  "description": "Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`",
173
215
  "fieldName": "summary"
174
216
  }
175
217
  ],
176
218
  "superclass": {
177
- "name": "ZuiBaseElement"
219
+ "name": "ZuiBaseElement",
220
+ "package": "@zywave/zui-base"
178
221
  },
179
222
  "tagName": "zui-table-row",
180
223
  "customElement": true
@@ -210,20 +253,21 @@
210
253
  "slots": [
211
254
  {
212
255
  "description": "Default slot; table cell content goes here",
213
- "name": "-"
256
+ "name": ""
214
257
  },
215
258
  {
216
- "description": "- Total number of results from table goes here",
259
+ "description": "Total number of results from table goes here",
217
260
  "name": "counter"
218
261
  },
219
262
  {
220
- "description": "- Action(s) that affect the whole table goes here",
263
+ "description": "Action(s) that affect the whole table goes here",
221
264
  "name": "action"
222
265
  }
223
266
  ],
224
267
  "members": [],
225
268
  "superclass": {
226
- "name": "ZuiBaseElement"
269
+ "name": "ZuiBaseElement",
270
+ "package": "@zywave/zui-base"
227
271
  },
228
272
  "tagName": "zui-table-topbar",
229
273
  "customElement": true
@@ -258,22 +302,27 @@
258
302
  "name": "ZuiTableElement",
259
303
  "cssProperties": [
260
304
  {
261
- "description": "- Override cell padding",
305
+ "description": "Override cell padding",
262
306
  "name": "--zui-table-cell-padding",
263
307
  "default": "13px 20px"
264
308
  },
265
309
  {
266
- "description": "- Set the table summary background color",
310
+ "description": "Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.",
311
+ "name": "--zui-table-columns-template",
312
+ "default": "repeat(auto-fit, minmax(0, 1fr))"
313
+ },
314
+ {
315
+ "description": "Override the table summary background color",
267
316
  "name": "--zui-table-summary-background-color",
268
317
  "default": "var(--zui-gray-600)"
269
318
  },
270
319
  {
271
- "description": "- Set the the table summary text color",
320
+ "description": "Override the the table summary text color",
272
321
  "name": "--zui-table-summary-text-color",
273
322
  "default": "#fff"
274
323
  },
275
324
  {
276
- "description": "- Margin between the table and footer of the table",
325
+ "description": "Override the margin between the table and footer of the table",
277
326
  "name": "--zui-table-footer-margin",
278
327
  "default": "10px"
279
328
  }
@@ -281,33 +330,39 @@
281
330
  "slots": [
282
331
  {
283
332
  "description": "Default slot; all table content will appear here, such as table rows",
284
- "name": "-"
333
+ "name": ""
285
334
  },
286
335
  {
287
- "description": "- Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`",
336
+ "description": "Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`",
288
337
  "name": "no-results-message"
289
338
  },
290
339
  {
291
- "description": "- Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.",
340
+ "description": "Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.",
292
341
  "name": "footer"
293
342
  }
294
343
  ],
295
344
  "members": [
296
- {
297
- "kind": "field",
298
- "name": "columns",
299
- "description": "Set the amount of columns to display in the table",
300
- "default": "1"
301
- },
302
345
  {
303
346
  "kind": "field",
304
347
  "name": "banded",
305
- "description": "Set for alternating table row background colors"
348
+ "type": {
349
+ "text": "boolean"
350
+ },
351
+ "default": "false",
352
+ "description": "Set for alternating table row background colors",
353
+ "attribute": "banded",
354
+ "reflects": true
306
355
  },
307
356
  {
308
357
  "kind": "field",
309
358
  "name": "noResults",
310
- "description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot \"no-results-message\" to include a no results message"
359
+ "type": {
360
+ "text": "boolean"
361
+ },
362
+ "default": "false",
363
+ "description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot \"no-results-message\" to include a no results message",
364
+ "attribute": "no-results",
365
+ "reflects": true
311
366
  },
312
367
  {
313
368
  "kind": "field",
@@ -332,25 +387,28 @@
332
387
  }
333
388
  ],
334
389
  "attributes": [
335
- {
336
- "name": "columns",
337
- "description": "Set the amount of columns to display in the table",
338
- "default": "1",
339
- "fieldName": "columns"
340
- },
341
390
  {
342
391
  "name": "banded",
392
+ "type": {
393
+ "text": "boolean"
394
+ },
395
+ "default": "false",
343
396
  "description": "Set for alternating table row background colors",
344
397
  "fieldName": "banded"
345
398
  },
346
399
  {
347
400
  "name": "no-results",
401
+ "type": {
402
+ "text": "boolean"
403
+ },
404
+ "default": "false",
348
405
  "description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot \"no-results-message\" to include a no results message",
349
406
  "fieldName": "noResults"
350
407
  }
351
408
  ],
352
409
  "superclass": {
353
- "name": "ZuiBaseElement"
410
+ "name": "ZuiBaseElement",
411
+ "package": "@zywave/zui-base"
354
412
  },
355
413
  "tagName": "zui-table",
356
414
  "customElement": true
package/dist/zui-table-cell.d.ts CHANGED
@@ -7,10 +7,6 @@ import { ZuiBaseElement } from '@zywave/zui-base';
7
7
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
8
8
  */
9
9
  export declare class ZuiTableCellElement extends ZuiBaseElement {
10
- /**
11
- * Set number of columns the table cell should span
12
- */
13
- span: number;
14
10
  /**
15
11
  * Set to decrease table cell padding to accommodate action button(s)
16
12
  */
package/dist/zui-table-cell.js CHANGED
@@ -18,10 +18,6 @@ import { style } from './zui-table-cell-css.js';
18
18
  export class ZuiTableCellElement extends ZuiBaseElement {
19
19
  constructor() {
20
20
  super(...arguments);
21
- /**
22
- * Set number of columns the table cell should span
23
- */
24
- this.span = 1;
25
21
  /**
26
22
  * Set to decrease table cell padding to accommodate action button(s)
27
23
  */
@@ -30,19 +26,10 @@ export class ZuiTableCellElement extends ZuiBaseElement {
30
26
  static get styles() {
31
27
  return [super.styles, style];
32
28
  }
33
- // TODO: change role="cell" to role="columnheader" if parent is <zui-table-row header>
34
29
  render() {
35
- const spanStyle = html `<style>
36
- :host {
37
- grid-column: span ${this.span} !important;
38
- }
39
- </style>`;
40
- return html `${this.span >= 1 ? spanStyle : ''}<div role="cell"><slot></slot></div>`;
30
+ return html `<div><slot></slot></div>`;
41
31
  }
42
32
  }
43
- __decorate([
44
- property({ type: Number })
45
- ], ZuiTableCellElement.prototype, "span", void 0);
46
33
  __decorate([
47
34
  property({ type: Boolean, reflect: true })
48
35
  ], ZuiTableCellElement.prototype, "action", void 0);
package/dist/zui-table-cell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,OAAO,mBAAoB,SAAQ,cAAc;IAAvD;;QACE;;WAEG;QAEH,SAAI,GAAG,CAAC,CAAC;QAET;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;IAejB,CAAC;IAbC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,sFAAsF;IACtF,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAA;;4BAEE,IAAI,CAAC,IAAI;;aAExB,CAAC;QACV,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,sCAAsC,CAAC;IACtF,CAAC;CACF;AArBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAClB;AAMT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAiBjB,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * @element zui-table-cell\n *\n * @slot - Default slot; table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n */\nexport class ZuiTableCellElement extends ZuiBaseElement {\n /**\n * Set number of columns the table cell should span\n */\n @property({ type: Number })\n span = 1;\n\n /**\n * Set to decrease table cell padding to accommodate action button(s)\n */\n @property({ type: Boolean, reflect: true })\n action = false;\n\n static get styles() {\n return [super.styles, style];\n }\n\n // TODO: change role=\"cell\" to role=\"columnheader\" if parent is <zui-table-row header>\n render() {\n const spanStyle = html`<style>\n :host {\n grid-column: span ${this.span} !important;\n }\n </style>`;\n return html`${this.span >= 1 ? spanStyle : ''}<div role=\"cell\"><slot></slot></div>`;\n }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-cell': ZuiTableCellElement;\n }\n}\n"]}
1
+ {"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,OAAO,mBAAoB,SAAQ,cAAc;IAAvD;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;IASjB,CAAC;IAPC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC;IACxC,CAAC;CACF;AATC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAWjB,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * @element zui-table-cell\n *\n * @slot - Default slot; table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n */\nexport class ZuiTableCellElement extends ZuiBaseElement {\n /**\n * Set to decrease table cell padding to accommodate action button(s)\n */\n @property({ type: Boolean, reflect: true })\n action = false;\n\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`<div><slot></slot></div>`;\n }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-cell': ZuiTableCellElement;\n }\n}\n"]}
package/dist/zui-table-footer.d.ts CHANGED
@@ -4,7 +4,7 @@ import { ZuiBaseElement } from '@zywave/zui-base';
4
4
  *
5
5
  * @slot - Default slot; table footer content goes here
6
6
  *
7
- * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
7
+ * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
8
8
  */
9
9
  export declare class ZuiTableFooterElement extends ZuiBaseElement {
10
10
  static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
package/dist/zui-table-footer.js CHANGED
@@ -6,7 +6,7 @@ import { style } from './zui-table-footer-css.js';
6
6
  *
7
7
  * @slot - Default slot; table footer content goes here
8
8
  *
9
- * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
9
+ * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
10
10
  */
11
11
  export class ZuiTableFooterElement extends ZuiBaseElement {
12
12
  static get styles() {
package/dist/zui-table-footer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,cAAc;IACvD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { style } from './zui-table-footer-css.js';\n\n/**\n * @element zui-table-footer\n *\n * @slot - Default slot; table footer content goes here\n *\n * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiBaseElement {\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`<div class=\"footer\">\n <slot></slot>\n </div>`;\n }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-footer': ZuiTableFooterElement;\n }\n}\n"]}
1
+ {"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,cAAc;IACvD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { style } from './zui-table-footer-css.js';\n\n/**\n * @element zui-table-footer\n *\n * @slot - Default slot; table footer content goes here\n *\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiBaseElement {\n static get styles() {\n return [super.styles, style];\n }\n\n render() {\n return html`<div class=\"footer\">\n <slot></slot>\n </div>`;\n }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-footer': ZuiTableFooterElement;\n }\n}\n"]}
package/dist/zui-table-row-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
- export const style = css `:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:repeat(var(--zui-table-columns), minmax(0, 1fr))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
2
+ export const style = css `:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
3
3
  //# sourceMappingURL=zui-table-row-css.js.map
package/dist/zui-table-row-css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6fAA6f,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:repeat(var(--zui-table-columns), minmax(0, 1fr))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}
1
+ {"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,ghBAAghB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}