@nanoporetech-digital/components 1.13.17 → 1.13.21

package/dist/nano-components/p-6b22f5db.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/sticky/sticker.tsx","src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow"],"names":["_getOffset","ele","parent","parentEle","Document","document","documentElement","getOffset","Sticker","[object Object]","hostRef","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","async","incomingTriggerPos","getTriggerPos","includes","triggerPos","top","onScroll","y","window","pageYOffset","scrollTop","handleScrollAway","handleScrollTo","shouldStick","pause","trigger","contentSizeObserver","content","_v","_h","setAttribute","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","split","setOffset","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","addEventListener","passive","capture","removeEventListener","_","oldParent","manageListenersOnParent","oldEle","stickTo","nanoHide","nanoShow","io","root","IntersectionObserver","slice","addEvents","attachScrollListeners","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","docHeight","HTMLElement","find","test","overflow","scroll","data","scrollAmt","parentBounding","rootBounds","getScrollParent","createElement","classList","add","positionChange","quietModeChange","handleParentEvents","querySelectorAll","filter","findIndex","stickerResizeListener","updateTriggerOffset","stickToChange","setupIO","debounce","dir","ownerDocument","setTimeout","bootstrapGurantor","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["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 ResizeObserver from 'resize-observer-polyfill';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils/utils';\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  let 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   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\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  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (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.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') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (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    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let 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      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\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      let 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.height = '1px';\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        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .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 {\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 (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\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 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\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    let 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 ammend the hide/show trigger\n   * Main diffs from rootstickers / 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          raf(() => {\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          raf(() => {\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    let 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    let 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    let 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  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\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 scrollAmt = this.trigger.getBoundingClientRect().top;\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 = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\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 metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).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.quietMode = 'off';\n    this.scrollParent = null;\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","@import '../../global/style/nano-theme/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 #{$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: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: 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-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: 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    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 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"]}

