@nanoporetech-digital/components 3.4.0 → 3.5.0

package/dist/components/table.js

@@ -0,0 +1,1539 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { consoleError, getElement, getRenderingRef, h, Fragment, proxyCustomElement, HTMLElement, createEvent, readTask, Host, Build } from '@stencil/core/internal/client';
+import { a as cyrb53 } from './math.js';
+import { d as debounce } from './throttle.js';
+import { c as createStore } from './index2.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
+import { d as defineCustomElement$3 } from './resize-observe.js';
+import { d as defineCustomElement$2 } from './skeleton.js';
+import { d as defineCustomElement$1 } from './spinner.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;
+
+      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) {
+      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 = import('./table.worker.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: createStore({ rows: [] }),
+    config: createStore({ columns }),
+    general: 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) => {
+      // coerce any date type;
+      // Date(), timestamp, valid date string
+      const coerceDate = new Date(row[colName]) ?? null;
+      if (!!coerceDate && Number(coerceDate))
+        row[colName] = Number(coerceDate);
+    });
+    row['__index'] = i;
+    row['__uuid'] = cyrb53(Object.values(row).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?.prop;
+  const rowModel = rows[rowIndex];
+  const cellModel = 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 row = rows[rowIndex];
+  return {
+    row,
+    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 = { ...extra, ...current };
+  // deeper merge
+  // merge classes maps or strings
+  if (extra.class) {
+    if (typeof extra.class === 'object' && typeof props.class === 'object') {
+      props.class = { ...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 = { ...extra.style, ...props.style };
+  }
+  return props;
+}
+/**
+ * Returns the current nano-table's stores.
+ * @returns the current nano-table stores
+ */
+function fetchStores() {
+  return getStore(getElement(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) {
+  const props = { ...defaultProps };
+  const extraPropsFunc = fetchStores().config.state.columns[colIndex]?.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?.colTemplate;
+  return tpl ? (tpl(h, col)) : (h(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;
+}
+/**
+ * Detects the current scroll speed as a number.
+ * Use within a scroll listener
+ */
+const detectScrollSpeed = (() => {
+  let lastPos;
+  let newPos;
+  let timer;
+  let delta;
+  const delay = 60; // in "ms" (higher means lower fidelity )
+  const clear = () => {
+    lastPos = null;
+    delta = 0;
+  };
+  clear();
+  return () => {
+    newPos = window.scrollY;
+    if (lastPos != null)
+      delta = newPos - lastPos;
+    lastPos = newPos;
+    window.clearTimeout(timer);
+    timer = window.setTimeout(clear, delay);
+    return delta;
+  };
+})();
+/**
+ * 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: {
+      ...headerPinClasses('th', 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 h(Fragment, null);
+  props =
+    Number(props.colSpan) > 1
+      ? { ...props, scope: 'colgroup' }
+      : { ...props, scope: 'col' };
+  if (isSortable()) {
+    const sort = column.order
+      ? column.order === 'asc'
+        ? 'ascending'
+        : 'descending'
+      : 'none';
+    props = { ...props, 'aria-sort': sort };
+  }
+  if (isDraggable()) {
+    props = {
+      ...props,
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, column),
+      onDragOver: (e) => e.preventDefault(),
+      onDragEnd: () => handleDragEnd(),
+    };
+  }
+  return (h("th", { ...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() && [
+      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() }),
+      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() ? (h("button", { class: {
+        [`${CSSNAMESPACE}__order-btn`]: true,
+        [`${CSSNAMESPACE}__cell-content`]: true,
+      }, onClick: handleColumnSortClick },
+      colheadFootRender(column),
+      !!column.filter && h("nano-icon", { name: "light/filter" }),
+      !!column.order &&
+        (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))),
+      h("div", { class: `${CSSNAMESPACE}__status-icons` },
+        h("nano-icon", { name: "light/chevron-down" })))) : (h("div", { class: `${CSSNAMESPACE}__cell-content` },
+      colheadFootRender(column),
+      !!column.filter && 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) {
+  const store = fetchStores();
+  const columns = store.config.state.columns;
+  const tpl = columns[colIndex]?.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(h, model)) : (h(Fragment, null, model.cellModel?.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 || cellRender(rowIndex, colIndex);
+  if (!content)
+    return h(Fragment, null);
+  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
+        ? { ...props, scope: 'rowgroup' }
+        : { ...props, scope: 'row' };
+    CellType = 'th';
+  }
+  return (h(CellType
+  // role="gridcell"
+  , { ...props },
+    h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
+};
+
+const TableRow = ({ rowRenderer, rowIndex, row, onColumnPinned }, children, utils) => {
+  let extraProps = {};
+  const TableCell = ({ header }, children) => {
+    const cell = h("div", { class: CSSNAMESPACE + '__cell-content' }, children);
+    return header ? h("th", { scope: "row" }, cell) : h("td", null, cell);
+  };
+  if (!row) {
+    const model = rowDataModel(rowIndex);
+    row = model.row;
+  }
+  if (rowRenderer?.rowProperties) {
+    extraProps = rowRenderer.rowProperties({ row, rowIndex }) || extraProps;
+  }
+  let pinned;
+  if (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?.template;
+  if (tpl) {
+    let toRender = tpl(h, {
+      renderedRow: (h("tr", { ...props, key: row.__uuid }, children)),
+      row,
+      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.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 (h("tr", { ...props, key: row.__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);
+    return header !== false ? h("th", { scope: "col" }, cell) : 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?.template;
+  if (tpl) {
+    let toRender = tpl(h, {
+      renderedRow: h("tr", { ...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 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)}";
+
+function perMark(name, end = false) {
+  if (!Build.isDev)
+    return;
+  if (end) {
+    performance?.mark('end' + name);
+    performance?.measure(name, 'start' + name, 'end' + name);
+    const entries = performance?.getEntriesByName(name);
+    console.log(entries[entries.length ? entries.length - 1 : 0]);
+  }
+  else {
+    performance?.mark('start' + name);
+  }
+}
+let id = 0;
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.nanoTblBlockRendered = createEvent(this, "nanoTblBlockRendered", 7);
+    this.nanoTblReady = createEvent(this, "nanoTblReady", 7);
+    this.nanoTblBeforeSort = createEvent(this, "nanoTblBeforeSort", 7);
+    this.nanoTblAfterSort = createEvent(this, "nanoTblAfterSort", 7);
+    this.nanoTblColDrag = createEvent(this, "nanoTblColDrag", 7);
+    this.nanoTblColDrop = createEvent(this, "nanoTblColDrop", 7);
+    this.nanoTblBeforeFilter = createEvent(this, "nanoTblBeforeFilter", 7);
+    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.renderId = 'tbl-' + id++;
+    this.filters = [];
+    this.currentFilters = '[]';
+    this.currentSort = '';
+    this.blockIos = new WeakMap();
+    this.blockHeights = [];
+    this.unitHeight = 0;
+    // Scroll / IO used for hiding / showing blocks
+    this.ignoreIO = true;
+    this._isReady = false;
+    this.colDrag = (column) => {
+      this.nanoTblColDrag.emit({ column });
+    };
+    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.store.config.state.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;
+      perMark('sort');
+      this.currentSort = order + ':' + column;
+      // doesn't make sense to leave user in place for a sort
+      this.scrollToTop(element);
+      if (this.customSortFn) {
+        try {
+          await this.customSortFn(column, order);
+          this.sortComplete(order, column);
+        }
+        catch (e) {
+          console.warn('custom sort failed', e);
+        }
+        return;
+      }
+      try {
+        await storeSort(this.host, column, order);
+        this.sortComplete(order, column);
+      }
+      catch (e) {
+        console.warn('sort failed', e);
+        this.currentSort = '';
+      }
+      finally {
+        this.loading = false;
+      }
+    };
+    /**
+     * Attaches an intersection observer to each rendered tbody element
+     * shows / hides intersecting blocks' and sets heights for when they're hidden
+     * @param el - the tbody element to observe
+     * @param blockIndex - the rendering tbody we're attaching the IO to
+     */
+    this.setupBlockIO = (el, blockIndex) => {
+      if (!el || this.blockIos.has(el))
+        return;
+      const blockIo = new IntersectionObserver(([ioEntry]) => {
+        if (this.ignoreIO)
+          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 = [
+                blockIndex,
+                blockIndex + 1,
+                Math.max(0, blockIndex - 1),
+              ];
+              this.nanoTblBlockRendered.emit({
+                block: blockIndex,
+                totalBlocks: this.blockElements.length,
+              });
+              requestAnimationFrame(() => this.setBlockHeight());
+            }
+          });
+        }
+      }, {
+        threshold: [0],
+        root: this.scrollParent === document.scrollingElement
+          ? null
+          : this.scrollParent,
+      });
+      blockIo.observe(el);
+      this.blockIos.set(el, blockIo);
+    };
+    this.handleColumnPinned = (positions) => {
+      Object.entries(positions).forEach(([key, applied]) => {
+        this.tableEle.classList.toggle(`${CSSNAMESPACE}__pinned--${key}`, applied);
+      });
+    };
+    this.handleResizeChange = (e) => {
+      this.tableWrapperEle.className = '';
+      this.tableWrapperEle.classList.add(...(e.target.className + ' ' + `${CSSNAMESPACE}__wrap`).split(' '));
+    };
+    this.type = 'table';
+    this.caption = undefined;
+    this.showCaption = false;
+    this._loading = 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 = 60;
+    this.searchTerm = undefined;
+    this.customFilterFn = undefined;
+    this.customSortFn = undefined;
+    this.defaultSort = true;
+    this.defaultColDraggable = false;
+    this.blocks = [];
+    this.activeBlocks = [0, 1, 2];
+    this.measureHeight = 0;
+    this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
+  }
+  /** 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;
+  }
+  set loading(l) {
+    this.debounceSetLoading(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();
+  }
+  /** 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();
+  }
+  // uses the first 'tr' of an active block as our yard stick
+  set measureEle(el) {
+    if (!el)
+      return;
+    this.measureHeight = el.getBoundingClientRect().height;
+    this.unitHeight =
+      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
+  }
+  // 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
+  scrollListener() {
+    // see explanation in `setupBlockIO`
+    const speed = detectScrollSpeed();
+    this.scrollSpeed = speed < 0 ? speed * -1 : speed;
+  }
+  handleReady() {
+    const hash = window.location.hash;
+    if (hash.length > 1) {
+      const idRow = document.querySelector(hash);
+      if (idRow) {
+        idRow.scrollIntoView();
+      }
+    }
+    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 { ...c, order };
+      return { ...c, order: null };
+    });
+    this.nanoTblAfterSort.emit({ column: column, order });
+    perMark('sort', true);
+  }
+  async searchStart() {
+    this.loading = true;
+    const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
+    if (sortEvent.defaultPrevented)
+      return;
+    perMark('search');
+    // 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 });
+      perMark('search', true);
+    }
+    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;
+    perMark('filter');
+    this.currentFilters = JSON.stringify(this.filters);
+    // doesn't make sense to leave user in place for a search
+    this.scrollToTop();
+    if (this.customFilterFn) {
+      try {
+        await this.customFilterFn(this.filters);
+        this.filterComplete();
+      }
+      catch (e) {
+        console.warn('custom filter failed', e);
+        this.currentFilters = '';
+      }
+      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 });
+    perMark('filter', true);
+  }
+  /** Scrolls to the top immediately - used whilst sorting / filtering */
+  scrollToTop(element) {
+    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    const scrollX = this.scrollParent.scrollLeft;
+    this.scrollParent.style.scrollBehavior = 'auto';
+    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
+      this.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;
+  }
+  setMeasureElement() {
+    readTask(() => {
+      this.measureEle = this.blockElements.find((b) => !b?.classList?.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() {
+    if (!this.blockElements?.length)
+      return;
+    perMark('blockDims');
+    const finishResizing = new Promise((resolve) => {
+      readTask(() => {
+        this.setMeasureElement();
+        // find the first active block
+        if (!this.measureEle && !this.unitHeight)
+          resolve();
+        this.blockElements.forEach((el, i) => {
+          if (!el || !el.classList?.contains(`${CSSNAMESPACE}__inactive`)) {
+            if (i === this.blockElements.length - 1)
+              resolve();
+            return;
+          }
+          if (i === this.blockElements.length - 1)
+            resolve();
+        });
+      });
+    });
+    // we're all finished.
+    finishResizing.then(() => {
+      perMark('blockDims', true);
+      perMark('init', true);
+      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() {
+    perMark('setBlocks');
+    this.activeBlocks = [0, 1, 2];
+    this.ignoreIO = true;
+    let i = 1;
+    const l = this.store.data.state.rows.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]);
+      if (i % this.perBlock === 0) {
+        blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+        rows = [];
+      }
+    }
+    if (rows.length)
+      blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+    this.blocks = blocks;
+    perMark('setBlocks', true);
+  }
+  /**
+   * 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.activeBlocks.includes(blockIndex))
+      return undefined;
+    if (this.blockHeights.length) {
+      const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
+      if (cachedBlockHeight)
+        return cachedBlockHeight.height + 'px';
+    }
+    const blockLength = this.blocks[blockIndex].rows.length;
+    if (blockLength === this.perBlock && this.measureHeight) {
+      return this.measureHeight + 'px';
+    }
+    return this.unitHeight ? this.unitHeight * blockLength + 'px' : undefined;
+  }
+  /** cache the height for all active blocks for later renders */
+  setBlockHeight() {
+    readTask(() => {
+      this.activeBlocks.forEach((blockIndex) => {
+        const el = this.blockElements[blockIndex];
+        if (!el)
+          return;
+        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() {
+    perMark('init');
+    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() {
+    perMark('render');
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => (this.ignoreIO = false));
+    this.setMeasureElement();
+    perMark('render', true);
+  }
+  render() {
+    this.blockElements = [];
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined, states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange }), h("div", { class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div) }, h("nano-progress-bar", { indeterminate: true, class: {
+        [`${CSSNAMESPACE}__progress-bar`]: true,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
+      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
+        [`${CSSNAMESPACE}__caption`]: true,
+        [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
+      }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, onColumnPinned: this.handleColumnPinned, onColumnDrag: this.colDrag, onColumnDrop: this.colDrop, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
+    ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))))), !this._loading && !this.blocks.length && (h("tr", null, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found"))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        this.blockElements.push(tb);
+        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(TableRow, { rowRenderer: this.rowRender, row: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
+    })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
+        height: this.getBlockHeight(blockIndex),
+      } }))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned, onColumnSortClick: this.sortStart, defaults: {
+          sortable: this.defaultSort,
+          draggable: this.defaultColDraggable,
+        } }),
+    ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
+        [`${CSSNAMESPACE}__spinner`]: true,
+        [`${CSSNAMESPACE}__spinner--show`]: this._loading,
+      } })))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "rows": ["handleRowsChange"],
+    "columns": ["handleColsChange"],
+    "searchTerm": ["handleSearchTermChange"]
+  }; }
+  static get style() { return tableCss; }
+}, [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],
+    "resetSorting": [64],
+    "addSort": [64],
+    "resetFilters": [64],
+    "addFilters": [64],
+    "removeFilters": [64]
+  }, [[9, "scroll", "scrollListener"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-table", "nano-icon", "nano-progress-bar", "nano-resize-observe", "nano-skeleton", "nano-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "nano-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "nano-resize-observe":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "nano-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Table as T, createWorker as c, defineCustomElement as d };
+
+//# sourceMappingURL=table.js.map