@nanoporetech-digital/components 3.3.0 → 3.3.2

package/dist/nano-components/p-db4b6602.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","[object Object]","apiKey","appId","index","searchIndex","tagName","algoliaResultsEle","goback","detail","results","client","result","find","selected","name","indexName","domain","filters","query","composedPath","ele","classList","contains","changeOrder","id","attachResultListeners","querySelectorAll","forEach","item","addEventListener","removeAllFilters","closefilters","filterWrap","stopPropagation","filtersDiv","oldResults","toggleOldResults","checked","el","resultEle","clickEv","removeFilter","filterVal","openFilterBtn","tabIndex","add","setAttribute","document","body","style","overflow","setTimeout","focus","tags","Array","from","tag","removeEventListener","ev","replicaIndex","showResults","facet","removeFilters","remove","show","f","startsWith","console","log","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","requestAnimationFrame","type","slot"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button:not(.result__tags-tag) {\n    appearance: none;\n    border: none;\n    background: none;\n    position: relative;\n    inset-block-start: -2px;\n  }\n\n  .icon-button {\n    color: inherit;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-block-end: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      inset-inline-start: 30px;\n      position: relative;\n      border-block-end: 1px solid #e5eef1;\n      padding-block-start: 0.9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px map.get($colors, lightgrey);\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: 0.9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-block-end: 0.5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    margin-inline: 0 5px;\n    margin-block: 0 3px;\n    padding-inline: 7px;\n    padding-block: 10px;\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    padding-inline: 8px 2px;\n    padding-block: 5px 3px;\n    margin-inline: 0 5px;\n    margin-block: 0 5px;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      padding-inline: 10px 4px;\n      padding-block: 2px 1px;\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      inset-inline-start: -7px;\n    }\n\n    &__query {\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n      margin-block: 0;\n      margin-inline: 1em 0;\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 175px;\n      max-width: 200px;\n      margin-inline-start: auto;\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: 0.1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      margin-inline-start: 0.5em;\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-block-end: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n    padding-inline: 0 40px;\n    padding-block: 1.8em 1em;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-end: 20px;\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: map.get($colors, darkgrey);\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    transition: all 0s ease 0.5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, 0.5);\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: 0.1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n      margin-inline: auto 0;\n      margin-block: 0;\n    }\n  }\n\n  &__old-posts {\n    margin-inline-start: 1rem;\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform 0.3s ease;\n      padding: 1em;\n      color: black;\n      overflow: auto;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: 0.8em;\n\n    margin: 0.8em 0;\n\n    strong[slot] {\n      display: block;\n      padding-inline-start: calc(20px - 0.8em);\n    }\n\n    nano-icon[slot='icon-end'] {\n      padding-inline-start: calc(20px - 0.8em);\n      padding-inline-end: calc(20px - 0.8em);\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-block-end: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: 0.5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      margin-inline: 0 1em;\n      margin-block: 0;\n      content: '';\n      border: 1px solid map.get($colors, blue);\n      background: map.get($colors, white);\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\n        \"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\"\n      );\n\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      inset-inline-start: 2px;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked + .filter-label {\n      &::before {\n        background: map.get($colors, blue--darker);\n      }\n    }\n\n    &:focus + .filter-label {\n      &::before {\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    border-block-end: 1px solid map.get($colors, lightblue);\n    padding-block-end: 0.5rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-reset {\n    color: map.get($colors, blue);\n    font-size: 12px;\n    text-decoration: underline;\n    margin-inline: auto 0;\n    margin-block: 0;\n\n    :host(.small) & {\n      margin: 0;\n    }\n  }\n\n  &-title {\n    margin: 0;\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-block-end: 14px;\n  border-block-end: 1px solid map.get($colors, lightblue);\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    margin: 1em 0 0.5em 0;\n    width: 70%;\n    display: flex;\n\n    a {\n      color: lighten(map.get($colors, blue), 4%);\n      font-size: 14px;\n      line-height: 1.43;\n      text-decoration: none;\n      font-weight: 600;\n    }\n\n    nano-icon {\n      margin-inline: 0 0.5em;\n      margin-block: 0;\n      min-width: 20px;\n      min-height: 20px;\n      opacity: 0.8;\n    }\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: map.get($colors, darkgrey);\n    font-size: 13px;\n    width: 70%;\n    text-decoration: none;\n\n    @include media-breakpoint-down('lg') {\n      width: 100%;\n    }\n  }\n\n  &__pdf {\n    display: inline-block;\n    margin-inline-start: 0.5rem;\n    color: map.get($colors, palegrey);\n  }\n\n  &__meta {\n    display: flex;\n    flex-flow: row wrap;\n    color: map.get($colors, darkgrey);\n    font-size: 11px;\n    line-height: 13px;\n    width: 100%;\n    align-items: center;\n\n    > * {\n      margin-block-start: 0.5rem;\n\n      &:not(:last-child) {\n        padding-inline-end: 0;\n\n        &::after {\n          content: '';\n          height: 1rem;\n          width: 1px;\n          background: #90c6e7;\n          display: inline-block;\n          margin-inline-start: 0.7rem;\n          margin-inline-end: 0.7rem;\n\n          @include media-breakpoint-down('sm') {\n            display: none;\n          }\n        }\n      }\n    }\n\n    @include media-breakpoint-down('sm') {\n      flex-flow: column;\n      align-items: flex-start;\n    }\n  }\n\n  &__tags {\n    display: flex;\n    flex-flow: row wrap;\n\n    @include media-breakpoint-down('sm') {\n      padding-inline-start: 0;\n    }\n\n    &-tag {\n      color: map.get($colors, darkgrey);\n      display: inline-block;\n      font-size: 0.4375rem;\n      letter-spacing: 1.4px;\n      background: #fff;\n      border-radius: 2px;\n      text-transform: uppercase;\n      padding: 0 4px 1px 5px;\n      font-weight: 600;\n      margin: 3px 0.25rem 0.25rem 0;\n      border: 1px solid #b5aea7;\n      white-space: nowrap;\n      line-height: 13px;\n    }\n  }\n\n  &__type {\n    font-weight: 600;\n    text-transform: capitalize;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n  }\n\n  &__date {\n    display: flex;\n    align-items: center;\n    color: map.get($colors, darkgrey);\n  }\n\n  &__source {\n    color: map.get($colors, darkgrey);\n    padding-inline-end: 0.75rem;\n  }\n\n  &__authors {\n    font-size: 12px;\n    color: map.get($colors, darkgrey);\n    margin-block-end: 0.25rem;\n    text-decoration: none;\n    width: 70%;\n  }\n\n  &__buttons {\n    width: 70%;\n    margin-block-end: 0.5rem;\n\n    &-button {\n      background-color: map.get($colors, blue);\n      color: #fff;\n      padding: 5px 8px 1px;\n      border-radius: 4px;\n      display: inline-block;\n      font-size: 11px;\n      text-decoration: none;\n      border: none;\n    }\n  }\n\n  &__promo {\n    width: 70%;\n    margin-block-end: 0.5rem;\n    text-decoration: none;\n    color: map.get($colors, darkgrey);\n\n    &-box {\n      width: 300px;\n      background-color: #e3eef1;\n      padding: 12px 12px 8px 4px;\n      display: flex;\n      flex-flow: row nowrap;\n      margin-block-start: 1rem;\n    }\n\n    &-bigdate {\n      flex: 0 1 60px;\n      text-align: center;\n      font-weight: 600;\n      color: map.get($colors, blue);\n      text-transform: uppercase;\n      line-height: 1.25;\n      letter-spacing: 1.5px;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      span {\n        color: map.get($colors, darkgrey);\n        display: block;\n      }\n\n      & ~ div {\n        padding-inline-start: 1rem;\n        border-inline-start: 1px solid #c5dbe1;\n      }\n    }\n\n    &-date {\n      font-size: 12px;\n    }\n\n    &-venue {\n      font-size: 12px;\n    }\n\n    nano-icon {\n      color: map.get($colors, blue);\n      position: relative;\n      inset-block-start: 1px;\n      padding-inline-end: 2px;\n    }\n  }\n\n  &__image {\n    display: block;\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    border-radius: 4px;\n    position: relative;\n    width: 100%;\n    height: 150px;\n    margin-block-end: 0.5rem;\n\n    @include media-breakpoint-up('sm') {\n      width: 142px;\n      height: 80px;\n    }\n\n    nano-icon {\n      position: absolute;\n      inset-block-start: calc(50% - 0.75rem);\n      inset-inline-start: calc(50% - 0.75rem);\n      font-size: 1.5rem;\n      color: #0084a9;\n\n      --primary-color: #fff;\n      --secondary-color: #0084a9;\n      --primary-opacity: 1;\n\n      @include media-breakpoint-down('sm') {\n        font-size: 3rem;\n        inset-block-start: calc(50% - 1.5rem);\n        inset-inline-start: calc(50% - 1.5rem);\n      }\n    }\n  }\n\n  &__video {\n    &-body {\n      width: 70%;\n      text-decoration: none;\n      display: flex;\n      flex-flow: row wrap;\n\n      @include media-breakpoint-down('lg') {\n        width: 100%;\n      }\n\n      @include media-breakpoint-down('sm') {\n        flex-flow: column;\n      }\n\n      .result__body {\n        padding-inline-start: 1rem;\n        display: flex;\n        flex-direction: column;\n        margin-block-end: 0;\n        flex: 1;\n\n        @include media-breakpoint-down('sm') {\n          padding-inline-start: 0;\n        }\n\n        p {\n          display: inline;\n          margin: 0;\n        }\n\n        u,\n        li,\n        a {\n          text-decoration: none;\n        }\n\n        .result__meta {\n          margin-block-start: 0.5rem;\n        }\n\n        .result__description {\n          flex: 1 0 auto;\n        }\n      }\n    }\n  }\n}\n\n.search-empty {\n  padding: 3rem 0;\n  text-align: center;\n  border-block-start: 1px solid #e5eef1;\n\n  h2 {\n    color: #455556;\n    font-size: 1.125rem;\n    margin-block-end: 0.5rem;\n  }\n\n  &-icon {\n    font-size: 7rem;\n\n    --icon-color: #e4e6e8;\n\n    margin-block-end: 2rem;\n  }\n}\n\n.search__highlight {\n  background: #fbffbf;\n  font-style: normal;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  State,\n  ComponentInterface,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport type { AloliaSearchResultDetail, SearchIndex } from '../../interface';\n\nconst filterOldPosts =\n  'created > ' + Math.floor((Date.now() - 63115200000) / 1000);\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n  tag: 'nano-global-search-results',\n  styleUrl: 'global-search-results.scss',\n  shadow: true,\n})\nexport class GlobalSearchResults implements ComponentInterface {\n  private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n  private filtersDiv: HTMLElement;\n  private openFilterBtn: HTMLButtonElement;\n  private ro: ResizeObserver;\n\n  @State() algoliaEle: HTMLNanoAlgoliaElement;\n  @State() currentWidth: number;\n  @State() apiKey: string;\n  @State() appId: string;\n  @State() index: SearchIndex;\n\n  @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n  @Watch('algoliaEle')\n  @Watch('apiKey')\n  @Watch('appId')\n  handleAlgoliaCredsChange() {\n    if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n    this.algoliaEle.apiKey = this.apiKey;\n    this.algoliaEle.appId = this.appId;\n  }\n\n  @Watch('algoliaEle')\n  @Watch('index')\n  handleAlgoliaIndexChange() {\n    if (!this.index || !this.algoliaEle) return;\n    this.algoliaEle.searchIndex = this.index;\n  }\n\n  @Listen('nanoSearchReset', { target: 'body' })\n  handleGlobalNavReset(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    this.algoliaResultsEle = null;\n    this.goback();\n  }\n\n  @Listen('nanoSearchResult', { target: 'body' })\n  handleGlobalNavSearch(e: CustomEvent & { target: HTMLElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n    const {\n      detail: { results, client },\n    } = e as { detail: AloliaSearchResultDetail };\n    const result = results.find((result) => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters,\n    };\n    this.algoliaEle.query = result.query;\n  }\n\n  @Listen('nanoChange')\n  handleReorder(e: CustomEvent & { target: HTMLNanoSelectElement }) {\n    if (\n      e\n        .composedPath()\n        .find(\n          (ele: HTMLElement) =>\n            ele.classList && ele.classList.contains('indexchange')\n        ) &&\n      !!this.algoliaResultsEle\n    ) {\n      this.changeOrder(e);\n    }\n  }\n\n  @Listen('nanoResultsShown')\n  attachListeners(e: CustomEvent & { target: HTMLElement }) {\n    if (\n      !e\n        .composedPath()\n        .find((ele: HTMLElement) => ele.id && ele.id === 'main-search')\n    )\n      return;\n\n    this.algoliaResultsEle = this.algoliaEle.querySelector(\n      '#main-search-results'\n    );\n\n    // add results listeners\n    this.attachResultListeners();\n\n    this.algoliaEle.querySelectorAll('.filters-reset').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.removeAllFilters();\n      });\n    });\n\n    this.algoliaEle.querySelectorAll('.close-filters').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.closefilters();\n      });\n    });\n\n    const filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n    if (filterWrap) {\n      filterWrap.addEventListener('click', (e) => {\n        e.stopPropagation();\n      });\n    }\n\n    this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n\n    const oldResults = this.algoliaEle.querySelector('.old-posts');\n    if (oldResults) {\n      oldResults.addEventListener(\n        'change',\n        (e: Event & { target: HTMLInputElement }) => {\n          this.toggleOldResults(e.target.checked);\n        }\n      );\n    }\n  }\n\n  @Listen('nanoNewResults', { target: 'body' })\n  attachResultListeners(e?: CustomEvent & { target: HTMLElement }) {\n    if (e && e.composedPath().find((el) => el === this.algoliaEle)) {\n      this.algoliaResultsEle = this.algoliaEle.querySelector(\n        'nano-algolia-results'\n      );\n    }\n    if (!this.algoliaResultsEle) return;\n    const resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach((item) => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n        const filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      });\n    });\n\n    resultEle.querySelectorAll('.back-btn').forEach((item) => {\n      item.addEventListener('click', () => {\n        this.goback();\n      });\n    });\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach((item) => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\n        this.filtersDiv.tabIndex = -1;\n        this.filtersDiv.classList.add('show');\n        this.filtersDiv.setAttribute('aria-expanded', 'true');\n        document.body.style.overflow = 'hidden';\n        setTimeout(() => this.filtersDiv.focus(), 20);\n      });\n    });\n\n    const tags = Array.from(resultEle.querySelectorAll('.result__tags-tag'));\n    tags.forEach((tag) => {\n      tag.removeEventListener('click', this.tagClick);\n      tag.addEventListener('click', this.tagClick);\n    });\n  }\n\n  private tagClick = (e: MouseEvent & { target: HTMLElement }) => {\n    e.preventDefault();\n    let tagVal = e.target.dataset.value;\n    tagVal = tagVal === 'publication' ? 'publications' : tagVal;\n    tagVal = tagVal.toLowerCase();\n\n    const filter: HTMLNanoAlgoliaFilterElement = this.algoliaEle.querySelector(\n      'nano-algolia-filter[filter-name=\"tags\"]'\n    );\n    if (filter.value.indexOf(tagVal) === -1) {\n      filter.value = filter.value ? [...filter.value, tagVal] : [tagVal];\n    }\n  };\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\n  }\n\n  private removeFilter(facet, filter) {\n    this.algoliaEle.removeFilters(facet, filter);\n  }\n\n  private removeAllFilters() {\n    this.algoliaEle.removeFilters();\n  }\n\n  private closefilters() {\n    if (!this.filtersDiv) return;\n    this.filtersDiv.tabIndex = null;\n    this.filtersDiv.classList.remove('show');\n    this.filtersDiv.setAttribute('aria-expanded', 'false');\n    document.body.style.overflow = '';\n    setTimeout(() => this.openFilterBtn.focus(), 20);\n  }\n\n  private toggleOldResults(show: boolean) {\n    if (show)\n      this.algoliaEle.filters = this.algoliaEle.filters.filter(\n        (f) => !f.startsWith('created > ')\n      );\n    else this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];\n\n    console.log(this.algoliaEle.filters);\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n      }\n    });\n    this.ro.observe(this.el);\n    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ small: this.currentWidth < 677 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n      >\n        <nano-algolia\n          store-id=\"searchq\"\n          store-method=\"url-hash-push\"\n          class=\"main-search__wrap sc-nano-global-search-results\"\n          ref={(ele) => requestAnimationFrame(() => (this.algoliaEle = ele))}\n          id=\"main-search\"\n        >\n          <script type=\"text/template\" slot=\"template\">\n            {`<div class=\"main-search sc-nano-global-search-results\">\n              <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\" infinite-scroll>\n                <script type=\"text/template\" slot=\"start-template\">\n                  <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n                    <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n                      <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n                    </button>\n                    <div>\n                      <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class=\"sc-nano-global-search-results topbar__filtering\">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"all_prod_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"all_prod_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"all_prod_en_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_en_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_en_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"cws_english_resources_en\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"store_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"store_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"store_prod_date_asc\">Sort by: Oldest</nano-option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\" show-inline-error=\"false\">\n                          <nano-option value=\"community_prod\">Sort by: Most relevant</nano-option>\n                          <nano-option value=\"community_prod_date_desc\">Sort by: Newest</nano-option>\n                          <nano-option value=\"community_prod_date_asc\">Sort by: Oldest</nano-option>\n                          <nano-option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</nano-option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class=\"sc-nano-global-search-results topbar__filter-count\">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n                              {{ filterVal | public_name }}\n                              <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n                                <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                </script>\n\n                <script type=\"text/template\" slot=\"result-template\">\n                  <!-- START NO CONTENT -->\n                  {{ @if ((!it.results || !it.results.length)) }}\n                    <div class=\"search-empty\">\n                      <nano-icon name=\"light/search\" class=\"search-empty-icon\"></nano-icon>\n                      <h2>No matches found...</h2>\n                      <p>Please try a different search query.</p>\n                    </div>\n                  {{ /if }}\n                  <!-- END NO CONTENT -->\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      {{ contentType = result.content_type ? result.content_type : result.type }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <div class=\"sc-nano-global-search-results result\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            <a href=\"{{ result.url | abs_url(it, result) }}\">\n                            {{ result._snippetResult.title.value | safe }}\n                            {{ @if (contentType === 'technical_document' || contentType === 'literature' || contentType === 'white_paper' || contentType === 'protocol') }}\n                              <span class=\"sc-nano-global-search-results result__pdf\">PDF</span>\n                            {{ /if }}\n                            </a>\n                          </h4>\n                          {{ @if (result.authors) }}\n                            {{ @if (typeof result.authors === 'string') }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Authors: {{ result.authors | trim_to(50) }}</a>\n                            {{ #else }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">\n                                {{ @each(result.authors) => author, index }}\n                                  <!-- {{ @if(index == 0)}} -->\n                                    Athors: {{ author | trim_to(60) }}\n                                  <!-- {{ /if }} -->\n                                {{ /each }}\n                              </a>\n                            {{ /if }}\n                          {{ /if }}\n                          {{ @if (contentType === 'video' || contentType === 'lc_lightning_talk' ) }}\n                            {{ @if (result.name) }}\n                              <a class=\"sc-nano-global-search-results result__authors\" href=\"{{ result.url | abs_url(it, result) }}\">Speaker: {{ result.name | trim_to(50) }}</a>\n                            {{ /if }}\n                            <a class=\"sc-nano-global-search-results result__video-body\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              {{ @if (result.image) }}\n                                <div class=\"sc-nano-global-search-results result__image\" style=\"background-image: url('{{ result.image | abs_url(it, result) }}')\">\n                                  <nano-icon class=\"sc-nano-global-search-results\" name=\"duotone/play-circle\"></nano-icon>\n                                </div>\n                              {{ /if }}\n                              <div class=\"sc-nano-global-search-results result__body\">\n                                <div class=\"sc-nano-global-search-results result__description\">\n                                  {{ @if (result.description) }}\n                                    {{ result._snippetResult.description.value | safe }}\n                                  {{ /if }}\n                                </div>\n                              </div>\n                              <div class=\"sc-nano-global-search-results result__meta\">\n                                {{ @if (result.type || result.content_type) }}\n                                  <div class=\"sc-nano-global-search-results result__type\">\n                                  {{ @if (contentType === 'lc_lightning_talk') }}\n                                    Presentation\n                                  {{ #else }}\n                                    {{ contentType }}\n                                  {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.tags) }}\n                                  <div class=\"sc-nano-global-search-results result__tags\">\n                                    {{ @if (typeof result.tags === 'string') }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ #else }}\n                                      {{ @each(result.tags) => tag, index }}\n                                        {{ @if(index < 5)}}\n                                          {{ @if (tag !== \"No video\" && tag !== \"Resources\" && tag !== \"Video\") }}\n                                            <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                          {{ /if }}\n                                        {{ /if }}\n                                      {{ /each }}\n                                    {{ /if }}\n                                  </div>\n                                {{ /if }}\n                                {{ @if (result.source) }}\n                                  <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                                {{ /if }}\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (result.body) }}\n                            <a class=\"sc-nano-global-search-results result__body\" href=\"{{ result.url | abs_url(it, result) }}\">{{ result._snippetResult.body.value | safe }}</a>\n                          {{ /if }}\n                          {{ @if (contentType === 'product' }}\n                            <div class=\"sc-nano-global-search-results result__buttons\">\n                              <a class=\"sc-nano-global-search-results result__buttons-button\" href=\"{{ result.url | abs_url(it, result) }}\">View product</a>\n                            </div>\n                          {{ /if }}\n                          {{ @if (contentType === 'event') }}\n                            <a class=\"sc-nano-global-search-results result__promo\" href=\"{{ result.url | abs_url(it, result) }}\">\n                              <div class=\"sc-nano-global-search-results result__promo-box\">\n                                <div class=\"sc-nano-global-search-results result__promo-bigdate\">\n                                  {{ result.start_date | date_long({year: undefined, month: 'short', day: undefined}) }}\n                                  <span>{{ result.start_date | date_long({year: undefined, month: undefined, day: 'numeric'}) }}</span>\n                                </div>\n                                <div>\n                                  <div class=\"sc-nano-global-search-results result__promo-date\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/calendar-alt\"></nano-icon>\n                                    {{ @if (result.end_date) }}\n                                      {{ @if (result.end_date !== result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', month: 'short'}) }} - {{ result.end_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ #else }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ #else }}\n                                      {{ @if (result.start_date) }}\n                                        {{ result.start_date | date_long({weekday: 'short', day: 'numeric', year: 'numeric', month: 'short'}) }}\n                                      {{ /if }}\n                                    {{ /if }}\n                                  </div>\n                                  <div class=\"sc-nano-global-search-results result__promo-venue\">\n                                    <nano-icon class=\"sc-nano-global-search-results\" name=\"light/map-marker-alt\"></nano-icon>\n                                    Venue\n                                  </div>\n                                </div>\n                              </div>\n                            </a>\n                          {{ /if }}\n                          {{ @if (contentType !== 'lc_lightning_talk' && contentType !== 'video') }}\n                            <div class=\"sc-nano-global-search-results result__meta\">\n                              {{ @if (result.type || result.content_type) }}\n                                <div class=\"sc-nano-global-search-results result__type\">\n                                {{ @if (contentType === 'news_item') }}\n                                  News\n                                {{ #elif (contentType === 'static_page' || contentType === 'bespoke') }}\n                                  Page\n                                {{ #elif (contentType === 'case_study') }}\n                                  Case study\n                                {{ #elif (contentType === 'lc_poster') }}\n                                  Poster\n                                {{ #elif (contentType === 'nanopore_live') }}\n                                  Live stream\n                                {{ #elif (contentType === 'data_release') }}\n                                  Data release\n                                {{ #elif (contentType === 'research_area') }}\n                                  Research area\n                                {{ #elif (contentType === 'white_paper') }}\n                                  White paper\n                                {{ #elif (contentType === 'technical_document') }}\n                                  Technical document\n                                {{ #elif (contentType === 'info_sheet') }}\n                                  Info sheet\n                                {{ #elif (contentType === 'lc_home' || contentType === 'lc_venue') }}\n                                  London Calling\n                                {{ #else }}\n                                  {{ contentType }}\n                                {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (contentType !== 'event') }}\n                                {{ @if (result.updated) }}\n                                  <div class=\"sc-nano-global-search-results result__date\">{{ result.updated | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                {{ #else }}\n                                  {{ @if (result.created) }}\n                                    <div class=\"sc-nano-global-search-results result__date\">{{ result.created | date_long({year: 'numeric', month: 'short', day: 'numeric'}) }}</div>\n                                  {{ /if }}\n                                {{ /if }}\n                              {{ /if }}\n                              {{ @if (result.tags) }}\n                                <div class=\"sc-nano-global-search-results result__tags\">\n                                  {{ @if (typeof result.tags === 'string') }}\n                                    {{ @if (result.tags !== \"Resources\" && result.tags !== \"Tools\" && result.tags !== \"Publications\" && result.tags !== \"Case studies\") }}\n                                      <button data-value=\"{{ result.tags | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ result.tags }}</button>\n                                    {{ /if }}\n                                  {{ #else }}\n                                    {{ @each(result.tags) => tag, index }}\n                                      {{ @if(index < 5)}}\n                                        {{ @if (tag !== \"Resources\" && tag !== \"Tools\" && tag !== \"Publications\" && tag !== \"Case studies\") }}\n                                          <button data-value=\"{{ tag | lowercase }}\" class=\"sc-nano-global-search-results result__tags-tag\">{{ tag }}</button>\n                                        {{ /if }}\n                                      {{ /if }}\n                                    {{ /each }}\n                                  {{ /if }}\n                                </div>\n                              {{ /if }}\n                              {{ @if (result.source) }}\n                                <div class=\"sc-nano-global-search-results result__source\">Source: {{ result.source }}</div>\n                              {{ /if }}\n                            </div>\n                          {{ /if }}\n                        </div>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                </script>\n\n                <div slot=\"start-output\"></div>\n                <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n                  <div class=\"sc-nano-global-search-results filters-wrap\">\n                    {{ @if(it.totalHits) }}\n                      <div class=\"sc-nano-global-search-results filters-header\">\n                        <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n                        <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n                        <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n                          <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      <input class=\"sc-nano-global-search-results filter-cb old-posts filters__old-posts\" type=\"checkbox\" name=\"old-posts\" id=\"old-posts\" value=\"nice\" />\n                      <label class=\"sc-nano-global-search-results filter-label\" for=\"old-posts\">\n                        <span>Include posts older than 2 years</span>\n                      </label>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Type</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n                                <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Channels</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Authors</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Category</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                  <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n                                  <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Tags</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter | lowercase }}\" id=\"tags-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`}\n          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-e4e41e06.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,h as e,i as n,c as s,a as i,g as o}from"./p-1fe12320.js";import{b as a,g as r,c as l}from"./p-845ae77e.js";import{d as c}from"./p-167b9165.js";import{g as h}from"./p-45abbbdd.js";import{g as d}from"./p-74a7fc4f.js";import{c as u}from"./p-7b3638b7.js";import{d as p,a as f}from"./p-9746b0a5.js";import{F as b,a as v}from"./p-77cad8d1.js";const m=class{constructor(e){t(this,e);this.myAccountUser=null;this.userProfileUrl=""}render(){return e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`./assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),e("div",{class:"user-details"},e("span",{class:"name"},this.myAccountUser.name),e("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),e("div",{class:"right"},e("div",{class:"chevron-right"},e("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}static get assetsDirs(){return["assets"]}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline-start:var(--padding-start);padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline-end:var(--padding-end);padding-inline-start:0}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline-start:0;padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block-start:calc(var(--padding-top) / 2);padding-inline-end:0;padding-block-end:calc(var(--padding-bottom) / 2);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{padding-inline-end:var(--padding-end);padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(e){t(this,e);this.nanoClose=s(this,"nanoClose",7);this.nanoOpen=s(this,"nanoOpen",7);this.nanoOpening=s(this,"nanoOpening",7);this.nanoClosing=s(this,"nanoClosing",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.closeSecondary=async()=>{this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return;this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});const t=await c(this.secondaryDiv,"open",false);this.didOpen=t!=="hidden"};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return;this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});const t=await c(this.secondaryDiv,"open",true);this.didOpen=t==="shown"};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;const e=t.target.closest("a, button");if(!e)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(a(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary();else this.el.querySelector("*")?.click()};this.blur=t=>{if(!this.didOpen||this.animating)return;if(!this.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===this.el||t.relatedTarget===this.btn){this.secondaryDiv.focus({preventScroll:true});return}}if(this.foundThisNavEle(t.relatedTarget))return;this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur);window.removeEventListener("blur",this.blur);this.didBlur=true;this.open=false;if(!t.relatedTarget)setTimeout((()=>{this.el.focus({preventScroll:true})}),50)};this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((()=>{if(!this.fromHover&&!this.didBlur)this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){const t=new window.IntersectionObserver((e=>{if(e[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const e=h(this.secondaryDiv,true);if(e[0])e[0].focus();this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}foundThisNavEle(t){let e=t.closest("nano-nav-item");e=e===t?t.parentElement.closest("nano-nav-item"):e;if(!e)return false;if(e===this.el)return true;return this.foundThisNavEle(e)}componentWillLoad(){const t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;const e=r(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabindex:"-1"},e("div",{class:"secondary-menu-content"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const y='.sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-select{padding-block:0;padding-inline-end:0;padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;margin-inline-end:5px;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;margin-inline-end:0;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;padding-inline-start:var(--padding-start);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let w=0;const x=class{constructor(e){t(this,e);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.nanoDidLoad=s(this,"nanoDidLoad",7);this.nanoDidUnload=s(this,"nanoDidUnload",7);this.nanoSearchChange=s(this,"nanoSearchChange",7);this.nanoValidate=s(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${w++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError)return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)t.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(t)))};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((e=>e!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:i}=t;return{value:e,selected:n,label:s,filterMeta:i}}));this.customValidate()};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let e;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)e=this.inputCtrl.previousElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)e=this.inputCtrl.nextElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const e=new window.Event("change");this.inputCtrl.dispatchEvent(e)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{const e=t.target;this.dragVal=e.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{const e=t.target;const n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||this.dragVal===n||!this.value.includes(this.dragVal)){t.preventDefault();return}const s=this.value.indexOf(n);const i=this.value.indexOf(this.dragVal);const o=this.value;const a=o[s];o[s]=o[i];o[i]=a;this.value=[...o]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=p(this.showInlineValidation,50)}get inputCtrl(){return this._inputCtrl}set inputCtrl(t){if(t===this._inputCtrl)return;this._inputCtrl=t;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:i}=t;return{value:e,selected:n,label:s,filterMeta:i}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=f(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...t,...this.dropDownConfig,tetherTo:this.selectWrap}}async reportValidity(t){return new Promise((e=>{if(t){this.customValidate();this.showInlineValidation()}setTimeout((()=>{e({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.customError=t;this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((e=>e.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(t){const e=this.options.find((e=>!e.disabled&&e.value?.length&&e.value===t));return e&&e.label?e.label:t}onReset(t){const e=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!e||t.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(t){if(!this.hasFocus)return;const e=t;let n;requestAnimationFrame((()=>{if(e.key){if(e.key!=="Tab")return;n=d()}else n=t.target;if(l(this.el.tagName.toLowerCase(),n)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const s=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const o=(({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const a={...o,labelId:t,moreId:n,helperEndId:s,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId};const r=(({readonly:t,disabled:e})=>({readonly:t,disabled:e,clearControl:this.clearSelect}))(this);return e(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...u(this.color),"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask}},e(b,{...a},e(v,{...r,onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))},this.multiple&&e("div",{class:"select__multi-wrap select"},this.multipleValues(t,n,s)),!this.multiple&&[this.mask&&e("div",{class:"select__mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"select__native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n,s){const i=e("input",{class:"select__multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n+" "+s});if(!this.value.length)return i;return this.value.map(((t,n)=>{let s=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"select__multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)s=[i,s];else if(n===this.currInsertIndex)s=[s,i];return s}))}get el(){return o(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=y;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
-//# sourceMappingURL=p-e4e41e06.entry.js.map

package/dist/nano-components/p-e4e41e06.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/global-nav/global-nav-user-profile.tsx","src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["GlobalNavUserProfile","[object Object]","h","href","this","userProfileUrl","class","src","myAccountUser","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","aria-label","navItemCss","NavItem","hasSecondarySlot","hasAnchorEle","didBlur","animating","closeSecondary","async","open","didOpen","nanoClosing","emit","secondaryMenu","secondaryDiv","status","displayTransition","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","querySelector","blur","closeOnBlur","relatedTarget","focus","preventScroll","foundThisNavEle","removeEventListener","tabIndex","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","addEventListener","nanoOpen","found","parentElement","secondaryEle","link","getDirectChildren","isInGlobalNav","isInMenuDrawer","isInMenu","Host","has-secondary","secondary-open","selected","has-focus","disabled","nano-global-nav","nano-menu-drawer","nano-menu","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","notification","div","tabindex","selectCss","selectIds","Select","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","e","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","inputCtrl","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","_datalist","validityMessage","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","dropDownConfig","tetherTo","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","form","document","kev","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","getLabel","id","aria-labelledby","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":";;;qWAgBaA,EAAoB,kDAIQ,yBAKN,GAIjCC,SACE,OACEC,EAAA,IAAA,CAAGC,KAAMC,KAAKC,eAAgBC,MAAM,gBAClCJ,EAAA,MAAA,CAAKI,MAAM,QACTJ,EAAA,MAAA,CAAKI,MAAM,oBACTJ,EAAA,MAAA,CACEI,MAAM,SACNC,IAAKH,KAAKI,cAAcC,iBACxBC,IAAI,cACJC,OAAQ,GACRC,MAAO,KAERR,KAAKI,cAAcK,kBAClBX,EAAA,MAAA,CACEI,MAAM,aACNC,IAAKO,EAAa,gCAClBJ,IAAI,mBAKVR,EAAA,MAAA,CAAKI,MAAM,gBACTJ,EAAA,OAAA,CAAMI,MAAM,QAAQF,KAAKI,cAAcO,MAEvCb,EAAA,OAAA,CAAMI,MAAM,OACTF,KAAKI,cAAcQ,UAAS,OAAMZ,KAAKI,cAAcS,WAK5Df,EAAA,MAAA,CAAKI,MAAM,SACTJ,EAAA,MAAA,CAAKI,MAAM,iBACTJ,EAAA,YAAA,CACEgB,KAAK,WACLH,KAAK,sBAAqBI,aACf,kEChEzB,MAAMC,EAAa,25SC6BNC,EAAO,iQACVjB,KAAAkB,iBAA4B,MAC5BlB,KAAAmB,aAAwB,MAGxBnB,KAAAoB,QAAmB,MAEnBpB,KAAAqB,UAAqB,MA8JrBrB,KAAAsB,eAAiBC,UACvBvB,KAAKwB,KAAO,MACZ,IAAKxB,KAAKkB,mBAAqBlB,KAAKyB,QAAS,OAE7CzB,KAAK0B,YAAYC,KAAK,CAAEC,cAAe5B,KAAK6B,eAC5C,MAAMC,QAAeC,EAAkB/B,KAAK6B,aAAc,OAAQ,OAClE7B,KAAKyB,QAAUK,IAAW,UAGpB9B,KAAAgC,cAAgBT,UACtB,GAAIU,OAAOC,WAAalC,KAAKmC,qBAAsB,CACjDnC,KAAKoC,kBAAkBC,KAAKrC,MAC5B,OAEFA,KAAKwB,KAAO,KACZ,IAAKxB,KAAKkB,kBAAoBlB,KAAKyB,QAAS,OAE5CzB,KAAKsC,YAAYX,KAAK,CAAEC,cAAe5B,KAAK6B,eAC5C,MAAMC,QAAeC,EAAkB/B,KAAK6B,aAAc,OAAQ,MAClE7B,KAAKyB,QAAUK,IAAW,SAGpB9B,KAAAuC,gBAAkB,KACxB,IAAKvC,KAAKkB,iBAAkB,OAC5B,GAAIlB,KAAKyB,QAASzB,KAAKsB,sBAClBtB,KAAKgC,iBAGJhC,KAAAwC,YAAc,KACpBxC,KAAKyC,SAAW,KAEhB,GAAIzC,KAAKD,OAASC,KAAKqB,WAAarB,KAAKkB,iBACvClB,KAAKgC,gBACPhC,KAAK0C,UAAUf,QAGT3B,KAAA2C,eAAiB,KACvB,GAAI3C,KAAKqB,UAAW,OAIpBrB,KAAK4C,GAAGC,gBAAgB,YACxB7C,KAAKyC,SAAW,MAChBzC,KAAK8C,SAASnB,QAIR3B,KAAA+C,gBAAmBC,IACzB,IAAKhD,KAAKmB,aAAc,OACxB,MAAM8B,EAAaD,EAAGE,OAAuBC,QAAQ,aACrD,IAAKF,EAAWjD,KAAKoD,IAAIC,SAInBrD,KAAAsD,iBAAmB/B,UACzB,IACGvB,KAAKD,MACNC,KAAKqB,YACJrB,KAAKkB,kBACLlB,KAAKuD,eAAiBvD,KAAKuD,aAAaC,UAAUC,SAAS,SAE5D,OAIF,IAAIC,EAAa,EACjB,GAAIC,EAAY3D,KAAK4C,GAAI,iCAAiCgB,OACxDF,EAAa,IAEfG,aAAa7D,KAAK8D,UAClB9D,KAAK+D,UAAY,KACjB/D,KAAKqB,UAAY,KACjBrB,KAAKgE,SAAW/B,OAAOgC,YACrB1C,eAAkBvB,KAAKgC,iBACvB0B,GAEF1D,KAAKqB,UAAY,OAIXrB,KAAAkE,iBAAmB,KACzB,IAAKlE,KAAKD,KAAM,OAChB8D,aAAa7D,KAAKgE,UAClBhE,KAAK+D,UAAY,KACjB/D,KAAKqB,UAAY,KAGjBrB,KAAK8D,SAAW7B,OAAOgC,YACrB1C,eAAkBvB,KAAKsB,kBACvB,KAEFtB,KAAKqB,UAAY,OAGXrB,KAAAmE,YAAc,KACpBnE,KAAK+D,UAAY,MACjB,GAAI/D,KAAKkB,iBAAkBlB,KAAKuC,uBAC3BvC,KAAK4C,GAAGwB,cAA2B,MAAMf,SAaxCrD,KAAAqE,KAAQrB,IACd,IAAKhD,KAAKyB,SAAWzB,KAAKqB,UAAW,OACrC,IAAKrB,KAAKsE,YAAa,OAGvB,GAAItB,GAAMA,EAAGuB,cAAe,CAC1B,GAAIvB,EAAGuB,gBAAkBvE,KAAK4C,IAAMI,EAAGuB,gBAAkBvE,KAAKoD,IAAK,CACjEpD,KAAK6B,aAAa2C,MAAM,CAAEC,cAAe,OACzC,QAGJ,GAAIzE,KAAK0E,gBAAgB1B,EAAGuB,eAA+B,OAE3DvE,KAAKoD,IAAIuB,oBAAoB,WAAY3E,KAAKqE,MAC9CrE,KAAK6B,aAAa8C,oBAAoB,WAAY3E,KAAKqE,MACvDpC,OAAO0C,oBAAoB,OAAQ3E,KAAKqE,MAExCrE,KAAKoB,QAAU,KAEfpB,KAAKwB,KAAO,MACZ,IAAKwB,EAAGuB,cACNN,YAAW,KACTjE,KAAK4C,GAAG4B,MAAM,CAAEC,cAAe,SAC9B,kBA9RqB,yBACM,0BACC,oBACN,oBACA,gBAMW,iBAKkB,sBAK9B,gBAK4B,oBAKX,gCAKN,yBAKX,wBAKG,uBAKC,MAqChC5E,iBACE,IAAKG,KAAKoD,IAAK,OACfpD,KAAKoD,IAAIoB,QAOX3E,aACEG,KAAKwB,KAAOxB,KAAKgC,gBAAkBhC,KAAKsB,iBAO1CzB,gBACE,IAAKG,KAAKkB,iBAAkB,OAE5B,IAAKlB,KAAKyB,QAAS,CAGjB,IAAKzB,KAAK+D,UAAW,CACnB/D,KAAKoD,IAAIuB,oBAAoB,WAAY3E,KAAKqE,MAC9CrE,KAAK6B,aAAa8C,oBAAoB,WAAY3E,KAAKqE,MAEzDJ,YAAW,KACT,IAAKjE,KAAK+D,YAAc/D,KAAKoB,QAC3BpB,KAAKoD,IAAIoB,MAAM,CAAEC,cAAe,OAClCzE,KAAK4C,GAAGgC,SAAW,KACnB5E,KAAK6E,UAAUlD,KAAK,CAAEC,cAAe5B,KAAK6B,iBACzC,QACE,CACL7B,KAAKoB,QAAU,MAIf,IAAKpB,KAAK+D,UAAW,CACnB,MAAMe,EAAU,IAAK7C,OAAe8C,sBACjCC,IACC,GAAIA,EAAK,GAAGC,mBAAmBC,IAAM,EAAG,CACtClF,KAAK6B,aAAasD,eAAe,CAC/BC,SAAU,WAGdN,EAAQO,eAEV,CAAEC,UAAW,IAEfR,EAAQS,QAAQvF,KAAK6B,cACrB7B,KAAK6B,aAAa2C,MAAM,CAAEC,cAAe,OAEzC,MAAMe,EAAiBC,EAAoBzF,KAAK6B,aAAc,MAC9D,GAAI2D,EAAe,GAAIA,EAAe,GAAGhB,QAEzCxE,KAAKoD,IAAIsC,iBAAiB,WAAY1F,KAAKqE,MAC3CrE,KAAK6B,aAAa6D,iBAAiB,WAAY1F,KAAKqE,MACpDpC,OAAOyD,iBAAiB,OAAQ1F,KAAKqE,MAErCrE,KAAK4C,GAAGgC,UAAY,EACpB5E,KAAK2F,SAAShE,KAAK,CAAEC,cAAe5B,KAAK6B,iBA0GvChC,gBAAgB+C,GACtB,IAAIgD,EAAQhD,EAAGO,QAAQ,iBACvByC,EAAQA,IAAUhD,EAAKA,EAAGiD,cAAc1C,QAAQ,iBAAmByC,EAEnE,IAAKA,EAAO,OAAO,MACnB,GAAIA,IAAU5F,KAAK4C,GAAI,OAAO,KAC9B,OAAO5C,KAAK0E,gBAAgBkB,GA6B9B/F,oBACE,MAAMiG,EAAe9F,KAAK4C,GAAGwB,cAAc,sBAC3CpE,KAAKkB,mBAAqB4E,EAE1B,MAAMC,EAAOC,EAAkBhG,KAAK4C,GAAI,aAAa,GAGrD5C,KAAKmB,eAAiB4E,EAEtB,GAAIA,EAAM,CACR/F,KAAKD,KAAQgG,EAA2BhG,KACnCgG,EAA2BhG,KAC5B,KACJC,KAAKoD,IAAM2C,EACX,GAAI/F,KAAKkB,iBACPlB,KAAKoD,IAAIsC,iBAAiB,QAAS1F,KAAKuC,iBAE1CvC,KAAKoD,IAAIsC,iBAAiB,QAAS1F,KAAKwC,aACxCxC,KAAKoD,IAAIsC,iBAAiB,OAAQ1F,KAAK2C,iBAI3C9C,oBACEG,KAAKiG,cAAgB,MACrBjG,KAAKkG,eAAiB,MACtBlG,KAAKuD,aAAevD,KAAK4C,GAAGO,QAAQ,mBAEpCnD,KAAKkG,iBAAmBlG,KAAK4C,GAAGO,QAAQ,oBACxCnD,KAAKmG,WAAanG,KAAK4C,GAAGO,QAAQ,aAClCnD,KAAKiG,cACHjG,KAAK4C,GAAGiD,gBAAkB7F,KAAKuD,gBAC7BvD,KAAK4C,GAAGO,QAAQ,eAGtBtD,SACE,OACEC,EAACsG,EAAI,CACHlG,MAAO,CACLmG,gBAAiBrG,KAAKkB,iBACtBoF,iBAAkBtG,KAAKwB,KACvB+E,SAAUvG,KAAKuG,SACfC,YAAaxG,KAAKyC,SAClBgE,SAAUzG,KAAKyG,SACfC,kBAAmB1G,KAAKiG,cACxBU,mBAAoB3G,KAAKkG,eACzBU,YAAa5G,KAAKmG,UAEpBU,OAAQ7G,KAAK2C,eACbmE,IAAM9G,KAAK4C,GAAGmE,cAA2BD,MAAQ,MAAQ,MAAQ,KACjEE,aAAchH,KAAKsD,iBACnB2D,aAAcjH,KAAKkE,iBACnBgD,QAASlH,KAAK+C,gBACdoE,KAAK,YAELrH,EAAA,MAAA,CACEI,MAAO,CACLkH,WAAY,KACZd,iBAAkBtG,KAAKwB,KACvB+E,SAAUvG,KAAKuG,WAGhBvG,KAAKD,OAASC,KAAKmB,eAAiBnB,KAAKyG,UACxC3G,EAAA,IAAA,CACEoD,OAAQlD,KAAKkD,OACbmE,IAAMC,GAAOtH,KAAKoD,IAAMkE,EACxBvH,KAAMC,KAAKD,KACXwH,QAASvH,KAAKwC,YACdtC,MAAO,CACLsH,aAAcxH,KAAKwH,eAGrB1H,EAAA,OAAA,CAAMa,KAAK,eACXb,EAAA,OAAA,CAAMI,MAAM,QACVJ,EAAA,OAAA,OAEFA,EAAA,OAAA,CAAMa,KAAK,gBAGXX,KAAKmB,eAAiBnB,KAAKD,MAASC,KAAKyG,WAC3C3G,EAAA,SAAA,CACEuH,IAAMjE,GAASpD,KAAKoD,IAAMA,EAC1B8D,QAASlH,KAAKmE,YACdoD,QAASvH,KAAKwC,YACdiE,SAAUzG,KAAKyG,SACfvG,MAAO,CACLsH,aAAcxH,KAAKwH,eAGrB1H,EAAA,OAAA,CAAMa,KAAK,eACXb,EAAA,OAAA,CAAMI,MAAM,QACVJ,EAAA,OAAA,OAEFA,EAAA,OAAA,CAAMa,KAAK,cAGdX,KAAKmB,eAAiBnB,KAAKyG,UAC1B3G,EAAA,MAAA,CAAKI,MAAM,QACTJ,EAAA,OAAA,CAAMa,KAAK,eACXb,EAAA,OAAA,MACAA,EAAA,OAAA,CAAMa,KAAK,cAGdX,KAAKkB,mBAAqBlB,KAAKyG,UAC9B3G,EAAA,MAAA,CACEI,MAAM,iBACNmH,IAAMI,GAASzH,KAAK6B,aAAe4F,EACnCC,SAAS,MAET5H,EAAA,MAAA,CAAKI,MAAM,0BACTJ,EAAA,OAAA,CAAMa,KAAK,eAEbb,EAAA,MAAA,CACEI,MAAM,sBACNgH,QAASlH,KAAKsB,oIC3b9B,MAAMqG,EAAY,0/iBCgClB,IAAIC,EAAY,QAuBHC,EAAM,MA0CjBhI,YAAAiI,gTAxCQ9H,KAAA+H,WAAqC,GAGrC/H,KAAAgI,SAAW,eAAeJ,MAC1B5H,KAAAiI,IAAe,MACfjI,KAAAkI,OAAkB,KAClBlI,KAAAmI,YAAsB,GAgLtBnI,KAAAoI,OAAiCpI,KAAKqI,SAAW,GAAK,GAyBtDrI,KAAAsI,SAA8B,GAwL9BtI,KAAAuI,eAAiB,KACvB,IAAKvI,KAAKwI,gBAAkBxI,KAAKmI,YAAa,OAE9CnI,KAAKwI,aAAaC,kBAAkB,IAEpC,GAAIzI,KAAK0I,WAAa1I,KAAK2I,SAAS/E,OAAQ,CAC1C5D,KAAKwI,aAAaC,kBAAkB,8BACpC,OAAO,KAET,GACEzI,KAAK2I,SAAS/E,SACb5D,KAAK4I,oBACL5I,KAAK6I,gBACN,CACA7I,KAAKwI,aAAaC,kBAChB,0CAEF,OAAO,KAET,GAAIzI,KAAK8I,KAAO9I,KAAK2I,SAAS/E,OAAS5D,KAAK8I,IAAK,CAC/C9I,KAAKwI,aAAaC,kBAChB,cAAczI,KAAK8I,2BAErB,OAAO,KAET,GAAI9I,KAAK+I,KAAO/I,KAAK2I,SAAS/E,OAAS5D,KAAK+I,IAAK,CAC/C/I,KAAKwI,aAAaC,kBAChB,gCAAgCzI,KAAK+I,eAEvC,OAAO,KAET,OAAO,OAGD/I,KAAAgJ,qBAAwBhG,IAC9B,GAAIhD,KAAKiJ,aAAe,kBAAmBjJ,KAAKiJ,WAAa,QAE7DjJ,KAAKkJ,SAAW,MAChBlJ,KAAKmJ,aAAe,MACpBnJ,KAAKoJ,aAAe,GAEpB,IAAKpJ,KAAKwI,aAAaa,SAASC,MAAO,CACrCtJ,KAAKoJ,aAAepJ,KAAKwI,aAAae,kBACtCvJ,KAAKkJ,SAAW,KAChBlJ,KAAKmJ,aAAe,KAEtBnJ,KAAKwJ,aAAa7H,KAAK,CACrB8H,SAAUzJ,KAAK0J,QACfN,aAAcpJ,KAAKoJ,aACnBO,cAAe3G,KAIXhD,KAAA4J,cAAiB5G,IACvBhD,KAAKkJ,SAAW,KAEhB,GAAIlJ,KAAKiJ,aAAe,SAAU,CAChCjJ,KAAKkJ,SAAWlJ,KAAKmJ,aAAenJ,KAAKuI,iBAE3C,GAAIvI,KAAK6J,gBAAiB7G,EAAG8G,iBAE7BC,uBAAsB,IAAM/J,KAAKgJ,qBAAqBhG,MAGhDhD,KAAAgK,SAAYC,IAClBA,EAAEH,iBAEF,IAAK9J,KAAKqI,SAAU,CAClBrI,KAAKkK,MAAQD,EAAEE,OAAOD,MACtB,OAEF,GAAIlK,KAAKkK,OAASlK,KAAKkK,MAAMtG,QAAU5D,KAAKkK,MAAME,SAASH,EAAEE,OAAOD,OAClE,OACF,GAAIlK,KAAK8I,KAAO9I,KAAKkK,MAAMtG,SAAW5D,KAAK8I,IAAK,OAEhD9I,KAAKqK,kBACLrK,KAAKkK,MAAQ,IACRlK,KAAKkK,MAAMI,MAAM,EAAGtK,KAAKqK,iBAC5BJ,EAAEE,OAAOD,SACNlK,KAAKkK,MAAMI,MAAMtK,KAAKqK,kBAE3BrK,KAAKuK,eAAiB,IAIhBvK,KAAAwK,YAAeC,IACrB,IAAKzK,KAAKqI,WAAarI,KAAKkK,MAAMtG,OAAQ,OAE1C,IAAK6G,EAAQA,EAASzK,KAAKkK,MAAMlK,KAAKkK,MAAMtG,OAAS,GACrD5D,KAAKkK,MAASlK,KAAKkK,MAAwBQ,QAAQC,GAAQA,IAAQF,IAEnEzK,KAAKqK,kBAELrK,KAAK4K,YAwDC5K,KAAA6K,WAAa,KACnB,IACG7K,KAAK8K,WACL9K,KAAK8K,SAASC,gBACd/K,KAAK8K,SAASC,cAAcnH,OAE7B,OAEF5D,KAAKgL,UAAYhL,KAAK8K,SAASC,cAAcE,KAAKC,IAChD,MAAMhB,MAAEA,EAAK3D,SAAEA,EAAQ4E,MAAEA,EAAKC,WAAEA,GAAeF,EAC/C,MAAO,CAAEhB,MAAAA,EAAO3D,SAAAA,EAAU4E,MAAAA,EAAOC,WAAAA,MAEnCpL,KAAKuI,kBAGCvI,KAAAqL,sBAAyBrI,IAC/B,IAAKhD,KAAKqI,WAAarI,KAAKyC,SAAU,OAEtC,IAAKzC,KAAKuK,eAAgB,CACxB,IAAIe,EAEJ,OAAQtI,EAAGuI,KACT,IAAK,YACH,GAAIvL,KAAKwL,UAAUC,uBACjBH,EAAKtL,KAAKwL,UAAUC,4BACjB,MAELzL,KAAKwK,YAAYc,EAAGI,QAAQxB,OAAS,MACrC,MAEF,IAAK,SACH,GAAIlK,KAAKwL,UAAUG,mBACjBL,EAAKtL,KAAKwL,UAAUG,wBACjB,MAEL3L,KAAKwK,YAAYc,EAAGI,QAAQxB,OAAS,MACrC,MAEF,IAAK,YACL,IAAK,aACH,IAAKlK,KAAKkK,MAAMtG,OAAQ,MAExB,GAAIZ,EAAGuI,MAAQ,aAAevL,KAAKwL,UAAUI,gBAC3C5L,KAAKqK,kBACP,GAAIrH,EAAGuI,MAAQ,cAAgBvL,KAAKwL,UAAUK,YAC5C7L,KAAKqK,kBAEPpG,YAAW,KACTjE,KAAKwL,UAAUhH,UACd,IACHxB,EAAG8G,iBACH,SAKA9J,KAAA6G,OAAS,KACf7G,KAAKyC,SAAW,MAEhBsH,uBAAsB,KACpB,GAAI/J,KAAKiJ,aAAe,UAAYjJ,KAAKyC,SACvCzC,KAAKgJ,0BAEThJ,KAAK8C,SAASnB,OAEd,IAAK3B,KAAK4I,mBAAqB5I,KAAKqI,SAAU,CAC5CrI,KAAKuK,eAAiB,GACtB,MAAMuB,EAAQ,IAAI7J,OAAO8J,MAAM,UAC/B/L,KAAKwL,UAAUQ,cAAcF,KAIzB9L,KAAAuH,QAAU,KAChBvH,KAAKyC,SAAW,KAChBzC,KAAK0C,UAAUf,QAGT3B,KAAAiM,iBAAoBjJ,IAC1B,GAAIhD,KAAKkM,cAAgBlM,KAAKmM,WAAanM,KAAKyG,UAAYzD,EAAI,CAC9DA,EAAG8G,iBACH9G,EAAGoJ,kBAGL,GAAIpM,KAAKqI,SAAU,CACjBrI,KAAKkK,MAAQ,GACblK,KAAKqK,iBAAmB,OACnBrK,KAAKkK,MAAQ,GAEpBlK,KAAKwL,UAAUtB,MAAQ,GACvB,MAAM4B,EAAQ,IAAI7J,OAAO8J,MAAM,UAC/B/L,KAAKwL,UAAUQ,cAAcF,IAGvB9L,KAAAkH,QAAU,KAChBlH,KAAK4K,YAKC5K,KAAAqM,YAAerJ,IACrB,MAAMsJ,EAAMtJ,EAAGE,OACflD,KAAKuM,QAAUD,EAAIZ,QAAQxB,OAGrBlK,KAAAwM,UAAaxJ,IACnBhD,KAAKuM,QAAU,KACfvJ,EAAG8G,kBAGG9J,KAAAyM,YAAezJ,IACrB,MAAMsJ,EAAMtJ,EAAGE,OACf,MAAMwJ,EACJJ,EAAIZ,SAAWY,EAAIZ,QAAQxB,MAAQoC,EAAIZ,QAAQxB,MAAQ,KAEzD,IACGwC,GACD1M,KAAKuM,UAAYG,IAChB1M,KAAKkK,MAAME,SAASpK,KAAKuM,SAC1B,CACAvJ,EAAG8G,iBACH,OAGF,MAAM6C,EAAK3M,KAAKkK,MAAM0C,QAAQF,GAC9B,MAAMG,EAAO7M,KAAKkK,MAAM0C,QAAQ5M,KAAKuM,SACrC,MAAMO,EAAS9M,KAAKkK,MACpB,MAAM6C,EAASD,EAAOH,GAEtBG,EAAOH,GAAMG,EAAOD,GACpBC,EAAOD,GAAQE,EACf/M,KAAKkK,MAAQ,IAAI4C,IAGX9M,KAAAgN,aAAgBhK,IACtBhD,KAAKuK,eAAiBvH,EAAGE,OAAOgH,MAAM+C,OACtCjN,KAAKkN,iBAAiBvL,KAAK,CAAEuI,MAAOlH,EAAGE,OAAOgH,MAAM+C,gCAvnBlB,oBACZ,wBACQ,iBACZ,wBACa,yBACC,4BACN,0BACM,iBAYd,0CAoBA,oBAKgB,sBAMlC,uCAKyC,yCAUb,sBAKA,oBAKD,gBAKNjN,KAAKgI,SAAW,iDAUH,oBAKjB,2GAyBkB,qBA4CG,oBAKlB,gBAMP,oBAKI,sBAwC2C,GA/N5DhI,KAAKgJ,qBAAuBmE,EAASnN,KAAKgJ,qBAAsB,IAjClEwC,gBACE,OAAOxL,KAAKoN,WAEd5B,cAAsB6B,GACpB,GAAIA,IAAUrN,KAAKoN,WAAY,OAC/BpN,KAAKoN,WAAaC,EAClBrN,KAAKsN,kBAOPC,iBACE,OAAOvN,KAAKwN,YAEdD,eAAuBjB,GACrB,GAAItM,KAAKwN,cAAgBlB,EAAK,OAC9BtM,KAAKwN,YAAclB,EACnBtM,KAAKsN,kBAIPxC,eACE,OAAO9K,KAAKyN,UAEd3C,aAAqBwB,GACnB,GAAItM,KAAKyN,YAAcnB,EAAK,OAC5BtM,KAAKyN,UAAYnB,EACjBtM,KAAKsN,kBAsBP5D,cAEE,OAAO1J,KAAKkJ,SAOdwE,sBAEE,IAAK1N,KAAKwI,aAAc,MAAO,GAC/B,OAAOxI,KAAKwI,aAAae,kBAkG3BW,YAEE,OAAOlK,KAAKoI,OAEd8B,UAAUS,GACR,UAAWA,IAAQ,SAAU,CAC3B,GAAI3K,KAAKqI,SAAUrI,KAAKoI,OAASuC,EAAIgD,MAAM,UACtC3N,KAAKoI,OAASuC,OACd,GAAIiD,MAAMC,QAAQlD,GAAM,CAC7B,GAAI3K,KAAKqI,SAAUrI,KAAKoI,OAASuC,OAC5B3K,KAAKoI,OAASuC,EAAI,IAW3BmD,cAEE,GAAI9N,KAAKsI,SAAS1E,OAAQ,OAAO5D,KAAKsI,SAEtC,IAAKtI,KAAK8K,WAAa9K,KAAK8K,SAASC,cAAe,MAAO,GAE3D,OAAO/K,KAAKgL,UAAUC,KAAKC,IACzB,MAAMhB,MAAEA,EAAK3D,SAAEA,EAAQ4E,MAAEA,EAAKC,WAAEA,GAAeF,EAC/C,MAAO,CAAEhB,MAAAA,EAAO3D,SAAAA,EAAU4E,MAAAA,EAAOC,WAAAA,MAGrC0C,YAAYC,GACV/N,KAAKsI,SAAWyF,EAAK9C,KAAK+C,IACxB,UAAWA,IAAQ,SAAU,MAAO,CAAE9D,MAAO8D,EAAK7C,MAAO6C,QACpD,OAAOA,KAuBNnO,kBACRG,KAAKkN,iBAAmBe,EAAcjO,KAAKkN,iBAAkBlN,KAAKmN,UAQ1DtN,iBACR,GAAIG,KAAKkI,OAAQ,OACjB,GAAIlI,KAAK0J,QAAS1J,KAAKmJ,aAAenJ,KAAKkJ,SAAW,MAEtDlJ,KAAKuI,iBACL,GAAIvI,KAAKiJ,aAAe,QAAS,OACjCjJ,KAAKgJ,uBAQPnJ,eACEG,KAAKuI,iBAEL,GAAIvI,KAAKkI,OAAQ,CACf,GAAIlI,KAAKqI,SAAUrI,KAAKqK,gBAAkBrK,KAAKkK,MAAMtG,OAAS,EAC9D,OAEFmG,uBAAsB,KACpB/J,KAAKkO,iBACLlO,KAAKmO,WAAWxM,KAAK,CAAEuI,MAAOlK,KAAKkK,WAQvCrK,kBACE,IAAKG,KAAK8K,WAAa9K,KAAKuN,WAAY,OAExCvN,KAAK8K,SAASuC,MAAQrN,KAAKwL,UAE3B,MAAM4C,EAAepO,KAAK8K,SAASuD,gBAAkB,GACrDrO,KAAK8K,SAASuD,eAAiB,IAC1BD,KACApO,KAAKqO,eACRC,SAAUtO,KAAKuN,YAoDnB1N,qBAAqB0O,GACnB,OAAO,IAAIC,SAASC,IAClB,GAAIF,EAAe,CACjBvO,KAAKuI,iBACLvI,KAAKgJ,uBAEP/E,YAAW,KACTwK,EAAQ,CACNhF,SAAUzJ,KAAKkJ,SACfE,aAAcpJ,KAAKwI,aAAae,sBAEjC,OASP1J,iBACE,IAAKG,KAAKwL,UAAW,OACrBxL,KAAKwL,UAAUhH,QACfP,YAAW,IAAMjE,KAAKwL,UAAUnI,SAAS,IAO3CxD,mBACE,OAAO2O,QAAQC,QAAQzO,KAAKwI,cAQ9B3I,gBAAgB6O,GACd,GAAI1O,KAAKwI,aAAc,CACrBxI,KAAKmI,YAAcuG,EACnB1O,KAAKwI,aAAaC,kBAAkBiG,GACpC1O,KAAKgJ,wBAMTL,eACE,cAAc3I,KAAKkK,QAAU,SACzBlK,KAAKkK,MAAMtG,OACT,CAAC5D,KAAKkK,OACN,GACFlK,KAAKkK,MAGHrK,gBACN,OAAOG,KAAK2I,SAASgG,MAAMhE,GACxB3K,KAAK8N,QAA8Ba,MAAMX,GAAQA,EAAI9D,QAAUS,MAoG5D9K,qBACN,MAAM+O,EAAM5O,KAAK4O,GAAK,IAAIC,kBAAiB,IACzC7O,KAAK8O,0BAEPF,EAAGrJ,QAAQvF,KAAK4C,GAAI,CAAEmM,UAAW,KAAMC,QAAS,OAG1CnP,wBAENG,KAAKiP,eAAiBjP,KAAK4C,GAAGsM,iBAAiB,kBAAkBtL,OACjE5D,KAAKmP,gBAAkBnP,KAAK4C,GAAGwB,cAAc,mBAC7CpE,KAAKoP,mBAAqBpP,KAAK4C,GAAGwB,cAAc,uBAG1CvE,SAAS4K,GACf,MAAMU,EAASnL,KAAK8N,QAA8Ba,MAAMX,IAC9CA,EAAIvH,UAAYuH,EAAI9D,OAAOtG,QAAUoK,EAAI9D,QAAUO,IAE7D,OAAOU,GAASA,EAAMA,MAAQA,EAAMA,MAAQV,EAM9C5K,QAAQoK,GACN,MAAMoF,EAAOrP,KAAKqP,KACdC,SAASlL,cAAc,IAAMpE,KAAKqP,MAClCrP,KAAK4C,GAAGO,QAAQ,QACpB,IAAKkM,GAAQpF,EAAE/G,SAAWlD,KAAK4C,GAAGO,QAAQ,QAAS,OAEnDnD,KAAKiM,mBAKPpM,WAAWoK,GACT,IAAKjK,KAAKyC,SAAU,OAEpB,MAAM8M,EAAMtF,EACZ,IAAI/G,EAEJ6G,uBAAsB,KACpB,GAAIwF,EAAIhE,IAAK,CACX,GAAIgE,EAAIhE,MAAQ,MAAO,OACvBrI,EAASsM,SACJtM,EAAS+G,EAAE/G,OAElB,GAAIuM,EAAezP,KAAK4C,GAAG8M,QAAQC,cAAezM,KAAYlD,KAAK4C,GAAI,CACrE5C,KAAK6G,aAiJXhH,oBACEG,KAAK4P,kBAIL5P,KAAK4C,GAAGoJ,cACN,IAAI6D,YAAY,cAAe,CAC7B1F,OAAQnK,KAAK4C,MAKnB/C,uBACEyP,SAAStD,cACP,IAAI6D,YAAY,gBAAiB,CAC/B1F,OAAQnK,KAAK4C,MAKjB,GAAI5C,KAAK4O,GAAI5O,KAAK4O,GAAGvJ,aAGvBxF,mBACEG,KAAK8P,qBACL9P,KAAKuI,iBACLvI,KAAKsN,kBACLvD,uBAAsB,IAAO/J,KAAKkI,OAAS,QAG7CrI,oBACEG,KAAK8O,wBAGPjP,SACE,MAAMkQ,EAAU/P,KAAKgI,SAAW,OAChC,MAAMgI,EACJhQ,KAAK6J,iBAAmB7J,KAAKmP,cACzBnP,KAAKgI,SAAW,UAChB,GACN,MAAMiI,EAAcjQ,KAAKoP,iBAAmBpP,KAAKgI,SAAW,UAAY,GAExEhI,KAAKiI,IAAOjI,KAAK4C,GAAGmE,cAA2BD,MAAQ,MACvD9G,KAAK+H,WAAa,GAElB,MAAMmI,EAAkB,GACtBtN,GAAAA,EACAuN,WAAAA,EACAhF,MAAAA,EACA/B,aAAAA,EACAS,gBAAAA,EACAsF,cAAAA,EACAC,iBAAAA,EACAH,aAAAA,EACAmB,UAAAA,EACAC,YAAAA,EACApI,IAAAA,MACD,CACCrF,GAAAA,EACAuN,WAAAA,EACAhF,MAAAA,EACA/B,aAAAA,EACAS,gBAAAA,EACAsF,cAAAA,EACAC,iBAAAA,EACAH,aAAAA,EACAmB,UAAAA,EACAC,YAAAA,EACApI,IAAAA,IAvBsB,CAwBpBjI,MACJ,MAAMsQ,EAAc,IACfJ,EACHH,QAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAM,WAAYvQ,KAAKkK,MAAMtG,UAAY5D,KAAKuK,eAAe3G,OACvD4M,UAAWxQ,KAAKgI,UAGlB,MAAMyI,EAAiB,GAAItE,SAAAA,EAAU1F,SAAAA,MAAU,CAC7C0F,SAAAA,EACA1F,SAAAA,EACAiK,aAAc1Q,KAAKkM,cAHE,CAInBlM,MAEJ,OACEF,EAACsG,EAAI,CACHuK,KAAM3Q,KAAKqI,SAAW,kBAAoB,aAAYuI,gBACvC5Q,KAAKyG,SAAW,OAAS,KACxCvG,MAAO,IACF2Q,EAAmB7Q,KAAK8Q,OAC3BC,cAAe/Q,KAAKkK,MAAMtG,UAAY5D,KAAKuK,eAAe3G,OAC1D4C,YAAaxG,KAAKyC,SAClBuO,aAAchR,KAAK0J,QACnBuH,YAAajR,KAAKmL,QAAU,OAASnL,KAAKmQ,WAC1Ce,kBAAmBlR,KAAKmL,QAAU,MAAQnL,KAAKmQ,WAC/ClI,IAAKjI,KAAKiI,IACVkJ,eAAgBnR,KAAKqI,SACrB+I,cAAepR,KAAKkM,YACpBmF,OAAQrR,KAAKsR,OAGfxR,EAACyR,EAAe,IAAKjB,GACnBxQ,EAAC0R,EAAW,IACNf,EACJgB,YAAazR,KAAKiM,iBAClByF,QAAS1R,KAAK4C,GACdyE,IAAMzE,GAAQ5C,KAAKuN,WAAa3K,EAChC+O,aACE7R,EAAA,OAAA,CAAMa,KAAK,cACTb,EAAA,YAAA,CAAWgB,KAAK,YAAYH,KAAK,yBAIpCX,KAAKqI,UACJvI,EAAA,MAAA,CAAKI,MAAM,6BACRF,KAAK4R,eAAe7B,EAASC,EAAQC,KAGxCjQ,KAAKqI,UAAY,CACjBrI,KAAKsR,MACHxR,EAAA,MAAA,CAAKI,MAAM,gBACRF,KAAK6R,SAAS7R,KAAKkK,QAGxBpK,EAAA,QAAA,CACEgS,GAAI9R,KAAKgI,SACT9H,MAAM,uBACNmH,IAAMgG,GAAWrN,KAAKwL,UAAY6B,EAAM0E,kBACvBhC,EAAU,IAAMC,EAAS,IAAMC,EAChDxJ,SAAUzG,KAAKyG,SACf4I,KAAMrP,KAAKqP,KACXgB,YAAarQ,KAAKqQ,YAClB2B,SAAU,KACVtJ,SAAU1I,KAAK0I,SACfwB,MAAOlK,KAAK6R,SAAS7R,KAAKkK,OAC1B3C,QAASvH,KAAKuH,cAKpBvH,KAAKmM,WAAanM,KAAKyG,UACvB3G,EAAA,gBAAA,CACEmS,qBAAsBjS,KAAK6K,WAC3BxD,IAAMzE,GAAQ5C,KAAK8K,SAAWlI,EAC9B2D,SAAUvG,KAAK2I,SACfgI,KAAM3Q,KAAKqI,SAAW,aAAe,SACrC6J,aAAclS,KAAKgK,SACnBmI,eAAiBlI,IACfA,EAAEH,iBACF9J,KAAKwK,YAAYP,EAAEE,OAAOD,QAE5B4D,QAAS9N,KAAKsI,SAAS1E,OAAS5D,KAAKsI,SAAW8J,WAE/CpS,KAAK4I,mBAAqB5I,KAAKqI,YAAcrI,KAAKuK,gBACjDzK,EAAA,cAAA,CACEgB,KAAK,WACLoJ,MAAOlK,KAAKuK,eACZhE,SAAU,MACV4E,MAAOnL,KAAKuK,eACZ2H,aAAc,IAAMlS,KAAKwL,UAAUhH,SAEnC1E,EAAA,OAAA,CAAMgB,KAAK,eAAoB,QACzBd,KAAKuK,eAAc,KAG7BzK,EAAA,OAAA,OAIJA,EAAA,SAAA,CACEgS,GAAI9R,KAAKgI,SAAW,UACpB9H,MAAM,sBACNmH,IAAMgL,GAAYrS,KAAKwI,aAAe6J,EAAON,kBAC5BhC,EAAU,IAAMC,EAAS,IAAMC,EAChDxJ,SAAUzG,KAAKyG,SACf4I,KAAMrP,KAAKqP,KACXhH,SAAUrI,KAAKqI,SACf1H,KAAMX,KAAKW,KACX+H,SAAU1I,KAAK0I,SACf4J,UAAWtS,KAAK4J,eAEf5J,KAAK4I,mBACJ5I,KAAK2I,SAASsC,KAAKN,GAEf7K,EAAA,SAAA,CAAQoK,MAAOS,EAAKpE,SAAU,MAC3BoE,MAIP3K,KAAK4I,mBACL5I,KAAK8N,QAAQ7C,KAAK+C,GAEdlO,EAAA,SAAA,CACEoK,MAAO8D,EAAI9D,MACX3D,SAAUvG,KAAK2I,SAASyB,SAAS4D,EAAI9D,OACrCzD,SAAUuH,EAAIvH,SACd0E,MAAO6C,EAAI7C,OAEVnL,KAAK2I,SAASyB,SAAS4D,EAAI9D,YASpCrK,eACNkQ,EACAC,EACAC,GAEA,MAAM5C,EACJvN,EAAA,QAAA,CACEI,MAAM,sBACN4R,GAAI9R,KAAKgI,SACTX,IAAMgG,GAAWrN,KAAKwL,UAAY6B,EAClC2E,SAAUhS,KAAKmM,SACf1F,SAAUzG,KAAKyG,SACf8L,UAAWvS,KAAKwS,UAChBC,aAAa,MACbC,UAAW1S,KAAKqL,sBAChBsH,QAAS3S,KAAKgN,aACd9C,MAAOlK,KAAKuK,eACZqI,aAAc5S,KAAKkH,QACnB2L,YAAa7S,KAAKkH,QAClBK,QAASvH,KAAKuH,QACd8I,YACErQ,KAAKqQ,cAAgBrQ,KAAKkK,MAAMtG,OAAS5D,KAAKqQ,YAAc,GAAE0B,kBAE/ChC,EAAU,IAAMC,EAAS,IAAMC,IAGpD,IAAKjQ,KAAKkK,MAAMtG,OAAQ,OAAOyJ,EAE/B,OAAQrN,KAAKkK,MAAwBe,KAAI,CAACN,EAAKmI,KAC7C,IAAIC,EACFjT,EAAA,OAAA,CACEuM,YAAarM,KAAKqM,YAClBI,YAAazM,KAAKyM,YAClBD,UAAWxM,KAAKwM,UAChBwG,WAAa/I,GAAMA,EAAEH,iBACrBmJ,UAAS,KAAAC,aACGvI,EACZtD,IAAM8L,GAASnT,KAAK+H,WAAWqL,KAAKD,GACpCjT,MAAM,uBAENJ,EAAA,OAAA,KAAOE,KAAK6R,SAASlH,IACrB7K,EAAA,SAAA,CACEI,MAAM,6BACNyQ,KAAK,SACLjJ,SAAS,KACT2L,WAAY,KACVrT,KAAKwK,YAAYG,IAEnB2I,UAAW,KACTtT,KAAKwK,YAAYG,KAGnB7K,EAAA,YAAA,CAAWa,KAAK,kBAItB,GAAImS,IAAM,GAAK9S,KAAKqK,gBAAkB,EACpC0I,EAAW,CAAC1F,EAAO0F,QAChB,GAAID,IAAM9S,KAAKqK,gBAClB0I,EAAW,CAACA,EAAmB1F,GACjC,OAAO0F","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  getAssetPath,\n  ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n  tag: 'nano-global-nav-user-profile',\n  assetsDirs: ['assets'],\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n  /**\n   * Logged in user details automatically populated from MyAccount\n   */\n  @Prop() myAccountUser: MyAccountUser = null;\n\n  /**\n   * Link to the user profile\n   */\n  @Prop() userProfileUrl: string = '';\n\n  // Render output\n\n  render() {\n    return (\n      <a href={this.userProfileUrl} class=\"user-profile\">\n        <div class=\"left\">\n          <div class=\"avatar-container\">\n            <img\n              class=\"avatar\"\n              src={this.myAccountUser.small_avatar_url}\n              alt=\"User Avatar\"\n              height={75}\n              width={75}\n            />\n            {this.myAccountUser.is_nanopore_user && (\n              <img\n                class=\"logo-small\"\n                src={getAssetPath(`./assets/ont-wheel-light.svg`)}\n                alt=\"Nanopore Logo\"\n              />\n            )}\n          </div>\n\n          <div class=\"user-details\">\n            <span class=\"name\">{this.myAccountUser.name}</span>\n\n            <span class=\"bio\">\n              {this.myAccountUser.job_title} at {this.myAccountUser.company}\n            </span>\n          </div>\n        </div>\n\n        <div class=\"right\">\n          <div class=\"chevron-right\">\n            <nano-icon\n              slot=\"icon-end\"\n              name=\"light/chevron-right\"\n              aria-label=\"navigate to ...\"\n            ></nano-icon>\n          </div>\n        </div>\n      </a>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are automatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n  outline: none !important;\n\n  .nav-item,\n  .link {\n    outline: none !important;\n  }\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n    margin: 0;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-top) var(--padding-bottom);\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n    line-height: inherit;\n    outline: none !important;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline-end: var(--padding-end);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline-start: var(--padding-start);\n  }\n\n  .link {\n    ::slotted(nano-icon[slot='icon-start']) {\n      padding-inline-start: var(--padding-start);\n      padding-inline-end: 0;\n    }\n\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding-inline-end: var(--padding-end);\n      padding-inline-start: 0;\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-block-end: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    box-shadow: #{$control-focus-style};\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-start: 0;\n    padding-inline-end: var(--padding-end);\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu-content {\n    padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n    padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    margin-inline: var(--padding-end) 0;\n    margin-block: 0;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    margin-inline: 0 var(--padding-start);\n    margin-block: 0;\n  }\n\n  ::slotted(a),\n  button {\n    position: relative;\n\n    &::before {\n      content: '';\n      background-color: rgb(12, 90, 113);\n      height: 9px;\n      inset-inline: 0 5px;\n      inset-block-end: -22px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n}\n\n:host(.nano-global-nav-bar.selected) {\n  ::slotted(a) {\n    &::before {\n      transform: translateZ(0) scaleX(1);\n    }\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  .secondary-open button::before {\n    opacity: 0.7;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    inset-inline: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    padding-block-start: calc(var(--padding-top) / 2);\n    padding-inline-end: 0;\n    padding-block-end: calc(var(--padding-bottom) / 2);\n    padding-inline-start: var(--padding-start);\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    padding-inline-end: var(--padding-end);\n    padding-inline-start: 0;\n    text-align: start;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    padding-inline: 0 var(--padding-end);\n    padding-block: 0;\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    padding: 0 var(--padding-end) 0 0;\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    inset-inline: auto 0;\n    inset-block: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n    padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n    padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n    }\n  }\n\n  .notification {\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 6px;\n      height: 6px;\n      background-color: #ef4135;\n      inset-inline-start: 10px;\n      inset-block-start: 7px;\n      border-radius: 50%;\n\n      @media (min-width: 52em) {\n        width: 7px;\n        height: 7px;\n        inset-inline-start: 8px;\n        inset-block-start: 5px;\n      }\n    }\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .secondary-menu {\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Will show an indicator badge - only when placed in a nano-menu-draw\n   */\n  @Prop() notification: boolean = false;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.el.tabIndex = null;\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        const focusableChild = getTabbableElements(this.secondaryDiv, true);\n        if (focusableChild[0]) focusableChild[0].focus();\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    const status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    const foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (ev.relatedTarget === this.el || ev.relatedTarget === this.btn) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n    if (this.foundThisNavEle(ev.relatedTarget as HTMLElement)) return;\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    const link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n              class={{\n                notification: this.notification,\n              }}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.select__native-input {\n  @include text-inherit();\n\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-height: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-height: initial;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label.textarea & {\n    padding-block-start: 1.8em;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n}\n\n.select__mask {\n  @include text-inherit();\n\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n  &-wrap {\n    padding-block: 0 var(--padding-bottom);\n    padding-inline: 0 0;\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    overflow: hidden;\n    align-items: flex-start;\n\n    :host(.has-float-label) & {\n      padding-block-start: 1em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n\n    padding-inline: var(--padding-start) var(--padding-end);\n    padding-block: var(--padding-bottom) 0;\n    min-width: 50px;\n    width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    box-sizing: border-box;\n    line-height: calc(2.5em - var(--padding-bottom));\n    height: calc(2.5em - var(--padding-bottom));\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    margin-block: var(--padding-bottom) 0;\n    margin-inline: var(--padding-start) -3px;\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.35em 0.5em;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    letter-spacing: 1px;\n    max-height: calc(2.5em - 8px);\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1;\n    }\n  }\n\n  &-value-remove {\n    @include background-position(center);\n\n    padding-inline-start: 0.5em;\n    margin: 0;\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    inset-block-start: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.form-ctrl__float-label {\n  width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-110%);\n    font-size: 0.8em;\n  }\n\n  :host(.has-value.has-multiple) & {\n    transform: translateY(21%);\n    inset-block-start: 0;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private customError: string = '';\n\n  private get inputCtrl() {\n    return this._inputCtrl;\n  }\n  private set inputCtrl(input) {\n    if (input === this._inputCtrl) return;\n    this._inputCtrl = input;\n    this.setDataListOpts();\n  }\n  private _inputCtrl?: HTMLInputElement;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. Use get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() hasHelperEndSlot = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\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.\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    if (!this.nativeSelect) return '';\n    return this.nativeSelect.validationMessage;\n  }\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\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({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    this.customValidate();\n\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    requestAnimationFrame(() => {\n      this.shouldValidate();\n      this.nanoChange.emit({ value: this.value });\n    });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n\n    this.datalist.input = this.inputCtrl;\n\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\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  // 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.nativeSelect.validationMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.inputCtrl) return;\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * @returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\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   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.customError = message;\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    if (!this.nativeSelect || !!this.customError) return;\n\n    this.nativeSelect.setCustomValidity('');\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\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    requestAnimationFrame(() => this.showInlineValidation(ev));\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n  }\n\n  private getLabel(toFind: string) {\n    const label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.clearSelectValue();\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n    this.customValidate();\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    });\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    const ele = ev.target as HTMLSpanElement;\n    const spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    const to = this.value.indexOf(spanVal);\n    const from = this.value.indexOf(this.dragVal);\n    const tmpArr = this.value as Array<string>;\n    const tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    requestAnimationFrame(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n    const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasHelperEndSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"select__multi-wrap select\">\n                {this.multipleValues(labelId, moreId, helperEndId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select__mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"select__native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={this.placeholder}\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n              <nano-option\n                slot=\"list-top\"\n                value={this.inputSearchVal}\n                selected={false}\n                label={this.inputSearchVal}\n                onNanoSelect={() => this.inputCtrl.focus()}\n              >\n                <span slot=\"check-icon\"></span>\n                Add '{this.inputSearchVal}'\n              </nano-option>\n            )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"select__native-ctrl\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string,\n    helperEndId: string\n  ): VNode | (VNode | VNode[])[] {\n    const input: VNode = (\n      <input\n        class=\"select__multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.value.length ? this.placeholder : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"select__multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"select__multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"]}