@nanoporetech-digital/components 7.6.0 → 7.7.0

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

@@ -1 +1 @@
-{"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","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  h,\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';\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('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      >\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":[]}
+{"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":";;;gPAAA,MAAMA,EAAa,q/DACnB,MAAAC,EAAeD,ECgBf,SAASE,EAAcC,GACrB,OAAOA,aAAeC,SAAWC,OAAOC,YAAcH,EAAII,SAC5D,CAEA,SAASC,EAAWL,EAAkBM,GACpC,MAAMC,EACJD,aAAkBL,SAAWO,SAASC,gBAAkBH,EAC1D,OAAOI,EAAUV,EAAKO,EACxB,C,MAaaI,EAAO,M,6KACVC,MAAiB,MACjBC,GACAC,oBACAC,mBACAC,QACAC,QACAC,eAAiB,EACjBC,wBAA0B,EAC1BC,YAAiD,EACjDC,eACAC,mBAAqB,MACrBC,sBAAwB,MACxBC,mBACAC,UAAyB,GACzBC,UAAqB,MACrBC,gBAAkB,M,0BAMjBC,QAAU,MACVC,cAAgB,KAChBC,KAAO,MACPC,WAAa,MACbC,iBAAmB,MACnBC,YAAc,MACdC,cAAgB,MAChBC,aAAe,EACfC,aAAe,EACfC,WACAC,WACAC,QACAC,QAA6C,EAK9CC,WAAa,KAGIC,SAAW,KAGXC,OAA4C,EAG7DC,SAA6B,MAM7BC,UAAqD,CAC3DC,EAAG,IACHC,EAAG,KAIGC,kBAAoB,KAGpBC,cAA+B,KAG/BC,cAA+B,KAIdC,aAIjBC,QAKCC,UAGAC,YAGAC,SAGAC,SAST,cAAMC,GACJ,OAAOC,KAAK5B,I,CAQd,gBAAM6B,GACJD,KAAKE,cACL,OAAOF,KAAK9B,O,CASd,mBAAMiC,CAAclB,GAClB,OAAQe,KAAKlB,QAAUG,C,CAQzB,mBAAMmB,GACJ,OAAOJ,KAAKpB,U,CAQd,iBAAMyB,CAAYC,GAChBN,KAAKhC,UAAYsC,C,CAQnB,mBAAAC,GACE,IAAKP,KAAKnB,UAAYmB,KAAKP,eAAiBO,KAAKnC,sBAC/C,OACFmC,KAAKpB,WAAajC,EAAWqD,KAAKnB,QAASmB,KAAKP,a,CAMlD,qBAAAe,GACE,IAAKR,KAAKzC,UAAYf,OAAO,kBAAmB,OAEhD,GAAIwD,KAAK5C,oBAAqB,CAC5B4C,KAAK5C,oBAAoBqD,aACzBT,KAAK5C,oBAAsBsD,S,CAG7BV,KAAK5C,oBAAsB,IAAIuD,gBAAgBC,IAC7C,IAAK,MAAMC,KAASD,EAAS,CAC3B,GAAIZ,KAAKpC,mBAAoB,OAE7B,GAAIiD,EAAMC,YAAYC,OAAQ,CAC5B,GAAIf,KAAKd,WAAa,MACpBc,KAAKgB,KAAKC,MAAMF,OAASF,EAAMC,YAAYC,OAAS,KACtD,GAAIf,KAAKd,WAAa,SACpBc,KAAKgB,KAAKC,MAAMC,UAAYL,EAAMC,YAAYC,OAAS,I,MAI/Df,KAAK5C,oBAAoB+D,QAAQnB,KAAKzC,Q,CAIxC,eAAA6D,GACE,GAAIpB,KAAKb,YAAc,KACrBkC,uBAAsB,IAAOrB,KAAKxB,cAAgB,YAC/C,GAAIwB,KAAKb,YAAc,MAC1BkC,uBAAsB,IAAOrB,KAAKxB,cAAgB,O,CAMtD,SAAA8C,GACE,GAAItB,KAAKnB,QAASmB,KAAKnB,QAAQ0C,aAAa,QAAS,IACrD,IAAIC,EAAWpC,EAAWqC,EAAYC,EACtC,MAAMpE,EACJ0C,KAAK7B,eAAiB6B,KAAKrB,WAAaqB,KAAK1C,QAAU0C,KAAKgB,KAE9D,IAAK1D,EAAS,OAEd,UAAW0C,KAAKf,SAAW,WAAauC,IAAGpC,KAAMY,KAAKf,aACjDuC,EAAIpC,EAAIY,KAAKf,OAElB,UAAWe,KAAKlB,UAAY,WAAa0C,IAAIC,EAAIrC,IAAIsC,GAAO1B,KAAKlB,cAC5D2C,EAAKC,EAAK1B,KAAKlB,QAEpB,MAAM6C,EAAUC,IACd,MAAMC,EAAID,EAAIE,MAAM,gBAAkBN,EAAIpC,EAC1C2C,EAAcH,GACdtE,EAAQ2D,MAAMW,GAAOC,EAAI,KACzB,GAAIA,EACF7B,KAAKgB,KAAKC,MAAMe,YACd,0BACA,WAAWH,aAEV7B,KAAKgB,KAAKC,MAAMe,YAAY,0BAA2B,KAAK,EAGnE,MAAMD,EAAiBH,IACrB,MAAMC,EAAID,EAAIE,MAAM,gBAAkBN,EAAIC,EAAKrC,EAAIsC,EACnD1B,KAAKnB,QAAQoC,MAAMW,GAAOC,GAAK,EAAI,KACnC7B,KAAKnB,QAAQoC,MAAM/B,SAAW,WAC9Bc,KAAKnB,QAAQoC,MAAMC,UAAY,MAC/BlB,KAAKnB,QAAQoC,MAAMgB,UAAY,MAC/BjC,KAAKnB,QAAQoC,MAAMiB,SAAW,QAAQ,EAGxC,GACGlC,KAAKjC,UAAUoE,SAAS,UAAYnC,KAAK9C,OACzC8C,KAAKjC,UAAUoE,SAAS,SAAWnC,KAAK9C,MAEzCyE,EAAO,SAET,GACG3B,KAAKjC,UAAUoE,SAAS,QAAUnC,KAAK9C,OACvC8C,KAAKjC,UAAUoE,SAAS,WAAanC,KAAK9C,MAE3CyE,EAAO,QAET,GAAI3B,KAAKjC,UAAUoE,SAAS,OAAQR,EAAO,OAC3C,GAAI3B,KAAKjC,UAAUoE,SAAS,UAAWR,EAAO,S,CAIhD,cAAAS,GACEpC,KAAKjC,UAAYiC,KAAKd,SAASmD,MAAM,KACrCrC,KAAKsB,W,CAMP,iBAAMgB,GACJ,GAAItC,KAAK9B,QAAS,CAChB,GAAI8B,KAAKrB,WAAY,CACnB,MAAMpB,EAAUyC,KAAKgB,KAAKuB,SAC1BvC,KAAKrC,eAAiB6E,MAAMC,KAAKlF,GAEjCyC,KAAKrC,eAAe+E,SAASC,IAC3B3C,KAAKrB,WAAWiE,YAAYD,GAC5BA,EAAM1B,MAAM4B,MAAQ7C,KAAKtB,aAAe,EAAE,IAG5CsB,KAAKL,UAAUmD,KAAK,CAAExF,QAAS0C,KAAKrB,Y,MAC/BqB,KAAKL,UAAUmD,KAAK,CAAExF,QAAS0C,KAAKgB,M,KACtC,CACLhB,KAAK3B,WAAa,MAElB,GAAI2B,KAAKrB,WAAY,CACnBqB,KAAKrC,eAAe+E,SAASC,IAC3B3C,KAAKgB,KAAK4B,YAAYD,GACtBA,EAAM1B,MAAM4B,MAAQ,EAAE,IAExB7C,KAAKJ,YAAYkD,KAAK,CAAExF,QAAS0C,KAAKrB,Y,MACjCqB,KAAKJ,YAAYkD,KAAK,CAAExF,QAAS0C,KAAKgB,M,EAMjD,qBAAA+B,GACE,GAAI/C,KAAKxB,cACPwB,KAAKP,aAAauD,iBAAiB,SAAUhD,KAAKiD,SAAU,CAC1DC,QAAS,KACTC,QAAS,aAER,GAAInD,KAAKP,aAAc,CAC1BO,KAAKP,aAAa2D,oBAAoB,SAAUpD,KAAKiD,UACrDjD,KAAKqD,YAAY,K,EAOrB,kBAAAC,CAAmBC,EAAGC,EAAgC,MACpD,IAAKxD,KAAKnC,sBAAuB,OACjC,GAAI2F,EAAWxD,KAAKyD,wBAAwB,MAAOD,GACnD,GAAIxD,KAAKP,aAAcO,KAAKyD,yBAAyBzD,KAAKrB,W,CAM5D,gBAAA+E,CAAiBH,EAAGI,GAClB,GAAI3D,KAAKrB,WAAY,CACnBqB,KAAKrB,WAAWqE,iBAAiB,WAAYhD,KAAK4D,uBAClD5D,KAAKrB,WAAWqE,iBAAiB,WAAYhD,KAAK4D,uBAClD5D,KAAKrB,WAAWqE,iBAAiB,YAAahD,KAAK4D,uBACnD5D,KAAKrB,WAAWqE,iBACd,cACAhD,KAAK4D,sB,CAGT,GAAID,EAAQ,CACVA,EAAOP,oBAAoB,WAAYpD,KAAK4D,uBAC5CD,EAAOP,oBAAoB,WAAYpD,KAAK4D,uBAC5CD,EAAOP,oBAAoB,YAAapD,KAAK4D,uBAC7CD,EAAOP,oBAAoB,cAAepD,KAAK4D,sB,EAMnD,aAAAC,GACE,UAAW7D,KAAKN,UAAY,SAC1BM,KAAKrB,WAAaqB,KAAKP,aAAaqE,cAAc9D,KAAKN,cACpD,GAAIM,KAAKN,QAASM,KAAKrB,WAAaqB,KAAKN,aACzCM,KAAKrB,WAAa+B,S,CAMzB,yBAAAqD,GACE,GAAI/D,KAAK1B,kBAAoB0B,KAAK3B,WAAY2B,KAAK5B,KAAO,UACrD4B,KAAK5B,KAAO,K,CAInB,gBAAA4F,GACE,GAAIhE,KAAK5B,KAAM4B,KAAKH,SAASiD,KAAK,CAAExF,QAAS0C,KAAKgB,YAC7ChB,KAAKF,SAASgD,KAAK,CAAExF,QAAS0C,KAAKgB,M,CAI1C,OAAAiD,GACE,GAAIjE,KAAK7C,GAAI,CACX6C,KAAK7C,GAAGsD,aACRT,KAAK7C,GAAKuD,S,CAEZ,IAAKV,KAAKP,eAAiBO,KAAK/B,kBAAoB+B,KAAKnB,QAAS,OAElEmB,KAAK7B,cAAgB6B,KAAKP,wBAAwBlD,SAClD,IAAI2H,EAAOlE,KAAKP,aAChB,GAAIO,KAAKP,wBAAwBlD,SAAU2H,EAAO,KAElDlE,KAAK7C,GAAK,IAAIX,OAAO2H,sBAClBZ,IACC,GAAIvD,KAAKpC,qBAAuBoC,KAAKhB,SAAU,OAC/CgB,KAAKE,YAAYqD,EAAEa,OAAO,GAAG,GAAG,GAElC,CAAEF,KAAMA,IAGVlE,KAAK7C,GAAGgE,QAAQnB,KAAKnB,Q,CAOfwF,0BAA4B,KAClC,IAAK7H,OAAO,kBAAmB,OAE/B,GAAIwD,KAAK3C,mBAAoB,CAC3B2C,KAAK3C,mBAAmBoD,aACxBT,KAAK3C,mBAAqBqD,S,CAG5BV,KAAK3C,mBAAqB,IAAIsD,gBAAgBC,IAC5C,IAAK,MAAMC,KAASD,EAAS,CAC3B,IAAIG,EAAgBuD,EACpB,GAAIzD,EAAMC,YAAYC,OAAQA,EAASF,EAAMC,YAAYC,OACzD,GAAIF,EAAMC,YAAYwD,MAAOA,EAAQzD,EAAMC,YAAYwD,MAEvD,UAAWtE,KAAKb,YAAc,SAAU,CACtC,GAAImF,EAAQtE,KAAKb,UAAUE,GAAK0B,EAASf,KAAKb,UAAUC,EACtDY,KAAKxB,cAAgB,UAClBwB,KAAKxB,cAAgB,K,CAG5B,GAAIwB,KAAKR,cAAe,CACtB,GAAI8E,EAAQtE,KAAKR,cAAeQ,KAAKhB,SAAW,UAC3CgB,KAAKhB,SAAW,K,CAGvB,GAAIgB,KAAKT,cAAe,CACtB,GAAI+E,EAAQtE,KAAKT,cAAeS,KAAKhB,SAAW,UAC3CgB,KAAKhB,SAAW,K,CAGvB,GAAIgB,KAAK7B,eAAiB6B,KAAK1C,SAAW0C,KAAKjB,WAC7CiB,KAAK1C,QAAQ2D,MAAMqD,MAAQtE,KAAKgB,KAAKuD,YAAc,I,KAIzD,MAAMC,EACJxE,KAAKP,wBAAwBlD,SACzByD,KAAKP,aAAa1C,gBAClBiD,KAAKP,aACX,GAAI+E,EAASxE,KAAK3C,mBAAmB8D,QAAQqD,EAAQ,EAK/CZ,sBACNa,IAEA,GAAIA,EAAEC,OAAOpH,UAAY0C,KAAKrB,WAAY,OAE1C,OAAQ8F,EAAEE,MACR,IAAK,WACH3E,KAAKlB,QAAU,EACfkB,KAAKtC,YAAcsC,KAAKf,OACxBe,KAAKf,OAAS,EAEd,IAAKe,KAAK9B,QAAS8B,KAAKqD,YAAY,OAIpC,IAAKrD,KAAK7B,eAAiB6B,KAAKxB,cAAe,CAC7C6C,uBAAsB,KACpBrB,KAAKrB,WAAWsC,MAAMC,UACpBlB,KAAKlC,mBAAmBiD,QACvBf,KAAKgB,KAAK4D,qBACD5E,KAAKtC,cAAgB,SACzBsC,KAAKtC,YAAY8D,EACjBxB,KAAKtC,cACX,KACFsC,KAAKrB,WAAWwB,cAAcH,KAAKlC,mBAAmBiD,QAAU,EAAE,G,CAGtE,MACF,IAAK,WACHf,KAAKlB,QAAUkB,KAAKlC,mBAAmBiD,OACvCf,KAAKf,OAASe,KAAKtC,YACnBsC,KAAKqD,YAAY,MAGjB,IAAKrD,KAAK7B,eAAiB6B,KAAKxB,cAAe,CAC7C6C,uBAAsB,KACpBrB,KAAKrB,WAAWsC,MAAMC,UAAY,GAClClB,KAAKrB,WAAWwB,cAAc,EAAE,G,CAGpC,MACF,IAAK,YACHH,KAAKlC,mBAAqBkC,KAAKrB,WAAWkG,wBAC1C7E,KAAKlB,QAAUkB,KAAKlC,mBAAmBiD,OACvC,M,EAME,uBAAA0C,CACNqB,EACAxI,GAEA,MAAMmD,EAAenD,GAAO0D,KAAKP,aAEjC,IAAKA,EAAc,OAEnB,IAAKqF,EAAW,CACd,IACE,GAAI9E,KAAKxB,cACPiB,EAAa2D,oBAAoB,SAAUpD,KAAKiD,UAClDxD,EAAa2D,oBAAoB,YAAapD,KAAK+E,cACnDtF,EAAa2D,oBAAoB,cAAepD,KAAK+E,a,CACrD,MAAOC,GACPC,QAAQC,MAAM,4B,MAEX,CACLzF,EAAauD,iBAAiB,YAAahD,KAAK+E,cAChDtF,EAAauD,iBAAiB,cAAehD,KAAK+E,cAElD,GAAI/E,KAAKxB,cAAewB,KAAK+C,uB,CAE/B/C,KAAKqE,2B,CAICU,aAAeI,MACrBV,IAEA,MAAMnH,EAAUmH,EAAEC,OAASD,EAAEC,OAAOpH,QAAU,KAC9C,IAAKA,GAAWA,EAAQ4B,WAAac,KAAKd,SAAU,OAEpD,MAAMkG,QAA2B9H,EAAQ8C,gBAEzC,GACEqE,EAAEE,OAAS,aACXrH,IAAY0C,KAAKgB,MACjB1D,EAAQmC,eAAiBO,KAAKgB,KAAKvB,aACnC,CACAO,KAAKtB,eAEL,IAAKsB,KAAKV,kBAAmB,OAE7B,GACGU,KAAKjC,UAAUoE,SAAS,QACvBnC,KAAKpB,WAAWyG,IAAMD,EAAmBC,KAC1CrF,KAAKjC,UAAUoE,SAAS,WACvBnC,KAAKpB,WAAWyG,IAAMD,EAAmBC,IAC3C,CACArF,KAAK1B,iBAAmB,KACxB0B,KAAKvB,c,EAIT,GACEgG,EAAEE,OAAS,eACXrH,IAAY0C,KAAKgB,MACjB1D,EAAQmC,eAAiBO,KAAKgB,KAAKvB,aACnC,CACAO,KAAKtB,eAEL,IAAKsB,KAAKV,kBAAmB,OAE7B,GACGU,KAAKjC,UAAUoE,SAAS,QACvBnC,KAAKpB,WAAWyG,IAAMD,EAAmBC,KAC1CrF,KAAKjC,UAAUoE,SAAS,WACvBnC,KAAKpB,WAAWyG,IAAMD,EAAmBC,IAC3C,CACArF,KAAKvB,eACL,GAAIuB,KAAKvB,aAAe,EAAGuB,KAAK1B,iBAAmB,K,IAOjD2E,SAAW,KACjB,MAAMqC,EAAYjJ,EAAc2D,KAAKP,cAGrC,GAAI6F,EAAItF,KAAKxC,eAAgB,CAC3B,IAAKwC,KAAKjC,UAAUoE,SAAS,UAAWnC,KAAKuF,sBACxCvF,KAAKwF,iBAAiBF,E,CAI7B,GAAIA,EAAItF,KAAKxC,eAAgB,CAC3B,IAAKwC,KAAKjC,UAAUoE,SAAS,UAAWnC,KAAKwF,iBAAiBF,QACzDtF,KAAKuF,gB,CAEZvF,KAAKxC,eAAiB8H,CAAC,EAKjB,cAAAC,GACNvF,KAAKvC,wBAA0B,KAC/B,IAAKuC,KAAK3B,WAAY,OAEtB,GAAI2B,KAAKzB,cAAgB,KAAM,CAC7ByB,KAAKlB,QAAUkB,KAAKtC,aAAesC,KAAKlB,O,CAE1CkB,KAAKzB,YAAc,KACnByB,KAAK3B,WAAa,K,CAGZ,gBAAAmH,CAAiBC,GACvB,GAAIzF,KAAK3B,WAAY,OAErB,IAAK2B,KAAK9B,QAAS,OAEnB,GAAI8B,KAAKzB,cAAgB,MAAO,CAC9ByB,KAAKtC,YAAcsC,KAAKlB,QACxBkB,KAAKlB,QAAU,C,CAEjBkB,KAAKzB,YAAc,MAEnB,IAAKyB,KAAKvC,wBACRuC,KAAKvC,wBAA0BgI,OAC5B,IACFzF,KAAKhC,WACN0H,KAAKC,IAAIF,EAAazF,KAAKvC,yBAA2B,IAEtDuC,KAAK3B,WAAa,I,CAGd,WAAAgF,CAAYuC,GAClB,GACG5F,KAAKjC,UAAUoE,SAAS,YAAcyD,IACrC5F,KAAKjC,UAAUoE,SAAS,WAAayD,EACvC,CACA5F,KAAKgB,KAAK6E,WAAWC,aAAa9F,KAAKnB,QAASmB,KAAKgB,K,MAErDhB,KAAKgB,KAAK6E,WAAWC,aAAa9F,KAAKnB,QAASmB,KAAKgB,KAAK+E,Y,CAGtD,WAAA7F,CAAY8F,GAClB,IAAIC,EAEJ,GAAIjG,KAAKjC,UAAUoE,SAAS,OAAQ,CAClC,IAAKnC,KAAK7B,cAAe,CACvB8H,EAAYtJ,EAAWqD,KAAKnB,QAASmB,KAAKP,cAAc4F,G,KACnD,CACLY,EAAYjG,KAAKnB,QAAQgG,wBAAwBQ,G,CAEnDrF,KAAK9B,QAAU+H,GAAa,C,MACvB,GAAIjG,KAAKjC,UAAUoE,SAAS,UAAW,CAC5C8D,EAAYjG,KAAKnB,QAAQgG,wBAAwBQ,IACjD,MAAMa,EACJF,GAAQA,EAAKG,WACTH,EAAKG,YACJnG,KAAKP,wBAAwBlD,SAC1BO,SAASC,gBACTiD,KAAKP,cACPoF,wBACR7E,KAAK9B,SACF8H,EAAKI,gBACNH,EAAYC,EAAenF,OAASmF,EAAeb,G,EAIjD,iBAAAgB,GACNrG,KAAK/B,gBAAkB,KAEvB,MAAMwB,EAAeO,KAAKP,cAAgB6G,EAAiBtG,KAAKgB,MAChEhB,KAAKP,aACHA,IAAiB3C,SAASC,gBAAkBD,SAAW2C,EACzDO,KAAK7B,cAAgB6B,KAAKP,wBAAwBlD,SAElDyD,KAAKnB,QAAUmB,KAAKnB,SAAW/B,SAASyJ,cAAc,OACtDvG,KAAKnB,QAAQ2H,UAAY,SACzBxG,KAAKnB,QAAQ4H,UAAUC,IAAI,mBAE3B1G,KAAKoC,iBACLpC,KAAKqD,YAAY,MACjBrD,KAAKoB,kBAELpB,KAAKnC,sBAAwB,KAC7BmC,KAAKsD,mBAAmB,MAExBtD,KAAKtB,aAAe8D,MAAMC,KACxBzC,KAAKP,aAAakH,iBAAiBC,EAAa,kBAE/CC,QACEvJ,GAAoCA,EAAQ4B,WAAac,KAAKd,WAEhE4H,WAAWxJ,GAAYA,IAAY0C,KAAKgB,OAE3ChB,KAAKsB,YACLtB,KAAKQ,wBACLR,KAAKqE,4BAGLrE,KAAKrC,eAAiB6E,MAAMC,KAAKzC,KAAKgB,KAAKuB,UAC3CvC,KAAKrC,eAAe+E,SAASC,IAC3BA,EAAM1B,MAAM4B,MAAQ7C,KAAKtB,aAAe,EAAE,IAG5CsB,KAAKO,sBACLP,KAAK6D,gBACL7D,KAAKiE,UACLjE,KAAK4D,sBAAwBmD,EAAS/G,KAAK4D,sBAAuB,G,CAKpE,iBAAAoD,GACEhH,KAAK9C,MACH8C,KAAKgB,KAAKiG,MAAQ,OAASjH,KAAKgB,KAAKkG,cAAcD,MAAQ,MAG7DnK,SAASC,gBAAgBiG,iBAAiB,uBAAuB,KAC/DmE,YAAY5D,GAAMvD,KAAKqG,qBAAqB,IAAI,IAElDc,YAAY5D,IACV,IAAKvD,KAAK/B,gBAAiB+B,KAAKqG,mBAAmB,GAClD,I,CAGL,oBAAAe,GACE,GAAIpH,KAAK7C,GAAI,CACX6C,KAAK7C,GAAGsD,aACRT,KAAK7C,GAAKuD,S,CAGZ,GAAIV,KAAK3C,mBAAoB,CAC3B2C,KAAK3C,mBAAmBoD,aACxBT,KAAK3C,mBAAqBqD,S,CAG5BV,KAAKP,aAAe,KACpBO,KAAK/B,gBAAkB,K,CAGzB,MAAAoJ,GACE,OACEjI,EAACkI,EAAI,CAAAC,IAAA,2CACHC,QAASxH,KAAK7B,gBAAkB6B,KAAKrB,YAAcqB,KAAKhB,SACxDZ,KAAM4B,KAAK5B,MAAQ4B,KAAK9B,QACxBuJ,SAAUzH,KAAKvB,aACfiJ,MAAO1H,KAAKtB,aACZiJ,MAAO3H,KAAK9B,SAAW8B,KAAKhB,SAAQ,gBACrBgB,KAAKjC,UAAUoE,SAAS,UAAS,aACpCnC,KAAKjC,UAAUoE,SAAS,OAAM,aAC9BnC,KAAKjC,UAAUoE,SAAS,OAAM,eAC5BnC,KAAKjC,UAAUoE,SAAS,SACtCyF,MAAM,gBAENxI,EAAA,OAAAmI,IAAA,2CACEK,MAAO,CACLtK,QAAS,KACTkK,OAAQxH,KAAK7B,eAAiB6B,KAAKhB,SACnC2I,MAAO3H,KAAK9B,SAAW8B,KAAK7B,eAAiB6B,KAAKhB,SAClDZ,KAAM4B,KAAK7B,eAAiB6B,KAAK5B,MAAQ4B,KAAK9B,SAEhD2J,IAAMC,GAAS9H,KAAK1C,QAAUwK,GAE9B1I,EAAA,OAAAmI,IAAA,2CAAKK,MAAM,kBAAkBC,IAAMC,GAAS9H,KAAKzC,QAAUuK,GACzD1I,EAAA,QAAAmI,IAAA,+C","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as a,g as t,h as e,a as n}from"./index-3118109b.js";const o=":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}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";const i=o;let s=0;const r=class{constructor(t){a(this,t)}tabContentId=`nano-tab-content-${++s}`;ready=false;get host(){return t(this)}name="";active=false;componentDidLoad(){requestAnimationFrame((()=>this.ready=true))}render(){return e(n,{key:"508cfb7387f87be8af8a9db89081df45a922a420",id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true",class:{ready:this.ready}},e("div",{key:"9aa9cb6f89a514d7cfa8b102aaf465fe5e73fe91",part:"base",class:"nano-tab-content"},e("slot",{key:"0f76d3389f17a4262b0cf27ddd4a4c6045df8e4c"})))}};r.style=i;export{r as nano_tab_content};
+import{r as t,g as a,a as e}from"./index-6cc72cd9.js";import{h as n}from"./renderer-4bc3e2dc.js";const o=":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}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";const r=o;let i=0;const s=class{constructor(a){t(this,a)}tabContentId=`nano-tab-content-${++i}`;ready=false;get host(){return a(this)}name="";active=false;componentDidLoad(){requestAnimationFrame((()=>this.ready=true))}render(){return n(e,{key:"08abcc599bd876200b180401e671ddbd6a9bf32f",id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true",class:{ready:this.ready,"nano-tab-content":true}},n("div",{key:"11c30baa5c02d8ad2d134e18ab7757482cbf64a1",part:"base",class:"nano-tab-content"},n("slot",{key:"e57eea4e5a61fdc5b57d9c745ea479055f3caa13"})))}};s.style=r;export{s as nano_tab_content};
 //# sourceMappingURL=nano-tab-content.entry.js.map

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

@@ -1 +1 @@
-{"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  h,\n  ComponentInterface,\n  State,\n} from '@stencil/core';\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        }}\n      >\n        <div part=\"base\" class=\"nano-tab-content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;6DAAA,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,QAGdO,EAAA,OAAAE,IAAA,2CAAKM,KAAK,OAAOD,MAAM,oBACrBP,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,g as o,h as n,a as i}from"./index-3118109b.js";import{g as r,a as s}from"./dom-d7f9f24c.js";import{s as e}from"./scroll-f373a189.js";import{C as b}from"./component-store-b798181b.js";import{c as l}from"./theme-d553c17a.js";import{d as c}from"./transitions-c09bd7f6.js";import"./throttle-df960210.js";const d=':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}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (width <= 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';const h=d;let p=0;const g=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7)}baseId=`nano-tab-group-${++p}`;activeTab;activePanel;activeTabIndicator;nav;tabs;rightBtn;leftBtn;isRtl;initialTouchX=null;initialTouchY=null;resizeObserver;mutationObservers=new WeakMap;get host(){return o(this)}hasScrollControls=false;hideControlRight=true;hideControlLeft=true;tab;placement="top";noScrollControls=false;color;storeId;storeMethod="session";disableSwipe;handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,o)=>{const n=a.find((a=>a.name===t.panel));if(n){if(!n.id)n.id=`${this.baseId}-panel-${o}`;if(!t.id)t.id=`${this.baseId}-tab-${o}`;t.setAttribute("aria-controls",n.id);n.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const n=s(t,this.tabs);if(!this.activeTabIndicator)return;const i=n.top+this.nav.scrollTop;const r=n.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const n=this.getAllPanels.find((t=>t.name===o.panel));if(!n)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:o.panel});if(i.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})}handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home")n=0;if(t.key==="End")n=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")n=Math.max(0,n-1);if(t.key==="ArrowDown")n=Math.min(o.length-1,n+1)}o[n].setFocus();if(this.placement==="top"){e(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=70;const i=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const s=Math.abs(o)>=n&&Math.abs(r)<=50;const e=this.getAllActiveTabs;const b=e.findIndex((t=>t.active));if(s){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(e[b+t]){this.setActiveTab(e[b+t]);if(Math.abs(i)>Math.abs(r)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{key:"8d4967674baaec3b7e35725357bd97373e87dde4",class:{...l(this.color)},dir:this.isRtl?"rtl":null},n("div",{key:"c328e6cf7a72d29693313364b6c51805219c3277",part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{key:"8e83f952666a05adbd6a41ba736749ab7b26a72a",class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{key:"91844d716eb09a39971810a456deb1c4e00eeb52",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{key:"bb3a0ab77f3e743b6f114d95ce926b5d56f15822",name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),n("div",{key:"27668528c2ae2b4a0f108a0a0b047eca8ec5938f",ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{key:"957c570aeaf454c04b5f5ff21a1f0de7edeca69a",ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{key:"b8aa45670f49a8d9a5010067c5911abbaf208309",ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{key:"9abb15e1c0c72e26c9b2c22cf22434177d3547bb",name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{key:"51aa3796262bd0b38a70e8341ebb2657fafc91e3",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{key:"e1bbe3649b50ad1d4a9f10772b010ece7d70401b",name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),n("slot",{key:"020cca6e8b7970cfa5a6a3b67f43a8e46bb9b006",name:"tab-content-header"}),n("div",{key:"7caf231a70ccb0bd804c321e75576bd254480d6a",part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{key:"83e5b7705b469f79763fc68ae77a46f284779ccf",onSlotchange:this.handleContentSlotChange}))))}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};g.style=h;export{g as nano_tab_group};
+import{r as t,c as a,g as o,a as n}from"./index-6cc72cd9.js";import{g as i,a as r}from"./dom-fafdec9a.js";import{s}from"./scroll-1afc6a4e.js";import{C as e}from"./component-store-199a9fd8.js";import{c}from"./theme-d553c17a.js";import{d}from"./transitions-c09bd7f6.js";import{t as l,h as b}from"./renderer-4bc3e2dc.js";import"./throttle-df960210.js";const h=':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}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (width <= 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(.nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(.nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button .nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';const p=h;let g=0;const u=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7)}baseId=`nano-tab-group-${++g}`;activeTab;activePanel;activeTabIndicator;nav;tabs;rightBtn;leftBtn;isRtl;initialTouchX=null;initialTouchY=null;resizeObserver;mutationObservers=new WeakMap;get host(){return o(this)}hasScrollControls=false;hideControlRight=true;hideControlLeft=true;tab;placement="top";noScrollControls=false;color;storeId;storeMethod="session";disableSwipe;handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return i(this.host,l("nano-tab"))}get getAllPanels(){return i(this.host,l("nano-tab-content"))}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,o)=>{const n=a.find((a=>a.name===t.panel));if(n){if(!n.id)n.id=`${this.baseId}-panel-${o}`;if(!t.id)t.id=`${this.baseId}-tab-${o}`;t.setAttribute("aria-controls",n.id);n.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const n=r(t,this.tabs);if(!this.activeTabIndicator)return;const i=n.top+this.nav.scrollTop;const s=n.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const n=this.getAllPanels.find((t=>t.name===o.panel));if(!n)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:o.panel});if(i.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})}handleClick=t=>{const a=t.target;const o=a.closest(l("nano-tab"));if(o)this.setActiveTab(o)};handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!==l("nano-tab"))return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest(l("nano-tab"));if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home")n=0;if(t.key==="End")n=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")n=Math.max(0,n-1);if(t.key==="ArrowDown")n=Math.min(o.length-1,n+1)}o[n].setFocus();if(this.placement==="top"){s(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=70;const i=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const s=Math.abs(o)>=n&&Math.abs(r)<=50;const e=this.getAllActiveTabs;const c=e.findIndex((t=>t.active));if(s){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(e[c+t]){this.setActiveTab(e[c+t]);if(Math.abs(i)>Math.abs(r)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)e.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();s(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return b(n,{key:"babc67784c37d7ba1c148f2b6672d1e9b2deda19",class:{...c(this.color),"nano-tab-group":true},dir:this.isRtl?"rtl":null},b("div",{key:"7e290c2c4db866dab8444904b90c1abcf1fb8c95",part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},b("div",{key:"af7e627ddbeb08b811ec8b41e240ef1cd28ab7aa",class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&b("button",{key:"9b44ad15be0ec455ba92172edd98164a096f61f8",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},b("nano-icon",{key:"c649dadd477ebc80b84772e949103e52c9ef7412",name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),b("div",{key:"5d013ca00f3adabc6c3571b08a985ca52e8fbc7b",ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},b("div",{key:"49b533c77d65eb3165dbded564c7eab9802688d8",ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},b("div",{key:"281f29351daf0deae5895e5424956ece03e86b46",ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),b("slot",{key:"2d3c27fe7b67b5c58368421b716cf0a29f435d78",name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&b("button",{key:"883cba058e294b9516a9cd8af6c85f1c50ddaec7",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},b("nano-icon",{key:"c3d70037fe6e12370f2e0547cdd98df1e95f3004",name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),b("slot",{key:"2f1239ebc94dff329eb520388cd0da59d60190ba",name:"tab-content-header"}),b("div",{key:"a13f28ad6ecc75c5702b92db8cea3be4cbe360d7",part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},b("slot",{key:"42e2b6133c478357b1a105af2961235bb4d0fe92",onSlotchange:this.handleContentSlotChange}))))}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};u.style=p;export{u as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map

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

@@ -1 +1 @@
-{"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","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  h,\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 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>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n\n      this.syncActiveTabIndicator();\n\n      // active tab can be changed on init - this won't be ready. No big thing\n      if (this.nav && ['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab, 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('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 (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n        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) }}\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":[]}
+{"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":[]}