@zywave/zui-table 4.0.17-pre.0 → 4.1.0-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 (18) hide show
  1. package/dist/css/zui-table.fouc.css +1 -1
  2. package/dist/custom-elements.json +25 -0
  3. package/dist/zui-table-css.js +1 -1
  4. package/dist/zui-table-css.js.map +1 -1
  5. package/dist/zui-table-topbar-css.js +1 -1
  6. package/dist/zui-table-topbar-css.js.map +1 -1
  7. package/dist/zui-table.d.ts +6 -0
  8. package/dist/zui-table.js +10 -1
  9. package/dist/zui-table.js.map +1 -1
  10. package/docs/demo.html +40 -0
  11. package/lab.html +88 -4
  12. package/package.json +5 -4
  13. package/src/css/zui-table.fouc.scss +14 -0
  14. package/src/zui-table-css.js +1 -1
  15. package/src/zui-table-topbar-css.js +1 -1
  16. package/src/zui-table-topbar.scss +4 -2
  17. package/src/zui-table.scss +23 -0
  18. package/src/zui-table.ts +9 -1
package/dist/css/zui-table.fouc.css CHANGED
@@ -1 +1 @@
1
- zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){zui-table:not(:defined){box-shadow:0 1px 3px rgba(0,0,0,.29)}}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table[no-results]:not(:defined) [slot=no-results-message]{box-shadow:none}}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;align-items:center}@media(min-width: 45em){zui-table-topbar:not(:defined){flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}}zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:0}}zui-table-topbar:not(:defined) zui-search{--zui-search-border-color: var(--zui-gray-50);flex:1;flex-basis:100%;order:1}@media(min-width: 30em){zui-table-topbar:not(:defined) zui-search{flex-basis:auto;order:0}}@media(min-width: 45em){zui-table-topbar:not(:defined) zui-search{flex:0;margin-right:auto}}zui-table-topbar:not(:defined) [slot=counter]{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=counter]{width:auto;order:0;margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]{width:100%;margin-bottom:1.25rem}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]{width:auto;margin-left:.625rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]{margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:1.25rem;margin-left:1.25rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0;margin-left:.625rem}}zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:0}}@media(max-width: 30em){zui-table-topbar:not(:defined) [slot=action]+[slot=action]{margin-top:.625rem}}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:auto;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table-row:not(:defined){display:flex;padding:0;box-shadow:none}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:flex}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
1
+ zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){zui-table:not(:defined){box-shadow:0 1px 3px rgba(0,0,0,.29)}}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table[no-results]:not(:defined) [slot=no-results-message]{box-shadow:none}}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table[loading]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[loading]:not(:defined) zui-table-row:not([header]){visibility:hidden}zui-table[loading]:not(:defined) zui-spinner{position:absolute;top:50%;left:50%}zui-table[loading]:not(:defined) *,zui-table[loading]:not(:defined) *::before,zui-table[loading]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;align-items:center}@media(min-width: 45em){zui-table-topbar:not(:defined){flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}}zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:0}}zui-table-topbar:not(:defined) zui-search{--zui-search-border-color: var(--zui-gray-50);flex:1;flex-basis:100%;order:1}@media(min-width: 30em){zui-table-topbar:not(:defined) zui-search{flex-basis:auto;order:0}}@media(min-width: 45em){zui-table-topbar:not(:defined) zui-search{flex:0;margin-right:auto}}zui-table-topbar:not(:defined) [slot=counter]{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=counter]{width:auto;order:0;margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]{width:100%;margin-bottom:1.25rem}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]{width:auto;margin-left:.625rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]{margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:1.25rem;margin-left:1.25rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0;margin-left:.625rem}}zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:0}}@media(max-width: 30em){zui-table-topbar:not(:defined) [slot=action]+[slot=action]{margin-top:.625rem}}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:auto;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table-row:not(:defined){display:flex;padding:0;box-shadow:none}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:flex}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
package/dist/custom-elements.json CHANGED
@@ -474,6 +474,11 @@
474
474
  "description": "Override the margin between the table and footer of the table",
