@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/nano-components/nano-split-pane.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["splitPaneCss","NanoSplitPaneStyle0","SplitPane","cachedPositionInPixels","ro","isAnimating","didLoad","size","width","height","this","host","getBoundingClientRect","vertical","shouldAnimate","_shouldAnimate","sa","constructor","hostRef","handlePositionChange","debounce","bind","position","_position","pos","Math","min","max","isNaN","animationDuration","animatePosition","percentageToPixels","positionInPixels","nanoReposition","emit","handlePositionInPixelsChange","pixelsToPercentage","disabled","primary","snap","snapThreshold","nanoDragging","getPercentageToPixels","value","getPixelsToPercentage","end","duration","fps","start","distance","time","easeInOutQuad","t","s","e","d","go","requestAnimationFrame","attachRO","window","detachRO","ResizeObserver","handleResize","observe","unobserve","undefined","handleDrag","preventDefault","drag","onMove","x","y","newPositionInPixels","snaps","split","forEach","snapPoint","endsWith","parseFloat","clamp","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","componentDidLoad","setTimeout","connectedCallback","disconnectedCallback","componentDidRender","render","styles","gridTemplate","secondary","h","Host","style","class","part","name","tabindex","role","onKeyDown","onMouseDown","onTouchStart","slot"],"sources":["src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\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(tokens.$colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get(tokens.$colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get(tokens.$colors, lightgrey)};\n  --content-color: #{map.get(tokens.$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: #{tokens.$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical]):not([disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  block-size: 100%;\n  inset-inline-start:\n    calc(\n      var(--divider-hit-area) / -2 + var(--divider-width) / 2\n    );\n  inline-size: 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  inline-size: 100%;\n  inset-block-start:\n    calc(\n      var(--divider-hit-area) / -2 + var(--divider-width) / 2\n    );\n  block-size: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\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  @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  /**\n   * Utility to convert % to pixels\n   * @param value to convert\n   * @returns converted value as pixels\n   */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /**\n   * Utility to convert pixels to % (`position`)\n   * @param value to convert\n   * @returns converted value as a %\n   */\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} class=\"nano-split-pane\">\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"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-sticker.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stickerCss","NanoStickerStyle0","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","isRtl","io","contentSizeObserver","parentSizeObserver","sticker","content","scrollPosCache","scrollPosThresholdCache","cacheOffset","slottedContent","pauseResizeWatcher","listenForScrollParent","stickToEleInitSize","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","stickToEle","triggerPos","trigger","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","scrollParent","stickTo","nanoStuck","nanoUnstuck","nanoHide","nanoShow","isHiding","this","isSticking","shouldStick","setTriggerPos","getTriggerPos","pauseHiding","pause","updateTriggerOffset","stickerResizeListener","disconnect","undefined","ResizeObserver","entries","entry","contentRect","height","host","style","minHeight","observe","quietModeChange","requestAnimationFrame","setOffset","setAttribute","v","_v","_h","setPos","pos","u","match","setTriggetPos","setProperty","maxHeight","overflow","includes","positionChange","split","stuckChange","children","Array","from","forEach","child","appendChild","order","emit","attachScrollListeners","addEventListener","onScroll","passive","capture","removeEventListener","moveTrigger","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","onStickToDisplayEvent","stickToChange","querySelector","visibilityDecisionHandler","handleHideChange","setupIO","root","IntersectionObserver","slice","setupParentResizeListener","width","scrollWidth","toWatch","e","detail","type","scrollHeight","getBoundingClientRect","addEvents","onStickEvent","_e","console","error","async","incomingTriggerPos","top","y","handleScrollTo","handleScrollAway","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","data","scrollAmt","parentBounding","rootBounds","isIntersecting","bootstrapGurantor","findScrollParent","createElement","innerHTML","classList","add","querySelectorAll","transformTag","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","key","sticky","siblings","index","stuck","class","ref","div"],"sources":["src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticker/sticker.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{layers.$layer-index-menubar};\n  * @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  * @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{layers.$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-inline-size: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-block-size;\n}\n\n:host([sticky][stuck]) {\n  inset-inline: var(--stuck-left) var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-inline-size: inherit;\n  inline-size: 100%;\n\n  &:not(.stuck) {\n    inline-size: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    inset-inline: var(--stuck-left) var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      inset-block-start: 0;\n    }\n\n    :host([placed-bottom]) & {\n      inset-block-end: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport { getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport { findScrollParent } from '../../utils/scroll-parent';\nimport { transformTag, h } from '../../utils/renderer';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  const parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * JS query selector string or DOM element pointing to a `<nano-sticker>`  */\n  @Prop() stickTo: string | HTMLNanoStickerElement;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /**\n   * @internal\n   * @param offset\n   * @returns the trigger position\n   */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /**\n   * @internal\n   * @returns the trigger position\n   */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /**\n   * @internal\n   * @param pause\n   */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    this.pauseHide = pause;\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (!this.content || !window['ResizeObserver']) return;\n\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on')\n      requestAnimationFrame(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off')\n      requestAnimationFrame(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    if (this.trigger) this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    const sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      const u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      const u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.minHeight = '1px';\n      this.trigger.style.maxHeight = '1px';\n      this.trigger.style.overflow = 'hidden';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        const content = this.host.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.stickToEle.appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else if (this.scrollParent) {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (typeof this.stickTo === 'string')\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else if (this.stickTo) this.stickToEle = this.stickTo;\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quiet mode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'small screen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (!window['ResizeObserver']) return;\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    const toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to amend the hide/show trigger\n   * Main diffs from root-stickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          requestAnimationFrame(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          requestAnimationFrame(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    const scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (_e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    const sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    const y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker) {\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      } else {\n        scrollAmt = this.trigger.getBoundingClientRect().top;\n      }\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck =\n        !data.isIntersecting ||\n        scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    const scrollParent = this.scrollParent || findScrollParent(this.host);\n    this.scrollParent =\n      scrollParent === document.documentElement ? document : scrollParent;\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.innerHTML = '&nbsp;';\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll(transformTag('nano-sticker'))\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil methods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.scrollParent = null;\n    this.hasBootstrapped = false;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n        class=\"nano-sticker\"\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-tab-content.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabContentCss","NanoTabContentStyle0","id","TabPanel","tabContentId","ready","name","active","componentDidLoad","requestAnimationFrame","this","render","h","Host","key","host","style","display","role","class","part"],"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"sourcesContent":[":host {\n  display: block;\n  opacity: 1;\n  animation: opacity 0.3s ease-in-out forwards;\n  animation-duration: 0s !important;\n}\n\n:host(.ready) {\n  animation-duration: 0.3s !important;\n}\n\n@media only screen and (width <= 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  ComponentInterface,\n  State,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n  @State() ready = false;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop({ reflect: true }) name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  componentDidLoad(): void {\n    requestAnimationFrame(() => (this.ready = true));\n  }\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n        class={{\n          ready: this.ready,\n          'nano-tab-content': true,\n        }}\n      >\n        <div part=\"base\" class=\"nano-tab-content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAgB,++BACtB,MAAAC,EAAeD,ECSf,IAAIE,EAAK,E,MAUIC,EAAQ,M,yBACXC,aAAe,sBAAsBF,IACpCG,MAAQ,M,0BAKQC,KAAO,GAGPC,OAAS,MAElC,gBAAAC,GACEC,uBAAsB,IAAOC,KAAKL,MAAQ,M,CAG5C,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHZ,GAAIQ,KAAKK,KAAKb,IAAMQ,KAAKN,aACzBY,MAAO,CAAEC,QAASP,KAAKH,OAAS,QAAU,QAC1CW,KAAK,WAAU,cACFR,KAAKH,OAAS,QAAU,OACrCY,MAAO,CACLd,MAAOK,KAAKL,MACZ,mBAAoB,OAGtBO,EAAA,OAAAE,IAAA,2CAAKM,KAAK,OAAOD,MAAM,oBACrBP,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/nano-components/nano-tab-group.entry.js.map

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

package/dist/nano-components/nano-tab.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabCss","NanoTabStyle0","id","Tab","tabId","tab","panel","active","disabled","closable","nanoTabClose","setFocus","this","focus","preventScroll","removeFocus","blur","handleCloseClick","emit","handleCloseKeydown","e","key","render","h","Host","host","role","class","part","nanotab","name","ref","el","tabindex","label","iconName","onClick","onKeyDown"],"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n  * @prop --focus-shadow: Defaults to #{tokens.$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{tokens.$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n  * @prop --text-color: Defaults to #{map.get(tokens.$colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get(tokens.$colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get(tokens.$colors, darkblue)};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n  * @prop --border-radius: inherit;\n  */\n\n:host {\n  --focus-shadow: #{tokens.$control-focus-style};\n  --padding-v: 0.75rem;\n  --padding-h: 1rem;\n  --bg-rgb: #{tokens.$layer-bg-color-rgb};\n  --active-bg: rgb(var(--bg-rgb) / 100%);\n  --inactive-bg: rgb(var(--bg-rgb) / 70%);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get(tokens.$colors, blue)};\n  --disabled-text-color: #{map.get(tokens.$colors, darkgrey)};\n  --active-text-color: #{map.get(tokens.$colors, darkblue)};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{map.get(tokens.$colors, lightblue)};\n  --tab-indicator-size: 5px;\n  --border-radius: inherit;\n\n  display: inline-block;\n  cursor: pointer;\n  border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n  --padding-v: 1rem;\n  --padding-h: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host(.nano-sortable__dragged) {\n  box-shadow: none;\n\n  .nanotab {\n    box-shadow: tokens.$layer-shadow-large;\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-block-start: var(--tab-indicator-size);\n    border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n    &.nanotab--active {\n      margin-block-start: 0;\n      border-block-start:\n        solid var(--tab-indicator-size)\n        var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include mx.text-inherit();\n\n  border-radius: var(--border-radius);\n  margin-inline-end: var(--tab-spacing);\n  padding-block: var(--padding-v);\n  padding-inline: var(--padding-h);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  user-select: none;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n  position: relative;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  & ::slotted(.nano-sortable__keyboard-handle) {\n    position: absolute;\n    inset-inline-end: -1em;\n    background: var(--inactive-bg);\n    z-index: 1;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &--disabled {\n    background: rgb(var(--disabled-bg-rgb) / 100%);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &--closable {\n    padding-inline-end: 0;\n  }\n\n  &__tab {\n    display: flex;\n    border-radius: inherit;\n\n    &:hover:not(.tab--disabled) {\n      text-shadow: 0 0 0.01px var(--text-color);\n    }\n\n    &:focus {\n      outline: none;\n      outline-style: none;\n      box-shadow: none;\n      border-color: transparent;\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n    }\n\n    &:focus-visible:not(.nanotab--disabled)::before {\n      box-shadow: var(--focus-shadow) inset;\n\n      .nanotab--active & {\n        box-shadow: var(--focus-shadow);\n      }\n    }\n  }\n\n  &__close-button {\n    margin-inline: #{tokens.$spacing-small} calc(var(--padding-h) / 2);\n    appearance: none !important;\n\n    --padding: #{tokens.$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\nlet id = 0;\n\n/**\n * @slot start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  private handleCloseKeydown = (e: KeyboardEvent) => {\n    if (e.key === ' ') this.handleCloseClick();\n  };\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabId}\n        role=\"tab\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        class=\"nano-tab\"\n      >\n        <div\n          part=\"base\"\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n        >\n          <slot name=\"start\" />\n          <div\n            part=\"tab\"\n            ref={(el) => (this.tab = el)}\n            tabindex={this.disabled || !this.active ? '-1' : '0'}\n            class=\"nanotab__tab\"\n          >\n            <slot />\n          </div>\n          {this.closable && !this.disabled && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/xmark\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              part=\"close-btn\"\n            />\n          )}\n          <slot name=\"end\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAS,iuGACf,MAAAC,EAAeD,ECWf,IAAIE,EAAK,E,MAiBIC,EAAG,M,oEACNC,MAAQ,cAAcF,IACtBG,I,0BAKiBC,MAAQ,GAGRC,OAAS,MAGTC,SAAW,MAG5BC,SAAW,MAGVC,aAIT,cAAMC,GACJC,KAAKP,IAAIQ,MAAM,CAAEC,cAAe,M,CAKlC,iBAAMC,GACJH,KAAKP,IAAIW,M,CAGHC,iBAAmB,KACzBL,KAAKF,aAAaQ,MAAM,EAGlBC,mBAAsBC,IAC5B,GAAIA,EAAEC,MAAQ,IAAKT,KAAKK,kBAAkB,EAG5C,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAH,IAAA,2CACHnB,GAAIU,KAAKa,KAAKvB,IAAMU,KAAKR,MACzBsB,KAAK,MAAK,gBACKd,KAAKJ,SAAW,OAAS,QAAO,gBAChCI,KAAKL,OAAS,OAAS,QACtCoB,MAAM,YAENJ,EAAA,OAAAF,IAAA,2CACEO,KAAK,OACLD,MAAO,CACLE,QAAS,KACT,kBAAmBjB,KAAKL,OACxB,oBAAqBK,KAAKJ,SAC1B,oBAAqBI,KAAKH,WAG5Bc,EAAA,QAAAF,IAAA,2CAAMS,KAAK,UACXP,EAAA,OAAAF,IAAA,2CACEO,KAAK,MACLG,IAAMC,GAAQpB,KAAKP,IAAM2B,EACzBC,SAAUrB,KAAKJ,WAAaI,KAAKL,OAAS,KAAO,IACjDoB,MAAM,gBAENJ,EAAA,QAAAF,IAAA,8CAEDT,KAAKH,WAAaG,KAAKJ,UACtBe,EAAA,oBAAAF,IAAA,2CACEa,MAAM,iBACNC,SAAS,cACTR,MAAM,wBACNS,QAASxB,KAAKK,iBACdoB,UAAWzB,KAAKO,mBAChBS,KAAK,cAGTL,EAAA,QAAAF,IAAA,2CAAMS,KAAK,S","ignoreList":[]}

package/dist/nano-components/nano-table-5eaf3a0c.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{k as t,h as n,F as e,g as o,f as i,d as s,e as r,r as a,c as l,a as c}from"./index-6cc72cd9.js";import{h as d}from"./renderer-4bc3e2dc.js";import{a as h}from"./math-d160f8a6.js";import{d as b}from"./throttle-df960210.js";import{f}from"./scroll-parent-be39fbd0.js";import{c as p}from"./index-f5f7b950.js";const _="nano-tbl";const u=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const m=t=>{if(t!=null){if(u(t,"ArrayBuffer")||u(t,"MessagePort")||u(t,"ImageBitmap")||u(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(m)}return m(t.buffer)}}return[]};let g=0;let y=0;const w=new Map;const v=new Map;const k=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const s=n[2];if(e===o){const e=n[3];const[o,r,a]=w.get(i);w.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}o(s)}}else if(e===o+".cb"){try{v.get(i)(...s)}catch(n){t(n)}}}}));return i};const x=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let r=g++;let a=0;let l=o.length;let c=[i,s];w.set(r,c);for(;a<l;a++){if(typeof o[a]==="function"){const t=y++;v.set(t,o[a]);o[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const d=t=>t.postMessage([n,r,e,o],m(o));if(t.then){t.then(d)}else{d(t)}}));const $=import("./table.worker-94b9c69e.js").then((t=>t.worker));const z=x($,"stencil.table.worker","createWorkerStore");const C=x($,"stencil.table.worker","syncConfigToWorker");const S=x($,"stencil.table.worker","syncDataToWorker");const R=x($,"stencil.table.worker","workerFilter");const T=x($,"stencil.table.worker","workerSearch");const I=x($,"stencil.table.worker","workerSort");function B(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(t?.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const P=new WeakMap;async function A(t,n,e,o){const i={data:p({rows:[]}),config:p({columns:n}),general:p({workerId:null,scrollParent:e,host:t,isReady:o})};const s=await z(i.data.state.rows,B(i.config.state.columns));i.general.state.workerId=s;P.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)}});return i}function F(t){return P.get(t)}function E(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=o.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=E(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const e=new Date(t[n]);if(!!e&&Number(e))t[n]=Number(e)}));t["__index"]=n;t["__uuid"]=h(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return S(e.general.state.workerId,n)}function D(t,n){const e=P.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return C(e.general.state.workerId,B(n))}async function N(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await T(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function j(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await R(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function H(t,n,e){const o=P.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await I(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function O(t,n){const e=Y();const o=e.config.state.columns;const i=e.data.state.rows;const s=o[n];const r=s?.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=Y();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function L(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"&&typeof n.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function Y(){return F(o(i()))}function J(t,n,e){const o={...e};const i=Y().config.state.columns[n]?.cellProperties;if(!i)return o;const s=O(t,n);const r=i(s);if(!r)return o;return L(o,r)}function K(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function X(t,n,e=false){const o={[`${_}__${t}`]:true,[`${_}__pin`]:!!n,[`${_}__pin--top`]:n==="top",[`${_}__pin--bottom`]:n==="bottom"};if(e)return q(o);return o}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function U(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const G=({column:t,onColumnSortClick:n,defaults:o})=>{function i(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}function s(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let r={};if(t.columnProperties){r=t.columnProperties(t)||r}const a={class:{...X("th",t.pinned),[`${_}__pin--start`]:t.pinned==="start",[`${_}__pin--end`]:t.pinned==="end",[`${_}__ordered`]:!!t.order,[`${_}__filtered`]:t.filter!==undefined&&t.filter!==null}};let l=r?L(a,r):a;const c=K(t);if(!c)return d(e,null);l=Number(l.colSpan)>1?{...l,scope:"colgroup"}:{...l,scope:"col"};if(s()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";l={...l,"aria-sort":n}}return d("th",{...l,key:t.prop},s()?d("button",{class:{[`${_}__order-btn`]:true,[`${_}__cell-content`]:true},onClick:i},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?d("nano-icon",{name:"solid/arrow-down-long"}):d("nano-icon",{name:"solid/arrow-up-long"})),d("div",{class:`${_}__status-icons`},d("nano-icon",{name:"light/chevron-down"}))):d("div",{class:`${_}__cell-content`},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/bars-filter"})))};function Q(t,n){const o=Y();const s=o.config.state.columns;const r=s[n]?.cellTemplate;const a=O(t,n);const l=i();if(!!a.cellModel&&s[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!r?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}let c=false;const h=(...t)=>{c=true;return d(...t)};let b=r?r(h,a):undefined;if(b&&l.customRenderer&&b["t"]===undefined&&!(b instanceof Element)&&typeof b!=="string"&&!c){const t=document.createElement("template");const n=l.customRenderer(b,t.content);b=n&&n["then"]?n:t}return b?b:a.cellModel!==undefined&&a.cellModel!==null?d(e,null,a.cellModel?.toString()):""}const V=(t,n=false)=>{const e=Y();const o=e.config.state.columns[t];const i={[`${_}__td`]:true,[`${_}__ordered`]:!!o.order,[`${_}__pin`]:!!o.pinned,[`${_}__pin--start`]:o.pinned==="start",[`${_}__pin--end`]:o.pinned==="end"};if(n)return q(i);return i};const Z=({rowIndex:t,colIndex:n,nestedContent:e})=>{const o=()=>e?e():Q(t,n)||d("span",{class:"placeholder"}," ");let s="td";const r=i();const a=Y();const l=a.config.state.columns[n];let c=J(t,n,{class:V(n)});if(l.rowHeader){c=Number(c.rowSpan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};s="th"}const h=t=>{const n=o();return d("div",{ref:t=>{if(!t)return;if(n instanceof Element){t.replaceChildren();t.append(n["content"]||n)}else if(n["then"]){n.then((n=>t.innerHTML=n))}},...t,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:!!l.wrap},innerHTML:typeof n==="string"&&n.includes("<")?n:undefined},(typeof n!=="string"||!n.includes("<"))&&!n["then"]&&!(n instanceof Element)&&n)};return d(s,{role:r.type==="grid"?"gridcell":undefined,...c},l.autoTooltip&&!l.wrap?d("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},d("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(s).style.zIndex="100",onNanoHide:t=>t.target.closest(s).style.zIndex=""},d(h,null),d("span",{slot:"content"},d(o,null)))):d(h,null))};const tt=(t,n,e)=>{const o=d("div",{...t.wrapperProps,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:t.wrap}},n);return t.header?d("th",{scope:e,...t.cellProps},o):d("td",{...t.cellProps},o)};const nt=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let r={};if(!e){const t=W(n);e=t.rowModel}if(t?.rowProperties){r=t.rowProperties({rowModel:e,rowIndex:n})||r}let a;if(t?.pinned&&typeof t.pinned==="function"){a=t.pinned({rowModel:e,rowIndex:n})}const l=L({class:X("tr",a,true)},r);const c=t?.template;const h=t=>i.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:V(n,true)},t.vattrs)}return t}));if(c){let t=c(d,{renderedRow:d("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);if(Array.isArray(t)){t=i.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=L({class:X("tr",a,true)},t.vattrs);if(t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return d("tr",{...l,key:e.__uuid},h(o))};const et=({rowRenderer:t},n,e)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col");const s=t.pinned||null;const r={class:X("tr",s)};const a=o?L(r,o):r;const l=t?.template;if(l){let t=l(d,{renderedRow:d("tr",{...a},n)},i);if(Array.isArray(t)){t=e.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=L({class:X("tr",s,true)},t.vattrs);if(t.vchildren){t.vchildren=e.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:X(t.vtag.toString(),s,true)},t.vattrs)}return t}))}}return t}))}return t}return d("tr",{...a},n)};function ot(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--end`);this.topRows=t.getElementsByClassName(`${_}__pin--top`);this.bottomRows=t.getElementsByClassName(`${_}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}_pinnedStart=[];handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${_}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);ot(`${this.tableId}-col-start-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) {\n            --pin-start-active: 1;\n          }\n        `)}else{this.tableEle.classList.remove(`${_}__pinned--start`);ot(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${_}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);ot(`${this.tableId}-col-end-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n        `)}else{this.tableEle.classList.remove(`${_}__pinned--end`);ot(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const o=Array.from(this.endColumns).reverse();const i=`\n      ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n              --pin-start: ${t-1}px;\n            }\n          `})).join("")}\n      ${o.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n            #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n            #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n              --pin-end: ${n-1}px;\n            }\n          `})).join("")}\n    `;ot(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let o=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;o=this.scrollElement.offsetTop}return{offsetX:e,offsetY:o}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-top");const c=l!==""?parseFloat(l):t;s((()=>{if(i-e<=c){o.classList.add(`${_}__pinned`,`${_}__pinned--top`)}else{o.classList.remove(`${_}__pinned`,`${_}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}}))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-bottom");const c=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+o-(t+r)<=c){i.classList.add(`${_}__pinned`,`${_}__pinned--bottom`)}else{i.classList.remove(`${_}__pinned`,`${_}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const o=new Promise((o=>{if(this.startColumns.length){r((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedStart.find((t=>t===o));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,o]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==o))}s+=t.width}if(!this.endColumns.length)o()}))}if(this.endColumns.length){r((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const o of i){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedEnd.find((t=>t===o));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[o,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))}r+=t.width}o()}))}}));await o;this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const st=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size: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;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}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;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.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}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}';const rt=st;const at=false;function lt(t,n=false){if(!performance||!at)return;if(n){performance?.mark("end"+t);performance?.measure(t,"start"+t,"end"+t);const n=performance?.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance?.mark("start"+t)}}let ct=0;const dt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;type="table";caption;showCaption=false;loading=undefined;get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=true;placeholderSize=5;rows;handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}columns=[];async handleColsChange(){await D(this.host,this.columns);if(this.isReady)this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=false;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=true;handleSearchTermChange(){this.searchStart()}virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+ct++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;tableWrapperEle;activeWatcherIo;tablePinnedService;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}_isReady=false;handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;lt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await H(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return{...e,order:t};return{...e,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t});lt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;lt("search");this.scrollToTop();try{await N(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});lt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;lt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){await this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));await j(this.host,this.filters);this.nanoTblAfterFilter.emit({filters:this.filters});lt("filter",true)}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!U(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!U(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${_}__inactive`)));t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;lt("blockDims");const t=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const n=new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{if(await t()){n();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}))}));n.then((()=>{lt("blockDims",true);lt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}lt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())})}this.blocks=i;lt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${_}__inactive`))return;const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;lt("scrollHandler");if(!this.store?.general.state.isActive||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{t=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;t+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:t})}let n=this.host.offsetTop;let e=0;const o=this.blocks.length;while(e<o&&t>=n){n+=this.getBlockHeight(e);if(t<n){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}lt("scrollHandler",true)}))};processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}handleResizeChange=t=>{this.tableWrapperEle.className="";let n=[`${_}__wrap`];if(t.target?.className)n=[...t.target.className.split(" "),...n];this.tableWrapperEle.classList.add(...n.filter((t=>!!t)))};setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){lt("init");this.store=await A(this.host,this.columns,this.scrollParent,this.isReady);this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=f(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=f(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){lt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));lt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return d(c,{key:"7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa",class:"nano-table"},d("div",{key:"acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9",class:`${_}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),d("nano-resize-observe",{key:"9a38da33f0cfb64329331510f196ef7c42e51ca3",states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),d("div",{key:"25aad643f108a5e48319a20a70a36066eb099d5d",class:`${_}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},d("nano-progress-bar",{key:"519fc388c4926af6bd9dfaba2112fa2db1dbc3cd",indeterminate:true,class:{[`${_}__progress-bar`]:true,[`${_}__progress-bar--show`]:this._loading}}),d("table",{key:"b58a665666893b4b15aad6ab7e7a08bd20527cb2",role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${_}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},d("caption",{key:"5bc653ff3a487546e652cd787996dfde662fdf67",class:{[`${_}__caption`]:true,[`${_}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},d("slot",{key:"a6c855db5a74c123d08ad4e65954f17573c9ea3a",name:"caption"},this.caption)),d("thead",{key:"743820b2abc85adac1fe4babf918be10a8e62a26"},d(et,{key:"e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036",rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&d("tbody",{key:"6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa",class:`${_}__active ${_}__loading`},[...Array(10).keys()].map((t=>d("tr",null,this.store.config.state.columns.map(((n,e)=>d(Z,{rowIndex:t,colIndex:e,nestedContent:()=>d("nano-skeleton",null)}))))))),d("tr",{key:"092f27f8726f12b7fa10d166b560d6df6593bbc1",hidden:!!this._loading||!!this.blocks.length},d("th",{key:"edfbca925f99550897c3b460a6efcb326863a591",class:`${_}__th`,colSpan:this.store.config.state.columns.length},d("div",{key:"5d4b996c3141b6583317a2b28357fe7af3a873bc",class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},d("slot",{key:"00db3e5649ccdc97062881ff7b3801fb1847c2db",name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>d("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${_}__inactive`]:!this.activeBlocks.includes(n),[`${_}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return d(nt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>d(Z,{rowIndex:o,colIndex:n}))))})):d("tr",{class:`${_}__tr--placeholder`},d("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&d("tfoot",{key:"15a1a79049ad87f63c87e2d905bc401a7d4bbb60"},d(et,{key:"ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea",rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&d("nano-spinner",{key:"dd0041a5232a79a9f1882d2b9e5beebd79587a5d",type:"circle",class:{[`${_}__spinner`]:true,[`${_}__spinner--show`]:this._loading}})))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};dt.style=rt;export{dt as T,k as c};
-//# sourceMappingURL=nano-table-5eaf3a0c.js.map