@nanoporetech-digital/components 3.0.0 → 3.1.0

package/dist/nano-components/p-65f84bbd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/fetch.ts","src/components/global-nav/style/global-nav.scss?tag=nano-global-nav&encapsulation=shadow","src/components/global-nav/global-nav.tsx"],"names":["async","clientFetch","url","body","customConfig","headers","Accept","Access-Control-Allow-Origin","Content-Type","Cache","config","method","credentials","keepalive","mode","JSON","stringify","id","setTimeout","window","AbortController","controller","timeout","abort","signal","response","fetch","clearTimeout","ok","json","errorMessage","text","Error","globalNavCss","THRESHOLDBREAKS","search","about","main","login","icon","GlobalNav","this","currSize","thresholdsGoingUp","THRESHOLDLIMIT","Object","keys","length","autocompleteEles","currAIndex","isLoggedIn","myAccData","aboutNavItms","siteNavItms","loggedInNavItms","setResizingState","state","debounceSetResizingState","debounce","isResizing","onMenuBtnKeyDown","ev","key","modalOpen","menuClose","menuOpen","onMenuBtnClick","e","preventDefault","menuDiv","style","display","modalIsOpen","menuWrapDiv","addEventListener","focus","preventScroll","threshold","scrollHeight","innerHeight","document","overflow","menuFullScreen","overflowX","onMenuHidden","removeEventListener","activeElement","menuBtn","mainBarDiv","force","relatedTarget","closestElement","closest","secondaryMenuOpen","subMenuClose","target","open","onUserBtnClick","userMenuOpen","onUserBtnKeyDown","onUserMenuBlur","onSearchBtnClick","searchBarShown","searchbarShow","searchbarHide","onSearchBtnKeyDown","onSearchBarShown","searchBarEl","searchInput","setFocus","showAutocomplete","searchValInternal","onSearchBarHidden","height","onSearchInput","value","isSearchValSet","searchLoading","detail","type","onSearchChange","searchValue","autocompleteResults","nanoSearchReset","emit","currentIndex","currentSelectedIndex","processSearchResults","alogliaIndex","attributesToSnippet","hitsPerPage","filters","Math","floor","Date","now","console","error","scopeSearch","onSearchSubmit","showAutocompleteResults","algoliaSearchResults","queries","internalSearchIndeces","map","index","indexName","query","facets","algoliaClient","multipleQueries","nanoSearchError","results","result","i","name","selected","domain","domains","allGroup","nanoSearchResult","client","apiKey","searchApiKey","appId","searchAppId","onSearchIndexChange","indexStr","selectedIndex","find","searchIndex","switchIndexSubmit","onAutocompleteBlur","hits","onAutocompleteInteract","testIndex","el","shadowRoot","found","ele","setActiveElement","click","encodeURIComponent","location","href","protocol","host","[object Object]","env","userProfileUrl","getMyAccountData","remoteDataReady","ssoDataUrl","import","user","myAccountUser","processMyAccLinks","processMyAccData","foundIndex","algoliasearch","addAlgoliaIndeces","searchIndeces","forEach","initIndex","newThreshold","oldThreshold","intersectRatio","ratioChange","thresholdReady","siteContent","minHeight","barsDiv","clientHeight","menuItems","barItems","readTask","Array","from","querySelectorAll","push","writeTask","item","classList","add","remove","ready","attachIO","nanoIsReady","classes","innerWidth","secondaryMenu","stopPropagation","menuContentDiv","displayTransition","userLinkPanel","querySelector","hit","lookFor","_snippetResult","prop","matchLevel","title","substring","autocompleteEle","setAttribute","hasSiteSlot","hasLoggedinSlot","hasPromotionSlot","aboutSlotLen","iconSlotLen","mainSlotLen","overflowSlotLen","searchSlotLen","io","root","IntersectionObserver","data","slice","intersectionRatio","observe","debounceResize","onWindowResize","bind","initAlgoliaClient","ComponentStore","init","MutationObserver","mo","assessSlottedContent","childList","subtree","disconnect","undefined","getMyAccData","content","scrollingUp","currentScopeHits","scopeChangeSuggestions","scopeSuggestReducer","total","currentSuggestReducer","reduce","scopeSuggestions","h","class","role","ref","a","tabindex","innerHTML","autocompleteSnippet","button","onClick","onMouseDown","aria-expanded","hidden","onKeyDown","onSubmit","label","hideLabel","showInlineError","onNanoChange","mask","aria-label","clear-input","placeholder","input","onNanoInput","aria-autocomplete","aria-activedescendant","aria-controls","onNanoFocus","search-icon","search-icon--search","search-icon--show","slot","search-icon--loader","isRtl","ownerDocument","dir","searchWidget","autocompleteList","Host","thresholdClasses","join","search-bar-shown","search-auto-complete-shown","modal-open","resizing","global-nav","scrolling-down","gn-menu","has-promotion","menu-full-screen","secondary-open","div","activeMyAccountSections","includes","msgUrl","msgCount","cartUrl","cartCount","urls","ssoRedirect","link","address","small_avatar_url","forgot_password","logout","auto-resize","break-point-max","quietMode","w","btn","showLogo","logoUrl","src","getAssetPath","alt","showSearch","aria-owns","icon-btn","search-btn","search-btn--open","user-links-btn","search-bar","show","onTouchEnd","origin","dm","multiResults","singleResult","match","domainFor","indeces","api_key","app_id","cart","count","notifications","messages","links","area"],"mappings":"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","sourcesContent":["interface FetchInputConfig {\n  body?: { [prop: string]: string };\n  headers?: { [prop: string]: string };\n  [prop: string]: any;\n}\n\nexport async function clientFetch(\n  url: string,\n  { body, ...customConfig }: FetchInputConfig = {}\n) {\n  const headers: { [prop: string]: string } = {\n    Accept: 'application/json, text/plain, */*',\n    'Access-Control-Allow-Origin': '*',\n    'Content-Type': 'application/json',\n    Cache: 'no-cache',\n  };\n  const config: RequestInit = {\n    method: body ? 'POST' : 'GET',\n    credentials: 'include',\n    keepalive: true,\n    mode: 'cors',\n    ...customConfig,\n    headers: {\n      ...headers,\n      ...customConfig.headers,\n    },\n  };\n  if (body) {\n    config.body = JSON.stringify(body);\n  }\n\n  let id = setTimeout(() => {}, 0);\n  if (window.AbortController) {\n    const controller = new AbortController();\n    const { timeout = 500 } = customConfig;\n    id = setTimeout(() => controller.abort(), timeout);\n    config.signal = controller.signal;\n  }\n\n  const response = await fetch(url, config);\n  clearTimeout(id);\n\n  if (response.ok) {\n    return await response.json();\n  } else {\n    const errorMessage = await response.text();\n    return new Error(errorMessage);\n  }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n// globals\n@import '../../../global/style/utilities/globals';\n@import '../../../global/style/nano-theme/base';\n@import '../../../global/style/nano-theme/colours';\n@import '../../../global/style/nano-theme/layers';\n\n// local\n@import 'setup';\n@import 'bar';\n@import 'burger';\n@import 'search';\n@import 'user';\n\n:host {\n  /**\n   * @prop --bar-vertical-padding. Defaults to 21px;\n   * @prop --bar-item-spacing. Defaults to 16px;\n   * @prop --bar-background. Defaults to white;\n   * @prop --bar-text-color. Defaults to #196c82;\n   * @prop --bar-color-shade. Defaults to rgb(19, 89, 111);\n   * @prop --bar-color-tint. Defaults to rgb(19, 89, 111);\n   * @prop --bar-color-focus. Defaults to #001a21;\n   * @prop --bar-user-panel-bg. Defaults to #016d86;\n\n   * @prop --menu-background. Defaults to #001a21;\n   * @prop --menu-text-color. Defaults to white;\n   * @prop --bar-dropdown-bg. Defaults to #196c82;\n   * @prop --bar-dropdown-text. Defaults to white;\n   * @prop --menu-user-profile-bg. Defaults to #001a21;\n   * @prop --menu-user-panel-bg. Defaults to #193037;\n   * @prop --menu-padding. Defaults to 12px;\n   * @prop --menu-hint-color. Defaults to #33484d;\n   * @prop --menu-title-text. Defaults to #{map.get($colors, lightblue)};\n   * @prop --menu-icon-color. Defaults to white;\n\n   * @prop --login-button-bg. Defaults to #17bb75;\n   * @prop --login-button-text. Defaults to white;\n   */\n\n  --bar-vertical-padding: 21px;\n  --bar-item-spacing: 16px;\n  --bar-background: white;\n  --bar-text-color: #196c82;\n  --bar-color-shade: rgb(19, 89, 111);\n  --bar-color-tint: rgb(19, 89, 111);\n  --bar-color-focus: #001a21;\n  --bar-user-panel-bg: #016d86;\n  --bar-dropdown-bg: #196c82;\n  --bar-dropdown-text: white;\n  --menu-background: #001a21;\n  --menu-text-color: white;\n  --menu-user-profile-bg: #001a21;\n  --menu-user-panel-bg: #193037;\n  --menu-padding: 12px;\n  --menu-hint-color: #33484d;\n  --menu-title-text: #{map.get($colors, lightblue)};\n  --menu-icon-color: white;\n  --login-button-bg: #17bb75;\n  --login-button-text: white;\n\n  // not sure if this required any more\n  --padding: 12px;\n  --padding-top: var(--padding);\n  --padding-end: var(--padding);\n  --padding-bottom: var(--padding);\n  --padding-start: var(--padding);\n\n  display: block;\n  position: relative;\n  line-height: 1.5;\n  height: 100%;\n  font-size: 0.9375em;\n\n  input,\n  select,\n  button {\n    font-family: inherit;\n    appearance: none;\n    font-size: inherit;\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Prop,\n  Listen,\n  Build,\n  getAssetPath,\n  readTask,\n  writeTask,\n  Method,\n  VNode,\n  ComponentInterface,\n} from '@stencil/core';\nimport algoliasearch, { SearchClient as AlgoliaClient } from 'algoliasearch';\nimport { closestElement } from '../../utils/dom';\nimport { clientFetch } from '../../utils/fetch';\nimport { ComponentStore } from '../../utils/store/component-store';\nimport { debounce } from '../../utils/throttle';\nimport { displayTransition } from '../../utils/transitions';\nimport type {\n  InputChangeEventDetail,\n  SelectChangeEventDetail,\n  AlgoliaResults,\n  SearchIndex,\n  MyAccountLink,\n  AloliaSearchResultDetail,\n  AlgoliaMultiResult,\n  MyAccountUser,\n  MyAccountData,\n  NavItemEventDetail,\n  AlgoliaResultHit,\n  AlgoliaNetworkError,\n  AlgoliaMultiResults,\n} from '../../interface';\n\n// the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu\nconst THRESHOLDBREAKS = {\n  search: 0,\n  about: 1,\n  main: 2,\n  login: 3,\n  icon: 4,\n};\n\n/**\n * Nanopore digital global navigation and search bar.\n * Incorporates MyAccount / SSO states (messages / cart / user name etc).\n * Incorporates Algolia search.\n * GlobalNav is designed to be at the root of the `<body>`.\n * There should only be one <nano-global-nav> in the DOM.\n * The following demo uses static data.\n * @slot main - main nav items. Should be used with nano-nav-item's\n * @slot icon - nano-nav-item's displayed alongside icon links that come from MyAccount\n * @slot loggedin - nano-nav-item's to display when users are signed in, alongside links from from MyAccount (within the overflow menu panel).\n * @slot about - nano-nav-item's to display with about links that come from MyAccount\n * @slot site - nano-nav-item's to display with site links that come from MyAccount\n * @slot overflow - items to always display in the overflow menu\n * @slot search - when not using myaccount search OR show-search=\"false\" you can utilise the search slot\n * @slot promotion - a free area for any promotional content, displayed within the overflow menu panel\n * @slot logo - when show-logo=\"false\" you can utilise the logo slot\n */\n@Component({\n  tag: 'nano-global-nav',\n  styleUrl: 'style/global-nav.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class GlobalNav implements ComponentInterface {\n  // position and dimension state\n  private io: IntersectionObserver;\n  private debounceResize: () => {};\n  private debounceSetResizingState: () => {};\n  private currSize: number = 0;\n  private thresholdsGoingUp: boolean = false;\n  private THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;\n\n  // menu\n  private menuDiv: HTMLElement;\n  private menuBtn: HTMLButtonElement;\n  private menuWrapDiv: HTMLDivElement;\n  private menuContentDiv: HTMLDivElement;\n\n  // search\n  private searchBarEl: HTMLDivElement;\n  private searchInput: HTMLNanoInputElement;\n  private algoliaClient: AlgoliaClient;\n  private currentIndex: SearchIndex;\n  private autocompleteResults: AlgoliaResults | null;\n  private autocompleteEles: Array<HTMLAnchorElement | HTMLButtonElement> = [];\n  private currAIndex: number = -1;\n  private algoliaSearchResults: AlgoliaMultiResults | null;\n  private scopeSearch: AlgoliaMultiResults | null;\n\n  // general\n  private mainBarDiv: HTMLElement;\n  private barsDiv: HTMLDivElement;\n  private siteContent: HTMLDivElement;\n  private userLinkPanel: HTMLDivElement;\n  private isLoggedIn: boolean = false;\n\n  private myAccData: MyAccountData = null;\n\n  // myaccount links\n  private aboutNavItms: MyAccountLink[] = [];\n  private siteNavItms: MyAccountLink[] = [];\n  private loggedInNavItms: MyAccountLink[] = [];\n\n  // user profile link\n  @State() userProfileUrl: string = '';\n\n  // has slot tests\n  private mo?: MutationObserver;\n  @State() hasLoggedinSlot: boolean = false;\n  @State() hasSiteSlot: boolean = false;\n  @State() hasPromotionSlot: boolean = false;\n\n  // slot item number tests\n  @State() aboutSlotLen: number = 0;\n  @State() iconSlotLen: number = 0;\n  @State() mainSlotLen: number = 0;\n  @State() overflowSlotLen: number = 0;\n  @State() searchSlotLen: number = 0;\n\n  @State() internalSearchIndeces: Array<SearchIndex> = [];\n  @State() thresholdReady: boolean = false;\n  @State() remoteDataReady: boolean = false;\n  @State() ready: boolean = false;\n  @State() isResizing: boolean = false;\n  @State() intersectRatio: number;\n  @State() threshold: number = this.THRESHOLDLIMIT;\n  @State() modalOpen: boolean = false;\n  @State() modalIsOpen: boolean = false;\n  @State() searchBarShown: boolean = false;\n  @State() scrollingUp: boolean = true;\n  @State() searchLoading: boolean = false;\n  @State() showAutocomplete: boolean = false;\n  @State() secondaryMenuOpen: boolean = false;\n  @State() userMenuOpen: boolean = false;\n  @State() menuFullScreen: boolean = false;\n  @State() searchValInternal: string = '';\n\n  @Element() private el: HTMLNanoGlobalNavElement;\n\n  /**\n   * Connect to local, dev, test or prod MyAccount\n   * environments to retrieve global nav / sso data.\n   * Alternatively, you can use the `ssoDataUrl` prop.\n   */\n  @Prop() env?: 'local' | 'dev' | 'test' | 'prod' = 'prod';\n\n  /**\n   * A base url to retrieve global nav / sso data.\n   * `nav_bar_data.json` will be appended to this url.\n   * An alternative to the pre-defined `env` urls\n   */\n  @Prop() ssoDataUrl?: string;\n\n  /**\n   * Where to take user after SSO login\n   */\n  @Prop() ssoRedirect: string = encodeURIComponent(window.location.href);\n\n  /**\n   * Whether to attempt to get global nav / sso data from MyAccount\n   */\n  @Prop() getMyAccountData: boolean = true;\n\n  /**\n   * Active MyAccount link sections. By default all will show.\n   */\n  @Prop() activeMyAccountSections: (\n    | 'about'\n    | 'loggedin'\n    | 'sites'\n    | 'icons'\n  )[] = null;\n\n  /**\n   * Whether to show search functionality\n   */\n  @Prop() showSearch: boolean = true;\n\n  /**\n   * Whether to show Nanopore logo\n   */\n  @Prop() showLogo: boolean = true;\n\n  /**\n   * The link to put on the logo\n   */\n  @Prop() logoUrl: string = location.protocol + '//' + location.host;\n\n  /**\n   * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount\n   */\n  @Prop() searchIndeces: Array<SearchIndex> = [];\n\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop({ mutable: true }) myAccountUser: MyAccountUser = null;\n\n  /**\n   * An Algolia App ID key. Will be automatically populated from MyAccount\n   */\n  @Prop({ mutable: true }) searchAppId: string;\n\n  /**\n   * An Algolia API Key. Will be automatically populated from MyAccount\n   */\n  @Prop({ mutable: true }) searchApiKey: string;\n\n  /**\n   * A search value to passed to Algolia to programatically get or to preload search results\n   */\n  @Prop({ mutable: true }) searchValue: string = '';\n\n  /**\n   * Algolia search index to programatically set or to set an initial index\n   */\n  @Prop({ mutable: true }) searchIndex: string = 'all_prod_en';\n\n  /**\n   * MyAccount store cart count.\n   */\n  @Prop({ mutable: true }) cartCount: number = 0;\n\n  /**\n   * MyAccount un-read message count.\n   */\n  @Prop({ mutable: true }) msgCount: number = 0;\n\n  /**\n   * Url to the Nanopore store cart. Will default to the url supplied by MyAccount\n   */\n  @Prop({ mutable: true }) cartUrl: string = null;\n\n  /**\n   * Url to the Nanopore message center. Will default to the url supplied by MyAccount\n   */\n  @Prop({ mutable: true }) msgUrl: string = null;\n\n  /**\n   * Emitted when the global nav is ready.\n   */\n  @Event() nanoIsReady!: EventEmitter<void>;\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   */\n  @Event() nanoSearchResult!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when algolia returns an error.\n   */\n  @Event() nanoSearchError!: EventEmitter<AlgoliaNetworkError>;\n\n  /**\n   * Emitted when search field is cleared.\n   */\n  @Event() nanoSearchReset!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Submit the search form (a search value must be present)\n   */\n  @Method()\n  async submitSearch() {\n    this.onSearchSubmit();\n    this.showAutocomplete = false;\n    return;\n  }\n\n  @Watch('env')\n  @Watch('ssoDataUrl')\n  async getMyAccData() {\n    switch (this.env) {\n      case 'prod':\n        this.userProfileUrl = 'https://community.nanoporetech.com/profile/me';\n      case 'local':\n      case 'dev':\n      case 'test':\n      default:\n        this.userProfileUrl =\n          'https://community-test.nanoporetech.com/profile/me';\n        break;\n    }\n\n    if (!this.getMyAccountData || this.myAccData) {\n      this.remoteDataReady = true;\n      return;\n    }\n\n    let url = this.ssoDataUrl;\n\n    if (!url) {\n      switch (this.env) {\n        case 'dev':\n          url = 'https://myaccount-dev.nanoporetech.com/';\n          break;\n        case 'test':\n          url = 'https://myaccount-test.nanoporetech.com/';\n          break;\n        default:\n          url = 'https://myaccount.nanoporetech.com/';\n          break;\n      }\n    }\n\n    const config = { timeout: 5000 };\n\n    try {\n      if (this.env === 'local') {\n        this.myAccData = (await import(\n          `./assets/local-my-account.json`\n        )) as unknown as MyAccountData;\n      } else {\n        this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);\n      }\n      if (this.myAccData.user.id) {\n        this.isLoggedIn = true;\n        this.myAccountUser = this.myAccData.user;\n      }\n      this.processMyAccLinks();\n      this.processMyAccData();\n      setTimeout(() => (this.remoteDataReady = true), 300);\n    } catch (e) {\n      console.error(e);\n      this.remoteDataReady = true;\n    }\n  }\n\n  @Watch('searchIndex')\n  currentSelectedIndex() {\n    if (!this.internalSearchIndeces.length) {\n      return;\n    }\n\n    const foundIndex = this.internalSearchIndeces.find(\n      (index) => index.index === this.searchIndex\n    );\n\n    if (!foundIndex) {\n      this.currentIndex = this.internalSearchIndeces[0];\n      console.error('index not found');\n      return;\n    }\n\n    this.currentIndex = foundIndex;\n    return foundIndex;\n  }\n\n  @Watch('searchValInternal')\n  changeInternalSearchVal() {\n    if (this.searchValInternal !== this.searchValue)\n      this.searchValue = this.searchValInternal;\n  }\n\n  @Watch('searchApiKey')\n  @Watch('searchAppId')\n  initAlgoliaClient() {\n    if (!this.searchAppId || !this.searchApiKey) return;\n\n    this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);\n    this.addAlgoliaIndeces();\n  }\n\n  @Watch('searchIndeces')\n  addIndeces() {\n    this.internalSearchIndeces = [\n      ...this.internalSearchIndeces,\n      ...this.searchIndeces,\n    ];\n  }\n\n  @Watch('internalSearchIndeces')\n  addAlgoliaIndeces() {\n    if (!this.algoliaClient || !this.internalSearchIndeces.length) return;\n\n    this.internalSearchIndeces.forEach((searchIndex) => {\n      searchIndex.alogliaIndex = this.algoliaClient.initIndex(\n        searchIndex.index\n      );\n    });\n    if (!this.searchIndex)\n      this.searchIndex = this.internalSearchIndeces[0].index;\n  }\n\n  @Watch('threshold')\n  thresholdChange(newThreshold, oldThreshold) {\n    if (newThreshold > oldThreshold) {\n      // we've resized to larger screen.\n      this.thresholdsGoingUp = true;\n      this.setResizingState(true);\n    }\n  }\n\n  /**\n   * Primary logic for resizing changes.\n   * When content doesn't fit - we loop down through break points until it does\n   */\n  @Watch('intersectRatio')\n  ratioChange() {\n    if (this.intersectRatio < 1 && this.threshold > 0) {\n      // content doesn't fit\n      if (this.thresholdsGoingUp) this.setResizingState(true);\n      this.threshold--;\n      setTimeout(() => this.ratioChange(), 500);\n    } else {\n      this.thresholdReady = true;\n\n      // content now fits so add / remove context classes\n      // on nav-items depending on whether they're added to bar or burger.\n      this.siteContent.style.minHeight = `calc(100% - ${\n        this.barsDiv.clientHeight + 1\n      }px)`;\n\n      let menuItems: Array<Element>, barItems: Array<Element>;\n      readTask(() => {\n        menuItems = [\n          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot=\"site\"]')),\n          ...Array.from(\n            this.el.querySelectorAll('nano-nav-item[slot=\"overflow\"]')\n          ),\n        ];\n        barItems = [];\n\n        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon)\n          menuItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"icon\"]')\n            )\n          );\n        else\n          barItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"icon\"]')\n            )\n          );\n\n        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login)\n          menuItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"loggedin\"]')\n            )\n          );\n        else\n          barItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"loggedin\"]')\n            )\n          );\n\n        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.main)\n          menuItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"main\"]')\n            )\n          );\n        else\n          barItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"main\"]')\n            )\n          );\n\n        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.about)\n          menuItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"about\"]')\n            )\n          );\n        else\n          barItems.push(\n            ...Array.from(\n              this.el.querySelectorAll('nano-nav-item[slot=\"about\"]')\n            )\n          );\n      });\n\n      writeTask(() => {\n        menuItems.forEach((item) => {\n          item.classList.add('nano-global-nav-menu');\n          item.classList.remove('nano-global-nav-bar');\n        });\n        barItems.forEach((item) => {\n          item.classList.remove('nano-global-nav-menu');\n          item.classList.add('nano-global-nav-bar');\n        });\n      });\n    }\n  }\n\n  @Watch('thresholdReady')\n  @Watch('remoteDataReady')\n  assessReady() {\n    if (this.thresholdReady && this.remoteDataReady) {\n      this.ready = true;\n    }\n  }\n\n  @Watch('remoteDataReady')\n  remoteReady() {\n    this.attachIO();\n  }\n\n  @Watch('ready')\n  isReady() {\n    this.nanoIsReady.emit();\n  }\n\n  /**\n   * Add / remove events when autocomplete results show / hide.\n   */\n  @Watch('showAutocomplete')\n  setupAutocompleteBlur() {\n    this.searchInput.clientWidth; // force reflow\n    if (this.showAutocomplete) {\n      this.el.shadowRoot.addEventListener('click', this.onAutocompleteBlur);\n    } else {\n      this.el.shadowRoot.removeEventListener('click', this.onAutocompleteBlur);\n    }\n  }\n\n  /**\n   * As relevant slotted items change, reset resizing breakpoints\n   */\n  @Watch('aboutSlotLen')\n  @Watch('iconSlotLen')\n  @Watch('mainSlotLen')\n  @Watch('overflowSlotLen')\n  @Watch('searchSlotLen')\n  slotChange() {\n    this.threshold = this.THRESHOLDLIMIT;\n  }\n\n  // General classes for visuals\n\n  private thresholdClasses() {\n    const classes = [];\n    let i = 0;\n    for (i; i < this.threshold; i++) classes.push('threshold-' + (i + 1));\n    return classes;\n  }\n\n  /**\n   * provides 'isResizing' - we use this to fade content out on 'breakpoint' increase\n   * (when the screen size increases). Otherwise the stepping through of\n   * breakpoints to calculate if content currently fits shows on screen (looks ugly)\n   */\n  private setResizingState = (state: boolean = false) => {\n    if (typeof this.debounceSetResizingState === 'undefined') {\n      this.debounceSetResizingState = debounce(this.setResizingState, 600);\n    }\n    if (state) {\n      this.isResizing = true;\n      this.debounceSetResizingState();\n    } else {\n      this.isResizing = false;\n      this.thresholdsGoingUp = false;\n    }\n  };\n\n  // Global DOM Events\n\n  private onWindowResize() {\n    if (\n      this.threshold < this.THRESHOLDLIMIT &&\n      window.innerWidth > this.currSize\n    ) {\n      this.threshold = this.THRESHOLDLIMIT;\n    }\n    this.currSize = window.innerWidth;\n    this.searchBarShown = false;\n  }\n\n  // Burger / Overflow Menu\n\n  // listen to nav-item secondary open / close events primarily for resizing the menu\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    this.secondaryMenuOpen = true;\n    this.menuContentDiv.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    this.secondaryMenuOpen = false;\n    this.menuContentDiv.style.minHeight = '';\n  }\n\n  private onMenuBtnKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.modalOpen ? this.menuClose(ev, true) : this.menuOpen();\n        break;\n    }\n  };\n\n  private onMenuBtnClick = (ev: MouseEvent) => {\n    this.menuClose(ev, true);\n  };\n\n  private menuOpen = (e?: MouseEvent) => {\n    if (e) e.preventDefault();\n\n    this.menuDiv.style.display = 'block';\n    // need to open menu in stages\n    // wait for re-flow after changing display\n    // wait for repaint after animate, then focus\n\n    this.menuDiv.clientWidth; // force reflow\n\n    this.modalOpen = true;\n    this.modalIsOpen = true;\n    this.menuWrapDiv.addEventListener('focusout', this.menuClose);\n\n    this.menuDiv.clientWidth; // force reflow\n\n    this.menuWrapDiv.focus({ preventScroll: true });\n    if (\n      this.threshold < 2 ||\n      this.menuWrapDiv.scrollHeight > window.innerHeight\n    ) {\n      document.body.style.overflow = 'hidden';\n      this.menuFullScreen = true;\n    } else document.body.style.overflowX = 'hidden';\n  };\n\n  private onMenuHidden = () => {\n    this.menuDiv.removeEventListener('transitionend', this.onMenuHidden);\n    this.menuWrapDiv.removeEventListener('focusout', this.menuClose);\n\n    document.body.style.overflow = '';\n    this.menuDiv.style.display = 'none';\n    this.modalIsOpen = false;\n    this.menuFullScreen = false;\n\n    setTimeout(() => {\n      if (document.activeElement === document.body && this.menuBtn)\n        this.mainBarDiv.focus({ preventScroll: true });\n    }, 50);\n  };\n\n  private menuClose = (\n    ev?: FocusEvent | MouseEvent | KeyboardEvent | TouchEvent,\n    force: boolean = false\n  ) => {\n    if (!force) {\n      const e = ev as FocusEvent;\n      if (\n        e &&\n        e.relatedTarget &&\n        closestElement('#global-nav-menu', e.relatedTarget as HTMLElement)\n      )\n        return;\n      if (\n        e &&\n        e.relatedTarget &&\n        (e.relatedTarget as HTMLElement).closest('#global-nav-menu')\n      )\n        return;\n      if (\n        e &&\n        e.relatedTarget &&\n        (e.relatedTarget as HTMLElement).closest('[slot=\"promotion\"]')\n      )\n        return;\n      if (this.secondaryMenuOpen) return;\n    }\n\n    this.modalOpen = false;\n    this.menuDiv.addEventListener('transitionend', this.onMenuHidden);\n  };\n\n  private subMenuClose = (ev?: MouseEvent) => {\n    ev.preventDefault();\n    (ev.target as HTMLNanoNavItemElement).closest('nano-nav-item').open = false;\n  };\n\n  // User profile menu\n\n  private onUserBtnClick = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.userMenuOpen = !this.userMenuOpen;\n  };\n\n  private onUserBtnKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.userMenuOpen = !this.userMenuOpen;\n        break;\n    }\n  };\n\n  private onUserMenuBlur = (ev: FocusEvent) => {\n    if (!ev.relatedTarget) {\n      this.userMenuOpen = false;\n      return;\n    }\n    if (!!(ev.relatedTarget as HTMLElement).closest('.user-links-panel'))\n      return false;\n    this.userMenuOpen = false;\n  };\n\n  @Watch('userMenuOpen')\n  async handleUserMenu() {\n    await displayTransition(this.userLinkPanel, 'show', this.userMenuOpen);\n    if (this.userMenuOpen) {\n      this.userLinkPanel.focus();\n      this.userLinkPanel.addEventListener('focusout', this.onUserMenuBlur);\n    } else {\n      this.userLinkPanel.removeEventListener('focusout', this.onUserMenuBlur);\n      this.el.focus();\n    }\n  }\n\n  // Search bar (smaller screens / mobile)\n\n  private onSearchBtnClick = (ev: MouseEvent) => {\n    ev.preventDefault();\n    if (!this.searchBarShown) this.searchbarShow();\n    else this.searchbarHide();\n  };\n\n  private onSearchBtnKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.searchBarShown ? this.searchbarHide() : this.searchbarShow();\n        break;\n    }\n  };\n\n  private searchbarShow() {\n    this.searchBarShown = true;\n    this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);\n    this.searchBarEl.style.display = 'block';\n\n    setTimeout(() => {\n      this.searchBarEl.style.height =\n        this.searchBarEl.querySelector('.search-widget').scrollHeight + 'px';\n    }, 50);\n  }\n\n  private onSearchBarShown = () => {\n    this.searchBarEl.removeEventListener(\n      'transitionend',\n      this.onSearchBarShown\n    );\n    if (this.searchInput) this.searchInput.setFocus();\n    this.searchBarEl.style.overflow = 'visible';\n  };\n\n  private searchbarHide = (ev?: FocusEvent) => {\n    if (\n      ev &&\n      ev.relatedTarget &&\n      (ev.relatedTarget as HTMLElement).closest('#global-nav-search-bar')\n    )\n      return;\n    this.showAutocomplete = false;\n    if (this.searchValInternal.length && ev) return;\n\n    this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);\n    this.searchBarEl.style.overflow = 'hidden';\n    this.searchBarEl.style.height = '0px';\n  };\n\n  private onSearchBarHidden = () => {\n    this.searchBarEl.removeEventListener(\n      'transitionend',\n      this.onSearchBarHidden\n    );\n    this.searchBarEl.style.display = 'none';\n    this.searchBarShown = false;\n  };\n\n  // Algolia search\n\n  private autocompleteSnippet(hit: AlgoliaResultHit) {\n    const lookFor = ['title']; // , 'body'\n    if (hit._snippetResult) {\n      const found = lookFor.find(\n        (prop) =>\n          hit._snippetResult[prop] &&\n          hit._snippetResult[prop].matchLevel !== 'none'\n      );\n\n      if (found) {\n        if (found !== 'title')\n          return (\n            (hit.title.length > 15\n              ? hit.title.substring(0, 15) + ' ...'\n              : hit.title) +\n            ' ' +\n            hit._snippetResult[found].value\n          );\n        else return hit._snippetResult['title'].value;\n      }\n    }\n    return hit.title;\n  }\n\n  private onSearchInput = (ev: CustomEvent<InputEvent>) => {\n    this.searchValInternal = this.searchInput.value;\n\n    if (!this.isSearchValSet()) {\n      this.searchLoading = false;\n      return;\n    }\n\n    if (ev.detail.type === 'input') {\n      this.showAutocomplete = false;\n      this.searchLoading = true;\n    }\n  };\n\n  private onSearchChange = async (ev?: CustomEvent<InputChangeEventDetail>) => {\n    this.searchValInternal = this.searchValue = ev\n      ? ev.detail.value\n      : this.searchValInternal;\n    this.showAutocomplete = false;\n    this.autocompleteResults = null;\n\n    if (!this.isSearchValSet()) {\n      if (!this.searchValInternal.length) {\n        this.nanoSearchReset.emit();\n      }\n      this.searchLoading = false;\n      return;\n    }\n    if (!this.currentIndex) this.currentSelectedIndex();\n\n    try {\n      this.autocompleteResults = this.processSearchResults(\n        (await this.currentIndex.alogliaIndex.search(this.searchValInternal, {\n          attributesToSnippet: ['body:5', 'title:8'],\n          hitsPerPage: 5,\n          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years\n        })) as any\n      ) as AlgoliaResults;\n    } catch (e) {\n      console.error(e);\n    }\n\n    this.scopeSearch = null;\n    this.scopeSearch = await this.onSearchSubmit(null, false);\n\n    this.searchLoading = false;\n    this.showAutocompleteResults();\n  };\n\n  private onSearchSubmit = async (ev?, emit: boolean = true) => {\n    if (ev) ev.preventDefault();\n    if (!this.isSearchValSet()) return;\n    this.searchLoading = true;\n    this.algoliaSearchResults = null;\n\n    if (!this.currentIndex) this.currentSelectedIndex();\n\n    const queries = this.internalSearchIndeces.map((index) => {\n      return {\n        indexName: index.index,\n        query: this.searchValInternal,\n        facets: index.filters,\n        hitsPerPage: 10,\n        filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years\n      };\n    });\n\n    try {\n      this.algoliaSearchResults = this.processSearchResults(\n        (await this.algoliaClient.multipleQueries(queries)) as any\n      ) as AlgoliaMultiResults;\n    } catch (e) {\n      this.nanoSearchError.emit(e as AlgoliaNetworkError);\n    }\n    this.searchLoading = false;\n    if (!this.algoliaSearchResults) return;\n\n    this.algoliaSearchResults.results.map((result, i) => {\n      result.indexName = this.internalSearchIndeces[i].name;\n      result.selected =\n        this.currentIndex.name === this.internalSearchIndeces[i].name;\n      result.domain = this.currentIndex.domain || null;\n      result.domains = this.myAccData.domains || null;\n      result.allGroup = !!this.internalSearchIndeces[i].allGroup;\n      result.filters = this.internalSearchIndeces[i].filters;\n    });\n\n    if (emit) {\n      this.nanoSearchResult.emit({\n        results: this.algoliaSearchResults.results,\n        client: { apiKey: this.searchApiKey, appId: this.searchAppId },\n      });\n      this.showAutocomplete = false;\n    }\n    return this.algoliaSearchResults;\n  };\n\n  private onSearchIndexChange = async (\n    index: CustomEvent<SelectChangeEventDetail> | string\n  ) => {\n    const ev = index as CustomEvent<SelectChangeEventDetail>;\n    let indexStr = index as string;\n\n    if (!this.currentIndex) this.currentSelectedIndex();\n\n    if (ev.detail && ev.detail.value.length)\n      indexStr = ev.detail.value as string;\n    if (!indexStr || !indexStr.length) return;\n    if (this.currentIndex.index === indexStr) return;\n\n    const selectedIndex = this.internalSearchIndeces.find(\n      (index) => index.index === indexStr\n    );\n    if (!selectedIndex || !selectedIndex.alogliaIndex) return;\n\n    this.searchIndex = selectedIndex.index;\n    if (this.isSearchValSet()) await this.onSearchChange();\n  };\n\n  private isSearchValSet() {\n    if (this.searchValInternal.length < 3) return false;\n    return true;\n  }\n\n  private switchIndexSubmit = async (index: string) => {\n    if (this.isSearchValSet()) {\n      await this.onSearchIndexChange(index);\n      this.onSearchSubmit();\n    } else this.onSearchIndexChange(index);\n  };\n\n  // Autocomplete\n\n  @Watch('showAutocomplete')\n  resetHitFocus() {\n    this.currAIndex = -1;\n  }\n\n  private onAutocompleteBlur = (ev: MouseEvent) => {\n    if (!this.showAutocomplete || !this.autocompleteResults) return;\n    if (ev && ev.target && (ev.target as HTMLElement).closest('.search-widget'))\n      return;\n    this.showAutocomplete = false;\n  };\n\n  private showAutocompleteResults = () => {\n    if (!this.autocompleteResults || !this.autocompleteResults.hits) return;\n    this.showAutocomplete = true;\n  };\n\n  private setActiveElement(\n    autocompleteEle: HTMLAnchorElement | HTMLButtonElement\n  ) {\n    this.autocompleteEles.map((ele) =>\n      ele.setAttribute('aria-selected', 'false')\n    );\n    autocompleteEle.focus({ preventScroll: true });\n    autocompleteEle.setAttribute('aria-selected', 'true');\n  }\n\n  private onAutocompleteInteract = (ev: KeyboardEvent) => {\n    // list open, navigate items with arrows\n    if (!this.showAutocomplete || !this.autocompleteResults) return;\n    let testIndex = this.currAIndex;\n\n    switch (ev.key) {\n      case 'Tab':\n        setTimeout(() => {\n          if (\n            !this.el.shadowRoot.activeElement ||\n            !this.el.shadowRoot.activeElement.closest('.search-widget')\n          ) {\n            this.showAutocomplete = false;\n            return;\n          } else {\n            const found = this.autocompleteEles.find((ele, i) => {\n              if (ele === this.el.shadowRoot.activeElement) {\n                this.currAIndex = i;\n                return true;\n              }\n            });\n            if (found) this.setActiveElement(found);\n            else this.currAIndex = -1;\n          }\n        });\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        if (ev.key === 'ArrowDown') testIndex++;\n        else if (ev.key === 'ArrowUp') testIndex--;\n\n        const found = this.autocompleteEles[testIndex];\n        if (\n          found ||\n          testIndex < 0 ||\n          testIndex > this.autocompleteEles.length - 1\n        )\n          ev.preventDefault();\n        this.searchInput.clientWidth; // force reflow\n\n        if (found) {\n          this.setActiveElement(found);\n          this.currAIndex = testIndex;\n        } else if (testIndex < 0) {\n          this.searchInput.setFocus();\n          this.currAIndex = -1;\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        if (this.autocompleteEles[this.currAIndex]) {\n          this.autocompleteEles[this.currAIndex].click();\n        }\n        break;\n    }\n  };\n\n  // Various.\n\n  /**\n   * Assesses what content is present in which slots\n   */\n  private assessSlottedContent() {\n    readTask(() => {\n      this.hasSiteSlot = !!this.el.querySelectorAll('[slot=\"site\"]').length;\n      this.hasLoggedinSlot =\n        !!this.el.querySelectorAll('[slot=\"loggedin\"]').length;\n      this.hasPromotionSlot =\n        !!this.el.querySelectorAll('[slot=\"promotion\"]').length;\n\n      this.aboutSlotLen = this.el.querySelectorAll('[slot=\"about\"]').length;\n      this.iconSlotLen = this.el.querySelectorAll('[slot=\"icon\"]').length;\n      this.mainSlotLen = this.el.querySelectorAll('[slot=\"main\"]').length;\n      this.overflowSlotLen =\n        this.el.querySelectorAll('[slot=\"overflow\"]').length;\n      this.searchSlotLen = this.el.querySelectorAll('[slot=\"search\"]').length;\n    });\n  }\n\n  /**\n   * Attach the IntersectionObserver - from which all threshold / breakpoint logic hinges\n   */\n  private attachIO() {\n    if (this.io) return;\n    const root = this.el.shadowRoot.querySelector('.global-nav .main-bar');\n    if (\n      Build.isBrowser &&\n      typeof window !== 'undefined' &&\n      (window as any).IntersectionObserver &&\n      !!root\n    ) {\n      const io = (this.io = new (window as any).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          this.intersectRatio = data.slice(-1)[0].intersectionRatio;\n        },\n        { root, threshold: 1 }\n      ));\n      io.observe(root.querySelector('.measure-ele'));\n    }\n  }\n\n  // Stencil Lifecycle / Rendering\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      this.debounceResize = debounce(this.onWindowResize.bind(this), 300);\n\n      window.addEventListener('resize', this.debounceResize);\n      this.currSize = window.innerWidth;\n    }\n\n    this.initAlgoliaClient();\n    this.addAlgoliaIndeces();\n    if (this.remoteDataReady) this.attachIO();\n  }\n\n  componentWillLoad() {\n    ComponentStore.init(\n      this,\n      ['searchIndex', 'searchValue'],\n      'url-hash',\n      'gns'\n    );\n\n    if (\n      Build.isBrowser &&\n      typeof window !== 'undefined' &&\n      (window as any).MutationObserver\n    ) {\n      const mo = (this.mo = new MutationObserver(() => {\n        this.assessSlottedContent();\n      }));\n      mo.observe(this.el, { childList: true, subtree: false });\n    }\n    this.assessSlottedContent();\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n    if (Build.isBrowser)\n      window.removeEventListener('resize', this.debounceResize);\n  }\n\n  async connectedCallback() {\n    this.getMyAccData();\n  }\n\n  // Render output\n\n  private autocompleteList(): VNode {\n    let content;\n    if (this.showAutocomplete && this.scrollingUp) {\n      let currentScopeHits = 0;\n      let scopeChangeSuggestions = 0;\n\n      const scopeSuggestReducer = (\n        total: number,\n        result: AlgoliaMultiResult\n      ) => {\n        return result.index !== this.currentIndex.index\n          ? total + result.hits.length\n          : total;\n      };\n      const currentSuggestReducer = (\n        total: number,\n        result: AlgoliaMultiResult\n      ) => {\n        return result.index === this.currentIndex.index\n          ? total + result.hits.length\n          : total;\n      };\n\n      if (this.scopeSearch) {\n        scopeChangeSuggestions = this.scopeSearch.results.reduce(\n          scopeSuggestReducer,\n          0\n        );\n        currentScopeHits = this.scopeSearch.results.reduce(\n          currentSuggestReducer,\n          0\n        );\n      }\n\n      if (\n        (this.autocompleteResults && this.autocompleteResults.hits.length) ||\n        (scopeChangeSuggestions && !currentScopeHits)\n      ) {\n        let scopeSuggestions = 0;\n\n        content = (\n          <div>\n            {!currentScopeHits && (\n              <div class=\"search-autocomplete-hit search-autocomplete-hit--no-result\">\n                No results matching '{this.searchValInternal}' were found in{' '}\n                <strong>{this.currentIndex.name}</strong>. Try another phrase.\n              </div>\n            )}\n            {this.autocompleteResults && [\n              this.autocompleteResults.hits.map((hit, i) => {\n                return (\n                  <a\n                    role=\"option\"\n                    ref={(a) => this.autocompleteEles.push(a)}\n                    tabindex=\"-1\"\n                    id={'autocomplete-hit-' + i}\n                    href={hit.url}\n                    class=\"search-autocomplete-hit\"\n                    innerHTML={this.autocompleteSnippet(hit)}\n                  ></a>\n                );\n              }),\n            ]}\n            {(!currentScopeHits || this.currentIndex.allGroup) &&\n              this.scopeSearch &&\n              this.scopeSearch.results && [\n                this.scopeSearch.results.map((result, i) => {\n                  if (\n                    !result.hits.length ||\n                    result.index === this.currentIndex.index ||\n                    scopeSuggestions > 1\n                  )\n                    return;\n                  scopeSuggestions++;\n                  return (\n                    <button\n                      role=\"option\"\n                      ref={(button) => this.autocompleteEles.push(button)}\n                      tabindex=\"-1\"\n                      id={'autocomplete-scope-' + i}\n                      class=\"search-autocomplete-hit\"\n                      onClick={() => this.switchIndexSubmit(result.index)}\n                      onMouseDown={() => this.switchIndexSubmit(result.index)}\n                    >\n                      \"{this.searchValInternal}\"{' '}\n                      <div class=\"search-autocomplete-hit-scope\">\n                        in {result.indexName}\n                      </div>\n                    </button>\n                  );\n                }),\n              ]}\n            {!!currentScopeHits && (\n              <div class=\"search-autocomplete-foot\">\n                <button\n                  role=\"option\"\n                  class=\"search-autocomplete-submit\"\n                  ref={(button) => this.autocompleteEles.push(button)}\n                  id={'autocomplete-foot'}\n                  onClick={this.onSearchSubmit}\n                  onMouseDown={this.onSearchSubmit}\n                >\n                  View all results\n                </button>\n              </div>\n            )}\n          </div>\n        );\n      } else if (!currentScopeHits) {\n        content = (\n          <div class=\"search-autocomplete-hit search-autocomplete-hit--no-result\">\n            No results matching '{this.searchValInternal}' were found. Try\n            another phrase.\n          </div>\n        );\n      }\n    }\n\n    return (\n      <div\n        class=\"search-autocomplete\"\n        role=\"listbox\"\n        id=\"autocomplete-results\"\n        aria-expanded={this.showAutocomplete ? 'true' : 'false'}\n        hidden={!this.showAutocomplete}\n        onKeyDown={this.onAutocompleteInteract}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  private searchWidget(): VNode[] {\n    return [\n      <form\n        class=\"search-inputs\"\n        onSubmit={this.onSearchSubmit}\n        id=\"global-nav-search\"\n      >\n        <nano-select\n          class=\"search-input\"\n          label=\"Which area of content would you like to search?\"\n          hideLabel={true}\n          showInlineError={false}\n          value={this.searchIndex}\n          onNanoChange={this.onSearchIndexChange}\n          mask={true}\n        >\n          {this.internalSearchIndeces.map((index) => {\n            return (\n              <nano-option\n                selected={index.index === this.searchIndex}\n                value={index.index}\n              >\n                {index.name || index.index}\n              </nano-option>\n            );\n          })}\n        </nano-select>\n        <nano-input\n          class=\"search-input\"\n          label=\"What would you like to search for?\"\n          aria-label=\"What would you like to search for?\"\n          hideLabel={true}\n          showInlineError={false}\n          clear-input\n          placeholder=\"Search Nanopore\"\n          type=\"text\"\n          ref={(input) => (this.searchInput = input)}\n          onNanoChange={this.onSearchChange}\n          onNanoInput={this.onSearchInput}\n          onKeyDown={this.onAutocompleteInteract}\n          debounce={500}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={\n            this.autocompleteEles[this.currAIndex]\n              ? this.autocompleteEles[this.currAIndex].id\n              : false\n          }\n          aria-controls=\"autocomplete-results\"\n          onNanoFocus={this.showAutocompleteResults}\n          value={this.searchValue}\n          role=\"textbox\"\n        >\n          <button\n            class={{\n              'search-icon': true,\n              'search-icon--search': true,\n              'search-icon--show': !this.searchValInternal.length,\n            }}\n            slot=\"end\"\n            onMouseDown={(e) => {\n              this.searchValInternal = this.searchInput.value;\n              this.onSearchSubmit(e, true);\n            }}\n          >\n            <nano-icon name=\"light/search\"></nano-icon>\n          </button>\n          <span\n            class={{\n              'search-icon': true,\n              'search-icon--loader': true,\n              'search-icon--show': this.searchLoading,\n            }}\n            slot=\"end\"\n          >\n            <nano-icon name=\"light/spinner-third\"></nano-icon>\n          </span>\n        </nano-input>\n        <input type=\"submit\" />\n      </form>,\n    ];\n  }\n\n  render() {\n    this.autocompleteEles = [];\n    const isRtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n    const searchWidget = this.searchWidget();\n    searchWidget.push(this.autocompleteList());\n\n    return (\n      <Host\n        class={{\n          [this.thresholdClasses().join(' ')]: true,\n          ready: this.ready,\n          'search-bar-shown': this.searchBarShown && this.scrollingUp,\n          'search-auto-complete-shown':\n            this.showAutocomplete && this.scrollingUp,\n          'modal-open': this.modalIsOpen,\n          resizing: this.isResizing,\n        }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <div\n          class={{\n            'global-nav': true,\n            'scrolling-down': !this.scrollingUp,\n          }}\n        >\n          {/* START BURGER / OVERFLOW MENU */}\n          <nav\n            id=\"global-nav-menu\"\n            class={{\n              'gn-menu': true,\n              open: this.modalOpen,\n              'has-promotion': this.hasPromotionSlot,\n              'menu-full-screen': this.menuFullScreen,\n              'secondary-open': this.secondaryMenuOpen,\n            }}\n            aria-expanded={this.modalOpen ? 'true' : 'false'}\n            ref={(div) => (this.menuDiv = div)}\n          >\n            <div\n              class=\"gn-menu_wrap\"\n              ref={(div) => (this.menuWrapDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"gn-menu_actions\">\n                <button\n                  class=\"menu-btn icon-btn icon-btn\"\n                  onMouseDown={this.onMenuBtnClick}\n                  onKeyDown={this.onMenuBtnKeyDown}\n                >\n                  {this.threshold < this.THRESHOLDLIMIT - 3 && (\n                    <nano-icon\n                      name=\"light/times\"\n                      aria-label=\"close menu\"\n                    ></nano-icon>\n                  )}\n                  {this.threshold >= this.THRESHOLDLIMIT - 3 && (\n                    <nano-icon\n                      name=\"light/bars\"\n                      aria-label=\"close menu\"\n                    ></nano-icon>\n                  )}\n                </button>\n\n                {this.threshold <\n                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [\n                  !!this.iconSlotLen && <slot name=\"icon\" />,\n                  this.myAccData &&\n                    (!this.activeMyAccountSections ||\n                      this.activeMyAccountSections.includes('icons')) && [\n                      this.msgUrl && (\n                        <a href={this.msgUrl} class=\"icon-btn\">\n                          <nano-icon name=\"light/bell\"></nano-icon>\n                          {this.msgCount > 0 && (\n                            <span class=\"gn-menu_actions-counter\">\n                              {this.msgCount}\n                            </span>\n                          )}\n                        </a>\n                      ),\n                      this.cartUrl && (\n                        <a href={this.cartUrl} class=\"icon-btn\">\n                          <nano-icon name=\"light/shopping-cart\"></nano-icon>\n                          {this.cartCount > 0 && (\n                            <span class=\"gn-menu_actions-counter\">\n                              {this.cartCount}\n                            </span>\n                          )}\n                        </a>\n                      ),\n                    ],\n                ]}\n\n                {this.myAccData && this.myAccData.urls.login && (\n                  <a\n                    href={this.myAccData.urls.login + this.ssoRedirect}\n                    class=\"login-btn\"\n                  >\n                    Login / Register{' '}\n                    <nano-icon name=\"solid/chevron-right\"></nano-icon>\n                  </a>\n                )}\n              </div>\n\n              <div\n                class=\"content-wrap\"\n                ref={(div) => (this.menuContentDiv = div)}\n              >\n                <div class=\"content\">\n                  <nav class=\"nav-links nav-links--main\">\n                    <slot name=\"overflow\" />\n                    {this.threshold <\n                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&\n                      !!this.mainSlotLen && <slot name=\"main\" />}\n                  </nav>\n\n                  {/* ABOUT AND SITE MENU IN BURGER */}\n                  {(((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&\n                    this.hasSiteSlot) ||\n                    !!this.siteNavItms.length) && (\n                    <div>\n                      {(!!this.aboutSlotLen || !!this.aboutNavItms.length) && [\n                        // About Menu as an open list (before more items are added to burger)`\n                        (this.threshold >=\n                          this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) ||\n                          this.mainSlotLen < 2) &&\n                          this.overflowSlotLen < 2 && (\n                            <div class=\"nav-links-wrap\">\n                              {!!this.aboutNavItms.length && (\n                                <h4 class=\"nav-links_title\">About</h4>\n                              )}\n                              <nav\n                                class=\"nav-links nav-links--sub\"\n                                aria-label=\"About the company links\"\n                              >\n                                <slot name=\"about\" />\n\n                                {this.aboutNavItms.map((link) => {\n                                  return (\n                                    <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                      <a\n                                        href={link.address}\n                                        target={link.target}\n                                      >\n                                        {link.title}\n                                      </a>\n                                    </nano-nav-item>\n                                  );\n                                })}\n                              </nav>\n                            </div>\n                          ),\n                        // About Menu as hidden list (when more items are added to burger)\n                        ((this.threshold <\n                          this.THRESHOLDLIMIT - (THRESHOLDBREAKS.about + 1) &&\n                          this.mainSlotLen >= 2) ||\n                          this.overflowSlotLen >= 2) && (\n                          <nav\n                            class=\"nav-links\"\n                            aria-label=\"About the company links\"\n                          >\n                            {!this.aboutNavItms.length && <slot name=\"about\" />}\n                            {!!this.aboutNavItms.length && (\n                              <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                Company\n                                <nano-icon\n                                  slot=\"icon-end\"\n                                  name=\"solid/chevron-right\"\n                                ></nano-icon>\n                                <div slot=\"secondary\">\n                                  <div class=\"content\">\n                                    <button\n                                      class=\"back-btn\"\n                                      onClick={this.subMenuClose}\n                                    >\n                                      <nano-icon\n                                        slot=\"icon-end\"\n                                        name=\"solid/chevron-left\"\n                                        aria-label=\"go back\"\n                                      ></nano-icon>\n                                      Company\n                                    </button>\n                                    <slot name=\"about\" />\n                                    <div class=\"content--sub\">\n                                      {this.aboutNavItms.map((link) => {\n                                        return (\n                                          <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                            <a\n                                              href={link.address}\n                                              target={link.target}\n                                            >\n                                              {link.title}\n                                            </a>\n                                          </nano-nav-item>\n                                        );\n                                      })}\n                                    </div>\n                                  </div>\n                                </div>\n                              </nano-nav-item>\n                            )}\n                          </nav>\n                        ),\n                      ]}\n\n                      {/* SITES MENU (Always in burger) */}\n                      {(this.hasSiteSlot || !!this.siteNavItms.length) && [\n                        (this.threshold >= this.THRESHOLDLIMIT - 2 ||\n                          this.mainSlotLen < 2) &&\n                          this.overflowSlotLen < 2 && (\n                            <div class=\"nav-links-wrap\">\n                              <h4 class=\"nav-links_title\">Sites</h4>\n                              <nav\n                                class=\"nav-links nav-links--sub\"\n                                aria-label=\"Different company site links\"\n                              >\n                                <slot name=\"site\" />\n                                {this.siteNavItms.map((link) => {\n                                  return (\n                                    <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                      <a\n                                        href={link.address}\n                                        target={link.target}\n                                      >\n                                        {link.title}\n                                      </a>\n                                    </nano-nav-item>\n                                  );\n                                })}\n                              </nav>\n                            </div>\n                          ),\n                        ((this.threshold < this.THRESHOLDLIMIT - 2 &&\n                          this.mainSlotLen >= 2) ||\n                          this.overflowSlotLen >= 2) && (\n                          <nav\n                            class=\"nav-links\"\n                            aria-label=\"Different company site links\"\n                          >\n                            <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                              Sites\n                              <nano-icon\n                                slot=\"icon-end\"\n                                name=\"solid/chevron-right\"\n                              ></nano-icon>\n                              <div slot=\"secondary\">\n                                <div class=\"content\">\n                                  <button\n                                    class=\"back-btn\"\n                                    onClick={this.subMenuClose}\n                                  >\n                                    <nano-icon\n                                      slot=\"icon-end\"\n                                      name=\"solid/chevron-left\"\n                                      aria-label=\"go back\"\n                                    ></nano-icon>\n                                    Sites\n                                  </button>\n                                  <div class=\"content--sub\">\n                                    <slot name=\"site\" />\n                                    {this.siteNavItms.map((link) => {\n                                      return (\n                                        <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                          <a\n                                            href={link.address}\n                                            target={link.target}\n                                          >\n                                            {link.title}\n                                          </a>\n                                        </nano-nav-item>\n                                      );\n                                    })}\n                                  </div>\n                                </div>\n                              </div>\n                            </nano-nav-item>\n                          </nav>\n                        ),\n                      ]}\n                    </div>\n                  )}\n                </div>\n\n                {this.isLoggedIn &&\n                  this.threshold <\n                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&\n                  (this.loggedInNavItms.length || this.hasLoggedinSlot) && (\n                    <nav class=\"nav-links\" aria-label=\"Your user account links\">\n                      <nano-nav-item class=\"nano-global-nav user-nav nano-global-nav-menu\">\n                        {this.myAccountUser.name}\n                        <nano-icon\n                          slot=\"icon-end\"\n                          name=\"solid/chevron-right\"\n                        ></nano-icon>\n                        <div slot=\"secondary\">\n                          <div class=\"content\">\n                            <button\n                              class=\"back-btn\"\n                              onClick={this.subMenuClose}\n                            >\n                              <nano-icon\n                                slot=\"icon-end\"\n                                name=\"solid/chevron-left\"\n                                aria-label=\"go back\"\n                              ></nano-icon>\n                              {this.myAccountUser.name}\n                            </button>\n                            {!!this.myAccountUser?.small_avatar_url && (\n                              <nano-global-nav-user-profile\n                                myAccountUser={this.myAccountUser}\n                                userProfileUrl={this.userProfileUrl}\n                              ></nano-global-nav-user-profile>\n                            )}\n                            <div class=\"content--sub\">\n                              <slot name=\"loggedin\" />\n                              {this.loggedInNavItms.map((link) => {\n                                return (\n                                  <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                    <a href={link.address} target={link.target}>\n                                      {link.title}\n                                    </a>\n                                  </nano-nav-item>\n                                );\n                              })}\n                              <nano-nav-item class=\"nano-global-nav nano-global-nav-menu\">\n                                <a\n                                  href={\n                                    this.myAccData.urls.forgot_password +\n                                    this.ssoRedirect\n                                  }\n                                >\n                                  Change Password\n                                </a>\n                              </nano-nav-item>\n                            </div>\n                          </div>\n                        </div>\n                      </nano-nav-item>\n                    </nav>\n                  )}\n\n                <slot name=\"promotion\" />\n\n                {this.myAccData && this.myAccData.urls.logout && (\n                  <div class=\"login-btn logout-btn\">\n                    <a href={this.myAccData.urls.logout + this.ssoRedirect}>\n                      Logout\n                    </a>\n                  </div>\n                )}\n              </div>\n            </div>\n          </nav>\n          {/* END BURGER / OVERFLOW MENU */}\n\n          {/* START MAIN NAV BAR */}\n          <nano-sticker\n            auto-resize=\"false\"\n            break-point-max=\"800\"\n            quietMode={{ h: 600, w: 800 }}\n          >\n            <div class=\"bars\" ref={(div) => (this.barsDiv = div)}>\n              <nav\n                class=\"main-bar\"\n                aria-label=\"Main site navigation\"\n                tabindex=\"-1\"\n                ref={(div) => (this.mainBarDiv = div)}\n              >\n                {(this.hasPromotionSlot ||\n                  !!this.overflowSlotLen ||\n                  ((this.myAccData || !!this.iconSlotLen) &&\n                    this.threshold <\n                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||\n                  (this.isLoggedIn &&\n                    (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&\n                    this.threshold <\n                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||\n                  (!!this.mainSlotLen &&\n                    this.threshold <\n                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||\n                  ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&\n                    this.threshold <\n                      this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||\n                  this.hasSiteSlot ||\n                  !!this.siteNavItms.length) && (\n                  <button\n                    class=\"menu-btn icon-btn\"\n                    onMouseDown={this.menuOpen}\n                    onKeyDown={this.onMenuBtnKeyDown}\n                    aria-expanded={this.modalOpen ? 'true' : 'false'}\n                    aria-controls=\"global-nav-menu\"\n                    ref={(btn) => (this.menuBtn = btn)}\n                  >\n                    <nano-icon\n                      name=\"light/bars\"\n                      aria-label=\"open menu\"\n                    ></nano-icon>\n                  </button>\n                )}\n\n                {this.showLogo && (\n                  <a href={this.logoUrl} class=\"logo-link\">\n                    <img\n                      src={getAssetPath(`./assets/ont-logo.svg`)}\n                      alt=\"Oxford Nanopore Technologies Logo\"\n                      class=\"logo\"\n                    />\n                  </a>\n                )}\n                {!this.showLogo && (\n                  <div class=\"logo-link\">\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n\n                <div class=\"nav-links nav-links--main\">\n                  <slot name=\"main\" />\n                </div>\n\n                {this.threshold >=\n                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [\n                  this.showSearch && !!this.internalSearchIndeces.length && (\n                    <div\n                      class=\"search-widget\"\n                      role=\"combobox\"\n                      aria-owns=\"autocomplete-results\"\n                      aria-expanded={\n                        this.showAutocomplete && this.autocompleteResults\n                          ? 'true'\n                          : 'false'\n                      }\n                    >\n                      {searchWidget}\n                    </div>\n                  ),\n                  (!this.showSearch || !this.myAccData) &&\n                    !!this.searchSlotLen && <slot name=\"search\" />,\n                ]}\n\n                {/* Bar Icon buttons */}\n\n                {/* Bar search icon button (when not enough to show search in bar) */}\n                {this.threshold <\n                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.search &&\n                  ((this.showSearch && !!this.internalSearchIndeces.length) ||\n                    !!this.searchSlotLen) && (\n                    <button\n                      class={{\n                        'icon-btn': true,\n                        'search-btn': true,\n                        'search-btn--open': this.searchBarShown,\n                      }}\n                      aria-controls=\"global-nav-search-bar\"\n                      aria-expanded={this.searchBarShown ? 'true' : 'false'}\n                      onMouseDown={this.onSearchBtnClick}\n                      onKeyDown={this.onSearchBtnKeyDown}\n                    >\n                      <nano-icon name=\"light/search\"></nano-icon>\n                    </button>\n                  )}\n\n                {/* Bar cart and notifications  */}\n                {this.threshold >=\n                  this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [\n                  !!this.iconSlotLen && <slot name=\"icon\" />,\n                  this.myAccData &&\n                    (!this.activeMyAccountSections ||\n                      this.activeMyAccountSections.includes('icons')) && [\n                      this.msgUrl && (\n                        <a href={this.msgUrl} class=\"icon-btn\">\n                          <nano-icon name=\"light/bell\"></nano-icon>\n                          {this.msgCount > 0 && (\n                            <span class=\"gn-menu_actions-counter\">\n                              {this.msgCount}\n                            </span>\n                          )}\n                        </a>\n                      ),\n                      this.cartUrl && !!this.cartCount && (\n                        <a href={this.cartUrl} class=\"icon-btn\">\n                          <nano-icon name=\"light/shopping-cart\"></nano-icon>\n                          {this.cartCount > 0 && (\n                            <span class=\"gn-menu_actions-counter\">\n                              {this.cartCount}\n                            </span>\n                          )}\n                        </a>\n                      ),\n                    ],\n                ]}\n\n                {/* Bar about links */}\n                {(!!this.aboutSlotLen || !!this.aboutNavItms.length) &&\n                  this.threshold >=\n                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (\n                    <nav\n                      class=\"nav-links nav-links--sub\"\n                      aria-label=\"About the company. Links\"\n                    >\n                      <slot name=\"about\" />\n                      <nano-nav-item class=\"nano-global-nav nano-global-nav-bar\">\n                        <a\n                          href={this.aboutNavItms[0].address}\n                          target={this.aboutNavItms[0].target}\n                        >\n                          {this.aboutNavItms[0].title}\n                        </a>\n                      </nano-nav-item>\n                    </nav>\n                  )}\n\n                {/* Bar login button / User panel */}\n                {this.myAccData &&\n                  (!this.activeMyAccountSections ||\n                    this.activeMyAccountSections.includes('loggedin')) &&\n                  this.threshold >=\n                    this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && [\n                    this.myAccData.urls.login && (\n                      <a\n                        href={this.myAccData.urls.login + this.ssoRedirect}\n                        class=\"login-btn\"\n                      >\n                        Login / Register\n                      </a>\n                    ),\n                    this.myAccountUser && (\n                      <div class=\"user-links\">\n                        <button\n                          class={{\n                            'icon-btn': true,\n                            'user-links-btn': true,\n                            open: this.userMenuOpen,\n                          }}\n                          onMouseDown={this.onUserBtnClick}\n                          onKeyDown={this.onUserBtnKeyDown}\n                        >\n                          {' '}\n                          {this.myAccountUser.name}\n                          <nano-icon name=\"solid/caret-down\"></nano-icon>\n                        </button>\n                        <div\n                          class=\"user-links-panel\"\n                          tabindex=\"-1\"\n                          ref={(div) => (this.userLinkPanel = div)}\n                        >\n                          {!!this.myAccountUser?.small_avatar_url && (\n                            <nano-global-nav-user-profile\n                              myAccountUser={this.myAccountUser}\n                              userProfileUrl={this.userProfileUrl}\n                            ></nano-global-nav-user-profile>\n                          )}\n                          <div class=\"user-links-panel-content\">\n                            {this.loggedInNavItms.map((link) => {\n                              return (\n                                <a href={link.address} target={link.target}>\n                                  {link.title}\n                                </a>\n                              );\n                            })}\n                          </div>\n                          <div class=\"user-links-panel-foot\">\n                            <a\n                              href={\n                                this.myAccData.urls.forgot_password +\n                                this.ssoRedirect\n                              }\n                            >\n                              Change Password\n                            </a>\n                            <a\n                              href={\n                                this.myAccData.urls.logout + this.ssoRedirect\n                              }\n                            >\n                              Logout\n                            </a>\n                          </div>\n                        </div>\n                      </div>\n                    ),\n                  ]}\n                <span class=\"measure-ele\"></span>\n              </nav>\n\n              {this.threshold <\n                this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && (\n                <div\n                  id=\"global-nav-search-bar\"\n                  class={{\n                    'search-bar': true,\n                    show: this.searchBarShown,\n                  }}\n                  aria-expanded={this.searchBarShown ? 'true' : 'false'}\n                  role=\"region\"\n                  tabindex=\"-1\"\n                  ref={(div) => (this.searchBarEl = div)}\n                >\n                  <div class=\"search-widget\">\n                    {this.showSearch && !!this.internalSearchIndeces.length && (\n                      <div>{searchWidget}</div>\n                    )}\n                    {(!this.showSearch || !this.myAccData) &&\n                      !!this.searchSlotLen && <slot name=\"search\" />}\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-sticker>\n          {/* END MAIN NAV BAR */}\n\n          {(this.threshold < this.THRESHOLDLIMIT - 3 ||\n            this.menuFullScreen) && (\n            <div\n              class={{\n                mask: true,\n                open: this.modalOpen,\n              }}\n              onClick={this.menuClose}\n              onTouchEnd={this.menuClose}\n            ></div>\n          )}\n        </div>\n        <div class=\"site-content\" ref={(div) => (this.siteContent = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n\n  // Data processing\n\n  private domainFor(origin: string): string {\n    if (!this.myAccData) return '';\n    const domain = this.myAccData.domains.find((dm) => dm.origin === origin);\n    return domain ? domain.domain : '';\n  }\n\n  private processSearchResults(results: AlgoliaMultiResults | AlgoliaResults) {\n    const multiResults = results as AlgoliaMultiResults;\n    const singleResult = results as AlgoliaResults;\n\n    if (multiResults.results) {\n      multiResults.results.forEach((result, i) => {\n        multiResults.results[i] = this.processSearchResults(\n          result\n        ) as AlgoliaResults;\n      });\n      return multiResults;\n    } else {\n      singleResult.hits.map((hit) => {\n        if (hit.url && !hit.url.match(/^http/))\n          hit.url =\n            location.protocol + '//' + this.domainFor(hit.origin) + hit.url;\n      });\n      return singleResult;\n    }\n  }\n\n  private processMyAccData() {\n    if (!this.myAccData || !this.myAccData.search.indeces.length) return;\n\n    if (this.myAccData.search.api_key)\n      this.searchApiKey = this.myAccData.search.api_key;\n    if (this.myAccData.search.app_id)\n      this.searchAppId = this.myAccData.search.app_id;\n\n    if (this.myAccData.cart.count) this.cartCount = this.myAccData.cart.count;\n    if (this.myAccData.notifications.count)\n      this.msgCount = this.myAccData.notifications.count;\n\n    if (!this.searchAppId || !this.searchApiKey) return;\n    this.internalSearchIndeces = [\n      ...this.myAccData.search.indeces,\n      ...this.searchIndeces,\n    ];\n\n    if (this.myAccData.urls.cart && !this.cartUrl)\n      this.cartUrl = this.myAccData.urls.cart;\n    if (this.myAccData.urls.messages && !this.msgUrl)\n      this.msgUrl = this.myAccData.urls.messages;\n  }\n\n  private processMyAccLinks() {\n    if (!this.myAccData.links || !this.myAccData.links.length) return;\n\n    this.myAccData.links.forEach((link) => {\n      switch (link.area) {\n        case 'left-side-logged-in':\n        case 'left-side-logged-out':\n          if (\n            this.activeMyAccountSections &&\n            !this.activeMyAccountSections.includes('sites')\n          )\n            break;\n          if (this.isLoggedIn && link.area === 'left-side-logged-in')\n            this.siteNavItms.push(link);\n          else if (!this.isLoggedIn && link.area === 'left-side-logged-out')\n            this.siteNavItms.push(link);\n          break;\n        case 'right-side-logged-in':\n        case 'right-side-logged-out':\n          if (\n            this.activeMyAccountSections &&\n            !this.activeMyAccountSections.includes('about')\n          )\n            break;\n          if (this.isLoggedIn && link.area === 'right-side-logged-in')\n            this.aboutNavItms.push(link);\n          else if (!this.isLoggedIn && link.area === 'right-side-logged-out')\n            this.aboutNavItms.push(link);\n          break;\n        case 'profile-panel-list':\n          if (\n            this.activeMyAccountSections &&\n            !this.activeMyAccountSections.includes('loggedin')\n          )\n            break;\n          this.loggedInNavItms.push(link);\n          break;\n      }\n    });\n  }\n}\n"]}

package/dist/nano-components/{p-8ef2363b.entry.js → p-6cd59e58.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,h as o,a as i,g as n}from"./p-1fe12320.js";import{g as r,a as s}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as l}from"./p-885b6950.js";import{C as b}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-4c6ef60b.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home"){i=0}else if(t.key==="End"){i=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}o[i].setFocus();if(["top"].includes(this.placement)){l(o[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const l=this.getAllActiveTabs;const b=l.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(l[b+t]){this.setActiveTab(l[b+t]);if(Math.abs(r)>Math.abs(s)){if(r>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){l(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const i=s(t,this.tabs);const n=i.top+this.nav.scrollTop;const r=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${n}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===o.panel));if(!i)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:o.panel});if(n.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();i.remove();this.nanoTabClose.emit({name:o.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();l(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=h;export{p as nano_tab_group};
-//# sourceMappingURL=p-8ef2363b.entry.js.map
+import{r as t,c as a,h as o,a as i,g as n}from"./p-1fe12320.js";import{g as r,a as s}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as l}from"./p-885b6950.js";import{C as b}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-167b9165.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home"){i=0}else if(t.key==="End"){i=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}o[i].setFocus();if(["top"].includes(this.placement)){l(o[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const l=this.getAllActiveTabs;const b=l.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(l[b+t]){this.setActiveTab(l[b+t]);if(Math.abs(r)>Math.abs(s)){if(r>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){l(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const i=s(t,this.tabs);const n=i.top+this.nav.scrollTop;const r=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${n}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===o.panel));if(!i)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:o.panel});if(n.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();i.remove();this.nanoTabClose.emit({name:o.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();l(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=h;export{p as nano_tab_group};
+//# sourceMappingURL=p-6cd59e58.entry.js.map