475
475
  "name": "--zui-table-footer-margin",
476
476
  "default": "10px"
477
+ },
478
+ {
479
+ "description": "Override the minimum height of the table body when in a loading state",
480
+ "name": "--zui-table-loading-min-height",
481
+ "default": "20rem"
477
482
  }
478
483
  ],
479
484
  "slots": [
@@ -513,6 +518,17 @@
513
518
  "attribute": "no-results",
514
519
  "reflects": true
515
520
  },
521
+ {
522
+ "kind": "field",
523
+ "name": "loading",
524
+ "type": {
525
+ "text": "boolean"
526
+ },
527
+ "default": "false",
528
+ "description": "Set to show a loading spinner in the table",
529
+ "attribute": "loading",
530
+ "reflects": true
531
+ },
516
532
  {
517
533
  "kind": "field",
518
534
  "name": "_rows",
@@ -600,6 +616,15 @@
600
616
  "default": "false",
601
617
  "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",
602
618
  "fieldName": "noResults"
619
+ },
620
+ {
621
+ "name": "loading",
622
+ "type": {
623
+ "text": "boolean"
624
+ },
625
+ "default": "false",
626
+ "description": "Set to show a loading spinner in the table",
627
+ "fieldName": "loading"
603
628
  }
604
629
  ],
605
630
  "superclass": {
package/dist/zui-table-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
- export const style = css `:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;
2
+ export const style = css `:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) zui-spinner{position:absolute;top:50%;left:50%}:host([loading]) .table{min-height:var(--zui-table-loading-min-height, 20rem)}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{position:relative;display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;
3
3
  //# sourceMappingURL=zui-table-css.js.map
package/dist/zui-table-css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,i1BAAi1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;\n"]}
1
+ {"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,qoCAAqoC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) zui-spinner{position:absolute;top:50%;left:50%}:host([loading]) .table{min-height:var(--zui-table-loading-min-height, 20rem)}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{position:relative;display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;\n"]}
package/dist/zui-table-topbar-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
- export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
2
+ export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
3
3
  //# sourceMappingURL=zui-table-topbar-css.js.map
package/dist/zui-table-topbar-css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,ylDAAylD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;\n"]}
1
+ {"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,6yDAA6yD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;\n"]}
package/dist/zui-table.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ZuiTableBaseElement } from './base.js';
2
+ import '@zywave/zui-spinner';
2
3
  import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';
3
4
  /**
4
5
  * A standardized responsive table component.
@@ -14,6 +15,7 @@ import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cel
14
15
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
15
16
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
16
17
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
18
+ * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
17
19
  *
18
20
  * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
19
21
  */
