@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/nano-components/{p-6a1c69d3.entry.js.map → p-3aa1d07d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticky/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","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","handleScrollTo","handleScrollAway","shouldStick","pause","trigger","contentSizeObserver","content","setAttribute","_v","_h","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","console","error","attachScrollListeners","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","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 '../../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","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';\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"]}
+{"version":3,"sources":["src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticky/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","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","handleScrollTo","handleScrollAway","shouldStick","pause","trigger","contentSizeObserver","content","setAttribute","_v","_h","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","console","error","attachScrollListeners","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","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 '../../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","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';\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"]}

package/dist/nano-components/p-3ad1d5aa.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js"],(function(t){"use strict";var o,e,r,i,n;return{setters:[function(t){o=t.r;e=t.h;r=t.e;i=t.g},function(t){n=t.h}],execute:function(){var s=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;--quote-size:1.3rem;color:var(--theme-color)}:host(.is-xl){--quote-size:3rem}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:var(--quote-size);font-weight:700;font-style:italic;line-height:0;color:#abb6b8;display:inline;position:relative}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:var(--quote-size);font-weight:300;font-style:italic;display:inline}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var a=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.gridSizes=[];this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.handleGridChange=function(t){r.gridSizes=t.detail};this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{onNanoBpChange:r.handleGridChange,class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!n(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t;var o=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e(r,{class:(t={},t[this.gridSizes.join(" ")]=true,t)},e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":o,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)])))};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());a.style=s}}}));
+//# sourceMappingURL=p-3ad1d5aa.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","gridSizes","imgSrcSet","largeScreenBP","theme","level","handleGridChange","e","detail","HeroContent","hasIconBox","hasCtas","h","class","name","onNanoBpChange","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","_a","join","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n\n  color: var(--theme-color);\n}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']),\n    &::slotted(a.button[slot='secondary-ctas']) {\n      padding: 0.25rem 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin: 0 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']),\n    &::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']),\n    &::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']),\n    &::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n        rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-width: 1440px;\n\n    --grid-row-gap: 0;\n\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']),\n    &::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot='back-btn']),\n      &::slotted(nano-icon-button[slot='back-btn']) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n\n  &__primary-content {\n    max-width: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']),\n    &::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-top: 0 !important;\n      margin-bottom: 18px !important;\n      font-size: 2rem !important;\n    }\n\n    .is-xl & {\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-bottom: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot='icon-box-item'] nano-icon) {\n      color: var(--theme-tint-color);\n\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-bottom: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']),\n    &::slotted(.last[slot='icon-box-item']) {\n      margin-bottom: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: var(--quote-size);\n      font-weight: 700;\n      font-style: italic;\n      line-height: 0;\n      color: #abb6b8;\n      display: inline;\n      position: relative;\n    }\n\n    ::slotted([slot='quote']),\n    &::slotted([slot='quote']) {\n      font-size: var(--quote-size);\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n    }\n  }\n\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 8px !important;\n      }\n\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        margin-bottom: 18px !important;\n      }\n    }\n\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n  Host,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() gridSizes: string[] = [];\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n    this.gridSizes = e.detail;\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid\n        onNanoBpChange={this.handleGridChange}\n        class=\"hero__content\"\n        xlCols={2}\n        xlSize={this.largeScreenBP}\n      >\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{\n          [this.gridSizes.join(' ')]: true,\n        }}\n      >\n        <div\n          class={{\n            hero: true,\n            'hero--light': this.theme === 'light',\n            'hero--secondary': this.hasSecondaryContent,\n            'hero--iconbox': this.hasIconBox,\n            'hero--rtl': rtl,\n            'hero--scrim': this.hasScrim,\n            'hero--legacy': this.isLegacy,\n            'hero--breadcrumb': !!this.breadCrumbs.length,\n            'hero--hasbg': this.hasBg,\n            'hero--backbtn': this.hasBackBtn,\n            'hero--sub': this.level === 'sub',\n          }}\n        >\n          <div class=\"hero__bg-wrap\">\n            {!!this.imgSrc && (\n              <nano-img\n                class=\"hero__img\"\n                lazy={false}\n                background\n                srcSet={this.imgSrcSet}\n                src={this.imgSrc}\n              >\n                <this.HeroContent />\n              </nano-img>\n            )}\n            {!this.imgSrc && [\n              <div class=\"hero__bg-slot\">\n                <slot name=\"background\" />\n              </div>,\n              <this.HeroContent />,\n            ]}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-3ef30ded.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.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}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-spinner-base-rgb, 0, 116, 149);--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-3ef30ded.system.entry.js.map

package/dist/nano-components/{p-9bf4a6e0.system.entry.js.map → p-3ef30ded.system.entry.js.map}

