@nanoporetech-digital/components 4.7.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/nano-dropdown.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  4. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-global-search-results.cjs.entry.js +1 -1
  7. package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-input.cjs.entry.js +1 -1
  9. package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
  10. package/dist/cjs/{nano-table-3231e33a.js → nano-table-8ac4ae00.js} +2 -2
  11. package/dist/cjs/{nano-table-3231e33a.js.map → nano-table-8ac4ae00.js.map} +1 -1
  12. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  13. package/dist/cjs/{table.worker-1cf646db.js → table.worker-f8d9d66b.js} +2 -2
  14. package/dist/cjs/table.worker-f8d9d66b.js.map +1 -0
  15. package/dist/collection/components/dropdown/dropdown.css +2 -1
  16. package/dist/collection/components/global-search-results/global-search-results.js +1 -1
  17. package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
  18. package/dist/collection/components/input/input.css +5 -5
  19. package/dist/collection/components/select/select.css +8 -5
  20. package/dist/components/dropdown.js +1 -1
  21. package/dist/components/dropdown.js.map +1 -1
  22. package/dist/components/input.js +1 -1
  23. package/dist/components/input.js.map +1 -1
  24. package/dist/components/nano-global-search-results.js +1 -1
  25. package/dist/components/nano-global-search-results.js.map +1 -1
  26. package/dist/components/select.js +1 -1
  27. package/dist/components/select.js.map +1 -1
  28. package/dist/esm/nano-dropdown.entry.js +1 -1
  29. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  30. package/dist/esm/nano-global-nav-user-profile_3.entry.js +1 -1
  31. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  32. package/dist/esm/nano-global-search-results.entry.js +1 -1
  33. package/dist/esm/nano-global-search-results.entry.js.map +1 -1
  34. package/dist/esm/nano-input.entry.js +1 -1
  35. package/dist/esm/nano-input.entry.js.map +1 -1
  36. package/dist/esm/{nano-table-073a807b.js → nano-table-2b97d794.js} +2 -2
  37. package/dist/esm/{nano-table-073a807b.js.map → nano-table-2b97d794.js.map} +1 -1
  38. package/dist/esm/nano-table.entry.js +1 -1
  39. package/dist/esm/{table.worker-3db952f1.js → table.worker-6eec124e.js} +2 -2
  40. package/dist/esm/table.worker-6eec124e.js.map +1 -0
  41. package/dist/nano-components/nano-components.esm.js +1 -1
  42. package/dist/nano-components/{p-692ae029.entry.js → p-0af67aaf.entry.js} +2 -2
  43. package/dist/nano-components/{p-30d55046.entry.js → p-487de04d.entry.js} +2 -2
  44. package/dist/nano-components/{p-30d55046.entry.js.map → p-487de04d.entry.js.map} +1 -1
  45. package/dist/nano-components/p-58b53239.entry.js +5 -0
  46. package/dist/nano-components/p-58b53239.entry.js.map +1 -0
  47. package/dist/nano-components/p-6a3a29c6.entry.js +5 -0
  48. package/dist/nano-components/{p-7304107c.entry.js.map → p-6a3a29c6.entry.js.map} +1 -1
  49. package/dist/nano-components/p-7c43c880.js +5 -0
  50. package/dist/nano-components/p-87bc66b5.entry.js +5 -0
  51. package/dist/nano-components/p-87bc66b5.entry.js.map +1 -0
  52. package/dist/nano-components/{p-4384a4c2.js → p-c83c8784.js} +2 -2
  53. package/docs-json.json +6 -1
  54. package/hydrate/index.js +4 -4
  55. package/package.json +2 -2
  56. package/dist/cjs/table.worker-1cf646db.js.map +0 -1
  57. package/dist/esm/table.worker-3db952f1.js.map +0 -1
  58. package/dist/nano-components/p-0ee2a9bf.js +0 -5
  59. package/dist/nano-components/p-241056f4.entry.js +0 -5
  60. package/dist/nano-components/p-241056f4.entry.js.map +0 -1
  61. package/dist/nano-components/p-7304107c.entry.js +0 -5
  62. package/dist/nano-components/p-acd0ec64.entry.js +0 -5
  63. package/dist/nano-components/p-acd0ec64.entry.js.map +0 -1
  64. /package/dist/nano-components/{p-0ee2a9bf.js.map → p-0af67aaf.entry.js.map} +0 -0
  65. /package/dist/nano-components/{p-692ae029.entry.js.map → p-7c43c880.js.map} +0 -0
  66. /package/dist/nano-components/{p-4384a4c2.js.map → p-c83c8784.js.map} +0 -0
