@nanoporetech-digital/components 3.5.1 → 3.7.0

package/dist/custom-elements/index.js

@@ -9612,13 +9612,13 @@ const DataList = class extends H {
         : undefined }, h$1("nano-dropdown", { ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
         dlist__dropdown: true,
         'dlist--isfiltered': this.isFiltered,
-      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide }, h$1("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+      }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h$1("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
         dlist__menu: true,
         'dlist__menu--open': this.dropwdownOpen,
-      }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h$1("slot", { name: "list-top" }), !this.options.length && h$1("slot", null), !!this.options.length && h$1("slot", { name: "internal-opts" }), h$1("slot", { name: "list-bottom" })), h$1("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+      }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el), role: "list" }, h$1("slot", { name: "list-top" }), !this.options.length && h$1("slot", null), !!this.options.length && h$1("slot", { name: "internal-opts" }), h$1("slot", { name: "list-bottom" })), h$1("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
         dlist__menu: true,
         'dlist__menu--open': this.dropwdownOpen,
-      } }, h$1("slot", { name: "no-result" })), !!this.actvOptEles && (h$1("div", { "aria-live": "polite", role: "status", class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+      } }, h$1("slot", { name: "no-result" })), !!this.actvOptEles && (h$1("div", { class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -9651,7 +9651,7 @@ var DaysOfWeek;
  * @param year
  * @param month
  * @param day
- * @returns a new Date objecy
+ * @returns a new Date object
  */
 function createDate(year, month, day) {
   const dayInt = parseInt(day, 10);
@@ -9668,6 +9668,7 @@ function createDate(year, month, day) {
   if (isValid) {
     return new Date(yearInt, monthInt - 1, dayInt);
   }
+  return undefined;
 }
 /**
  * @param value date string in ISO format YYYY-MM-DD
@@ -9675,11 +9676,12 @@ function createDate(year, month, day) {
  */
 function parseISODate(value) {
   if (!value)
-    return;
+    return undefined;
   const matches = value.match(ISO_DATE_FORMAT);
   if (matches) {
     return createDate(matches[1], matches[2], matches[3]);
   }
+  return undefined;
 }
 /**
  * print date in format YYYY-MM-DD
@@ -10731,8 +10733,8 @@ const Demo = class extends H {
     return (h$1(Host$1, null, h$1("nano-table", { rowRender: {
         template: (_, c, TableCell) => [
           c.renderedRow,
-          c.row.includedItems?.length ? (c.row.includedItems?.map((item) => {
-            return (h$1("tr", { class: "child-row" }, h$1(TableCell, { header: true }, item.name), h$1(TableCell, null, capitalise(c.row.status || this.order.status)), h$1(TableCell, null, capitalise(item.sku)), h$1(TableCell, null, capitalise(item.salesTag)), h$1(TableCell, null, mediumDate(item.requestedShippingDate))));
+          c.rowModel.includedItems?.length ? (c.rowModel.includedItems?.map((item) => {
+            return (h$1("tr", { class: "child-row" }, h$1(TableCell, { header: true }, item.name), h$1(TableCell, null, capitalise(c.rowModel.status || this.order.status)), h$1(TableCell, null, capitalise(item.sku)), h$1(TableCell, null, capitalise(item.salesTag)), h$1(TableCell, null, mediumDate(item.requestedShippingDate))));
           })) : (h$1(Fragment$1, null)),
         ].flat(1),
       }, columns: [
@@ -10741,6 +10743,7 @@ const Demo = class extends H {
           prop: 'name',
           pinned: 'start',
           rowHeader: true,
+          autoTooltip: true,
         },
         {
           title: 'Status',
@@ -13484,7 +13487,8 @@ const Dropdown = class extends H {
     setTimeout(() => this.updateAccessibleTrigger(), 100);
   }
   disconnectedCallback() {
-    this.hide();
+    if (this.host.isConnected)
+      this.hide();
     if (this.popover)
       this.popover.destroy();
   }
@@ -13492,7 +13496,9 @@ const Dropdown = class extends H {
     return (h$1("div", { part: "base", id: this.dropdownId, class: {
         dropdown: true,
         'dropdown--open': this.open,
-      } }, h$1("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h$1("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h$1("div", { ref: (el) => (this.positioner = el), class: "dropdown__positioner" }, h$1("div", { ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h$1("h2", { id: this.labelId, class: "dropdown__accessible-title", "aria-live": "polite" }, this.dialogTitle)), h$1("slot", null)))));
+      } }, h$1("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h$1("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h$1("div", { ref: (el) => (this.positioner = el), class: "dropdown__positioner" }, h$1("div", { ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (h$1("span", { id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+        ? undefined
+        : 'polite' }, this.dialogTitle)), h$1("slot", null)))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -14349,6 +14355,10 @@ const FileUpload = class extends H {
       if (!this.canChangeFileList || !this.removeFiles.length)
         return;
       this.fileList = this.fileList.filter((fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem));
+      try {
+        this.removeFiles.forEach((f) => f.location ? URL.revokeObjectURL(f.location) : '');
+      }
+      catch (e) { }
       this.removeFiles = [];
     };
     this.onInputChange = () => {
@@ -17029,7 +17039,7 @@ const IconButton = class extends H {
     return (h$1(TagType, { part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h$1("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true" })));
+      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h$1("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false })));
   }
   static get style() { return iconButtonCss; }
 };
@@ -17821,12 +17831,17 @@ const Menu = class extends H {
     }
   }
   // Component Lifecycle
+  componentDidLoad() {
+    {
+      getDirectChildren(this.el, ':not(nano-nav-item):not(nano-option):not([role])', true).forEach((el) => el.setAttribute('role', 'none'));
+    }
+  }
   render() {
-    return (h$1(Host$1, null, h$1("div", { onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, role: this.type, ref: (el) => (this.menu = el), part: "base", class: {
+    return (h$1(Host$1, { role: this.type === 'menu' ? 'menu' : 'group' }, h$1("div", { onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
         menu: true,
         ['menu--' + this.type]: true,
         'menu--has-focus': this.hasFocus,
-      }, tabIndex: -1 }, h$1("slot", null))));
+      }, tabIndex: -1, role: "group" }, h$1("slot", null))));
   }
   get el() { return this; }
   static get style() { return menuCss; }
@@ -18097,8 +18112,7 @@ const NavItem = class extends H {
       this.fromHover = false;
       if (this.hasSecondarySlot)
         this.toggleSecondary();
-      else
-        this.el.querySelector('*')?.click();
+      // else this.el.querySelector<HTMLElement>('*')?.click();
     };
     this.didOpen = false;
     this.isInGlobalNav = false;
@@ -18874,12 +18888,17 @@ const ResizeObserve = class extends H {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.nanoResizeStateChange = createEvent(this, "nanoResizeStateChange", 7);
     this.nanoResizeObserverReady = createEvent(this, "nanoResizeObserverReady", 7);
+    this.nanoResizeContentFitChange = createEvent(this, "nanoResizeContentFitChange", 7);
     this.isReady = false;
     this.assessChanges = () => {
       if (!this.currentWidth && !this.currentHeight)
         return;
+      readTask(() => this.assesContentFit());
+      if (!this.states || !this.appliedStates)
+        return;
       const changedStates = { h: new Map(), w: new Map() };
       let hasChanged = false;
       Object.keys(this.appliedStates).forEach((dimType) => {
@@ -18909,6 +18928,9 @@ const ResizeObserve = class extends H {
     this.currentWidth = undefined;
     this.currentHeight = undefined;
     this.classNames = [];
+    this.contentFitX = null;
+    this.contentFitY = null;
+    this.notifyContentFit = undefined;
     this.states = undefined;
   }
   classNameChange() {
@@ -18924,8 +18946,6 @@ const ResizeObserve = class extends H {
   statesChanged() {
     if (!this.states)
       return;
-    if (!this.ro)
-      this.attachRO();
     const toBpDir = (bpDir) => {
       const bpDirSpl = bpDir.split(/(\d+)/).filter((bs) => bs.length);
       return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };
@@ -18948,7 +18968,59 @@ const ResizeObserve = class extends H {
       }
     });
   }
+  assesContentFit() {
+    if (!this.notifyContentFit)
+      return;
+    const findNonContentsEle = (ele) => {
+      if (window.getComputedStyle(ele).display !== 'contents')
+        return ele;
+      const recurse = (e) => {
+        return Array.from(e.children).find((cEle) => {
+          if (window.getComputedStyle(cEle).display !== 'contents')
+            return cEle;
+          recurse(cEle);
+        });
+      };
+      return recurse(ele);
+    };
+    let didChange = false;
+    const measureEle = findNonContentsEle(this.host.firstElementChild);
+    if (measureEle) {
+      if (this.notifyContentFit?.includes('x')) {
+        if (this.currentWidth < measureEle.scrollWidth &&
+          this.contentFitX !== false) {
+          didChange = true;
+          this.contentFitX = false;
+        }
+        else if (this.currentWidth >= measureEle.scrollWidth &&
+          this.contentFitX !== true) {
+          didChange = true;
+          this.contentFitX = true;
+        }
+      }
+      if (this.notifyContentFit?.includes('y')) {
+        if (this.currentHeight < measureEle.scrollHeight &&
+          this.contentFitY !== false) {
+          didChange = true;
+          this.contentFitY = false;
+        }
+        else if (this.currentHeight >= measureEle.scrollHeight &&
+          this.contentFitY !== true) {
+          didChange = true;
+          this.contentFitY = true;
+        }
+      }
+      if (didChange) {
+        this.nanoResizeContentFitChange.emit({
+          x: this.contentFitX,
+          y: this.contentFitY,
+        });
+      }
+    }
+  }
   applyChanges(changes) {
+    if (!this.states)
+      return;
     let classNames = [...this.classNames];
     Object.keys(changes).forEach((dimType) => {
       changes[dimType].forEach((state) => {
@@ -18979,35 +19051,40 @@ const ResizeObserve = class extends H {
     return retObj;
   }
   attachRO() {
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.currentWidth = entry.contentRect.width;
-        this.currentHeight = entry.contentRect.height;
-      }
+    this.ro = new ResizeObserver(() => {
+      const { width, height } = this.host.getBoundingClientRect();
+      this.currentWidth = Math.ceil(width);
+      this.currentHeight = Math.ceil(height);
     });
     this.ro.observe(this.host);
   }
   componentWillLoad() {
     this.classNames = Array.from(this.host.classList);
-    if (!this.states)
-      return;
     if (!this.currentWidth || !this.currentHeight) {
       readTask(() => {
         const { width, height } = this.host.getBoundingClientRect();
-        this.currentWidth = width;
-        this.currentHeight = height;
+        this.currentWidth = Math.ceil(width);
+        this.currentHeight = Math.ceil(height);
       });
     }
     this.statesChanged();
     // set all class as 'not-' by deafult
     this.applyChanges(this.appliedStates);
   }
+  connectedCallback() {
+    if (!this.ro)
+      this.attachRO();
+  }
   disconnectedCallback() {
     if (this.ro)
       this.ro.disconnect();
   }
   render() {
-    return (h$1(Host$1, null, h$1("slot", null)));
+    return (h$1(Host$1, null, h$1("slot", null), !!this.notifyContentFit &&
+      (this.contentFitX !== null || this.contentFitY !== null) && [
+      !!this.contentFitX ? (h$1("slot", { name: "content-fit-x" })) : (h$1("slot", { name: "content-nofit-x" })),
+      !!this.contentFitY ? (h$1("slot", { name: "content-fit-y" })) : (h$1("slot", { name: "content-nofit-y" })),
+    ]));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -24444,6 +24521,8 @@ const Sticker = class extends H {
   /** A root sticker is a fixed element Or this sticker is sticking to another.
    * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */
   stickerResizeListener() {
+    if (!this.content)
+      return;
     if (this.contentSizeObserver) {
       this.contentSizeObserver.disconnect();
       this.contentSizeObserver = undefined;
@@ -25035,7 +25114,7 @@ const TabGroup = class extends H {
         this.updateScrollControls();
       }, 500);
       /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */
-      const nodes = ev.target.assignedNodes({ flatten: true });
+      const nodes = ev.target.assignedElements({ flatten: true });
       nodes.forEach((node) => {
         if (!this.mutationObservers.get(node)) {
           const mo = new MutationObserver(() => {
@@ -25488,7 +25567,7 @@ function storeSetData(host, rows) {
         row[colName] = Number(coerceDate);
     });
     row['__index'] = i;
-    row['__uuid'] = cyrb53(Object.values(row).join());
+    row['__uuid'] = cyrb53(cols.map((c) => row[c.prop]).join());
     return row;
   });
   store.data.state.rows = rows;
@@ -25550,7 +25629,7 @@ function colDataModel(rowIndex, colIndex) {
   const column = columns[colIndex];
   const prop = column?.prop;
   const rowModel = rows[rowIndex];
-  const cellModel = rowModel[columns[colIndex].prop];
+  const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
   return {
     prop,
     cellModel,
@@ -25567,9 +25646,9 @@ function colDataModel(rowIndex, colIndex) {
 function rowDataModel(rowIndex) {
   const store = fetchStores();
   const rows = store.data.state.rows;
-  const row = rows[rowIndex];
+  const rowModel = rows[rowIndex];
   return {
-    row,
+    rowModel,
     rowIndex,
   };
 }
@@ -25636,7 +25715,7 @@ function mergeCellProperties(rowIndex, colIndex, defaultProps) {
  * @returns - a JSX node
  */
 function colheadFootRender(col) {
-  const tpl = col?.colTemplate;
+  const tpl = col?.columnTemplate;
   return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
 }
 const stickyHIOs = new WeakMap();
@@ -25999,7 +26078,7 @@ function cellRender(rowIndex, colIndex) {
         : d;
     }
   }
-  return tpl ? (tpl(h, model)) : (h(Fragment, null, model.cellModel?.toString()));
+  return tpl ? (tpl(h, model)) : model.cellModel ? (h(Fragment, null, model.cellModel?.toString())) : ('');
 }
 const baseCellClasses = (colIndex, toString = false) => {
   const store = fetchStores();
@@ -26016,9 +26095,9 @@ const baseCellClasses = (colIndex, toString = false) => {
   return classes;
 };
 const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
-  const content = nestedContent || cellRender(rowIndex, colIndex);
-  if (!content)
-    return h(Fragment, null);
+  const Content = () => nestedContent
+    ? nestedContent()
+    : cellRender(rowIndex, colIndex) || (h("span", { class: "placeholder" }, "\u00A0"));
   let CellType = 'td';
   const store = fetchStores();
   const column = store.config.state.columns[colIndex];
@@ -26032,24 +26111,37 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
         : { ...props, scope: 'row' };
     CellType = 'th';
   }
+  const ContentWrap = (props) => (h("div", { ...props, class: {
+      [`${CSSNAMESPACE}__cell-content`]: true,
+      [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+    } },
+    h(Content, null)));
   return (h(CellType
   // role="gridcell"
-  , { ...props },
-    h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
+  , { ...props }, column.autoTooltip && !column.wrap ? (h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+      e.detail.x) },
+    h("nano-tooltip", { disabled: true, hoist: true },
+      h(ContentWrap, null),
+      h("span", { slot: "content" },
+        h(Content, null))))) : (h(ContentWrap, null))));
 };
 
-const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, utils) => {
+const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
   let extraProps = {};
-  const TableCell = ({ header }, children) => {
-    const cell = h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
     return header ? h("th", { scope: "row" }, cell) : h("td", null, cell);
   };
-  if (!row) {
+  if (!rowModel) {
     const model = rowDataModel(rowIndex);
-    row = model.row;
+    rowModel = model.rowModel;
   }
   if (rowRenderer?.rowProperties) {
-    extraProps = rowRenderer.rowProperties({ row, rowIndex }) || extraProps;
+    extraProps =
+      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
   let pinned;
   if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
@@ -26060,15 +26152,15 @@ const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, util
   const tpl = rowRenderer?.template;
   if (tpl) {
     let toRender = tpl(h, {
-      renderedRow: (h("tr", { ...props, key: row.__uuid }, children)),
-      row,
+      renderedRow: (h("tr", { ...props, key: rowModel.__uuid }, children)),
+      rowModel,
       rowIndex,
     }, TableCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node, i) => {
         if (node.vtag === 'tr') {
           if (!node.vkey)
-            node.vkey = `${row.__uuid}_${i}`;
+            node.vkey = `${rowModel.__uuid}_${i}`;
           node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
           if (!!node.vchildren) {
             node.vchildren = utils.map(node.vchildren, (cNode, i) => {
@@ -26094,15 +26186,18 @@ const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, util
     }
     return toRender;
   }
-  return (h("tr", { ...props, key: row.__uuid }, children));
+  return (h("tr", { ...props, key: rowModel.__uuid }, children));
 };
 const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   let extraProps = {};
   if (rowRenderer.rowProperties) {
     extraProps = rowRenderer.rowProperties() || {};
   }
-  const TableCell = ({ header }, children) => {
-    const cell = h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
     return header !== false ? h("th", { scope: "col" }, cell) : h("td", null, cell);
   };
   const pinned = rowRenderer.pinned || null;
@@ -26144,15 +26239,15 @@ const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
   return h("tr", { ...props }, children);
 };
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 30%, 20vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--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}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.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{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{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{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}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease;z-index:2}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;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 !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{z-index:2;}.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;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto;z-index:3}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px;z-index:3}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pin--top.nano-tbl__pin--start{z-index:4}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pin--top.nano-tbl__pin--end{z-index:4}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:4}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:4}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--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}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.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{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{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{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}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;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 !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.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;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
 
 let id$1 = 0;
 const Table = class extends H {
   constructor() {
     super();
     this.__registerHost();
-    this.nanoTblBlockRendered = createEvent(this, "nanoTblBlockRendered", 7);
     this.nanoTblReady = createEvent(this, "nanoTblReady", 7);
+    this.nanoTblBlockRendered = createEvent(this, "nanoTblBlockRendered", 7);
     this.nanoTblBeforeSort = createEvent(this, "nanoTblBeforeSort", 7);
     this.nanoTblAfterSort = createEvent(this, "nanoTblAfterSort", 7);
     this.nanoTblColDrag = createEvent(this, "nanoTblColDrag", 7);
@@ -26161,22 +26256,30 @@ const Table = class extends H {
     this.nanoTblAfterFilter = createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = createEvent(this, "nanoTblBeforeSearch", 7);
     this.nanoTblAfterSearch = createEvent(this, "nanoTblAfterSearch", 7);
-    this.debounceSetLoading = (l) => {
-      this._loading = l;
-    };
+    this.nanoTblBeforeEdit = createEvent(this, "nanoTblBeforeEdit", 7);
     this.renderId = 'tbl-' + id$1++;
     this.filters = [];
     this.currentFilters = '[]';
     this.currentSort = '';
+    this.measureHeight = 0;
     this.blockIos = new WeakMap();
     this.blockHeights = [];
     this.unitHeight = 0;
     // Scroll / IO used for hiding / showing blocks
     this.ignoreIO = true;
     this._isReady = false;
+    /**
+     * Fired when a column is dragged
+     * @param column
+     */
     this.colDrag = (column) => {
       this.nanoTblColDrag.emit({ column });
     };
+    /**
+     * Fired when a column is dropped after being dragged
+     * @param fromCol
+     * @param toCol
+     */
     this.colDrop = (fromCol, toCol) => {
       const cols = this.store.config.state.columns;
       const toIndex = cols.findIndex((col) => col.prop === toCol);
@@ -26189,7 +26292,7 @@ const Table = class extends H {
       });
       if (dropEvent.defaultPrevented)
         return;
-      this.store.config.state.columns = arrMove(fromIndex, toIndex, cols);
+      this.columns = arrMove(fromIndex, toIndex, cols);
     };
     /**
      * Start a sort - can be cancelled by `preventDefault`
@@ -26201,7 +26304,7 @@ const Table = class extends H {
       // did order change?
       if (this.currentSort === order + ':' + column)
         return;
-      this.loading = true;
+      this._loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -26210,13 +26313,24 @@ const Table = class extends H {
       this.scrollToTop(element);
       if (this.customSortFn) {
         try {
-          await this.customSortFn(column, order);
-          this.sortComplete(order, column);
+          const res = await this.customSortFn(column, order);
+          // if the response is 'true', the custom sort did it's thing
+          // handover to finish and stop loading state.
+          // if response is falsey, carry on to do a FE sort
+          if (res === true) {
+            this.sortComplete(order, column);
+            this._loading = false;
+            return;
+          }
         }
         catch (e) {
+          // if response errored, stop loading state
+          // clear current sort cache
           console.warn('custom sort failed', e);
+          this.currentSort = '';
+          this._loading = false;
+          return;
         }
-        return;
       }
       try {
         await storeSort(this.host, column, order);
@@ -26227,7 +26341,8 @@ const Table = class extends H {
         this.currentSort = '';
       }
       finally {
-        this.loading = false;
+        if (this.blocks.length)
+          this._loading = false;
       }
     };
     /**
@@ -26240,31 +26355,34 @@ const Table = class extends H {
       if (!el || this.blockIos.has(el))
         return;
       const blockIo = new IntersectionObserver(([ioEntry]) => {
-        if (this.ignoreIO)
+        if (ioEntry.intersectionRatio === 0)
           return;
-        if (ioEntry.isIntersecting) {
-          // This is a bit gross
-          // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
-          // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
-          // To fix that, we check - for realzies - if the block IS visible.
-          // BUT that test is not as sensitive to a block being visible via the IO,
-          // so doesn't always fire if scrolling slowly
-          // *sigh*
-          readTask(() => {
-            if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
-              this.activeBlocks = [
+        // This is a bit gross
+        // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
+        // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
+        // To fix that, we check - for realzies - if the block IS visible.
+        // BUT that test is not as sensitive to a block being visible via the IO,
+        // so doesn't always fire if scrolling slowly
+        // *sigh*
+        readTask(() => {
+          if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
+            if (!this.ignoreIO) {
+              const potentialBlocks = [
                 blockIndex,
                 blockIndex + 1,
                 Math.max(0, blockIndex - 1),
               ];
-              this.nanoTblBlockRendered.emit({
-                block: blockIndex,
-                totalBlocks: this.blockElements.length,
-              });
-              requestAnimationFrame(() => this.setBlockHeight());
+              if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+                this.debouncedBlockChange(potentialBlocks);
+              }
             }
-          });
-        }
+            // fire the event regardless
+            this.nanoTblBlockRendered.emit({
+              block: blockIndex,
+              totalBlocks: this.blockElements.length,
+            });
+          }
+        });
       }, {
         threshold: [0],
         root: this.scrollParent === document.scrollingElement
@@ -26286,7 +26404,8 @@ const Table = class extends H {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this._loading = false;
+    this.loading = undefined;
+    this.internalLoading = false;
     this.placeholderSize = 5;
     this.rows = undefined;
     this.columns = [];
@@ -26300,26 +26419,29 @@ const Table = class extends H {
     this.customSortFn = undefined;
     this.defaultSort = true;
     this.defaultColDraggable = false;
+    this.virtualTotalItems = 0;
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
-    this.measureHeight = 0;
     this.debounceSetLoading = debounce$2(this.debounceSetLoading.bind(this), 50);
+    this.debouncedBlockChange = debounce$2(this.debouncedBlockChange.bind(this), 100);
   }
-  /** Will show a loading state when true.
-   * Will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting  */
-  get loading() {
-    return this._loading;
+  get _loading() {
+    return this.loading !== undefined ? this.loading : this.internalLoading;
   }
-  set loading(l) {
+  set _loading(l) {
+    if (this.loading !== undefined)
+      return;
     this.debounceSetLoading(l);
   }
+  debounceSetLoading(l) {
+    this.internalLoading = l;
+  }
   handleRowsChange() {
     if (!this.rows) {
-      this.loading = true;
+      this._loading = true;
       return;
     }
-    this.loading = true;
+    this._loading = true;
     Promise.resolve(this.rows).then(async (rows) => {
       await storeSetData(this.host, rows);
       // reset everything
@@ -26328,7 +26450,7 @@ const Table = class extends H {
       await this.columnInit();
       if (!this.isReady)
         this.setInitialBlockDimension();
-      this.loading = false;
+      this._loading = false;
     });
   }
   async handleColsChange() {
@@ -26343,6 +26465,9 @@ const Table = class extends H {
   handleSearchTermChange() {
     this.searchStart();
   }
+  virtualTotalItemsChangeHandler() {
+    this.setBlocks();
+  }
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   async resetSorting() {
@@ -26383,11 +26508,25 @@ const Table = class extends H {
     this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
     return this.filterStart();
   }
+  /** Updates a row model at a given index
+   * @param row - the row to update.
+   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
+   * - rows are augmented with certain properties to aid with efficient rendering
+   * @param rowIndex - the row index to insert this row
+   */
+  async updateRow(row, rowIndex) {
+    this.rows.splice(rowIndex, 1, row);
+    this.handleRowsChange();
+  }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
     if (!el)
       return;
-    this.measureHeight = el.getBoundingClientRect().height;
+    const potentialHeight = el.getBoundingClientRect().height;
+    this.measureHeight =
+      Math.abs(this.measureHeight - potentialHeight) < 5
+        ? this.measureHeight
+        : potentialHeight;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
   }
@@ -26433,7 +26572,7 @@ const Table = class extends H {
     this.nanoTblAfterSort.emit({ column: column, order });
   }
   async searchStart() {
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -26447,7 +26586,7 @@ const Table = class extends H {
       console.warn('search failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   async filterStart(filters, additive = true) {
@@ -26464,7 +26603,7 @@ const Table = class extends H {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
-    this.loading = true;
+    this._loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -26473,12 +26612,21 @@ const Table = class extends H {
     this.scrollToTop();
     if (this.customFilterFn) {
       try {
-        await this.customFilterFn(this.filters);
-        this.filterComplete();
+        const res = await this.customFilterFn(this.filters);
+        // if the response is 'true', the custom filter did it's thing
+        // handover to finish and stop loading state.
+        // if response is falsey, carry on to do a FE filter
+        if (res === true) {
+          this.filterComplete();
+          this._loading = false;
+        }
       }
       catch (e) {
+        // if response errored, stop loading state
+        // clear current sort cache
         console.warn('custom filter failed', e);
         this.currentFilters = '';
+        this._loading = false;
       }
       return;
     }
@@ -26490,7 +26638,7 @@ const Table = class extends H {
       console.warn('filter failed', e);
     }
     finally {
-      this.loading = false;
+      this._loading = false;
     }
   }
   filterComplete() {
@@ -26578,23 +26726,33 @@ const Table = class extends H {
    * These can then be hidden / shown to improve performance.
    */
   setBlocks() {
-    this.activeBlocks = [0, 1, 2];
+    const dRows = this.store.data.state.rows;
+    if (!dRows.length) {
+      this.blocks = [];
+      return;
+    }
     this.ignoreIO = true;
     let i = 1;
-    const l = this.store.data.state.rows.length;
+    const l = this.virtualTotalItems > dRows.length
+      ? this.virtualTotalItems
+      : dRows.length;
     let rows = [];
     const blocks = [];
     this.blockHeights = [];
     // old skool loop for perf
     for (i; i <= l; i++) {
-      rows.push(this.store.data.state.rows[i - 1]);
+      rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
       if (i % this.perBlock === 0) {
+        // assign a UUID for the whole block
+        // for block diffing
         blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
         rows = [];
       }
     }
-    if (rows.length)
+    // any leftover rows
+    if (rows.length) {
       blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+    }
     this.blocks = blocks;
   }
   /**
@@ -26621,11 +26779,11 @@ const Table = class extends H {
   }
   /** cache the height for all active blocks for later renders */
   setBlockHeight() {
-    readTask(() => {
-      this.activeBlocks.forEach((blockIndex) => {
-        const el = this.blockElements[blockIndex];
-        if (!el)
-          return;
+    this.activeBlocks.forEach((blockIndex) => {
+      const el = this.blockElements[blockIndex];
+      if (!el)
+        return;
+      readTask(() => {
         const height = el.getBoundingClientRect().height;
         // cache height to our block heights array
         // for subsequent renders
@@ -26638,6 +26796,10 @@ const Table = class extends H {
       });
     });
   }
+  debouncedBlockChange(newBlocks) {
+    this.activeBlocks = newBlocks;
+    this.setBlockHeight();
+  }
   /** Process slotted content */
   processSlots() {
     // see if we have slot content
@@ -26686,18 +26848,18 @@ const Table = class extends H {
           sortable: this.defaultSort,
           draggable: this.defaultColDraggable,
         } }),
-    ]))), this._loading && !this.blocks.length && (h$1("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h$1("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h$1("tr", null, h$1("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this._loading && !this.blocks.length && (h$1("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h$1("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h$1("tr", null, h$1("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
-        this.setupBlockIO(tb, blockIndex);
+        requestAnimationFrame(() => this.setupBlockIO(tb, blockIndex));
       }, class: {
         [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
         [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
       } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
       const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-      return (h$1(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-    })) : (h$1("td", { colSpan: this.store.config.state.columns.length, style: {
+      return (h$1(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+    })) : (h$1("tr", null, h$1("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
-      } }))))), this.showFooter && (h$1("tfoot", null, h$1(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      } })))))), this.showFooter && (h$1("tfoot", null, h$1(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h$1(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
           sortable: this.defaultSort,
           draggable: this.defaultColDraggable,
@@ -26711,7 +26873,8 @@ const Table = class extends H {
   static get watchers() { return {
     "rows": ["handleRowsChange"],
     "columns": ["handleColsChange"],
-    "searchTerm": ["handleSearchTermChange"]
+    "searchTerm": ["handleSearchTermChange"],
+    "virtualTotalItems": ["virtualTotalItemsChangeHandler"]
   }; }
   static get style() { return tableCss; }
 };
@@ -26781,6 +26944,7 @@ const Tooltip = class extends H {
     this.distance = 10;
     this.open = false;
     this.skidding = 0;
+    this.hoist = false;
     this.trigger = 'hover focus';
   }
   get target() {
@@ -26800,7 +26964,7 @@ const Tooltip = class extends H {
   /** Shows the tooltip. */
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.isVisible || this.disabled) {
       return;
     }
     const slShow = this.nanoShow.emit();
@@ -26843,6 +27007,7 @@ const Tooltip = class extends H {
   }
   syncOptions() {
     this.popover.setOptions({
+      strategy: this.hoist ? 'fixed' : 'absolute',
       placement: this.placement,
       distance: this.distance,
       skidding: this.skidding,
@@ -26873,10 +27038,10 @@ const Tooltip = class extends H {
     this.popover.destroy();
   }
   render() {
-    return (h$1(Host$1, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, h$1("slot", { onSlotchange: this.handleSlotChange }), !this.disabled && (h$1("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h$1("div", { part: "base", ref: (el) => (this.tooltip = el), class: {
+    return (h$1(Host$1, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, h$1("slot", { onSlotchange: this.handleSlotChange }), h$1("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h$1("div", { part: "base", ref: (el) => (this.tooltip = el), class: {
         tooltip: true,
         'tooltip--open': this.open,
-      }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h$1("slot", { name: "content", onSlotchange: this.handleTTSlotChange }, h$1("div", { id: this.componentId }, this.content)), h$1("div", { class: "tooltip-arrow", "data-popper-arrow": true }))))));
+      }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h$1("slot", { name: "content", onSlotchange: this.handleTTSlotChange }, h$1("div", { id: this.componentId }, this.content)), h$1("div", { class: "tooltip-arrow", "data-popper-arrow": true })))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -26922,7 +27087,7 @@ const NanoOption = /*@__PURE__*/proxyCustomElement(Option, [1,"nano-option",{"va
 const NanoProgressBar = /*@__PURE__*/proxyCustomElement(ProgressBar, [1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]);
 const NanoRange = /*@__PURE__*/proxyCustomElement(Range, [6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]}]);
 const NanoRating = /*@__PURE__*/proxyCustomElement(Rating, [2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32]}]);
-const NanoResizeObserve = /*@__PURE__*/proxyCustomElement(ResizeObserve, [4,"nano-resize-observe",{"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32]}]);
+const NanoResizeObserve = /*@__PURE__*/proxyCustomElement(ResizeObserve, [1,"nano-resize-observe",{"notifyContentFit":[1,"notify-content-fit"],"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32],"contentFitX":[32],"contentFitY":[32]}]);
 const NanoSelect = /*@__PURE__*/proxyCustomElement(Select, [6,"nano-select",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[1040],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_invalid":[32],"_eOptions":[32]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]);
 const NanoSkeleton = /*@__PURE__*/proxyCustomElement(Skeleton, [1,"nano-skeleton",{"animated":[4]}]);
 const NanoSlide = /*@__PURE__*/proxyCustomElement(Slide$2, [1,"nano-slide",{"ready":[1540]}]);
@@ -26933,8 +27098,8 @@ const NanoSticker = /*@__PURE__*/proxyCustomElement(Sticker, [1,"nano-sticker",{
 const NanoTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4]}]);
 const NanoTabContent = /*@__PURE__*/proxyCustomElement(TabPanel, [1,"nano-tab-content",{"name":[513],"active":[516]}]);
 const NanoTabGroup = /*@__PURE__*/proxyCustomElement(TabGroup, [1,"nano-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32]},[[0,"nanoTabClose","handleTabClose"]]]);
-const NanoTable = /*@__PURE__*/proxyCustomElement(Table, [4,"nano-table",{"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[6148],"placeholderSize":[2,"placeholder-size"],"rows":[16],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"defaultColDraggable":[4,"default-col-draggable"],"_loading":[32],"blocks":[32],"activeBlocks":[32],"measureHeight":[32]},[[9,"scroll","scrollListener"]]]);
-const NanoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1]}]);
+const NanoTable = /*@__PURE__*/proxyCustomElement(Table, [4,"nano-table",{"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[4],"placeholderSize":[2,"placeholder-size"],"rows":[1040],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"defaultColDraggable":[4,"default-col-draggable"],"virtualTotalItems":[2,"virtual-total-items"],"internalLoading":[32],"blocks":[32],"activeBlocks":[32]},[[9,"scroll","scrollListener"]]]);
+const NanoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[4],"trigger":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
@@ -29083,7 +29248,7 @@ const index = /*#__PURE__*/Object.freeze({
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';
-const workerPath = /*@__PURE__*/new URL('./assets/table.worker-e9fb087e.js', import.meta.url).href;
+const workerPath = /*@__PURE__*/new URL('./assets/table.worker-e2f9ccfa.js', import.meta.url).href;
 const blob = new Blob(['importScripts("' + workerPath + '")'], { type: 'text/javascript' });
 const url = URL.createObjectURL(blob);
 const worker = /*@__PURE__*/createWorker(url, workerName, workerMsgId);