@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/{p-4739c706.system.entry.js.map → p-73d969d0.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","exports","class_1","hostRef","_this","this","initialTouchX","initialTouchY","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","setTimeout","_","show","includeDisabled","Array","from","host","querySelectorAll","filter","disabled","getAllPanels","getActiveTab","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","setAriaLabels","panels","getAttribute","forEach","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","connectedCallback","dir","ownerDocument","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-lightgrey};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-lightgrey};\n  --indicator-size: 5px;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{$color-blue};\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --tab-indicator-size: var(--indicator-size);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{$color-lightblue};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{$color-darkgrey};\n  --indicator-color: #{$color-blue};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgba(0, 0, 0, 0) 0,\n          rgba(0, 0, 0, 0) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, 0)\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n} from '../../utils/utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header = a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllTabs().find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  private getAllTabs(includeDisabled = false) {\n    const tabs = Array.from(this.host.querySelectorAll('nano-tab')) as [\n      HTMLNanoTabElement\n    ];\n    if (includeDisabled) return tabs;\n    return tabs.filter((el: any) => !el.disabled);\n  }\n\n  private getAllPanels() {\n    return Array.from(this.host.querySelectorAll('nano-tab-content')) as [\n      HTMLNanoTabContentElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      // try {\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n      // }\n      // catch(e) {}\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs(true).forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab();\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllTabs();\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              key=\"nav\"\n              part=\"nav\"\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","exports","class_1","hostRef","_this","this","initialTouchX","initialTouchY","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","setTimeout","_","show","includeDisabled","Array","from","host","querySelectorAll","filter","disabled","getAllPanels","getActiveTab","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","setAriaLabels","panels","getAttribute","forEach","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","connectedCallback","dir","ownerDocument","disconnectedCallback","disconnect","render","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-lightgrey};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-lightgrey};\n  --indicator-size: 5px;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{$color-blue};\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --tab-indicator-size: var(--indicator-size);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{$color-lightblue};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{$color-darkgrey};\n  --indicator-color: #{$color-blue};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgba(0, 0, 0, 0) 0,\n          rgba(0, 0, 0, 0) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, 0)\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { displayTransition, createColorClasses, getOffset } from '../../utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header = a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllTabs().find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  private getAllTabs(includeDisabled = false) {\n    const tabs = Array.from(this.host.querySelectorAll('nano-tab')) as [\n      HTMLNanoTabElement\n    ];\n    if (includeDisabled) return tabs;\n    return tabs.filter((el: any) => !el.disabled);\n  }\n\n  private getAllPanels() {\n    return Array.from(this.host.querySelectorAll('nano-tab-content')) as [\n      HTMLNanoTabContentElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      // try {\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n      // }\n      // catch(e) {}\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs(true).forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab();\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllTabs();\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              key=\"nav\"\n              part=\"nav\"\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-a50ca06f.system.entry.js → p-7dc79f13.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-2d59dda3.system.js"],(function(t){"use strict";var e,s;return{setters:[function(t){e=t.r;s=t.h}],execute:function(){var i=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none !important}:host *{display:none !important}";var o=t("nano_select_option",function(){function t(t){e(this,t);this.optId="nano-option-"+n++;this.label="";this.value="";this.selected=false;this.disabled=false}t.prototype.render=function(){return s("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},s("slot",{name:"start"}),this.label?this.label:s("slot",null),s("slot",{name:"end"}))};return t}());var n=0;o.style=i}}}));
-//# sourceMappingURL=p-a50ca06f.system.entry.js.map
+System.register(["./p-af9f6453.system.js"],(function(t){"use strict";var e,s;return{setters:[function(t){e=t.r;s=t.h}],execute:function(){var i=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none !important}:host *{display:none !important}";var o=t("nano_select_option",function(){function t(t){e(this,t);this.optId="nano-option-"+n++;this.label="";this.value="";this.selected=false;this.disabled=false}t.prototype.render=function(){return s("div",{id:this.optId,role:"option","data-value":this.value,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},s("slot",{name:"start"}),this.label?this.label:s("slot",null),s("slot",{name:"end"}))};return t}());var n=0;o.style=i}}}));
+//# sourceMappingURL=p-7dc79f13.system.entry.js.map

package/dist/nano-components/{p-ba59977d.entry.js → p-7df31b1c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,e as i,g as a}from"./p-f55560d3.js";import{u as s,l as o}from"./p-5af040f4.js";import{M as n}from"./p-8c9e74c7.js";import"./p-a0ddf496.js";import"./p-a5917bdc.js";let l=0,h=class{constructor(r){t(this,r),this.nanoShow=e(this,"nanoShow",7),this.nanoAfterShow=e(this,"nanoAfterShow",7),this.nanoHide=e(this,"nanoHide",7),this.nanoAfterHide=e(this,"nanoAfterHide",7),this.nanoOverlayDismiss=e(this,"nanoOverlayDismiss",7),this.componentId="drawer-"+ ++l,this.hasFooter=!1,this.isVisible=!1,this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.type="overlay"}handleOpenChange(){this.open?this.show():this.hide()}handleTypeChange(){if("push"===this.type||"reveal"===this.type)return this.contentEle?void 0:(this.type="overlay",void console.warn("a valid contentSelector must be set"))}handleContentSelector(){this.contentEle=this.contentSelector?this.host.ownerDocument.querySelector(this.contentSelector):null}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleOverlayClick=this.handleOverlayClick.bind(this),this.handleSlotChange=this.handleSlotChange.bind(this),this.modal=new n(this.host)}componentWillLoad(){this.open&&this.show(),this.handleContentSelector()}disconnectedCallback(){s(this.host)}async show(){this.isVisible||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.contained||(this.modal.activate(),o(this.host)),!this.contentEle||"push"!==this.type&&"reveal"!==this.type||(this.contentEle.style.right="0",this.contentEle.style.transition="all ease 250ms",this.contentEle.style.position="relative",this.contentEle.style.overflow="hidden",setTimeout((()=>this.contentEle.style.right="25rem"),0))))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.open=!1,this.modal.deactivate(),s(this.host),this.contentEle&&(this.contentEle.style.transition="",this.contentEle.style.position="",this.contentEle.style.overflow="",this.contentEle.style.right="")))}handleCloseClick(){this.hide()}handleKeyDown(t){"Escape"===t.key&&this.hide()}handleOverlayClick(){this.nanoOverlayDismiss.emit().defaultPrevented||this.hide()}handleSlotChange(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')}handleTransitionEnd(t){"transform"===t.propertyName&&t.target.classList.contains("drawer__panel")&&(this.isVisible=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open&&this.panel.focus())}render(){return r(i,{dir:"rtl"===this.host.ownerDocument.dir?"rtl":null},r("div",{part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--visible":this.isVisible,["drawer--"+this.type]:!0,["drawer--"+this.placement]:!0,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:0},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}}};h.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";export{h as nano_drawer}
-//# sourceMappingURL=p-ba59977d.entry.js.map
+import{r as t,c as e,h as r,e as i,g as a}from"./p-bb0619e6.js";import{u as s,l as o}from"./p-5af040f4.js";import{M as n}from"./p-8c9e74c7.js";import"./p-a0ddf496.js";import"./p-a5917bdc.js";let l=0,h=class{constructor(r){t(this,r),this.nanoShow=e(this,"nanoShow",7),this.nanoAfterShow=e(this,"nanoAfterShow",7),this.nanoHide=e(this,"nanoHide",7),this.nanoAfterHide=e(this,"nanoAfterHide",7),this.nanoOverlayDismiss=e(this,"nanoOverlayDismiss",7),this.componentId="drawer-"+ ++l,this.hasFooter=!1,this.isVisible=!1,this.open=!1,this.label="",this.placement="end",this.contained=!1,this.noHeader=!1,this.type="overlay"}handleOpenChange(){this.open?this.show():this.hide()}handleTypeChange(){if("push"===this.type||"reveal"===this.type)return this.contentEle?void 0:(this.type="overlay",void console.warn("a valid contentSelector must be set"))}handleContentSelector(){this.contentEle=this.contentSelector?this.host.ownerDocument.querySelector(this.contentSelector):null}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleOverlayClick=this.handleOverlayClick.bind(this),this.handleSlotChange=this.handleSlotChange.bind(this),this.modal=new n(this.host)}componentWillLoad(){this.open&&this.show(),this.handleContentSelector()}disconnectedCallback(){s(this.host)}async show(){this.isVisible||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.isVisible=!0,this.open=!0,this.contained||(this.modal.activate(),o(this.host)),!this.contentEle||"push"!==this.type&&"reveal"!==this.type||(this.contentEle.style.right="0",this.contentEle.style.transition="all ease 250ms",this.contentEle.style.position="relative",this.contentEle.style.overflow="hidden",setTimeout((()=>this.contentEle.style.right="25rem"),0))))}async hide(){this.isVisible&&(this.nanoHide.emit().defaultPrevented?this.open=!0:(this.open=!1,this.modal.deactivate(),s(this.host),this.contentEle&&(this.contentEle.style.transition="",this.contentEle.style.position="",this.contentEle.style.overflow="",this.contentEle.style.right="")))}handleCloseClick(){this.hide()}handleKeyDown(t){"Escape"===t.key&&this.hide()}handleOverlayClick(){this.nanoOverlayDismiss.emit().defaultPrevented||this.hide()}handleSlotChange(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')}handleTransitionEnd(t){"transform"===t.propertyName&&t.target.classList.contains("drawer__panel")&&(this.isVisible=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open&&this.panel.focus())}render(){return r(i,{dir:"rtl"===this.host.ownerDocument.dir?"rtl":null},r("div",{part:"base",class:{drawer:!0,"drawer--open":this.open,"drawer--visible":this.isVisible,["drawer--"+this.type]:!0,["drawer--"+this.placement]:!0,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:0},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}}};h.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";export{h as nano_drawer}
+//# sourceMappingURL=p-7df31b1c.entry.js.map

package/dist/nano-components/{p-60b2ba81.system.entry.js → p-7e208086.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(n,t,i,e){function o(n){return n instanceof i?n:new i((function(t){t(n)}))}return new(i||(i=Promise))((function(i,a){function r(n){try{l(e.next(n))}catch(t){a(t)}}function s(n){try{l(e["throw"](n))}catch(t){a(t)}}function l(n){n.done?i(n.value):o(n.value).then(r,s)}l((e=e.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},e,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(n){return function(t){return l([n,t])}}function l(r){if(e)throw new TypeError("Generator is already executing.");while(i)try{if(e=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;o=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){i.label=r[1];break}if(r[0]===6&&i.label<a[1]){i.label=a[1];a=r;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(r);break}if(a[2])i.ops.pop();i.trys.pop();continue}r=t.call(n,i)}catch(s){r=[6,s];o=0}finally{e=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-b346b2cb.system.js","./p-89a5c54a.system.js"],(function(n){"use strict";var t,i,e,o,a,r;return{setters:[function(n){t=n.r;i=n.c;e=n.h;o=n.g},function(n){a=n.f},function(n){r=n.c}],execute:function(){var s=".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";var l=!!document.head.attachShadow;var c=n("nano_rating",function(){function n(n){var e=this;t(this,n);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=function(n){return'<nano-icon name="'+e.symbolName+'"></nano-icon>'};this.handleClick=function(n){if(e.disabled||e.readonly){return}var t=e.getValueFromMousePosition(n);e.value=t===e.value?0:t;e.isHovering=false};this.handleKeyDown=function(n){if(e.disabled||e.readonly){return}if(n.key==="ArrowLeft"){var t=n.shiftKey?1:e.precision;e.value=e.roundToPrecision(Math.max(0,e.value-t));n.preventDefault()}if(n.key==="ArrowRight"){var i=n.shiftKey?1:e.precision;e.value=e.roundToPrecision(Math.min(e.max,e.value+i));n.preventDefault()}if(n.key==="Home"){e.value=0;n.preventDefault()}if(n.key==="End"){e.value=e.max;n.preventDefault()}};this.handleMouseEnter=function(){e.isHovering=true};this.handleMouseLeave=function(){e.isHovering=false};this.handleFocus=function(){e.nanoFocus.emit()};this.handleBlur=function(){e.nanoBlur.emit()};this.handleMouseMove=function(n){e.hoverValue=e.getValueFromMousePosition(n)}}n.prototype.handleValueChange=function(){this.nanoChange.emit()};n.prototype.handleSymbolChange=function(){var n=this;this.symbol=function(t){return'<nano-icon name="'+n.symbolName+'"></nano-icon>'}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.focus();return[2]}))}))};n.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.blur();return[2]}))}))};n.prototype.getValueFromMousePosition=function(n){var t=this.rating.getBoundingClientRect().left;var i=this.rating.getBoundingClientRect().width;var e;e=this.roundToPrecision((n.clientX-t)/i*this.max,this.precision);if(this.isRtl)e=this.max+this.precision-e;return r(e,0,this.max)};n.prototype.roundToPrecision=function(n,t){if(t===void 0){t=.5}var i=1/t;return Math.ceil(n*i)/i};n.prototype.clip=function(n){if(!this.rating)return;var t=this.rating.getBoundingClientRect().width;if(this.isRtl)return"rect(0, "+t+"px, 2em, "+(t-t/100*(n/this.max*100))+"px)";return"rect(0, "+t/100*(n/this.max*100)+"px, 2em, 0)"};n.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};n.prototype._fixClassNames=function(){var n=this.rating.className.split(" ").filter((function(n){return n.match(/^sc-nano/)}));var t=this._getRoot().querySelectorAll("*");if(!t)return;Array.from(t).map((function(t){n.map((function(n){return t.classList.add(n)}))}))};n.prototype.componentDidLoad=function(){var n=this;a.observe(this.rating);setTimeout((function(){return n.indicator.style.clip=n.clip(n.value)}),20)};n.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};n.prototype.disconnectedCallback=function(){a.unobserve(this.rating)};n.prototype.componentDidRender=function(){if(!this.host.shadowRoot||!l)this._fixClassNames()};n.prototype.render=function(){var n=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";var t=Array.from(Array(this.max).keys());var i=0;if(this.disabled||this.readonly){i=this.value}else{i=this.isHovering?this.hoverValue:this.value}return e("div",{class:"rating-wrap"},e("div",{dir:this.isRtl?"rtl":null,ref:function(t){return n.rating=t},part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},e("span",{class:"rating__symbols rating__symbols--inactive"},t.map((function(t){return e("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(i)===t+1},role:"presentation",onMouseEnter:n.handleMouseEnter,innerHTML:n.symbol(t+1)})}))),e("span",{ref:function(t){return n.indicator=t},class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(i)}},t.map((function(t){return e("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(i)===t+1},role:"presentation",innerHTML:n.symbol(t+1)})}))),e("input",{type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))};Object.defineProperty(n.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}},enumerable:false,configurable:true});return n}());c.style=s}}}));
-//# sourceMappingURL=p-60b2ba81.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(n,t,i,e){function o(n){return n instanceof i?n:new i((function(t){t(n)}))}return new(i||(i=Promise))((function(i,a){function r(n){try{l(e.next(n))}catch(t){a(t)}}function s(n){try{l(e["throw"](n))}catch(t){a(t)}}function l(n){n.done?i(n.value):o(n.value).then(r,s)}l((e=e.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},e,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(n){return function(t){return l([n,t])}}function l(r){if(e)throw new TypeError("Generator is already executing.");while(i)try{if(e=1,o&&(a=r[0]&2?o["return"]:r[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,r[1])).done)return a;if(o=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;o=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){i.label=r[1];break}if(r[0]===6&&i.label<a[1]){i.label=a[1];a=r;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(r);break}if(a[2])i.ops.pop();i.trys.pop();continue}r=t.call(n,i)}catch(s){r=[6,s];o=0}finally{e=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-af9f6453.system.js","./p-b346b2cb.system.js","./p-94f03788.system.js"],(function(n){"use strict";var t,i,e,o,a,r;return{setters:[function(n){t=n.r;i=n.c;e=n.h;o=n.g},function(n){a=n.f},function(n){r=n.c}],execute:function(){var s=".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";var l=!!document.head.attachShadow;var c=n("nano_rating",function(){function n(n){var e=this;t(this,n);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=function(n){return'<nano-icon name="'+e.symbolName+'"></nano-icon>'};this.handleClick=function(n){if(e.disabled||e.readonly){return}var t=e.getValueFromMousePosition(n);e.value=t===e.value?0:t;e.isHovering=false};this.handleKeyDown=function(n){if(e.disabled||e.readonly){return}if(n.key==="ArrowLeft"){var t=n.shiftKey?1:e.precision;e.value=e.roundToPrecision(Math.max(0,e.value-t));n.preventDefault()}if(n.key==="ArrowRight"){var i=n.shiftKey?1:e.precision;e.value=e.roundToPrecision(Math.min(e.max,e.value+i));n.preventDefault()}if(n.key==="Home"){e.value=0;n.preventDefault()}if(n.key==="End"){e.value=e.max;n.preventDefault()}};this.handleMouseEnter=function(){e.isHovering=true};this.handleMouseLeave=function(){e.isHovering=false};this.handleFocus=function(){e.nanoFocus.emit()};this.handleBlur=function(){e.nanoBlur.emit()};this.handleMouseMove=function(n){e.hoverValue=e.getValueFromMousePosition(n)}}n.prototype.handleValueChange=function(){this.nanoChange.emit()};n.prototype.handleSymbolChange=function(){var n=this;this.symbol=function(t){return'<nano-icon name="'+n.symbolName+'"></nano-icon>'}};n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.focus();return[2]}))}))};n.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.rating.blur();return[2]}))}))};n.prototype.getValueFromMousePosition=function(n){var t=this.rating.getBoundingClientRect().left;var i=this.rating.getBoundingClientRect().width;var e;e=this.roundToPrecision((n.clientX-t)/i*this.max,this.precision);if(this.isRtl)e=this.max+this.precision-e;return r(e,0,this.max)};n.prototype.roundToPrecision=function(n,t){if(t===void 0){t=.5}var i=1/t;return Math.ceil(n*i)/i};n.prototype.clip=function(n){if(!this.rating)return;var t=this.rating.getBoundingClientRect().width;if(this.isRtl)return"rect(0, "+t+"px, 2em, "+(t-t/100*(n/this.max*100))+"px)";return"rect(0, "+t/100*(n/this.max*100)+"px, 2em, 0)"};n.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};n.prototype._fixClassNames=function(){var n=this.rating.className.split(" ").filter((function(n){return n.match(/^sc-nano/)}));var t=this._getRoot().querySelectorAll("*");if(!t)return;Array.from(t).map((function(t){n.map((function(n){return t.classList.add(n)}))}))};n.prototype.componentDidLoad=function(){var n=this;a.observe(this.rating);setTimeout((function(){return n.indicator.style.clip=n.clip(n.value)}),20)};n.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};n.prototype.disconnectedCallback=function(){a.unobserve(this.rating)};n.prototype.componentDidRender=function(){if(!this.host.shadowRoot||!l)this._fixClassNames()};n.prototype.render=function(){var n=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";var t=Array.from(Array(this.max).keys());var i=0;if(this.disabled||this.readonly){i=this.value}else{i=this.isHovering?this.hoverValue:this.value}return e("div",{class:"rating-wrap"},e("div",{dir:this.isRtl?"rtl":null,ref:function(t){return n.rating=t},part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},e("span",{class:"rating__symbols rating__symbols--inactive"},t.map((function(t){return e("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(i)===t+1},role:"presentation",onMouseEnter:n.handleMouseEnter,innerHTML:n.symbol(t+1)})}))),e("span",{ref:function(t){return n.indicator=t},class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(i)}},t.map((function(t){return e("span",{class:{rating__symbol:true,"rating__symbol--hover":n.isHovering&&Math.ceil(i)===t+1},role:"presentation",innerHTML:n.symbol(t+1)})}))),e("input",{type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))};Object.defineProperty(n.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}},enumerable:false,configurable:true});return n}());c.style=s}}}));
+//# sourceMappingURL=p-7e208086.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","exports","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-63cc5e0d.system.entry.js → p-7e4129b4.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function u(t){try{l(r.next(t))}catch(e){i(e)}}function a(t){try{l(r["throw"](t))}catch(e){i(e)}}function l(t){t.done?n(t.value):o(t.value).then(u,a)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return l([t,e])}}function l(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(i=u[0]&2?o["return"]:u[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,u[1])).done)return i;if(o=0,i)u=[u[0]&2,i.value];switch(u[0]){case 0:case 1:i=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;o=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!i||u[1]>i[0]&&u[1]<i[3])){n.label=u[1];break}if(u[0]===6&&n.label<i[1]){n.label=i[1];i=u;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(u);break}if(i[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(a){u=[6,a];o=0}finally{r=i=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-e886b71e.system.js"],(function(t){"use strict";var e,n,r,o,i,u;return{setters:[function(t){e=t.r;n=t.c;r=t.h;o=t.e;i=t.g},function(t){u=t.W}],execute:function(){var a=t("nano_algolia_pagination",function(){function t(t){e(this,t);this.nanoPageChanged=n(this,"nanoPageChanged",7);this.currentPage=null;this.canGoPrev=false;this.canGoNext=false;this.show=true;this.indexResults=null;this.infiniteScroll=false;this.maxToShow=null}t.prototype.currentPageChange=function(){};t.prototype.infiniteScrollChange=function(){this.show=!this.infiniteScroll};t.prototype.nextPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.prevPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.goToPage=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){console.log(t);return[2]}))}))};t.prototype.updateContent=function(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}};t.prototype.componentWillLoad=function(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(!!this.templateSlot)this.templateStr=this.templateSlot.innerHTML};t.prototype.componentDidLoad=function(){this.updateContent()};t.prototype.render=function(){var t=this;return r(o,{class:{"show-pagination":this.show}},r("div",{ref:function(e){return t.outputEle=e}},r("slot",{name:"output"})))};Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}},enumerable:false,configurable:true});return t}());u(a,["indexResults","filterChanged","tplRenderFn"])}}}));
-//# sourceMappingURL=p-63cc5e0d.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function u(t){try{l(r.next(t))}catch(e){i(e)}}function a(t){try{l(r["throw"](t))}catch(e){i(e)}}function l(t){t.done?n(t.value):o(t.value).then(u,a)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return l([t,e])}}function l(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(i=u[0]&2?o["return"]:u[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,u[1])).done)return i;if(o=0,i)u=[u[0]&2,i.value];switch(u[0]){case 0:case 1:i=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;o=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!i||u[1]>i[0]&&u[1]<i[3])){n.label=u[1];break}if(u[0]===6&&n.label<i[1]){n.label=i[1];i=u;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(u);break}if(i[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(a){u=[6,a];o=0}finally{r=i=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-af9f6453.system.js","./p-698a8ab3.system.js"],(function(t){"use strict";var e,n,r,o,i,u;return{setters:[function(t){e=t.r;n=t.c;r=t.h;o=t.e;i=t.g},function(t){u=t.W}],execute:function(){var a=t("nano_algolia_pagination",function(){function t(t){e(this,t);this.nanoPageChanged=n(this,"nanoPageChanged",7);this.currentPage=null;this.canGoPrev=false;this.canGoNext=false;this.show=true;this.indexResults=null;this.infiniteScroll=false;this.maxToShow=null}t.prototype.currentPageChange=function(){};t.prototype.infiniteScrollChange=function(){this.show=!this.infiniteScroll};t.prototype.nextPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.prevPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.goToPage=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){console.log(t);return[2]}))}))};t.prototype.updateContent=function(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}};t.prototype.componentWillLoad=function(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(!!this.templateSlot)this.templateStr=this.templateSlot.innerHTML};t.prototype.componentDidLoad=function(){this.updateContent()};t.prototype.render=function(){var t=this;return r(o,{class:{"show-pagination":this.show}},r("div",{ref:function(e){return t.outputEle=e}},r("slot",{name:"output"})))};Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}},enumerable:false,configurable:true});return t}());u(a,["indexResults","filterChanged","tplRenderFn"])}}}));
+//# sourceMappingURL=p-7e4129b4.system.entry.js.map