package/dist/nano-components/{p-30d55046.entry.js.map → p-487de04d.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","handleAlgoliaCredsChange","apiKey","appId","handleAlgoliaIndexChange","index","searchIndex","handleGlobalNavReset","tagName","algoliaResultsEle","goback","handleGlobalNavSearch","detail","results","client","result","find","selected","name","indexName","domain","filters","query","handleReorder","composedPath","ele","classList","contains","changeOrder","attachListeners","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","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","render","h","Host","class","small","dir","ownerDocument","undefined","ref","slot"],"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"],"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;\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: rgb(69 85 86 / 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 rgb(0 132 169 / 50%);\n background-color: rgb(0 132 169 / 20%);\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 rgb(0 0 0 / 20%);\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: rgb(69 85 86 / 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: rgb(0 0 0 / 50%);\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 rgb(0 0 0 / 10%);\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 rgb(0 0 0 / 70%);\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: rgb(69 85 86 / 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-flow: row wrap;\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;\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.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n if (!window['ResizeObserver']) return;\n\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 }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\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) => (this.algoliaEle = ele)}\n id=\"main-search\"\n >\n <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 </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["globalSearchResultsCss","filterOldPosts","Math","floor","Date","now","GlobalSearchResults","this","tagClick","e","preventDefault","tagVal","target","dataset","value","toLowerCase","filter","algoliaEle","querySelector","indexOf","handleAlgoliaCredsChange","apiKey","appId","handleAlgoliaIndexChange","index","searchIndex","handleGlobalNavReset","tagName","algoliaResultsEle","goback","handleGlobalNavSearch","detail","results","client","result","find","selected","name","indexName","domain","filters","query","handleReorder","composedPath","ele","classList","contains","changeOrder","attachListeners","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","componentDidLoad","window","ro","ResizeObserver","entries","entry","contentRect","width","currentWidth","observe","render","h","Host","class","small","dir","ownerDocument","undefined","ref","slot"],"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"],"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;\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: rgb(69 85 86 / 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 rgb(0 132 169 / 50%);\n background-color: rgb(0 132 169 / 20%);\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 rgb(0 0 0 / 20%);\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: rgb(69 85 86 / 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: rgb(0 0 0 / 50%);\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 rgb(0 0 0 / 10%);\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 rgb(0 0 0 / 70%);\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: rgb(69 85 86 / 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-flow: row wrap;\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;\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.algoliaEle.filters = [filterOldPosts]; // only get last 2 years\n\n if (!window['ResizeObserver']) return;\n\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 }\n\n render() {\n return (\n <Host\n class={{ small: this.currentWidth < 677 }}\n dir={\n (this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : undefined\n }\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) => (this.algoliaEle = ele)}\n id=\"main-search\"\n >\n <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 Authors: {{ 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 </template>\n <div slot=\"output\"></div>\n <slot />\n </nano-algolia>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
package/dist/nano-components/p-58b53239.entry.js ADDED
@@ -0,0 +1,5 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import{r as t,h as e,i as n,c as i,a as s,g as a}from"./p-f6a8467a.js";import{b as o,g as r,c as l}from"./p-257432ff.js";import{d as c}from"./p-f6de2d5d.js";import{g as h}from"./p-f88fa15c.js";import{g as d}from"./p-74a7fc4f.js";import{c as p}from"./p-411bb8f1.js";import{d as u,a as b}from"./p-9746b0a5.js";import{F as f,a as v}from"./p-5ac74848.js";const m=class{constructor(e){t(this,e);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){var t;return!!this.myAccountUser&&e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:(t=this.myAccountUser)===null||t===void 0?void 0:t.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`../nano-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 ..."}))))}};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;border-radius:inherit}: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]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}: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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);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{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);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{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;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=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,"open",false);this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,"open",true);this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};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(o(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()};this.hasAnchorEle=false;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){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{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.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(t){if(!this.didOpen||!this.hasSecondarySlot)return;if(!t.composedPath().some((t=>t===this.secondaryDiv)))this.toggleSecondary()}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(s,{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 a(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const w='.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;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);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);-webkit-padding-after:var(--padding-bottom);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;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;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;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;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:not([disabled]) .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]):not([disabled]).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:not([disabled]) .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);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;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);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .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);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;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;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);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:rgb(var(--color-invalid) / 100%);--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:rgb(var(--color--focus-rgb) / 100%);--clear-btn-color--invalid:rgb(var(--color-invalid) / 100%);--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(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );--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;-webkit-padding-before:1.4em;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{-webkit-padding-before:1.8em;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{-webkit-padding-before:1em;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:rgb(var(--multi-input-value-bg)/80%);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;-webkit-padding-start:0.5em;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 y=0;const x=class{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()}constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${y++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])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:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}));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 i=this.value.indexOf(n);const s=this.value.indexOf(this.dragVal);const a=this.value;const o=a[i];a[i]=a[s];a[s]=o;this.value=[...a]};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=u(this.showInlineValidation,50)}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:i,filterMeta:s}=t;return{value:e,selected:n,label:i,filterMeta:s}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=b(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=Object.assign(Object.assign(Object.assign({},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(){if(!window["MutationObserver"])return;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=>{var n;return!e.disabled&&((n=e.value)===null||n===void 0?void 0:n.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 i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const a=(({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:s,hasHelperSlot:a,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o=Object.assign(Object.assign({},a),{labelId:t,moreId:n,helperEndId:i,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(s,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},p(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(f,Object.assign({},o),e(v,Object.assign({},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,i)),!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+" "+i,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+" "+i,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,i){const s=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+" "+i});if(!this.value.length)return s;return this.value.map(((t,n)=>{let i=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)i=[s,i];else if(n===this.currInsertIndex)i=[i,s];return i}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=w;export{m as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
5
+ //# sourceMappingURL=p-58b53239.entry.js.map