package/dist/nano-components/{p-687350a5.entry.js → p-701e8ebf.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,f as t,h as i,a as r,g as e}from"./p-1fe12320.js";import{g as s}from"./p-7b3638b7.js";import{d as a}from"./p-9746b0a5.js";const c='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach((o=>{o.setError("");if(this.min&&t.length<this.min){o.setError(`You must select a minimum of ${this.min} values.`,this.showErrorMsg);r=true}if(this.max&&t.length>this.max){o.setError(`Only up to ${this.max} values are allowed.`,this.showErrorMsg);r=true}}));return r}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){if(!!this.mo)return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return i(r,{...this.checkboxTypes},i("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},i("legend",{class:"nanogroupcb__legend",id:o},this.legend),i("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},i("slot",null)),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?i("div",{class:"nanogroupcb__error"},this.errorMessage):"",i("div",{class:"nanogroupcb__help"},i("slot",{name:"helper"})))))}get host(){return e(this)}static get watchers(){return{min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
-//# sourceMappingURL=p-687350a5.entry.js.map
+import{r as o,c as n,f as t,h as i,a as r,g as s}from"./p-1fe12320.js";import{g as e}from"./p-7b3638b7.js";import{d as a}from"./p-9746b0a5.js";const c='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){this.checkboxTypes=e(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){if(!!this.mo)return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return i(r,{...this.checkboxTypes},i("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},i("legend",{class:"nanogroupcb__legend",id:o},this.legend),i("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},i("slot",null)),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?i("div",{class:"nanogroupcb__error"},this.errorMessage):"",i("div",{class:"nanogroupcb__help"},i("slot",{name:"helper"})))))}get host(){return s(this)}static get watchers(){return{min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
+//# sourceMappingURL=p-701e8ebf.entry.js.map