package/dist/nano-components/{p-7fdff708.entry.js → p-7e68796f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,g as r}from"./p-f55560d3.js";import{h as e}from"./p-c930d4f5.js";let i=class{constructor(r){t(this,r),this.isLegacy=!1,this.imgSrcSet=null,this.largeScreenBP=900,this.theme="dark",this.level="top",this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?o("div",{class:"hero__ctas"},o("slot",{name:"secondary-ctas"})):"",o("div",{class:"hero__scrim"},o("slot",{name:"scrim"})),o("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},o("nano-grid-item",{gridStates:"xl-col-span-2"},o("div",{class:"hero__breadcrumbs"},o("slot",{name:"breadcrumb"}))),o("nano-grid-item",{gridStates:this.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"},o("div",{class:"hero__primary"},o("div",{class:"hero__primary-content"},o("slot",{name:"back-btn"}),o("div",null,o("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&o("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},o("div",{class:"hero__secondary"},o("slot",{name:"secondary-content"}),this.hasIconBox&&o("div",{class:"hero__icon-box"},o("slot",{name:"icon-box"}),o("slot",{name:"icon-box-item"})),this.hasQuote&&o("div",{class:"hero__quote-content"},o("span",{class:"hero__quote"},o("slot",{name:"quote"})),o("div",{class:"hero__quote-author"},o("slot",{name:"quote-author"}))))))]}breadCrumbChange(){this.breadCrumbs.filter((t=>"A"===t.tagName&&!t.nextElementSibling.classList.contains("slash"))).forEach((t=>{t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((t=>t.classList.remove("last"))),this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList&&this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0})}processSlottedContent(){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"]')}connectedCallback(){this.isLegacy=!e(this.host)}disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){return o("div",{class:{hero:!0,"hero--light":"light"===this.theme,"hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":"rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":"sub"===this.level}},o("div",{class:"hero__bg-wrap"},!!this.imgSrc&&o("nano-img",{class:"hero__img",lazy:!1,background:!0,srcSet:this.imgSrcSet,src:this.imgSrc},o(this.HeroContent,null)),!this.imgSrc&&[o("div",{class:"hero__bg-slot"},o("slot",{name:"background"})),o(this.HeroContent,null)]))}get host(){return r(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};i.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}: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;color:var(--theme-color)}: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:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.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}";export{i as nano_hero}
-//# sourceMappingURL=p-7fdff708.entry.js.map
+import{r as t,h as o,g as e}from"./p-bb0619e6.js";import{h as r}from"./p-ed2efbeb.js";let i=class{constructor(e){t(this,e),this.isLegacy=!1,this.imgSrcSet=null,this.largeScreenBP=900,this.theme="dark",this.level="top",this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?o("div",{class:"hero__ctas"},o("slot",{name:"secondary-ctas"})):"",o("div",{class:"hero__scrim"},o("slot",{name:"scrim"})),o("nano-grid",{class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},o("nano-grid-item",{gridStates:"xl-col-span-2"},o("div",{class:"hero__breadcrumbs"},o("slot",{name:"breadcrumb"}))),o("nano-grid-item",{gridStates:this.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"},o("div",{class:"hero__primary"},o("div",{class:"hero__primary-content"},o("slot",{name:"back-btn"}),o("div",null,o("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&o("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},o("div",{class:"hero__secondary"},o("slot",{name:"secondary-content"}),this.hasIconBox&&o("div",{class:"hero__icon-box"},o("slot",{name:"icon-box"}),o("slot",{name:"icon-box-item"})),this.hasQuote&&o("div",{class:"hero__quote-content"},o("span",{class:"hero__quote"},o("slot",{name:"quote"})),o("div",{class:"hero__quote-author"},o("slot",{name:"quote-author"}))))))]}breadCrumbChange(){this.breadCrumbs.filter((t=>"A"===t.tagName&&!t.nextElementSibling.classList.contains("slash"))).forEach((t=>{t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((t=>t.classList.remove("last"))),this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList&&this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){this.mo&&this.mo.disconnect(),(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0})}processSlottedContent(){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"]')}connectedCallback(){this.isLegacy=!r(this.host)}disconnectedCallback(){this.mo&&this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){return o("div",{class:{hero:!0,"hero--light":"light"===this.theme,"hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":"rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":"sub"===this.level}},o("div",{class:"hero__bg-wrap"},!!this.imgSrc&&o("nano-img",{class:"hero__img",lazy:!1,background:!0,srcSet:this.imgSrcSet,src:this.imgSrc},o(this.HeroContent,null)),!this.imgSrc&&[o("div",{class:"hero__bg-slot"},o("slot",{name:"background"})),o(this.HeroContent,null)]))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};i.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}: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;color:var(--theme-color)}: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:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.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}";export{i as nano_hero}
+//# sourceMappingURL=p-7e68796f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/hero/hero.tsx","src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow"],"names":["Hero","[object Object]","hostRef","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItems","item","remove","length","add","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","hasShadowDom","slotChangeObserver","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","dir","ownerDocument","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\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() 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  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  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 class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\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      <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    );\n  }\n}\n","@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  */\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\n  color: var(--theme-color);\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: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n\n    ::slotted([slot='quote']),\n    &::slotted([slot='quote']) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\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"]}

package/dist/nano-components/{p-027c5ed7.entry.js → p-81d7fd45.entry.js}

@@ -1,2 +1,2 @@
-import{k as i,r as n,h as o,e as t,g as r}from"./p-f55560d3.js";import{c as a}from"./p-d3af43d2.js";let s;const e=(i,n)=>(i||!n||l(n)||(i=n),h(i)&&(i=m(i)),h(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>h(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),h=i=>"string"==typeof i,m=i=>i.toLowerCase(),g=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(h(o)&&0===o.toLowerCase().indexOf("on"))return!1}for(let n=0;n<i.childNodes.length;n++)if(!g(i.childNodes[n]))return!1}return!0},d=new Map,p=new Map,f=!!document.head.attachShadow;let v=class{constructor(i){n(this,i),this.isVisible=!1,this.isLoading=!0,this.lazy=!0}setAriaLabel(){if(!this.ariaLabel){const i=e(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/\-/g," "))}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(i,n,o){if(f&&this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(t.disconnect(),this.io=void 0,o())}),{rootMargin:n});t.observe(i)}else o()}loadIcon(){if(this.isVisible){const n=(n=>{let o=c(n.src);return o||(o=e(n.name,n.icon),o?(t=o,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(t)||i(`../node_modules/@fortawesome/fontawesome-pro/svgs/${t}.svg`)):n.icon&&(o=c(n.icon),o)?o:null);var t})(this);n&&(d.has(n)?(this.svgContent=d.get(n),this.isLoading=!1):(i=>{let n=p.get(i);return n||(n=fetch(i).then((n=>{if(n.ok)return n.text().then((n=>{d.set(i,(i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--)"svg"!==n.childNodes[i].nodeName.toLowerCase()&&n.removeChild(n.childNodes[i]);const o=n.firstElementChild;if(o&&"svg"===o.nodeName.toLowerCase()){const i=o.getAttribute("class")||"";if(o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),g(o))return n.innerHTML}}return""})(n))}));d.set(i,"")})),p.set(i,n)),n})(n).then((()=>{this.svgContent=d.get(n),this.isLoading=!1})))}this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&"rtl"===this.el.ownerDocument.dir&&!1!==this.flipRtl;return o(t,{role:"img",class:Object.assign(Object.assign({},a(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i})},o("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};v.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;color:var(--color);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';export{v as nano_icon}
-//# sourceMappingURL=p-027c5ed7.entry.js.map
+import{k as i,r as n,h as o,e as t,g as r}from"./p-bb0619e6.js";import{c as a}from"./p-d3af43d2.js";let s;const e=(i,n)=>(i||!n||l(n)||(i=n),h(i)&&(i=m(i)),h(i)&&""!==i.trim()?""!==i.replace(/[a-z]|-|\/|\d/gi,"")?(console.warn("invalid characters in icon name "+i),null):i:null),c=i=>h(i)&&(i=i.trim(),l(i))?i:null,l=i=>i.length>0&&/(\/|\.)/.test(i),h=i=>"string"==typeof i,m=i=>i.toLowerCase(),g=i=>{if(1===i.nodeType){if("script"===i.nodeName.toLowerCase())return!1;for(let n=0;n<i.attributes.length;n++){const o=i.attributes[n].value;if(h(o)&&0===o.toLowerCase().indexOf("on"))return!1}for(let n=0;n<i.childNodes.length;n++)if(!g(i.childNodes[n]))return!1}return!0},d=new Map,p=new Map,v=!!document.head.attachShadow;let b=class{constructor(i){n(this,i),this.isVisible=!1,this.isLoading=!0,this.lazy=!0}setAriaLabel(){if(!this.ariaLabel){const i=e(this.name,this.icon);i&&(this.ariaLabel=i.split("/").slice(-1)[0].replace(/\-/g," "))}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=!0,this.loadIcon()}))}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=void 0)}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(i,n,o){if(v&&this.lazy&&"undefined"!=typeof window&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((i=>{(i[0].isIntersecting||i[1]&&i[1].isIntersecting)&&(t.disconnect(),this.io=void 0,o())}),{rootMargin:n});t.observe(i)}else o()}loadIcon(){if(this.isVisible){const n=(n=>{let o=c(n.src);return o||(o=e(n.name,n.icon),o?(t=o,(()=>{if(!s){const i=window;i.Nanoicons=i.Nanoicons||{},s=i.Nanoicons.map=i.Nanoicons.map||new Map}return s})().get(t)||i(`../node_modules/@fortawesome/fontawesome-pro/svgs/${t}.svg`)):n.icon&&(o=c(n.icon),o)?o:null);var t})(this);n&&(d.has(n)?(this.svgContent=d.get(n),this.isLoading=!1):(i=>{let n=p.get(i);return n||(n=fetch(i).then((n=>{if(n.ok)return n.text().then((n=>{d.set(i,(i=>{if(i){const n=document.createElement("div");n.innerHTML=i;for(let i=n.childNodes.length-1;i>=0;i--)"svg"!==n.childNodes[i].nodeName.toLowerCase()&&n.removeChild(n.childNodes[i]);const o=n.firstElementChild;if(o&&"svg"===o.nodeName.toLowerCase()){const i=o.getAttribute("class")||"";if(o.setAttribute("class",(i+" sc-nano-icon s-nano-icon svg").trim()),g(o))return n.innerHTML}}return""})(n))}));d.set(i,"")})),p.set(i,n)),n})(n).then((()=>{this.svgContent=d.get(n),this.isLoading=!1})))}this.setAriaLabel()}render(){const i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&"rtl"===this.el.ownerDocument.dir&&!1!==this.flipRtl;return o(t,{role:"img",class:Object.assign(Object.assign({},a(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!i})},o("div",this.svgContent?{class:"icon-inner",innerHTML:this.svgContent}:{class:"icon-inner"}))}static get assetsDirs(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};b.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;color:var(--color);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';export{b as nano_icon}
+//# sourceMappingURL=p-81d7fd45.entry.js.map

package/dist/nano-components/{p-d795cbd4.entry.js → p-82571543.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,f as s,h as e,e as h,g as l}from"./p-f55560d3.js";import{W as n}from"./p-1f7502fa.js";import{C as o}from"./p-e1fd68eb.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";let r=class{constructor(s){t(this,s),this.nanoFilterChanged=i(this,"nanoFilterChanged",7),this.nanoTplUpdated=i(this,"nanoTplUpdated",7),this.filterId=null,this.tplWillRnder=new Promise((t=>{this.tplDidRnder=t})),this.internalValue=[void 0],this.showFilter=!1,this.indexResults=null,this.filterChanged=null,this.filterName=null,this.value="",this.operator="or",this.storeMethod="session",this.handleChangeEvent=()=>{let t=this.getFieldValues();return!!this.didValueChange(t)&&(this.internalValue=t,!0)}}valueSet(){let t,i=this.value;if(t="string"==typeof i?i.length?i.split("|"):[]:this.value,this.didValueChange(t)){let i=this.setFieldValues(t);i&&i.length?this.internalValue=t:this.tplWillRnder.then((()=>{this.setFieldValues(t),this.internalValue=t}))}}valueChanged(){this.value=this.internalValue,this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}viewFilterChange(){this.showFilter?this.attachChangeListener():this.attachChangeListener(!1)}appliedFilterChanged(){this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||"and"===this.operator)&&this.updateContent()}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((()=>{let i=this.setFieldValues(t.values);i&&i.length&&(this.value=i)}))}this.updateContent()}updateContent(){let t=this.outputSlot||this.outputEle;this.el&&(this.templateStr?this.filterName&&t&&(!this.templateStr||this.indexResults&&this.indexResults.origFilters[this.filterName])||(this.showFilter=!1):this.showFilter=!0,t&&(this.indexResults?s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:Object.assign({},this.indexResults.origFilters[this.filterName]),dyn:Object.assign({},this.indexResults.dynFilters[this.filterName]),selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value}),this.tplDidRnder(),this.setFieldValues(),this.showFilter||(this.showFilter=!0),this.nanoTplUpdated.emit(this.el)})):this.templateStr?s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value}),this.value&&this.value.length||this.handleChangeEvent()})):this.value&&this.value.length||this.handleChangeEvent()))}getFieldValues(){let t=[],i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let s=0;s<i.length;s++){let e=i[s];if("select-multiple"===e.type){let i=e;for(let s=0;s<i.options.length;s++)i.options[s].selected&&i.options[s].value.length&&t.push(i.options[s].value)}else("checkbox"!==e.type&&"radio"!==e.type||e.checked&&e.value.length)&&t.push(e.value)}return t}setFieldValues(t){if(!(t=t||this.internalValue))return;let i=[],s=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let e=0;e<s.length;e++){let h=s[e];if(!h.disabled&&"file"!==h.type&&"reset"!==h.type&&"submit"!==h.type&&"button"!==h.type)if("select-multiple"===h.type||"select-one"===h.type){let s=h;for(let e=0;e<s.options.length;e++)t.includes(s.options[e].value)?(i.push(s.value),s.options[e].selected=!0,"select-one"===h.type&&(s.value=s.options[e].value)):s.options[e].selected=!1}else["checkbox","radio","tag","segment","segment-pill"].includes(h.type)&&(t.includes(h.value)?(i.push(h.value),h.checked=!0):h.checked=!t.length&&!h.value.length)}return i}didValueChange(t){if(this.internalValue&&!t)return!0;if(!this.internalValue&&!t)return!1;if(this.internalValue&&t.length!==this.internalValue.length)return!0;let i=!1;for(var s=0;s<t.length;s++)i||this.internalValue&&this.internalValue.includes(t[s])||(i=!0);return i}attachChangeListener(t=!0){this.outputSlot&&(t?(this.outputSlot.addEventListener("change",this.handleChangeEvent),this.outputSlot.addEventListener("nanoChange",this.handleChangeEvent)):(this.outputSlot.removeEventListener("change",this.handleChangeEvent),this.outputSlot.removeEventListener("nanoChange",this.handleChangeEvent)))}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]'),this.outputSlot=this.el.querySelector('[slot="output"]'),this.filterId=this.filterName+"_"+a++,this.templateSlot&&(this.templateStr=this.templateSlot.innerHTML,this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>"))}componentWillLoad(){this.storeId&&o.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent(),this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName]&&(this.showFilter=!0)}render(){return e(h,{class:{"show-filter":this.showFilter}},e("div",{ref:t=>this.outputEle=t},e("slot",{name:"output"})))}get el(){return l(this)}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],showFilter:["viewFilterChange"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};n(r,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let a=0;r.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none}:host ::slotted([slot=filter-template]),:host::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";export{r as nano_algolia_filter}
-//# sourceMappingURL=p-d795cbd4.entry.js.map
+import{r as t,c as i,f as s,h as e,e as h,g as l}from"./p-bb0619e6.js";import{W as n}from"./p-ff2ff5b0.js";import{C as o}from"./p-a1680208.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";let r=class{constructor(s){t(this,s),this.nanoFilterChanged=i(this,"nanoFilterChanged",7),this.nanoTplUpdated=i(this,"nanoTplUpdated",7),this.filterId=null,this.tplWillRnder=new Promise((t=>{this.tplDidRnder=t})),this.internalValue=[void 0],this.showFilter=!1,this.indexResults=null,this.filterChanged=null,this.filterName=null,this.value="",this.operator="or",this.storeMethod="session",this.handleChangeEvent=()=>{let t=this.getFieldValues();return!!this.didValueChange(t)&&(this.internalValue=t,!0)}}valueSet(){let t,i=this.value;if(t="string"==typeof i?i.length?i.split("|"):[]:this.value,this.didValueChange(t)){let i=this.setFieldValues(t);i&&i.length?this.internalValue=t:this.tplWillRnder.then((()=>{this.setFieldValues(t),this.internalValue=t}))}}valueChanged(){this.value=this.internalValue,this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})}viewFilterChange(){this.showFilter?this.attachChangeListener():this.attachChangeListener(!1)}appliedFilterChanged(){this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||"and"===this.operator)&&this.updateContent()}tplUpdate(){this.updateContent()}handleFilterChange(){if(this.indexResults&&this.indexResults.appliedFilters){const t=this.indexResults.appliedFilters.find((t=>t.name===this.filterName));if(!t)return;this.tplWillRnder.then((()=>{let i=this.setFieldValues(t.values);i&&i.length&&(this.value=i)}))}this.updateContent()}updateContent(){let t=this.outputSlot||this.outputEle;this.el&&(this.templateStr?this.filterName&&t&&(!this.templateStr||this.indexResults&&this.indexResults.origFilters[this.filterName])||(this.showFilter=!1):this.showFilter=!0,t&&(this.indexResults?s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:Object.assign({},this.indexResults.origFilters[this.filterName]),dyn:Object.assign({},this.indexResults.dynFilters[this.filterName]),selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value}),this.tplDidRnder(),this.setFieldValues(),this.showFilter||(this.showFilter=!0),this.nanoTplUpdated.emit(this.el)})):this.templateStr?s((()=>{t.innerHTML=this.tplRenderFn(this.templateStr,{orig:{},dyn:{},selected:this.internalValue&&this.internalValue.length?this.internalValue:this.value}),this.value&&this.value.length||this.handleChangeEvent()})):this.value&&this.value.length||this.handleChangeEvent()))}getFieldValues(){let t=[],i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(let s=0;s<i.length;s++){let e=i[s];if("select-multiple"===e.type){let i=e;for(let s=0;s<i.options.length;s++)i.options[s].selected&&i.options[s].value.length&&t.push(i.options[s].value)}else("checkbox"!==e.type&&"radio"!==e.type||e.checked&&e.value.length)&&t.push(e.value)}return t}setFieldValues(t){if(!(t=t||this.internalValue))return;let i=[],s=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(let e=0;e<s.length;e++){let h=s[e];if(!h.disabled&&"file"!==h.type&&"reset"!==h.type&&"submit"!==h.type&&"button"!==h.type)if("select-multiple"===h.type||"select-one"===h.type){let s=h;for(let e=0;e<s.options.length;e++)t.includes(s.options[e].value)?(i.push(s.value),s.options[e].selected=!0,"select-one"===h.type&&(s.value=s.options[e].value)):s.options[e].selected=!1}else["checkbox","radio","tag","segment","segment-pill"].includes(h.type)&&(t.includes(h.value)?(i.push(h.value),h.checked=!0):h.checked=!t.length&&!h.value.length)}return i}didValueChange(t){if(this.internalValue&&!t)return!0;if(!this.internalValue&&!t)return!1;if(this.internalValue&&t.length!==this.internalValue.length)return!0;let i=!1;for(var s=0;s<t.length;s++)i||this.internalValue&&this.internalValue.includes(t[s])||(i=!0);return i}attachChangeListener(t=!0){this.outputSlot&&(t?(this.outputSlot.addEventListener("change",this.handleChangeEvent),this.outputSlot.addEventListener("nanoChange",this.handleChangeEvent)):(this.outputSlot.removeEventListener("change",this.handleChangeEvent),this.outputSlot.removeEventListener("nanoChange",this.handleChangeEvent)))}connectedCallback(){this.templateSlot=this.el.querySelector('[slot="filter-template"]'),this.outputSlot=this.el.querySelector('[slot="output"]'),this.filterId=this.filterName+"_"+a++,this.templateSlot&&(this.templateStr=this.templateSlot.innerHTML,this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>"))}componentWillLoad(){this.storeId&&o.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)}componentDidLoad(){this.updateContent(),this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName]&&(this.showFilter=!0)}render(){return e(h,{class:{"show-filter":this.showFilter}},e("div",{ref:t=>this.outputEle=t},e("slot",{name:"output"})))}get el(){return l(this)}static get watchers(){return{value:["valueSet"],internalValue:["valueChanged"],showFilter:["viewFilterChange"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}}};n(r,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);let a=0;r.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none}:host ::slotted([slot=filter-template]),:host::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";export{r as nano_algolia_filter}
+//# sourceMappingURL=p-82571543.entry.js.map