@nanoporetech-digital/components 5.1.3 → 5.2.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["addListeners","el","events","fn","opts","split","forEach","e","addEventListener","sortableCss","orientationMap","horizontal","x","y","vertical","sortableIds","Sortable","handleItemSelectorChange","this","refreshKeyboardHandles","handleHandleSelectorChange","attachMutationObserver","handleCreateKeyboardHandleChange","handleSortableHostElement","_newVal","oldVal","removeEventHandlers","addEventHandlers","sortableHostElement","style","position","async","handleSelector","_a","keyboardHandleMap","size","clear","sortableHost","querySelectorAll","handle","getAttribute","setAttribute","sortableId","sortEle","closest","itemSelector","set","_b","_c","_ele","remove","ele","i","createKeyboardHandle","console","error","host","addAriaMsg","msg","ariaTextList","setTimeout","mIdx","indexOf","splice","updateUserSelectStyle","userSelect","MozUserSelect","msUserSelect","webkitUserSelect","hitTest","node","targets","left","l","top","t","width","w","height","h","getBoundingClientRect","filter","item","right","bottom","isAnimating","animatedElements","animateNode","dx","dy","animate","push","willChange","writeTask","animationPromise","Promise","resolve","transform","animationTiming","index","once","insertAtTarget","target","offsets","animationEnabled","sortableNodes","map","offsetLeft","offsetTop","isConnected","dropzoneNodes","append","nodeComparison","compareDocumentPosition","DOCUMENT_POSITION_FOLLOWING","parentNode","DOCUMENT_POSITION_PRECEDING","insertAdjacentElement","sortableNode","reset","draggedElementClone","undefined","removeChild","draggedElement","draggedElementOrigin","classList","placeholderClass","dropzoneActiveClass","length","dze","dragRequestPending","createClone","clone","cloneNode","id","Array","from","children","nodeChild","clonedNodeChild","originalNodeChild","offsetWidth","offsetHeight","Object","assign","dragResize","add","draggedClass","appendChild","removeEventListener","handleTrack","handleKeydown","passive","mutationObserver","disconnect","MutationObserver","currHandles","values","newHandles","find","includes","observe","subtree","childList","targetElement","foundHandle","get","activateSort","isActive","keyboardSortActive","toggle","handleDraggedClass","grabbedHelperText","document","droppedHelperText","key","preventDefault","nanoGrabbedEv","nanoGrabbed","emit","element","defaultPrevented","nanoDropped","moveKeys","orientation","dropzoneSelector","currIdx","curDzIdx","curDropzone","prevEle","nextEle","finishOrder","focus","requestAnimationFrame","setFocus","then","button","handleMove","cancelable","clearTimeout","mouseDownTimer","resetTrack","window","trackStart","drag","initialEvent","relative","onMove","trackMove","onStop","didStop","targetHandle","nextSibling","constructor","hostRef","Map","updated","originalIndex","targetIndex","querySelector","orderChangeEv","nanoOrderChange","reorderHelperText","activeDropzone","readTask","textContent","trim","itemDescriptor","elements","_number","_element","handleTpl","div","globalThis","createElement","innerHTML","duration","easing","bind","nanoDebounce","connectedCallback","insertAdjacentHTML","helperText","disconnectedCallback","render","Host","class","role","part","str"],"sources":["./src/utils/events.ts","./src/components/sortable/sortable.scss?tag=nano-sortable&encapsulation=shadow","./src/components/sortable/sortable.tsx"],"sourcesContent":["/**\n * Add multiple event listeners with the same callback function\n * @param el the element which emits events\n * @param events the event names to listen to (string separated by a space)\n * @param fn the function to call\n * @param opts the event options to apply\n */\nexport function addListeners(\n  el: Element | Document,\n  events: string,\n  fn: (e: Event) => void,\n  opts?: AddEventListenerOptions\n) {\n  events\n    .split(' ')\n    .forEach((e) =>\n      el.addEventListener(e as keyof HTMLElementEventMap, fn, opts)\n    );\n}\n\n/**\n * Remove multiple event listeners with the same callback function\n * @param el the element which emits events\n * @param events the event names to listen to (string separated by a space)\n * @param fn the function to call\n */\nexport function removeListeners(\n  el: Element | Document,\n  events: string,\n  fn: (e: Event) => void\n) {\n  events\n    .split(' ')\n    .forEach((e) => el.removeEventListener(e as keyof HTMLElementEventMap, fn));\n}\n","@use '../../global/style/utilities/globals' as g;\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.sortable__live-region {\n  @include g.visually-hide();\n}\n","import {\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Component,\n  ComponentInterface,\n  Watch,\n  Method,\n  State,\n  Host,\n  readTask,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { nanoDebounce } from '../..';\nimport { addListeners } from '../../utils/events';\n\n// Orientation map to limit dragging to horizontal or vertical.\nconst orientationMap = {\n  horizontal: { x: 1, y: 0 },\n  vertical: { x: 0, y: 1 },\n};\n\nlet sortableIds = 0;\n\n/**\n * An accessible and flexible re-order / sort utility component.\n *\n *- Drag and drop via mouse, touch or keyboard\n *- Live announcements for screen readers\n *- Works with or without an explicit handle (although with is preferable)\n\n * @part announcements - the a11y, live region. Visually hidden by default\n *\n * @slot - The default slot containing any items you might want to sort\n */\n@Component({\n  tag: 'nano-sortable',\n  shadow: true,\n  styleUrl: 'sortable.scss',\n})\nexport class Sortable implements ComponentInterface {\n  /// Public API & surface ///\n\n  /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */\n  @Prop() itemSelector = 'li';\n  @Watch('itemSelector')\n  handleItemSelectorChange() {\n    this.refreshKeyboardHandles();\n  }\n\n  /** A css query selector which matches an element *within* the `itemSelector` element\n   * which will act like a drag handle. **Note** For keyboard a11y it's recommended\n   * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */\n  @Prop() handleSelector?: string;\n  @Watch('handleSelector')\n  handleHandleSelectorChange() {\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n  }\n\n  /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\n   * At that point, you will not be able to drag items back to the original group.\n   * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.\n   */\n  @Prop() dropzoneSelector?: string;\n\n  /** Accessibility helper text applied to handle controls */\n  @Prop() helperText =\n    'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n    'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.';\n\n  /**\n   * As a sortable element is interacted with, announcements are made to screen readers\n   * - informing the user what is changing.\n   * By default, the text from the element is extracted to describe the interacted with element.\n   * Use this function to provide a more meaningful, concise item descriptor\n   * @param el the element being interacted with\n   * @returns a string, describing the element being interacted with\n   */\n  @Prop() itemDescriptor = (el: Element) => `\"${el?.textContent.trim()}\"`;\n\n  /**\n   * Used to generate a screen reader live update, informing the user of the current element being grabbed.\n   * @param el the element that has been grabbed by the user\n   * @returns a string, describing the element being grabbed\n   */\n  @Prop() grabbedHelperText = (el: Element) =>\n    `${this.itemDescriptor(el)} grabbed`;\n\n  /**\n   * Used to generate a screen reader live update, informing the user of the current element being dropped.\n   * @param el the element that has been dropped by the user\n   * @returns a string, describing the element that has been dropped\n   */\n  @Prop() droppedHelperText = (el: Element) =>\n    `${this.itemDescriptor(el)} dropped`;\n\n  /**\n   *  Used to generate a screen reader live update, informing the user when items have been reordered.\n   * @param el the element that has been reordered by the user\n   * @param elements the elements in the sortable list\n   * @param position the new position of the dropped element\n   * @returns a string, describing the element being dropped\n   */\n  @Prop() reorderHelperText = (\n    el: Element,\n    elements: Element[],\n    position: number\n  ) =>\n    `The list has been reordered, ${this.itemDescriptor(\n      el\n    )} is now item ${position} of ${elements.length}`;\n\n  /**\n   * A function that should attach a keyboard accessible control.\n   * When a `handleSelector` is not used - to allow keyboard accessibility -\n   * `createKeyboardHandle` should render a focusable element.\n   *\n   * If your sortable item is itself focusable,\n   * you must use this function to render a control *outside* of the focusable element.\n   * @param _number\n   * @param _element\n   * @returns a function that attaches a keyboard accessible handle control element.\n   * The function itself *must* return the handle element.\n   */\n  @Prop() createKeyboardHandle = (_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n        label=\"Re-order this item\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  };\n  @Watch('createKeyboardHandle')\n  handleCreateKeyboardHandleChange() {\n    this.refreshKeyboardHandles();\n  }\n\n  /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\n   * Note that the `sortableHostElement` element css `position` will be set to `relative` */\n  @Prop() sortableHostElement?: HTMLElement;\n  @Watch('sortableHostElement')\n  handleSortableHostElement(_newVal?, oldVal?: HTMLElement) {\n    if (oldVal) this.removeEventHandlers(oldVal);\n\n    this.addEventHandlers();\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n\n    if (this.sortableHostElement) {\n      // sortable host must have position relative\n      this.sortableHostElement.style.position = 'relative';\n    }\n  }\n\n  /** Items being sorted will animate into place */\n  @Prop() animationEnabled = true;\n\n  /** Use this class to change how the element looks whilst being sorted */\n  @Prop() draggedClass = 'nano-sortable__dragged';\n\n  /** Use this class to change how the handle looks whilst being sorted */\n  @Prop() handleDraggedClass = 'nano-sortable__handle-dragged';\n\n  /** Use this class to change how the element looks when acting as a placeholder */\n  @Prop() placeholderClass = 'nano-sortable__placeholder';\n\n  /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */\n  @Prop() dropzoneActiveClass?: string = '';\n\n  /** The css animation timing applied when `animationEnabled` is `true` */\n  @Prop() animationTiming: any = { duration: 200, easing: 'ease-out' };\n\n  /** The axis to lock dragging elements to. `undefined` means any axis */\n  @Prop() orientation?: 'horizontal' | 'vertical';\n\n  /** Dragged items by default, will take whatever default css is applied in situ.\n   * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\n   * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.  */\n  @Prop() dragResize = false;\n\n  /** Fired when an the order changes. Use this to update any underlying data model.\n   * `event.preventDefault()` to prevent the element being moved; will revert to original position. */\n  @Event() nanoOrderChange: EventEmitter<{\n    element: HTMLElement;\n    originalIndex: number;\n    targetIndex: number;\n  }>;\n\n  /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n   * `event.preventDefault()` to prevent the element being picked-up. */\n  @Event() nanoGrabbed: EventEmitter<{ element: HTMLElement; index: number }>;\n\n  /** Fired when a sortable element is dropped after having been picked up. */\n  @Event() nanoDropped: EventEmitter<{ element: HTMLElement }>;\n\n  /** If sortable elements change dynamically, use this method to add handle controls to new elements */\n  @Method()\n  async refreshKeyboardHandles() {\n    if (this.handleSelector) {\n      if (this.keyboardHandleMap?.size) {\n        this.keyboardHandleMap.clear();\n      }\n\n      this.sortableHost\n        .querySelectorAll<HTMLElement>(this.handleSelector)\n        .forEach((handle) => {\n          if (!handle.getAttribute('aria-describedby'))\n            handle.setAttribute('aria-describedby', this.sortableId);\n          const sortEle = handle.closest<HTMLElement>(this.itemSelector);\n          if (sortEle) this.keyboardHandleMap.set(handle, sortEle);\n        });\n      return;\n    }\n\n    if (this.keyboardHandleMap?.size) {\n      this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());\n      this.keyboardHandleMap.clear();\n    }\n    this.sortableHost\n      .querySelectorAll<HTMLElement>(this.itemSelector)\n      .forEach((ele, i) => {\n        const handle = this.createKeyboardHandle(i, ele);\n        if (!handle) {\n          console.error(\n            '`createKeyboardHandle` *must* return the handle element it creates'\n          );\n          return;\n        }\n        this.keyboardHandleMap.set(handle, ele);\n        handle.setAttribute('aria-describedby', this.sortableId);\n      });\n  }\n\n  /// Private state & logic ///\n\n  @Element() host: HTMLNanoSortableElement;\n  private dragRequestPending = false;\n  private draggedElement?: HTMLElement;\n  private draggedElementClone?: HTMLElement;\n  private draggedElementOrigin?: HTMLElement;\n  private sortableNodes: HTMLElement[] = [];\n  private dropzoneNodes: HTMLElement[] = [];\n  private animatedElements: HTMLElement[] = [];\n  private animationPromise?: Promise<void>;\n  private keyboardHandleMap: Map<HTMLElement, HTMLElement> = new Map();\n  private sortableId = `nano-sortable-${sortableIds++}`;\n  private mouseDownTimer: number;\n  private mutationObserver: MutationObserver;\n\n  @State() keyboardSortActive = false;\n  @State() ariaTextList: string[] = [];\n\n  /**\n   * Get instance of sortable host.\n   * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`\n   */\n  get sortableHost() {\n    if (this.sortableHostElement) return this.sortableHostElement;\n    return this.host;\n  }\n\n  /**\n   * Queues aria messages which are then displayed in a 'live' region.\n   * Messages are cleared after 10s\n   * @param msg aria message to announce\n   */\n  private addAriaMsg(msg: string) {\n    this.ariaTextList = [...this.ariaTextList, msg];\n\n    setTimeout(() => {\n      const mIdx = this.ariaTextList.indexOf(msg);\n      this.ariaTextList.splice(mIdx, 1);\n      this.ariaTextList = [...this.ariaTextList];\n    }, 10000);\n  }\n\n  /**\n   * Try to stop text highlight whilst dragging\n   * @param userSelect\n   */\n  private updateUserSelectStyle(userSelect: '' | 'none') {\n    this.host.style.userSelect = userSelect;\n    // @ts-ignore\n    this.host.style.MozUserSelect = userSelect;\n    // @ts-ignore\n    this.host.style.msUserSelect = userSelect;\n    this.host.style.webkitUserSelect = userSelect;\n  }\n\n  /**\n   * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the\n   * given targets. Returns an array of matches.\n   * @param node\n   * @param targets\n   * @returns all the items that currently intersect with the target node\n   */\n  private hitTest(node: HTMLElement, targets: HTMLElement[]): HTMLElement[] {\n    const {\n      left: l,\n      top: t,\n      width: w,\n      height: h,\n    } = node.getBoundingClientRect();\n    const x = l + w / 2;\n    const y = t + h / 2;\n\n    return targets.filter((item) => {\n      const { left, right, top, bottom } = item.getBoundingClientRect();\n      return !(x < left || x > right || y < top || y > bottom);\n    });\n  }\n\n  /**\n   * Returns a boolean indicating whether the node is currently in an animation.\n   * @param node\n   * @returns whether a node is currently animating or not\n   */\n  private isAnimating(node: HTMLElement) {\n    return this.animatedElements.indexOf(node) !== -1;\n  }\n\n  /**\n   * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as\n   * if nodes animate from their old to their new position in the dom. */\n  private animateNode(node: HTMLElement, dx = 0, dy = 0) {\n    if (!node.animate) {\n      return;\n    }\n\n    // keep a stack of currently animating nodes to exclude as drag & drop targets.\n    this.animatedElements.push(node);\n\n    node.style.willChange = 'transform';\n\n    // animate from dx/dy (old node position) to none (new node position)\n    writeTask(() => {\n      this.animationPromise = new Promise((resolve) => {\n        node\n          .animate(\n            [\n              { transform: `translate3d(${dx}px, ${dy}px, 0)` },\n              { transform: 'none' },\n            ],\n            this.animationTiming\n          )\n          .addEventListener(\n            'finish',\n            () => {\n              const index = this.animatedElements.indexOf(node);\n              node.style.willChange = '';\n\n              if (index !== -1) {\n                // splice out when done to unlock as a valid target\n                this.animatedElements.splice(index, 1);\n              }\n\n              resolve();\n              delete this.animationPromise;\n            },\n            { once: true }\n          );\n      });\n    });\n  }\n\n  /**\n   * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;\n   * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very\n   * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because\n   * of this dom update */\n  private insertAtTarget(node: Element, target: HTMLElement) {\n    if (!node || !target) return;\n\n    let offsets: any[] = [];\n    if (this.animationEnabled) {\n      offsets = this.sortableNodes.map((item) => ({\n        x: item.offsetLeft,\n        y: item.offsetTop,\n      }));\n    }\n\n    if (!node.isConnected || !target.isConnected) return;\n\n    if (this.dropzoneNodes.indexOf(target) > -1) {\n      target.append(node);\n    } else {\n      const nodeComparison = node.compareDocumentPosition(target);\n      let position;\n\n      if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {\n        position =\n          target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';\n      }\n      if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {\n        position =\n          target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';\n      }\n      if (position) target.insertAdjacentElement(position, node);\n    }\n\n    if (this.animationEnabled) {\n      this.sortableNodes.forEach((sortableNode, i) => {\n        const { x, y } = offsets[i];\n        const dx = x - sortableNode.offsetLeft;\n        const dy = y - sortableNode.offsetTop;\n        if (dx !== 0 || dy !== 0) {\n          this.animateNode(sortableNode, dx, dy);\n        }\n      });\n    }\n  }\n\n  private reset() {\n    if (\n      this.draggedElementClone !== undefined &&\n      this.draggedElementClone.parentNode !== null\n    ) {\n      this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);\n    }\n\n    if (\n      this.draggedElement &&\n      this.draggedElement.parentNode &&\n      this.draggedElementOrigin\n    ) {\n      this.draggedElement.classList.remove(this.placeholderClass);\n    }\n\n    if (this.dropzoneActiveClass && this.dropzoneNodes.length) {\n      this.dropzoneNodes.forEach((dze) =>\n        dze.classList.remove(this.dropzoneActiveClass)\n      );\n    }\n\n    delete this.draggedElementClone;\n    delete this.draggedElement;\n\n    this.dropzoneNodes = [];\n    this.sortableNodes = [];\n    this.animatedElements = [];\n    this.dragRequestPending = false;\n    this.updateUserSelectStyle('');\n  }\n\n  /**\n   * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.\n   * Clone styles are added onto the style object directly, since the ::slotted()\n   * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep\n   * @param node html node to clone\n   * @returns the cloned html node\n   */\n  private createClone(node: HTMLElement): HTMLElement {\n    const clone = node.cloneNode(true) as HTMLElement;\n    if (node.id) clone.id = 'clone__' + clone.id;\n\n    /**\n     * Bugfix for table row sorting.\n     * During dragging table rows shrink, so we manually set them width of original node.\n     */\n    Array.from(clone.children).forEach((nodeChild: HTMLElement, index) => {\n      const clonedNodeChild = nodeChild;\n      const originalNodeChild = node.children.item(index) as HTMLElement;\n\n      if (originalNodeChild) {\n        clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;\n      }\n    });\n    const {\n      offsetLeft: x,\n      offsetTop: y,\n      offsetWidth: w,\n      offsetHeight: h,\n    } = node;\n\n    Object.assign(clone.style, {\n      position: 'absolute',\n      left: `calc(${x}px - var(--grab-offset-x, 0px))`,\n      top: `calc(${y}px - var(--grab-offset-y, 0px))`,\n      height: this.dragResize ? `${h}px` : undefined,\n      width: this.dragResize ? `${w}px` : undefined,\n      willChange: 'transform,opacity',\n    });\n\n    clone.classList.add(this.draggedClass);\n\n    return node.parentNode!.appendChild(clone);\n  }\n\n  /// Event handlers ///\n\n  private removeEventHandlers(ele?: HTMLElement) {\n    ele = ele || this.sortableHost;\n    ele.removeEventListener('mousedown', this.handleTrack);\n    ele.removeEventListener('touchstart', this.handleTrack);\n    ele.removeEventListener('keydown', this.handleKeydown);\n  }\n\n  private addEventHandlers(ele?: HTMLElement) {\n    ele = ele || this.sortableHost;\n    addListeners(ele, 'mousedown touchstart', this.handleTrack, {\n      passive: true,\n    });\n    ele.addEventListener('keydown', this.handleKeydown);\n  }\n\n  /**\n   * Watch for any changes in grab-able handle elements.\n   */\n  private attachMutationObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n\n    this.mutationObserver = new MutationObserver(() => {\n      const currHandles = Array.from(this.keyboardHandleMap.values());\n      const newHandles = Array.from(\n        this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n      );\n\n      // simple test for equality\n      if (\n        currHandles.length !== newHandles.length ||\n        !!newHandles.find((h) => !currHandles.includes(h))\n      ) {\n        this.refreshKeyboardHandles();\n      }\n    });\n    this.mutationObserver.observe(this.sortableHost, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const targetElement = e.target as HTMLElement;\n    let foundHandle: HTMLElement;\n    let sortEle: HTMLElement;\n\n    if (this.handleSelector) {\n      foundHandle = targetElement.closest(this.handleSelector);\n      sortEle = targetElement.closest(this.itemSelector);\n    } else {\n      sortEle = this.keyboardHandleMap.get(targetElement);\n      foundHandle = targetElement;\n    }\n\n    // have we found a handle and matching sort element from the keydown element\n    if (!foundHandle || !sortEle) return;\n\n    const activateSort = (isActive: boolean) => {\n      this.keyboardSortActive = isActive;\n      this.draggedElement = isActive ? sortEle : undefined;\n      sortEle.classList.toggle(this.draggedClass, isActive);\n      foundHandle.classList.toggle(this.handleDraggedClass, isActive);\n\n      if (isActive) {\n        this.addAriaMsg(this.grabbedHelperText(sortEle));\n        document.addEventListener('mousedown', () => activateSort(false), {\n          once: true,\n        });\n      } else {\n        this.addAriaMsg(this.droppedHelperText(sortEle));\n      }\n    };\n\n    // start editing this element's order?\n    if ([' ', 'Space', 'Enter'].includes(e.key)) {\n      e.preventDefault();\n\n      if (!this.keyboardSortActive) {\n        // grabbed the element\n        activateSort(true);\n\n        this.sortableNodes =\n          Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||\n          [];\n        const nanoGrabbedEv = this.nanoGrabbed.emit({\n          element: sortEle,\n          index: this.sortableNodes.indexOf(sortEle),\n        });\n\n        if (nanoGrabbedEv.defaultPrevented) {\n          activateSort(false);\n          return;\n        }\n      } else {\n        // dropped the element\n        activateSort(false);\n        this.nanoDropped.emit({ element: sortEle });\n      }\n      return;\n    }\n    if (!this.keyboardSortActive) return;\n\n    // Tabbing away from this handle - deactivate\n    if (['Escape', 'Tab'].includes(e.key)) activateSort(false);\n\n    let moveKeys = ['Home', 'End'];\n    if (!this.orientation || this.orientation === 'horizontal')\n      moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];\n    if (!this.orientation || this.orientation === 'vertical')\n      moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];\n\n    if (!moveKeys.includes(e.key)) return;\n\n    // move the element with the keyboard\n    e.preventDefault();\n\n    /** Collect all elements that have drag positions.\n     * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */\n\n    this.sortableNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n    this.dropzoneNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n      [];\n    const currIdx = this.sortableNodes.indexOf(this.draggedElement);\n    let curDzIdx: number = -1;\n\n    if (this.dropzoneNodes.length) {\n      const curDropzone = this.draggedElement.closest<HTMLElement>(\n        this.dropzoneSelector\n      );\n      curDzIdx = this.dropzoneNodes.indexOf(curDropzone);\n      curDzIdx = curDzIdx > -1 ? curDzIdx : -1;\n    }\n\n    /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */\n    const prevEle =\n      currIdx - 1 < 0 && curDzIdx > -1\n        ? this.dropzoneNodes[curDzIdx - 1]\n        : this.sortableNodes[currIdx - 1];\n    const nextEle =\n      currIdx + 1 === this.sortableNodes.length && curDzIdx > -1\n        ? this.dropzoneNodes[curDzIdx + 1]\n        : this.sortableNodes[currIdx + 1];\n\n    if (e.key === 'Home') {\n      this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);\n    }\n    if (e.key === 'End') {\n      this.insertAtTarget(\n        this.draggedElement,\n        this.sortableNodes[this.sortableNodes.length - 1]\n      );\n    }\n    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {\n      this.insertAtTarget(this.draggedElement, nextEle);\n    }\n    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {\n      this.insertAtTarget(this.draggedElement, prevEle);\n    }\n\n    this.finishOrder();\n    this.draggedElement = sortEle;\n\n    const focus = () => {\n      requestAnimationFrame(() => {\n        typeof foundHandle['setFocus'] === 'function'\n          ? (foundHandle as HTMLNanoIconButtonElement).setFocus()\n          : foundHandle.focus();\n      });\n    };\n\n    // replace focus to handle so we don't 'drop' the element\n    if (this.animationPromise) this.animationPromise.then(() => focus());\n    else focus();\n  }\n\n  /** Tracks a pointer from touchstart/mousedown to touchend/mouseup. */\n  private handleTrack(e: PointerEvent) {\n    // ignore if we've started dragging or right click\n    if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n    // ignore touchmove events (namespace it so we can remove it)\n    const handleMove = (e: Event) => {\n      if (e.cancelable) e.preventDefault();\n      clearTimeout(this.mouseDownTimer);\n    };\n\n    // remove temporary events and reset timer\n    const resetTrack = () => {\n      clearTimeout(this.mouseDownTimer);\n      document.removeEventListener('touchmove', handleMove);\n      document.removeEventListener('contextmenu', this.finishOrder);\n    };\n    resetTrack();\n\n    // start a timer - only start dragging if pressed for 150ms\n    this.mouseDownTimer = window?.setTimeout(() => {\n      // ignore if this is not a valid drag target\n      if (!this.trackStart(e)) return;\n\n      // ignore touchmove events (they scroll the screen)\n      document.addEventListener('touchmove', handleMove, {\n        passive: false,\n      });\n      // cancel if user presses and holds (without move) for context menu\n      document.addEventListener('contextmenu', this.finishOrder);\n\n      this.addAriaMsg(this.grabbedHelperText(this.draggedElement));\n\n      drag(this.sortableHost, {\n        initialEvent: e,\n        relative: true,\n        onMove: (x, y) => {\n          this.trackMove(x, y);\n        },\n        onStop: () => {\n          this.nanoDropped.emit({ element: this.draggedElement });\n          resetTrack();\n\n          const didStop = () => {\n            this.addAriaMsg(this.droppedHelperText(this.draggedElement));\n            requestAnimationFrame(() => this.finishOrder());\n          };\n          if (this.animationPromise) {\n            this.animationPromise.then(() => didStop());\n          } else didStop();\n        },\n      });\n    }, 150);\n\n    // reset track timer & cancel DnD on mouseup / touchend / touchmove\n    addListeners(\n      document,\n      'mouseup touchend touchmove',\n      () => clearTimeout(this.mouseDownTimer),\n      { once: true }\n    );\n  }\n\n  /**\n   * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.\n   * OR If a handleSelector is defined, a node matching this selector must be clicked instead\n   * @returns boolean - whether tracking for this event should continue or not\n   */\n  private trackStart(e: Event) {\n    const targetElement = e.target as HTMLElement;\n    let targetHandle: HTMLElement;\n\n    // If we have a handle set, return now if not being pressed\n    if (this.handleSelector) {\n      targetHandle = targetElement.closest(this.handleSelector);\n\n      if (!targetHandle) return;\n      targetHandle.classList.add(this.handleDraggedClass);\n    }\n\n    // Check that we've found the target element via itemSelector\n    const node = targetElement.closest<HTMLElement>(this.itemSelector);\n    if (!node) return false;\n\n    this.sortableNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n    const nanoGrabbedEv = this.nanoGrabbed.emit({\n      element: node,\n      index: this.sortableNodes.indexOf(node),\n    });\n    if (nanoGrabbedEv.defaultPrevented) return false;\n\n    // Element found... start everything\n    e.preventDefault();\n    this.updateUserSelectStyle('none');\n    this.dragRequestPending = true;\n    this.draggedElement = node;\n    this.dropzoneNodes =\n      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n      [];\n    this.draggedElementClone = this.createClone(node);\n    this.draggedElementOrigin = node.nextSibling as HTMLElement;\n    this.animatedElements = [];\n    this.draggedElement!.classList.add(this.placeholderClass);\n    return true;\n  }\n\n  /** Ends re-ordering */\n  private finishOrder = () => {\n    if (!this.draggedElement) return;\n\n    const updated = Array.from(\n      this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n    ).filter((ele) => ele !== this.draggedElementClone);\n    const originalIndex = this.sortableNodes.indexOf(this.draggedElement);\n    const targetIndex = updated.indexOf(this.draggedElement);\n\n    if (this.handleSelector) {\n      const targetHandle = this.draggedElement.querySelector(\n        this.handleSelector\n      );\n      targetHandle.classList.remove(this.handleDraggedClass);\n    }\n\n    if (originalIndex !== targetIndex) {\n      const orderChangeEv = this.nanoOrderChange.emit({\n        element: this.draggedElement,\n        originalIndex,\n        targetIndex,\n      });\n\n      if (orderChangeEv.defaultPrevented) {\n        /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */\n        this.animationPromise = new Promise((resolve) => {\n          setTimeout(() => {\n            this.insertAtTarget(this.draggedElement, updated[originalIndex]);\n            this.reset();\n            this.dragRequestPending = false;\n            resolve();\n          }, 200);\n        });\n        return;\n      }\n      this.addAriaMsg(\n        this.reorderHelperText(this.draggedElement, updated, targetIndex + 1)\n      );\n    }\n\n    this.reset();\n    this.dragRequestPending = false;\n  };\n\n  /**\n   * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is\n   * the insert point for updated sorting */\n  private trackMove = (x: number, y: number) => {\n    if (!this.draggedElementClone) {\n      return;\n    }\n\n    if (this.orientation) {\n      x = x * orientationMap[this.orientation].x;\n      y = y * orientationMap[this.orientation].y;\n    }\n\n    writeTask(() => {\n      Object.assign(this.draggedElementClone!.style, {\n        transform: `translate3d(${x}px, ${y}px, 0)`,\n      });\n    });\n\n    let target = this.hitTest(this.draggedElementClone!, this.sortableNodes)[0];\n    let activeDropzone: HTMLElement;\n\n    if (this.dropzoneSelector && this.dropzoneActiveClass) {\n      readTask(() => {\n        activeDropzone = this.draggedElement.closest(this.dropzoneSelector);\n\n        writeTask(() => {\n          this.dropzoneNodes\n            .filter((dze) => dze !== activeDropzone)\n            .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));\n          activeDropzone.classList.add(this.dropzoneActiveClass);\n        });\n      });\n    }\n\n    // didn't find a target - let's test to see if we can use a drop-zone instead\n    if (!target && this.dropzoneNodes.length) {\n      target = this.hitTest(this.draggedElementClone!, this.dropzoneNodes)[0];\n      if (this.draggedElement.closest(this.dropzoneSelector) === target) return;\n    }\n\n    if (\n      // if clone intersects with a valid target,\n      target &&\n      // other than its own origin,\n      target !== this.draggedElement &&\n      // and the target isn't currently animating, which causes false hit tests,\n      !this.isAnimating(target)\n    ) {\n      this.insertAtTarget(this.draggedElement!, target);\n    }\n  };\n\n  /// Component lifecycle ///\n\n  constructor() {\n    this.handleTrack = this.handleTrack.bind(this);\n    this.handleKeydown = this.handleKeydown.bind(this);\n    this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);\n    this.refreshKeyboardHandles = nanoDebounce(\n      this.refreshKeyboardHandles,\n      500\n    );\n  }\n\n  connectedCallback() {\n    this.addEventHandlers();\n    this.refreshKeyboardHandles();\n    this.attachMutationObserver();\n\n    if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {\n      // inject a light-dom / a11y description that we can connect sortable items to\n      this.host.insertAdjacentHTML(\n        'beforeend',\n        `<div class=\"visually-hidden\" id=\"${this.sortableId}\">${this.helperText}</div>`\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventHandlers();\n    this.host.querySelector(`#${this.sortableId}`)?.remove();\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"sortable__live-region\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions\"\n          aria-atomic=\"true\"\n          role=\"log\"\n          part=\"announcements\"\n        >\n          {this.ariaTextList.map((str) => (\n            <div>{str}</div>\n          ))}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/{p-1b687f96.entry.js → p-d0eefd52.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,h as o,a as i,g as n}from"./p-f6a8467a.js";import{g as r,a as s}from"./p-257432ff.js";import{s as e}from"./p-d7c34990.js";import{C as d}from"./p-a6ff5ca6.js";import{c as h}from"./p-411bb8f1.js";import{d as l}from"./p-f6de2d5d.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const c=':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) var(--border-radius) 0 0;--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);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--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 .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{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-radius:var(--content-border-radius)}';const b=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=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home")i=0;if(t.key==="End")i=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")i=Math.max(0,i-1);if(t.key==="ArrowDown")i=Math.min(o.length-1,i+1)}o[i].setFocus();if(this.placement==="top"){e(o[i],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 i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const d=this.getAllActiveTabs;const h=d.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(d[h+t]){this.setActiveTab(d[h+t]);if(Math.abs(r)>Math.abs(s)){if(r>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;l(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;l(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 r(this.host,"nano-tab")}get getAllPanels(){return r(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)){e(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;if(!a)return;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const i=a.clientHeight;const n=s(a,this.tabs);if(!this.activeTabIndicator)return;const r=n.top+this.nav.scrollTop;const e=n.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=`${i}px`;this.activeTabIndicator.style.transform=`translateY(${r}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 i=t.target;if(o<0)return;const n=this.getAllPanels.find((t=>t.name===i.panel));if(!n)return;t.stopImmediatePropagation();const r=this.nanoTabWillClose.emit({name:i.panel});if(r.defaultPrevented)return;if(i.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)}i.remove();n.remove();this.nanoTabClose.emit({name:i.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);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(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(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:Object.assign({},h(this.color)),dir:this.isRtl?"rtl":null},o("div",{part:"base",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",{disabled:!this.hasScrollControls,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",{disabled:!this.hasScrollControls,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 n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};b.style=c;export{b as nano_tab_group};
-//# sourceMappingURL=p-1b687f96.entry.js.map
+import{r as t,c as a,h as o,a as i,g as n}from"./p-f6a8467a.js";import{g as r,a as s}from"./p-257432ff.js";import{s as e}from"./p-d7c34990.js";import{C as d}from"./p-1a0b5bc3.js";import{c as h}from"./p-411bb8f1.js";import{d as l}from"./p-f6de2d5d.js";import"./p-7bff5224.js";import"./p-69a3e911.js";const c=':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) var(--border-radius) 0 0;--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);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--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 .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{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-radius:var(--content-border-radius)}';const b=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=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home")i=0;if(t.key==="End")i=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")i=Math.max(0,i-1);if(t.key==="ArrowDown")i=Math.min(o.length-1,i+1)}o[i].setFocus();if(this.placement==="top"){e(o[i],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 i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const d=this.getAllActiveTabs;const h=d.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(d[h+t]){this.setActiveTab(d[h+t]);if(Math.abs(r)>Math.abs(s)){if(r>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;l(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;l(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 r(this.host,"nano-tab")}get getAllPanels(){return r(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)){e(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;if(!a)return;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const i=a.clientHeight;const n=s(a,this.tabs);if(!this.activeTabIndicator)return;const r=n.top+this.nav.scrollTop;const e=n.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=`${i}px`;this.activeTabIndicator.style.transform=`translateY(${r}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 i=t.target;if(o<0)return;const n=this.getAllPanels.find((t=>t.name===i.panel));if(!n)return;t.stopImmediatePropagation();const r=this.nanoTabWillClose.emit({name:i.panel});if(r.defaultPrevented)return;if(i.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)}i.remove();n.remove();this.nanoTabClose.emit({name:i.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);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(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(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:Object.assign({},h(this.color)),dir:this.isRtl?"rtl":null},o("div",{part:"base",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",{disabled:!this.hasScrollControls,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",{disabled:!this.hasScrollControls,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 n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};b.style=c;export{b as nano_tab_group};
+//# sourceMappingURL=p-d0eefd52.entry.js.map

package/dist/nano-components/{p-1a9d9956.entry.js → p-d74e2642.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,h as t,a as i,g as r}from"./p-f6a8467a.js";import{g as s}from"./p-411bb8f1.js";import{d as e}from"./p-9746b0a5.js";const a='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const c=class{constructor(t){o(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${h++}`;this.ignoreValueSet=false;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false;this.value=undefined}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(!this.checkboxes)return;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleValueChange(o){if(o.target===this.host)return;this.setInteralValue()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){var o;if(!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){var o;if(this.disabled===null||!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInteralValue(){var o;this.ignoreValueSet=true;const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(n===null||n===void 0?void 0:n.length){this.value=((o=n.find((o=>o.checked)))===null||o===void 0?void 0:o.value)||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}componentWillLoad(){this.showInlineValidation=e(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.nativeCbs.forEach((o=>{if(o)o.removeEventListener("invalid",this.handleInvalid)}))}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return t(i,Object.assign({},this.checkboxTypes),t("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},t("legend",{class:"nanogroupcb__legend",id:o},this.legend),t("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},t("slot",null)),(this.showInlineError||this.hasHelperSlot)&&t("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?t("div",{class:"nanogroupcb__error"},this.errorMessage):"",t("div",{class:"nanogroupcb__help"},t("slot",{name:"helper"})))))}get host(){return r(this)}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let h=0;c.style=a;export{c as nano_checkbox_group};
-//# sourceMappingURL=p-1a9d9956.entry.js.map
+import{r as o,c as n,h as t,a as i,g as r}from"./p-f6a8467a.js";import{g as s}from"./p-411bb8f1.js";import{d as e}from"./p-7bff5224.js";const a='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentcolor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentcolor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const c=class{constructor(t){o(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${h++}`;this.ignoreValueSet=false;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false;this.value=undefined}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}handleValuePropChange(){this.nanoChange.emit(this.value);if(this.ignoreValueSet)return;this.setCbValue()}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(!this.checkboxes)return;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleValueChange(o){if(o.target===this.host)return;this.setInteralValue()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){var o;if(!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){var o;if(this.disabled===null||!((o=this.checkboxes)===null||o===void 0?void 0:o.length))return;this.checkboxes.map((o=>o.disabled=this.disabled))}setInteralValue(){var o;this.ignoreValueSet=true;const n=this.nativeCbs.filter((o=>(o===null||o===void 0?void 0:o.type)==="radio"));if(n===null||n===void 0?void 0:n.length){this.value=((o=n.find((o=>o.checked)))===null||o===void 0?void 0:o.value)||null;return}this.value=this.checkboxes.flatMap((o=>o.checked?[o.value]:[]));requestAnimationFrame((()=>this.ignoreValueSet=false))}setCbValue(){this.checkboxes.forEach((o=>{if(o.value===this.value||Array.isArray(this.value)&&this.value.includes(o.value)){o.checked=true}}))}attachSlotObserver(){if(!!this.mo||!window["MutationObserver"])return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>{if(o)o.addEventListener("invalid",this.handleInvalid)}))}componentWillLoad(){this.showInlineValidation=e(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange();this.handleSlotChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.nativeCbs.forEach((o=>{if(o)o.removeEventListener("invalid",this.handleInvalid)}))}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return t(i,Object.assign({},this.checkboxTypes),t("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},t("legend",{class:"nanogroupcb__legend",id:o},this.legend),t("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},t("slot",null)),(this.showInlineError||this.hasHelperSlot)&&t("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?t("div",{class:"nanogroupcb__error"},this.errorMessage):"",t("div",{class:"nanogroupcb__help"},t("slot",{name:"helper"})))))}get host(){return r(this)}static get watchers(){return{value:["handleValuePropChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let h=0;c.style=a;export{c as nano_checkbox_group};
+//# sourceMappingURL=p-d74e2642.entry.js.map

package/dist/nano-components/{p-2e63676f.js → p-dfbf0d56.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{c as t}from"./p-59eb9caa.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-bd51e29f.js",import.meta.url).href;const e=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const r=URL.createObjectURL(e);const c=t(r,o,p);URL.revokeObjectURL(r);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
-//# sourceMappingURL=p-2e63676f.js.map
+import{c as t}from"./p-3de3449e.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-7bff5224.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-f258383d.js",import.meta.url).href;const e=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const r=URL.createObjectURL(e);const c=t(r,o,p);URL.revokeObjectURL(r);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-dfbf0d56.js.map

package/dist/nano-components/{p-bd51e29f.js → p-f258383d.js}

@@ -1,4 +1,4 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-(()=>{"use strict";const e=(e,t)=>{const n=globalThis[t];return n!=null&&e instanceof n};const t=n=>{if(n!=null){if(e(n,"ArrayBuffer")||e(n,"MessagePort")||e(n,"ImageBitmap")||e(n,"OffscreenCanvas")){return[n]}if(typeof n==="object"){if(n.constructor===Object){n=Object.values(n)}if(Array.isArray(n)){return n.flatMap(t)}return t(n.buffer)}}return[]};const n={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:e})=>{if(e&&e[0]===r){let i=e[1];let s=e[2];let f=e[3];let u=0;let c=f.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(f[u])&&f[u][0]===o){const e=f[u][1];f[u]=(...t)=>{postMessage([o,e,t])}}}a=await n[s](...f)}catch(e){a=null;if(e instanceof Error){l={isError:true,value:{message:e.message,name:e.name,stack:e.stack}}}else{l={isError:false,value:e}}a=undefined}const p=t(a);postMessage([r,i,a,l],p)}}));var i=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var s=1/0;var f="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof i=="object"&&i&&i.Object===Object&&i;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var h=d.toString;var w=p.Symbol;var y=w?w.prototype:undefined,g=y?y.toString:undefined;function b(e){if(typeof e=="string"){return e}if(m(e)){return g?g.call(e):""}var t=e+"";return t=="0"&&1/e==-s?"-0":t}function v(e){return!!e&&typeof e=="object"}function m(e){return typeof e=="symbol"||v(e)&&h.call(e)==f}function k(e){return e==null?"":b(e)}function $(e){e=k(e);return e&&c.test(e)?e.replace(u,"\\$&"):e}var E=$;function x(e,t){if(typeof e==="string"){return t.checkString(e)}else if(typeof e==="number"){return t.checkNumber(e)}else{return false}}function A(e,t,n,r){if(typeof e==="object"){if(Array.isArray(e)){for(const o of e){if(A(o,t,n,r)){return true}}}else{for(const o in e){n.push(o);const i=A(e[o],t,n,r);n.pop();if(i)return true}}}else if(t.type==="exists"){if(t.key.test(n.join("."))){return!!e}else{return false}}else{const o=n.join(".");for(const e of r.ignorePaths){if(e.test(o))return false}if(r.includePaths){let e=false;for(const t of r.includePaths){if(t.test(o)){e=true;break}}if(!e)return false}if(t.key){if(!t.key.test(o))return false}return x(e,t)}return false}function j(e,t,n,r){if(t.length){let o=false;for(const i of t){if(A(e,i,[],r)?!i.negate:i.negate){if(n==="OR"){return true}o=true}else if(n==="AND"){return false}}return o}return true}function N(e,t){const n=[];let r=false;let o=0;let i="";for(let s=0;s<e.length;s++){const f=e[s];if(r){if(f===i){r=false;i=""}}else if(f==='"'||f==="'"){r=true;i=f}else if(f.match(t)&&!r){n.push(e.slice(o,s).trim());o=s+1}if(s===e.length-1){n.push(e.slice(o).trim())}}return n.map((e=>{if(e.startsWith('"')&&e.endsWith('"')){return e.slice(1,-1)}if(e.startsWith("'")&&e.endsWith("'")){return e.slice(1,-1)}return e})).filter((e=>e))}const O={"<":function e(t){const n=Number(t[0]);return e=>e<n},"<=":function e(t){const n=Number(t[0]);return e=>e<=n},"=":function e(t){const n=t[0].split(",").filter((e=>e)).map(Number);return e=>{for(let t=0;t<n.length;t++){if(e===n[t]){return true}}return false}},">=":function e(t){const n=Number(t[0]);return e=>e>=n},">":function e(t){const n=Number(t[0]);return e=>e>n},"..":function e(t){const n=Number(t[0]);const r=Number(t[1]);return e=>e>=n&&e<=r}};function P(e){const{values:t,operator:n}=R(e);const r=O[n];if(!r){throw new Error(`unknown operator ${n}`)}return r(t)}function R(e){const t=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.\s*)?\s*(?<firstValue>-?\d*\.?\d+)\s*(?:(?<afterDots>\.\.)\s*(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(e);if(!t){return{operator:"=",values:[e]}}if(!t.groups){throw new Error("unreachable")}const{startOperator:n,firstValue:r,afterDots:o,secondValue:i}=t.groups;let s=n;let f=r?[r]:[];if(n===".."){s="<="}else if(!n&&o&&!i){s=">="}else if(o){s=".."}if(i){f.push(i)}return{values:f,operator:s||"="}}const D={"<":function e(t){return e=>e<t[0]},"<=":function e(t){return e=>e<=t[0]},"=":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(`^${E(e)}$`,n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},"~":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(E(e),n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},">=":function e(t){return e=>e>=t[0]},">":function e(t){return e=>e>t[0]},"..":function e(t){return e=>e>=t[0]&&e<=t[1]}};function _(e,t){const{values:n,operator:r}=I(e);const o=D[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(n,t)}function I(e){const t=e.split("..");const n=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(t[0]);if(!n){return{operator:"~",values:[e]}}if(!n.groups){throw new Error("unreachable")}let{operator:r,value:o}=n.groups;let i=t[1]?.trim();let s=[o];if(t.length>1){r="..";if(!i){r=">="}else if(!o){s=[i];r="<="}else{s.push(i)}}return{operator:r||"~",values:s}}function S(e,t={pathAlias:{}}){const{caseSensitive:n,pathAlias:r}=t;const o=n?"":"i";let i=false;if(e.startsWith("-")){i=true;e=e.substring(1)}const s=e.indexOf(":");if(s>-1){const t=e.substring(s+1);if(s>0){const n=e.substring(0,s);if(n==="is"){return{type:"exists",negate:i,key:new RegExp(`(^|\\.)${E(t)}(\\.|$)`,o)}}else{return{type:"matches",negate:i,key:r[n]?r[n]:new RegExp(`(^|\\.)${E(n)}(\\.|$)`,o),checkNumber:P(t),checkString:_(t,o)}}}}return{type:"matches",negate:i,checkNumber:P(e),checkString:_(e,o)}}function M(e,t={pathAlias:{}}){return e.map((e=>S(e,t)))}function V(e,t){const{insensitive:n}=t;const r={};for(const[t,o]of Object.entries(e)){if(o instanceof RegExp){r[t]=o}else{r[t]=new RegExp(`(^|\\.)${E(o)}(\\.|$)`,n)}}return r}function T(e,t={}){let{index:n=false,predicate:r="AND",ignorePaths:o=[],includePaths:i,pathAlias:s={}}=t;const f=t.limit?t.limit:Infinity;const u=t.caseSensitive?"":"i";let c=t.keywords||[];const a=V(s,{insensitive:u});const l=o.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e));const p=i?i.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e)):undefined;if(typeof c==="string"){c=N(c,/[ \t\r\n]/)}const d=M(c,{caseSensitive:t.caseSensitive,pathAlias:a});let h=0;if(n){const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(n)}}return t}else{const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(e[n])}}return t}}const B=new Map;function F(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function C(e,t){const n=F();B.set(n,{rows:e,columns:X(t)});return n}async function L(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.rows=t;if(!n.rows&&!n.columns)Y(e);return true}async function q(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.columns=X(t);if(!n.rows&&!n.columns)Y(e);return true}async function z(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.searchTerm=t;if(!t||!t.length){n.filterRows=n.rows;return W(n,n.rows)}const r=n.columns.filter((e=>e.searchable!==false));n.filterRows=T(n.rows,{keywords:t,predicate:"OR",includePaths:[...r.map((e=>e.prop))],ignorePaths:["__uuid","__index"]});return W(n,n.filterRows)}function G(e){return e.columns.filter((e=>e.filter!==undefined&&e.filter!==null)).reduce(((e,t)=>{const{prop:n,filter:r}=t;e.push({prop:n,filter:r});return e}),[])}function H(e,t,n=[]){if(!n||!n.length)n=G(e);if(!n||!n.length)return t;n.forEach((e=>{if(typeof e.filter==="boolean"){t=t.filter((t=>t[e.prop]===e.filter))}else{t=T(t,{keywords:e.filter,includePaths:[e.prop],ignorePaths:["__uuid","__index"]})}}));return t}async function J(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;const r=(!t||!t.length)&&n.searchTerm?await z(e,n.searchTerm):n.searchTerm?n.filterRows:n.rows;n.filterRows=H(n,r,t);return Q(n,n.filterRows)}function K(e){const t=e.columns.find((e=>!!e.order));if(t){const{prop:e,order:n}=t;return{prop:e,order:n}}return null}function Q(e,t,n,r){if(!n&&!r){const t=K(e);if(t){({prop:n,order:r}=t)}}if(!n||!r||!t.length)return t;const o=e.columns.find((e=>e.prop===n));if(!!(o===null||o===void 0?void 0:o.sortCompareFn)&&typeof o.sortCompareFn==="function"){const e=t.slice().sort(o.sortCompareFn(n,r));return e}if((o===null||o===void 0?void 0:o.type)==="text"&&typeof t[0][n]==="string"){const e=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;return r==="asc"?e[n].localeCompare(t[n]):t[n].localeCompare(e[n])}));return e}const i=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;if(e[n]<t[n])return r==="asc"?-1:1;if(e[n]>t[n])return r==="asc"?1:-1;return 0}));return i}async function U(e,t,n){const r=B.get(e);if(!r)throw"cannot find worker with ID "+e;const o=r.filterRows||r.rows;return Q(r,o,t,n)}function W(e,t){t=H(e,t);return Q(e,t)}function X(e){return e.map((e=>{if(!!(e===null||e===void 0?void 0:e.sortCompareFn)){e.sortCompareFn=new Function("return "+e.sortCompareFn)()}return e}))}async function Y(e){B.delete(e)}n.createWorkerStore=C;n.destroyWorkerStore=Y;n.syncConfigToWorker=q;n.syncDataToWorker=L;n.workerFilter=J;n.workerSearch=z;n.workerSort=U})();
+(()=>{"use strict";const e=(e,t)=>{const n=globalThis[t];return n!=null&&e instanceof n};const t=n=>{if(n!=null){if(e(n,"ArrayBuffer")||e(n,"MessagePort")||e(n,"ImageBitmap")||e(n,"OffscreenCanvas")){return[n]}if(typeof n==="object"){if(n.constructor===Object){n=Object.values(n)}if(Array.isArray(n)){return n.flatMap(t)}return t(n.buffer)}}return[]};const n={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:e})=>{if(e&&e[0]===r){let i=e[1];let s=e[2];let f=e[3];let u=0;let c=f.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(f[u])&&f[u][0]===o){const e=f[u][1];f[u]=(...t)=>{postMessage([o,e,t])}}}a=await n[s](...f)}catch(e){a=null;if(e instanceof Error){l={isError:true,value:{message:e.message,name:e.name,stack:e.stack}}}else{l={isError:false,value:e}}a=undefined}const p=t(a);postMessage([r,i,a,l],p)}}));var i=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var s=1/0;var f="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof i=="object"&&i&&i.Object===Object&&i;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var h=d.toString;var w=p.Symbol;var y=w?w.prototype:undefined,g=y?y.toString:undefined;function b(e){if(typeof e=="string"){return e}if(m(e)){return g?g.call(e):""}var t=e+"";return t=="0"&&1/e==-s?"-0":t}function v(e){return!!e&&typeof e=="object"}function m(e){return typeof e=="symbol"||v(e)&&h.call(e)==f}function k(e){return e==null?"":b(e)}function $(e){e=k(e);return e&&c.test(e)?e.replace(u,"\\$&"):e}var E=$;function x(e,t){if(typeof e==="string"){return t.checkString(e)}else if(typeof e==="number"){return t.checkNumber(e)}else{return false}}function A(e,t,n,r){if(typeof e==="object"){if(Array.isArray(e)){for(const o of e){if(A(o,t,n,r)){return true}}}else{for(const o in e){n.push(o);const i=A(e[o],t,n,r);n.pop();if(i)return true}}}else if(t.type==="exists"){if(t.key.test(n.join("."))){return!!e}else{return false}}else{const o=n.join(".");for(const e of r.ignorePaths){if(e.test(o))return false}if(r.includePaths){let e=false;for(const t of r.includePaths){if(t.test(o)){e=true;break}}if(!e)return false}if(t.key){if(!t.key.test(o))return false}return x(e,t)}return false}function j(e,t,n,r){if(t.length){let o=false;for(const i of t){if(A(e,i,[],r)?!i.negate:i.negate){if(n==="OR"){return true}o=true}else if(n==="AND"){return false}}return o}return true}function N(e,t){const n=[];let r=false;let o=0;let i="";for(let s=0;s<e.length;s++){const f=e[s];if(r){if(f===i){r=false;i=""}}else if(f==='"'||f==="'"){r=true;i=f}else if(f.match(t)&&!r){n.push(e.slice(o,s).trim());o=s+1}if(s===e.length-1){n.push(e.slice(o).trim())}}return n.map((e=>{if(e.startsWith('"')&&e.endsWith('"')){return e.slice(1,-1)}if(e.startsWith("'")&&e.endsWith("'")){return e.slice(1,-1)}return e})).filter((e=>e))}const O={"<":function e(t){const n=Number(t[0]);return e=>e<n},"<=":function e(t){const n=Number(t[0]);return e=>e<=n},"=":function e(t){const n=t[0].split(",").filter((e=>e)).map(Number);return e=>{for(let t=0;t<n.length;t++){if(e===n[t]){return true}}return false}},">=":function e(t){const n=Number(t[0]);return e=>e>=n},">":function e(t){const n=Number(t[0]);return e=>e>n},"..":function e(t){const n=Number(t[0]);const r=Number(t[1]);return e=>e>=n&&e<=r}};function R(e){const{values:t,operator:n}=D(e);const r=O[n];if(!r){throw new Error(`unknown operator ${n}`)}return r(t)}function D(e){const t=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.\s*)?\s*(?<firstValue>-?\d*\.?\d+)\s*(?:(?<afterDots>\.\.)\s*(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(e);if(!t){return{operator:"=",values:[e]}}if(!t.groups){throw new Error("unreachable")}const{startOperator:n,firstValue:r,afterDots:o,secondValue:i}=t.groups;let s=n;let f=r?[r]:[];if(n===".."){s="<="}else if(!n&&o&&!i){s=">="}else if(o){s=".."}if(i){f.push(i)}return{values:f,operator:s||"="}}const P={"<":function e(t){return e=>e<t[0]},"<=":function e(t){return e=>e<=t[0]},"=":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(`^${E(e)}$`,n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},"~":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(E(e),n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},">=":function e(t){return e=>e>=t[0]},">":function e(t){return e=>e>t[0]},"..":function e(t){return e=>e>=t[0]&&e<=t[1]}};function _(e,t){const{values:n,operator:r}=I(e);const o=P[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(n,t)}function I(e){const t=e.split("..");const n=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(t[0]);if(!n){return{operator:"~",values:[e]}}if(!n.groups){throw new Error("unreachable")}let{operator:r,value:o}=n.groups;let i=t[1]?.trim();let s=[o];if(t.length>1){r="..";if(!i){r=">="}else if(!o){s=[i];r="<="}else{s.push(i)}}return{operator:r||"~",values:s}}function S(e,t={pathAlias:{}}){const{caseSensitive:n,pathAlias:r}=t;const o=n?"":"i";let i=false;if(e.startsWith("-")){i=true;e=e.substring(1)}const s=e.indexOf(":");if(s>-1){const t=e.substring(s+1);if(s>0){const n=e.substring(0,s);if(n==="is"){return{type:"exists",negate:i,key:new RegExp(`(^|\\.)${E(t)}(\\.|$)`,o)}}else{return{type:"matches",negate:i,key:r[n]?r[n]:new RegExp(`(^|\\.)${E(n)}(\\.|$)`,o),checkNumber:R(t),checkString:_(t,o)}}}}return{type:"matches",negate:i,checkNumber:R(e),checkString:_(e,o)}}function M(e,t={pathAlias:{}}){return e.map((e=>S(e,t)))}function V(e,t){const{insensitive:n}=t;const r={};for(const[t,o]of Object.entries(e)){if(o instanceof RegExp){r[t]=o}else{r[t]=new RegExp(`(^|\\.)${E(o)}(\\.|$)`,n)}}return r}function T(e,t={}){let{index:n=false,predicate:r="AND",ignorePaths:o=[],includePaths:i,pathAlias:s={}}=t;const f=t.limit?t.limit:Infinity;const u=t.caseSensitive?"":"i";let c=t.keywords||[];const a=V(s,{insensitive:u});const l=o.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e));const p=i?i.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e)):undefined;if(typeof c==="string"){c=N(c,/[ \t\r\n]/)}const d=M(c,{caseSensitive:t.caseSensitive,pathAlias:a});let h=0;if(n){const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(n)}}return t}else{const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(e[n])}}return t}}const B=new Map;function F(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function C(e,t){const n=F();B.set(n,{rows:e,columns:X(t)});return n}async function L(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.rows=t;if(!n.rows&&!n.columns)Y(e);return true}async function q(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.columns=X(t);if(!n.rows&&!n.columns)Y(e);return true}async function z(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.searchTerm=t;if(!t||!t.length){n.filterRows=n.rows;return W(n,n.rows)}const r=n.columns.filter((e=>e.searchable!==false));n.filterRows=T(n.rows,{keywords:t,predicate:"OR",includePaths:[...r.map((e=>e.prop))],ignorePaths:["__uuid","__index"]});return W(n,n.filterRows)}function G(e){return e.columns.filter((e=>e.filter!==undefined&&e.filter!==null)).reduce(((e,t)=>{const{prop:n,filter:r}=t;e.push({prop:n,filter:r});return e}),[])}function H(e,t,n=[]){if(!n||!n.length)n=G(e);if(!n||!n.length)return t;n.forEach((e=>{if(typeof e.filter==="boolean"){t=t.filter((t=>t[e.prop]===e.filter))}else{t=T(t,{predicate:typeof e.filter==="string"?"AND":"OR",keywords:e.filter,includePaths:[e.prop],ignorePaths:["__uuid","__index"]})}}));return t}async function J(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;const r=(!t||!t.length)&&n.searchTerm?await z(e,n.searchTerm):n.searchTerm?n.filterRows:n.rows;n.filterRows=H(n,r,t);return Q(n,n.filterRows)}function K(e){const t=e.columns.find((e=>!!e.order));if(t){const{prop:e,order:n}=t;return{prop:e,order:n}}return null}function Q(e,t,n,r){if(!n&&!r){const t=K(e);if(t){({prop:n,order:r}=t)}}if(!n||!r||!t.length)return t;const o=e.columns.find((e=>e.prop===n));if(!!(o===null||o===void 0?void 0:o.sortCompareFn)&&typeof o.sortCompareFn==="function"){const e=t.slice().sort(o.sortCompareFn(n,r));return e}if((o===null||o===void 0?void 0:o.type)==="text"&&typeof t[0][n]==="string"){const e=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;return r==="asc"?e[n].localeCompare(t[n]):t[n].localeCompare(e[n])}));return e}const i=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;if(e[n]<t[n])return r==="asc"?-1:1;if(e[n]>t[n])return r==="asc"?1:-1;return 0}));return i}async function U(e,t,n){const r=B.get(e);if(!r)throw"cannot find worker with ID "+e;const o=r.filterRows||r.rows;return Q(r,o,t,n)}function W(e,t){t=H(e,t);return Q(e,t)}function X(e){return e.map((e=>{if(!!(e===null||e===void 0?void 0:e.sortCompareFn)){e.sortCompareFn=new Function("return "+e.sortCompareFn)()}return e}))}async function Y(e){B.delete(e)}n.createWorkerStore=C;n.destroyWorkerStore=Y;n.syncConfigToWorker=q;n.syncDataToWorker=L;n.workerFilter=J;n.workerSearch=z;n.workerSort=U})();

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -41,6 +41,8 @@ export declare class ResizeObserve implements ComponentInterface {
     x: boolean;
     y: boolean;
   }>;
+  /** Fires after any resizing */
+  nanoResize: EventEmitter<ResizeObserverEntry[]>;
   dimensionChanged(): void;
   statesChanged(): void;
   private assesContentFit;

package/dist/types/components/sortable/sortable.d.ts

@@ -174,7 +174,6 @@ export declare class Sortable implements ComponentInterface {
    * @returns the cloned html node
    */
   private createClone;
-  private addListeners;
   private removeEventHandlers;
   private addEventHandlers;
   /**

package/dist/types/components/sticker/sticker.d.ts

@@ -68,8 +68,8 @@ export declare class Sticker implements ComponentInterface {
    * By default, it will find traverse the DOM to find the closest. */
   scrollParent?: HTMLElement | Document;
   /** Upon being stuck, attach the sticker to another sticker element.
-   * A JS query selector that returns a <nano-sticker> */
-  stickTo: string;
+   * JS query selector string or DOM element pointing to a `<nano-sticker>`  */
+  stickTo: string | HTMLNanoStickerElement;
   /** Emitted when a sticker is stuck */
   nanoStuck: EventEmitter<{
     sticker: HTMLNanoStickerElement;

package/dist/types/components/table/table-interface.d.ts

@@ -10,13 +10,13 @@ export declare namespace TableTypes {
   /** Function called, via intersection observer, when an element's pinned status changes */
   type PinnedCb = (positions: {
     [key in Position]?: boolean;
-  }) => void;
+  }, target: Element) => void;
   /** Potential column ordering options */
   type Order = 'asc' | 'desc' | undefined;
   /** Column filtering */
   interface Filter {
     prop: TableTypes.Prop;
-    filter: string | boolean;
+    filter: string | boolean | string[];
   }
   /** Column sorting */
   interface Sort {
@@ -73,6 +73,15 @@ export declare namespace TableTypes {
   interface HFunc<T> {
     (sel: any, data: any, children: T): T;
   }
+  /**
+   * Properties that can be used with the row template `TableCell` jsx partial
+   */
+  type TableRowCellHelperProps = {
+    header?: boolean;
+    wrap?: boolean;
+    cellProps?: CellProps;
+    wrapperProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+  };
   /**
    * A row render function, called during a any row's render to the dom.
    * It can be used to add extra markup around any given table row
@@ -85,19 +94,17 @@ export declare namespace TableTypes {
   props: RowDataSchemaModel<P>, 
   /** a helper template to minimise boilerplate.
    * A shortcut for `<td><div class="nano-tbl__cell-content"></div></td>` */
-  TableCell: FunctionalComponent<{
-    header?: boolean;
-  }>) => T | undefined;
+  TableCell: FunctionalComponent<TableRowCellHelperProps>) => T | undefined;
   /**
    * A cell render function, called during any cell's render to the dom.
    * It can be used to add any markup within a table cell.
    */
-  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => T | string | undefined;
+  type CellTemplateFunc<T, P> = (createElement: HFunc<T>, props: RenderModel<P>) => TplResult;
   /**
    * A table header render function, called during any column's render to the dom.
    * It can be used to add any markup within a table header `th`.
    */
-  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => T | string | undefined;
+  type ColumnTemplateFunc<T, P> = (createElement: HFunc<T>, col: ColumnConfig<P>) => TplResult;
   /** A function used to assess the order of any given column.
    * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    */
@@ -120,6 +127,11 @@ export declare namespace TableTypes {
   type Prop = keyof RowData;
   /** Valid column data types */
   type ColumnType = 'text' | 'string' | 'number' | 'date' | 'boolean' | 'unknown';
+  type LibJSX = {
+    [key: string]: any;
+  };
+  type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];
+  type TplResult = JSXRender | string | Element | undefined;
   /**
    * A table column's configuration
    */
@@ -151,19 +163,19 @@ export declare namespace TableTypes {
     /** Whether to include this column when doing a general search. Defaults to true */
     searchable?: boolean;
     /** Current filters applied to this column  */
-    filter?: string | boolean;
+    filter?: string | boolean | string[];
     /**
      * A cell render function, called during any cell's render to the dom.
      * It can be used to add any markup within a table cell.
      */
-    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;
+    cellTemplate?: CellTemplateFunc<JSXRender, T>;
     /** A function which can be used to apply any html attribute/s onto a table cell `td` */
     cellProperties?: PropertiesFunc;
     /**
      * A table header render function, called during any column's render to the dom.
      * It can be used to add any markup within a table header `th`.
      */
-    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;
+    columnTemplate?: ColumnTemplateFunc<JSXRender, T>;
     /** A function which can be used to apply any html attribute/s onto a table head `th` */
     columnProperties?: ColPropertiesFunc<T>;
     /** A custom sorting comparator function - assess the order of any given column.
@@ -190,7 +202,7 @@ export declare namespace TableTypes {
    * controlling their visual state.
    */
   interface HeadFootRenderer<T = RowData> {
-    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` the footer */
+    /** Position prop. Defaults to `top` for the header and `bottom` the footer */
     pinned: Position;
     /**
      * A row render function, called during a any row's render to the dom.

package/dist/types/components/table/table.cell.d.ts

@@ -1,11 +1,4 @@
 import { FunctionalComponent, VNode } from '../../stencil-public-runtime';
-/**
- * Renders a cell using a custom renderer if set.
- * @param rowIndex - the current row index being rendered
- * @param colIndex - the current column index being rendered
- * @returns - a JSX node
- */
-export declare function cellRender(rowIndex: number, colIndex: number): VNode;
 export declare const baseCellClasses: (colIndex: number, toString?: boolean) => string | {
   [x: string]: boolean;
 };

package/dist/types/components/table/table.d.ts

@@ -16,7 +16,10 @@ import { TableTypes } from '../../interface';
  */
 export declare class Table implements ComponentInterface {
   constructor();
-  jsxRenderer: TableTypes.HFunc<any>;
+  /** Function called whenever `col.cellTemplate` renders an unknown object.
+   * The function should render a valid HTMLElement to the cell arg.
+   * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
+  customRenderer: (node: any, cell: HTMLElement) => void;
   /** The type of table. Grid type will make cells navigable by keyboard */
   type: 'grid' | 'table';
   /** A descriptive title of the table.
@@ -25,8 +28,8 @@ export declare class Table implements ComponentInterface {
   /** Show the caption on-screen */
   showCaption: boolean;
   /** Will show a loading state when set to true.
-   * By default, will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting.
+   * By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy
+   * *or* when performing custom filtering or sorting.
    * *Note* when set manually, will overwrite any internal loading state.
    * Set to 'undefined' to revert to default behaviour. */
   loading: boolean;
@@ -62,7 +65,7 @@ export declare class Table implements ComponentInterface {
   searchTerm: string;
   /** A custom filtering function. Should return a promise.
    * If the promise resolves as `true` the column UI will be updated.
-   * If the promise resolves as falsey, the sort will be performed by the component.
+   * If the promise resolves as falsy, the sort will be performed by the component.
    * A good use-case would be performing the filter on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
   customFilterFn?: (filters: TableTypes.Filter[]) => Promise<true | TableTypes.Falsy>;
@@ -86,6 +89,8 @@ export declare class Table implements ComponentInterface {
    */
   virtualTotalItems: number;
   virtualTotalItemsChangeHandler(): void;
+  /** @readonly - shows the currently applied filters */
+  get appliedFilters(): TableTypes.Filter[];
   /** Fired when the table has done it's first complete render */
   nanoTblReady: EventEmitter;
   /** Fired whenever a block is activated by scrolling into view / becoming visible
@@ -151,8 +156,6 @@ export declare class Table implements ComponentInterface {
   removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
   /** Updates a row model at a given index
    * @param row - the row to update.
-   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
-   * - rows are augmented with certain properties to aid with efficient rendering
    * @param rowIndex - the row index to insert this row
    */
   updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
@@ -167,6 +170,7 @@ export declare class Table implements ComponentInterface {
   private tableWrapperEle;
   private cacheScrollPosition;
   private activeWatcherIo;
+  private tablePinnedService;
   /** `tr` elements split into units - defined by `perBlock`
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
@@ -236,7 +240,6 @@ export declare class Table implements ComponentInterface {
   private scrollHandler;
   /** Process slotted content */
   private processSlots;
-  private handleColumnPinned;
   private handleResizeChange;
   /** Adds an IO. Makes sure our scroll listener is only active when
    * the table is in viewport */

package/dist/types/components/table/table.header.d.ts

@@ -4,7 +4,6 @@ type TableColHeadProps = {
   column: TableTypes.ColumnConfig;
   headRenderer: TableTypes.HeadFootRenderer;
   onColumnSortClick?: (order: TableTypes.Order, column: TableTypes.Prop, el: HTMLTableCellElement) => void;
-  onColumnPinned?: TableTypes.PinnedCb;
   defaults: {
     sortable?: boolean;
   };