package/dist/nano-components/p-701e8ebf.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"names":["checkboxGroupCss","CheckboxGroup","this","grpId","grpIds","handleInvalid","ev","_invalid","validateOn","showErrorMsg","customValidate","showInlineError","preventDefault","showInlineValidation","nativeCbs","length","forEach","cb","_i","validity","valid","errorMessage","validationMessage","nanoValidate","emit","isValid","invalid","originalEvent","validityMessage","[object Object]","validateFirst","Promise","resolve","setTimeout","message","optVal","checkboxes","find","c","value","setError","onlyRadios","filter","type","required","checked","rd","reportValidity","onlyCbs","i","nativeCb","setCustomValidity","min","max","checkboxTypes","getClassMap","map","disabled","mo","MutationObserver","handleSlotChange","observe","host","childList","forceUpdate","Array","from","querySelectorAll","hasHelperSlot","querySelector","all","reduce","acc","push","getInputElement","addEventListener","debounce","bind","handleDisabledChange","attachSlotObserver","disconnect","handleComponentChange","legendId","moreId","h","Host","class","nanogroupcb","show-error","id","legend","role","aria-labelledby","name"],"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\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1.5;\n    white-space: normal;\n    display: block;\n    width: 100%;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start: calc(var(--label-padding) - var(--control-margin-bottom));\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n      margin-block: var(--control-margin-top) var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  forceUpdate,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (!!this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    const onlyRadios = this.nativeCbs.filter((cb) => cb.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    const onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) =>\n      cb.addEventListener('invalid', this.handleInvalid)\n    );\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}