@nanoporetech-digital/components 2.2.0 → 2.2.1

package/dist/nano-components/p-d87ebf95.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","exports","class_1","hostRef","_this","this","isAnimating","didLoad","_shouldAnimate","vertical","disabled","snapThreshold","animationDuration","_isDragging","handleIsDragging","dragging","handleDrag","e","preventDefault","host","newPositionInPixels","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","Object","defineProperty","prototype","_a","width","height","sa","_position","pos","Math","min","max","isNaN","animatePosition","percentageToPixels","positionInPixels","nanoReposition","emit","handlePositionInPixelsChange","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","attachRO","detachRO","ro","ResizeObserver","observe","unobserve","undefined","componentDidLoad","setTimeout","connectedCallback","disconnectedCallback","componentDidRender","render","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  height: 100%;\n  left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  height: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\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    this.handleIsDragging = debounce(this.handleIsDragging, 200);\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * 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 (this.shouldAnimate && this.animationDuration > 0) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/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  /** @readonly - hook to know if the pane is currently being dragged */\n  @Prop({ reflect: true }) get isDragging() {\n    return this._isDragging;\n  }\n  private _isDragging = false;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\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      raf(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    raf(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    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  private handleIsDragging = (dragging?: boolean) => {\n    this._isDragging = dragging;\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      this.handleIsDragging(true);\n      let newPositionInPixels = this.vertical ? y : x;\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      raf(() => (this.shouldAnimate = true));\n      this.handleIsDragging(false);\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      raf(() => (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      raf(() => (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    raf(() => {\n      if (this.position === undefined) this.position = 50;\n    });\n  }\n\n  render() {\n    if (!this.position) 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"]}