package/dist/nano-components/p-6ba91d36.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,i as e,h as s,e as o,g as r}from"./p-f55560d3.js";import{i as n}from"./p-6a284815.js";import{d as a}from"./p-0e826935.js";let h=class{constructor(e){t(this,e),this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7),this.classNames=[],this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let i=!1;Object.keys(this.appliedStates).forEach((e=>{let s;s="h"===e?this.currentHeight:this.currentWidth,this.appliedStates[e].forEach(((o,r)=>{s>=r&&!1===o.applied?(o.applied=!0,t[e].set(r,o),i=!0):s<r&&!0===o.applied&&(o.applied=!1,t[e].set(r,o),i=!0)}))})),i&&this.applyChanges(t)}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;this.ro||this.attachRO();const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((i=>{if((i=i.trim()).includes(" ")){const[e,...s]=i.split(" "),{bp:o,dir:r}=t(e);this.appliedStates[r].set(o,{states:s,applied:!1})}else{const{bp:e,dir:s}=t(i);this.appliedStates[s].set(e,{applied:!1})}}))}applyChanges(t){let i=[...this.classNames];Object.keys(t).forEach((e=>{t[e].forEach((t=>{t.states&&t.states.map((e=>{t.applied?i.push(e):i=i.filter((t=>t!==e))}))}))})),this.classNames=i,this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};return Object.keys(t).forEach((e=>{t[e].forEach(((t,s)=>{i[s+e]=t.applied}))})),i}attachRO(){this.ro=new n((t=>{for(const i of t)this.currentWidth=i.contentRect.width,this.currentHeight=i.contentRect.height})),this.ro.observe(this.el)}connectedCallback(){this.assessChanges=a(this.assessChanges,50)}componentDidLoad(){this.states&&(this.currentWidth&&this.currentHeight||e((()=>{const{width:t,height:i}=this.el.getBoundingClientRect();this.currentWidth=t,this.currentHeight=i})),this.statesChanged())}disconnectedCallback(){this.ro&&this.ro.disconnect()}render(){return s(o,{class:{[this.classNames.join(" ")]:!0}},s("div",{ref:t=>this.el=t},s("slot",null)))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";let l=class{constructor(i){t(this,i),this.animated=!0}render(){return s("div",{class:{skeleton:!0,animate:this.animated}},s("div",{class:"skeleton__indicator"}))}};l.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";export{h as nano_resize_observe,l as nano_skeleton}
+//# sourceMappingURL=p-6ba91d36.entry.js.map

package/dist/nano-components/p-6ba91d36.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","el","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","ref","div","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils/utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <div ref={(div) => (this.el = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n"]}

package/dist/nano-components/p-6ecf2f5c.js

@@ -0,0 +1,2 @@
+const n=/^(\d{4})-(\d{2})-(\d{2})$/;var t;function r(n,t,r){var e=parseInt(r,10),a=parseInt(t,10),u=parseInt(n,10);if(Number.isInteger(u)&&Number.isInteger(a)&&Number.isInteger(e)&&a>0&&a<=12&&e>0&&e<=31&&u>0)return new Date(u,a-1,e)}function e(t){if(!t)return;const e=t.match(n);return e?r(e[1],e[2],e[3]):void 0}function a(n){if(!n)return"";var t=n.getDate().toString(10),r=(n.getMonth()+1).toString(10),e=n.getFullYear().toString(10);return n.getDate()<10&&(t=`0${t}`),n.getMonth()<9&&(r=`0${r}`),`${e}-${r}-${t}`}function u(n,t){var r=new Date(n);return r.setDate(r.getDate()+t),r}function s(n,r=t.Monday){var e=new Date(n),a=e.getDay(),u=(a<r?7:0)+a-r;return e.setDate(e.getDate()-u),e}function o(n,r=t.Monday){var e=new Date(n),a=e.getDay(),u=6+(a<r?-7:0)-(a-r);return e.setDate(e.getDate()+u),e}function c(n){return new Date(n.getFullYear(),n.getMonth(),1)}function i(n){return new Date(n.getFullYear(),n.getMonth()+1,0)}function f(n,t){const r=new Date(n);return r.setMonth(t),r}function $(n,t){const r=new Date(n);return r.setFullYear(t),r}function d(n,t,r){return D(n,t,r)===n}function D(n,t,r){const e=n.getTime();return t&&t instanceof Date&&e<t.getTime()?t:r&&r instanceof Date&&e>r.getTime()?r:n}function w(){return Math.random().toString(16).slice(-4)}function v(n){return`${n}-${w()}${w()}-${w()}-${w()}-${w()}-${w()}${w()}${w()}`}!function(n){n[n.Sunday=0]="Sunday",n[n.Monday=1]="Monday",n[n.Tuesday=2]="Tuesday",n[n.Wednesday=3]="Wednesday",n[n.Thursday=4]="Thursday",n[n.Friday=5]="Friday",n[n.Saturday=6]="Saturday"}(t||(t={}));export{t as D,a,v as b,r as c,u as d,o as e,f,c as g,i as h,d as i,D as j,$ as k,e as p,s}
+//# sourceMappingURL=p-6ecf2f5c.js.map

package/dist/nano-components/p-6ecf2f5c.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/date-utils.ts"],"names":["ISO_DATE_FORMAT","DaysOfWeek","createDate","year","month","day","dayInt","parseInt","monthInt","yearInt","Number","isInteger","Date","parseISODate","value","matches","match","printISODate","date","d","getDate","toString","m","getMonth","y","getFullYear","addDays","days","setDate","startOfWeek","firstDayOfWeek","Monday","getDay","diff","endOfWeek","startOfMonth","endOfMonth","setMonth","setYear","setFullYear","inRange","min","max","clamp","time","getTime","chr4","Math","random","slice","createIdentifier","prefix"],"mappings":"AAAA,MAAMA,EAAkB,gCAEZC,WAUIC,EAAWC,EAAcC,EAAeC,GACtD,IAAIC,EAASC,SAASF,EAAK,IACvBG,EAAWD,SAASH,EAAO,IAC3BK,EAAUF,SAASJ,EAAM,IAY7B,GATEO,OAAOC,UAAUF,IACjBC,OAAOC,UAAUH,IACjBE,OAAOC,UAAUL,IACjBE,EAAW,GACXA,GAAY,IACZF,EAAS,GACTA,GAAU,IACVG,EAAU,EAGV,OAAO,IAAIG,KAAKH,EAASD,EAAW,EAAGF,YAO3BO,EAAaC,GAC3B,IAAKA,EACH,OAGF,MAAMC,EAAUD,EAAME,MAAMhB,GAC5B,OAAIe,EACKb,EAAWa,EAAQ,GAAIA,EAAQ,GAAIA,EAAQ,SADpD,WAScE,EAAaC,GAC3B,IAAKA,EACH,MAAO,GAGT,IAAIC,EAAID,EAAKE,UAAUC,SAAS,IAC5BC,GAAKJ,EAAKK,WAAa,GAAGF,SAAS,IACnCG,EAAIN,EAAKO,cAAcJ,SAAS,IAYpC,OATIH,EAAKE,UAAY,KACnBD,EAAI,IAAIA,KAIND,EAAKK,WAAa,IACpBD,EAAI,IAAIA,KAGH,GAAGE,KAAKF,KAAKH,aAkBNO,EAAQR,EAAYS,GAClC,IAAIR,EAAI,IAAIP,KAAKM,GAEjB,OADAC,EAAES,QAAQT,EAAEC,UAAYO,GACjBR,WAeOU,EACdX,EACAY,EAA6B7B,EAAW8B,QAExC,IAAIZ,EAAI,IAAIP,KAAKM,GACbb,EAAMc,EAAEa,SACRC,GAAQ5B,EAAMyB,EAAiB,EAAI,GAAKzB,EAAMyB,EAGlD,OADAX,EAAES,QAAQT,EAAEC,UAAYa,GACjBd,WAGOe,EACdhB,EACAY,EAA6B7B,EAAW8B,QAExC,IAAIZ,EAAI,IAAIP,KAAKM,GACbb,EAAMc,EAAEa,SACRC,EAAyC,GAAjC5B,EAAMyB,GAAkB,EAAI,IAAUzB,EAAMyB,GAGxD,OADAX,EAAES,QAAQT,EAAEC,UAAYa,GACjBd,WAGOgB,EAAajB,GAC3B,OAAO,IAAIN,KAAKM,EAAKO,cAAeP,EAAKK,WAAY,YAGvCa,EAAWlB,GACzB,OAAO,IAAIN,KAAKM,EAAKO,cAAeP,EAAKK,WAAa,EAAG,YAG3Cc,EAASnB,EAAYd,GACnC,MAAMe,EAAI,IAAIP,KAAKM,GAEnB,OADAC,EAAEkB,SAASjC,GACJe,WAGOmB,EAAQpB,EAAYf,GAClC,MAAMgB,EAAI,IAAIP,KAAKM,GAEnB,OADAC,EAAEoB,YAAYpC,GACPgB,WAMOqB,EAAQtB,EAAYuB,EAAYC,GAC9C,OAAOC,EAAMzB,EAAMuB,EAAKC,KAASxB,WAMnByB,EAAMzB,EAAYuB,EAAYC,GAC5C,MAAME,EAAO1B,EAAK2B,UAElB,OAAIJ,GAAOA,aAAe7B,MAAQgC,EAAOH,EAAII,UACpCJ,EAELC,GAAOA,aAAe9B,MAAQgC,EAAOF,EAAIG,UACpCH,EAEFxB,WAwCO4B,IACd,OAAOC,KAAKC,SAAS3B,SAAS,IAAI4B,OAAO,YAO3BC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUL,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,OAvNzF,SAAY7C,GACVA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,QAAA,GAAA,UACAA,EAAAA,EAAA,UAAA,GAAA,YACAA,EAAAA,EAAA,SAAA,GAAA,WACAA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,SAAA,GAAA,WAPF,CAAYA,IAAAA,EAAU","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\nexport function createDate(year: string, month: string, day: string): Date {\n  var dayInt = parseInt(day, 10);\n  var monthInt = parseInt(month, 10);\n  var yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n */\nexport function parseISODate(value: string): Date {\n  if (!value) {\n    return;\n  }\n\n  const matches = value.match(ISO_DATE_FORMAT);\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return '';\n  }\n\n  var d = date.getDate().toString(10);\n  var m = (date.getMonth() + 1).toString(10);\n  var y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n  return date;\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random().toString(16).slice(-4);\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\n}\n"]}

package/dist/nano-components/p-7367dfd5.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-2d59dda3.system.js"],(function(n){"use strict";var e,t,a;return{setters:[function(n){e=n.r;t=n.h;a=n.g}],execute:function(){var r=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block;--base-color-rgb:var(--nano-spinner-base-rgb, 0, 132, 169);--indicator-color:var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;top:0;left:0;right:0;bottom:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;width:1em;height:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);border-left-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding:0 0.625em;height:4.375em;width:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;top:1.875em;left:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);width:0.0625em;width:max(.0625em, 1px);height:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;width:0.5em;height:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;left:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-top:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}';var i=n("nano_spinner",function(){function n(n){e(this,n);this.hasText=false;this.type="dna";this.overlay=false}n.prototype.componentWillLoad=function(){this.hasText=!!this.el.childNodes.length};n.prototype.render=function(){return t("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},t("div",{class:"spinner__loader"},this.type==="dna"&&t("div",{class:"spinner__dna"},t("div",{class:"spinner__dnatrack spinner__dnatrack--1"},t("div",{class:"spinner__dnadot spinner__dnadot--1"}),t("div",{class:"spinner__dnadot spinner__dnadot--2"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--2"},t("div",{class:"spinner__dnadot spinner__dnadot--3"}),t("div",{class:"spinner__dnadot spinner__dnadot--4"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--3"},t("div",{class:"spinner__dnadot spinner__dnadot--5"}),t("div",{class:"spinner__dnadot spinner__dnadot--6"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--4"},t("div",{class:"spinner__dnadot spinner__dnadot--7"}),t("div",{class:"spinner__dnadot spinner__dnadot--8"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--5"},t("div",{class:"spinner__dnadot spinner__dnadot--9"}),t("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&t("span",{class:"spinner__spin"})),this.hasText&&t("div",{class:"spinner__text"},t("slot",null)),this.overlay&&t("div",{class:"spinner__overlay"}))};Object.defineProperty(n.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return n}());i.style=r}}}));
+//# sourceMappingURL=p-7367dfd5.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","exports","class_1","hostRef","this","hasText","type","overlay","prototype","componentWillLoad","el","childNodes","length","render","h","class","aria-busy","aria-live"],"mappings":"kJAAA,IAAMA,EAAa,umMCkBNC,EAAOC,EAAA,eAAA,WALpB,SAAAC,EAAAC,aAOWC,KAAAC,QAAmB,MAGpBD,KAAAE,KAAyB,MAGRF,KAAAG,QAAmB,MAE5CL,EAAAM,UAAAC,kBAAA,WACEL,KAAKC,UAAYD,KAAKM,GAAGC,WAAWC,QAGtCV,EAAAM,UAAAK,OAAA,WACE,OACEC,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC9CH,EAAA,MAAA,CAAKC,MAAM,mBACRX,KAAKE,OAAS,OACbQ,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIhBX,KAAKE,OAAS,UAAYQ,EAAA,OAAA,CAAMC,MAAM,mBAExCX,KAAKC,SACJS,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGHV,KAAKG,SAAWO,EAAA,MAAA,CAAKC,MAAM,4IAjDhB","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$spinner-color-rgb}\n   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$spinner-color-rgb};\n  --indicator-color:\n    var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );\n  --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-top-color: var(--indicator-color);\n    border-right-color: var(--indicator-color);\n    border-left-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding: 0 0.625em;\n    height: 4.375em;\n    width: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 1.875em;\n      left: 50%;\n      transform: translateX(-50%) translateZ(0);\n      width: 0.0625em;\n      width: #{'max(.0625em, 1px)'};\n      height: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    width: 0.5em;\n    height: 0.5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    left: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-top: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && <div class=\"spinner__overlay\"></div>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-76bf0452.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-2d59dda3.system.js"],(function(t){"use strict";var e,o;return{setters:[function(t){e=t.r;o=t.h}],execute:function(){var i=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){-o-object-fit:cover !important;object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){-o-object-fit:contain !important;object-fit:contain !important}";var a=t("nano_aspect_ratio",function(){function t(t){var o=this;e(this,t);this.aspectRatio="16:9";this.fit="cover";this.handleSlotChange=function(){o.setAspectRatio()}}t.prototype.handleAspectRatioChange=function(){this.setAspectRatio()};t.prototype.setAspectRatio=function(){var t=this.aspectRatio.split(":");var e=parseInt(t[0]);var o=parseInt(t[1]);this.base.style.paddingBottom=e&&o?o/e*100+"%":null};t.prototype.render=function(){var t=this;return o("div",{ref:function(e){return t.base=e},part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))};Object.defineProperty(t,"watchers",{get:function(){return{aspectRatio:["handleAspectRatioChange"]}},enumerable:false,configurable:true});return t}());a.style=i}}}));
+//# sourceMappingURL=p-76bf0452.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRadio","exports","class_1","hostRef","_this","this","aspectRatio","fit","handleSlotChange","setAspectRatio","prototype","handleAspectRatioChange","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":"0IAAA,IAAMA,EAAiB,svBCaVC,EAAWC,EAAA,oBAAA,WALxB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAUUA,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,WACzBJ,EAAKK,kBALPP,EAAAQ,UAAAC,wBAAA,WACEN,KAAKI,kBAOCP,EAAAQ,UAAAD,eAAA,WACN,IAAMG,EAAQP,KAAKC,YAAYM,MAAM,KACrC,IAAMC,EAAIC,SAASF,EAAM,IACzB,IAAMG,EAAID,SAASF,EAAM,IACzBP,KAAKW,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAG,IAAM,MAGjEX,EAAAQ,UAAAS,OAAA,WAAA,IAAAf,EAAAC,KACE,OACEe,EAAA,MAAA,CACEC,IAAK,SAACC,GAAE,OAAMlB,EAAKY,KAAOM,GAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKE,MAAQ,QACpCoB,wBAAyBtB,KAAKE,MAAQ,YAGxCa,EAAA,OAAA,CAAMQ,aAAcvB,KAAKG,uKArCT","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRadio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-79e11525.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-2d59dda3.system.js","./p-12a93bc3.system.js","./p-a057ad2d.system.js","./p-89a5c54a.system.js"],(function(t){"use strict";var o,n,r,e,i,a,s,c,l,d;return{setters:[function(t){o=t.r;n=t.c;r=t.i;e=t.f;i=t.h;a=t.e;s=t.g},function(t){c=t.i},function(t){l=t.c},function(t){d=t.d}],execute:function(){var b=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';var h=t("nano_details",function(){function t(t){var r=this;o(this,t);this.nanoOpened=n(this,"nanoOpened",7);this.nanoClosed=n(this,"nanoClosed",7);this.slideId="nano-details-"+u++;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=function(t){switch(t.key){case"Enter":case" ":r.open=!r.open;break}};this.onMouseDown=function(){if(r.stateChanging)return;r.open=!r.open}}t.prototype.toggleClick=function(){this.stateChanging=true;if(this.open)this.show();else this.hide()};t.prototype.hide=function(){var t=this;this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((function(){return t.stateChanging=false}));this.contentEl.style.height="0px"};t.prototype.show=function(){var t=this;this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((function(){return t.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"};t.prototype.resize=function(){var t=this;if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((function(){if(t.contentArea.scrollHeight>0){e((function(){t.contentEl.style.height=t.contentArea.scrollHeight+"px"}))}}))};t.prototype.componentWillLoad=function(){var t=this;this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((function(){t.isLoading=false}),100)};t.prototype.componentDidLoad=function(){var t=this;if(this.open){setTimeout((function(){t.show()}),0)}};t.prototype.connectedCallback=function(){var t=this;var o=this.mo=new MutationObserver((function(){return t.resize()}));o.observe(this.el,{childList:true,subtree:true,attributes:true});var n=this.ro=new c((function(){return t.resize()}));n.observe(this.el)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t=this;return i(a,{class:Object.assign({},l(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?"rotate("+this.iconRotation+"deg)":""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:function(o){return t.contentEl=o},tabindex:"-1",id:this.slideId},i("div",{ref:function(o){return t.contentArea=o},class:"content__area"},i("slot",null)))))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["toggleClick"]}},enumerable:false,configurable:true});return t}());var u=0;h.style=b}}}));
+//# sourceMappingURL=p-79e11525.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","exports","class_1","hostRef","_this","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","prototype","toggleClick","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","resize","readTask","writeTask","componentWillLoad","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","componentDidLoad","connectedCallback","mo","MutationObserver","observe","childList","subtree","attributes","ro","ResizeObserver","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, displayTransition } from '../../utils/utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          // this.contentEl.style.transition = 'none';\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n          // this.contentEl.style.transition = '';\n        });\n      }\n    });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: true });\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n          >\n            {this.hasStartSlot ? (\n              <span\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/p-7a0e9c6f.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{l(r.next(t))}catch(e){o(e)}}function s(t){try{l(r["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):i(t.value).then(a,s)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(a){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(s){a=[6,s];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-f00d0c25.system.js","./p-f60dde31.system.js","./p-3d1c1c19.system.js","./p-0c67773b.system.js"],(function(t){"use strict";var e,n,r,i,o,a,s,l;return{setters:[function(t){e=t.r;n=t.c;r=t.h;i=t.e;o=t.g},function(t){a=t.u;s=t.l},function(t){l=t.M},function(){},function(){}],execute:function(){var h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";var d=0;var c=t("nano_drawer",function(){function t(t){e(this,t);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.nanoOverlayDismiss=n(this,"nanoOverlayDismiss",7);this.componentId="drawer-"+ ++d;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="end";this.contained=false;this.noHeader=false;this.type="overlay"}t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.handleTypeChange=function(){if(this.type!=="push"&&this.type!=="reveal")return;if(!this.contentEle){this.type="overlay";console.warn("a valid contentSelector must be set");return}};t.prototype.handleContentSelector=function(){if(!this.contentSelector)this.contentEle=null;else this.contentEle=this.host.ownerDocument.querySelector(this.contentSelector)};t.prototype.connectedCallback=function(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new l(this.host)};t.prototype.componentWillLoad=function(){if(this.open){this.show()}this.handleContentSelector()};t.prototype.disconnectedCallback=function(){a(this.host)};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(n){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();s(this.host)}if(!this.contentEle||this.type!=="push"&&this.type!=="reveal")return[2];this.contentEle.style.right="0";this.contentEle.style.transition="all ease 250ms";this.contentEle.style.position="relative";this.contentEle.style.overflow="hidden";setTimeout((function(t){return e.contentEle.style.right="25rem"}),0);return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.open=false;this.modal.deactivate();a(this.host);if(!this.contentEle)return[2];this.contentEle.style.transition="";this.contentEle.style.position="";this.contentEle.style.overflow="";this.contentEle.style.right="";return[2]}))}))};t.prototype.handleCloseClick=function(){this.hide()};t.prototype.handleKeyDown=function(t){if(t.key==="Escape"){this.hide()}};t.prototype.handleOverlayClick=function(){var t=this.nanoOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}};t.prototype.handleSlotChange=function(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')};t.prototype.handleTransitionEnd=function(t){var e=t.target;if(t.propertyName==="transform"&&e.classList.contains("drawer__panel")){this.isVisible=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(this.open){this.panel.focus()}}};t.prototype.render=function(){var t;var e=this;var n="drawer--"+this.placement;var o="drawer--"+this.type;var a=this.host.ownerDocument.dir==="rtl";return r(i,{dir:a?"rtl":null},r("div",{part:"base",class:(t={drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible},t[o]=true,t[n]=true,t["drawer--contained"]=this.contained,t["drawer--fixed"]=!this.contained,t["drawer--has-footer"]=this.hasFooter,t),onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:function(t){return e.panel=t},part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?this.componentId+"-title":null,tabIndex:0},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:this.componentId+"-title"},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}},enumerable:false,configurable:true});return t}());c.style=h}}}));
+//# sourceMappingURL=p-7a0e9c6f.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","exports","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-7b3de191.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as o,e as i,g as r}from"./p-f55560d3.js";import{i as n}from"./p-6a284815.js";import{s}from"./p-5af040f4.js";import{f as e}from"./p-c14d5f7d.js";import{d as b}from"./p-c930d4f5.js";import{C as d}from"./p-e1fd68eb.js";import{a as l}from"./p-a0ddf496.js";import{c}from"./p-d3af43d2.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";let h=class{constructor(o){t(this,o),this.nanoTabShow=a(this,"nanoTabShow",7),this.nanoTabHide=a(this,"nanoTabHide",7),this.initialTouchX=null,this.initialTouchY=null,this.hasScrollControls=!1,this.hideControlRight=!0,this.hideControlLeft=!0,this.isLegacy=!document.head.attachShadow,this.placement="top",this.noScrollControls=!1,this.storeMethod="session",this.updateScrollControls=()=>{this.hasScrollControls=!this.noScrollControls&&["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth},this.handleClick=t=>{const a=t.target.closest("nano-tab");a&&this.setActiveTab(a)},this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target.closest("nano-tab");a&&(this.setActiveTab(a),t.preventDefault())}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&"nano-tab"===a.tagName.toLowerCase()){const o=this.getAllTabs();let i=o.indexOf(a);"Home"===t.key?i=0:"End"===t.key?i=o.length-1:this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key?i=Math.max(0,i-1):(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(i=Math.min(o.length-1,i+1)),o[i].setFocus(),["top"].includes(this.placement)&&s(o[i],this.nav,"horizontal","center"),t.preventDefault()}}},this.handleTabScroll=()=>{if(!this.hasScrollControls)return void(this.hideControlLeft=this.hideControlRight=!0);let t=this.isRtl?0===this.nav.scrollLeft:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;(this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:0===this.nav.scrollLeft)?(this.hideControlLeft=!0,this.hideControlRight=!1):t?(this.hideControlLeft=!1,this.hideControlRight=!0):(this.hideControlRight=!1,this.hideControlLeft=!1)},this.handleBtnClick=(t=!1)=>{const a=this.getNavWidth();let o;o=t?this.nav.scrollLeft+a-20:this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(i){this.nav.scrollLeft=o}},this.handleTouchStart=t=>{const a=t.changedTouches[0];this.initialTouchX=a.pageX,this.initialTouchY=a.pageY},this.handleTouchEnd=t=>{const a=t.changedTouches[0],o=a.pageX-this.initialTouchX,i=a.pageY-this.initialTouchY;var r=this.initialTouchX-a.clientX,n=this.initialTouchY-a.clientY;const s=Math.abs(o)>=70&&Math.abs(i)<=70,e=this.getAllTabs(),b=e.findIndex((t=>t.active));if(s){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;e[b+t]&&(this.setActiveTab(e[b+t]),Math.abs(r)>Math.abs(n)&&this.activePanel.setAttribute("animation-dir",r>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null}}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllTabs().find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){this.rightBtn&&b(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){this.leftBtn&&b(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){this.hasScrollControls?setTimeout((()=>this.handleTabScroll()),20):setTimeout((()=>{this.hideControlLeft=this.hideControlRight=!0}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllTabs().find((a=>a.panel===t));a&&this.setActiveTab(a)}getAllTabs(t=!1){const a=Array.from(this.host.querySelectorAll("nano-tab"));return t?a:a.filter((t=>!t.disabled))}getAllPanels(){return Array.from(this.host.querySelectorAll("nano-tab-content"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}setActiveTab(t,a=!0){if(t&&t!==this.activeTab&&!t.disabled){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllTabs().map((t=>t.active=t===this.activeTab)),this.getAllPanels().map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),this.syncActiveTabIndicator(),["top"].includes(this.placement)&&s(this.activeTab,this.nav,"horizontal","center"),a&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllTabs(),a=this.getAllPanels();t.map((t=>{const o=a.find((a=>a.name===t.panel));o&&(t.setAttribute("aria-controls",o.getAttribute("id")),o.setAttribute("aria-labelledby",t.getAttribute("id")))}))}syncActiveTabIndicator(){this.getAllTabs(!0).forEach((t=>t.setAttribute("direction","top"===this.placement?"horizontal":"vertical")));const t=this.getActiveTab(),a=t.clientWidth,o=t.clientHeight,i=l(t,this.nav),r=i.top+this.nav.scrollTop,n=i.left+this.nav.scrollLeft;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`,this.activeTabIndicator.style.height=null,this.activeTabIndicator.style.transform=`translateX(${n}px)`;break;case"start":this.activeTabIndicator.style.width=null,this.activeTabIndicator.style.height=`${o}px`,this.activeTabIndicator.style.transform=`translateY(${r}px)`}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);return this.nav.clientWidth-(parseFloat(t.paddingLeft)+parseFloat(t.paddingRight))}componentDidLoad(){new IntersectionObserver(((t,a)=>{t[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],!1),this.storeId&&d.init(this,["tab"],this.storeMethod,this.storeId),a.unobserve(t[0].target))})).observe(this.host),e.observe(this.tabGroup),this.leftBtn&&(e.observe(this.leftBtn),e.observe(this.rightBtn)),this.resizeObserver=new n((()=>this.updateScrollControls())),this.resizeObserver.observe(this.nav),this.mutationObserver=new MutationObserver((t=>{t.some((t=>!["aria-labelledby","aria-controls"].includes(t.attributeName)))&&setTimeout((()=>this.setAriaLabels())),setTimeout((()=>this.handleTabScroll()),500)})),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0,subtree:!0}),requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect(),e.unobserve(this.tabGroup),this.leftBtn&&(e.unobserve(this.leftBtn),e.unobserve(this.rightBtn)),this.resizeObserver&&this.resizeObserver.unobserve(this.nav)}render(){return this.isRtl="rtl"===this.host.ownerDocument.dir,o(i,{class:Object.assign(Object.assign({},c(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":!0,"nano-tab-group--top":"top"===this.placement,"nano-tab-group--start":"start"===this.placement,"nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container"},"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--left":!0},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(!1)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs"}))),"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--right":!0},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(!0)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",null))))}get host(){return r(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};h.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:5px;--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-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#0084a9;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--tab-indicator-size:var(--indicator-size);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#0084a9;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #007090))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease;transition:var(--indicator-transition) transform ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;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:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;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{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;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:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(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{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.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{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius)}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';export{h as nano_tab_group}
+//# sourceMappingURL=p-7b3de191.entry.js.map

package/dist/nano-components/p-7b3de191.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/tabs/tab-group.tsx","src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow"],"names":["TabGroup","[object Object]","hostRef","this","initialTouchX","initialTouchY","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","tab","target","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","activeTab","panel","find","syncActiveTabIndicator","rightBtn","displayTransition","leftBtn","setTimeout","includeDisabled","Array","from","host","querySelectorAll","filter","disabled","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","forEach","getActiveTab","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","IntersectionObserver","entries","observer","intersectionRatio","setAriaLabels","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","dir","ownerDocument","disconnect","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n} from '../../utils/utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional 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 * Horizonal 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\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: 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 mutationObserver: MutationObserver;\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() 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  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllTabs().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, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\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;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter;\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 tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  private getAllTabs(includeDisabled = false) {\n    const tabs = Array.from(this.host.querySelectorAll('nano-tab')) as [\n      HTMLNanoTabElement\n    ];\n    if (includeDisabled) return tabs;\n    return tabs.filter((el: any) => !el.disabled);\n  }\n\n  private getAllPanels() {\n    return Array.from(this.host.querySelectorAll('nano-tab-content')) as [\n      HTMLNanoTabContentElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().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 (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllTabs().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      // active tab can be changed on init - this won't be ready. No big thing\n      // try {\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n      // }\n      // catch(e) {}\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.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs(true).forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab();\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\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  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    // 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      }\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      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else 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        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let 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    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllTabs();\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  // 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.getAllTabs()[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    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\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\">\n            {this.placement === 'top' && (\n              <button\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 name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              key=\"nav\"\n              part=\"nav\"\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              >\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\" />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\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 name=\"light/chevron-right\"></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 />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-lightgrey};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$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);\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);\n  * @prop --tab-text-color: defaults to #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-lightgrey};\n  --indicator-size: 5px;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$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-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{$color-blue};\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-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    --tab-indicator-size: var(--indicator-size);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{$color-lightblue};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{$color-darkgrey};\n  --indicator-color: #{$color-blue};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\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    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$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:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 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        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$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          rgba(0, 0, 0, 0) 0,\n          rgba(0, 0, 0, 0) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, 0)\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\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\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      width: auto;\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\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\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\n    }\n  }\n}\n"]}