@nanoporetech-digital/components 9.1.6 → 9.1.8
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.
- package/dist/cjs/nano-datalist_3.cjs.entry.js +13 -5
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +5 -4
- package/dist/cjs/nano-global-nav.cjs.entry.js +14 -13
- package/dist/collection/components/datalist/datalist.js +13 -5
- package/dist/collection/components/dropdown/dropdown.js +5 -4
- package/dist/collection/components/global-nav/global-nav.js +14 -13
- package/dist/components/datalist.js +13 -5
- package/dist/components/dropdown.js +5 -4
- package/dist/components/nano-global-nav.js +14 -13
- package/dist/esm/nano-datalist_3.entry.js +13 -5
- package/dist/esm/nano-dropdown_2.entry.js +5 -4
- package/dist/esm/nano-global-nav.entry.js +14 -13
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/docs-json.json +1 -1
- package/hydrate/index.js +32 -22
- package/hydrate/index.mjs +32 -22
- package/package.json +2 -2
|
@@ -55,7 +55,8 @@ const GlobalNav = class {
|
|
|
55
55
|
this.myAccountData = (await import('./local-logged-out-BuucpKxf.js'));
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
|
-
|
|
58
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
59
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
59
60
|
.then((res) => res.json())
|
|
60
61
|
.then((data) => {
|
|
61
62
|
this.myAccountData = data;
|
|
@@ -507,21 +508,21 @@ const GlobalNav = class {
|
|
|
507
508
|
}
|
|
508
509
|
render() {
|
|
509
510
|
const bpps = this.bpPartials;
|
|
510
|
-
return (h(Host, { key: '
|
|
511
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
511
512
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
512
513
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
513
514
|
'nano-global-nav': true,
|
|
514
|
-
} }, h("div", { key: '
|
|
515
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
515
516
|
gn: true,
|
|
516
517
|
'gn__search-open': this.searchBarShown,
|
|
517
|
-
} }, h("nano-drawer", { key: '
|
|
518
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
518
519
|
? bpps.mainMenu.tpl()
|
|
519
|
-
: '', h("slot", { key: '
|
|
520
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
520
521
|
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
521
|
-
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
522
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
522
|
+
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
523
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
|
|
523
524
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
524
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
525
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
525
526
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
526
527
|
searchInsight.sendClick({
|
|
527
528
|
index: this.activeIndex.index,
|
|
@@ -531,13 +532,13 @@ const GlobalNav = class {
|
|
|
531
532
|
positions: [i + 1],
|
|
532
533
|
});
|
|
533
534
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
534
|
-
h("nano-option", { key: '
|
|
535
|
-
])))))), h("div", { key: '
|
|
536
|
-
h("nano-icon-button", { key: '
|
|
537
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
535
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
536
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
537
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
538
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
538
539
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
539
540
|
? bpps.contact.tpl()
|
|
540
|
-
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '
|
|
541
|
+
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
541
542
|
}
|
|
542
543
|
static get assetsDirs() { return ["assets"]; }
|
|
543
544
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{a as t,r as i,c as e,e as n,d as o}from"./index-RXFO3HxS.js";import{t as s,h as a}from"./renderer-B_wACs4w.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as d}from"./dom-DiLhOqyz.js";let l=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+l++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown&&(this.nanoDropdown.open=this.open),this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(d(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key)?"Tab"===t.key&&(this.shouldOpen=!1):"select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout?this.open&&["ArrowDown","ArrowUp"].includes(t.key)?this.listBox.setFocus():(this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)):(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange(),this.handleOptionsChange()}componentDidLoad(){this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"2e64e78b3582d1c7198f55425f87c115a597beb1",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"3596eb7b1364fb13a8ca137ce846223508ca0775",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"572df9989a0ea9b70918a79f73084080d0adf975",name:"list-top"}),a("slot",{key:"0cdebdc62aa2aee8ca169aa71ee770310773edc7"}),a("slot",{key:"f694eae7a6312f8220d7eddb5367830836130c5c",name:"internal-opts"}),a("slot",{key:"f6f4b2a0c7401799db21f85b14e76a81b43ff751",name:"list-bottom"})),a("nano-menu",{key:"a7c487506e3a69eb65d60382a1c903196715f2a7",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"bfadcf697f2c9a76acd7ea557c87022d341d9c48",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"57d347cd46afb73739d100feb35ecad36b48640f",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-text-default);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return d(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-fill-primary);--bg-disabled:none;--color:var(--nano-color-text-default);--color-selected:var(--nano-color-text-primary);--color-focus:var(--nano-color-basic-white);--color-disabled:var(--nano-color-fill-neutral-weak);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const b=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{c as nano_datalist,u as nano_option,b as nano_tag}
|
|
4
|
+
import{a as t,r as i,c as e,e as n,d as o}from"./index-RXFO3HxS.js";import{t as s,h as a}from"./renderer-B_wACs4w.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as l}from"./dom-DiLhOqyz.js";let d=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+d++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown&&(this.nanoDropdown.open=this.open),this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(l(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{if(["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key))"Tab"===t.key&&(this.shouldOpen=!1);else if("select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout)if(this.open&&["ArrowDown","ArrowUp"].includes(t.key))this.listBox.setFocus();else{if("select"===this.type&&this.open&&"Enter"===t.key)return t.preventDefault(),this.shouldOpen=!1,void this.manageDropdownDisplay();this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)}else(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange(),this.handleOptionsChange()}componentDidLoad(){this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"1fff00ce17443af0cc012034202f5b9534c3eb8e",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"aa52b8a9e448a27b572b533c8a66b582fc631b74",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"cefe1e472c018fcf612ea6d30e0a591f0dbfad70",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"75b377c49d3b3e0f172135e0d705dfe92bcac5aa",name:"list-top"}),a("slot",{key:"d89f6cf631fc6faeddf447be926339c85649ff93"}),a("slot",{key:"782d7373362170ba28647c1302746ee1ae606f87",name:"internal-opts"}),a("slot",{key:"e3cf0d800b7219bdce24259eed1134f01349b40c",name:"list-bottom"})),a("nano-menu",{key:"e9aafef02fe4d3157629840451da1ff0110a9b8d",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"89aaba1550af0b0a273179bf16a31904840552d4",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-text-default);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return l(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-fill-primary);--bg-disabled:none;--color:var(--nano-color-text-default);--color-selected:var(--nano-color-text-primary);--color-focus:var(--nano-color-basic-white);--color-disabled:var(--nano-color-fill-neutral-weak);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const f=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{c as nano_datalist,u as nano_option,f as nano_tag}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as t,c as i,a as e,d as o}from"./index-RXFO3HxS.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-Dwh0pD2q.js";import{t as d,h as l}from"./renderer-B_wACs4w.js";import{g as p}from"./dom-DiLhOqyz.js";import{g as c}from"./slot-Cj55s-OG.js";let m=0;const u=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return e(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(o,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-surface-subtle);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const f=class{constructor(e){t(this,e),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return e(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0,e=!1){const o=this.getItems,n=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===n?"0":"-1"))),i&&(n?e?n.focus({preventScroll:!0}):n.setFocus?n.setFocus():n.focus():this.hasFocus||this.menu.focus({preventScroll:e}))}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let e=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?e++:"ArrowUp"===t.key?e--:"Home"===t.key||"PageUp"===t.key?e=0:"End"!==t.key&&"PageDown"!==t.key||(e=i.length-1),e<0&&(e=i.length-1),e>i.length-1&&(e=0),this.setActiveFocusItem(i[e]),void(i[e]&&i[e].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,e=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");e&&!this.ignoreMouseEvents&&this.setActiveFocusItem(e,!0,!0)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((e=>{"A"===e.tagName||"link"===e.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(o,{key:"40403e7a4f942f8fa8594edc9ceb24f33aba6979",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"561716ed34aa038cebacb31dc3b8562829f062e4",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"e36d4071433a6e7ddd700aee284868856cbd82ff",onSlotchange:this.handleSlotContent})))}};f.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-surface-subtle);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-text-default);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,f as nano_menu}
|
|
4
|
+
import{r as t,c as i,a as e,d as o}from"./index-RXFO3HxS.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-Dwh0pD2q.js";import{t as d,h as l}from"./renderer-B_wACs4w.js";import{g as p}from"./dom-DiLhOqyz.js";import{g as c}from"./slot-Cj55s-OG.js";let m=0;const u=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!1;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return e(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(o,{key:"00d9c9f79a99c0e2f926e4e8482cd1f06badfa73",class:"nano-dropdown"},l("div",{key:"b63f546d7d45cac07dded72bf666b4153df7e874",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"7dc63a96ced0d342ee725ce6cfe84af479d75ebc",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"aee47edcef94de976c86780a91ae49e5052e8fc0",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"3bbcc7e43091542e909827c00cf84b36baef806c",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"a94cd6ea9bbaaa3a8b743035746252666253fa17",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"39622ee9886cd0094891032b4c939c6e420cd19d",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"39b7b9392d4649e6141dec80a95c56a9f176ac5d"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-surface-subtle);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(e){t(this,e),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return e(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0,e=!1){const o=this.getItems,n=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===n?"0":"-1"))),i&&(n?e?n.focus({preventScroll:!0}):n.setFocus?n.setFocus():n.focus():this.hasFocus||this.menu.focus({preventScroll:e}))}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let e=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?e++:"ArrowUp"===t.key?e--:"Home"===t.key||"PageUp"===t.key?e=0:"End"!==t.key&&"PageDown"!==t.key||(e=i.length-1),e<0&&(e=i.length-1),e>i.length-1&&(e=0),this.setActiveFocusItem(i[e]),void(i[e]&&i[e].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,e=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");e&&!this.ignoreMouseEvents&&this.setActiveFocusItem(e,!0,!0)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((e=>{"A"===e.tagName||"link"===e.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(o,{key:"40403e7a4f942f8fa8594edc9ceb24f33aba6979",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"561716ed34aa038cebacb31dc3b8562829f062e4",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"e36d4071433a6e7ddd700aee284868856cbd82ff",onSlotchange:this.handleSlotContent})))}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-surface-subtle);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-text-default);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{a as n,r as e,c as a,d as t,l as o}from"./index-RXFO3HxS.js";import{a as i}from"./algoliasearch-lite.esm.browser-BTIloVU8.js";import{h as r}from"./renderer-B_wACs4w.js";import{d as s}from"./throttle-C93FMm2Z.js";import{a as l}from"./style-DZBZHpf8.js";import{s as c}from"./search-insights-8OL2oeQN.js";const h=class{get host(){return n(this)}overflowMenu;overflowOpen=!1;logoUrl=location.protocol+"//"+location.host;cartUrl="";msgUrl="";loginUrl="";logoutUrl="";contactUrl="https://nanoporetech.com/contact";sessionRedirect=window.location.href;cartCount=0;msgCount=0;async openOverflowMenu(){this.overflowOpen=!0}async closeOverflowMenu(){this.overflowOpen=!1}myAccountUrl;async handleMyAccountUrl(){this.myAccountUrl&&("local-logged-in"!==this.myAccountUrl?"local-logged-out"!==this.myAccountUrl?fetch(this.myAccountUrl+"/nav_bar_data.json").then((n=>n.json())).then((n=>{this.myAccountData=n})).catch((n=>{console.error("Error fetching MyAccount data",n)})):this.myAccountData=await import("./local-logged-out-BuucpKxf.js"):this.myAccountData=await import("./local-logged-in-B3A7tw10.js"))}myAccountData;nanoUserData;userLinks=[];isLoggedIn=!1;get myAccountUser(){return this.myAccountData?.user?.uuid?this.myAccountData.user:null}processUserData(){if(this.myAccountData&&(this.loginUrl=this.loginUrl||this.myAccountData.urls?.login,this.cartUrl=this.cartUrl||this.myAccountData.urls?.cart,this.cartCount=this.cartCount||this.myAccountData.cart?.count),!this.myAccountUser)return this.isLoggedIn=!1,this.userLinks=[],this.msgUrl="",this.msgCount=0,void this.nanoUserData.emit(null);this.userLinks=this.myAccountData?.links?.filter((n=>"profile-panel-list"===n.area))||[],this.logoutUrl=this.logoutUrl||this.myAccountData.urls?.logout,this.msgUrl=this.msgUrl||this.myAccountData.urls?.messages,this.msgCount=this.msgCount||this.myAccountData.notifications?.count,this.isLoggedIn=!0,this.nanoUserData.emit(this.myAccountUser)}formatLoginLink(n){if(!n)return"";if(!this.sessionRedirect)return n;const e=encodeURIComponent(this.sessionRedirect);return n.endsWith("=")?n+e:n.includes("?")?n+"&RelayState="+e:n+"?RelayState="+e}resizeObserver;cachedWidth;mainMenu;_mainMenuBar;get mainMenuBar(){return this._mainMenuBar}set mainMenuBar(n){this._mainMenuBar!==n&&(this._mainMenuBar=n,this.addMainmenuRo())}async triggerResize(){this.shouldResize=!0,this.breakpoint=0}shouldResize=!0;breakpoint=0;breakpointChanged(){this.breakpoint<this.bpPartials.mainMenu.breakpoint&&!1===this.shouldResize&&(this.overflowOpen=!1),this.setNavItemHover()}setNavItemHover(){const n=this.breakpoint<=this.bpPartials.mainMenu.breakpoint;this.host.querySelectorAll("nano-nav-item").forEach((e=>{e.openOnHover=n})),this.host.querySelectorAll("nano-mdd").forEach((e=>{e.accordion=!n}))}debounceResetResize=s((()=>{this.shouldResize=!1}),300);addMainmenuRo(){this.removeMainmenuRo(),(this.resizeObserver=new ResizeObserver((()=>{this.shouldResize||this.mainMenuBar.clientWidth>=this.cachedWidth&&0===this.breakpoint||this.mainMenuBar.clientWidth<=this.cachedWidth&&this.mainMenuBar.clientWidth>=this.mainMenu.scrollWidth||(this.shouldResize=!0,this.breakpoint=0)}))).observe(this.mainMenuBar)}removeMainmenuRo(){this.resizeObserver&&(this.mainMenuBar?this.resizeObserver.unobserve(this.mainMenuBar):this.resizeObserver.disconnect())}handleResize=()=>{this.shouldResize&&(this.breakpoint<4&&this.mainMenu.scrollWidth>this.mainMenuBar.clientWidth?this.breakpoint++:(this.cachedWidth=this.mainMenuBar.clientWidth,this.debounceResetResize()))};algoliaClient;searchResults;searchInput;activeIndex;autocompleteResults;searchForm;searchIndices=[];searchBarShown=!1;searchLoading=!1;_searchValue="";nanoSearchResult;nanoSearchError;nanoSearchReset;searchIndex="All";get searchValue(){return this._searchValue}set searchValue(n){n&&this.host.componentOnReady().then((()=>{this.searchBarShown=!0,this.handleSearchTermChangeEvent(n)}))}async submitSearch(){this.onSearchSubmit()}handleSearchIndex(){if(this.searchIndices?.length){if(this.searchIndex)return this.activeIndex=this.searchIndices.find((n=>n.name===this.searchIndex))||this.searchIndices[0],this.activeIndex;this.activeIndex=this.searchIndices[0]}}initSearch(){if(!this.myAccountData)return;const{search:n}=this.myAccountData;n?.app_id&&n?.api_key&&(this.algoliaClient=i(n.app_id,n.api_key),c.init(n.app_id,n.api_key).then((()=>{this.myAccountUser&&c.setUser(this.myAccountUser.uuid)})),this.searchIndices=this.myAccountData.search.indeces,this.searchIndices.forEach((n=>{n.algoliaIndex=this.algoliaClient.initIndex(n.index)})),this.searchIndex||(this.searchIndex=this.searchIndices[0].name))}onSearchSubmit=async n=>{if(n&&n.preventDefault(),!this.activeIndex||!this.myAccountData||this._searchValue?.length<3)return;this.searchResults||await this.doAlgoliaSearch();const{search:e}=this.myAccountData,a=this.searchResults?.results.find((n=>this.activeIndex.index===n.index)),{index:t,domain:o,filters:i,query:r,replicas:s}=a;this.searchBarShown=!1,this.nanoSearchResult.emit({meta:{indexTitle:a.indexName,index:t,domain:o,filters:i,query:r,replicas:s},client:{apiKey:e.api_key,appId:e.app_id}})};async doAlgoliaSearch(){if(this.searchResults=null,!this.algoliaClient)return;const n=this.searchIndices.map((n=>{const e={clickAnalytics:!0,attributesToSnippet:["body:5","title:8"],indexName:n.index,query:this._searchValue,facets:n.filters,hitsPerPage:5,filters:""};return"Community"===n.name&&(e.filters="created > "+Math.floor((Date.now()-631152e5)/1e3)),e}));try{this.searchLoading=!0,this.searchResults=this.processSearchResults(await this.algoliaClient.search(n))}catch(n){console.error(n),this.nanoSearchError.emit(n)}return this.searchLoading=!1,this.searchResults}processSearchResults(n){const e=n,a=n;return e?.results?(e.results.forEach(((n,a)=>{n={...n,indexName:this.searchIndices[a].name,selected:this.activeIndex.name===this.searchIndices[a].name,domain:this.activeIndex.domain||null,domains:this.myAccountData.domains||null,allGroup:!!this.searchIndices[a].allGroup,filters:this.searchIndices[a].filters,replicas:this.activeIndex.replicas},e.results[a]=this.processSearchResults(n)})),e):(a.hits.map((n=>{n.url&&!n.url.match(/^http/)&&(n.url=location.protocol+"//"+this.domainFor(n.origin)+n.url)})),a)}domainFor(n){if(!this.myAccountData)return"";const e=this.myAccountData.domains.find((e=>e.origin===n));return e?e.domain:""}async setAutocompleteResults(){this.autocompleteResults=null,this._searchValue.length<3?this._searchValue.length||this.nanoSearchReset.emit():this.autocompleteResults=(await this.doAlgoliaSearch())?.results.find((n=>n.selected))}autocompleteSnippet(n){return n._snippetResult?.title?.value||n.title}handleSearchOpenEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&this.searchInput&&(this.searchInput.setFocus(),this.searchBarShown=!0)};handleSearchCloseEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&requestAnimationFrame((()=>this.searchBarShown=!1))};handleSearchTermInputEvent=n=>{"input"===n.detail.type&&this.searchInput.value.length>=3&&(this.autocompleteResults=null,this.searchLoading=!0)};handleSearchTermChangeEvent=n=>{this._searchValue!==n&&(this._searchValue=n,this.setAutocompleteResults())};handleSearchIndexChangeEvent=n=>{if(!n.detail?.value?.length)return;const e=n.detail.value;if(this.activeIndex.index===e)return;const a=this.searchIndices.find((n=>n.index===e));a&&a.algoliaIndex&&(this.searchIndex=a.name,this._searchValue.length>=3&&(this.searchInput.setFocus(),this.searchBarShown=!0,this.setAutocompleteResults()))};constructor(n){e(this,n),this.nanoUserData=a(this,"nanoUserData",7),this.nanoSearchResult=a(this,"nanoSearchResult",7),this.nanoSearchError=a(this,"nanoSearchError",7),this.nanoSearchReset=a(this,"nanoSearchReset",7),this.handleResize=s(this.handleResize,75)}componentWillLoad(){this.handleMyAccountUrl(),this.initSearch(),this.processUserData(),l(this.host.shadowRoot)}componentDidRender(){this.handleResize(),this.setNavItemHover()}loggedInPanel(){if(this.isLoggedIn&&this.myAccountUser)return r("div",{part:"user-panel",class:"gn__user-panel nano-theme-dark"},r("div",{class:"gn__user-panel-head",slot:"label"},r("nano-avatar",{initials:this.myAccountUser.first_name?.charAt(0)+this.myAccountUser.last_name?.charAt(0)},this.myAccountUser.small_avatar_url&&!this.myAccountUser.small_avatar_url.includes("generic")&&r("img",{src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:40,width:40})),r("div",null,this.myAccountUser.name,r("br",null),this.myAccountUser.job_title&&this.myAccountUser?.company?`${this.myAccountUser.job_title}, ${this.myAccountUser.company}`:this.myAccountUser.job_title||this.myAccountUser.company||"")),r("div",{class:"gn__user-panel-body"},this.userLinks.map((n=>r("a",{href:n.address,target:n.target||void 0},n.title,("Messages"===n.title||n.address.includes(this.msgUrl)||this.msgUrl.includes(n.address))&&this.msgCount>0&&r("nano-badge",{theme:"danger"},this.msgCount))))),r("div",{class:"gn__user-panel-foot"},r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.logoutUrl?r("a",{href:this.formatLoginLink(this.logoutUrl)},"Logout"):r("button",{onClick:this.logoutUrl},"Logout"))))}bpPartials={contact:{tpl:()=>this.contactUrl&&r("a",{href:this.contactUrl},"Contact"),breakpoint:0},mainMenu:{tpl:()=>r("slot",{name:"menu"}),breakpoint:1},logo:{tpl:()=>{},breakpoint:2}};noResultPartial(){if(this.searchLoading||this.autocompleteResults?.hits.length||this._searchValue.length<3)return;const n=[];return"All"===this.searchIndex?(n.push(r("div",{slot:"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" Try another phrase')),n):(this.searchResults?.results.forEach((e=>{e.hits.length&&n.push(r("nano-option",{class:"gn__search-result",onNanoSelect:n=>{n.preventDefault(),this.searchIndex=e.indexName,this.onSearchSubmit(n)}},'Show results for "',r("strong",null,this._searchValue),'" in ',r("strong",null,e.indexName)))})),n.unshift(r("div",{slot:n.length?"list-top":"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" in'," ",r("strong",null,this.searchIndex),". Try another phrase")),n)}render(){const n=this.bpPartials;return r(t,{key:"79ca6089ded878867c3febc0add938f4bc93eabd",class:{"overflow-menu":this.breakpoint>n.mainMenu.breakpoint,"bar-menu":this.breakpoint<=n.mainMenu.breakpoint,"nano-global-nav":!0}},r("div",{key:"87e6512e1973f4e67437959690e1333936e62cb9",class:{gn:!0,"gn__search-open":this.searchBarShown}},r("nano-drawer",{key:"402c74ddc996de4a0568dccd15e2f5e40a25bf7f",ref:n=>this.overflowMenu=n,label:"Main menu",part:"drawer",class:"gn__drawer nano-theme-dark",placement:"start",open:this.overflowOpen,onNanoAfterHide:()=>this.overflowOpen=!1,onNanoAfterShow:()=>this.overflowOpen=!0},r("div",{key:"8d4c585f5a1b14b9bb432904c9527c89a1ab269a",class:"gn__drawer-header",part:"overflow-header",slot:"label"},"Main menu"),r("nav",{key:"3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf",class:"gn__drawer-menu",part:"overflow-menu"},this.breakpoint>n.mainMenu.breakpoint?n.mainMenu.tpl():"",r("slot",{key:"9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f",name:"overflow"}))),r("div",{key:"015d506e548f826cf2a74f0fb35ffbbb8b666589",class:"gn__menu-bar-wrapper"},r("div",{key:"d37bdf198530424948dab02fc31c9c8d587bff71",class:"gn__menu-bar",part:"menu-bar",ref:n=>this.mainMenuBar=n},r("nav",{key:"ecc35be807c48079fead123dca093fcdeef0ea37","aria-label":"Global navigation",class:"gn__main-menu "+(this.shouldResize?"resizing":""),part:"main-menu",ref:n=>this.mainMenu=n},this.breakpoint>n.mainMenu.breakpoint&&r("nano-icon-button",{key:"d3d673f2e0c8965d3497ac38dee5dcbe51715d2f",class:"gn__overflow-button",iconName:"light/bars",label:"Open Menu",onClick:()=>this.overflowMenu.show()}),r("slot",{key:"a3cde52880592ad39c88a13c156214cf232536e0",name:"logo"},r("a",{key:"03f442de2365b2df4cc617e891f9fdb47c0b553c",href:this.logoUrl,class:"gn__logo-link",part:"logo-link"},r("img",this.breakpoint<=n.logo.breakpoint?{src:o("../nano-assets/ont-logo.svg"),alt:"Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.",class:"gn__logo gn__logo--large",width:"152",height:"35",part:"logo logo--large"}:{src:o("../nano-assets/ont-wheel.svg"),alt:"Oxford Nanopore Technologies logo. A stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.",class:"gn__logo gn__logo--small",width:"35",height:"35",part:"logo logo--small"}))),this.breakpoint<=n.mainMenu.breakpoint&&r("div",{key:"daddd483f4767056f6315fae07b23f3fa42516c9",class:"gn__main-menu-links"},n.mainMenu.tpl()),r("div",{key:"91ef351b76c6699960c0f356f5f01eb106182e34",class:"gn__main-menu-actions"},!this.myAccountData||!!this.searchIndices.length&&r("nano-dropdown",{key:"d0308a67b45e4337fa574d8d010b7e28f14b3239",dialogTitle:"Search Oxford Nanopore Technologies",placement:"bottom",class:"gn__search-dropdown",skidding:-30,distance:25,open:this.searchBarShown,onNanoAfterShow:this.handleSearchOpenEvent,onNanoAfterHide:this.handleSearchCloseEvent,autoOpen:!!this.searchIndices.length},r("nano-icon-button",{key:"cefaae614f193e02118476a060bfc8eb5ba71d92",class:"gn__search-button",slot:"trigger",iconName:"light/magnifying-glass",label:"Search"}),r("form",{key:"bda3ff083a6808046f80336b93fa6a9ee7bdf21b",ref:n=>this.searchForm=n,class:"gn__search-form",part:"search-form",onSubmit:this.onSearchSubmit},this.searchIndices.length>1&&r("nano-select",{key:"0147d8c7add407f1993850ac72a7765c4a5b0504",part:"search-select",label:"Which site do you wish to search in?",mask:!0,hideLabel:!0,value:this.activeIndex?.index,onNanoChange:this.handleSearchIndexChangeEvent},this.searchIndices.map((n=>r("nano-option",{selected:n.name===this.searchIndex,value:n.index},n.name||n.index)))),r("nano-input",{key:"0513a5ff74d0c0d1b5f88660f8bd1818958face2",ref:n=>this.searchInput=n,part:"search-input",label:"Search Oxford Nanopore Technologies",placeholder:"Search Oxford Nanopore...",hideLabel:!0,clearable:!0,showInlineError:!1,onNanoChange:n=>{this.handleSearchTermChangeEvent(n.detail.value)},onNanoInput:this.handleSearchTermInputEvent,debounce:500,value:this._searchValue},r("nano-icon-button",{key:"a309cc734af7faec9310983ad85a2a119faaae54",slot:"end","icon-name":"light/magnifying-glass",label:"Search",onClick:this.onSearchSubmit}),r("nano-datalist",{key:"e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3",class:"gn__search-results",onNanoSelect:n=>n.preventDefault(),dropDownConfig:{tetherTo:this.searchForm},disableFilter:!0},this.searchLoading&&r("div",{key:"586f5f2c0b5a70ee6076da48d795b52def4a9dac",slot:"no-result",class:"gn__search-loading"},r("nano-spinner",{key:"45656109a08eea5467f7ae306f31581a82f785c8"},"Searching...")),this.noResultPartial(),!!this.autocompleteResults?.hits.length&&[this.autocompleteResults.hits.map(((n,e)=>r("nano-option",{href:n.url,class:"gn__search-result",onClick:()=>{c.sendClick({index:this.activeIndex.index,eventName:"Global nav quick search - search result clicked",queryID:this.autocompleteResults.queryID,objectIDs:[n.objectID],positions:[e+1]})}},r("span",{innerHTML:this.autocompleteSnippet(n)})))),r("nano-option",{key:"1ff8c43585ef9863aacbe489b836889016e14fb3",class:"gn__search-viewall",onNanoSelect:this.onSearchSubmit},"View all results")])))),r("div",{key:"d997f29cc0d38caa6f268ad692194f68d43fa1d8",class:"gn__cart"},this.cartUrl&&[r("nano-icon-button",{key:"992788e9a06e19d3a75d4b8d2439f1900bfcde3e",iconName:"light/cart-shopping",label:"View your cart",href:this.cartUrl}),!!this.cartCount&&r("nano-badge",{key:"b7e6532aee69cb21901faaead2cd0e88c18f6e75",theme:"danger"},this.cartCount>9?"9+":this.cartCount)]),this.breakpoint<=n.contact.breakpoint?n.contact.tpl():"",this.isLoggedIn?r("nano-dropdown",{dialogTitle:"User menu",class:"gn__user-dropdown",distance:10,placement:"bottom-end"},r("button",{slot:"trigger",class:"gn__user-dropdown-trigger"},r("nano-icon",{name:"light/user"}),r("nano-icon",{name:"light/chevron-down",class:"gn__user-dropdown-chevron"}),!!this.msgCount&&r("nano-badge",{theme:"danger"},this.msgCount>9?"9+":this.msgCount)),this.loggedInPanel()):r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.loginUrl?r("a",{href:this.formatLoginLink(this.loginUrl)},"Login"):r("button",{onClick:this.loginUrl},"Login")))))),r("nano-global-search-results",{key:"fbdd99411cd64c03f00f64120367bc503b4560ec",part:"site-search-results"},r("div",{key:"6ba33f25b6af1e5b58426d05b51ef9aaa221daf8",class:"gn__site",part:"site-wrapper"},r("slot",{key:"fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e"})))))}static get assetsDirs(){return["assets"]}static get watchers(){return{myAccountUrl:["handleMyAccountUrl"],myAccountData:["processUserData","initSearch"],shouldResize:["breakpointChanged"],breakpoint:["breakpointChanged"],searchIndices:["handleSearchIndex"],searchIndex:["handleSearchIndex"]}}};h.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-background-default);--main-menu-text-color:var(--nano-color-text-default);--main-menu-hover-text-color:var(--nano-color-text-hover);--main-menu-active-text-color:var(--nano-color-text-primary);--main-menu-active-border-color:var(--nano-color-border-accent);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-text-hover);--overflow-active-text-color:var(--nano-color-text-primary);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block;block-size:revert-layer}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:"";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-border-default)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__logo--small{min-inline-size:35px}.gn__logo--large{min-inline-size:152px}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:"";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-fill-neutral-weak);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .gn__search-button{position:relative}.gn__search-dropdown .gn__search-button::before{content:"";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .gn__search-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-surface-subtle);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-text-default);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-fill-primary-pressed)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-icon-primary);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--nano-color-icon-primary-hover)}.gn__user-dropdown-trigger:active{color:var(--nano-color-icon-primary)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:"";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-fill-subtle);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md);background-color:var(--nano-color-surface-subtle)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}';export{h as nano_global_nav}
|
|
4
|
+
import{a as n,r as e,c as a,d as t,l as o}from"./index-RXFO3HxS.js";import{a as i}from"./algoliasearch-lite.esm.browser-BTIloVU8.js";import{h as r}from"./renderer-B_wACs4w.js";import{d as s}from"./throttle-C93FMm2Z.js";import{a as l}from"./style-DZBZHpf8.js";import{s as c}from"./search-insights-8OL2oeQN.js";const h=class{get host(){return n(this)}overflowMenu;overflowOpen=!1;logoUrl=location.protocol+"//"+location.host;cartUrl="";msgUrl="";loginUrl="";logoutUrl="";contactUrl="https://nanoporetech.com/contact";sessionRedirect=window.location.href;cartCount=0;msgCount=0;async openOverflowMenu(){this.overflowOpen=!0}async closeOverflowMenu(){this.overflowOpen=!1}myAccountUrl;async handleMyAccountUrl(){this.myAccountUrl&&("local-logged-in"!==this.myAccountUrl?"local-logged-out"!==this.myAccountUrl?fetch(this.myAccountUrl+"/nav_bar_data.json",{credentials:"include"}).then((n=>n.json())).then((n=>{this.myAccountData=n})).catch((n=>{console.error("Error fetching MyAccount data",n)})):this.myAccountData=await import("./local-logged-out-BuucpKxf.js"):this.myAccountData=await import("./local-logged-in-B3A7tw10.js"))}myAccountData;nanoUserData;userLinks=[];isLoggedIn=!1;get myAccountUser(){return this.myAccountData?.user?.uuid?this.myAccountData.user:null}processUserData(){if(this.myAccountData&&(this.loginUrl=this.loginUrl||this.myAccountData.urls?.login,this.cartUrl=this.cartUrl||this.myAccountData.urls?.cart,this.cartCount=this.cartCount||this.myAccountData.cart?.count),!this.myAccountUser)return this.isLoggedIn=!1,this.userLinks=[],this.msgUrl="",this.msgCount=0,void this.nanoUserData.emit(null);this.userLinks=this.myAccountData?.links?.filter((n=>"profile-panel-list"===n.area))||[],this.logoutUrl=this.logoutUrl||this.myAccountData.urls?.logout,this.msgUrl=this.msgUrl||this.myAccountData.urls?.messages,this.msgCount=this.msgCount||this.myAccountData.notifications?.count,this.isLoggedIn=!0,this.nanoUserData.emit(this.myAccountUser)}formatLoginLink(n){if(!n)return"";if(!this.sessionRedirect)return n;const e=encodeURIComponent(this.sessionRedirect);return n.endsWith("=")?n+e:n.includes("?")?n+"&RelayState="+e:n+"?RelayState="+e}resizeObserver;cachedWidth;mainMenu;_mainMenuBar;get mainMenuBar(){return this._mainMenuBar}set mainMenuBar(n){this._mainMenuBar!==n&&(this._mainMenuBar=n,this.addMainmenuRo())}async triggerResize(){this.shouldResize=!0,this.breakpoint=0}shouldResize=!0;breakpoint=0;breakpointChanged(){this.breakpoint<this.bpPartials.mainMenu.breakpoint&&!1===this.shouldResize&&(this.overflowOpen=!1),this.setNavItemHover()}setNavItemHover(){const n=this.breakpoint<=this.bpPartials.mainMenu.breakpoint;this.host.querySelectorAll("nano-nav-item").forEach((e=>{e.openOnHover=n})),this.host.querySelectorAll("nano-mdd").forEach((e=>{e.accordion=!n}))}debounceResetResize=s((()=>{this.shouldResize=!1}),300);addMainmenuRo(){this.removeMainmenuRo(),(this.resizeObserver=new ResizeObserver((()=>{this.shouldResize||this.mainMenuBar.clientWidth>=this.cachedWidth&&0===this.breakpoint||this.mainMenuBar.clientWidth<=this.cachedWidth&&this.mainMenuBar.clientWidth>=this.mainMenu.scrollWidth||(this.shouldResize=!0,this.breakpoint=0)}))).observe(this.mainMenuBar)}removeMainmenuRo(){this.resizeObserver&&(this.mainMenuBar?this.resizeObserver.unobserve(this.mainMenuBar):this.resizeObserver.disconnect())}handleResize=()=>{this.shouldResize&&(this.breakpoint<4&&this.mainMenu.scrollWidth>this.mainMenuBar.clientWidth?this.breakpoint++:(this.cachedWidth=this.mainMenuBar.clientWidth,this.debounceResetResize()))};algoliaClient;searchResults;searchInput;activeIndex;autocompleteResults;searchForm;searchIndices=[];searchBarShown=!1;searchLoading=!1;_searchValue="";nanoSearchResult;nanoSearchError;nanoSearchReset;searchIndex="All";get searchValue(){return this._searchValue}set searchValue(n){n&&this.host.componentOnReady().then((()=>{this.searchBarShown=!0,this.handleSearchTermChangeEvent(n)}))}async submitSearch(){this.onSearchSubmit()}handleSearchIndex(){if(this.searchIndices?.length){if(this.searchIndex)return this.activeIndex=this.searchIndices.find((n=>n.name===this.searchIndex))||this.searchIndices[0],this.activeIndex;this.activeIndex=this.searchIndices[0]}}initSearch(){if(!this.myAccountData)return;const{search:n}=this.myAccountData;n?.app_id&&n?.api_key&&(this.algoliaClient=i(n.app_id,n.api_key),c.init(n.app_id,n.api_key).then((()=>{this.myAccountUser&&c.setUser(this.myAccountUser.uuid)})),this.searchIndices=this.myAccountData.search.indeces,this.searchIndices.forEach((n=>{n.algoliaIndex=this.algoliaClient.initIndex(n.index)})),this.searchIndex||(this.searchIndex=this.searchIndices[0].name))}onSearchSubmit=async n=>{if(n&&n.preventDefault(),!this.activeIndex||!this.myAccountData||this._searchValue?.length<3)return;this.searchResults||await this.doAlgoliaSearch();const{search:e}=this.myAccountData,a=this.searchResults?.results.find((n=>this.activeIndex.index===n.index)),{index:t,domain:o,filters:i,query:r,replicas:s}=a;this.searchBarShown=!1,this.nanoSearchResult.emit({meta:{indexTitle:a.indexName,index:t,domain:o,filters:i,query:r,replicas:s},client:{apiKey:e.api_key,appId:e.app_id}})};async doAlgoliaSearch(){if(this.searchResults=null,!this.algoliaClient)return;const n=this.searchIndices.map((n=>{const e={clickAnalytics:!0,attributesToSnippet:["body:5","title:8"],indexName:n.index,query:this._searchValue,facets:n.filters,hitsPerPage:5,filters:""};return"Community"===n.name&&(e.filters="created > "+Math.floor((Date.now()-631152e5)/1e3)),e}));try{this.searchLoading=!0,this.searchResults=this.processSearchResults(await this.algoliaClient.search(n))}catch(n){console.error(n),this.nanoSearchError.emit(n)}return this.searchLoading=!1,this.searchResults}processSearchResults(n){const e=n,a=n;return e?.results?(e.results.forEach(((n,a)=>{n={...n,indexName:this.searchIndices[a].name,selected:this.activeIndex.name===this.searchIndices[a].name,domain:this.activeIndex.domain||null,domains:this.myAccountData.domains||null,allGroup:!!this.searchIndices[a].allGroup,filters:this.searchIndices[a].filters,replicas:this.activeIndex.replicas},e.results[a]=this.processSearchResults(n)})),e):(a.hits.map((n=>{n.url&&!n.url.match(/^http/)&&(n.url=location.protocol+"//"+this.domainFor(n.origin)+n.url)})),a)}domainFor(n){if(!this.myAccountData)return"";const e=this.myAccountData.domains.find((e=>e.origin===n));return e?e.domain:""}async setAutocompleteResults(){this.autocompleteResults=null,this._searchValue.length<3?this._searchValue.length||this.nanoSearchReset.emit():this.autocompleteResults=(await this.doAlgoliaSearch())?.results.find((n=>n.selected))}autocompleteSnippet(n){return n._snippetResult?.title?.value||n.title}handleSearchOpenEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&this.searchInput&&(this.searchInput.setFocus(),this.searchBarShown=!0)};handleSearchCloseEvent=n=>{n.target.classList.contains("gn__search-dropdown")&&requestAnimationFrame((()=>this.searchBarShown=!1))};handleSearchTermInputEvent=n=>{"input"===n.detail.type&&this.searchInput.value.length>=3&&(this.autocompleteResults=null,this.searchLoading=!0)};handleSearchTermChangeEvent=n=>{this._searchValue!==n&&(this._searchValue=n,this.setAutocompleteResults())};handleSearchIndexChangeEvent=n=>{if(!n.detail?.value?.length)return;const e=n.detail.value;if(this.activeIndex.index===e)return;const a=this.searchIndices.find((n=>n.index===e));a&&a.algoliaIndex&&(this.searchIndex=a.name,this._searchValue.length>=3&&(this.searchInput.setFocus(),this.searchBarShown=!0,this.setAutocompleteResults()))};constructor(n){e(this,n),this.nanoUserData=a(this,"nanoUserData",7),this.nanoSearchResult=a(this,"nanoSearchResult",7),this.nanoSearchError=a(this,"nanoSearchError",7),this.nanoSearchReset=a(this,"nanoSearchReset",7),this.handleResize=s(this.handleResize,75)}componentWillLoad(){this.handleMyAccountUrl(),this.initSearch(),this.processUserData(),l(this.host.shadowRoot)}componentDidRender(){this.handleResize(),this.setNavItemHover()}loggedInPanel(){if(this.isLoggedIn&&this.myAccountUser)return r("div",{part:"user-panel",class:"gn__user-panel nano-theme-dark"},r("div",{class:"gn__user-panel-head",slot:"label"},r("nano-avatar",{initials:this.myAccountUser.first_name?.charAt(0)+this.myAccountUser.last_name?.charAt(0)},this.myAccountUser.small_avatar_url&&!this.myAccountUser.small_avatar_url.includes("generic")&&r("img",{src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:40,width:40})),r("div",null,this.myAccountUser.name,r("br",null),this.myAccountUser.job_title&&this.myAccountUser?.company?`${this.myAccountUser.job_title}, ${this.myAccountUser.company}`:this.myAccountUser.job_title||this.myAccountUser.company||"")),r("div",{class:"gn__user-panel-body"},this.userLinks.map((n=>r("a",{href:n.address,target:n.target||void 0},n.title,("Messages"===n.title||n.address.includes(this.msgUrl)||this.msgUrl.includes(n.address))&&this.msgCount>0&&r("nano-badge",{theme:"danger"},this.msgCount))))),r("div",{class:"gn__user-panel-foot"},r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.logoutUrl?r("a",{href:this.formatLoginLink(this.logoutUrl)},"Logout"):r("button",{onClick:this.logoutUrl},"Logout"))))}bpPartials={contact:{tpl:()=>this.contactUrl&&r("a",{href:this.contactUrl},"Contact"),breakpoint:0},mainMenu:{tpl:()=>r("slot",{name:"menu"}),breakpoint:1},logo:{tpl:()=>{},breakpoint:2}};noResultPartial(){if(this.searchLoading||this.autocompleteResults?.hits.length||this._searchValue.length<3)return;const n=[];return"All"===this.searchIndex?(n.push(r("div",{slot:"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" Try another phrase')),n):(this.searchResults?.results.forEach((e=>{e.hits.length&&n.push(r("nano-option",{class:"gn__search-result",onNanoSelect:n=>{n.preventDefault(),this.searchIndex=e.indexName,this.onSearchSubmit(n)}},'Show results for "',r("strong",null,this._searchValue),'" in ',r("strong",null,e.indexName)))})),n.unshift(r("div",{slot:n.length?"list-top":"no-result",class:"gn__search-no-results"},'No results matching for "',r("strong",null,this._searchValue),'" in'," ",r("strong",null,this.searchIndex),". Try another phrase")),n)}render(){const n=this.bpPartials;return r(t,{key:"08fd38cc2711a83d40053e7ca147ce3a9ef38ce3",class:{"overflow-menu":this.breakpoint>n.mainMenu.breakpoint,"bar-menu":this.breakpoint<=n.mainMenu.breakpoint,"nano-global-nav":!0}},r("div",{key:"63b69c051b64880f07dc2c309064a3fd9e4490e3",class:{gn:!0,"gn__search-open":this.searchBarShown}},r("nano-drawer",{key:"a1db81578932ba08842ab49a3ff0a34f9d2afd73",ref:n=>this.overflowMenu=n,label:"Main menu",part:"drawer",class:"gn__drawer nano-theme-dark",placement:"start",open:this.overflowOpen,onNanoAfterHide:()=>this.overflowOpen=!1,onNanoAfterShow:()=>this.overflowOpen=!0},r("div",{key:"3ee1efdef44a84b0fbf3434392e2fcb617abbfab",class:"gn__drawer-header",part:"overflow-header",slot:"label"},"Main menu"),r("nav",{key:"bea757cb52809fc472dbd5055b00462801f2a2a9",class:"gn__drawer-menu",part:"overflow-menu"},this.breakpoint>n.mainMenu.breakpoint?n.mainMenu.tpl():"",r("slot",{key:"571b994b306beacf7342536beb6bbde5c261a677",name:"overflow"}))),r("div",{key:"1bfbaa6397db0959e781a62a824b79929ac82468",class:"gn__menu-bar-wrapper"},r("div",{key:"4dff6a82f085798b3ebd30bb01b960b9c2065b46",class:"gn__menu-bar",part:"menu-bar",ref:n=>this.mainMenuBar=n},r("nav",{key:"3e56113c9377dba138ec7b37f31f144d337fc707","aria-label":"Global navigation",class:"gn__main-menu "+(this.shouldResize?"resizing":""),part:"main-menu",ref:n=>this.mainMenu=n},this.breakpoint>n.mainMenu.breakpoint&&r("nano-icon-button",{key:"3667ae378b645ae6440126c591f6fe656a9b783e",class:"gn__overflow-button",iconName:"light/bars",label:"Open Menu",onClick:()=>this.overflowMenu.show()}),r("slot",{key:"742068e692bdd49fd0999568db15df4d84d74084",name:"logo"},r("a",{key:"4584b27ecd617f2d176074f84626b2759bcdd164",href:this.logoUrl,class:"gn__logo-link",part:"logo-link"},r("img",this.breakpoint<=n.logo.breakpoint?{src:o("../nano-assets/ont-logo.svg"),alt:"Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.",class:"gn__logo gn__logo--large",width:"152",height:"35",part:"logo logo--large"}:{src:o("../nano-assets/ont-wheel.svg"),alt:"Oxford Nanopore Technologies logo. A stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.",class:"gn__logo gn__logo--small",width:"35",height:"35",part:"logo logo--small"}))),this.breakpoint<=n.mainMenu.breakpoint&&r("div",{key:"a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8",class:"gn__main-menu-links"},n.mainMenu.tpl()),r("div",{key:"5579bee39208817f0fffb5ae97b9cf6b192bbcd6",class:"gn__main-menu-actions"},!this.myAccountData||!!this.searchIndices.length&&r("nano-dropdown",{key:"838047989bda4a5991bbe8a2bd4f8530524918d5",dialogTitle:"Search Oxford Nanopore Technologies",placement:"bottom",class:"gn__search-dropdown",skidding:-30,distance:25,open:this.searchBarShown,onNanoAfterShow:this.handleSearchOpenEvent,onNanoAfterHide:this.handleSearchCloseEvent,autoOpen:!!this.searchIndices.length},r("nano-icon-button",{key:"05c65d9f0d6e6570e3bef62ca535da36655ce021",class:"gn__search-button",slot:"trigger",iconName:"light/magnifying-glass",label:"Search"}),r("form",{key:"2562ec900848f8f7b4f4f9f696a187a14a457f7d",ref:n=>this.searchForm=n,class:"gn__search-form",part:"search-form",onSubmit:this.onSearchSubmit},this.searchIndices.length>1&&r("nano-select",{key:"181f2d8f7fa89439f57af21b489beccda196cf34",part:"search-select",label:"Which site do you wish to search in?",mask:!0,hideLabel:!0,value:this.activeIndex?.index,onNanoChange:this.handleSearchIndexChangeEvent},this.searchIndices.map((n=>r("nano-option",{selected:n.name===this.searchIndex,value:n.index},n.name||n.index)))),r("nano-input",{key:"2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0",ref:n=>this.searchInput=n,part:"search-input",label:"Search Oxford Nanopore Technologies",placeholder:"Search Oxford Nanopore...",hideLabel:!0,clearable:!0,showInlineError:!1,onNanoChange:n=>{this.handleSearchTermChangeEvent(n.detail.value)},onNanoInput:this.handleSearchTermInputEvent,debounce:500,value:this._searchValue},r("nano-icon-button",{key:"6d85d49f3da82a2e970a8d54b778e0c9ef6ce563",slot:"end","icon-name":"light/magnifying-glass",label:"Search",onClick:this.onSearchSubmit}),r("nano-datalist",{key:"70928f0886130da02bb02c88f75b8d55650612f2",class:"gn__search-results",onNanoSelect:n=>n.preventDefault(),dropDownConfig:{tetherTo:this.searchForm},disableFilter:!0},this.searchLoading&&r("div",{key:"223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f",slot:"no-result",class:"gn__search-loading"},r("nano-spinner",{key:"cf014da5a7f18f2d84251f825a1718c270a68162"},"Searching...")),this.noResultPartial(),!!this.autocompleteResults?.hits.length&&[this.autocompleteResults.hits.map(((n,e)=>r("nano-option",{href:n.url,class:"gn__search-result",onClick:()=>{c.sendClick({index:this.activeIndex.index,eventName:"Global nav quick search - search result clicked",queryID:this.autocompleteResults.queryID,objectIDs:[n.objectID],positions:[e+1]})}},r("span",{innerHTML:this.autocompleteSnippet(n)})))),r("nano-option",{key:"ca2e52576b2faa6f35c2377591212c7a37c2355e",class:"gn__search-viewall",onNanoSelect:this.onSearchSubmit},"View all results")])))),r("div",{key:"558eea256b3807c8066cfad3d303dfdd23cc7af2",class:"gn__cart"},this.cartUrl&&[r("nano-icon-button",{key:"64fa87c0f21a947bed221ac4cf4f1996cd39f00c",iconName:"light/cart-shopping",label:"View your cart",href:this.cartUrl}),!!this.cartCount&&r("nano-badge",{key:"26f65729803a1f345c83603a481321c86e770e33",theme:"danger"},this.cartCount>9?"9+":this.cartCount)]),this.breakpoint<=n.contact.breakpoint?n.contact.tpl():"",this.isLoggedIn?r("nano-dropdown",{dialogTitle:"User menu",class:"gn__user-dropdown",distance:10,placement:"bottom-end"},r("button",{slot:"trigger",class:"gn__user-dropdown-trigger"},r("nano-icon",{name:"light/user"}),r("nano-icon",{name:"light/chevron-down",class:"gn__user-dropdown-chevron"}),!!this.msgCount&&r("nano-badge",{theme:"danger"},this.msgCount>9?"9+":this.msgCount)),this.loggedInPanel()):r("nano-cta",{secondary:!0,size:"small",icon:"false",class:"gn__login-cta"},"string"==typeof this.loginUrl?r("a",{href:this.formatLoginLink(this.loginUrl)},"Login"):r("button",{onClick:this.loginUrl},"Login")))))),r("nano-global-search-results",{key:"60e0568f58c6a277b6a09c3541bb561b0dab1026",part:"site-search-results"},r("div",{key:"743e3f716d1af6337ee95a8e48b017e7f9875770",class:"gn__site",part:"site-wrapper"},r("slot",{key:"fc1621f5b67db233aa7332d7a7d0334563ee7cd9"})))))}static get assetsDirs(){return["assets"]}static get watchers(){return{myAccountUrl:["handleMyAccountUrl"],myAccountData:["processUserData","initSearch"],shouldResize:["breakpointChanged"],breakpoint:["breakpointChanged"],searchIndices:["handleSearchIndex"],searchIndex:["handleSearchIndex"]}}};h.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-background-default);--main-menu-text-color:var(--nano-color-text-default);--main-menu-hover-text-color:var(--nano-color-text-hover);--main-menu-active-text-color:var(--nano-color-text-primary);--main-menu-active-border-color:var(--nano-color-border-accent);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-text-hover);--overflow-active-text-color:var(--nano-color-text-primary);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block;block-size:revert-layer}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent;--font-size:var(--nano-font-size-2xs);--padding-v:0.5em}.gn__menu-bar-wrapper{z-index:calc(var(--nano-z-index-menubar) + 1);position:relative}.gn__menu-bar-wrapper::after{content:"";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-border-default)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__logo--small{min-inline-size:35px}.gn__logo--large{min-inline-size:152px}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:"";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-fill-neutral-weak);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .gn__search-button{position:relative}.gn__search-dropdown .gn__search-button::before{content:"";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .gn__search-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-surface-subtle);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-text-default);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-fill-secondary-pressed);--color-focus:var(--nano-color-text-default);--color:var(--nano-color-fill-primary-pressed)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-icon-primary);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--nano-color-icon-primary-hover)}.gn__user-dropdown-trigger:active{color:var(--nano-color-icon-primary)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:"";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-fill-subtle);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md);background-color:var(--nano-color-surface-subtle)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}';export{h as nano_global_nav}
|
package/docs-json.json
CHANGED
package/hydrate/index.js
CHANGED
|
@@ -9476,6 +9476,14 @@ class DataList {
|
|
|
9476
9476
|
this.listBox.setFocus();
|
|
9477
9477
|
return;
|
|
9478
9478
|
}
|
|
9479
|
+
// When select, mirror native select behaviour. Enter on an open list confirms the
|
|
9480
|
+
// (type-to-select) value - already applied - and closes
|
|
9481
|
+
if (this.type === 'select' && this.open && e.key === 'Enter') {
|
|
9482
|
+
e.preventDefault();
|
|
9483
|
+
this.shouldOpen = false;
|
|
9484
|
+
this.manageDropdownDisplay();
|
|
9485
|
+
return;
|
|
9486
|
+
}
|
|
9479
9487
|
this.shouldOpen = true;
|
|
9480
9488
|
// open dropdown if possible
|
|
9481
9489
|
this.manageDropdownDisplay();
|
|
@@ -9537,18 +9545,18 @@ class DataList {
|
|
|
9537
9545
|
}
|
|
9538
9546
|
}
|
|
9539
9547
|
render() {
|
|
9540
|
-
return (h(Host, { key: '
|
|
9548
|
+
return (h(Host, { key: '1fff00ce17443af0cc012034202f5b9534c3eb8e', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
9541
9549
|
? 'Select options from the list below'
|
|
9542
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
9550
|
+
: undefined }, h("nano-dropdown", { key: 'aa52b8a9e448a27b572b533c8a66b582fc631b74', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
9543
9551
|
dlist__dropdown: true,
|
|
9544
9552
|
'dlist--isfiltered': this.isFiltered,
|
|
9545
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
9553
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'cefe1e472c018fcf612ea6d30e0a591f0dbfad70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
9546
9554
|
dlist__menu: true,
|
|
9547
9555
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9548
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
9556
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '75b377c49d3b3e0f172135e0d705dfe92bcac5aa', name: "list-top" }), h("slot", { key: 'd89f6cf631fc6faeddf447be926339c85649ff93' }), h("slot", { key: '782d7373362170ba28647c1302746ee1ae606f87', name: "internal-opts" }), h("slot", { key: 'e3cf0d800b7219bdce24259eed1134f01349b40c', name: "list-bottom" })), h("nano-menu", { key: 'e9aafef02fe4d3157629840451da1ff0110a9b8d', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
9549
9557
|
dlist__menu: true,
|
|
9550
9558
|
'dlist__menu--open': this.dropwdownOpen,
|
|
9551
|
-
} }, h("slot", { key: '
|
|
9559
|
+
} }, h("slot", { key: '34cf56ecb0c0a818f151cd8e1cc7e25e0bc04f1c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '89aaba1550af0b0a273179bf16a31904840552d4', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
9552
9560
|
}
|
|
9553
9561
|
static get watchers() { return {
|
|
9554
9562
|
"open": ["openWatcher"],
|
|
@@ -13006,7 +13014,8 @@ class Dropdown {
|
|
|
13006
13014
|
positioner;
|
|
13007
13015
|
accessibleTrigger;
|
|
13008
13016
|
didLoad = false;
|
|
13009
|
-
|
|
13017
|
+
// only set when opened via keyboard; consumed (and reset) once the open transition ends
|
|
13018
|
+
focusFirstEle = false;
|
|
13010
13019
|
get menu() {
|
|
13011
13020
|
return this.host.querySelector(transformTag('nano-menu'));
|
|
13012
13021
|
}
|
|
@@ -13340,12 +13349,12 @@ class Dropdown {
|
|
|
13340
13349
|
this.popover.destroy();
|
|
13341
13350
|
}
|
|
13342
13351
|
render() {
|
|
13343
|
-
return (h(Host, { key: '
|
|
13352
|
+
return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
|
|
13344
13353
|
dropdown: true,
|
|
13345
13354
|
'dropdown--open': this.open,
|
|
13346
|
-
} }, h("span", { key: '
|
|
13355
|
+
} }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
|
|
13347
13356
|
? undefined
|
|
13348
|
-
: 'polite' }, this.dialogTitle)), h("slot", { key: '
|
|
13357
|
+
: 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
|
|
13349
13358
|
}
|
|
13350
13359
|
static get watchers() { return {
|
|
13351
13360
|
"open": ["handleOpenChange"],
|
|
@@ -14815,7 +14824,8 @@ class GlobalNav {
|
|
|
14815
14824
|
this.myAccountData = (await Promise.resolve().then(function () { return localLoggedOut$1; }));
|
|
14816
14825
|
return;
|
|
14817
14826
|
}
|
|
14818
|
-
|
|
14827
|
+
// MyAccount is cross-origin; send its session cookies or the user always appears logged out
|
|
14828
|
+
fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
|
|
14819
14829
|
.then((res) => res.json())
|
|
14820
14830
|
.then((data) => {
|
|
14821
14831
|
this.myAccountData = data;
|
|
@@ -15266,21 +15276,21 @@ class GlobalNav {
|
|
|
15266
15276
|
}
|
|
15267
15277
|
render() {
|
|
15268
15278
|
const bpps = this.bpPartials;
|
|
15269
|
-
return (h(Host, { key: '
|
|
15279
|
+
return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
|
|
15270
15280
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
15271
15281
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
15272
15282
|
'nano-global-nav': true,
|
|
15273
|
-
} }, h("div", { key: '
|
|
15283
|
+
} }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
|
|
15274
15284
|
gn: true,
|
|
15275
15285
|
'gn__search-open': this.searchBarShown,
|
|
15276
|
-
} }, h("nano-drawer", { key: '
|
|
15286
|
+
} }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
15277
15287
|
? bpps.mainMenu.tpl()
|
|
15278
|
-
: '', h("slot", { key: '
|
|
15288
|
+
: '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
15279
15289
|
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
15280
|
-
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
15281
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
15290
|
+
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
15291
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
|
|
15282
15292
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
15283
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '
|
|
15293
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
15284
15294
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
15285
15295
|
searchInsight.sendClick({
|
|
15286
15296
|
index: this.activeIndex.index,
|
|
@@ -15290,13 +15300,13 @@ class GlobalNav {
|
|
|
15290
15300
|
positions: [i + 1],
|
|
15291
15301
|
});
|
|
15292
15302
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
15293
|
-
h("nano-option", { key: '
|
|
15294
|
-
])))))), h("div", { key: '
|
|
15295
|
-
h("nano-icon-button", { key: '
|
|
15296
|
-
!!this.cartCount && (h("nano-badge", { key: '
|
|
15303
|
+
h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
15304
|
+
])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
|
|
15305
|
+
h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
|
|
15306
|
+
!!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
|
|
15297
15307
|
]), this.breakpoint <= bpps.contact.breakpoint
|
|
15298
15308
|
? bpps.contact.tpl()
|
|
15299
|
-
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '
|
|
15309
|
+
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
|
|
15300
15310
|
}
|
|
15301
15311
|
static get assetsDirs() { return ["assets"]; }
|
|
15302
15312
|
static get watchers() { return {
|