@@ -1 +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"]}
+{"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,woMCkBNC,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-4429caac.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,i){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{l(i.next(e))}catch(t){o(t)}}function s(e){try{l(i["throw"](e))}catch(t){o(t)}}function l(e){e.done?n(e.value):a(e.value).then(r,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(e){return function(t){return l([e,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;a=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(s){r=[6,s];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-d84ef175.system.js","./p-1c216ca4.system.js","./p-b370e3ef.system.js","./p-89edc042.system.js","./p-9de508a5.system.js","./p-1d13dbdf.system.js"],(function(e){"use strict";var t,n,i,a,o,r,s,l,d,c;return{setters:[function(e){t=e.r;n=e.c;i=e.h;a=e.e;o=e.g},function(e){r=e.M},function(e){s=e.r},function(e){l=e.l;d=e.u},function(e){c=e.c},function(){},function(){}],execute:function(){var u=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){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}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;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;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__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;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-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;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";var f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});var h=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});var p=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});var b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"});var m=e("nano_alert",function(){function e(e){var a=this;t(this,e);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.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.isModal=false;this.isToast=false;this.isShowing=false;this.open=false;this.closable=false;this.duration=Infinity;this.handleMouseMove=function(){a.restartAutoHide()};this.handleCloseClick=function(){a.hide()};this.handleTransitionEnd=function(e){if(e.propertyName==="opacity"&&(e.target===a.panel||e.target===a.overlay)){a.host.hidden=!a.open;a.isShowing=a.open;a.open?a.nanoAfterShow.emit():a.nanoAfterHide.emit()}};this.handleButtonClick=function(e){if(e.defaultPrevented)return;if(e.target.tagName&&e.target.tagName.toLowerCase()==="button")a.hide()};this.restartAutoHide=function(){clearTimeout(a.autoHideTimeout);if(a.open&&a.duration<Infinity){a.autoHideTimeout=setTimeout((function(){return a.hide()}),a.duration)}};this.Panel=function(){return i("div",{ref:function(e){return a.panel=e},part:"panel",class:{alert:true,"alert--open":a.open,"alert--toasty":a.isToast,"alert--modal":!!a.isModal,"alert--showing":a.isShowing},role:!!a.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":a.open?"false":"true","aria-modal":!!a.isModal?"true":undefined,"aria-label":a.label?a.label:undefined,onMouseMove:a.handleMouseMove,tabIndex:!!a.isModal?0:undefined},i("div",{class:"alert__content"},i("div",{part:"icon",class:"alert__icon"},i("slot",{name:"icon"})),i("div",{part:"message",class:"alert__message"},i("slot",null)),a.closable&&i("div",{class:"alert__close"},i("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:a.handleCloseClick}))),i("div",{class:"alert__footer"},i("slot",{name:"footer"})))}}e.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};e.prototype.handleDurationChange=function(){this.restartAutoHide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;var t=this;return __generator(this,(function(n){if(this.goingToShow){return[2]}e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;return[2,false]}this.host.hidden=false;this.goingToShow=true;this.open=true;s((function(){t.isShowing=true;t.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((function(){return t.hide()}),this.duration)}return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;var t=this;return __generator(this,(function(n){if(this.goingToHide){return[2]}e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;return[2,false]}this.goingToHide=true;this.open=false;s((function(){return t.goingToHide=false}));clearTimeout(this.autoHideTimeout);return[2]}))}))};e.prototype.toast=function(e){if(e===void 0){e="tr"}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(n){this.isToast=true;return[2,new Promise((function(n){var i;switch(e){case"tl":i=h;break;case"bl":i=p;break;case"br":i=b;break;default:i=f;break}if(!i.parentElement){document.body.appendChild(i)}i.appendChild(t.host);t.connectedCallback();t.show();var a=function(){t.host.remove();t.isToast=false;n();if(!i.querySelector("nano-alert")){i.remove()}};t.host.addEventListener("nanoAfterHide",a,{once:true});t.host.addEventListener("nanoafterhide",a,{once:true})}))]}))}))};e.prototype.alert=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(n){this.isModal=true;this.label=e;return[2,new Promise((function(e){if(!document.body.contains(t.host)){document.body.appendChild(t.host)}t.modal.activate();l(t.host);t.originalTrigger=document.activeElement;s((function(){t.show()}));var n=function(){return s((function(){return t.panel.focus({preventScroll:true})}))};var i=function(){t.modal.deactivate();t.host.remove();t.label=undefined;t.isModal=false;e();if(t.originalTrigger&&typeof t.originalTrigger.focus==="function"){setTimeout((function(){return t.originalTrigger.focus()}))}};t.host.addEventListener("nanoAfterShow",n,{once:true});t.host.addEventListener("nanoaftershow",n,{once:true});t.host.addEventListener("nanoAfterHide",i,{once:true});t.host.addEventListener("nanoafterhide",i,{once:true})}))]}))}))};e.prototype.connectedCallback=function(){this.modal=new r(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};e.prototype.disconnectedCallback=function(){d(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)};e.prototype.componentDidLoad=function(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};e.prototype.render=function(){var e=this;return i(a,{class:Object.assign({},c(this.color)),showing:this.isShowing},this.isModal&&[i("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:function(t){return e.overlay=t}}),i("div",{class:"alert__modal-wrap"},i(this.Panel,null))],!this.isModal&&i(this.Panel,null))};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}},enumerable:false,configurable:true});return e}());m.style=u}}}));
+//# sourceMappingURL=p-4429caac.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","exports","class_1","hostRef","_this","this","addedTransEnd","goingToHide","goingToShow","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","prototype","handleOpenChange","show","handleDurationChange","nanoShow","raf","nanoHide","toast","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n\n  @include padding(0, #{$spacing-medium}, 0, 0);\n\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n  createColorClasses,\n  lockBodyScrolling,\n  raf,\n  unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    raf(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    raf(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n      });\n\n      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-4535e3bb.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as o}from"./p-ab5813a7.js";const e=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}: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}";let i=class{constructor(o){t(this,o);this.aspectRatio="16:9";this.fit="cover";this.handleSlotChange=()=>{this.setAspectRatio()}}handleAspectRatioChange(){this.setAspectRatio()}setAspectRatio(){if(typeof this.aspectRatio!=="string"){console.warn("aspectRatio should be a string.");return}else if(!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)){console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');return}const t=this.aspectRatio.split(":");const o=parseInt(t[0]);const e=parseInt(t[1]);this.base.style.paddingBottom=o&&e?`${e/o*100}%`:null}render(){return o("div",{ref:t=>this.base=t,part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))}static get watchers(){return{aspectRatio:["handleAspectRatioChange"]}}};i.style=e;export{i as nano_aspect_ratio};
+//# sourceMappingURL=p-4535e3bb.entry.js.map

package/dist/nano-components/{p-143bca0d.entry.js.map → p-4535e3bb.entry.js.map}

@@ -1 +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","AspectRatio","[object Object]","hostRef","this","aspectRatio","fit","handleSlotChange","setAspectRatio","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":";;;2CAAA,MAAMA,EAAiB,svBCaVC,EAAW,MALxBC,YAAAC,aAUUC,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,KACzBH,KAAKI,kBALPN,0BACEE,KAAKI,iBAOCN,iBACN,UAAWE,KAAKC,cAAgB,SAAU,CACxCI,QAAQC,KAAK,mCACb,YACK,IAAKN,KAAKC,YAAYM,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,OAEF,MAAME,EAAQR,KAAKC,YAAYO,MAAM,KACrC,MAAMC,EAAIC,SAASF,EAAM,IACzB,MAAMG,EAAID,SAASF,EAAM,IACzBR,KAAKY,KAAKC,MAAMC,cAAgBL,GAAKE,EAAI,GAAIA,EAAIF,EAAK,OAAS,KAGjEX,SACE,OACEiB,EAAA,MAAA,CACEC,IAAMC,GAAQjB,KAAKY,KAAOK,EAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKE,MAAQ,QACpCoB,wBAAyBtB,KAAKE,MAAQ,YAGxCa,EAAA,OAAA,CAAMQ,aAAcvB,KAAKG","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 AspectRatio 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    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\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"]}
+{"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","AspectRatio","[object Object]","hostRef","this","aspectRatio","fit","handleSlotChange","setAspectRatio","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":";;;2CAAA,MAAMA,EAAiB,uxBCaVC,EAAW,MALxBC,YAAAC,aAUUC,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,KACzBH,KAAKI,kBALPN,0BACEE,KAAKI,iBAOCN,iBACN,UAAWE,KAAKC,cAAgB,SAAU,CACxCI,QAAQC,KAAK,mCACb,YACK,IAAKN,KAAKC,YAAYM,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,OAEF,MAAME,EAAQR,KAAKC,YAAYO,MAAM,KACrC,MAAMC,EAAIC,SAASF,EAAM,IACzB,MAAMG,EAAID,SAASF,EAAM,IACzBR,KAAKY,KAAKC,MAAMC,cAAgBL,GAAKE,EAAI,GAAIA,EAAIF,EAAK,OAAS,KAGjEX,SACE,OACEiB,EAAA,MAAA,CACEC,IAAMC,GAAQjB,KAAKY,KAAOK,EAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKE,MAAQ,QACpCoB,wBAAyBtB,KAAKE,MAAQ,YAGxCa,EAAA,OAAA,CAAMQ,aAAcvB,KAAKG","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 AspectRatio 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    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\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"]}