@nanoporetech-digital/components 4.9.4 → 5.0.0

package/dist/collection/components/sortable/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"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","sourcesContent":["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 '../..';\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    ele.addEventListener('mousedown', this.handleTrack);\n    ele.addEventListener('touchstart', this.handleTrack);\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  /**\n   * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following\n   * the first actual move event following a touchstart/mousedown */\n  private handleTrack(e: PointerEvent) {\n    if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n    clearTimeout(this.mouseDownTimer);\n    this.mouseDownTimer = window?.setTimeout(() => {\n      if (!this.trackStart(e)) return;\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\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    }, 100);\n    document.addEventListener(\n      'mouseup',\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"]}

package/dist/collection/components/split-pane/split-pane.js

@@ -39,33 +39,35 @@ export class SplitPane {
       }
       // Prevent text selection when dragging
       e.preventDefault();
-      drag(this.host, (x, y) => {
-        let newPositionInPixels = this.vertical ? y : x;
-        this.nanoDragging.emit(newPositionInPixels);
-        // Flip for end panels
-        if (this.primary === 'end') {
-          newPositionInPixels = this.size - newPositionInPixels;
-        }
-        // Check snap points
-        if (this.snap) {
-          const snaps = this.snap.split(' ');
-          snaps.forEach((value) => {
-            let snapPoint;
-            if (value.endsWith('%')) {
-              snapPoint = this.size * (parseFloat(value) / 100);
-            }
-            else {
-              snapPoint = parseFloat(value);
-            }
-            if (newPositionInPixels >= snapPoint - this.snapThreshold &&
-              newPositionInPixels <= snapPoint + this.snapThreshold) {
-              newPositionInPixels = snapPoint;
-            }
-          });
-        }
-        this.shouldAnimate = false;
-        this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
-        requestAnimationFrame(() => (this.shouldAnimate = true));
+      drag(this.host, {
+        onMove: (x, y) => {
+          let newPositionInPixels = this.vertical ? y : x;
+          this.nanoDragging.emit(newPositionInPixels);
+          // Flip for end panels
+          if (this.primary === 'end') {
+            newPositionInPixels = this.size - newPositionInPixels;
+          }
+          // Check snap points
+          if (this.snap) {
+            const snaps = this.snap.split(' ');
+            snaps.forEach((value) => {
+              let snapPoint;
+              if (value.endsWith('%')) {
+                snapPoint = this.size * (parseFloat(value) / 100);
+              }
+              else {
+                snapPoint = parseFloat(value);
+              }
+              if (newPositionInPixels >= snapPoint - this.snapThreshold &&
+                newPositionInPixels <= snapPoint + this.snapThreshold) {
+                newPositionInPixels = snapPoint;
+              }
+            });
+          }
+          this.shouldAnimate = false;
+          this.position = clamp(this.pixelsToPercentage(newPositionInPixels), 0, 100);
+          requestAnimationFrame(() => (this.shouldAnimate = true));
+        },
       });
     };
     this.handleKeyDown = (event) => {

package/dist/collection/components/split-pane/split-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge\n   * as a percentage 0-100. Defaults to 50% of the container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      requestAnimationFrame(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    requestAnimationFrame(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    requestAnimationFrame(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EAGL,OAAO,EACP,IAAI,EACJ,CAAC,EACD,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,SAAS;EAOpB,IAAY,IAAI;IACd,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC5D,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;EACxC,CAAC;EAED,IAAY,aAAa;IACvB,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC;EAC7C,CAAC;EACD,IAAY,aAAa,CAAC,EAAW;IACnC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;EAC3B,CAAC;EAGD;IAhBQ,gBAAW,GAAG,KAAK,CAAC;IACpB,YAAO,GAAG,KAAK,CAAC;IAahB,mBAAc,GAAY,IAAI,CAAC;IA6JvC,iBAAiB;IAET,eAAU,GAAG,CAAC,CAAQ,EAAE,EAAE;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,uCAAuC;MACvC,CAAC,CAAC,cAAc,EAAE,CAAC;MAEnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACd,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;UACf,IAAI,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;UAEhD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;UAE5C,sBAAsB;UACtB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;YAC1B,mBAAmB,GAAG,IAAI,CAAC,IAAI,GAAG,mBAAmB,CAAC;WACvD;UAED,oBAAoB;UACpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEnC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;cACtB,IAAI,SAAiB,CAAC;cAEtB,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACvB,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;eACnD;mBAAM;gBACL,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;eAC/B;cAED,IACE,mBAAmB,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa;gBACrD,mBAAmB,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,EACrD;gBACA,mBAAmB,GAAG,SAAS,CAAC;eACjC;YACH,CAAC,CAAC,CAAC;WACJ;UACD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;UAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CACnB,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,EAC5C,CAAC,EACD,GAAG,CACJ,CAAC;UACF,qBAAqB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;QAC3D,CAAC;OACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IACE;QACE,WAAW;QACX,YAAY;QACZ,SAAS;QACT,WAAW;QACX,MAAM;QACN,KAAK;OACN,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EACrB;QACA,IAAI,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,IAAI,GACR,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEhE,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;UAC7C,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,EAC1C;UACA,WAAW,IAAI,IAAI,CAAC;SACrB;QAED,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;UAC9C,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC,EAC5C;UACA,WAAW,IAAI,IAAI,CAAC;SACrB;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;UACxB,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAChD;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;UACvB,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;SAChD;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAE3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3C,qBAAqB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;OAC1D;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;QAAE,OAAO;MAE9C,qCAAqC;MACrC,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACrE,qBAAqB,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC;OAC1D;IACH,CAAC,CAAC;;oBAxNkC,KAAK;oBAGL,KAAK;;;yBAgBjB,EAAE;6BAGE,GAAG;IAxE7B,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAClC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,GAAG,CACJ,CAAC;GACH;EAED;;;KAGG;EACH,IACI,QAAQ;IACV,OAAO,IAAI,CAAC,SAAS,CAAC;EACxB,CAAC;EACD,IAAI,QAAQ,CAAC,GAAW;IACtB,0BAA0B;IAC1B,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtC,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,IAAI,CAAC,SAAS;MAAE,OAAO;IAEjD,IACE,IAAI,CAAC,aAAa;MAClB,IAAI,CAAC,iBAAiB,GAAG,CAAC;MAC1B,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EACrB;MACA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;MAC1B,OAAO;KACR;IACD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;EACvB,CAAC;EAGD,8DAA8D;EAE9D,oBAAoB;IAClB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EAC7B,CAAC;EAQD,4BAA4B;IAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EACjE,CAAC;EAiCD,qCAAqC;EAErC,KAAK,CAAC,qBAAqB,CAAC,KAAa;IACvC,OAAO,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAED,kDAAkD;EAElD,KAAK,CAAC,qBAAqB,CAAC,KAAa;IACvC,OAAO,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAED,gBAAgB;EAER,eAAe,CAAC,GAAW;IACjC,IAAI,IAAI,CAAC,WAAW;MAAE,OAAO;IAE7B,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,UAAU;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5B,MAAM,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;IAE7B,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,IAAI,GAAG,CAAC,CAAC;IAEb,SAAS,aAAa,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;MAC/D,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;QAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;QAC5C,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,EAAE,GAAG,GAAG,EAAE;MACd,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC;MAChB,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;MAE1D,IACE,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,CAAC;QAChC,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,IAAI,GAAG,CAAC,EAChC;QACA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,OAAO;OACR;MACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACzB,qBAAqB,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,CAAC;EAC5B,CAAC;EAEO,kBAAkB,CAAC,KAAa;IACtC,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;EACnC,CAAC;EAEO,kBAAkB,CAAC,KAAa;IACtC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;EACnC,CAAC;EAEO,QAAQ;IACd,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;MAAE,OAAO;IAEtC,IAAI,CAAC,QAAQ,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEO,QAAQ;IACd,IAAI,CAAC,IAAI,CAAC,EAAE;MAAE,OAAO;IACrB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;EACtB,CAAC;EAoHD,gBAAgB;IACd,IAAI,IAAI,CAAC,gBAAgB;MAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;IAC/D,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrE,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;EAClB,CAAC;EAED,kBAAkB;IAChB,6HAA6H;IAC7H,iHAAiH;IACjH,mGAAmG;IACnG,qBAAqB,CAAC,GAAG,EAAE;MACzB,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;QACxC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW;MAAE,OAAO;IACjD,MAAM,MAAM,GACV,EAAE,CAAC;IACL,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ;MAChC,CAAC,CAAC,kBAAkB;MACpB,CAAC,CAAC,qBAAqB,CAAC;IAC1B,MAAM,OAAO,GAAG;;;;;YAKR,IAAI,CAAC,QAAQ;;;;;KAKpB,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAC;IAEzB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;MAC1B,MAAM,CAAC,YAAY,CAAC,GAAG,GAAG,SAAS,yBAAyB,OAAO,EAAE,CAAC;KACvE;SAAM;MACL,MAAM,CAAC,YAAY,CAAC,GAAG,GAAG,OAAO,yBAAyB,SAAS,EAAE,CAAC;KACvE;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM;MACjB,WAAK,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,OAAO;QACnC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;MACN,WACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EACzC,IAAI,EAAC,WAAW,gBACL,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,YAAY,EAAE,IAAI,CAAC,UAAU;QAE7B,YAAM,IAAI,EAAC,QAAQ,IAChB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjC,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,GAAG,CACpD,CAAC,CAAC,CAAC,CACF,iBAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,2BAA2B,GAAG,CAC7D,CACI,CACH;MACN,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,KAAK;QAC/B,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge\n   * as a percentage 0-100. Defaults to 50% of the container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil-community/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      requestAnimationFrame(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    requestAnimationFrame(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, {\n      onMove: (x, y) => {\n        let newPositionInPixels = this.vertical ? y : x;\n\n        this.nanoDragging.emit(newPositionInPixels);\n\n        // Flip for end panels\n        if (this.primary === 'end') {\n          newPositionInPixels = this.size - newPositionInPixels;\n        }\n\n        // Check snap points\n        if (this.snap) {\n          const snaps = this.snap.split(' ');\n\n          snaps.forEach((value) => {\n            let snapPoint: number;\n\n            if (value.endsWith('%')) {\n              snapPoint = this.size * (parseFloat(value) / 100);\n            } else {\n              snapPoint = parseFloat(value);\n            }\n\n            if (\n              newPositionInPixels >= snapPoint - this.snapThreshold &&\n              newPositionInPixels <= snapPoint + this.snapThreshold\n            ) {\n              newPositionInPixels = snapPoint;\n            }\n          });\n        }\n        this.shouldAnimate = false;\n        this.position = clamp(\n          this.pixelsToPercentage(newPositionInPixels),\n          0,\n          100\n        );\n        requestAnimationFrame(() => (this.shouldAnimate = true));\n      },\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    requestAnimationFrame(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/table-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-interface.js","sourceRoot":"","sources":["../../../src/components/table/table-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type { JSXBase } from '@stencil/core/internal';\nimport type { VNode, FunctionalComponent } from '@stencil/core';\n\nexport declare namespace TableTypes {\n  /** The column property */\n  type ColumnProp = string | number;\n\n  /** Possible positions. Horizontally means l/r. Vertically means top/bottom */\n  type Position = 'start' | 'end' | 'top' | 'bottom';\n\n  /** A function to assess whether a rendered row will be pinned to the top or bottom */\n  type PinFunc = (props?: RowDataSchemaModel) => Position;\n\n  /** Function called, via intersection observer, when an element's pinned status changes */\n  type PinnedCb = (positions: { [key in Position]?: boolean }) => void;\n\n  /** Potential column ordering options */\n  type Order = 'asc' | 'desc' | undefined;\n\n  /** Column filtering */\n  interface Filter {\n    prop: TableTypes.Prop;\n    filter: string | boolean;\n  }\n\n  /** Column sorting */\n  interface Sort {\n    prop: TableTypes.Prop;\n    order: TableTypes.Order;\n  }\n\n  /** Potential html properties which can be passed to a cell or column */\n  type CellProps = JSXBase.ThHTMLAttributes<HTMLTableCellElement>;\n\n  /** Potential html properties which can be passed to a row */\n  type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;\n\n  /** data model passed to cell rendering functions */\n  interface RenderModel<T = RowGeneric> {\n    /** The column property being iterated over */\n    prop: keyof T;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig<T>;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: RowData<T>;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel<T = RowGeneric> {\n    /** the current data row model being iterated over */\n    rowModel?: RowData<T>;\n    /** the current data row index  */\n    rowIndex?: number;\n    /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */\n    renderedRow?: VNode;\n  }\n\n  /** A JSX `createElement` function passed to rendering functions.\n   * You can use this to create markup outside of JSX environments\n   * e.g. https://reactjs.org/docs/react-without-jsx.html */\n  interface HFunc<T> {\n    (tag: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, data: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: T): T;\n  }\n\n  /**\n   * A row render function, called during a any row's render to the dom.\n   * It can be used to add extra markup around any given table row\n   **/\n  type RowTemplateFunc<T, P> = (\n    /** use this to create markup outside of JSX environments\n     * e.g. https://reactjs.org/docs/react-without-jsx.html */\n    createElement: HFunc<T>,\n    /** data passed to each template */\n    props: RowDataSchemaModel<P>,\n    /** a helper template to minimise boilerplate.\n     * A shortcut for `<td><div class=\"nano-tbl__cell-content\"></div></td>` */\n    TableCell: FunctionalComponent<{ header?: boolean }>\n  ) => T | undefined;\n\n  /**\n   * A cell render function, called during any cell's render to the dom.\n   * It can be used to add any markup within a table cell.\n   */\n  type CellTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    props: RenderModel<P>\n  ) => T | string | undefined;\n\n  /**\n   * A table header render function, called during any column's render to the dom.\n   * It can be used to add any markup within a table header `th`.\n   */\n  type ColumnTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig<P>\n  ) => T | string | undefined;\n\n  /** A function used to assess the order of any given column.\n   * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\n   */\n  type ColSortComparator = (\n    prop: keyof RowData,\n    order: Order\n  ) => (a: RowData, b: RowData) => number;\n\n  /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table head `th` */\n  type ColPropertiesFunc<T> = (\n    props: ColumnConfig<T>\n  ) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n  type RowPropertiesFunc<T> = (\n    props: RowDataSchemaModel<T>\n  ) => RowProps | void | undefined;\n\n  type RowGeneric = { [key: string | number]: any };\n\n  /** An individual table cell's data */\n  type RowData<T = RowGeneric> = T & {\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof RowData;\n\n  /** Valid column data types */\n  type ColumnType =\n    | 'text'\n    | 'string'\n    | 'number'\n    | 'date'\n    | 'boolean'\n    | 'unknown';\n\n  /**\n   * A table column's configuration\n   */\n  interface ColumnConfig<T = RowData> {\n    /** The title of the column. Displayed in the table header `th` */\n    title: string;\n    /** The row's data property to retrieve per cell render */\n    prop: keyof T;\n    /** The type of data. Will affect how it is sorted and the available\n     * filter operations ('text' uses browser locale to compare).\n     * If none supplied, it will be derived by default using the first row of data retrieved. */\n    type?: ColumnType;\n    /** Whether this column is horizontally pinned to viewport */\n    pinned?: Position;\n    /** By default cell content too wide for the cell will not wrap,\n     * but rather be trimmed with '...'.\n     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */\n    wrap?: boolean;\n    /** Setting this to true, will automatically watch content that\n     * doesn't fit and duplicate it to show in a tooltip.\n     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */\n    autoTooltip?: boolean;\n    /** Whether this column is a row header; the cell will render a `th` not a `td` */\n    rowHeader?: boolean;\n    /** Whether this column can be sorted. Defaults to true */\n    sortable?: boolean;\n    /** Current order of this column */\n    order?: Order;\n    /** Whether to include this column when doing a general search. Defaults to true */\n    searchable?: boolean;\n    /** Current filters applied to this column  */\n    filter?: string | boolean;\n    /** Whether this column can be dragged to change column order */\n    draggable?: boolean;\n    /**\n     * A cell render function, called during any cell's render to the dom.\n     * It can be used to add any markup within a table cell.\n     */\n    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n    cellProperties?: PropertiesFunc;\n    /**\n     * A table header render function, called during any column's render to the dom.\n     * It can be used to add any markup within a table header `th`.\n     */\n    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc<T>;\n    /** A custom sorting comparator function - assess the order of any given column.\n     *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */\n    sortCompareFn?: ColSortComparator | string;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of any table row\n   * controlling it's visual state.\n   */\n  interface RowRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. */\n    pinned?: PinFunc;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc<T>;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of a tables head and foot\n   * controlling their visual state.\n   */\n  interface HeadFootRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` the footer */\n    pinned: Position;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row.\n     * If used, and you want to see the rendered row, you *must* nest it within your\n     * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: () => RowProps | void | undefined;\n  }\n\n  type TBody = {\n    rows: TableTypes.NanoTable['rows'];\n    __uuid: string | number;\n  };\n\n  class NanoTable<T = RowGeneric> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n    rowRender: RowRenderer<T>;\n    headRender: HeadFootRenderer<T>;\n    footRender: HeadFootRenderer<T>;\n  }\n\n  type Falsy = false | 0 | '' | null | undefined;\n}\n"]}
+{"version":3,"file":"table-interface.js","sourceRoot":"","sources":["../../../src/components/table/table-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type { JSXBase } from '@stencil/core/internal';\nimport type { VNode, FunctionalComponent } from '@stencil/core';\n\nexport declare namespace TableTypes {\n  /** The column property */\n  type ColumnProp = string | number;\n\n  /** Possible positions. Horizontally means l/r. Vertically means top/bottom */\n  type Position = 'start' | 'end' | 'top' | 'bottom';\n\n  /** A function to assess whether a rendered row will be pinned to the top or bottom */\n  type PinFunc = (props?: RowDataSchemaModel) => Position;\n\n  /** Function called, via intersection observer, when an element's pinned status changes */\n  type PinnedCb = (positions: { [key in Position]?: boolean }) => void;\n\n  /** Potential column ordering options */\n  type Order = 'asc' | 'desc' | undefined;\n\n  /** Column filtering */\n  interface Filter {\n    prop: TableTypes.Prop;\n    filter: string | boolean;\n  }\n\n  /** Column sorting */\n  interface Sort {\n    prop: TableTypes.Prop;\n    order: TableTypes.Order;\n  }\n\n  /** Potential html properties which can be passed to a cell or column */\n  type CellProps = JSXBase.ThHTMLAttributes<HTMLTableCellElement>;\n\n  /** Potential html properties which can be passed to a row */\n  type RowProps = JSXBase.HTMLAttributes<HTMLTableRowElement>;\n\n  /** data model passed to cell rendering functions */\n  interface RenderModel<T = RowGeneric> {\n    /** The column property being iterated over */\n    prop: keyof T;\n    /** The data for this cell */\n    cellModel: any;\n    /** The column config object */\n    column: ColumnConfig<T>;\n    /** The row index currently being iterated over */\n    rowIndex: number;\n    /** The row model currently being iterated over  */\n    rowModel: RowData<T>;\n  }\n\n  /** data model passed to row rendering functions */\n  interface RowDataSchemaModel<T = RowGeneric> {\n    /** the current data row model being iterated over */\n    rowModel?: RowData<T>;\n    /** the current data row index  */\n    rowIndex?: number;\n    /** The row being rendered. You *must* nest this in your render function otherwise it will not be shown */\n    renderedRow?: VNode;\n  }\n\n  /** A JSX `createElement` function passed to rendering functions.\n   * You can use this to create markup outside of JSX environments\n   * e.g. https://reactjs.org/docs/react-without-jsx.html */\n  interface HFunc<T> {\n    (tag: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, data: any): T;\n  }\n  interface HFunc<T> {\n    (tag: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, text: string): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: Array<T | undefined | null>): T;\n  }\n  interface HFunc<T> {\n    (sel: any, data: any, children: T): T;\n  }\n\n  /**\n   * A row render function, called during a any row's render to the dom.\n   * It can be used to add extra markup around any given table row\n   **/\n  type RowTemplateFunc<T, P> = (\n    /** use this to create markup outside of JSX environments\n     * e.g. https://reactjs.org/docs/react-without-jsx.html */\n    createElement: HFunc<T>,\n    /** data passed to each template */\n    props: RowDataSchemaModel<P>,\n    /** a helper template to minimise boilerplate.\n     * A shortcut for `<td><div class=\"nano-tbl__cell-content\"></div></td>` */\n    TableCell: FunctionalComponent<{ header?: boolean }>\n  ) => T | undefined;\n\n  /**\n   * A cell render function, called during any cell's render to the dom.\n   * It can be used to add any markup within a table cell.\n   */\n  type CellTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    props: RenderModel<P>\n  ) => T | string | undefined;\n\n  /**\n   * A table header render function, called during any column's render to the dom.\n   * It can be used to add any markup within a table header `th`.\n   */\n  type ColumnTemplateFunc<T, P> = (\n    createElement: HFunc<T>,\n    col: ColumnConfig<P>\n  ) => T | string | undefined;\n\n  /** A function used to assess the order of any given column.\n   * e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\n   */\n  type ColSortComparator = (\n    prop: keyof RowData,\n    order: Order\n  ) => (a: RowData, b: RowData) => number;\n\n  /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n  type PropertiesFunc = (props: RenderModel) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table head `th` */\n  type ColPropertiesFunc<T> = (\n    props: ColumnConfig<T>\n  ) => CellProps | void | undefined;\n\n  /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n  type RowPropertiesFunc<T> = (\n    props: RowDataSchemaModel<T>\n  ) => RowProps | void | undefined;\n\n  type RowGeneric = { [key: string | number]: any };\n\n  /** An individual table cell's data */\n  type RowData<T = RowGeneric> = T & {\n    __uuid?: string | number;\n    __index?: number;\n  };\n\n  /** A data property */\n  type Prop = keyof RowData;\n\n  /** Valid column data types */\n  type ColumnType =\n    | 'text'\n    | 'string'\n    | 'number'\n    | 'date'\n    | 'boolean'\n    | 'unknown';\n\n  /**\n   * A table column's configuration\n   */\n  interface ColumnConfig<T = RowData> {\n    /** The title of the column. Displayed in the table header `th` */\n    title?: string;\n    /** The row's data property to retrieve per cell render */\n    prop?: keyof T;\n    /** The type of data. Will affect how it is sorted and the available\n     * filter operations ('text' uses browser locale to compare).\n     * If none supplied, it will be derived by default using the first row of data retrieved. */\n    type?: ColumnType;\n    /** Whether this column is horizontally pinned to viewport */\n    pinned?: Position;\n    /** By default cell content too wide for the cell will not wrap,\n     * but rather be trimmed with '...'.\n     * *Note* 'wrap' is mutually-exclusive from `autoTooltip` */\n    wrap?: boolean;\n    /** Setting this to true, will automatically watch content that\n     * doesn't fit and duplicate it to show in a tooltip.\n     * *Note* 'autoTooltip' is mutually-exclusive from `wrap` */\n    autoTooltip?: boolean;\n    /** Whether this column is a row header; the cell will render a `th` not a `td` */\n    rowHeader?: boolean;\n    /** Whether this column can be sorted. Defaults to true */\n    sortable?: boolean;\n    /** Current order of this column */\n    order?: Order;\n    /** Whether to include this column when doing a general search. Defaults to true */\n    searchable?: boolean;\n    /** Current filters applied to this column  */\n    filter?: string | boolean;\n    /**\n     * A cell render function, called during any cell's render to the dom.\n     * It can be used to add any markup within a table cell.\n     */\n    cellTemplate?: CellTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table cell `td` */\n    cellProperties?: PropertiesFunc;\n    /**\n     * A table header render function, called during any column's render to the dom.\n     * It can be used to add any markup within a table header `th`.\n     */\n    columnTemplate?: ColumnTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table head `th` */\n    columnProperties?: ColPropertiesFunc<T>;\n    /** A custom sorting comparator function - assess the order of any given column.\n     *  e.g. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort */\n    sortCompareFn?: ColSortComparator | string;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of any table row\n   * controlling it's visual state.\n   */\n  interface RowRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. */\n    pinned?: PinFunc;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: RowPropertiesFunc<T>;\n  }\n\n  /**\n   * Row renderer property. Called during the rendering of a tables head and foot\n   * controlling their visual state.\n   */\n  interface HeadFootRenderer<T = RowData> {\n    /** Function to decide whether the row is vertically pinned. Defaults to `start` for the header and `end` the footer */\n    pinned: Position;\n    /**\n     * A row render function, called during a any row's render to the dom.\n     * It can be used to add extra markup around any given table row.\n     * If used, and you want to see the rendered row, you *must* nest it within your\n     * jsx function e.g. `(h, props) => { return [props.renderedRow, <tr><td>Custom thing</td></tr>]}`\n     **/\n    template?: RowTemplateFunc<VNode | VNode[], T>;\n    /** A function which can be used to apply any html attribute/s onto a table row `tr` */\n    rowProperties?: () => RowProps | void | undefined;\n  }\n\n  type TBody = {\n    rows: TableTypes.NanoTable['rows'];\n    __uuid: string | number;\n  };\n\n  class NanoTable<T = RowGeneric> {\n    rows: T[];\n    columns: ColumnConfig<T>[];\n    rowRender: RowRenderer<T>;\n    headRender: HeadFootRenderer<T>;\n    footRender: HeadFootRenderer<T>;\n  }\n\n  type Falsy = false | 0 | '' | null | undefined;\n}\n"]}

package/dist/collection/components/table/table.css

@@ -128,43 +128,6 @@ nano-table {
   -webkit-border-end: var(--border-style);
           border-inline-end: var(--border-style);
 }
-.nano-tbl__drag-mask {
-  display: none;
-  position: absolute;
-  inset-block: -2px -2px;
-  z-index: 10;
-  opacity: 0;
-  transition: 0.2s ease opacity;
-}
-.nano-tbl__drag-mask--start {
-  width: calc(50% + 2px);
-  inset-inline-start: -2px;
-  -webkit-border-start: 2px dashed var(--border-tint-color);
-          border-inline-start: 2px dashed var(--border-tint-color);
-}
-.nano-tbl__drag-mask--end {
-  width: 50%;
-  inset-inline-end: 0;
-  -webkit-border-end: 2px dashed var(--border-tint-color);
-          border-inline-end: 2px dashed var(--border-tint-color);
-}
-.nano-tbl__drag-mask--active {
-  opacity: 1;
-}
-.nano-tbl__dragging .nano-tbl__drag-mask {
-  display: block;
-}
-.nano-tbl__drag--start {
-  opacity: 0.4;
-}
-.nano-tbl__dragging .nano-tbl__td,
-.nano-tbl__dragging .nano-tbl__th {
-  cursor: no-drop;
-}
-.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,
-.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content {
-  pointer-events: none;
-}
 .nano-tbl__order-btn {
   padding: 0;
   border: none;
@@ -179,6 +142,10 @@ nano-table {
   align-items: center;
   width: 100%;
 }
+.nano-tbl__order-btn:focus-visible {
+  outline: none;
+  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-tbl__status-icons {
   margin-inline: auto 10px;
   display: flex;
@@ -251,12 +218,19 @@ thead .nano-tbl__td, thead .nano-tbl__th {
   font-size: var(--thead-font-size);
   -webkit-border-before: none !important;
           border-block-start: none !important;
-  transition: all 0.2s ease;
 }
 thead .nano-tbl__td .nano-tbl__cell-content, thead .nano-tbl__th .nano-tbl__cell-content {
   padding-block: var(--head-th-padding-v);
   padding-inline: var(--head-th-padding-h);
 }
+thead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {
+  position: absolute;
+  inset-inline-end: 5px;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  background: white;
+  z-index: 10;
+}
 tfoot .nano-tbl__td, tfoot .nano-tbl__th {
   color: var(--tfoot-color);
   font-weight: 800;
@@ -295,6 +269,12 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 .nano-tbl tbody.nano-tbl__inactive {
   opacity: 0;
 }
+.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {
+  display: none;
+}
+.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {
+  display: none;
+}
 .nano-tbl th[scope=row] {
   font-weight: 800;
   margin: 0;

package/dist/collection/components/table/table.header.js

@@ -3,75 +3,8 @@
  */
 import { Fragment, h } from '@stencil/core';
 import { CSSNAMESPACE } from './table.constants';
-import { addHObserver, addVObserver, colheadFootRender, fetchStores, headerPinClasses, mergeProperties, } from './table.utils';
-// TABLE HEADERS
-// (thead > tr > th, tfoot > tr > th)
-let draggingCol;
-let draggingColEle;
-let dragEnterEle;
-let draggingParent;
-export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, onColumnDrag, onColumnDrop, defaults, }) => {
-  const store = fetchStores();
-  // Drag to re-order columns handling
-  function handleDragStart(e, column) {
-    draggingCol = column;
-    draggingColEle = dragEnterEle = e.target;
-    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);
-    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);
-    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);
-    onColumnDrag(column.prop, draggingColEle);
-  }
-  function handleDragEnd() {
-    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);
-    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);
-    draggingParent
-      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
-      .forEach((el) => {
-      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
-    });
-    draggingColEle = null;
-    draggingCol = null;
-    draggingParent = null;
-    dragEnterEle = null;
-  }
-  function handleDragEnter(e) {
-    if (dragEnterEle === e.target)
-      return;
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    e.dataTransfer.dropEffect = 'move';
-    draggingParent
-      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)
-      .forEach((el) => {
-      el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);
-    });
-    dragEnterEle = e.target;
-    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {
-      e.dataTransfer.dropEffect = 'none';
-      return;
-    }
-    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);
-  }
-  function handleDrop(e) {
-    e.stopPropagation();
-    const { colName } = this.dataset;
-    if (colName === draggingCol.prop)
-      return;
-    const cols = store.config.state.columns;
-    let toIndex = cols.findIndex((col) => col.prop === colName);
-    const fromIndex = cols.findIndex((col) => col === draggingCol);
-    if (toIndex < fromIndex &&
-      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`))
-      toIndex++;
-    if (toIndex > fromIndex &&
-      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`))
-      toIndex--;
-    if (toIndex === fromIndex)
-      return;
-    onColumnDrop(draggingCol.prop, store.config.state.columns[toIndex].prop, draggingColEle);
-  }
+import { addHObserver, addVObserver, colheadFootRender, headerPinClasses, mergeProperties, } from './table.utils';
+export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumnPinned, defaults, }) => {
   // Sort handling
   function handleColumnSortClick(e) {
     let order;
@@ -91,10 +24,6 @@ export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumn
     return ((!!defaults.sortable && column.sortable !== false) ||
       (!defaults.sortable && column.sortable === true));
   }
-  function isDraggable() {
-    return ((!!defaults.draggable && column.draggable !== false) ||
-      (!defaults.draggable && column.draggable === true));
-  }
   let extraProps = {};
   if (column.columnProperties) {
     extraProps = column.columnProperties(column) || extraProps;
@@ -117,24 +46,12 @@ export const TableColHead = ({ column, headRenderer, onColumnSortClick, onColumn
       : 'none';
     props = Object.assign(Object.assign({}, props), { 'aria-sort': sort });
   }
-  if (isDraggable()) {
-    props = Object.assign(Object.assign({}, props), { draggable: true, onDragStart: (e) => handleDragStart(e, column), onDragOver: (e) => e.preventDefault(), onDragEnd: () => handleDragEnd() });
-  }
   return (h("th", Object.assign({}, props, { ref: (th) => {
       if (['end', 'start'].includes(column.pinned))
         addHObserver(th, column.pinned, onColumnPinned);
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
-    }, key: column.prop }), isDraggable() && [
-    h("div", { class: {
-        [`${CSSNAMESPACE}__drag-mask`]: true,
-        [`${CSSNAMESPACE}__drag-mask--start`]: true,
-      }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
-    h("div", { class: {
-        [`${CSSNAMESPACE}__drag-mask`]: true,
-        [`${CSSNAMESPACE}__drag-mask--end`]: true,
-      }, "data-col-name": column.prop, onDragEnter: handleDragEnter, onDrop: handleDrop, onDragOver: (e) => e.preventDefault() }),
-  ], isSortable() ? (h("button", { class: {
+    }, key: column.prop }), isSortable() ? (h("button", { class: {
       [`${CSSNAMESPACE}__order-btn`]: true,
       [`${CSSNAMESPACE}__cell-content`]: true,
     }, onClick: handleColumnSortClick }, colheadFootRender(column), column.filter !== undefined && column.filter !== null && (h("nano-icon", { name: "light/filter" })), !!column.order &&

package/dist/collection/components/table/table.header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.header.js","sourceRoot":"","sources":["../../../src/components/table/table.header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  fetchStores,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\nlet draggingCol: TableTypes.ColumnConfig;\nlet draggingColEle: HTMLTableCellElement;\nlet dragEnterEle: HTMLElement;\nlet draggingParent: HTMLTableRowElement;\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;\n  onColumnDrop?: (\n    fromColumn: TableTypes.Prop,\n    toColumn: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  defaults: { draggable?: boolean; sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  onColumnDrag,\n  onColumnDrop,\n  defaults,\n}) => {\n  const store = fetchStores();\n\n  // Drag to re-order columns handling\n\n  function handleDragStart(e: DragEvent, column: TableTypes.ColumnConfig) {\n    draggingCol = column;\n    draggingColEle = dragEnterEle = e.target as HTMLTableCellElement;\n    draggingParent = draggingColEle.closest('.' + `${CSSNAMESPACE}__tr`);\n\n    draggingParent.classList.add(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.add(`${CSSNAMESPACE}__drag--start`);\n\n    e.dataTransfer.effectAllowed = 'move';\n    e.dataTransfer.setData('text/html', draggingColEle.innerHTML);\n\n    onColumnDrag(column.prop, draggingColEle);\n  }\n\n  function handleDragEnd() {\n    draggingParent.classList.remove(`${CSSNAMESPACE}__dragging`);\n    draggingColEle.classList.remove(`${CSSNAMESPACE}__drag--start`);\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n\n    draggingColEle = null;\n    draggingCol = null;\n    draggingParent = null;\n    dragEnterEle = null;\n  }\n\n  function handleDragEnter(e: DragEvent) {\n    if (dragEnterEle === e.target) return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    e.dataTransfer.dropEffect = 'move';\n\n    draggingParent\n      .querySelectorAll(`.${CSSNAMESPACE}__drag-mask--active`)\n      .forEach((el) => {\n        el.classList.remove(`${CSSNAMESPACE}__drag-mask--active`);\n      });\n    dragEnterEle = e.target as HTMLElement;\n\n    if (!dragEnterEle.classList.contains(`${CSSNAMESPACE}__drag-mask`)) {\n      e.dataTransfer.dropEffect = 'none';\n      return;\n    }\n    dragEnterEle.classList.add(`${CSSNAMESPACE}__drag-mask--active`);\n  }\n\n  function handleDrop(this: HTMLElement, e: DragEvent) {\n    e.stopPropagation();\n\n    const { colName } = this.dataset as { colName: keyof TableTypes.RowData };\n    if (colName === draggingCol.prop) return;\n\n    const cols = store.config.state.columns;\n    let toIndex = cols.findIndex((col) => col.prop === colName);\n    const fromIndex = cols.findIndex((col) => col === draggingCol);\n\n    if (\n      toIndex < fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--end`)\n    )\n      toIndex++;\n    if (\n      toIndex > fromIndex &&\n      this.classList.contains(`${CSSNAMESPACE}__drag-mask--start`)\n    )\n      toIndex--;\n    if (toIndex === fromIndex) return;\n\n    onColumnDrop(\n      draggingCol.prop,\n      store.config.state.columns[toIndex].prop,\n      draggingColEle\n    );\n  }\n\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  function isDraggable() {\n    return (\n      (!!defaults.draggable && column.draggable !== false) ||\n      (!defaults.draggable && column.draggable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  if (isDraggable()) {\n    props = {\n      ...props,\n      draggable: true,\n      onDragStart: (e) => handleDragStart(e, column),\n      onDragOver: (e) => e.preventDefault(),\n      onDragEnd: () => handleDragEnd(),\n    };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isDraggable() && [\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--start`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n        <div\n          class={{\n            [`${CSSNAMESPACE}__drag-mask`]: true,\n            [`${CSSNAMESPACE}__drag-mask--end`]: true,\n          }}\n          data-col-name={column.prop}\n          onDragEnter={handleDragEnter}\n          onDrop={handleDrop}\n          onDragOver={(e) => e.preventDefault()}\n        ></div>,\n      ]}\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n"]}
+{"version":3,"file":"table.header.js","sourceRoot":"","sources":["../../../src/components/table/table.header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  addHObserver,\n  addVObserver,\n  colheadFootRender,\n  headerPinClasses,\n  mergeProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE HEADERS\n// (thead > tr > th, tfoot > tr > th)\n\ntype TableColHeadProps = {\n  column: TableTypes.ColumnConfig;\n  headRenderer: TableTypes.HeadFootRenderer;\n  onColumnSortClick?: (\n    order: TableTypes.Order,\n    column: TableTypes.Prop,\n    el: HTMLTableCellElement\n  ) => void;\n  onColumnPinned?: TableTypes.PinnedCb;\n  defaults: { sortable?: boolean };\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n  column,\n  headRenderer,\n  onColumnSortClick,\n  onColumnPinned,\n  defaults,\n}) => {\n  // Sort handling\n\n  function handleColumnSortClick(e: MouseEvent & { target: HTMLElement }) {\n    let order;\n    switch (column.order) {\n      case 'asc':\n        order = 'desc';\n        break;\n      case 'desc':\n        order = null;\n        break;\n      default:\n        order = 'asc';\n    }\n    onColumnSortClick(order, column.prop, e.target.closest('th'));\n  }\n\n  function isSortable() {\n    return (\n      (!!defaults.sortable && column.sortable !== false) ||\n      (!defaults.sortable && column.sortable === true)\n    );\n  }\n\n  let extraProps = {};\n  if (column.columnProperties) {\n    extraProps = column.columnProperties(column) || extraProps;\n  }\n\n  const baseProps = {\n    class: {\n      ...headerPinClasses('th', headRenderer?.pinned),\n      [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n      [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n      [`${CSSNAMESPACE}__ordered`]: !!column.order,\n      [`${CSSNAMESPACE}__filtered`]:\n        column.filter !== undefined && column.filter !== null,\n    },\n  };\n  let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const content = colheadFootRender(column);\n\n  if (!content) return <Fragment></Fragment>;\n\n  props =\n    Number((props as TableTypes.CellProps).colSpan) > 1\n      ? { ...props, scope: 'colgroup' }\n      : { ...props, scope: 'col' };\n\n  if (isSortable()) {\n    const sort = column.order\n      ? column.order === 'asc'\n        ? 'ascending'\n        : 'descending'\n      : 'none';\n\n    props = { ...props, 'aria-sort': sort };\n  }\n\n  return (\n    <th\n      {...props}\n      ref={(th) => {\n        if (['end', 'start'].includes(column.pinned))\n          addHObserver(th, column.pinned, onColumnPinned);\n        if (['top', 'bottom'].includes(headRenderer.pinned))\n          addVObserver(th, headRenderer.pinned, onColumnPinned);\n      }}\n      key={column.prop}\n    >\n      {isSortable() ? (\n        <button\n          class={{\n            [`${CSSNAMESPACE}__order-btn`]: true,\n            [`${CSSNAMESPACE}__cell-content`]: true,\n          }}\n          onClick={handleColumnSortClick}\n        >\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/filter\" />\n          )}\n          {!!column.order &&\n            (column.order === 'desc' ? (\n              <nano-icon name=\"solid/long-arrow-down\" />\n            ) : (\n              <nano-icon name=\"solid/long-arrow-up\" />\n            ))}\n          <div class={`${CSSNAMESPACE}__status-icons`}>\n            <nano-icon name=\"light/chevron-down\" />\n          </div>\n        </button>\n      ) : (\n        <div class={`${CSSNAMESPACE}__cell-content`}>\n          {colheadFootRender(column)}\n          {column.filter !== undefined && column.filter !== null && (\n            <nano-icon name=\"light/bars-filter\" />\n          )}\n        </div>\n      )}\n    </th>\n  );\n};\n"]}