@nanoporetech-digital/components 3.4.0 → 3.5.1

package/dist/components/nano-table.js

@@ -1,1256 +1,11 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { consoleError, h, Fragment, getElement, getRenderingRef, 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$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './progress-bar.js';
-import { d as defineCustomElement$4 } from './resize-observe.js';
-import { d as defineCustomElement$3 } from './skeleton.js';
-import { d as defineCustomElement$2 } 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 storeSetData(host, rows) {
-  const store = stores.get(host);
-  if (!store)
-    return;
-  // augment data with some internal props
-  rows = rows.map((row, i) => ({
-    ...row,
-    __index: i,
-    __uuid: cyrb53(Object.values(row).join()),
-  }));
-  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.log(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.log(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.log(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 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);
-  return tpl ? (tpl(h, model)) : (h(Fragment, null, model.cellModel.toString()));
-}
-/**
- * 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));
-}
-
-function baseClasses(type, vPinned, toString = false) {
-  const classes = {
-    [`${CSSNAMESPACE}__${type}`]: true,
-    [`${CSSNAMESPACE}__pin`]: !!vPinned,
-    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',
-    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',
-  };
-  if (toString) {
-    let classString = '';
-    Object.entries(classes).forEach(([className, on]) => {
-      if (on)
-        classString += className + ' ';
-    });
-    return classString;
-  }
-  return classes;
-}
-const stickyHIOs = new WeakMap();
-const stickyVIOs = new WeakMap();
-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') {
-      // console.log('refe', store.general.state.host)
-      // TODO - sort these out for RtL
-      positions.end =
-        e.boundingClientRect.right > e.boundingClientRect.width &&
-          !e.isIntersecting;
-    }
-    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);
-}
-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')
-      positions.bottom =
-        e.boundingClientRect.height > e.intersectionRect.height &&
-          !e.isIntersecting;
-    cb(positions);
-  }, {
-    threshold: [1],
-    rootMargin: '0px 100px 0px 100px',
-    root: root === document.scrollingElement ? null : root,
-  });
-  stickyVIOs.set(el, observer);
-  requestAnimationFrame(() => observer.observe(el));
-}
-const TableRow = ({ rowRenderer, rowIndex, row }, children) => {
-  let extraProps = {};
-  if (!row) {
-    const model = rowDataModel(rowIndex);
-    row = model.row;
-  }
-  if (rowRenderer?.rowProperties) {
-    extraProps =
-      rowRenderer.rowProperties({ row: row, rowIndex }) || extraProps;
-  }
-  let pinned;
-  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
-  }
-  const baseProps = { class: baseClasses('tr', pinned) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  return (h("tr", { ...props, key: row.__uuid }, children));
-};
-const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
-  let extraProps = {};
-  if (rowRenderer.rowProperties) {
-    extraProps = rowRenderer.rowProperties() || {};
-  }
-  const pinned = rowRenderer.pinned || null;
-  const baseProps = { class: baseClasses('tr', null) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const tpl = rowRenderer?.template;
-  if (tpl) {
-    let toRender = tpl(h, {
-      renderedRow: h("tr", { ...props }, children),
-    });
-    if (Array.isArray(toRender)) {
-      toRender = utils.map(toRender, (node) => {
-        if (node.vtag === 'tr') {
-          node.vattrs = mergeProperties({ class: baseClasses('tr', null, true) }, node.vattrs);
-          if (!!node.vchildren) {
-            node.vchildren = utils.map(node.vchildren, (cNode) => {
-              if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                  class: baseClasses(cNode.vtag.toString(), pinned, true),
-                  ref: (th) => {
-                    addVObserver(th, pinned, onColumnPinned);
-                  },
-                }, cNode.vattrs);
-              }
-              return cNode;
-            });
-          }
-        }
-        return node;
-      });
-    }
-    return toRender;
-  }
-  return h("tr", { ...props }, children);
-};
-const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned, }) => {
-  function handleColumnOrderClick(e) {
-    let order;
-    switch (column.order) {
-      case 'asc':
-        order = 'desc';
-        break;
-      case 'desc':
-        order = null;
-        break;
-      default:
-        order = 'asc';
-    }
-    onColumnOrderClick(order, column.prop, e.target.closest('th'));
-  }
-  let extraProps = {};
-  if (column.columnProperties) {
-    extraProps = column.columnProperties(column) || extraProps;
-  }
-  const baseProps = {
-    class: {
-      ...baseClasses('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 (column.sortable !== false) {
-    return (h("th", { ...props, "aria-sort": column.order
-        ? column.order === 'asc'
-          ? 'ascending'
-          : 'descending'
-        : 'none', ref: (th) => {
-        if (['end', 'start'].includes(column.pinned))
-          addHObserver(th, column.pinned, onColumnPinned);
-        if (['top', 'bottom'].includes(headRenderer.pinned))
-          addVObserver(th, headRenderer.pinned, onColumnPinned);
-      } },
-      h("button", { class: {
-          [`${CSSNAMESPACE}__order-btn`]: true,
-          [`${CSSNAMESPACE}__cell-content`]: true,
-        }, onClick: handleColumnOrderClick },
-        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" })))));
-  }
-  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);
-    } },
-    h("div", { class: `${CSSNAMESPACE}__cell-content` },
-      colheadFootRender(column),
-      !!column.filter && h("nano-icon", { name: "light/bars-filter" }))));
-};
-const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
-  const content = nestedContent || cellRender(rowIndex, colIndex);
-  if (!content)
-    return h(Fragment, null);
-  const store = fetchStores();
-  const column = store.config.state.columns[colIndex];
-  let CellType = 'td';
-  let props = mergeCellProperties(rowIndex, colIndex, {
-    class: {
-      [`${CSSNAMESPACE}__td`]: true,
-      [`${CSSNAMESPACE}__ordered`]: !!column.order,
-      [`${CSSNAMESPACE}__pin`]: !!column.pinned,
-      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
-      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
-    },
-  });
-  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 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;
-  };
-})();
-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;
-}
-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);
-}
-
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset \"UTF-8\";nano-table{display:block;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--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(--th-padding-top) var(--th-padding-bottom);--foot-th-padding-h:var(--th-padding-start) var(--th-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__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{font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none}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{font-weight:800;border-block-end: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 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}.sm .nano-tbl th[scope=row]{max-width:65vw !important}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s}.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}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width)}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.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}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.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 .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.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 = !!this.store.data.state.rows.length ? l : true;
-    };
-    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;
-    /**
-     * 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 realsies - 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.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.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);
-  }
-  // 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());
-  }
-  // Listeners
-  scrollListener() {
-    // see explanation in `setupBlockIO`
-    const speed = detectScrollSpeed();
-    this.scrollSpeed = speed < 0 ? speed * -1 : speed;
-  }
-  // Logic
-  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();
-      perMark('search', true);
-    }
-    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 `title` prop or use the `caption` slot');
-    }
-  }
-  // Component lifecycle
-  async componentWillLoad() {
-    perMark('init');
-    this.store = await generateStore(this.host, this.columns, this.scrollParent);
-    await this.handleRowsChange();
-    this.processSlots();
-    this.setBlocks();
-    this.store.data.onChange('rows', () => this.setBlocks());
-  }
-  connectedCallback() {
-    readTask(() => (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" }, h("div", { class: `${CSSNAMESPACE}__wrap` }, 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, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), 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.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 }, 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, onColumnOrderClick: this.sortStart }),
-    ]))))), !!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],
-    "_loading": [32],
-    "blocks": [32],
-    "activeBlocks": [32],
-    "measureHeight": [32],
-    "resetSorting": [64],
-    "addSort": [64],
-    "resetFilters": [64],
-    "addFilters": [64]
-  }, [[9, "scroll", "scrollListener"]]]);
-function defineCustomElement$1() {
-  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$6();
-      }
-      break;
-    case "nano-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "nano-resize-observe":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "nano-skeleton":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "nano-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { T as Table, d as defineCustomElement$1 } from './table.js';
 
 const NanoTable = Table;
 const defineCustomElement = defineCustomElement$1;
 
-export { NanoTable, createWorker as c, defineCustomElement };
+export { NanoTable, defineCustomElement };
 
 //# sourceMappingURL=nano-table.js.map