@nanoporetech-digital/components 3.2.0 → 3.3.1

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

@@ -0,0 +1 @@
+{"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","goBackEvent","nanoSearchGoBack","emit","defaultPrevented","showResults","facet","removeFilters","remove","show","f","startsWith","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  Event,\n  EventEmitter,\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  /** Fired when the user clicks the 'back' button / closes the search panel\n   * Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoSearchGoBack: EventEmitter;\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    const goBackEvent = this.nanoSearchGoBack.emit();\n    if (goBackEvent.defaultPrevented) return;\n\n    this.removeAllFilters();\n    this.algoliaEle.query = '';\n    this.algoliaEle.showResults = false;\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\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-40e13cd4.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * 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 m}from"./p-77cad8d1.js";const v=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(this.foundThisNavEle(t.relatedTarget))return;if(t.relatedTarget===this.el||t.relatedTarget===this.btn){this.secondaryDiv.focus({preventScroll:true});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},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{part:"ctrl ctrl--anchor",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",{part:"ctrl ctrl--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",part:"secondary-wrapper"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}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(m,{...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{v as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
+//# sourceMappingURL=p-40e13cd4.entry.js.map

package/dist/nano-components/p-40e13cd4.entry.js.map

@@ -0,0 +1 @@
+{"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","foundThisNavEle","focus","preventScroll","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","part","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":"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","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 * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\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 (this.foundThisNavEle(ev.relatedTarget as HTMLElement)) return;\n\n      if (ev.relatedTarget === this.el || ev.relatedTarget === this.btn) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\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          part=\"ctrl-wrapper\"\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              part=\"ctrl ctrl--anchor\"\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              part=\"ctrl ctrl--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\" part=\"secondary-wrapper\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n                part=\"secondary-mask\"\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"]}

package/dist/nano-components/p-41addb3a.entry.js

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