@nanoporetech-digital/components 3.8.3 → 3.9.1

package/dist/cjs/nano-table-476fe78c.js

@@ -0,0 +1,1492 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+'use strict';
+
+const index = require('./index-e1b5c3ea.js');
+const math = require('./math-a8123703.js');
+const throttle = require('./throttle-f55496c8.js');
+const index$1 = require('./index-5e11be36.js');
+
+const CSSNAMESPACE = 'nano-tbl';
+
+const isInstanceOf = (value, className) => {
+  const C = globalThis[className];
+  return C != null && value instanceof C;
+};
+const getTransferables = (value) => {
+  if (value != null) {
+  if (
+    isInstanceOf(value, "ArrayBuffer") ||
+    isInstanceOf(value, "MessagePort") ||
+    isInstanceOf(value, "ImageBitmap") ||
+    isInstanceOf(value, "OffscreenCanvas")
+  ) {
+    return [value];
+  }
+  if (typeof value === "object") {
+    if (value.constructor === Object) {
+    value = Object.values(value);
+    }
+    if (Array.isArray(value)) {
+    return value.flatMap(getTransferables);
+    }
+    return getTransferables(value.buffer);
+  }
+  }
+  return [];
+};
+
+let pendingIds = 0;
+let callbackIds = 0;
+const pending = new Map();
+const callbacks = new Map();
+
+const createWorker = (workerPath, workerName, workerMsgId) => {
+  const worker = new Worker(workerPath, {name:workerName});
+
+  worker.addEventListener('message', ({data}) => {
+  if (data) {
+    const workerMsg = data[0];
+    const id = data[1];
+    const value = data[2];
+
+    if (workerMsg === workerMsgId) {
+    const err = data[3];
+    const [resolve, reject, callbackIds] = pending.get(id);
+    pending.delete(id);
+
+    if (err) {
+      const errObj = (err.isError)
+      ? Object.assign(new Error(err.value.message), err.value)
+      : err.value;
+
+      index.consoleError(errObj);
+      reject(errObj);
+    } else {
+      if (callbackIds) {
+      callbackIds.forEach(id => callbacks.delete(id));
+      }
+      resolve(value);
+    }
+    } else if (workerMsg === workerMsgId + '.cb') {
+    try {
+      callbacks.get(id)(...value);
+    } catch (e) {
+      index.consoleError(e);
+    }
+    }
+  }
+  });
+
+  return worker;
+};
+
+const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
+  (...args) => new Promise((resolve, reject) => {
+  let pendingId = pendingIds++;
+  let i = 0;
+  let argLen = args.length;
+  let mainData = [resolve, reject];
+  pending.set(pendingId, mainData);
+
+  for (; i < argLen; i++) {
+    if (typeof args[i] === 'function') {
+    const callbackId = callbackIds++;
+    callbacks.set(callbackId, args[i]);
+    args[i] = [workerMsgId + '.cb', callbackId];
+    (mainData[2] = mainData[2] || []).push(callbackId);
+    }
+  }
+  const postMessage = (w) => (
+    w.postMessage(
+    [workerMsgId, pendingId, exportedMethod, args],
+    getTransferables(args)
+    )
+  );
+  if (worker.then) {
+    worker.then(postMessage);
+  } else {
+    postMessage(worker);
+  }
+  })
+);
+
+const workerPromise = Promise.resolve().then(function () { return require('./table.worker-f839e510.js'); }).then(m => m.worker);
+const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
+const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
+const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
+const workerFilter = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerFilter');
+const workerSearch = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerSearch');
+const workerSort = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerSort');
+
+function colsToWorker(columns) {
+  const safeColumns = JSON.parse(JSON.stringify(columns));
+  columns.forEach((c) => {
+    if (!!c.sortCompareFn) {
+      const safeCol = safeColumns.find((sc) => sc.prop === c.prop);
+      safeCol.sortCompareFn = c.sortCompareFn.toString();
+    }
+  });
+  return safeColumns;
+}
+const stores = new WeakMap();
+async function generateStore(host, columns, scrollParent) {
+  const store = {
+    data: index$1.createStore({ rows: [] }),
+    config: index$1.createStore({ columns }),
+    general: index$1.createStore({ workerId: null, scrollParent, host }),
+  };
+  const id = await createWorkerStore(store.data.state.rows, colsToWorker(store.config.state.columns));
+  store.general.state.workerId = id;
+  stores.set(host, store);
+  // sync data from our store to our worker
+  store.data.use({
+    reset: () => {
+      if (store.general.state.workerId)
+        syncDataToWorker(store.general.state.workerId, null);
+    },
+    dispose: () => {
+      if (store.general.state.workerId)
+        syncDataToWorker(store.general.state.workerId, null);
+    },
+  });
+  store.config.use({
+    reset: () => {
+      if (store.general.state.workerId)
+        syncConfigToWorker(store.general.state.workerId, null);
+    },
+    dispose: () => {
+      if (store.general.state.workerId)
+        syncConfigToWorker(store.general.state.workerId, null);
+    },
+  });
+  return store;
+}
+function getStore(host) {
+  return stores.get(host);
+}
+function getDataType(value) {
+  if (value instanceof Date) {
+    return 'date';
+  }
+  if (['number', 'string'].includes(typeof value)) {
+    return typeof value;
+  }
+  return 'unknown';
+}
+function storeSetData(host, rows) {
+  const store = stores.get(host);
+  if (!store)
+    return;
+  const cols = store.config.state.columns;
+  const dateCols = cols
+    .filter((col) => col.type === 'date')
+    .reduce((prev, curr) => {
+    return [...prev, curr.prop];
+  }, []);
+  const unknownCols = cols.filter((col) => !col.type);
+  // augments data with some internal.
+  // discern unknown column types
+  // convert dates to numbers for worker
+  rows = rows.map((row, i) => {
+    // try our best to discern the column type (from first row) if unset
+    if (unknownCols.length && i === 0) {
+      store.config.state.columns = cols.map((col) => {
+        if (unknownCols.includes(col) && row[col.prop] && !col.type) {
+          col.type = getDataType(row[col.prop]);
+          if (col.type === 'date')
+            dateCols.push(col.prop);
+        }
+        return col;
+      });
+    }
+    // convert date columns into numbers to send to our worker
+    dateCols.forEach((colName) => {
+      var _a;
+      // coerce any date type;
+      // Date(), timestamp, valid date string
+      const coerceDate = (_a = new Date(row[colName])) !== null && _a !== void 0 ? _a : null;
+      if (!!coerceDate && Number(coerceDate))
+        row[colName] = Number(coerceDate);
+    });
+    row['__index'] = i;
+    row['__uuid'] = math.cyrb53(cols.map((c) => row[c.prop]).join());
+    return row;
+  });
+  store.data.state.rows = rows;
+  if (store.general.state.workerId)
+    return syncDataToWorker(store.general.state.workerId, rows);
+}
+function storeSetConfig(host, columns) {
+  const store = stores.get(host);
+  if (!store)
+    return;
+  store.config.state.columns = columns;
+  if (store.general.state.workerId)
+    return syncConfigToWorker(store.general.state.workerId, colsToWorker(columns));
+}
+async function storeSearch(host, term) {
+  const store = stores.get(host);
+  if (!store || !store.general.state.workerId)
+    return;
+  try {
+    store.data.state.rows = await workerSearch(store.general.state.workerId, term);
+  }
+  catch (e) {
+    console.warn(e);
+  }
+}
+async function storeFilter(host, filters) {
+  const store = stores.get(host);
+  if (!store || !store.general.state.workerId)
+    return;
+  try {
+    store.data.state.rows = await workerFilter(store.general.state.workerId, filters);
+  }
+  catch (e) {
+    console.warn(e);
+  }
+}
+async function storeSort(host, prop, order) {
+  const store = stores.get(host);
+  if (!store || !store.general.state.workerId)
+    return;
+  try {
+    store.data.state.rows = await workerSort(store.general.state.workerId, prop, order);
+  }
+  catch (e) {
+    console.warn(e);
+  }
+}
+
+/**
+ * Get a model object for custom cell / property renderers.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns a model object which will be passed to custom renderers
+ */
+function colDataModel(rowIndex, colIndex) {
+  const store = fetchStores();
+  const columns = store.config.state.columns;
+  const rows = store.data.state.rows;
+  const column = columns[colIndex];
+  const prop = column === null || column === void 0 ? void 0 : column.prop;
+  const rowModel = rows[rowIndex];
+  const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
+  return {
+    prop,
+    cellModel,
+    column,
+    rowIndex,
+    rowModel,
+  };
+}
+/**
+ * Get a model object for custom row renderers.
+ * @param rowIndex
+ * @returns a model object passed to custom row renderers
+ */
+function rowDataModel(rowIndex) {
+  const store = fetchStores();
+  const rows = store.data.state.rows;
+  const rowModel = rows[rowIndex];
+  return {
+    rowModel,
+    rowIndex,
+  };
+}
+/**
+ * Merges 2 objects of properties together
+ * @param current - property object
+ * @param extra - additional object property
+ * @returns - merged properties that can be applied to a node
+ */
+function mergeProperties(current, extra) {
+  if (!extra)
+    return current;
+  // top level merge
+  const props = Object.assign(Object.assign({}, extra), current);
+  // deeper merge
+  // merge classes maps or strings
+  if (extra.class) {
+    if (typeof extra.class === 'object' && typeof props.class === 'object') {
+      props.class = Object.assign(Object.assign({}, extra.class), props.class);
+    }
+    else if (typeof extra.class === 'string' &&
+      typeof props.class === 'object') {
+      props.class[extra.class] = true;
+    }
+    else if (typeof props.class === 'string') {
+      props.class += ' ' + extra.class;
+    }
+  }
+  // merge style
+  if (extra.style) {
+    props.style = Object.assign(Object.assign({}, extra.style), props.style);
+  }
+  return props;
+}
+/**
+ * Returns the current nano-table's stores.
+ * @returns the current nano-table stores
+ */
+function fetchStores() {
+  return getStore(index.getElement(index.getRenderingRef()));
+}
+/**
+ * Merges any defined cell properties with properties
+ * required by `nano-table` functionality
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex = the current column index being rendered
+ * @param defaultProps - default properties required by `nano-table`
+ * @returns - the merged properties that will be applied to a node
+ */
+function mergeCellProperties(rowIndex, colIndex, defaultProps) {
+  var _a;
+  const props = Object.assign({}, defaultProps);
+  const extraPropsFunc = (_a = fetchStores().config.state.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellProperties;
+  if (!extraPropsFunc)
+    return props;
+  const data = colDataModel(rowIndex, colIndex);
+  const extra = extraPropsFunc(data);
+  if (!extra)
+    return props;
+  return mergeProperties(props, extra);
+}
+/**
+ * Renders a table header (within a thead) using a custom template if set.
+ * @param col - the current column config object
+ * @returns - a JSX node
+ */
+function colheadFootRender(col) {
+  const tpl = col === null || col === void 0 ? void 0 : col.columnTemplate;
+  return tpl ? (tpl(index.h, col)) : (index.h(index.Fragment, null, col.title));
+}
+const stickyHIOs = new WeakMap();
+const stickyVIOs = new WeakMap();
+/**
+ * Adds element to Intersection Observer. Fires when element changes on the x axis
+ * @param el - an element to observe
+ * @param pos - the edge to watch (start or end)
+ * @param cb - callback when an intersection state changes.
+ */
+function addHObserver(el, pos, cb) {
+  if (stickyHIOs.get(el))
+    return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const observer = new IntersectionObserver(([e]) => {
+    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
+    const positions = {};
+    if (pos === 'start') {
+      positions.start =
+        e.boundingClientRect.x - (rootBounds.x + root.scrollLeft) < 0 &&
+          !e.isIntersecting;
+    }
+    if (pos === 'end') {
+      // TODO - sort these out for RtL
+      positions.end =
+        e.boundingClientRect.right > e.boundingClientRect.width &&
+          !e.isIntersecting;
+    }
+    if (!!cb)
+      cb(positions);
+  }, {
+    threshold: [1],
+    rootMargin: '1px 0px 100px 0px',
+    root: root === document.scrollingElement ? null : root,
+  });
+  stickyHIOs.set(el, observer);
+  // dirty fix - wait a tick 'cos nano-size-observer isn't always ready in-time
+  setTimeout(() => observer.observe(el), 300);
+}
+/**
+ * Adds element to Intersection Observer. Fires when element changes on the y axis
+ * @param el - an element to observe
+ * @param pos - the edge to watch (start or end)
+ * @param cb - callback when an intersection state changes.
+ */
+function addVObserver(el, pos, cb) {
+  if (stickyVIOs.get(el))
+    return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const observer = new IntersectionObserver(([e]) => {
+    const rootBounds = e.rootBounds || document.scrollingElement.getBoundingClientRect();
+    const positions = {};
+    if (pos === 'top') {
+      positions.top =
+        e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&
+          !e.isIntersecting;
+    }
+    if (pos === 'bottom') {
+      const boundingClientRect = e.target.getBoundingClientRect();
+      positions.bottom =
+        boundingClientRect.height + boundingClientRect.y >
+          rootBounds.height && !e.isIntersecting;
+    }
+    if (!!cb)
+      cb(positions);
+  }, {
+    threshold: [1],
+    rootMargin: '0px 100px 0px 100px',
+    root: root === document.scrollingElement ? null : root,
+  });
+  stickyVIOs.set(el, observer);
+  requestAnimationFrame(() => observer.observe(el));
+}
+function headerPinClasses(type, vPinned, toString = false) {
+  const classes = {
+    [`${CSSNAMESPACE}__${type}`]: true,
+    [`${CSSNAMESPACE}__pin`]: !!vPinned,
+    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',
+    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',
+  };
+  if (toString)
+    return classListToStr(classes);
+  return classes;
+}
+/**
+ * Turns a class map {'string': boolean} to class string
+ * @param classes - the class map to convert
+ * @returns a class string
+ */
+function classListToStr(classes) {
+  let classString = '';
+  Object.entries(classes).forEach(([className, on]) => {
+    if (on)
+      classString += className + ' ';
+  });
+  return classString;
+}
+/**
+ * Attempts to find the closes scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
+function findScrollParent(element) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(auto|scroll)/;
+  if (style.position === 'fixed')
+    return document.documentElement;
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent;
+  }
+  return document.documentElement;
+}
+/**
+ * Checks whether an element is currently viewable within the viewport
+ * @param el - element to check
+ * @param percentVisible - the percentage of the element that should be within the viewport
+ * @returns true if the element's area percentage is visible
+ */
+function isInViewport(el, percentVisible = 100) {
+  const r = el.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  if (!r.bottom &&
+    !r.top &&
+    !r.left &&
+    !r.right &&
+    !r.height &&
+    !r.width &&
+    !r.x &&
+    !r.y)
+    return false;
+  return !(Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <
+    percentVisible ||
+    Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
+      percentVisible);
+}
+/**
+ * Immutable array re-order
+ * @param from - the index to move from
+ * @param to - the index to move to
+ * @param arr - the array to re-order
+ * @returns - a new, re-orderd array
+ */
+function arrMove(from, to, arr) {
+  const newArr = [...arr];
+  const item = newArr.splice(from, 1)[0];
+  newArr.splice(to, 0, item);
+  return newArr;
+}
+
+// TABLE HEADERS
+// (thead > tr > th, tfoot > tr > th)
+let draggingCol;
+let draggingColEle;
+let dragEnterEle;
+let draggingParent;
+const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, onColumnDrag, onColumnDrop, defaults, }) => {
+  const store = fetchStores();
+  // Drag to re-order columns handling
+  function handleDragStart(e, column) {
+    draggingCol = column;
+    draggingColEle = dragEnterEle = e.target;
+    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);
+    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);
+    onColumnDrag(column.prop, draggingColEle);
+  }
+  function handleDragEnd() {
+    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);
+    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
+    });
+    draggingColEle = null;
+    draggingCol = null;
+    draggingParent = null;
+    dragEnterEle = null;
+  }
+  function handleDragEnter(e) {
+    if (dragEnterEle === e.target)
+      return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    e.dataTransfer.dropEffect = 'move';
+    draggingParent
+      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
+      .forEach((el) => {
+      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
+    });
+    dragEnterEle = e.target;
+    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {
+      e.dataTransfer.dropEffect = 'none';
+      return;
+    }
+    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);
+  }
+  function handleDrop(e) {
+    e.stopPropagation();
+    const { colName } = this.dataset;
+    if (colName === draggingCol.prop)
+      return;
+    const cols = store.config.state.columns;
+    let toIndex = cols.findIndex((col) => col.prop === colName);
+    const fromIndex = cols.findIndex((col) => col === draggingCol);
+    if (toIndex < fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`))
+      toIndex++;
+    if (toIndex > fromIndex &&
+      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`))
+      toIndex--;
+    if (toIndex === fromIndex)
+      return;
+    onColumnDrop(draggingCol.prop, store.config.state.columns[toIndex].prop, draggingColEle);
+  }
+  // Sort handling
+  function handleColumnSortClick(e) {
+    let order;
+    switch (column.order) {
+      case 'asc':
+        order = 'desc';
+        break;
+      case 'desc':
+        order = null;
+        break;
+      default:
+        order = 'asc';
+    }
+    onColumnSortClick(order, column.prop, e.target.closest('th'));
+  }
+  function isSortable() {
+    return ((!!defaults.sortable && column.sortable !== false) ||
+      (!defaults.sortable && column.sortable === true));
+  }
+  function isDraggable() {
+    return ((!!defaults.draggable && column.draggable !== false) ||
+      (!defaults.draggable && column.draggable === true));
+  }
+  let extraProps = {};
+  if (column.columnProperties) {
+    extraProps = column.columnProperties(column) || extraProps;
+  }
+  const baseProps = {
+    class: Object.assign(Object.assign({}, headerPinClasses('th', headRenderer === null || headRenderer === void 0 ? void 0 : headRenderer.pinned)), { [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start', [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end', [`${CSSNAMESPACE}__ordered`]: !!column.order, [`${CSSNAMESPACE}__filtered`]: !!column.filter }),
+  };
+  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const content = colheadFootRender(column);
+  if (!content)
+    return index.h(index.Fragment, null);
+  props =
+    Number(props.colSpan) > 1
+      ? Object.assign(Object.assign({}, props), { scope: 'colgroup' }) : Object.assign(Object.assign({}, props), { scope: 'col' });
+  if (isSortable()) {
+    const sort = column.order
+      ? column.order === 'asc'
+        ? 'ascending'
+        : 'descending'
+      : 'none';
+    props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
+  }
+  if (isDraggable()) {
+    props = Object.assign(Object.assign({}, props), { draggable: true, onDragStart: (e) => handleDragStart(e, column), onDragOver: (e) => e.preventDefault(), onDragEnd: () => handleDragEnd() });
+  }
+  return (index.h("th", Object.assign({}, props, { ref: (th) => {
+      if (['end', 'start'].includes(column.pinned))
+        addHObserver(th, column.pinned, onColumnPinned);
+      if (['top', 'bottom'].includes(headRenderer.pinned))
+        addVObserver(th, headRenderer.pinned, onColumnPinned);
+    }, key: column.prop }),
+    isDraggable() && [
+      index.h("div", { class: {
+          [`${CSSNAMESPACE}__drag-mask`]: true,
+          [`${CSSNAMESPACE}__drag-mask--start`]: true,
+        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+      index.h("div", { class: {
+          [`${CSSNAMESPACE}__drag-mask`]: true,
+          [`${CSSNAMESPACE}__drag-mask--end`]: true,
+        }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
+    ],
+    isSortable() ? (index.h("button", { class: {
+        [`${CSSNAMESPACE}__order-btn`]: true,
+        [`${CSSNAMESPACE}__cell-content`]: true,
+      }, onClick: handleColumnSortClick },
+      colheadFootRender(column),
+      !!column.filter && index.h("nano-icon", { name: "light/filter" }),
+      !!column.order &&
+        (column.order === 'desc' ? (index.h("nano-icon", { name: "solid/long-arrow-down" })) : (index.h("nano-icon", { name: "solid/long-arrow-up" }))),
+      index.h("div", { class: `${CSSNAMESPACE}__status-icons` },
+        index.h("nano-icon", { name: "light/chevron-down" })))) : (index.h("div", { class: `${CSSNAMESPACE}__cell-content` },
+      colheadFootRender(column),
+      !!column.filter && index.h("nano-icon", { name: "light/bars-filter" })))));
+};
+
+// TABLE CELL
+// (tbody > tr > td, tbody > tr > th)
+/**
+ * Renders a cell using a custom renderer if set.
+ * @param rowIndex - the current row index being rendered
+ * @param colIndex - the current column index being rendered
+ * @returns - a JSX node
+ */
+function cellRender(rowIndex, colIndex) {
+  var _a, _b;
+  const store = fetchStores();
+  const columns = store.config.state.columns;
+  const tpl = (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
+  const model = colDataModel(rowIndex, colIndex);
+  if (!!model.cellModel && columns[colIndex].type === 'date') {
+    const d = new Date(model.cellModel);
+    if (d instanceof Date && !isNaN(d)) {
+      model.cellModel = !tpl
+        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(model.cellModel).toLocaleTimeString()}`
+        : d;
+    }
+  }
+  return tpl ? (tpl(index.h, model)) : model.cellModel ? (index.h(index.Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
+}
+const baseCellClasses = (colIndex, toString = false) => {
+  const store = fetchStores();
+  const column = store.config.state.columns[colIndex];
+  const classes = {
+    [`${CSSNAMESPACE}__td`]: true,
+    [`${CSSNAMESPACE}__ordered`]: !!column.order,
+    [`${CSSNAMESPACE}__pin`]: !!column.pinned,
+    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
+    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
+  };
+  if (toString)
+    return classListToStr(classes);
+  return classes;
+};
+const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+  const Content = () => nestedContent
+    ? nestedContent()
+    : cellRender(rowIndex, colIndex) || (index.h("span", { class: "placeholder" }, "\u00A0"));
+  let CellType = 'td';
+  const store = fetchStores();
+  const column = store.config.state.columns[colIndex];
+  let props = mergeCellProperties(rowIndex, colIndex, {
+    class: baseCellClasses(colIndex),
+  });
+  if (column.rowHeader) {
+    props =
+      Number(props.rowSpan) > 1
+        ? Object.assign(Object.assign({}, props), { scope: 'rowgroup' }) : Object.assign(Object.assign({}, props), { scope: 'row' });
+    CellType = 'th';
+  }
+  const ContentWrap = (props) => (index.h("div", Object.assign({}, props, { class: {
+      [`${CSSNAMESPACE}__cell-content`]: true,
+      [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
+    } }),
+    index.h(Content, null)));
+  return (index.h(CellType
+  // role="gridcell"
+  , Object.assign({}, props), column.autoTooltip && !column.wrap ? (index.h("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
+      e.detail.x) },
+    index.h("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
+      index.h(ContentWrap, null),
+      index.h("span", { slot: "content" },
+        index.h(Content, null))))) : (index.h(ContentWrap, null))));
+};
+
+const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
+  let extraProps = {};
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (index.h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
+    return header ? index.h("th", { scope: "row" }, cell) : index.h("td", null, cell);
+  };
+  if (!rowModel) {
+    const model = rowDataModel(rowIndex);
+    rowModel = model.rowModel;
+  }
+  if (rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.rowProperties) {
+    extraProps =
+      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
+  }
+  let pinned;
+  if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
+    pinned = rowRenderer.pinned();
+  }
+  const baseProps = { class: headerPinClasses('tr', pinned) };
+  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  if (tpl) {
+    let toRender = tpl(index.h, {
+      renderedRow: (index.h("tr", Object.assign({}, 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 = `${rowModel.__uuid}_${i}`;
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          if (!!node.vchildren) {
+            node.vchildren = utils.map(node.vchildren, (cNode, i) => {
+              if (['td', 'th'].includes(cNode.vtag.toString())) {
+                cNode.vattrs = mergeProperties({
+                  class: headerPinClasses(cNode.vtag.toString(), pinned, true) + baseCellClasses(i, true),
+                  ref: (th) => {
+                    if ((!!th && pinned === 'top') || pinned === 'bottom')
+                      addVObserver(th, pinned, onColumnPinned);
+                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
+                      addHObserver(th, 'end', onColumnPinned);
+                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
+                      addHObserver(th, 'start', onColumnPinned);
+                  },
+                }, cNode.vattrs);
+              }
+              return cNode;
+            });
+          }
+        }
+        return node;
+      });
+    }
+    return toRender;
+  }
+  return (index.h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children));
+};
+const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
+  let extraProps = {};
+  if (rowRenderer.rowProperties) {
+    extraProps = rowRenderer.rowProperties() || {};
+  }
+  const TableCell = ({ header, wrap }, children) => {
+    const cell = (index.h("div", { class: {
+        [`${CSSNAMESPACE}__cell-content`]: true,
+        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
+      } }, children));
+    return header !== false ? index.h("th", { scope: "col" }, cell) : index.h("td", null, cell);
+  };
+  const pinned = rowRenderer.pinned || null;
+  const baseProps = { class: headerPinClasses('tr', null) };
+  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  if (tpl) {
+    let toRender = tpl(index.h, {
+      renderedRow: index.h("tr", Object.assign({}, props), children),
+    }, TableCell);
+    if (Array.isArray(toRender)) {
+      toRender = utils.map(toRender, (node) => {
+        if (node.vtag === 'tr') {
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          if (!!node.vchildren) {
+            node.vchildren = utils.map(node.vchildren, (cNode) => {
+              if (['td', 'th'].includes(cNode.vtag.toString())) {
+                cNode.vattrs = mergeProperties({
+                  class: headerPinClasses(cNode.vtag.toString(), pinned, true),
+                  ref: (th) => {
+                    if ((!!th && pinned === 'top') || pinned === 'bottom')
+                      addVObserver(th, pinned, onColumnPinned);
+                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
+                      addHObserver(th, 'end', onColumnPinned);
+                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
+                      addHObserver(th, 'start', onColumnPinned);
+                  },
+                }, cNode.vattrs);
+              }
+              return cNode;
+            });
+          }
+        }
+        return node;
+      });
+    }
+    return toRender;
+  }
+  return index.h("tr", Object.assign({}, 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, 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));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent;-webkit-border-before: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);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end: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;-webkit-border-start:2px dashed var(--border-tint-color);border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;-webkit-border-end:2px dashed var(--border-tint-color);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;transform:scale(0);width:100%;height:0}.nano-tbl__progress-bar--show{transform: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;-webkit-border-before:var(--border-style);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{-webkit-border-before:none;border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{-webkit-border-after:var(--border-style);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{-webkit-padding-start:var(--bookend-col-padding);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{-webkit-padding-end:var(--bookend-col-padding);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(--td-padding-start) !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(--td-padding-end) !important;padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/90%);font-size:var(--thead-font-size);-webkit-border-before:none !important;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;-webkit-border-before:none;border-block-start:none;background:rgb(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:rgb(var(--ordered-bg-rgb)/80%) !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;transform:translateZ(0)}.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{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{-webkit-border-before:none;border-block-start:none}.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)}.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{-webkit-border-before:var(--border-tint-style) !important;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{-webkit-border-after:none !important;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 = 0;
+const Table = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.nanoTblReady = index.createEvent(this, "nanoTblReady", 7);
+    this.nanoTblBlockRendered = index.createEvent(this, "nanoTblBlockRendered", 7);
+    this.nanoTblBeforeSort = index.createEvent(this, "nanoTblBeforeSort", 7);
+    this.nanoTblAfterSort = index.createEvent(this, "nanoTblAfterSort", 7);
+    this.nanoTblColDrag = index.createEvent(this, "nanoTblColDrag", 7);
+    this.nanoTblColDrop = index.createEvent(this, "nanoTblColDrop", 7);
+    this.nanoTblBeforeFilter = index.createEvent(this, "nanoTblBeforeFilter", 7);
+    this.nanoTblAfterFilter = index.createEvent(this, "nanoTblAfterFilter", 7);
+    this.nanoTblBeforeSearch = index.createEvent(this, "nanoTblBeforeSearch", 7);
+    this.nanoTblAfterSearch = index.createEvent(this, "nanoTblAfterSearch", 7);
+    this.nanoTblBeforeEdit = index.createEvent(this, "nanoTblBeforeEdit", 7);
+    this.renderId = 'tbl-' + id++;
+    this.filters = [];
+    this.currentFilters = '[]';
+    this.currentSort = '';
+    this.cacheScrollPosition = 0;
+    this.measureHeight = 0;
+    this.blockHeights = [];
+    this.unitHeight = 0;
+    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);
+      const fromIndex = cols.findIndex((col) => col.prop === fromCol);
+      const dropEvent = this.nanoTblColDrop.emit({
+        fromCol,
+        toCol,
+        fromIndex,
+        toIndex,
+      });
+      if (dropEvent.defaultPrevented)
+        return;
+      this.columns = arrMove(fromIndex, toIndex, cols);
+    };
+    /**
+     * Start a sort - can be cancelled by `preventDefault`
+     * @param order - column order
+     * @param column - column config object
+     * @returns A promise
+     */
+    this.sortStart = async (order, column, element) => {
+      // did order change?
+      if (this.currentSort === order + ':' + column)
+        return;
+      this._loading = true;
+      const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
+      if (sortEvent.defaultPrevented)
+        return;
+      this.currentSort = order + ':' + column;
+      // doesn't make sense to leave user in place for a sort
+      this.scrollToTop(element);
+      if (this.customSortFn) {
+        try {
+          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;
+        }
+      }
+      try {
+        await storeSort(this.host, column, order);
+        this.sortComplete(order, column);
+      }
+      catch (e) {
+        console.warn('sort failed', e);
+        this.currentSort = '';
+      }
+      finally {
+        if (this.blocks.length)
+          this._loading = false;
+      }
+    };
+    this.scrollHandler = () => {
+      this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;
+      requestAnimationFrame(() => {
+        let cumulativeHeight = 0;
+        let blockIndex = 0;
+        const blockLen = this.blocks.length;
+        while (blockIndex < blockLen &&
+          this.cacheScrollPosition >= cumulativeHeight) {
+          cumulativeHeight += this.getBlockHeight(blockIndex);
+          if (this.cacheScrollPosition < cumulativeHeight) {
+            const potentialBlocks = [
+              blockIndex,
+              blockIndex + 1,
+              Math.max(0, blockIndex - 1),
+            ];
+            if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
+              this.activeBlocks = potentialBlocks;
+              this.setBlockHeight();
+            }
+            this.primaryBlockIndex = blockIndex;
+          }
+          blockIndex++;
+        }
+      });
+    };
+    this.handleColumnPinned = (positions) => {
+      Object.entries(positions).forEach(([key, applied]) => {
+        this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
+      });
+    };
+    this.handleResizeChange = (e) => {
+      var _a;
+      this.tableWrapperEle.className = '';
+      let classes = [`${CSSNAMESPACE}__wrap`];
+      if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.className)
+        classes = [...e.target.className.split(' '), ...classes];
+      this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
+    };
+    this.type = 'table';
+    this.caption = undefined;
+    this.showCaption = false;
+    this.loading = undefined;
+    this.internalLoading = false;
+    this.placeholderSize = 5;
+    this.rows = undefined;
+    this.columns = [];
+    this.headRender = { pinned: 'top' };
+    this.rowRender = undefined;
+    this.footRender = { pinned: 'bottom' };
+    this.showFooter = false;
+    this.perBlock = 40;
+    this.searchTerm = undefined;
+    this.customFilterFn = undefined;
+    this.customSortFn = undefined;
+    this.defaultSort = true;
+    this.defaultColDraggable = false;
+    this.virtualTotalItems = 0;
+    this.blocks = [];
+    this.activeBlocks = [0, 1, 2];
+    this.debounceSetLoading = throttle.debounce(this.debounceSetLoading.bind(this), 50);
+  }
+  get _loading() {
+    return this.loading !== undefined ? this.loading : this.internalLoading;
+  }
+  set _loading(l) {
+    if (this.loading !== undefined)
+      return;
+    this.debounceSetLoading(l);
+  }
+  debounceSetLoading(l) {
+    this.internalLoading = l;
+  }
+  handleRowsChange() {
+    if (!this.rows) {
+      this._loading = true;
+      return;
+    }
+    this._loading = true;
+    Promise.resolve(this.rows).then(async (rows) => {
+      await storeSetData(this.host, rows);
+      // reset everything
+      this.currentFilters = '';
+      this.currentSort = '';
+      await this.columnInit();
+      if (!this.isReady)
+        this.setInitialBlockDimension();
+      this._loading = false;
+    });
+  }
+  async handleColsChange() {
+    await storeSetConfig(this.host, this.columns);
+    if (this.isReady)
+      this.columnInit();
+  }
+  /** The number of total blocks currently rendered in the table. @readonly */
+  get blocksLength() {
+    return this.blocks.length;
+  }
+  handleSearchTermChange() {
+    this.searchStart();
+  }
+  virtualTotalItemsChangeHandler() {
+    this.setBlocks();
+  }
+  /** Remove any column sorts currently applied
+   * @returns a promise which resolves when complete */
+  async resetSorting() {
+    const col = this.columns.find((c) => !!c.order);
+    if (!col)
+      return;
+    return this.sortStart(null, col.prop);
+  }
+  /** Apply a sort on a column
+   * @returns a promise which resolves when complete */
+  async addSort(column, order) {
+    const col = this.columns.find((c) => c.prop === column);
+    if (!col)
+      throw 'Cannot find column with ' + column;
+    return this.sortStart(order, col.prop);
+  }
+  /** Remove any column filters currently applied
+   * @returns a promise which resolves when complete */
+  async resetFilters() {
+    this.filters = [];
+    return this.filterStart();
+  }
+  /** Apply a filter on a column
+   * @param filters - the filters to apply
+   * @param additive - if true, will add the filters to any currently applied
+   * @returns a promise which resolves when complete
+   */
+  async addFilters(filters, additive = true) {
+    if (!additive)
+      this.filters = [];
+    return this.filterStart(filters, additive);
+  }
+  /** Remove filters from a column
+   * @param columnNames - the filters to apply
+   * @returns a promise which resolves when complete
+   */
+  async removeFilters(columnNames) {
+    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) {
+    var _a;
+    if (!el)
+      return;
+    const potentialHeight = el.getBoundingClientRect().height;
+    this.measureHeight =
+      Math.abs(this.measureHeight - potentialHeight) < 5
+        ? this.measureHeight
+        : potentialHeight;
+    this.unitHeight =
+      ((_a = el.querySelector('tr')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || this.unitHeight;
+  }
+  get scrollParent() {
+    return this._scrollParent;
+  }
+  set scrollParent(ele) {
+    if (ele === this._scrollParent)
+      return;
+    if (this._scrollParent) {
+      (this._scrollParent === document.documentElement
+        ? document
+        : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
+    }
+    (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
+    this._scrollParent = ele;
+  }
+  // used to fire `nanoTblBlockRendered` on block render change
+  get primaryBlockIndex() {
+    return this._primaryBlockIndex;
+  }
+  set primaryBlockIndex(blockIndex) {
+    if (this._primaryBlockIndex === blockIndex)
+      return;
+    this._primaryBlockIndex = blockIndex;
+    // fire block change event
+    this.nanoTblBlockRendered.emit({
+      block: blockIndex,
+      totalBlocks: this.blockElements.length,
+    });
+  }
+  // Misc.
+  get isReady() {
+    return this._isReady;
+  }
+  set isReady(ready) {
+    if (ready === this._isReady)
+      return;
+    this._isReady = ready;
+    if (this.isReady)
+      requestAnimationFrame(() => this.handleReady());
+  }
+  // Private Logic
+  // Listeners
+  handleReady() {
+    const hash = window.location.hash;
+    if (hash.length > 1) {
+      try {
+        const idRow = document.querySelector(hash);
+        if (idRow)
+          idRow.scrollIntoView();
+      }
+      catch (e) { }
+    }
+    this.nanoTblReady.emit();
+  }
+  /**
+   * Complete a sort. Reflects the order to ui.
+   * @param order - column order
+   * @param column - column config object
+   */
+  sortComplete(order, column) {
+    this.columns = this.columns.map((c) => {
+      if (c.prop === column)
+        return Object.assign(Object.assign({}, c), { order });
+      return Object.assign(Object.assign({}, c), { order: null });
+    });
+    this.nanoTblAfterSort.emit({ column: column, order });
+  }
+  async searchStart() {
+    this._loading = true;
+    const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
+    if (sortEvent.defaultPrevented)
+      return;
+    // doesn't make sense to leave user in place for a search
+    this.scrollToTop();
+    try {
+      await storeSearch(this.host, this.searchTerm);
+      this.nanoTblAfterSearch.emit({ term: this.searchTerm });
+    }
+    catch (e) {
+      console.warn('search failed', e);
+    }
+    finally {
+      this._loading = false;
+    }
+  }
+  async filterStart(filters, additive = true) {
+    if (filters) {
+      if (additive) {
+        this.filters = [
+          ...this.filters.filter((f) => !filters.find((ff) => ff.prop === f.prop)),
+          ...filters,
+        ];
+      }
+      else {
+        this.filters = filters;
+      }
+    }
+    if (this.currentFilters === JSON.stringify(this.filters))
+      return;
+    this._loading = true;
+    const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
+    if (sortEvent.defaultPrevented)
+      return;
+    this.currentFilters = JSON.stringify(this.filters);
+    // doesn't make sense to leave user in place for a search
+    this.scrollToTop();
+    if (this.customFilterFn) {
+      try {
+        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;
+    }
+    try {
+      await storeFilter(this.host, this.filters);
+      this.filterComplete();
+    }
+    catch (e) {
+      console.warn('filter failed', e);
+    }
+    finally {
+      this._loading = false;
+    }
+  }
+  filterComplete() {
+    this.columns = this.columns.map((c) => {
+      const cFilter = this.filters.find((f) => f.prop === c.prop);
+      if (cFilter)
+        c.filter = cFilter.filter;
+      return c;
+    });
+    this.nanoTblAfterFilter.emit({ filters: this.filters });
+  }
+  /** Scrolls to the top immediately - used whilst sorting / filtering */
+  scrollToTop(element) {
+    var _a;
+    const scrollBehaviour = (_a = this.scrollParent.style) === null || _a === void 0 ? void 0 : _a.scrollBehavior;
+    const scrollX = this.scrollParent.scrollLeft;
+    this.scrollParent.style.scrollBehavior = 'auto';
+    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)
+      this.scrollParent.style.scrollBehavior = scrollBehaviour;
+    this.scrollHandler();
+  }
+  setMeasureElement() {
+    index.readTask(() => {
+      this.measureEle = this.blockElements.find((b) => { var _a; return !((_a = b === null || b === void 0 ? void 0 : b.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`)); });
+    });
+  }
+  /**
+   * Sets the initial height on tbody elements that are not active
+   * These elements have no natural height - on account of all their rows being hidden
+   * So we just estimate for now
+   */
+  setInitialBlockDimension() {
+    var _a;
+    if (!((_a = this.blockElements) === null || _a === void 0 ? void 0 : _a.length))
+      return;
+    const finishResizing = new Promise((resolve) => {
+      index.readTask(() => {
+        this.setMeasureElement();
+        // find the first active block
+        if (!this.measureEle && !this.unitHeight)
+          resolve();
+        this.blockElements.forEach((el, i) => {
+          var _a;
+          if (!el || !((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains(`${CSSNAMESPACE}__inactive`))) {
+            if (i === this.blockElements.length - 1)
+              resolve();
+            return;
+          }
+          if (i === this.blockElements.length - 1)
+            resolve();
+        });
+      });
+    });
+    // we're all finished.
+    finishResizing.then(() => {
+      requestAnimationFrame(() => {
+        this.isReady = true;
+      });
+    });
+  }
+  /** Apply initial columns settings */
+  async columnInit() {
+    this.filters = this.columns
+      .filter((c) => !!c.filter)
+      .map((c) => {
+      const { filter, prop } = c;
+      return { filter, prop };
+    });
+    if (this.searchTerm) {
+      await this.searchStart();
+    }
+    if (this.filters.length) {
+      await this.filterStart();
+    }
+    // apply sort
+    const col = this.columns.find((c) => !!c.order);
+    if (!!col) {
+      await this.sortStart(col.order, col.prop);
+    }
+  }
+  /** Split up all incoming rows into 'blocks' split amongst tbody elements.
+   * These can then be hidden / shown to improve performance.
+   */
+  setBlocks() {
+    const dRows = this.store.data.state.rows;
+    if (!dRows.length) {
+      this.blocks = [];
+      return;
+    }
+    // this.ignoreIO = true;
+    let i = 1;
+    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] || { __uuid: '' });
+      if (i % this.perBlock === 0) {
+        // assign a UUID for the whole block
+        // for block diffing
+        blocks.push({ rows, __uuid: math.cyrb53(rows.map((b) => b.__uuid).join()) });
+        rows = [];
+      }
+    }
+    // any leftover rows
+    if (rows.length) {
+      blocks.push({ rows, __uuid: math.cyrb53(rows.map((b) => b.__uuid).join()) });
+    }
+    this.blocks = blocks;
+  }
+  /**
+   * Returns a block render height.
+   * If it's currently active - let auto do it's thing
+   * If we've rendered it before - return that
+   * If all else fails, let's guess it
+   * @param blockIndex
+   * @returns a height string (incl px)
+   */
+  getBlockHeight(blockIndex) {
+    if (this.blockHeights.length) {
+      const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
+      if (cachedBlockHeight)
+        return cachedBlockHeight.height;
+    }
+    const blockLength = this.blocks[blockIndex].rows.length;
+    if (blockLength === this.perBlock && this.measureHeight) {
+      return this.measureHeight;
+    }
+    return this.unitHeight ? this.unitHeight * blockLength : undefined;
+  }
+  /** cache the height for all active blocks for later renders */
+  setBlockHeight() {
+    this.activeBlocks.forEach((blockIndex) => {
+      const el = this.blockElements[blockIndex];
+      if (!el)
+        return;
+      index.readTask(() => {
+        const height = el.getBoundingClientRect().height;
+        // cache height to our block heights array
+        // for subsequent renders
+        const fBhI = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
+        if (fBhI > 0) {
+          this.blockHeights[fBhI] = { height, blockIndex };
+        }
+        else
+          this.blockHeights.push({ height, blockIndex });
+      });
+    });
+  }
+  /** Process slotted content */
+  processSlots() {
+    // see if we have slot content
+    if (!this.caption && !this.host.querySelector('[slot="caption"]')) {
+      console.error('For accessibility you must set a `caption` prop or use the `caption` slot');
+    }
+  }
+  // Component lifecycle
+  async componentWillLoad() {
+    this.scrollParent = findScrollParent(this.host);
+    this.store = await generateStore(this.host, this.columns, this.scrollParent);
+    await this.handleRowsChange();
+    this.processSlots();
+    this.store.data.onChange('rows', () => this.setBlocks());
+    this.setBlocks();
+  }
+  connectedCallback() {
+    this.scrollParent = findScrollParent(this.host);
+  }
+  componentDidLoad() {
+    this.setInitialBlockDimension();
+  }
+  componentShouldUpdate(_newVal, _oldVal, stateName) {
+    // stop double rendering - we use the store for rendering internally
+    // the public facing props are kept in-sync with the store
+    // but we don't want it to cause renders
+    if (['rows', 'columns'].includes(stateName))
+      return false;
+  }
+  componentWillRender() {
+  }
+  componentDidRender() {
+    this.setMeasureElement();
+  }
+  render() {
+    this.blockElements = [];
+    return (index.h(index.Host, null, index.h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), index.h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), index.h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, index.h("nano-progress-bar", { indeterminate: true, class: {
+        [`${CSSNAMESPACE}__progress-bar`]: true,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
+      } }), index.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) }, index.h("caption", { class: {
+        [`${CSSNAMESPACE}__caption`]: true,
+        [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
+      }, id: 'table-caption-' + this.renderId }, index.h("slot", { name: "caption" }, this.caption)), index.h("thead", null, index.h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      index.h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, onColumnDrag: this.colDrag, onColumnDrop: this.colDrop, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
+    ]))), this._loading && !this.blocks.length && (index.h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (index.h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => index.h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (index.h("tr", null, index.h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, index.h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, index.h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (index.h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        this.blockElements.push(tb);
+      }, 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 (index.h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (index.h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+    })) : (index.h("tr", null, index.h("td", { colSpan: this.store.config.state.columns.length, style: {
+        height: this.getBlockHeight(blockIndex) + 'px',
+      } })))))), this.showFooter && (index.h("tfoot", null, index.h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      index.h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
+    ]))))), !!this.blocks.length && (index.h("nano-spinner", { type: "circle", class: {
+        [`${CSSNAMESPACE}__spinner`]: true,
+        [`${CSSNAMESPACE}__spinner--show`]: this._loading,
+      } })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "rows": ["handleRowsChange"],
+    "columns": ["handleColsChange"],
+    "searchTerm": ["handleSearchTermChange"],
+    "virtualTotalItems": ["virtualTotalItemsChangeHandler"]
+  }; }
+};
+Table.style = tableCss;
+
+exports.Table = Table;
+exports.createWorker = createWorker;
+
+//# sourceMappingURL=nano-table-476fe78c.js.map