@nanoporetech-digital/components 4.9.4 → 4.10.0

package/dist/nano-components/p-4f260028.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CSSNAMESPACE","isInstanceOf","value","className","C","globalThis","getTransferables","constructor","Object","values","Array","isArray","flatMap","buffer","pendingIds","callbackIds","pending","Map","callbacks","createWorker","workerPath","workerName","workerMsgId","worker","Worker","name","addEventListener","data","workerMsg","id","err","resolve","reject","get","delete","errObj","assign","Error","message","consoleError","forEach","e","createWorkerProxy","exportedMethod","args","Promise","pendingId","i","argLen","length","mainData","set","callbackId","push","postMessage","w","then","colsToWorker","columns","safeColumns","JSON","parse","stringify","c","sortCompareFn","safeCol","find","sc","prop","toString","stores","WeakMap","async","generateStore","host","scrollParent","isReady","store","createStore","rows","config","general","workerId","createWorkerStore","state","use","reset","syncDataToWorker","dispose","syncConfigToWorker","getStore","getDataType","Date","includes","storeSetData","cols","dateCols","filter","col","type","reduce","prev","curr","unknownCols","map","row","colName","coerceDate","_a","Number","cyrb53","join","storeSetConfig","storeSearch","term","workerSearch","console","warn","storeFilter","filters","workerFilter","storeSort","order","workerSort","colDataModel","rowIndex","colIndex","fetchStores","column","rowModel","cellModel","rowDataModel","mergeProperties","current","extra","props","class","style","getElement","getRenderingRef","mergeCellProperties","defaultProps","extraPropsFunc","cellProperties","colheadFootRender","tpl","columnTemplate","h","Fragment","title","stickyHIOs","stickyVIOs","addHObserver","el","pos","cb","root","observer","IntersectionObserver","rootBounds","document","scrollingElement","getBoundingClientRect","positions","start","boundingClientRect","x","scrollLeft","isIntersecting","end","right","width","threshold","rootMargin","observe","once","addVObserver","top","y","scrollTop","target","bottom","height","headerPinClasses","vPinned","classes","classListToStr","classString","entries","on","findScrollParent","element","getComputedStyle","excludeStaticParent","position","overflowRegex","documentElement","parent","parentElement","test","overflow","overflowY","overflowX","isInViewport","percentVisible","r","windowHeight","window","innerHeight","clientHeight","left","Math","floor","arrMove","from","to","arr","newArr","item","splice","draggingCol","draggingColEle","dragEnterEle","draggingParent","TableColHead","headRenderer","onColumnSortClick","onColumnPinned","onColumnDrag","onColumnDrop","defaults","handleDragStart","closest","classList","add","dataTransfer","effectAllowed","setData","innerHTML","handleDragEnd","remove","querySelectorAll","handleDragEnter","preventDefault","stopImmediatePropagation","dropEffect","contains","handleDrop","stopPropagation","this","dataset","toIndex","findIndex","fromIndex","handleColumnSortClick","isSortable","sortable","isDraggable","draggable","extraProps","columnProperties","baseProps","pinned","undefined","content","colSpan","scope","sort","onDragStart","onDragOver","onDragEnd","ref","th","key","onDragEnter","onDrop","onClick","cellRender","cellTemplate","model","d","isNaN","toLocaleDateString","toLocaleTimeString","_b","baseCellClasses","TableCell","nestedContent","Content","CellType","rowHeader","rowSpan","ContentWrap","wrap","autoTooltip","notifyContentFit","onNanoResizeContentFitChange","firstElementChild","disabled","detail","placement","onNanoShow","zIndex","onNanoHide","slot","TableRow","rowRenderer","children","utils","header","cell","rowProperties","template","toRender","renderedRow","__uuid","node","vtag","vkey","vattrs","vchildren","cNode","TableHeadFootRow","tableCss","Table","hostRef","renderId","currentFilters","currentSort","cacheScrollPosition","measureHeight","blockHeights","unitHeight","_isReady","colDrag","nanoTblColDrag","emit","colDrop","fromCol","toCol","dropEvent","nanoTblColDrop","defaultPrevented","sortStart","_loading","sortEvent","nanoTblBeforeSort","scrollToTop","customSortFn","res","sortComplete","blocks","scrollHandler","isActive","scrollY","requestAnimationFrame","cumulativeHeight","blockIndex","blockLen","getBlockHeight","potentialBlocks","max","activeBlocks","setBlockHeight","primaryBlockIndex","handleColumnPinned","applied","tableEle","toggle","handleResizeChange","tableWrapperEle","split","cl","debounceSetLoading","debounce","bind","loading","internalLoading","l","handleRowsChange","columnInit","setInitialBlockDimension","blocksLength","handleSearchTermChange","searchStart","virtualTotalItemsChangeHandler","setBlocks","filterStart","additive","columnNames","f","measureEle","potentialHeight","abs","querySelector","_scrollParent","ele","removeEventListener","passive","setupActiveWatcher","_primaryBlockIndex","nanoTblBlockRendered","block","totalBlocks","blockElements","ready","handleReady","hash","location","idRow","scrollIntoView","nanoTblReady","nanoTblAfterSort","nanoTblBeforeSearch","searchTerm","nanoTblAfterSearch","ff","nanoTblBeforeFilter","customFilterFn","filterComplete","cFilter","nanoTblAfterFilter","scrollBehaviour","scrollBehavior","scrollX","topAnchorEle","setTimeout","setMeasureElement","readTask","b","testForDimensions","dimensionsReady","disconnect","dRows","virtualTotalItems","perBlock","cachedBlockHeight","bh","blockLength","fBhI","processSlots","caption","error","activeWatcherIo","io","onChange","connectedCallback","componentDidLoad","componentShouldUpdate","_newVal","_oldVal","stateName","componentWillRender","componentDidRender","disconnectedCallback","render","Host","a","tabindex","states","onNanoResizeStateChange","div","indeterminate","role","tbl","showCaption","headRender","colModel","defaultSort","defaultColDraggable","keys","_colModel","hidden","tb","rowRender","showFooter","footRender"],"sources":["./src/components/table/table.constants.ts","@worker-helper","./src/components/table/table.store.ts","./src/components/table/table.utils.tsx","./src/components/table/table.header.tsx","./src/components/table/table.cell.tsx","./src/components/table/table.row.tsx","./src/components/table/table.scss?tag=nano-table","./src/components/table/table.tsx"],"sourcesContent":["export const CSSNAMESPACE = 'nano-tbl';\n","\nimport { consoleError } from '@stencil/core/internal';\n\n\nconst isInstanceOf = (value, className) => {\n  const C = globalThis[className];\n  return C != null && value instanceof C;\n}\nconst getTransferables = (value) => {\n  if (value != null) {\n  if (\n    isInstanceOf(value, \"ArrayBuffer\") ||\n    isInstanceOf(value, \"MessagePort\") ||\n    isInstanceOf(value, \"ImageBitmap\") ||\n    isInstanceOf(value, \"OffscreenCanvas\")\n  ) {\n    return [value];\n  }\n  if (typeof value === \"object\") {\n    if (value.constructor === Object) {\n    value = Object.values(value);\n    }\n    if (Array.isArray(value)) {\n    return value.flatMap(getTransferables);\n    }\n    return getTransferables(value.buffer);\n  }\n  }\n  return [];\n};\n\nlet pendingIds = 0;\nlet callbackIds = 0;\nconst pending = new Map();\nconst callbacks = new Map();\n\nexport const createWorker = (workerPath, workerName, workerMsgId) => {\n  const worker = new Worker(workerPath, {name:workerName});\n\n  worker.addEventListener('message', ({data}) => {\n  if (data) {\n    const workerMsg = data[0];\n    const id = data[1];\n    const value = data[2];\n\n    if (workerMsg === workerMsgId) {\n    const err = data[3];\n    const [resolve, reject, callbackIds] = pending.get(id);\n    pending.delete(id);\n\n    if (err) {\n      const errObj = (err.isError)\n      ? Object.assign(new Error(err.value.message), err.value)\n      : err.value;\n\n      consoleError(errObj);\n      reject(errObj);\n    } else {\n      if (callbackIds) {\n      callbackIds.forEach(id => callbacks.delete(id));\n      }\n      resolve(value);\n    }\n    } else if (workerMsg === workerMsgId + '.cb') {\n    try {\n      callbacks.get(id)(...value);\n    } catch (e) {\n      consoleError(e);\n    }\n    }\n  }\n  });\n\n  return worker;\n};\n\nexport const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (\n  (...args) => new Promise((resolve, reject) => {\n  let pendingId = pendingIds++;\n  let i = 0;\n  let argLen = args.length;\n  let mainData = [resolve, reject];\n  pending.set(pendingId, mainData);\n\n  for (; i < argLen; i++) {\n    if (typeof args[i] === 'function') {\n    const callbackId = callbackIds++;\n    callbacks.set(callbackId, args[i]);\n    args[i] = [workerMsgId + '.cb', callbackId];\n    (mainData[2] = mainData[2] || []).push(callbackId);\n    }\n  }\n  const postMessage = (w) => (\n    w.postMessage(\n    [workerMsgId, pendingId, exportedMethod, args],\n    getTransferables(args)\n    )\n  );\n  if (worker.then) {\n    worker.then(postMessage);\n  } else {\n    postMessage(worker);\n  }\n  })\n);\n","import { createStore, ObservableMap } from '@stencil/store';\nimport { cyrb53 } from '../../utils/math';\nimport {\n  createWorkerStore,\n  syncConfigToWorker,\n  syncDataToWorker,\n  workerFilter,\n  workerSearch,\n  workerSort,\n} from './table.worker';\nimport type { TableTypes } from '../../interface';\n\nexport interface TableStores {\n  data: ObservableMap<{ rows: TableTypes.NanoTable['rows'] }>;\n  config: ObservableMap<{ columns: TableTypes.NanoTable['columns'] }>;\n  general: ObservableMap<{\n    workerId: string;\n    scrollParent: HTMLElement;\n    host: HTMLNanoTableElement;\n    isReady: boolean;\n    isActive?: boolean;\n  }>;\n}\n\nfunction colsToWorker(columns: TableTypes.NanoTable['columns']) {\n  const safeColumns: Partial<TableTypes.ColumnConfig>[] = JSON.parse(\n    JSON.stringify(columns)\n  );\n  columns.forEach((c) => {\n    if (!!c.sortCompareFn) {\n      const safeCol = safeColumns.find((sc) => sc.prop === c.prop);\n      safeCol.sortCompareFn = c.sortCompareFn.toString();\n    }\n  });\n  return safeColumns;\n}\n\nconst stores: WeakMap<HTMLElement, TableStores> = new WeakMap();\n\nexport async function generateStore(\n  host: HTMLNanoTableElement,\n  columns: TableTypes.NanoTable['columns'],\n  scrollParent: HTMLElement,\n  isReady: boolean\n) {\n  const store: TableStores = {\n    data: createStore({ rows: [] }),\n    config: createStore({ columns }),\n    general: createStore({ workerId: null, scrollParent, host, isReady }),\n  };\n\n  const id = await createWorkerStore(\n    store.data.state.rows,\n    colsToWorker(store.config.state.columns)\n  );\n  store.general.state.workerId = id;\n  stores.set(host, store);\n\n  // sync data from our store to our worker\n\n  store.data.use({\n    reset: () => {\n      if (store.general.state.workerId)\n        syncDataToWorker(store.general.state.workerId, null);\n    },\n    dispose: () => {\n      if (store.general.state.workerId)\n        syncDataToWorker(store.general.state.workerId, null);\n    },\n  });\n  store.config.use({\n    reset: () => {\n      if (store.general.state.workerId)\n        syncConfigToWorker(store.general.state.workerId, null);\n    },\n    dispose: () => {\n      if (store.general.state.workerId)\n        syncConfigToWorker(store.general.state.workerId, null);\n    },\n  });\n  return store;\n}\n\nexport function getStore(host: HTMLElement) {\n  return stores.get(host);\n}\n\nfunction getDataType(value: any): TableTypes.ColumnType {\n  if (value instanceof Date) {\n    return 'date';\n  }\n  if (['number', 'string', 'boolean'].includes(typeof value)) {\n    return typeof value as 'string' | 'number' | 'boolean';\n  }\n  return 'unknown';\n}\n\nexport function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]) {\n  const store = stores.get(host);\n  if (!store) return;\n\n  const cols = store.config.state.columns;\n  const dateCols: (keyof TableTypes.RowData)[] = cols\n    .filter((col) => col.type === 'date')\n    .reduce((prev, curr) => {\n      return [...prev, curr.prop];\n    }, []);\n  const unknownCols: TableTypes.RowData[] = cols.filter((col) => !col.type);\n\n  // augments data with some internal props.\n  // discern unknown column types\n  // convert dates to numbers for worker\n  rows = rows.map((row, i) => {\n    // try our best to discern the column type (from first row) if unset\n    if (unknownCols.length && i === 0) {\n      store.config.state.columns = cols.map((col) => {\n        if (unknownCols.includes(col) && row[col.prop] && !col.type) {\n          col.type = getDataType(row[col.prop]);\n          if (col.type === 'date') dateCols.push(col.prop);\n        }\n        return col;\n      });\n    }\n\n    // convert date columns into numbers to send to our worker\n    dateCols.forEach((colName) => {\n      // coerce any date type;\n      // Date(), timestamp, valid date string\n      const coerceDate = new Date(row[colName]) ?? null;\n      if (!!coerceDate && Number(coerceDate)) row[colName] = Number(coerceDate);\n    });\n\n    row['__index'] = i;\n    row['__uuid'] = cyrb53(cols.map((c) => row[c.prop]).join());\n\n    return row;\n  });\n  store.data.state.rows = rows;\n\n  if (store.general.state.workerId)\n    return syncDataToWorker(store.general.state.workerId, rows);\n}\n\nexport function storeSetConfig(\n  host: HTMLElement,\n  columns: TableTypes.ColumnConfig[]\n) {\n  const store = stores.get(host);\n  if (!store) return;\n\n  store.config.state.columns = columns;\n\n  if (store.general.state.workerId)\n    return syncConfigToWorker(\n      store.general.state.workerId,\n      colsToWorker(columns)\n    );\n}\n\nexport async function storeSearch(host: HTMLElement, term: string) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerSearch(\n      store.general.state.workerId,\n      term\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n\nexport async function storeFilter(\n  host: HTMLElement,\n  filters: TableTypes.Filter[]\n) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerFilter(\n      store.general.state.workerId,\n      filters\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n\nexport async function storeSort(\n  host: HTMLNanoTableElement,\n  prop: TableTypes.Prop,\n  order: TableTypes.Order\n) {\n  const store = stores.get(host);\n  if (!store || !store.general.state.workerId) return;\n\n  try {\n    store.data.state.rows = await workerSort(\n      store.general.state.workerId,\n      prop,\n      order\n    );\n  } catch (e) {\n    console.warn(e);\n  }\n}\n","import { getRenderingRef, getElement, VNode, h, Fragment } from '@stencil/core';\nimport { getStore } from './table.store';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\ntype ValidRenderTypes = 'tr' | 'th' | 'td';\n\n/**\n * Get a model object for custom cell / property renderers.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns a model object which will be passed to custom renderers\n */\nexport function colDataModel(\n  rowIndex: number,\n  colIndex: number\n): TableTypes.RenderModel {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const rows = store.data.state.rows;\n\n  const column = columns[colIndex];\n  const prop: TableTypes.ColumnProp | undefined = column?.prop;\n  const rowModel = rows[rowIndex];\n  const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';\n\n  return {\n    prop,\n    cellModel,\n    column,\n    rowIndex,\n    rowModel,\n  };\n}\n\n/**\n * Get a model object for custom row renderers.\n * @param rowIndex\n * @returns a model object passed to custom row renderers\n */\nexport function rowDataModel(rowIndex: number): TableTypes.RowDataSchemaModel {\n  const store = fetchStores();\n  const rows = store.data.state.rows;\n  const rowModel = rows[rowIndex];\n\n  return {\n    rowModel,\n    rowIndex,\n  };\n}\n\n/**\n * Merges 2 objects of properties together\n * @param current - property object\n * @param extra - additional object property\n * @returns - merged properties that can be applied to a node\n */\nexport function mergeProperties<\n  T extends TableTypes.CellProps | TableTypes.CellProps\n>(current: T, extra: T) {\n  if (!extra) return current;\n\n  // top level merge\n  const props: T = { ...extra, ...current };\n\n  // deeper merge\n  // merge classes maps or strings\n  if (extra.class) {\n    if (typeof extra.class === 'object' && typeof props.class === 'object') {\n      props.class = { ...extra.class, ...props.class };\n    } else if (\n      typeof extra.class === 'string' &&\n      typeof props.class === 'object'\n    ) {\n      props.class[extra.class] = true;\n    } else if (typeof props.class === 'string') {\n      props.class += ' ' + extra.class;\n    }\n  }\n  // merge style\n  if (extra.style) {\n    props.style = { ...extra.style, ...props.style };\n  }\n  return props;\n}\n\n/**\n * Returns the current nano-table's stores.\n * @returns the current nano-table stores\n */\nexport function fetchStores() {\n  return getStore(getElement(getRenderingRef()));\n}\n\n/**\n * Merges any defined cell properties with properties\n * required by `nano-table` functionality\n * @param rowIndex - the current row index being rendered\n * @param colIndex = the current column index being rendered\n * @param defaultProps - default properties required by `nano-table`\n * @returns - the merged properties that will be applied to a node\n */\nexport function mergeCellProperties(\n  rowIndex: number,\n  colIndex: number,\n  defaultProps: TableTypes.CellProps\n): TableTypes.CellProps {\n  const props: TableTypes.CellProps = { ...defaultProps };\n  const extraPropsFunc =\n    fetchStores().config.state.columns[colIndex]?.cellProperties;\n  if (!extraPropsFunc) return props;\n\n  const data = colDataModel(rowIndex, colIndex);\n  const extra = extraPropsFunc(data);\n  if (!extra) return props;\n\n  return mergeProperties(props, extra);\n}\n\n/**\n * Renders a table header (within a thead) using a custom template if set.\n * @param col - the current column config object\n * @returns - a JSX node\n */\nexport function colheadFootRender(col: TableTypes.ColumnConfig): VNode {\n  const tpl = col?.columnTemplate;\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, col)\n  ) : (\n    <Fragment>{col.title}</Fragment>\n  );\n}\n\nconst stickyHIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\nconst stickyVIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n  new WeakMap();\n\n/**\n * Adds element to Intersection Observer. Fires when element changes on the x axis\n * @param el - an element to observe\n * @param pos - the edge to watch (start or end)\n * @param cb - callback when an intersection state changes.\n */\nexport function addHObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: TableTypes.PinnedCb\n) {\n  if (stickyHIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const rootBounds =\n        e.rootBounds || document.scrollingElement.getBoundingClientRect();\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'start') {\n        positions.start =\n          e.boundingClientRect.x - (rootBounds.x + root.scrollLeft) < 0 &&\n          !e.isIntersecting;\n      }\n      if (pos === 'end') {\n        // TODO - sort these out for RtL\n        positions.end =\n          e.boundingClientRect.right > e.boundingClientRect.width &&\n          !e.isIntersecting;\n      }\n      if (!!cb) cb(positions);\n    },\n    {\n      threshold: [1],\n      rootMargin: '1px 0px 100px 0px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyHIOs.set(el, observer);\n\n  if (store.general.state.isReady) {\n    observer.observe(el);\n  } else {\n    store.general.state.host.addEventListener(\n      'nanoTblReady',\n      () => {\n        observer.observe(el);\n      },\n      { once: true }\n    );\n  }\n}\n\n/**\n * Adds element to Intersection Observer. Fires when element changes on the y axis\n * @param el - an element to observe\n * @param pos - the edge to watch (start or end)\n * @param cb - callback when an intersection state changes.\n */\nexport function addVObserver(\n  el: HTMLTableCellElement,\n  pos: TableTypes.Position,\n  cb: TableTypes.PinnedCb\n) {\n  if (stickyVIOs.get(el)) return;\n\n  const store = fetchStores();\n  const root = store.general.state.scrollParent;\n\n  const observer = new IntersectionObserver(\n    ([e]) => {\n      const rootBounds =\n        e.rootBounds || document.scrollingElement.getBoundingClientRect();\n      const positions: { [key in TableTypes.Position]?: boolean } = {};\n      if (pos === 'top') {\n        positions.top =\n          e.boundingClientRect.y - (rootBounds.y + root.scrollTop) < 0 &&\n          !e.isIntersecting;\n      }\n      if (pos === 'bottom') {\n        const boundingClientRect = e.target.getBoundingClientRect();\n        positions.bottom =\n          boundingClientRect.height + boundingClientRect.y >\n            rootBounds.height && !e.isIntersecting;\n      }\n      if (!!cb) cb(positions);\n    },\n    {\n      threshold: [1],\n      rootMargin: '0px 100px 0px 100px',\n      root: root === document.scrollingElement ? null : root,\n    }\n  );\n  stickyVIOs.set(el, observer);\n\n  if (store.general.state.isReady) {\n    observer.observe(el);\n  } else {\n    store.general.state.host.addEventListener(\n      'nanoTblReady',\n      () => {\n        observer.observe(el);\n      },\n      { once: true }\n    );\n  }\n}\n\n/**\n * Renders a class string or map for pinned classes on the v axis.\n * @param type - element tagName\n * @param vPinned - whether element is currently pinned vertically to top or bottom\n * @param toString - render as a string (defaults to class map)\n * @returns a class string or class map\n */\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: false\n): { [key: string]: boolean };\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString?: true\n): string;\nexport function headerPinClasses(\n  type: ValidRenderTypes,\n  vPinned?: TableTypes.Position,\n  toString = false\n): { [key: string]: boolean } | string {\n  const classes = {\n    [`${CSSNAMESPACE}__${type}`]: true,\n    [`${CSSNAMESPACE}__pin`]: !!vPinned,\n    [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',\n    [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n}\n\n/**\n * Turns a class map {'string': boolean} to class string\n * @param classes - the class map to convert\n * @returns a class string\n */\nexport function classListToStr(classes: { [key: string]: boolean }): string {\n  let classString = '';\n  Object.entries(classes).forEach(([className, on]) => {\n    if (on) classString += className + ' ';\n  });\n  return classString;\n}\n\n/**\n * Detects the current scroll speed as a number.\n * Use within a scroll listener\n */\nexport const detectScrollSpeed = (() => {\n  let lastPos: number;\n  let newPos: number;\n  let timer: number;\n  let delta: number;\n  const delay = 60; // in \"ms\" (higher means lower fidelity )\n\n  const clear = () => {\n    lastPos = null;\n    delta = 0;\n  };\n  clear();\n\n  return () => {\n    newPos = window.scrollY;\n    if (lastPos != null) delta = newPos - lastPos;\n    lastPos = newPos;\n    window.clearTimeout(timer);\n    timer = window.setTimeout(clear, delay);\n    return delta;\n  };\n})();\n\n/**\n * Attempts to find the closes scrolling parental element\n * @param element - the element from which to traverse up the DOM\n * @returns - the closest scrolling parental element\n */\nexport function findScrollParent(element: HTMLElement) {\n  let style = getComputedStyle(element);\n  const excludeStaticParent = style.position === 'absolute';\n  const overflowRegex = /(auto|scroll)/;\n\n  if (style.position === 'fixed') return document.documentElement;\n  for (let parent = element; (parent = parent.parentElement); ) {\n    style = getComputedStyle(parent);\n    if (excludeStaticParent && style.position === 'static') {\n      continue;\n    }\n    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))\n      return parent;\n  }\n  return document.documentElement;\n}\n\n/**\n * Checks whether an element is currently viewable within the viewport\n * @param el - element to check\n * @param percentVisible - the percentage of the element that should be within the viewport\n * @returns true if the element's area percentage is visible\n */\nexport function isInViewport(el: Element, percentVisible = 100) {\n  const r = el.getBoundingClientRect();\n  const windowHeight =\n    window.innerHeight || document.documentElement.clientHeight;\n\n  if (\n    !r.bottom &&\n    !r.top &&\n    !r.left &&\n    !r.right &&\n    !r.height &&\n    !r.width &&\n    !r.x &&\n    !r.y\n  )\n    return false;\n\n  return !(\n    Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <\n      percentVisible ||\n    Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <\n      percentVisible\n  );\n}\n\n/**\n * Immutable array re-order\n * @param from - the index to move from\n * @param to - the index to move to\n * @param arr - the array to re-order\n * @returns - a new, re-orderd array\n */\nexport function arrMove(from: number, to: number, arr: any[]) {\n  const newArr = [...arr];\n  const item = newArr.splice(from, 1)[0];\n  newArr.splice(to, 0, item);\n  return newArr;\n}\n","import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  fetchStores,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\nlet draggingCol: TableTypes.ColumnConfig;\nlet draggingColEle: HTMLTableCellElement;\nlet dragEnterEle: HTMLElement;\nlet draggingParent: HTMLTableRowElement;\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;\n  onColumnDrop?: (\n    fromColumn: TableTypes.Prop,\n    toColumn: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  defaults: { draggable?: boolean; sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  onColumnDrag,\n  onColumnDrop,\n  defaults,\n}) => {\n  const store = fetchStores();\n\n  // Drag to re-order columns handling\n\n  function handleDragStart(e: DragEvent, column: TableTypes.ColumnConfig) {\n    draggingCol = column;\n    draggingColEle = dragEnterEle = e.target as HTMLTableCellElement;\n    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);\n\n    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);\n\n    e.dataTransfer.effectAllowed = 'move';\n    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);\n\n    onColumnDrag(column.prop, draggingColEle);\n  }\n\n  function handleDragEnd() {\n    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n\n    draggingColEle = null;\n    draggingCol = null;\n    draggingParent = null;\n    dragEnterEle = null;\n  }\n\n  function handleDragEnter(e: DragEvent) {\n    if (dragEnterEle === e.target) return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    e.dataTransfer.dropEffect = 'move';\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n    dragEnterEle = e.target as HTMLElement;\n\n    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {\n      e.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);\n  }\n\n  function handleDrop(this: HTMLElement, e: DragEvent) {\n    e.stopPropagation();\n\n    const { colName } = this.dataset as { colName: keyof TableTypes.RowData };\n    if (colName === draggingCol.prop) return;\n\n    const cols = store.config.state.columns;\n    let toIndex = cols.findIndex((col) => col.prop === colName);\n    const fromIndex = cols.findIndex((col) => col === draggingCol);\n\n    if (\n      toIndex < fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`)\n    )\n      toIndex++;\n    if (\n      toIndex > fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`)\n    )\n      toIndex--;\n    if (toIndex === fromIndex) return;\n\n    onColumnDrop(\n      draggingCol.prop,\n      store.config.state.columns[toIndex].prop,\n      draggingColEle\n    );\n  }\n\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  function isDraggable() {\n    return (\n      (!!defaults.draggable && column.draggable !== false) ||\n      (!defaults.draggable && column.draggable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  if (isDraggable()) {\n    props = {\n      ...props,\n      draggable: true,\n      onDragStart: (e) => handleDragStart(e, column),\n      onDragOver: (e) => e.preventDefault(),\n      onDragEnd: () => handleDragEnd(),\n    };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isDraggable() && [\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--start`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--end`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n      ]}\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n","import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  classListToStr,\n  colDataModel,\n  fetchStores,\n  mergeCellProperties,\n} from './table.utils';\nimport type { NanoResizeObserveCustomEvent, TableTypes } from '../../interface';\n\n// TABLE CELL\n// (tbody > tr > td, tbody > tr > th)\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const tpl = columns[colIndex]?.cellTemplate;\n  const model = colDataModel(rowIndex, colIndex);\n\n  if (!!model.cellModel && columns[colIndex].type === 'date') {\n    const d = new Date(model.cellModel);\n    if (d instanceof Date && !isNaN(d as any)) {\n      model.cellModel = !tpl\n        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(\n            model.cellModel\n          ).toLocaleTimeString()}`\n        : d;\n    }\n  }\n\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n  ) : model.cellModel !== undefined && model.cellModel !== null ? (\n    <Fragment>{model.cellModel?.toString()}</Fragment>\n  ) : (\n    ''\n  );\n}\n\nexport const baseCellClasses = (\n  colIndex: number,\n  toString: boolean = false\n) => {\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n\n  const classes = {\n    [`${CSSNAMESPACE}__td`]: true,\n    [`${CSSNAMESPACE}__ordered`]: !!column.order,\n    [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n  nestedContent?: () => VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n  nestedContent,\n}) => {\n  const Content = () =>\n    nestedContent\n      ? nestedContent()\n      : cellRender(rowIndex, colIndex) || (\n          <span class=\"placeholder\">&nbsp;</span>\n        );\n\n  let CellType = 'td';\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: baseCellClasses(colIndex),\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.CellProps).rowSpan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  const ContentWrap = (props) => (\n    <div\n      {...props}\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,\n      }}\n    >\n      <Content />\n    </div>\n  );\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      {column.autoTooltip && !column.wrap ? (\n        <nano-resize-observe\n          notifyContentFit=\"x\"\n          onNanoResizeContentFitChange={(\n            e: NanoResizeObserveCustomEvent<{ x: boolean }>\n          ) =>\n            ((e.target.firstElementChild as HTMLNanoTooltipElement).disabled =\n              e.detail.x)\n          }\n        >\n          <nano-tooltip\n            disabled\n            placement=\"top\"\n            onNanoShow={(e) =>\n              ((e.target.closest(CellType) as HTMLElement).style.zIndex = '100')\n            }\n            onNanoHide={(e) =>\n              ((e.target.closest(CellType) as HTMLElement).style.zIndex = '')\n            }\n          >\n            <ContentWrap />\n            <span slot=\"content\">\n              <Content />\n            </span>\n          </nano-tooltip>\n        </nano-resize-observe>\n      ) : (\n        <ContentWrap />\n      )}\n    </CellType>\n  );\n};\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport {\n  addHObserver,\n  addVObserver,\n  headerPinClasses,\n  mergeProperties,\n  rowDataModel,\n} from './table.utils';\nimport { baseCellClasses } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\n// TABLE ROWS\n// (thead > tr, tfoot > tr, tr)\n\ntype TableRowCellHelperProps = { header: boolean; wrap: boolean };\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex: number;\n  rowModel: TableTypes.RowData;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, rowModel, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n\n  const TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n    { header, wrap },\n    children\n  ): VNode => {\n    const cell = (\n      <div\n        class={{\n          [`${CSSNAMESPACE}__cell-content`]: true,\n          [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n        }}\n      >\n        {children}\n      </div>\n    );\n    return header ? <th scope=\"row\">{cell}</th> : <td>{cell}</td>;\n  };\n\n  if (!rowModel) {\n    const model = rowDataModel(rowIndex);\n    rowModel = model.rowModel;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;\n  }\n\n  let pinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    pinned = rowRenderer.pinned();\n  }\n\n  const baseProps = { class: headerPinClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: (\n          <tr {...props} key={rowModel.__uuid}>\n            {children}\n          </tr>\n        ),\n        rowModel,\n        rowIndex,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node, i) => {\n        if (node.vtag === 'tr') {\n          if (!node.vkey) node.vkey = `${rowModel.__uuid}_${i}`;\n\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode, i) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class:\n                      headerPinClasses(\n                        cNode.vtag.toString() as 'th' | 'td',\n                        pinned,\n                        true\n                      ) + baseCellClasses(i, true),\n                    ref: (th: HTMLTableCellElement) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return (\n    <tr {...props} key={rowModel.__uuid}>\n      {children}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n    { header, wrap },\n    children\n  ): VNode => {\n    const cell = (\n      <div\n        class={{\n          [`${CSSNAMESPACE}__cell-content`]: true,\n          [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n        }}\n      >\n        {children}\n      </div>\n    );\n    return header !== false ? <th scope=\"col\">{cell}</th> : <td>{cell}</td>;\n  };\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: headerPinClasses('tr', null) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: <tr {...props}>{children}</tr>,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: headerPinClasses(\n                      cNode.vtag.toString() as 'th' | 'td',\n                      pinned,\n                      true\n                    ),\n                    ref: (th) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n","@use '../../global/style/utilities/globals' as t;\n\nnano-table {\n  /**\n   * @prop --max-col-width: Default 200px;\n\n   * @prop --color: Deafults to var(--nano-color-mediumgrey, #68767e);\n   * @prop --font-size: Deafults to 0.87rem;\n   * @prop --cell-line-height: Deafults to 1.5;\n\n   * @prop --border-color: Deafults to var(--nano-color-palegrey, #b5aea7);\n   * @prop --border-style: Deafults to thin solid var(--border-color);\n   * @prop --border-tint-color: Deafults to var(--nano-color-blue, #90c6e7);\n   * @prop --border-tint-style: Deafults to 2px solid var(--border-tint-color);\n\n   * @prop --cell-bg-rgb: Deafults to var(--nano-color-white-rgb, 255 255 255);\n   * @prop --head-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --foot-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --th-row-bg-rgb: Deafults to var(--cell-bg-rgb);\n   * @prop --ordered-bg-rgb: Deafults to var(--nano-color-offwhite-rgb, 249 249 251);\n\n   * @prop --td-padding-start: Deafults to 0.625rem;\n   * @prop --td-padding-end: Deafults to 0.625rem;\n   * @prop --td-padding-top: Deafults to 0.5rem;\n   * @prop --td-padding-bottom: Deafults to 0.4125rem;\n\n   * @prop --th-padding-start: Deafults to 0.625rem;\n   * @prop --th-padding-end: Deafults to 0.625rem;\n   * @prop --th-padding-top: Deafults to 0.875rem;\n   * @prop --th-padding-bottom: Deafults to 0.6875rem;\n\n   * @prop --td-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);\n   * @prop --td-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);\n\n   * @prop --th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);\n   * @prop --th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);\n\n   * @prop --foot-th-padding-v: Deafults to var(--td-padding-top) var(--td-padding-bottom);\n   * @prop --foot-th-padding-h: Deafults to var(--td-padding-start) var(--td-padding-end);\n\n   * @prop --head-th-padding-v: Deafults to var(--th-padding-top) var(--th-padding-bottom);\n   * @prop --head-th-padding-h: Deafults to var(--th-padding-start) var(--th-padding-end);\n\n   * @prop --bookend-col-padding: Deafults to 2rem;\n  */\n\n  display: block;\n  width: 100%;\n\n  // general\n  --max-col-width: clamp(200px, 500px, 50vw);\n\n  // text\n  --color: var(--nano-color-mediumgrey, #68767e);\n  --font-size: 0.87rem;\n  --cell-line-height: 1.5;\n  --thead-font-size: 0.95rem;\n  --thead-color: #455560;\n  --tfoot-color: #455560;\n\n  // borders\n  --border-color: #dddbda;\n  --border-style: thin solid var(--border-color);\n  --border-tint-color: #0084a9;\n  --border-tint-style: 3px solid var(--border-tint-color);\n\n  // backgrounds\n  --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);\n  --head-bg-rgb: 250 250 249;\n  --foot-bg-rgb: var(--head-bg-rgb);\n  --th-row-bg-rgb: var(--cell-bg-rgb);\n  --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);\n\n  // spacing\n  --td-padding-start: 0.625rem;\n  --td-padding-end: 0.625rem;\n  --td-padding-top: 0.5rem;\n  --td-padding-bottom: 0.4125rem;\n  --th-padding-start: 0.625rem;\n  --th-padding-end: 0.625rem;\n  --th-padding-top: 0.875rem;\n  --th-padding-bottom: 0.6875rem;\n  --td-padding-v: var(--td-padding-top) var(--td-padding-bottom);\n  --td-padding-h: var(--td-padding-start) var(--td-padding-end);\n  --th-padding-v: var(--th-padding-top) var(--th-padding-bottom);\n  --th-padding-h: var(--th-padding-start) var(--th-padding-end);\n  --foot-th-padding-v: var(--td-padding-top) var(--td-padding-bottom);\n  --foot-th-padding-h: var(--td-padding-start) var(--td-padding-end);\n  --head-th-padding-v: var(--th-padding-top) var(--th-padding-bottom);\n  --head-th-padding-h: var(--th-padding-start) var(--th-padding-end);\n  --bookend-col-padding: 2rem;\n}\n\n.nano-tbl {\n  $base: &;\n\n  color: var(--color);\n  text-align: start;\n  width: 100%;\n  font-size: var(--font-size);\n  border-spacing: 0 0;\n  border-collapse: separate;\n  background: rgb(var(--cell-bg-rgb));\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n\n  &__wrap {\n    display: table;\n    min-width: 100%;\n    // container-type: inline-size;\n  }\n\n  &__top-anchor {\n    @include t.visually-hide;\n\n    position: relative;\n  }\n\n  &__ordered {\n    background-color: var(--ordered-bg);\n    border-inline-start: var(--border-style);\n    border-inline-end: var(--border-style);\n  }\n\n  // drag to re-order\n\n  &__drag-mask {\n    display: none;\n    position: absolute;\n    inset-block: -2px -2px;\n    z-index: 10;\n    opacity: 0;\n    transition: 0.2s ease opacity;\n\n    &--start {\n      width: calc(50% + 2px);\n      inset-inline-start: -2px;\n      border-inline-start: 2px dashed var(--border-tint-color);\n    }\n\n    &--end {\n      width: 50%;\n      inset-inline-end: 0;\n      border-inline-end: 2px dashed var(--border-tint-color);\n    }\n\n    &--active {\n      opacity: 1;\n    }\n\n    #{$base}__dragging & {\n      display: block;\n    }\n  }\n\n  &__drag--start {\n    opacity: 0.4;\n  }\n\n  &__dragging {\n    #{$base}__td,\n    #{$base}__th {\n      cursor: no-drop;\n\n      #{$base}__cell-content {\n        pointer-events: none;\n      }\n    }\n  }\n\n  &__order-btn {\n    padding: 0;\n    border: none;\n    outline: none;\n    font: inherit;\n    background: none;\n    appearance: none;\n    color: inherit;\n    display: flex;\n    gap: 10px;\n    align-items: center;\n    width: 100%;\n  }\n\n  &__status-icons {\n    margin-inline: auto 10px;\n    display: flex;\n    gap: 10px;\n  }\n\n  &__progress-bar {\n    font-size: 0.2rem;\n    position: sticky;\n    inset-block-start: 0;\n    inset-inline: 0;\n    z-index: 10;\n    transition: scale 0.25s;\n    transform: scale(0);\n    width: 100%;\n    height: 0;\n\n    &--show {\n      transform: scale(1);\n      height: auto;\n    }\n  }\n\n  &__caption {\n    &--hide {\n      @include t.visually-hide;\n    }\n  }\n\n  // Shared styles in th, td across thead / tbody / tfoot\n\n  &__td,\n  &__th {\n    line-height: var(--cell-line-height);\n    text-align: start;\n    border-block-start: var(--border-style);\n    max-width: var(--max-col-width);\n    background-color: rgb(var(--cell-bg-rgb));\n\n    // @container (min-width: 700px) {\n    //   color: red !important;\n    // }\n\n    tbody:first-of-type tr:first-child & {\n      border-block-start: none;\n    }\n\n    tbody:last-of-type tr:last-child & {\n      border-block-end: var(--border-style);\n    }\n\n    // 'bookend' (larger) padding on larger screens\n    .md & {\n      &:first-child #{$base}__cell-content {\n        padding-inline-start: var(--bookend-col-padding);\n      }\n\n      &:last-child #{$base}__cell-content {\n        padding-inline-end: var(--bookend-col-padding);\n      }\n    }\n\n    // force override of bookend on small screens css media\n    // queries are faster than the breakpoints from `nano-resize-observer`\n    @include t.media-breakpoint-down('md') {\n      &:first-child #{$base}__cell-content {\n        padding-inline-start: var(--td-padding-start) !important;\n      }\n\n      &:last-child #{$base}__cell-content {\n        padding-inline-end: var(--td-padding-end) !important;\n      }\n    }\n\n    thead & {\n      color: var(--thead-color);\n      font-weight: 800;\n      background: rgb(var(--head-bg-rgb) / 90%);\n      font-size: var(--thead-font-size);\n      border-block-start: none !important;\n      transition: all 0.2s ease;\n\n      #{$base}__cell-content {\n        padding-block: var(--head-th-padding-v);\n        padding-inline: var(--head-th-padding-h);\n      }\n    }\n\n    tfoot & {\n      color: var(--tfoot-color);\n      font-weight: 800;\n      border-block-start: none;\n      background: rgb(var(--foot-bg-rgb) / 90%);\n      font-size: var(--thead-font-size);\n\n      #{$base}__cell-content {\n        padding-block: var(--foot-th-padding-v);\n        padding-inline: var(--foot-th-padding-h);\n      }\n    }\n\n    &.nano-tbl__ordered {\n      background-color: rgb(var(--ordered-bg-rgb) / 80%) !important;\n    }\n  }\n\n  &__cell-content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    padding-block: var(--td-padding-v);\n    padding-inline: var(--td-padding-h);\n\n    &--no-result {\n      padding-block: 2rem;\n    }\n\n    &--wrap {\n      white-space: normal;\n      overflow: visible;\n    }\n  }\n\n  tbody {\n    will-change: scroll-position;\n    opacity: 1;\n    transition: 0.1s ease opacity;\n    transform: translateZ(0);\n\n    &.nano-tbl__inactive {\n      opacity: 0;\n    }\n  }\n\n  // tbody th\n\n  th[scope='row'] {\n    font-weight: 800;\n    margin: 0;\n  }\n\n  // .sm & th[scope='row'] {\n  //   max-width: 65vw !important;\n  // }\n\n  // pinned styles\n\n  &__pin {\n    position: sticky;\n    transform: translateZ(0);\n\n    &--start {\n      inset-inline: -1px auto;\n      transition: max-width 0.25s ease;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        box-shadow: 5px 1px 4px 0 rgb(0 0 0 / 20%);\n        opacity: 0;\n        z-index: -1;\n      }\n\n      #{$base}__pinned--start & {\n        z-index: 2;\n        max-width: 125px !important;\n\n        .sm & {\n          max-width: var(--max-col-width) !important;\n        }\n\n        &::after {\n          opacity: 1;\n        }\n      }\n    }\n\n    &--end {\n      /*\n        I cannot think of a nice way to make stuck-end columns play nice on small screens :(\n        Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.\n        This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ad-infinitum\n      */\n      #{$base}__pin--start + & {\n        inset-inline: auto auto;\n\n        &::after {\n          display: none;\n        }\n      }\n\n      .sm & {\n        inset-inline: auto -1px !important;\n        max-width: min(50vw, 200px);\n\n        &::after {\n          display: block !important;\n          content: '';\n          position: absolute;\n          inset: 0;\n          box-shadow: -5px 1px 4px 0 rgb(0 0 0 / 20%);\n          opacity: 0;\n          z-index: -1;\n        }\n      }\n\n      #{$base}__pinned--end & {\n        .sm & {\n          &::after {\n            opacity: 1;\n          }\n        }\n      }\n    }\n\n    &--top {\n      inset-block: -1px auto;\n\n      #{$base}__pinned--top & {\n        z-index: 4 !important;\n      }\n    }\n\n    &--bottom {\n      inset-block: auto -1px;\n\n      #{$base}__pinned--bottom & {\n        z-index: 5 !important;\n      }\n    }\n\n    &--top#{&}--start {\n      #{$base}__pinned--start & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--top#{$base}__pinned--start & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--top#{&}--end {\n      #{$base}__pinned--end & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--top#{$base}__pinned--end & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--bottom#{&}--start {\n      #{$base}__pinned--start & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--bottom#{$base}__pinned--start & {\n        z-index: 6 !important;\n      }\n    }\n\n    &--bottom#{&}--end {\n      #{$base}__pinned--end & {\n        z-index: 5 !important;\n      }\n\n      #{$base}__pinned--bottom#{$base}__pinned--end & {\n        z-index: 6 !important;\n      }\n    }\n  }\n\n  thead tr:last-of-type {\n    td,\n    th {\n      border-block-end: var(--border-tint-style);\n    }\n  }\n\n  tfoot tr:first-of-type {\n    td,\n    th {\n      border-block-start: none;\n    }\n  }\n\n  tfoot tr:last-of-type {\n    td,\n    th {\n      border-block-end: var(--border-tint-style);\n    }\n  }\n\n  tfoot tr.nano-tbl__pin--bottom {\n    &:first-of-type {\n      .nano-tbl__pinned--bottom & {\n        td,\n        th {\n          border-block-start: var(--border-tint-style) !important;\n        }\n      }\n    }\n\n    &:last-of-type {\n      .nano-tbl__pinned--bottom & {\n        td,\n        th {\n          border-block-end: none !important;\n        }\n      }\n    }\n  }\n\n  .unlimited-width {\n    max-width: none;\n  }\n\n  &__spinner {\n    font-size: 1.5rem;\n    transition: scale 0.25s;\n    scale: 0;\n    padding: 0.5rem;\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline-start: calc(50% - 0.75rem);\n    z-index: 0;\n\n    &--show {\n      scale: 1;\n      position: sticky;\n    }\n  }\n\n  nano-skeleton {\n    line-height: var(--cell-line-height);\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  Element,\n  Host,\n  Watch,\n  State,\n  readTask,\n  Event,\n  EventEmitter,\n  Method,\n  Build,\n} from '@stencil/core';\nimport { cyrb53 } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\nimport {\n  NanoResizeObserveCustomEvent,\n  ResizeStateChangeEventDetail,\n  TableTypes,\n} from '../../interface';\nimport { TableColHead } from './table.header';\nimport { TableRow, TableHeadFootRow } from './table.row';\nimport { TableCell } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  generateStore,\n  storeSearch,\n  storeSetConfig,\n  storeSetData,\n  storeSort,\n  storeFilter,\n  TableStores,\n} from './table.store';\nimport { arrMove, findScrollParent, isInViewport } from './table.utils';\n\nconst measurePerf = false;\n\nfunction perMark(name: string, end: boolean = false) {\n  if (!Build.isDev || Build.isTesting || !performance || !measurePerf) return;\n  if (end) {\n    performance?.mark('end' + name);\n    performance?.measure(name, 'start' + name, 'end' + name);\n    const entries = performance?.getEntriesByName(name);\n    console.log(entries[entries.length ? entries.length - 1 : 0]);\n  } else {\n    performance?.mark('start' + name);\n  }\n}\n\nlet id = 0;\n/**\n * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n *\n *- Built-in search\n *- Built-in column filter\n *- Built-in column sort\n *- Easily swap in API / async based search / filter & sort\n *- Pin headers, footers, rows, columns\n *- Drag-&-Drop columns to re-order\n *- Add custom rendering at every level\n *- Add custom properties at every level\n *\n * @slot caption - The table's caption. You must either use this or the `caption` attribute.\n * @slot no-results - text to display when search or filtering yields no results\n */\n@Component({\n  tag: 'nano-table',\n  styleUrl: 'table.scss',\n})\nexport class Table implements ComponentInterface {\n  constructor() {\n    this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);\n  }\n  // Public API\n\n  // Props\n\n  /** The type of table. Grid type will make cells navigable by keyboard */\n  @Prop() type: 'grid' | 'table' = 'table';\n\n  /** A descriptive title of the table.\n   * You must use this or the `slot=\"caption\"` for accessibility */\n  @Prop() caption: string;\n\n  /** Show the caption on-screen */\n  @Prop() showCaption: boolean = false;\n\n  /** Will show a loading state when set to true.\n   * By default, will be shown automatically if `rows` is a promise waiting to resolve\n   * or when performing custom filtering or sorting.\n   * *Note* when set manually, will overwrite any internal loading state.\n   * Set to 'undefined' to revert to default behaviour. */\n  @Prop() loading: boolean = undefined;\n\n  get _loading() {\n    return this.loading !== undefined ? this.loading : this.internalLoading;\n  }\n  set _loading(l: boolean) {\n    if (this.loading !== undefined) return;\n    this.debounceSetLoading(l);\n  }\n  private debounceSetLoading(l: boolean) {\n    this.internalLoading = l;\n  }\n  @State() internalLoading = false;\n\n  /** When loading rows asynchronously, this will render this number of placeholder rows */\n  @Prop() placeholderSize = 5;\n\n  /** The data to place in the table */\n  @Prop({ mutable: true }) rows:\n    | TableTypes.NanoTable['rows']\n    | Promise<TableTypes.NanoTable['rows']>;\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (!this.rows) {\n      this._loading = true;\n      return;\n    }\n\n    this._loading = true;\n    Promise.resolve(this.rows).then(async (rows) => {\n      await storeSetData(this.host, rows);\n\n      // reset everything\n      this.currentFilters = '';\n      this.currentSort = '';\n      await this.columnInit();\n\n      if (!this.isReady)\n        requestAnimationFrame(() => this.setInitialBlockDimension());\n      this._loading = false;\n    });\n  }\n\n  /** The column config used to present the rows of data */\n  @Prop({ mutable: true }) columns: TableTypes.NanoTable<any>['columns'] = [];\n\n  @Watch('columns')\n  async handleColsChange() {\n    await storeSetConfig(this.host, this.columns);\n    if (this.isReady) this.columnInit();\n  }\n\n  /** Used for custom thead row rendering */\n  @Prop() headRender: TableTypes.HeadFootRenderer = { pinned: 'top' };\n\n  /** Used for custom row rendering */\n  @Prop() rowRender: TableTypes.RowRenderer;\n\n  /** Used for custom tfoot row rendering */\n  @Prop() footRender: TableTypes.HeadFootRenderer = { pinned: 'bottom' };\n\n  /** Whether to show a `<tfoot>` component */\n  @Prop() showFooter = false;\n\n  /** To improve performance, data is split into blocks\n   * which are shown / hidden and rendered as they become visible.\n   * Use this to control the number of hits within a block -\n   * A block should fill a scrolling viewport.\n   * The less perBlock the better for performance */\n  @Prop() perBlock = 40;\n\n  /** The number of total blocks currently rendered in the table. @readonly */\n  @Prop()\n  get blocksLength() {\n    return this.blocks.length;\n  }\n\n  /** Term to search for in the data */\n  @Prop() searchTerm: string;\n\n  /** A custom filtering function. Should return a promise.\n   * If the promise resolves as `true` the column UI will be updated.\n   * If the promise resolves as falsey, the sort will be performed by the component.\n   * A good use-case would be performing the filter on a server / via fetch.\n   * Then on success, updating the table's data via the `rows` property */\n  @Prop() customFilterFn?: (\n    filters: TableTypes.Filter[]\n  ) => Promise<true | TableTypes.Falsy>;\n\n  /** A custom sorting function. Should return a promise.\n   * If the promise resolves as `true` the column UI will be updated.\n   * If the promise resolves as falsey, the sort will be performed by the component.\n   * A good use-case would be performing the sort on a server / via fetch.\n   * Then on success, updating the table's data via the `rows` property */\n  @Prop() customSortFn?: (\n    property: TableTypes.Prop,\n    order: TableTypes.Order\n  ) => Promise<true | TableTypes.Falsy>;\n\n  /**\n   * The default sortable option for all columns.\n   * `true` will enable column sorting unless you set `sortable: false` on a column\n   * `false` will disable column sorting unless you set `sortable: true` on a column\n   */\n  @Prop() defaultSort = true;\n\n  /**\n   * The default draggable option for all columns.\n   * `true` will enable column drag-to-reorder unless you set `draggable: false` on a column\n   * `false` will disable column drag-to-reorder unless you set `draggable: true` on a column\n   */\n  @Prop() defaultColDraggable = false;\n\n  @Watch('searchTerm')\n  handleSearchTermChange() {\n    this.searchStart();\n  }\n\n  /** Use this to render the table with roughly the correct dimensions.\n   * a use-case might be; fetch a small initial dataset to minimise load-time,\n   * render the table with the correct dimensions, the table becomes interactive,\n   * load the rest of the data\n   */\n  @Prop() virtualTotalItems: number = 0;\n\n  @Watch('virtualTotalItems')\n  virtualTotalItemsChangeHandler() {\n    this.setBlocks();\n  }\n\n  /** Fired when the table has done it's first complete render */\n  @Event() nanoTblReady: EventEmitter;\n\n  /** Fired whenever a block is activated by scrolling into view / becoming visible\n   * This could be leveraged for infinite scrolling / to fetch more data.\n   */\n  @Event() nanoTblBlockRendered: EventEmitter<{\n    block: number;\n    totalBlocks: number;\n  }>;\n\n  /** Fired before a column is sorted.\n   * `event.preventDefault()` to stop sorting.  */\n  @Event() nanoTblBeforeSort: EventEmitter<{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }>;\n\n  /** Fired after a column is sorted */\n  @Event() nanoTblAfterSort: EventEmitter<{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }>;\n\n  /** Fired when a column has started dragging */\n  @Event() nanoTblColDrag: EventEmitter<{\n    column: TableTypes.Prop;\n  }>;\n\n  /** Fired when a column has been dropped (after dragging)\n   * `event.preventDefault()` to stop column re-order. */\n  @Event() nanoTblColDrop: EventEmitter<{\n    fromCol: TableTypes.Prop;\n    toCol: TableTypes.Prop;\n    fromIndex: number;\n    toIndex: number;\n  }>;\n\n  /** Fired before a column is filtered.\n   * `event.preventDefault()` to stop filtering. */\n  @Event() nanoTblBeforeFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n  /** Fired after a column is sorted */\n  @Event() nanoTblAfterFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n  /** Fired before a general search.\n   * `event.preventDefault()` to stop searching.  */\n  @Event() nanoTblBeforeSearch: EventEmitter<{ term: string }>;\n\n  /** Fired after a general / cross column search */\n  @Event() nanoTblAfterSearch: EventEmitter<{ term: string }>;\n\n  /** Fired before a general search.\n   * `event.preventDefault()` to stop searching.  */\n  @Event() nanoTblBeforeEdit: EventEmitter<{ term: string }>;\n\n  /** Remove any column sorts currently applied\n   * @returns a promise which resolves when complete */\n  @Method()\n  async resetSorting() {\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => !!c.order\n    );\n    if (!col) return;\n    return this.sortStart(null, col.prop);\n  }\n\n  /** Apply a sort on a column\n   * @returns a promise which resolves when complete */\n  @Method()\n  async addSort(column: TableTypes.Prop, order: TableTypes.Order) {\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => c.prop === column\n    );\n    if (!col) throw 'Cannot find column with ' + column;\n    return this.sortStart(order, col.prop);\n  }\n\n  /** Remove any column filters currently applied\n   * @returns a promise which resolves when complete */\n  @Method()\n  async resetFilters() {\n    this.filters = [];\n    return this.filterStart();\n  }\n\n  /** Apply a filter on a column\n   * @param filters - the filters to apply\n   * @param additive - if true, will add the filters to any currently applied\n   * @returns a promise which resolves when complete\n   */\n  @Method()\n  async addFilters(filters: TableTypes.Filter[], additive: boolean = true) {\n    if (!additive) this.filters = [];\n    return this.filterStart(filters, additive);\n  }\n\n  /** Remove filters from a column\n   * @param columnNames - the filters to apply\n   * @returns a promise which resolves when complete\n   */\n  @Method()\n  async removeFilters(columnNames: TableTypes.Prop[]) {\n    this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));\n    return this.filterStart();\n  }\n\n  /** Updates a row model at a given index\n   * @param row - the row to update.\n   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property\n   * - rows are augmented with certain properties to aid with efficient rendering\n   * @param rowIndex - the row index to insert this row\n   */\n  @Method()\n  async updateRow(row: TableTypes.RowData, rowIndex: number) {\n    (this.rows as TableTypes.NanoTable['rows']).splice(rowIndex, 1, row);\n    this.handleRowsChange();\n  }\n\n  // TODO.\n  // change this.rows to be a Map instead?\n  // this will allow 'padding' < inserting row data at a non-adjacent index\n\n  // /**\n  //  * During pagination or infinite scroll\n  //  * you may not always want to load data in serial order.\n  //  * This method allows you to insert a block of results at a particular index.\n  //  * Use in-conjunction with `virtualTotalItems`\n  //  * @param blockIndex - where to insert\n  //  * @param rows - what to insert\n  //  */\n  //  @Method()\n  //  async insertBlock(blockIndex: number, rows: TableTypes.NanoTable['rows']) {\n  //    this.pauseAutoBlockAssign = true;\n  //    const cRows = (this.rows as TableTypes.NanoTable['rows']);\n\n  //    if (cRows.length < (blockIndex * this.perBlock)) {\n  //      (this.rows as TableTypes.NanoTable['rows'])\n  //    }\n\n  //    (this.rows as TableTypes.NanoTable['rows']).splice((blockIndex * this.perBlock)-1, 0, ...rows);\n\n  //    console.log(this.rows)\n  //    debugger;\n\n  //    await this.handleRowsChange(this.rows);\n  //    this.blocks[blockIndex] = {rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join())};\n  //    this.blocks = this.blocks;\n  //    this.pauseAutoBlockAssign = true;\n\n  //    console.log(this.rows, this.blocks)\n  //  }\n\n  // Private State\n\n  @Element() host: HTMLNanoTableElement;\n  private renderId = 'tbl-' + id++;\n  private store: TableStores;\n  private filters: TableTypes.Filter[] = [];\n  private currentFilters = '[]';\n  private currentSort = '';\n  private tableEle: HTMLTableElement;\n  private topAnchorEle: HTMLElement;\n  private tableWrapperEle: HTMLElement;\n  private cacheScrollPosition: number = 0;\n  private activeWatcherIo: IntersectionObserver;\n\n  // Block view management\n\n  /** `tr` elements split into units - defined by `perBlock`\n    These are show / hidden for perf */\n  @State() blocks: TableTypes.TBody[] = [];\n  @State() activeBlocks: number[] = [0, 1, 2];\n\n  private measureHeight = 0;\n  private blockElements: HTMLTableSectionElement[];\n  private blockHeights: { blockIndex: number; height: number }[] = [];\n  // uses the first 'tr' of an active block as our yard stick\n  private set measureEle(el: HTMLTableSectionElement) {\n    if (!el) return;\n    const potentialHeight = el.getBoundingClientRect().height;\n    this.measureHeight =\n      Math.abs(this.measureHeight - potentialHeight) < 5\n        ? this.measureHeight\n        : potentialHeight;\n    this.unitHeight =\n      el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;\n  }\n  private unitHeight = 0;\n  private get scrollParent() {\n    return this._scrollParent;\n  }\n  private set scrollParent(ele: HTMLElement) {\n    if (ele === this._scrollParent) return;\n\n    if (this._scrollParent) {\n      (this._scrollParent === document.documentElement\n        ? document\n        : this._scrollParent\n      ).removeEventListener('scroll', this.scrollHandler);\n    }\n    (ele === document.documentElement ? document : ele).addEventListener(\n      'scroll',\n      this.scrollHandler,\n      { passive: true }\n    );\n    this._scrollParent = ele;\n    this.setupActiveWatcher();\n  }\n  private _scrollParent: HTMLElement;\n\n  // used to fire `nanoTblBlockRendered` on block render change\n  private get primaryBlockIndex() {\n    return this._primaryBlockIndex;\n  }\n  private set primaryBlockIndex(blockIndex) {\n    if (this._primaryBlockIndex === blockIndex) return;\n\n    this._primaryBlockIndex = blockIndex;\n\n    // fire block change event\n    this.nanoTblBlockRendered.emit({\n      block: blockIndex,\n      totalBlocks: this.blockElements.length,\n    });\n  }\n  private _primaryBlockIndex;\n\n  // Misc.\n\n  private get isReady() {\n    return this._isReady;\n  }\n  private set isReady(ready: boolean) {\n    if (ready === this._isReady) return;\n    this._isReady = ready;\n    if (this.isReady) requestAnimationFrame(() => this.handleReady());\n  }\n  private _isReady = false;\n\n  // Private Logic\n\n  // Listeners\n\n  private handleReady() {\n    const hash = window.location.hash;\n    if (hash.length > 1) {\n      try {\n        const idRow = document.querySelector(hash);\n        if (idRow) idRow.scrollIntoView();\n      } catch (e) {}\n    }\n    this.nanoTblReady.emit();\n  }\n\n  /**\n   * Fired when a column is dragged\n   * @param column\n   */\n  private colDrag = (column: TableTypes.Prop) => {\n    this.nanoTblColDrag.emit({ column });\n  };\n\n  /**\n   * Fired when a column is dropped after being dragged\n   * @param fromCol\n   * @param toCol\n   */\n  private colDrop = (fromCol: TableTypes.Prop, toCol: TableTypes.Prop) => {\n    const cols = this.store.config.state.columns;\n    const toIndex = cols.findIndex((col) => col.prop === toCol);\n    const fromIndex = cols.findIndex((col) => col.prop === fromCol);\n\n    const dropEvent = this.nanoTblColDrop.emit({\n      fromCol,\n      toCol,\n      fromIndex,\n      toIndex,\n    });\n    if (dropEvent.defaultPrevented) return;\n\n    this.columns = arrMove(fromIndex, toIndex, cols);\n  };\n\n  /**\n   * Start a sort - can be cancelled by `preventDefault`\n   * @param order - column order\n   * @param column - column config object\n   * @returns A promise\n   */\n  private sortStart = async (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    element?: HTMLElement\n  ) => {\n    // did order change?\n    if (this.currentSort === order + ':' + column) return;\n\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });\n    if (sortEvent.defaultPrevented) return;\n    perMark('sort');\n    this.currentSort = order + ':' + column;\n\n    // doesn't make sense to leave user in place for a sort\n    this.scrollToTop(element);\n\n    if (this.customSortFn) {\n      try {\n        const res = await this.customSortFn(column, order);\n\n        // if the response is 'true', the custom sort did it's thing\n        // handover to finish and stop loading state.\n        // if response is falsey, carry on to do a FE sort\n        if (res === true) {\n          this.sortComplete(order, column);\n          this._loading = false;\n          return;\n        }\n      } catch (e) {\n        // if response errored, stop loading state\n        // clear current sort cache\n        console.warn('custom sort failed', e);\n        this.currentSort = '';\n        this._loading = false;\n        return;\n      }\n    }\n\n    try {\n      await storeSort(this.host, column, order);\n      this.sortComplete(order, column);\n    } catch (e) {\n      console.warn('sort failed', e);\n      this.currentSort = '';\n    } finally {\n      if (this.blocks.length) this._loading = false;\n    }\n  };\n\n  /**\n   * Complete a sort. Reflects the order to ui.\n   * @param order - column order\n   * @param column - column config object\n   */\n  private sortComplete(order: TableTypes.Order, column: TableTypes.Prop) {\n    this.columns = this.columns.map((c) => {\n      if (c.prop === column) return { ...c, order };\n      return { ...c, order: null };\n    });\n    this.nanoTblAfterSort.emit({ column: column, order });\n    perMark('sort', true);\n  }\n\n  private async searchStart() {\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });\n    if (sortEvent.defaultPrevented) return;\n    perMark('search');\n\n    // doesn't make sense to leave user in place for a search\n    this.scrollToTop();\n\n    try {\n      await storeSearch(this.host, this.searchTerm);\n      this.nanoTblAfterSearch.emit({ term: this.searchTerm });\n      perMark('search', true);\n    } catch (e) {\n      console.warn('search failed', e);\n    } finally {\n      this._loading = false;\n    }\n  }\n\n  private async filterStart(\n    filters?: TableTypes.Filter[],\n    additive: boolean = true\n  ) {\n    if (filters) {\n      if (additive) {\n        this.filters = [\n          ...this.filters.filter(\n            (f) => !filters.find((ff) => ff.prop === f.prop)\n          ),\n          ...filters,\n        ];\n      } else {\n        this.filters = filters;\n      }\n    }\n\n    if (this.currentFilters === JSON.stringify(this.filters)) return;\n\n    this._loading = true;\n    const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });\n    if (sortEvent.defaultPrevented) return;\n    perMark('filter');\n    this.currentFilters = JSON.stringify(this.filters);\n\n    // doesn't make sense to leave user in place for a search\n    this.scrollToTop();\n\n    if (this.customFilterFn) {\n      try {\n        const res = await this.customFilterFn(this.filters);\n\n        // if the response is 'true', the custom filter did it's thing\n        // handover to finish and stop loading state.\n        // if response is falsey, carry on to do a FE filter\n        if (res === true) {\n          this.filterComplete();\n          this._loading = false;\n        }\n      } catch (e) {\n        // if response errored, stop loading state\n        // clear current sort cache\n        console.warn('custom filter failed', e);\n        this.currentFilters = '';\n        this._loading = false;\n      }\n      return;\n    }\n\n    try {\n      await storeFilter(this.host, this.filters);\n      this.filterComplete();\n    } catch (e) {\n      console.warn('filter failed', e);\n    } finally {\n      this._loading = false;\n    }\n  }\n\n  private filterComplete() {\n    this.columns = this.columns.map((c) => {\n      const cFilter = this.filters.find((f) => f.prop === c.prop);\n      if (cFilter) c.filter = cFilter.filter;\n      else if (c.filter !== null && c.filter !== undefined)\n        c.filter = undefined;\n\n      return c;\n    });\n    this.nanoTblAfterFilter.emit({ filters: this.filters });\n    perMark('filter', true);\n  }\n\n  /** Scrolls to the top immediately - used whilst sorting / filtering */\n  private scrollToTop(element?: HTMLElement) {\n    const scrollBehaviour = this.scrollParent.style?.scrollBehavior;\n    const scrollX = this.scrollParent.scrollLeft;\n    this.scrollParent.style.scrollBehavior = 'auto';\n\n    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {\n      this.host.scrollIntoView();\n    }\n    if (element && !isInViewport(element, 1))\n      setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);\n\n    if (scrollX) this.scrollParent.scrollLeft = scrollX;\n\n    if (scrollBehaviour)\n      this.scrollParent.style.scrollBehavior = scrollBehaviour;\n\n    this.scrollHandler();\n  }\n\n  private setMeasureElement(): Promise<void> {\n    return new Promise((resolve) => {\n      readTask(() => {\n        this.measureEle = this.blockElements.find(\n          (b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`)\n        );\n        resolve();\n      });\n    });\n  }\n\n  /**\n   * Makes sure we have dimensions on at least one, active tbody element.\n   * We'll use this is a yard stick for inactive tbody elements in future.\n   * These elements have no natural height (on account of all their rows being hidden)\n   */\n  private setInitialBlockDimension() {\n    if (!this.blockElements?.length) return;\n    perMark('blockDims');\n\n    const testForDimensions = async () => {\n      await this.setMeasureElement();\n      if (this.unitHeight) return true;\n      return false;\n    };\n\n    const dimensionsReady: Promise<void> = new Promise(async (resolve) => {\n      if (await testForDimensions()) resolve();\n      else {\n        // it's likely this table is hidden in the dom.\n        // we need to wait until it's visible\n        const observer = new IntersectionObserver(\n          async () => {\n            if (await testForDimensions()) {\n              resolve();\n              observer.disconnect();\n            }\n          },\n          { root: this.scrollParent }\n        );\n        observer.observe(this.tableEle);\n      }\n    });\n\n    // we're all finished.\n    dimensionsReady.then(() => {\n      perMark('blockDims', true);\n      perMark('init', true);\n      requestAnimationFrame(() => (this.isReady = true));\n    });\n  }\n\n  /** Apply initial columns settings */\n  private async columnInit() {\n    this.filters = (this.columns as TableTypes.NanoTable['columns'])\n      .filter((c) => c.filter !== undefined && c.filter !== null)\n      .map((c) => {\n        const { filter, prop } = c;\n        return { filter, prop };\n      });\n\n    if (this.searchTerm) {\n      await this.searchStart();\n    }\n\n    if (this.filters.length) {\n      await this.filterStart();\n    }\n    // apply sort\n    const col = (this.columns as TableTypes.NanoTable['columns']).find(\n      (c) => !!c.order\n    );\n    if (!!col) {\n      await this.sortStart(col.order, col.prop);\n    }\n  }\n\n  /** Split up all incoming rows into 'blocks' split amongst tbody elements.\n   * These can then be hidden / shown to improve performance.\n   */\n  private setBlocks() {\n    const dRows = this.store.data.state.rows;\n    if (!dRows.length) {\n      this.blocks = [];\n      return;\n    }\n\n    perMark('setBlocks');\n    // this.ignoreIO = true;\n    let i = 1;\n    const l =\n      this.virtualTotalItems > dRows.length\n        ? this.virtualTotalItems\n        : dRows.length;\n    let rows: TableTypes.RowData[] = [];\n    const blocks: TableTypes.TBody[] = [];\n    this.blockHeights = [];\n\n    // old skool loop for perf\n    for (i; i <= l; i++) {\n      rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });\n\n      if (i % this.perBlock === 0) {\n        // assign a UUID for the whole block\n        // for block diffing\n        blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n        rows = [];\n      }\n    }\n\n    // any leftover rows\n    if (rows.length) {\n      blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n    }\n\n    this.blocks = blocks;\n    perMark('setBlocks', true);\n  }\n\n  /**\n   * Returns a block render height.\n   * If it's currently active - let auto do it's thing\n   * If we've rendered it before - return that\n   * If all else fails, let's guess it\n   * @param blockIndex\n   * @returns a height string (incl px)\n   */\n  private getBlockHeight(blockIndex: number): number {\n    if (this.blockHeights.length) {\n      const cachedBlockHeight = this.blockHeights.find(\n        (bh) => bh.blockIndex === blockIndex\n      );\n      if (cachedBlockHeight) return cachedBlockHeight.height;\n    }\n    const blockLength = this.blocks[blockIndex].rows.length;\n    if (blockLength === this.perBlock && this.measureHeight) {\n      return this.measureHeight;\n    }\n    return this.unitHeight ? this.unitHeight * blockLength : undefined;\n  }\n\n  /** cache the height for all active blocks for later renders */\n  private setBlockHeight() {\n    this.activeBlocks.forEach((blockIndex) => {\n      const el = this.blockElements[blockIndex];\n      if (!el) return;\n      readTask(() => {\n        const height = el.getBoundingClientRect().height;\n        // cache height to our block heights array\n        // for subsequent renders\n        const fBhI = this.blockHeights.findIndex(\n          (bh) => bh.blockIndex === blockIndex\n        );\n        if (fBhI > 0) {\n          this.blockHeights[fBhI] = { height, blockIndex };\n        } else this.blockHeights.push({ height, blockIndex });\n      });\n    });\n  }\n\n  private scrollHandler = () => {\n    if (!this.store.general.state.isActive) return;\n    this.cacheScrollPosition = this.scrollParent.scrollTop || window.scrollY;\n\n    requestAnimationFrame(() => {\n      let cumulativeHeight = 0;\n      let blockIndex = 0;\n      const blockLen = this.blocks.length;\n\n      while (\n        blockIndex < blockLen &&\n        this.cacheScrollPosition >= cumulativeHeight\n      ) {\n        cumulativeHeight += this.getBlockHeight(blockIndex);\n\n        if (this.cacheScrollPosition < cumulativeHeight) {\n          const potentialBlocks = [\n            blockIndex,\n            blockIndex + 1,\n            Math.max(0, blockIndex - 1),\n          ];\n          if (potentialBlocks.toString() !== this.activeBlocks.toString()) {\n            this.activeBlocks = potentialBlocks;\n            this.setBlockHeight();\n          }\n          this.primaryBlockIndex = blockIndex;\n        }\n        blockIndex++;\n      }\n    });\n  };\n\n  /** Process slotted content */\n  private processSlots() {\n    // see if we have slot content\n    if (!this.caption && !this.host.querySelector('[slot=\"caption\"]')) {\n      console.error(\n        'For accessibility you must set a `caption` prop or use the `caption` slot'\n      );\n    }\n  }\n\n  private handleColumnPinned = (positions: {\n    [key in TableTypes.Position]: boolean;\n  }) => {\n    Object.entries(positions).forEach(([key, applied]) => {\n      this.tableEle.classList.toggle(\n        `${CSSNAMESPACE}__pinned--${key}`,\n        applied\n      );\n    });\n  };\n\n  private handleResizeChange = (\n    e: NanoResizeObserveCustomEvent<ResizeStateChangeEventDetail>\n  ) => {\n    this.tableWrapperEle.className = '';\n\n    let classes: string[] = [`${CSSNAMESPACE}__wrap`];\n    if (e.target?.className)\n      classes = [...e.target.className.split(' '), ...classes];\n\n    this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));\n  };\n\n  /** Adds an IO. Makes sure our scroll listener is only active when\n   * the table is in viewport */\n  private setupActiveWatcher() {\n    if (!this.host || !this.scrollParent) return;\n\n    if (this.activeWatcherIo) {\n      this.activeWatcherIo.disconnect();\n      this.activeWatcherIo = undefined;\n    }\n    const io = (this.activeWatcherIo = new IntersectionObserver(\n      async ([e]) => {\n        if (e.isIntersecting) this.store.general.state.isActive = true;\n        else this.store.general.state.isActive = false;\n      },\n      { root: this.scrollParent }\n    ));\n    io.observe(this.host);\n  }\n\n  // Component lifecycle\n\n  async componentWillLoad() {\n    perMark('init');\n    this.scrollParent = findScrollParent(this.host);\n    this.store = await generateStore(\n      this.host,\n      this.columns,\n      this.scrollParent,\n      this.isReady\n    );\n    this.store.general.onChange('isActive', this.scrollHandler);\n    await this.handleRowsChange();\n    this.processSlots();\n    this.store.data.onChange('rows', () => this.setBlocks());\n    this.setBlocks();\n  }\n\n  connectedCallback(): void {\n    this.scrollParent = findScrollParent(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.setInitialBlockDimension();\n  }\n\n  componentShouldUpdate(_newVal, _oldVal, stateName: keyof Table) {\n    // stop double rendering - we use the store for rendering internally\n    // the public facing props are kept in-sync with the store\n    // but we don't want it to cause renders\n    if (['rows', 'columns'].includes(stateName)) return false;\n\n    if (Build.isDev && !Build.isTesting)\n      console.log(stateName, _newVal, _oldVal);\n  }\n\n  componentWillRender(): void | Promise<void> {\n    perMark('render');\n  }\n\n  componentDidRender(): void {\n    this.setMeasureElement();\n    perMark('render', true);\n  }\n\n  disconnectedCallback(): void {\n    if (!this.activeWatcherIo) return;\n    this.activeWatcherIo.disconnect();\n    this.activeWatcherIo = undefined;\n  }\n\n  render() {\n    this.blockElements = [];\n\n    return (\n      <Host>\n        <div\n          class={`${CSSNAMESPACE}__top-anchor`}\n          ref={(a) => (this.topAnchorEle = a)}\n        >\n          &nbsp;\n        </div>\n\n        <nano-resize-observe\n          aria-labelledby={'table-caption-' + this.renderId}\n          tabindex={this.type === 'grid' ? '0' : undefined}\n          states=\"576w sm, 768w md\"\n          class=\"sm md\"\n          onNanoResizeStateChange={this.handleResizeChange}\n        ></nano-resize-observe>\n\n        <div\n          class={`${CSSNAMESPACE}__wrap sm md`}\n          ref={(div) => (this.tableWrapperEle = div)}\n        >\n          <nano-progress-bar\n            indeterminate\n            class={{\n              [`${CSSNAMESPACE}__progress-bar`]: true,\n              [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,\n            }}\n          />\n          <table\n            role={this.type === 'grid' ? 'grid' : undefined}\n            aria-readonly={this.type === 'table' ? 'true' : undefined}\n            aria-rowcount={this.store.data.state.rows.length}\n            aria-colcount={this.store.config.state.columns.length}\n            class={`${CSSNAMESPACE}`}\n            ref={(tbl) => (this.tableEle = tbl)}\n          >\n            <caption\n              class={{\n                [`${CSSNAMESPACE}__caption`]: true,\n                [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,\n              }}\n              id={'table-caption-' + this.renderId}\n            >\n              <slot name=\"caption\">{this.caption}</slot>\n            </caption>\n\n            {/* Header */}\n            <thead>\n              <TableHeadFootRow\n                rowRenderer={this.headRender}\n                onColumnPinned={this.handleColumnPinned}\n              >\n                {this.store.config.state.columns.map((colModel) => [\n                  <TableColHead\n                    column={colModel}\n                    headRenderer={this.headRender}\n                    onColumnSortClick={this.sortStart}\n                    onColumnPinned={this.handleColumnPinned}\n                    onColumnDrag={this.colDrag}\n                    onColumnDrop={this.colDrop}\n                    defaults={{\n                      sortable: this.defaultSort,\n                      draggable: this.defaultColDraggable,\n                    }}\n                  />,\n                ])}\n              </TableHeadFootRow>\n            </thead>\n\n            {this._loading && !this.blocks.length && (\n              <tbody class={`${CSSNAMESPACE}__active`}>\n                {[...Array(10).keys()].map((rowIndex) => (\n                  <tr>\n                    {this.store.config.state.columns.map(\n                      (_colModel, colIndex) => (\n                        <TableCell\n                          rowIndex={rowIndex}\n                          colIndex={colIndex}\n                          nestedContent={() => <nano-skeleton />}\n                        />\n                      )\n                    )}\n                  </tr>\n                ))}\n              </tbody>\n            )}\n\n            <tr hidden={!!this._loading || !!this.blocks.length}>\n              <th\n                class={`${CSSNAMESPACE}__th`}\n                colSpan={this.store.config.state.columns.length}\n              >\n                <div class=\"nano-tbl__cell-content nano-tbl__cell-content--no-result\">\n                  <slot name=\"no-results\">No results found</slot>\n                </div>\n              </th>\n            </tr>\n\n            {/* Body */}\n            {this.blocks.map((block, blockIndex) => (\n              <tbody\n                key={block.__uuid}\n                id={`tbody-${this.renderId}-${blockIndex}`}\n                ref={(tb) => {\n                  this.blockElements.push(tb);\n                }}\n                class={{\n                  [`${CSSNAMESPACE}__inactive`]:\n                    !this.activeBlocks.includes(blockIndex),\n                  [`${CSSNAMESPACE}__active`]:\n                    this.activeBlocks.includes(blockIndex),\n                }}\n              >\n                {this.activeBlocks.includes(blockIndex) ? (\n                  block.rows.map((row, i) => {\n                    const rowIndex =\n                      blockIndex > 0 ? blockIndex * this.perBlock + i : i;\n                    return (\n                      <TableRow\n                        rowRenderer={this.rowRender}\n                        rowModel={row}\n                        rowIndex={rowIndex}\n                      >\n                        {this.store.config.state.columns.map(\n                          (_colModel, colIndex) => (\n                            <TableCell\n                              rowIndex={rowIndex}\n                              colIndex={colIndex}\n                            />\n                          )\n                        )}\n                      </TableRow>\n                    );\n                  })\n                ) : (\n                  <tr>\n                    <td\n                      colSpan={this.store.config.state.columns.length}\n                      style={{\n                        height: this.getBlockHeight(blockIndex) + 'px',\n                      }}\n                    />\n                  </tr>\n                )}\n              </tbody>\n            ))}\n\n            {/* Footer */}\n            {this.showFooter && (\n              <tfoot>\n                <TableHeadFootRow\n                  rowRenderer={this.footRender}\n                  onColumnPinned={this.handleColumnPinned}\n                >\n                  {this.store.config.state.columns.map((colModel) => [\n                    <TableColHead\n                      column={colModel}\n                      headRenderer={this.footRender}\n                      onColumnPinned={this.handleColumnPinned}\n                      onColumnSortClick={this.sortStart}\n                      defaults={{\n                        sortable: this.defaultSort,\n                        draggable: this.defaultColDraggable,\n                      }}\n                    />,\n                  ])}\n                </TableHeadFootRow>\n              </tfoot>\n            )}\n          </table>\n\n          {!!this.blocks.length && (\n            <nano-spinner\n              type=\"circle\"\n              class={{\n                [`${CSSNAMESPACE}__spinner`]: true,\n                [`${CSSNAMESPACE}__spinner--show`]: this._loading,\n              }}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-64b56ee6.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as o,c as i,a as n,g as e}from"./p-f6a8467a.js";import{f as s}from"./p-f8f89998.js";import{P as r}from"./p-51bc8b59.js";const a=".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";const p=class{constructor(o){t(this,o);this.iconName=undefined;this.iconSrc=undefined;this.type="button";this.name=undefined;this.value=undefined;this.label=undefined;this.showTooltip=false;this.disabled=false;this.href=undefined;this.target=undefined}async setFocus(){this.button.focus()}componentDidLoad(){s.observe(this.button)}connectedCallback(){if(this.button)s.observe(this.button)}disconnectedCallback(){s.unobserve(this.button)}content(){const t=this.href===undefined?"button":"a";return o(t,{part:"base",ref:t=>this.button=t,class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},o("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true",lazy:false,part:"icon"}))}render(){if(this.showTooltip){return o("nano-tooltip",{content:this.label},this.content())}return this.content()}};p.style=a;const l=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:"";position:absolute;inline-size:0;block-size:0;color:black;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);-webkit-border-after:5px solid;border-block-end:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);-webkit-border-before:5px solid;border-block-start:5px solid;-webkit-border-start:5px solid transparent;border-inline-start:5px solid transparent;-webkit-border-end:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;-webkit-border-start:5px solid;border-inline-start:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;-webkit-border-end:5px solid;border-inline-end:5px solid;-webkit-border-before:5px solid transparent;border-block-start:5px solid transparent;-webkit-border-after:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}';const d=class{constructor(o){t(this,o);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.isVisible=false;this.label="";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.hoist=false;this.trigger="hover focus"}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-label")}t.setAttribute("aria-label",this.label);this._target=t}setLabel(){const t=Array.from(this.host.querySelectorAll('[slot="content"]'));const o=t.map((t=>t.textContent)).join(" ").trim();if(!this.target){this.target=this.getTarget();if(!this.target)return}this.label=o||this.content;this.target.setAttribute("aria-label",this.label)}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible||this.disabled){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new r(this.target,this.tooltipPositioner);this.syncOptions();this.setLabel();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover)this.popover.destroy()}render(){return o(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},o("slot",{onSlotchange:this.handleSlotChange}),o("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},o("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},o("slot",{name:"content",onSlotchange:()=>this.setLabel()},this.content),o("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return e(this)}static get watchers(){return{content:["setLabel"],open:["handleOpenChange"]}}};d.style=l;export{p as nano_icon_button,d as nano_tooltip};
-//# sourceMappingURL=p-64b56ee6.entry.js.map

package/dist/nano-components/p-64b56ee6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","async","this","button","focus","componentDidLoad","focusVisible","observe","connectedCallback","disconnectedCallback","unobserve","content","TagType","href","undefined","h","part","ref","el","class","disabled","label","name","value","target","type","iconName","src","iconSrc","lazy","render","showTooltip","tooltipCss","Tooltip","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","getTarget","_target","newTarget","removeAttribute","setAttribute","setLabel","contentSlotNodes","Array","from","host","querySelectorAll","textContent","map","node","join","trim","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","syncOptions","setOptions","strategy","hoist","placement","distance","skidding","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","hidden","componentDidUpdate","destroy","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","role"],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --color: defaults to #{map.get($colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get($colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    */\n  display: inline-block;\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{map.get($colors, darkblue--faded)};\n  --hover-color: #{map.get($colors, blue)};\n  --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{$spacing-small};\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n    return (\n      <TagType\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        aria-label={this.label}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <nano-icon\n          name={this.iconName}\n          src={this.iconSrc}\n          aria-hidden=\"true\"\n          lazy={false}\n          part=\"icon\"\n        />\n      </TagType>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n    }\n    return this.content();\n  }\n}\n","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n              {this.content}\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-a5a560e7.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as a,h as o,a as n,g as i}from"./p-f6a8467a.js";import{g as s,a as r}from"./p-257432ff.js";import{f as e}from"./p-f8f89998.js";import{s as h}from"./p-d7c34990.js";import{C as d}from"./p-a6ff5ca6.js";import{c as l}from"./p-411bb8f1.js";import{d as c}from"./p-f6de2d5d.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const b=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow-x:auto;overflow-y:hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home"){n=0}else if(t.key==="End"){n=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}o[n].setFocus();if(["top"].includes(this.placement)){h(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=a.pageY-this.initialTouchY;const i=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(o)>=i&&Math.abs(n)<=i;const h=this.getAllActiveTabs;const d=h.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(h[d+t]){this.setActiveTab(h[d+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){h(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){var t;this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const a=this.getActiveTab;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const n=a.clientHeight;const i=r(a,this.tabs);if(!this.activeTabIndicator)return;const s=i.top+this.nav.scrollTop;const e=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){var a;let o=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(o<0)return;const i=this.getAllPanels.find((t=>t.name===n.panel));if(!i)return;t.stopImmediatePropagation();const s=this.nanoTabWillClose.emit({name:n.panel});if(s.defaultPrevented)return;if(n.active){o=o===0?1:o-1;const t=(a=this.getAllActiveTabs[o])===null||a===void 0?void 0:a.panel;if(t)this.host.show(t)}n.remove();i.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)d.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();h(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(n,{class:Object.assign({},l(this.color)),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=b;export{p as nano_tab_group};
-//# sourceMappingURL=p-a5a560e7.entry.js.map

package/dist/nano-components/p-a5a560e7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","stopPropagation","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedElements","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","_","async","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","activeTabIndicator","offsetTop","top","scrollTop","offsetLeft","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","focusVisible","tabGroup","requestAnimationFrame","window","resizeObserver","ResizeObserver","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","Object","assign","createColorClasses","color","part","ref","onClick","onKeyDown","btn","onScroll","role","onSlotchange","onTouchStart","onTouchEnd"],"sources":["./src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","./src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset-block: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      inset-inline-start: 0;\n    }\n\n    &--right {\n      inset-inline-end: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        inset-inline-start: 7%;\n        inset-block-end: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n\n      padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n      padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n          rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--tabs-padding-end)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        padding-inline: 0 var(--tabs-padding-end);\n        padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-block-end: -2px;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n      border-inline-start:\n        solid var(--indicator-size)\n        var(--indicator-track-color);\n      text-align: start;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-inline-start: calc(-1 * 2px);\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      border-start-start-radius: 0;\n      border-start-end-radius: var(--content-border-radius);\n      border-end-end-radius: var(--content-border-radius);\n      border-end-start-radius: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n  Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n\n      this.syncActiveTabIndicator();\n\n      // active tab can be changed on init - this won't be ready. No big thing\n      if (this.nav && ['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n\n    if (!this.activeTabIndicator) return;\n\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        // need to stop bubbling otherwise it will focus on parent tabs if nested\n        event.stopPropagation();\n        // stop the browser moving about\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    const endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    const endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const xDiff = this.initialTouchX - touch.clientX;\n    const yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedElements({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    if (!window['ResizeObserver']) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    if (Build.isServer) {\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.setAriaLabels();\n    }\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/p-a761ac89.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as a,c as t,h as i,a as n,g as o}from"./p-f6a8467a.js";const e=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;align-items:center}.nanotab ::slotted(*){display:flex;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);-webkit-appearance:none !important;appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) 0 var(--nano-spacing-xsmall, 4px) var(--nano-spacing-xsmall, 4px) !important}";let r=0;const s=class{constructor(i){a(this,i);this.nanoTabClose=t(this,"nanoTabClose",7);this.tabId=`nano-tab-${++r}`;this.handleCloseClick=()=>{this.nanoTabClose.emit()};this.handleCloseKeydown=a=>{if(a.key===" ")this.handleCloseClick()};this.panel="";this.active=false;this.disabled=false;this.closable=false}async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}render(){return i(n,{id:this.host.id||this.tabId},i("div",{part:"base",ref:a=>this.tab=a,class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled,"nanotab--closable":this.closable},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},i("slot",null),this.closable&&i("nano-icon-button",{label:"Close this tab",iconName:"light/times",class:"nanotab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,tabIndex:-1})))}get host(){return o(this)}};s.style=e;export{s as nano_tab};
-//# sourceMappingURL=p-a761ac89.entry.js.map