@nanoporetech-digital/components 3.1.1 → 3.3.0

package/dist/collection/components/table/table.css

@@ -12,14 +12,56 @@
 }
 @charset "UTF-8";
 nano-table {
-  display: table;
+  /**
+   * @prop --max-col-width: Default 200px;
+
+   * @prop --color: Deafults to var(--nano-color-mediumgrey, #68767e);
+   * @prop --font-size: Deafults to 0.87rem;
+   * @prop --cell-line-height: Deafults to 1.5;
+
+   * @prop --border-color: Deafults to var(--nano-color-palegrey, #b5aea7);
+   * @prop --border-style: Deafults to thin solid var(--border-color);
+   * @prop --border-tint-color: Deafults to var(--nano-color-blue, #90c6e7);
+   * @prop --border-tint-style: Deafults to 2px solid var(--border-tint-color);
+
+   * @prop --cell-bg-rgb: Deafults to var(--nano-color-white-rgb, 255 255 255);
+   * @prop --head-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --foot-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --th-row-bg-rgb: Deafults to var(--cell-bg-rgb);
+   * @prop --ordered-bg-rgb: Deafults to var(--nano-color-offwhite-rgb, 249 249 251);
+
+   * @prop --td-padding-start: Deafults to 0.625rem;
+   * @prop --td-padding-end: Deafults to 0.625rem;
+   * @prop --td-padding-top: Deafults to 0.5rem;
+   * @prop --td-padding-bottom: Deafults to 0.4125rem;
+
+   * @prop --th-padding-start: Deafults to 0.625rem;
+   * @prop --th-padding-end: Deafults to 0.625rem;
+   * @prop --th-padding-top: Deafults to 0.875rem;
+   * @prop --th-padding-bottom: Deafults to 0.6875rem;
+
+   * @prop --td-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);
+   * @prop --td-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);
+
+   * @prop --th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);
+   * @prop --th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);
+
+   * @prop --foot-th-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);
+   * @prop --foot-th-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);
+
+   * @prop --head-th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);
+   * @prop --head-th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);
+
+   * @prop --bookend-col-padding: Deafults to 2rem;
+  */
+  display: block;
   width: 100%;
   --max-col-width: 200px;
   --color: var(--nano-color-mediumgrey, #68767e);
   --font-size: 0.87rem;
   --cell-line-height: 1.5;
   --border-color: var(--nano-color-palegrey, #b5aea7);
-  --border-style: 1px solid var(--border-color);
+  --border-style: thin solid var(--border-color);
   --border-tint-color: var(--nano-color-blue, #90c6e7);
   --border-tint-style: 2px solid var(--border-tint-color);
   --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);
@@ -27,10 +69,22 @@ nano-table {
   --foot-bg-rgb: var(--cell-bg-rgb);
   --th-row-bg-rgb: var(--cell-bg-rgb);
   --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);
-  --td-padding: 0.5rem 0.625rem 0.4125rem;
-  --th-padding: 0.875rem 0.625rem 0.6875rem;
-  --head-th-padding: var(--th-padding);
-  --foot-th-padding: var(--td-padding);
+  --td-padding-start: 0.625rem;
+  --td-padding-end: 0.625rem;
+  --td-padding-top: 0.5rem;
+  --td-padding-bottom: 0.4125rem;
+  --th-padding-start: 0.625rem;
+  --th-padding-end: 0.625rem;
+  --th-padding-top: 0.875rem;
+  --th-padding-bottom: 0.6875rem;
+  --td-padding-v: var(--td-padding-top) var(--td-padding-bottom);
+  --td-padding-h: var(--td-padding-start) var(--td-padding-end);
+  --th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
+  --th-padding-h: var(--th-padding-start) var(--th-padding-end);
+  --foot-th-padding-v: var(--td-padding-top) var(--td-padding-bottom);
+  --foot-th-padding-h: var(--td-padding-start) var(--td-padding-end);
+  --head-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);
+  --head-th-padding-h: var(--th-padding-start) var(--th-padding-end);
   --bookend-col-padding: 2rem;
 }
 
@@ -42,8 +96,11 @@ nano-table {
   border-spacing: 0 0;
   border-collapse: separate;
   background: rgb(var(--cell-bg-rgb));
-  -webkit-border-end: 1px solid transparent;
-          border-inline-end: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
+}
+.nano-tbl__wrap {
+  display: table;
+  min-width: 100%;
 }
 .nano-tbl__top-anchor {
   clip: rect(1px, 1px, 1px, 1px);
@@ -55,13 +112,12 @@ nano-table {
   overflow: hidden;
   padding: 0;
   position: absolute;
+  position: relative;
 }
 .nano-tbl__ordered {
   background-color: var(--ordered-bg);
-  -webkit-border-start: var(--border-style);
-          border-inline-start: var(--border-style);
-  -webkit-border-end: var(--border-style);
-          border-inline-end: var(--border-style);
+  border-inline-start: var(--border-style);
+  border-inline-end: var(--border-style);
 }
 .nano-tbl__order-btn {
   padding: 0;
@@ -70,22 +126,15 @@ nano-table {
   font: inherit;
   background: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   color: inherit;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 10px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   width: 100%;
 }
 .nano-tbl__status-icons {
   margin-inline: auto 10px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 10px;
 }
@@ -95,7 +144,6 @@ nano-table {
   inset-block-start: 0;
   inset-inline: 0;
   z-index: 10;
-  -webkit-transition: scale 0.25s;
   transition: scale 0.25s;
   scale: 0;
   width: 100%;
@@ -119,36 +167,41 @@ nano-table {
 .nano-tbl__td, .nano-tbl__th {
   line-height: var(--cell-line-height);
   text-align: start;
-  -webkit-border-after: var(--border-style);
-          border-block-end: var(--border-style);
+  border-block-start: var(--border-style);
   max-width: var(--max-col-width);
   background-color: rgb(var(--cell-bg-rgb));
 }
-@media (min-width: 768px) {
+.md .nano-tbl__td:first-child .nano-tbl__cell-content, .md .nano-tbl__th:first-child .nano-tbl__cell-content {
+  padding-inline-start: var(--bookend-col-padding);
+}
+.md .nano-tbl__td:last-child .nano-tbl__cell-content, .md .nano-tbl__th:last-child .nano-tbl__cell-content {
+  padding-inline-end: var(--bookend-col-padding);
+}
+@media (max-width: 768px) {
   .nano-tbl__td:first-child .nano-tbl__cell-content, .nano-tbl__th:first-child .nano-tbl__cell-content {
-    -webkit-padding-start: var(--bookend-col-padding) !important;
-            padding-inline-start: var(--bookend-col-padding) !important;
+    padding-inline-start: var(--td-padding-start) !important;
   }
   .nano-tbl__td:last-child .nano-tbl__cell-content, .nano-tbl__th:last-child .nano-tbl__cell-content {
-    -webkit-padding-end: var(--bookend-col-padding) !important;
-            padding-inline-end: var(--bookend-col-padding) !important;
+    padding-inline-end: var(--td-padding-end) !important;
   }
 }
 thead .nano-tbl__td, thead .nano-tbl__th {
   font-weight: 800;
   background: rgba(var(--head-bg-rgb), 90%);
+  border-block-start: none;
 }
 thead .nano-tbl__td .nano-tbl__cell-content, thead .nano-tbl__th .nano-tbl__cell-content {
-  padding: var(--head-th-padding);
+  padding-block: var(--head-th-padding-v);
+  padding-inline: var(--head-th-padding-h);
 }
 tfoot .nano-tbl__td, tfoot .nano-tbl__th {
   font-weight: 800;
-  -webkit-border-after: none;
-          border-block-end: none;
+  border-block-end: none;
   background: rgba(var(--foot-bg-rgb), 90%);
 }
 tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell-content {
-  padding: var(--foot-th-padding);
+  padding-block: var(--foot-th-padding-v);
+  padding-inline: var(--foot-th-padding-h);
 }
 .nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {
   background-color: rgba(var(--ordered-bg-rgb), 0.8) !important;
@@ -157,7 +210,8 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: var(--td-padding);
+  padding-block: var(--td-padding-v);
+  padding-inline: var(--td-padding-h);
 }
 .nano-tbl tbody {
   will-change: scroll-position;
@@ -168,70 +222,69 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl th[scope=row] {
   font-weight: 800;
-  max-width: 65vw;
   margin: 0;
 }
+.sm .nano-tbl th[scope=row] {
+  max-width: 65vw !important;
+}
 .nano-tbl__pin {
   position: sticky;
   z-index: 1;
 }
 .nano-tbl__pin--start {
   inset-inline: -1px auto;
-  -webkit-transition: max-width 0.25s;
   transition: max-width 0.25s;
 }
 .nano-tbl__pin--start::after {
   content: "";
   position: absolute;
   inset: 0;
-  -webkit-box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 5px 1px 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
   z-index: -1;
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start {
   z-index: 2;
+  max-width: 125px;
 }
-@media (max-width: 576px) {
-  .nano-tbl__pinned--start .nano-tbl__pin--start {
-    max-width: 25vw !important;
-  }
+.sm .nano-tbl__pinned--start .nano-tbl__pin--start {
+  max-width: var(--max-col-width);
 }
 .nano-tbl__pinned--start .nano-tbl__pin--start::after {
   opacity: 1;
 }
 .nano-tbl__pin--end {
-  inset-inline: auto -1px;
-  max-width: min(50vw, 200px);
   /*
     I cannot think of a nice way to make stuck-end columns play nice on small screens :(
     Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.
     This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ∞
   */
 }
-.nano-tbl__pin--end::after {
+.nano-tbl__pin--start + .nano-tbl__pin--end {
+  inset-inline: auto auto;
+}
+.nano-tbl__pin--start + .nano-tbl__pin--end::after {
+  display: none;
+}
+.sm .nano-tbl__pin--end {
+  inset-inline: auto -1px !important;
+  max-width: min(50vw, 200px);
+}
+.sm .nano-tbl__pin--end::after {
+  display: block !important;
   content: "";
   position: absolute;
   inset: 0;
-  -webkit-box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: -5px 1px 4px 0 rgba(0, 0, 0, 0.2);
   opacity: 0;
   z-index: -1;
 }
-.nano-tbl__pinned--end .nano-tbl__pin--end {
+.sm .nano-tbl__pinned--end .nano-tbl__pin--end {
   z-index: 3;
 }
-.nano-tbl__pinned--end .nano-tbl__pin--end::after {
+.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after {
   opacity: 1;
 }
-@media (max-width: 576px) {
-  .nano-tbl__pin--start ~ .nano-tbl__pin--end {
-    inset-inline: auto auto;
-  }
-  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {
-    display: none;
-  }
-}
 .nano-tbl__pin--top {
   inset-block: -1px auto;
 }
@@ -243,8 +296,7 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pinned--bottom .nano-tbl__pin--bottom {
   z-index: 5;
-  -webkit-border-before: var(--border-tint-style);
-          border-block-start: var(--border-tint-style);
+  border-block-start: var(--border-tint-style);
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
   z-index: 6;
@@ -262,15 +314,13 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 .nano-tbl thead tr:last-of-type th,
 .nano-tbl tfoot tr:last-of-type td,
 .nano-tbl tfoot tr:last-of-type th {
-  -webkit-border-after: var(--border-tint-style);
-          border-block-end: var(--border-tint-style);
+  border-block-end: var(--border-tint-style);
 }
 .nano-tbl .unlimited-width {
   max-width: none;
 }
 .nano-tbl__spinner {
   font-size: 1.5rem;
-  -webkit-transition: scale 0.25s;
   transition: scale 0.25s;
   scale: 0;
   padding: 0.5rem;

package/dist/collection/components/table/table.js

@@ -24,13 +24,14 @@ function perMark(name, end = false) {
 let id = 0;
 /**
  * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
- * - Built-in search
- * - Built-in column filter
- * - Built-in column sort
- * - Easily swap in API / async based search / filter & sort
- * - Pin headers, footers, rows, columns
- * - Add custom rendering at every level
- * - Add custom properties at every level
+ *
+ *- Built-in search
+ *- Built-in column filter
+ *- Built-in column sort
+ *- Easily swap in API / async based search / filter & sort
+ *- Pin headers, footers, rows, columns
+ *- Add custom rendering at every level
+ *- Add custom properties at every level
  *
  * @slot caption - The table's caption. You must either use this or the `caption` attribute.
  */
@@ -141,7 +142,7 @@ export class Table {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this._loading = true;
+    this._loading = false;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -354,10 +355,11 @@ export class Table {
     const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
     const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
-    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1))
-      this.topAnchorEle.scrollIntoView();
-    if (element)
-      element.scrollIntoView({ block: 'start' });
+    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
+      this.host.scrollIntoView();
+    }
+    if (element && !isInViewport(element, 1))
+      setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);
     if (scrollX)
       this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
@@ -374,7 +376,7 @@ export class Table {
    * So we just estimate for now
    */
   setInitialBlockDimension() {
-    if (!this.blockElements.length)
+    if (!this.blockElements?.length)
       return;
     perMark('blockDims');
     const finishResizing = new Promise((resolve) => {
@@ -528,15 +530,15 @@ export class Table {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md" }, h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", { indeterminate: true, class: {
         [`${CSSNAMESPACE}__progress-bar`]: true,
-        [`${CSSNAMESPACE}__progress-bar--show`]: this.loading,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
       } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
         [`${CSSNAMESPACE}__caption`]: true,
         [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
       }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this.loading &&
+    ]))), this._loading &&
       !this.blocks.length &&
       [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
@@ -550,11 +552,11 @@ export class Table {
     })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
       } }))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
-      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }),
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnOrderClick: this.sortStart }),
     ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
         [`${CSSNAMESPACE}__spinner`]: true,
-        [`${CSSNAMESPACE}__spinner--show`]: this.loading,
-      } })))));
+        [`${CSSNAMESPACE}__spinner--show`]: this._loading,
+      } }))))));
   }
   static get is() { return "nano-table"; }
   static get originalStyleUrls() {
@@ -646,7 +648,7 @@ export class Table {
         "setter": true,
         "attribute": "loading",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "placeholderSize": {
         "type": "number",