@@ -27,6 +29,10 @@ export declare class ZuiTableElement extends ZuiTableBaseElement {
27
29
  * 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
28
30
  */
29
31
  noResults: boolean;
32
+ /**
33
+ * Set to show a loading spinner in the table
34
+ */
35
+ loading: boolean;
30
36
  private _rows;
31
37
  private _footer;
32
38
  static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
package/dist/zui-table.js CHANGED
@@ -9,6 +9,7 @@ import { html } from 'lit';
9
9
  import { property, queryAssignedElements } from 'lit/decorators.js';
10
10
  import { style } from './zui-table-css.js';
11
11
  import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
12
+ import '@zywave/zui-spinner';
12
13
  /**
13
14
  * A standardized responsive table component.
14
15
  *
@@ -23,6 +24,7 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
23
24
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
24
25
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
25
26
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
27
+ * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
26
28
  *
27
29
  * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
28
30
  */
@@ -45,6 +47,10 @@ export class ZuiTableElement extends ZuiTableBaseElement {
45
47
  * 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
46
48
  */
47
49
  this.noResults = false;
50
+ /**
51
+ * Set to show a loading spinner in the table
52
+ */
53
+ this.loading = false;
48
54
  this.#mobileBreakpoint = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
49
55
  this.#sortLock = false;
50
56
  this.#mobileHeadersEvent = (b) => {
@@ -93,7 +99,7 @@ export class ZuiTableElement extends ZuiTableBaseElement {
93
99
  <slot
94
100
  @slotchange="${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}"
95
101
  ></slot>
96
- ${this.noResults ? this.#renderNoResultsView() : ``}</div
102
+ ${this.loading ? html `<zui-spinner active=""></zui-spinner>` : html ``} ${this.#renderNoResultsView()}</div
97
103
  >
98
104
  <div><slot name="footer"></slot></div>`;
99
105
  }
@@ -146,6 +152,9 @@ __decorate([
146
152
  __decorate([
147
153
  property({ type: Boolean, reflect: true, attribute: 'no-results' })
148
154
  ], ZuiTableElement.prototype, "noResults", void 0);
155
+ __decorate([
156
+ property({ type: Boolean, reflect: true })
157
+ ], ZuiTableElement.prototype, "loading", void 0);
149
158
  __decorate([
150
159
  queryAssignedElements({ selector: 'zui-table-row' })
151
160
  ], ZuiTableElement.prototype, "_rows", void 0);
package/dist/zui-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableFooterElement } from './zui-table-footer.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - 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.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n /**\n * Set for alternating table row background colors\n */\n @property({ type: Boolean, reflect: true })\n banded = false;\n\n // TODO: add divided prop so all table cells will have 1px border\n\n /**\n * 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\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n noResults = false;\n\n @queryAssignedElements({ selector: 'zui-table-row' })\n private _rows: Array<ZuiTableRowElement>;\n\n @queryAssignedElements({ selector: 'zui-table-footer' })\n private _footer: Array<ZuiTableFooterElement>;\n\n #internals?: ElementInternals;\n #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n #sortLock = false;\n\n #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n constructor() {\n super();\n\n this.#internals = this.attachInternals?.();\n\n ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n if (this.contains(event.detail.element)) {\n this._associateElement(event.detail.element);\n }\n });\n\n this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n if (this.#sortLock) {\n return;\n }\n this.#sortLock = true;\n this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n setTimeout(() => (this.#sortLock = false), 0);\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n } else {\n this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n } else if (this.#mobileBreakpoint.addListener) {\n this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);\n }\n }\n\n firstUpdated() {\n this.#reassignFooter();\n\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n }\n\n render() {\n return html`<div class=\"table\">\n <slot\n @slotchange=\"${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}\"\n ></slot>\n ${this.noResults ? this.#renderNoResultsView() : ``}</div\n >\n <div><slot name=\"footer\"></slot></div>`;\n }\n\n #renderNoResultsView() {\n return html`<div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>`;\n }\n\n #reassignFooter() {\n this._footer?.map((f) => f.setAttribute('slot', 'footer'));\n }\n\n #addRowHeadersToCells() {\n const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n if (rowHeadersList.length > 0) {\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const cell = row.children[i];\n if (!cell.shadowRoot.querySelector('.header')) {\n const rowHeaderContainer = document.createElement('div');\n rowHeaderContainer.classList.add('header');\n const rowHeaderText = rowHeadersList[0].children[i].textContent;\n rowHeaderContainer.innerText = rowHeaderText;\n cell.shadowRoot.prepend(rowHeaderContainer);\n }\n }\n }\n }\n\n // add custom state --mobile to zui-table\n this.#internals?.states?.add('--mobile');\n\n this.requestUpdate();\n }\n\n #removeRowHeadersFromCells() {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const rowChildren = row.children[i].shadowRoot;\n const header = rowChildren.querySelector('.header');\n if (header) {\n rowChildren.removeChild(header);\n }\n }\n }\n\n // remove custom state --mobile from zui-table\n this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');\n\n this.requestUpdate();\n }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table': ZuiTableElement;\n }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
1
+ {"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport '@zywave/zui-spinner';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableFooterElement } from './zui-table-footer.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<zui-table no-results>`\n * @slot footer - 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.\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n /**\n * Set for alternating table row background colors\n */\n @property({ type: Boolean, reflect: true })\n banded = false;\n\n // TODO: add divided prop so all table cells will have 1px border\n\n /**\n * 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\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n noResults = false;\n\n /**\n * Set to show a loading spinner in the table\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n @queryAssignedElements({ selector: 'zui-table-row' })\n private _rows: Array<ZuiTableRowElement>;\n\n @queryAssignedElements({ selector: 'zui-table-footer' })\n private _footer: Array<ZuiTableFooterElement>;\n\n #internals?: ElementInternals;\n #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n #sortLock = false;\n\n #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n constructor() {\n super();\n\n this.#internals = this.attachInternals?.();\n\n ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n if (this.contains(event.detail.element)) {\n this._associateElement(event.detail.element);\n }\n });\n\n this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n if (this.#sortLock) {\n return;\n }\n this.#sortLock = true;\n this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n setTimeout(() => (this.#sortLock = false), 0);\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n } else {\n this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n } else if (this.#mobileBreakpoint.addListener) {\n this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);\n }\n }\n\n firstUpdated() {\n this.#reassignFooter();\n\n this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n }\n\n render() {\n return html`<div class=\"table\">\n <slot\n @slotchange=\"${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}\"\n ></slot>\n ${this.loading ? html`<zui-spinner active=\"\"></zui-spinner>` : html``} ${this.#renderNoResultsView()}</div\n >\n <div><slot name=\"footer\"></slot></div>`;\n }\n\n #renderNoResultsView() {\n return html`<div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>`;\n }\n\n #reassignFooter() {\n this._footer?.map((f) => f.setAttribute('slot', 'footer'));\n }\n\n #addRowHeadersToCells() {\n const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n if (rowHeadersList.length > 0) {\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const cell = row.children[i];\n if (!cell.shadowRoot.querySelector('.header')) {\n const rowHeaderContainer = document.createElement('div');\n rowHeaderContainer.classList.add('header');\n const rowHeaderText = rowHeadersList[0].children[i].textContent;\n rowHeaderContainer.innerText = rowHeaderText;\n cell.shadowRoot.prepend(rowHeaderContainer);\n }\n }\n }\n }\n\n // add custom state --mobile to zui-table\n this.#internals?.states?.add('--mobile');\n\n this.requestUpdate();\n }\n\n #removeRowHeadersFromCells() {\n const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n for (const row of rowBodyList) {\n for (let i = 0; i < row.children.length; i++) {\n const rowChildren = row.children[i].shadowRoot;\n const header = rowChildren.querySelector('.header');\n if (header) {\n rowChildren.removeChild(header);\n }\n }\n }\n\n // remove custom state --mobile from zui-table\n this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');\n\n this.requestUpdate();\n }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table': ZuiTableElement;\n }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
package/docs/demo.html CHANGED
@@ -950,3 +950,43 @@
950
950
  </zui-table-footer>
951
951
  </zui-table>
952
952
  </section>
953
+
954
+ <section component="zui-table" heading="Loading table">
955
+ <zui-table loading>
956
+ <zui-table-row>
957
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
958
+ <zui-table-cell>Old Duke</zui-table-cell>
959
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
960
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
961
+ <zui-table-cell>67 years old</zui-table-cell>
962
+ </zui-table-row>
963
+ <zui-table-row>
964
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
965
+ <zui-table-cell>Red Duke</zui-table-cell>
966
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
967
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
968
+ <zui-table-cell>51 years old</zui-table-cell>
969
+ </zui-table-row>
970
+ <zui-table-row>
971
+ <zui-table-cell>Paul Atreides</zui-table-cell>
972
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
973
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
974
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
975
+ <zui-table-cell>43 years old</zui-table-cell>
976
+ </zui-table-row>
977
+ <zui-table-row>
978
+ <zui-table-cell>Alia Atreides</zui-table-cell>
979
+ <zui-table-cell>Imperial Regent</zui-table-cell>
980
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
981
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
982
+ <zui-table-cell>28 years old</zui-table-cell>
983
+ </zui-table-row>
984
+ <zui-table-row>
985
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
986
+ <zui-table-cell>God Emperor</zui-table-cell>
987
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
988
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
989
+ <zui-table-cell>3,521 years old</zui-table-cell>
990
+ </zui-table-row>
991
+ </zui-table>
992
+ </section>
package/lab.html CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  <h2>Basic table</h2>
53
53
 
54
- <zui-table>
54
+ <zui-table loading="">
55
55
  <zui-table-row>
56
56
  <zui-table-cell>Paulus Atreides</zui-table-cell>
57
57
  <zui-table-cell>Old Duke</zui-table-cell>
@@ -291,7 +291,7 @@
291
291
 
292
292
  <h2>Table with row headers</h2>
293
293
 
294
- <zui-table>
294
+ <zui-table loading="">
295
295
  <zui-table-row header>
296
296
  <zui-table-cell>Name</zui-table-cell>
297
297
  <zui-table-cell>Title</zui-table-cell>
@@ -770,9 +770,93 @@
770
770
  </zui-table-row>
771
771
  </zui-table>
772
772
 
773
- <h2>Table with footer</h2>
773
+ <h2>Table topbar with search, counter, and button group</h2>
774
774
 
775
775
  <zui-table>
776
+ <zui-table-topbar>
777
+ <zui-search placeholder="Search for a family member" no-submit></zui-search>
778
+ <div slot="counter">5 family members</div>
779
+ <zui-button-group slot="action" type="secondary">
780
+ <zui-button-dropdown type="secondary">
781
+ Add...
782
+ <button slot="option" disabled>Family member</button>
783
+ <button slot="option">Planet</button>
784
+ <button slot="option">Belief</button>
785
+ <a href="#" slot="option">
786
+ <zui-icon icon="zui-rocket" class="small"></zui-icon>
787
+ Ship
788
+ </a>
789
+ </zui-button-dropdown>
790
+ <zui-button type="secondary"><a href="#">Whisper</a></zui-button>
791
+ <zui-button id="export" type="secondary">Betray all</zui-button>
792
+ </zui-button-group>
793
+ </zui-table-topbar>
794
+ <zui-table-row header>
795
+ <zui-table-cell>Name</zui-table-cell>
796
+ <zui-table-cell>Title</zui-table-cell>
797
+ <zui-table-cell>Born</zui-table-cell>
798
+ <zui-table-cell>Died</zui-table-cell>
799
+ <zui-table-cell>Age</zui-table-cell>
800
+ <zui-table-cell>Action</zui-table-cell>
801
+ </zui-table-row>
802
+ <zui-table-row>
803
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
804
+ <zui-table-cell>Old Duke</zui-table-cell>
805
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
806
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
807
+ <zui-table-cell>67 years old</zui-table-cell>
808
+ <zui-table-cell action>
809
+ <zui-button type="secondary">Betray</zui-button>
810
+ </zui-table-cell>
811
+ </zui-table-row>
812
+ <zui-table-row>
813
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
814
+ <zui-table-cell>Red Duke</zui-table-cell>
815
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
816
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
817
+ <zui-table-cell>51 years old</zui-table-cell>
818
+ <zui-table-cell action>
819
+ <zui-button type="secondary">Betray</zui-button>
820
+ </zui-table-cell>
821
+ </zui-table-row>
822
+ <zui-table-row>
823
+ <zui-table-cell>Paul Atreides</zui-table-cell>
824
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
825
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
826
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
827
+ <zui-table-cell>43 years old</zui-table-cell>
828
+ <zui-table-cell action>
829
+ <zui-button type="secondary">Betray</zui-button>
830
+ </zui-table-cell>
831
+ </zui-table-row>
832
+ <zui-table-row>
833
+ <zui-table-cell>Alia Atreides</zui-table-cell>
834
+ <zui-table-cell>Imperial Regent</zui-table-cell>
835
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
836
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
837
+ <zui-table-cell>28 years old</zui-table-cell>
838
+ <zui-table-cell action>
839
+ <zui-button type="secondary">Betray</zui-button>
840
+ </zui-table-cell>
841
+ </zui-table-row>
842
+ <zui-table-row>
843
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
844
+ <zui-table-cell>God Emperor</zui-table-cell>
845
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
846
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
847
+ <zui-table-cell>3,521 years old</zui-table-cell>
848
+ <zui-table-cell action>
849
+ <zui-button type="secondary">Betray</zui-button>
850
+ </zui-table-cell>
851
+ </zui-table-row>
852
+ <zui-table-row summary>
853
+ <zui-table-cell style="text-align: right"> Average lifespan: 742 years </zui-table-cell>
854
+ </zui-table-row>
855
+ </zui-table>
856
+
857
+ <h2>Table with footer</h2>
858
+
859
+ <zui-table loading="">
776
860
  <zui-table-topbar>
777
861
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
778
862
  <div slot="counter">5 family members</div>
@@ -847,7 +931,7 @@
847
931
 
848
932
  <h2>No results table with simple custom message</h2>
849
933
 
850
- <zui-table no-results>
934
+ <zui-table no-results="" loading="">
851
935
  <zui-table-topbar>
852
936
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
853
937
  <div slot="counter">0 family members</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zywave/zui-table",
3
- "version": "4.0.17-pre.0",
3
+ "version": "4.1.0-pre.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "license": "UNLICENSED",
@@ -23,10 +23,11 @@
23
23
  "customElements": "dist/custom-elements.json",
24
24
  "dependencies": {
25
25
  "@zywave/zui-base": "^4.2.1-pre.0",
26
- "@zywave/zui-icons": "^4.4.1-pre.0"
26
+ "@zywave/zui-icons": "^4.4.1-pre.1",
27
+ "@zywave/zui-spinner": "^4.0.34-pre.0"
27
28
  },
28
29
  "devDependencies": {
29
- "@zywave/zui-button": "^4.1.3-pre.0"
30
+ "@zywave/zui-button": "^4.1.3-pre.1"
30
31
  },
31
- "gitHead": "1dbbe0cef0ae982bf67789f213775848ec884b25"
32
+ "gitHead": "1c6e377e4187071208ad9ae665977b0558e913c9"
32
33
  }
package/src/css/zui-table.fouc.scss CHANGED
@@ -45,6 +45,20 @@ zui-table[no-results] {
45
45
  }
46
46
  }
47
47
 
48
+ zui-table[loading] {
49
+ @include undefined-element {
50
+ zui-table-row:not([header]) {
51
+ visibility: hidden;
52
+ }
53
+
54
+ zui-spinner {
55
+ position: absolute;
56
+ top: 50%;
57
+ left: 50%;
58
+ }
59
+ }
60
+ }
61
+
48
62
  zui-table-topbar {
49
63
  @include undefined-element {
50
64
  display: flex;
package/src/zui-table-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
2
 
3
- export const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;
3
+ export const style = css`:host{contain:none;display:block}:host .no-results{display:none}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:rgba(0,0,0,0);box-shadow:none}}:host([loading]) ::slotted(zui-table-row:not([header])),:host([loading]) .no-results{visibility:hidden}:host([loading]) zui-spinner{position:absolute;top:50%;left:50%}:host([loading]) .table{min-height:var(--zui-table-loading-min-height, 20rem)}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{position:relative;display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;
package/src/zui-table-topbar-css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit';
2
2
 
3
- export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
3
+ export const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;order:0;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type),.action ::slotted(zui-button-group:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)),.action ::slotted(zui-button-group:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
package/src/zui-table-topbar.scss CHANGED
@@ -98,7 +98,8 @@
98
98
  }
99
99
  }
100
100
 
101
- ::slotted(zui-button:first-of-type) {
101
+ ::slotted(zui-button:first-of-type),
102
+ ::slotted(zui-button-group:first-of-type) {
102
103
  @media (min-width: $bp-xxs) {
103
104
  margin-left: rem(20);
104
105
  }
@@ -108,7 +109,8 @@
108
109
  }
109
110
  }
110
111
 
111
- ::slotted(zui-button:not(:first-of-type)) {
112
+ ::slotted(zui-button:not(:first-of-type)),
113
+ ::slotted(zui-button-group:not(:first-of-type)) {
112
114
  margin-top: rem(10);
113
115
 
114
116
  @media (min-width: $bp-xxs) {
package/src/zui-table.scss CHANGED
@@ -4,6 +4,10 @@
4
4
  :host {
5
5
  contain: none;
6
6
  display: block;
7
+
8
+ .no-results {
9
+ display: none;
10
+ }
7
11
  }
8
12
 
9
13
  :host([banded]) {
@@ -18,6 +22,7 @@
18
22
 
19
23
  :host([no-results]) {
20
24
  .no-results {
25
+ display: block;
21
26
  padding: rem(12) rem(20);
22
27
  background-color: #fff;
23
28
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
@@ -29,6 +34,23 @@
29
34
  }
30
35
  }
31
36
 
37
+ :host([loading]) {
38
+ ::slotted(zui-table-row:not([header])),
39
+ .no-results {
40
+ visibility: hidden;
41
+ }
42
+
43
+ zui-spinner {
44
+ position: absolute;
45
+ top: 50%;
46
+ left: 50%;
47
+ }
48
+
49
+ .table {
50
+ min-height: var(--zui-table-loading-min-height, 20rem);
51
+ }
52
+ }
53
+
32
54
  ::slotted(zui-table-row:not([header])) {
33
55
  border-bottom: 2px solid var(--zui-gray-100);
34
56
 
@@ -42,6 +64,7 @@
42
64
  }
43
65
 
44
66
  .table {
67
+ position: relative;
45
68
  display: flex;
46
69
  width: 100%;
47
70
  flex-direction: column;
package/src/zui-table.ts CHANGED
@@ -3,6 +3,7 @@ import { html } from 'lit';
3
3
  import { property, queryAssignedElements } from 'lit/decorators.js';
4
4
  import { style } from './zui-table-css.js';
5
5
  import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
6
+ import '@zywave/zui-spinner';
6
7
  import type { ZuiTableRowElement } from './zui-table-row.js';
7
8
  import type { ZuiTableFooterElement } from './zui-table-footer.js';
8
9
  import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';
@@ -21,6 +22,7 @@ import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cel
21
22
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
22
23
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
23
24
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
25
+ * @cssprop [--zui-table-loading-min-height=20rem] - Override the minimum height of the table body when in a loading state
24
26
  *
25
27
  * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
26
28
  */
@@ -39,6 +41,12 @@ export class ZuiTableElement extends ZuiTableBaseElement {
39
41
  @property({ type: Boolean, reflect: true, attribute: 'no-results' })
40
42
  noResults = false;
41
43
 
44
+ /**
45
+ * Set to show a loading spinner in the table
46
+ */
47
+ @property({ type: Boolean, reflect: true })
48
+ loading = false;
49
+
42
50
  @queryAssignedElements({ selector: 'zui-table-row' })
43
51
  private _rows: Array<ZuiTableRowElement>;
44
52
 
@@ -110,7 +118,7 @@ export class ZuiTableElement extends ZuiTableBaseElement {
110
118
  <slot
111
119
  @slotchange="${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}"
112
120
  ></slot>
113
- ${this.noResults ? this.#renderNoResultsView() : ``}</div
121
+ ${this.loading ? html`<zui-spinner active=""></zui-spinner>` : html``} ${this.#renderNoResultsView()}</div
114
122
  >
115
123
  <div><slot name="footer"></slot></div>`;
116
124
  }