@nanoporetech-digital/components 8.15.3 → 8.16.1
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-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +7 -7
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab.cjs.entry.js +2 -2
- package/dist/collection/components/breadcrumb/breadcrumb.css +2 -2
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/global-nav/global-nav.js +7 -7
- package/dist/collection/components/icon/pictogram/real-time.svg +4 -0
- package/dist/collection/components/icon/pictogram/versatile.svg +3 -0
- package/dist/collection/components/in-page-nav/in-page-nav.js +1 -1
- package/dist/collection/components/tabs/tab.js +2 -2
- package/dist/components/nano-breadcrumb.js +1 -1
- package/dist/components/nano-global-nav.js +7 -7
- package/dist/components/nano-in-page-nav.js +1 -1
- package/dist/components/nano-tab.js +2 -2
- package/dist/esm/nano-breadcrumb.entry.js +1 -1
- package/dist/esm/nano-global-nav.entry.js +7 -7
- package/dist/esm/nano-in-page-nav.entry.js +1 -1
- package/dist/esm/nano-tab.entry.js +2 -2
- package/dist/nano-assets/hash.txt +1 -1
- package/dist/nano-assets/icon/pictogram/real-time.svg +4 -0
- package/dist/nano-assets/icon/pictogram/versatile.svg +3 -0
- package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-components.css +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-tab.entry.js +1 -1
- package/dist/nano-components/pictogram/real-time.svg +4 -0
- package/dist/nano-components/pictogram/versatile.svg +3 -0
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/docs-json.json +2 -2
- package/hydrate/index.js +11 -11
- package/hydrate/index.mjs +11 -11
- package/package.json +2 -2
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{ZCT-PoHy → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-DGttnXif.js');
|
|
7
7
|
var style = require('./style-Du-L-qMa.js');
|
|
8
8
|
|
|
9
|
-
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-
|
|
9
|
+
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-1100);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
|
|
10
10
|
|
|
11
11
|
const NanoBreadcrumb = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -493,12 +493,12 @@ const GlobalNav = class {
|
|
|
493
493
|
'gn__search-open': this.searchBarShown,
|
|
494
494
|
} }, renderer.h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', 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) }, renderer.h("div", { key: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), renderer.h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
495
495
|
? bpps.mainMenu.tpl()
|
|
496
|
-
: '', renderer.h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), renderer.h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: '
|
|
496
|
+
: '', renderer.h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), renderer.h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, renderer.h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, renderer.h("nav", { key: 'bf3736fc4eb98e53a04357e30cd49fab8bf9ef7d', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (renderer.h("nano-icon-button", { key: 'fb90f7ea03281cd5543b7723df27ac704367e43f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), renderer.h("slot", { key: '94e0abe01ad7562fb72abde08ebad80e95d11042', name: "logo" }, renderer.h("a", { key: '1b01613c642f2bfd1df9df3d35517c6261f40b41', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
497
497
|
(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: "36", part: "logo logo--large" })) : (renderer.h("img", { src: index.getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
498
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: '
|
|
499
|
-
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '
|
|
498
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (renderer.h("div", { key: '6b303f5b2de6b26a5ec9480e08a0269fcf2f6857', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), renderer.h("div", { key: 'c2a63e53e7d72e5fabf40190d78d780d25f34c99', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
499
|
+
(!!this.searchIndices.length && (renderer.h("nano-dropdown", { key: '1ec162b4ecbfc8360d152780cb29a6274cca3d7d', 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 }, renderer.h("nano-icon-button", { key: '978738e596466f583580e48b330a96bac0b14fdc', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), renderer.h("form", { key: '6227358213b66c38888cce78218291144c33ca71', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (renderer.h("nano-select", { key: '36c4fe6caebc5e38702987ae9e3ba05d79e7ae28', 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) => (renderer.h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), renderer.h("nano-input", { key: 'd10bf62d983978ab9a3c20f0cd1f64e543dea593', 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) => {
|
|
500
500
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
501
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: '
|
|
501
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, renderer.h("nano-icon", { key: 'f5d7f79ac22c414adb0d02219a215618ccd89a7b', slot: "end", name: "light/magnifying-glass" }), renderer.h("nano-datalist", { key: 'a80c13a3d9382c730408d80f7f2058ca886678d2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (renderer.h("div", { key: '1671b2988094fbefc0f3a7dfc09dd03688141e12', slot: "no-result", class: "gn__search-loading" }, renderer.h("nano-spinner", { key: 'dd88116ffa3881fe272673d57686f12159f056e4' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
502
502
|
this.autocompleteResults.hits.map((hit, i) => (renderer.h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
503
503
|
searchInsights.searchInsight.sendClick({
|
|
504
504
|
index: this.activeIndex.index,
|
|
@@ -508,10 +508,10 @@ const GlobalNav = class {
|
|
|
508
508
|
positions: [i + 1],
|
|
509
509
|
});
|
|
510
510
|
} }, renderer.h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
511
|
-
renderer.h("nano-option", { key: '
|
|
512
|
-
])))))), renderer.h("div", { key: '
|
|
511
|
+
renderer.h("nano-option", { key: 'acbff4930245aabfbfe3d94cccbf0916a6419509', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
512
|
+
])))))), renderer.h("div", { key: '91cdf552cbf807a5f307da6381ff16fbba419bbe', class: "gn__cart" }, renderer.h("nano-icon-button", { key: '19c225ced356309ee741c74bc07fa7238e7bc9ff', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (renderer.h("nano-badge", { key: '6c7d8a2da3276c017cb67f58b48a7358db22b428', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
513
513
|
? bpps.contact.tpl()
|
|
514
|
-
: '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), renderer.h("nano-global-search-results", { key: '
|
|
514
|
+
: '', this.isLoggedIn ? (renderer.h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, renderer.h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, renderer.h("nano-icon", { name: "light/user" }), renderer.h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (renderer.h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (renderer.h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, renderer.h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), renderer.h("nano-global-search-results", { key: '7a58924f37e6f4517bec274b3a878a6e3d3e2553', part: "site-search-results" }, renderer.h("div", { key: '062c09847198b236c0731d6653584115ddd46e71', class: "gn__site", part: "site-wrapper" }, renderer.h("slot", { key: '971633747f2ec2a6a4dbee587a5a5ccfaaedc088' }))))));
|
|
515
515
|
}
|
|
516
516
|
static get assetsDirs() { return ["assets"]; }
|
|
517
517
|
static get watchers() { return {
|
|
@@ -136,7 +136,7 @@ const NanoInPageNav = class {
|
|
|
136
136
|
'nano-in-page-nav': true,
|
|
137
137
|
'external-links': this.externalLinks === true ||
|
|
138
138
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
139
|
-
} }, renderer.h("nav", { key: '
|
|
139
|
+
} }, renderer.h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, renderer.h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), renderer.h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), renderer.h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, renderer.h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), renderer.h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
140
140
|
}
|
|
141
141
|
};
|
|
142
142
|
NanoInPageNav.style = inPageNavCss;
|
|
@@ -51,12 +51,12 @@ const NanoTab = class {
|
|
|
51
51
|
};
|
|
52
52
|
render() {
|
|
53
53
|
const Tag = this.href ? 'a' : 'div';
|
|
54
|
-
return (renderer.h(index.Host, { key: '
|
|
54
|
+
return (renderer.h(index.Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, renderer.h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
55
55
|
tab: true,
|
|
56
56
|
'tab--active': this.active,
|
|
57
57
|
'tab--disabled': this.disabled,
|
|
58
58
|
'tab--closable': this.closable,
|
|
59
|
-
}, href: this.href, target: this.target }, renderer.h("slot", { key: '
|
|
59
|
+
}, href: this.href, target: this.target }, renderer.h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), renderer.h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, renderer.h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), renderer.h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (renderer.h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
NanoTab.style = tabCss;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
scroll-behavior: auto !important;
|
|
38
38
|
}
|
|
39
39
|
}/**
|
|
40
|
-
* @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-
|
|
40
|
+
* @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1100).
|
|
41
41
|
* @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).
|
|
42
42
|
* @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).
|
|
43
43
|
* @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
* @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).
|
|
46
46
|
*/
|
|
47
47
|
:host {
|
|
48
|
-
--text-color: var(--nano-color-primary-
|
|
48
|
+
--text-color: var(--nano-color-primary-1100);
|
|
49
49
|
--text-color-hover: var(--nano-color-primary-1200);
|
|
50
50
|
--text-color-secondary: var(--nano-color-neutral-1400);
|
|
51
51
|
--text-color-disabled: var(--nano-color-neutral-1000);
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds/
|
|
92
|
+
"path": "/builds/hHVyLZ9F/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -509,12 +509,12 @@ export class GlobalNav {
|
|
|
509
509
|
'gn__search-open': this.searchBarShown,
|
|
510
510
|
} }, h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', 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: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
511
511
|
? bpps.mainMenu.tpl()
|
|
512
|
-
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '
|
|
512
|
+
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'bf3736fc4eb98e53a04357e30cd49fab8bf9ef7d', "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: 'fb90f7ea03281cd5543b7723df27ac704367e43f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '94e0abe01ad7562fb72abde08ebad80e95d11042', name: "logo" }, h("a", { key: '1b01613c642f2bfd1df9df3d35517c6261f40b41', 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,
|
|
513
513
|
(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: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
514
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
515
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
514
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '6b303f5b2de6b26a5ec9480e08a0269fcf2f6857', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'c2a63e53e7d72e5fabf40190d78d780d25f34c99', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
515
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '1ec162b4ecbfc8360d152780cb29a6274cca3d7d', 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: '978738e596466f583580e48b330a96bac0b14fdc', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '6227358213b66c38888cce78218291144c33ca71', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '36c4fe6caebc5e38702987ae9e3ba05d79e7ae28', 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: 'd10bf62d983978ab9a3c20f0cd1f64e543dea593', 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) => {
|
|
516
516
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
517
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
517
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'f5d7f79ac22c414adb0d02219a215618ccd89a7b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'a80c13a3d9382c730408d80f7f2058ca886678d2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '1671b2988094fbefc0f3a7dfc09dd03688141e12', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'dd88116ffa3881fe272673d57686f12159f056e4' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
518
518
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
519
519
|
searchInsight.sendClick({
|
|
520
520
|
index: this.activeIndex.index,
|
|
@@ -524,10 +524,10 @@ export class GlobalNav {
|
|
|
524
524
|
positions: [i + 1],
|
|
525
525
|
});
|
|
526
526
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
527
|
-
h("nano-option", { key: '
|
|
528
|
-
])))))), h("div", { key: '
|
|
527
|
+
h("nano-option", { key: 'acbff4930245aabfbfe3d94cccbf0916a6419509', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
528
|
+
])))))), h("div", { key: '91cdf552cbf807a5f307da6381ff16fbba419bbe', class: "gn__cart" }, h("nano-icon-button", { key: '19c225ced356309ee741c74bc07fa7238e7bc9ff', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6c7d8a2da3276c017cb67f58b48a7358db22b428', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
529
529
|
? bpps.contact.tpl()
|
|
530
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '
|
|
530
|
+
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '7a58924f37e6f4517bec274b3a878a6e3d3e2553', part: "site-search-results" }, h("div", { key: '062c09847198b236c0731d6653584115ddd46e71', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '971633747f2ec2a6a4dbee587a5a5ccfaaedc088' }))))));
|
|
531
531
|
}
|
|
532
532
|
static get is() { return "nano-global-nav"; }
|
|
533
533
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="64" height="64" viewBox="0 0 64 64">
|
|
2
|
+
<path d="M19.4941 41.07L20.2773 42.3019L34.2771 33.3968C34.4869 33.2623 34.6152 33.03 34.6152 32.7804V9.97678H33.1549V32.379L19.4941 41.07Z" />
|
|
3
|
+
<path d="M59.8887 16.2857L58.6178 17.003C61.1882 21.5635 62.5447 26.7598 62.5396 32.0295C62.5325 40.1795 59.3561 47.8415 53.595 53.6054C41.689 65.5171 22.313 65.5192 10.4049 53.6054C4.63675 47.8344 1.46038 40.1612 1.46038 31.9999C1.46038 23.8387 4.63675 16.1655 10.4049 10.3945C21.8821 -1.08619 40.2932 -1.4988 52.2698 9.1474H44.9519V10.6085H54.8416V0.715122H53.3812V8.17971C40.8358 -3.10604 21.4433 -2.7145 9.37228 9.36136C3.32811 15.4084 0 23.4484 0 31.9999C0 40.5514 3.32811 48.5914 9.37228 54.6385C15.611 60.8792 23.806 64 32 64C40.195 64 48.389 60.8792 54.6277 54.6385C60.6637 48.5996 63.9918 40.5708 64 32.0315C64.0051 26.5102 62.5834 21.0653 59.8887 16.2857Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="64" height="64" viewBox="0 0 64 64">
|
|
2
|
+
<path d="M56.6388 24.6387L55.6451 25.6323L61.3101 31.2974H33.6958L53.2218 11.7711V19.7821H54.627V9.37216H44.2172V10.7774H52.2281L32.7021 30.3037V2.68994L38.3671 8.354L39.3607 7.36034L31.9995 0L24.6393 7.36034L25.6329 8.354L31.2969 2.68994V30.3037L11.7709 10.7774H19.7818V9.37216H9.37202V19.7821H10.7772V11.7711L30.3033 31.2974H2.6899L8.35388 25.6323L7.36023 24.6387L0 32L7.36023 39.3603L8.35388 38.3667L2.6899 32.7026H30.3033L10.7772 52.2289V44.2179H9.37202V54.6278H19.7818V53.2226H11.7709L31.2969 33.6963V61.3101L25.6329 55.646L24.6393 56.6397L31.9995 64L39.3607 56.6397L38.3671 55.646L32.7021 61.3101V33.6963L52.2281 53.2226H44.2172V54.6278H54.627V44.2179H53.2218V52.2289L33.6958 32.7026H61.3101L55.6451 38.3667L56.6388 39.3603L64 32L56.6388 24.6387Z" />
|
|
3
|
+
</svg>
|
|
@@ -142,7 +142,7 @@ export class NanoInPageNav {
|
|
|
142
142
|
'nano-in-page-nav': true,
|
|
143
143
|
'external-links': this.externalLinks === true ||
|
|
144
144
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
145
|
-
} }, h("nav", { key: '
|
|
145
|
+
} }, h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
146
146
|
}
|
|
147
147
|
static get is() { return "nano-in-page-nav"; }
|
|
148
148
|
static get encapsulation() { return "shadow"; }
|
|
@@ -56,12 +56,12 @@ export class NanoTab {
|
|
|
56
56
|
};
|
|
57
57
|
render() {
|
|
58
58
|
const Tag = this.href ? 'a' : 'div';
|
|
59
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
60
60
|
tab: true,
|
|
61
61
|
'tab--active': this.active,
|
|
62
62
|
'tab--disabled': this.disabled,
|
|
63
63
|
'tab--closable': this.closable,
|
|
64
|
-
}, href: this.href, target: this.target }, h("slot", { key: '
|
|
64
|
+
}, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
65
65
|
}
|
|
66
66
|
static get is() { return "nano-tab"; }
|
|
67
67
|
static get encapsulation() { return "shadow"; }
|
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './icon.js';
|
|
|
8
8
|
import { d as defineCustomElement$3 } from './menu.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './nav-item.js';
|
|
10
10
|
|
|
11
|
-
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-
|
|
11
|
+
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-1100);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
|
|
12
12
|
|
|
13
13
|
const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -511,12 +511,12 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
511
511
|
'gn__search-open': this.searchBarShown,
|
|
512
512
|
} }, h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', 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: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
513
513
|
? bpps.mainMenu.tpl()
|
|
514
|
-
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '
|
|
514
|
+
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'bf3736fc4eb98e53a04357e30cd49fab8bf9ef7d', "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: 'fb90f7ea03281cd5543b7723df27ac704367e43f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '94e0abe01ad7562fb72abde08ebad80e95d11042', name: "logo" }, h("a", { key: '1b01613c642f2bfd1df9df3d35517c6261f40b41', 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,
|
|
515
515
|
(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: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
516
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
517
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
516
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '6b303f5b2de6b26a5ec9480e08a0269fcf2f6857', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'c2a63e53e7d72e5fabf40190d78d780d25f34c99', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
517
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '1ec162b4ecbfc8360d152780cb29a6274cca3d7d', 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: '978738e596466f583580e48b330a96bac0b14fdc', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '6227358213b66c38888cce78218291144c33ca71', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '36c4fe6caebc5e38702987ae9e3ba05d79e7ae28', 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: 'd10bf62d983978ab9a3c20f0cd1f64e543dea593', 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) => {
|
|
518
518
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
519
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
519
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'f5d7f79ac22c414adb0d02219a215618ccd89a7b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'a80c13a3d9382c730408d80f7f2058ca886678d2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '1671b2988094fbefc0f3a7dfc09dd03688141e12', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'dd88116ffa3881fe272673d57686f12159f056e4' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
520
520
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
521
521
|
searchInsight.sendClick({
|
|
522
522
|
index: this.activeIndex.index,
|
|
@@ -526,10 +526,10 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
526
526
|
positions: [i + 1],
|
|
527
527
|
});
|
|
528
528
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
529
|
-
h("nano-option", { key: '
|
|
530
|
-
])))))), h("div", { key: '
|
|
529
|
+
h("nano-option", { key: 'acbff4930245aabfbfe3d94cccbf0916a6419509', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
530
|
+
])))))), h("div", { key: '91cdf552cbf807a5f307da6381ff16fbba419bbe', class: "gn__cart" }, h("nano-icon-button", { key: '19c225ced356309ee741c74bc07fa7238e7bc9ff', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6c7d8a2da3276c017cb67f58b48a7358db22b428', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
531
531
|
? bpps.contact.tpl()
|
|
532
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '
|
|
532
|
+
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '7a58924f37e6f4517bec274b3a878a6e3d3e2553', part: "site-search-results" }, h("div", { key: '062c09847198b236c0731d6653584115ddd46e71', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '971633747f2ec2a6a4dbee587a5a5ccfaaedc088' }))))));
|
|
533
533
|
}
|
|
534
534
|
static get assetsDirs() { return ["assets"]; }
|
|
535
535
|
static get watchers() { return {
|
|
@@ -140,7 +140,7 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
140
140
|
'nano-in-page-nav': true,
|
|
141
141
|
'external-links': this.externalLinks === true ||
|
|
142
142
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
143
|
-
} }, h("nav", { key: '
|
|
143
|
+
} }, h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
144
144
|
}
|
|
145
145
|
static get style() { return inPageNavCss; }
|
|
146
146
|
}, [257, "nano-in-page-nav", {
|
|
@@ -54,12 +54,12 @@ const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLEle
|
|
|
54
54
|
};
|
|
55
55
|
render() {
|
|
56
56
|
const Tag = this.href ? 'a' : 'div';
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
58
58
|
tab: true,
|
|
59
59
|
'tab--active': this.active,
|
|
60
60
|
'tab--disabled': this.disabled,
|
|
61
61
|
'tab--closable': this.closable,
|
|
62
|
-
}, href: this.href, target: this.target }, h("slot", { key: '
|
|
62
|
+
}, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
63
63
|
}
|
|
64
64
|
static get style() { return tabCss; }
|
|
65
65
|
}, [257, "nano-tab", {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, g as getElement, h } from './index-BM3Om9WE.js';
|
|
5
5
|
import { a as addGlobalStylesheetToShadow } from './style-Ds52s5za.js';
|
|
6
6
|
|
|
7
|
-
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-
|
|
7
|
+
const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-1100);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
|
|
8
8
|
|
|
9
9
|
const NanoBreadcrumb = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -491,12 +491,12 @@ const GlobalNav = class {
|
|
|
491
491
|
'gn__search-open': this.searchBarShown,
|
|
492
492
|
} }, h("nano-drawer", { key: '9a2c9109327ff9cd4eb2553df7e93571a29aa237', 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: '649c672f237ce2145eda6c8988744f6709835615', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'd002c07a9eb1cdcc4e188e5b146ce8a11257ab98', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
493
493
|
? bpps.mainMenu.tpl()
|
|
494
|
-
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '
|
|
494
|
+
: '', h("slot", { key: 'b6bf65e8ed92636f1eba4b376ecb2fd617bcd67f', name: "overflow" }))), h("div", { key: 'b7a5e9d074b63f1841d3946d0166389c73161f25', class: "gn__menu-bar-wrapper" }, h("div", { key: '6b4d27a83ed4cbf3a62c0b924b08c887e415904a', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'bf3736fc4eb98e53a04357e30cd49fab8bf9ef7d', "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: 'fb90f7ea03281cd5543b7723df27ac704367e43f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '94e0abe01ad7562fb72abde08ebad80e95d11042', name: "logo" }, h("a", { key: '1b01613c642f2bfd1df9df3d35517c6261f40b41', 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,
|
|
495
495
|
(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: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
496
|
-
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
497
|
-
(!!this.searchIndices.length && (h("nano-dropdown", { key: '
|
|
496
|
+
(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: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '6b303f5b2de6b26a5ec9480e08a0269fcf2f6857', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: 'c2a63e53e7d72e5fabf40190d78d780d25f34c99', class: "gn__main-menu-actions" }, !this.myAccountData ||
|
|
497
|
+
(!!this.searchIndices.length && (h("nano-dropdown", { key: '1ec162b4ecbfc8360d152780cb29a6274cca3d7d', 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: '978738e596466f583580e48b330a96bac0b14fdc', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '6227358213b66c38888cce78218291144c33ca71', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '36c4fe6caebc5e38702987ae9e3ba05d79e7ae28', 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: 'd10bf62d983978ab9a3c20f0cd1f64e543dea593', 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) => {
|
|
498
498
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
499
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
499
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'f5d7f79ac22c414adb0d02219a215618ccd89a7b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: 'a80c13a3d9382c730408d80f7f2058ca886678d2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '1671b2988094fbefc0f3a7dfc09dd03688141e12', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'dd88116ffa3881fe272673d57686f12159f056e4' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
500
500
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
501
501
|
searchInsight.sendClick({
|
|
502
502
|
index: this.activeIndex.index,
|
|
@@ -506,10 +506,10 @@ const GlobalNav = class {
|
|
|
506
506
|
positions: [i + 1],
|
|
507
507
|
});
|
|
508
508
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
509
|
-
h("nano-option", { key: '
|
|
510
|
-
])))))), h("div", { key: '
|
|
509
|
+
h("nano-option", { key: 'acbff4930245aabfbfe3d94cccbf0916a6419509', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
510
|
+
])))))), h("div", { key: '91cdf552cbf807a5f307da6381ff16fbba419bbe', class: "gn__cart" }, h("nano-icon-button", { key: '19c225ced356309ee741c74bc07fa7238e7bc9ff', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '6c7d8a2da3276c017cb67f58b48a7358db22b428', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
511
511
|
? bpps.contact.tpl()
|
|
512
|
-
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '
|
|
512
|
+
: '', 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", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '7a58924f37e6f4517bec274b3a878a6e3d3e2553', part: "site-search-results" }, h("div", { key: '062c09847198b236c0731d6653584115ddd46e71', class: "gn__site", part: "site-wrapper" }, h("slot", { key: '971633747f2ec2a6a4dbee587a5a5ccfaaedc088' }))))));
|
|
513
513
|
}
|
|
514
514
|
static get assetsDirs() { return ["assets"]; }
|
|
515
515
|
static get watchers() { return {
|
|
@@ -134,7 +134,7 @@ const NanoInPageNav = class {
|
|
|
134
134
|
'nano-in-page-nav': true,
|
|
135
135
|
'external-links': this.externalLinks === true ||
|
|
136
136
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
137
|
-
} }, h("nav", { key: '
|
|
137
|
+
} }, h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
138
138
|
}
|
|
139
139
|
};
|
|
140
140
|
NanoInPageNav.style = inPageNavCss;
|
|
@@ -49,12 +49,12 @@ const NanoTab = class {
|
|
|
49
49
|
};
|
|
50
50
|
render() {
|
|
51
51
|
const Tag = this.href ? 'a' : 'div';
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: 'eeba7d6c136e8ede5c1d60ecf53696a6aac3e2c4', id: this.host.id || this.tabId, role: !this.href ? 'tab' : undefined, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h(Tag, { key: 'a91c1e97699d0d32329c1f17b63da3ef97040333', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
53
53
|
tab: true,
|
|
54
54
|
'tab--active': this.active,
|
|
55
55
|
'tab--disabled': this.disabled,
|
|
56
56
|
'tab--closable': this.closable,
|
|
57
|
-
}, href: this.href, target: this.target }, h("slot", { key: '
|
|
57
|
+
}, href: this.href, target: this.target }, h("slot", { key: '2bab15a4a52e1eb75acecaf28b3b625ae3949716', name: "start" }), h("div", { key: 'ac5235d4d3b7802d5d7f7f5e896d996f8be68fc0', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active || this.href ? '-1' : '0', class: "tab__label" }, h("slot", { key: '5ad82f1d6061ab94268f623d1aaa82791a221b7c' })), h("slot", { key: '6f30a65a661a1a85eb3d363edb03c3e16fcf59f0', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: 'f8ea9979858ab6faf98100cf970271e4262d7ab1', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
NanoTab.style = tabCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
cCrxFZrWy5/aNY3YkuSUQ0R1V2c=
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="64" height="64" viewBox="0 0 64 64">
|
|
2
|
+
<path d="M19.4941 41.07L20.2773 42.3019L34.2771 33.3968C34.4869 33.2623 34.6152 33.03 34.6152 32.7804V9.97678H33.1549V32.379L19.4941 41.07Z" />
|
|
3
|
+
<path d="M59.8887 16.2857L58.6178 17.003C61.1882 21.5635 62.5447 26.7598 62.5396 32.0295C62.5325 40.1795 59.3561 47.8415 53.595 53.6054C41.689 65.5171 22.313 65.5192 10.4049 53.6054C4.63675 47.8344 1.46038 40.1612 1.46038 31.9999C1.46038 23.8387 4.63675 16.1655 10.4049 10.3945C21.8821 -1.08619 40.2932 -1.4988 52.2698 9.1474H44.9519V10.6085H54.8416V0.715122H53.3812V8.17971C40.8358 -3.10604 21.4433 -2.7145 9.37228 9.36136C3.32811 15.4084 0 23.4484 0 31.9999C0 40.5514 3.32811 48.5914 9.37228 54.6385C15.611 60.8792 23.806 64 32 64C40.195 64 48.389 60.8792 54.6277 54.6385C60.6637 48.5996 63.9918 40.5708 64 32.0315C64.0051 26.5102 62.5834 21.0653 59.8887 16.2857Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="64" height="64" viewBox="0 0 64 64">
|
|
2
|
+
<path d="M56.6388 24.6387L55.6451 25.6323L61.3101 31.2974H33.6958L53.2218 11.7711V19.7821H54.627V9.37216H44.2172V10.7774H52.2281L32.7021 30.3037V2.68994L38.3671 8.354L39.3607 7.36034L31.9995 0L24.6393 7.36034L25.6329 8.354L31.2969 2.68994V30.3037L11.7709 10.7774H19.7818V9.37216H9.37202V19.7821H10.7772V11.7711L30.3033 31.2974H2.6899L8.35388 25.6323L7.36023 24.6387L0 32L7.36023 39.3603L8.35388 38.3667L2.6899 32.7026H30.3033L10.7772 52.2289V44.2179H9.37202V54.6278H19.7818V53.2226H11.7709L31.2969 33.6963V61.3101L25.6329 55.646L24.6393 56.6397L31.9995 64L39.3607 56.6397L38.3671 55.646L32.7021 61.3101V33.6963L52.2281 53.2226H44.2172V54.6278H54.627V44.2179H53.2218V52.2289L33.6958 32.7026H61.3101L55.6451 38.3667L56.6388 39.3603L64 32L56.6388 24.6387Z" />
|
|
3
|
+
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as n,g as r,h as o}from"./index-BM3Om9WE.js";import{a}from"./style-Ds52s5za.js";const e=class{constructor(r){n(this,r)}get el(){return r(this)}breadcrumbs=[];isOpen=!1;isOverflowing=!1;mainRef;componentDidLoad(){this.checkOverflow(),a(this.el?.shadowRoot)}componentDidUpdate(){this.checkOverflow()}connectedCallback(){window.addEventListener("resize",this.checkOverflow)}disconnectedCallback(){window.removeEventListener("resize",this.checkOverflow)}checkOverflow=()=>{if(!this.mainRef)return;const n=this.mainRef.scrollWidth>.9*this.el.clientWidth;this.isOverflowing!==n&&(this.isOverflowing=n,this.isOverflowing&&(this.isOpen=!1))};render(){const n=this.breadcrumbs?.find((n=>n.return));if(n)return o("nav",{"aria-label":"Breadcrumb",class:"breadcrumbs"},o(t,{breadcrumbs:[n],className:"return-only"}));const r=this.breadcrumbs?.length?this.breadcrumbs.at(-1):null;return o("div",{class:"breadcrumbs"},o("nav",{"aria-label":"Breadcrumb"},o(t,{breadcrumbs:this.breadcrumbs,className:"main"+(this.isOverflowing?" breadcrumbs-hidden":""),mainRef:n=>this.mainRef=n})),this.isOverflowing&&o("nano-dropdown",{dialogTitle:`${r?.label} Breadcrumb`,onNanoShow:()=>this.isOpen=!0,onNanoHide:()=>this.isOpen=!1,containingElement:this.el,class:"breadcrumbs__dropdown"},o("button",{class:"trigger-button",slot:"trigger"},o("span",null,this.breadcrumbs&&this.breadcrumbs.length>1&&o("span",{class:"trigger-button_label"},".."),o("span",{class:"trigger-button_label"},r?.label)),o("nano-icon",{class:{"trigger-icon":!0,"trigger-icon--open":this.isOpen},name:"light/chevron-down"})),o("nav",null,o("nano-menu",{class:"breadcrumbs small",label:"Breadcrumbs"},this.breadcrumbs?.slice(0,-1)?.map(((n,r)=>o("nano-nav-item",{key:r,href:n.href,class:{return:n.return,link:!!n.href},disabled:!n.href},n.label)))))))}},t=({breadcrumbs:n,className:r,mainRef:a})=>o("ol",{class:`breadcrumbs ${r}`,ref:a},n?.map(((n,r)=>o("li",null,o("a",{key:r,href:n.href,class:{return:n.return,link:!!n.href}},n.return&&o("nano-icon",{name:"light/chevron-left",size:"small",class:"breadcrumb-icon"}),n.label)))));e.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{--text-color:var(--nano-color-primary-
|
|
4
|
+
import{r as n,g as r,h as o}from"./index-BM3Om9WE.js";import{a}from"./style-Ds52s5za.js";const e=class{constructor(r){n(this,r)}get el(){return r(this)}breadcrumbs=[];isOpen=!1;isOverflowing=!1;mainRef;componentDidLoad(){this.checkOverflow(),a(this.el?.shadowRoot)}componentDidUpdate(){this.checkOverflow()}connectedCallback(){window.addEventListener("resize",this.checkOverflow)}disconnectedCallback(){window.removeEventListener("resize",this.checkOverflow)}checkOverflow=()=>{if(!this.mainRef)return;const n=this.mainRef.scrollWidth>.9*this.el.clientWidth;this.isOverflowing!==n&&(this.isOverflowing=n,this.isOverflowing&&(this.isOpen=!1))};render(){const n=this.breadcrumbs?.find((n=>n.return));if(n)return o("nav",{"aria-label":"Breadcrumb",class:"breadcrumbs"},o(t,{breadcrumbs:[n],className:"return-only"}));const r=this.breadcrumbs?.length?this.breadcrumbs.at(-1):null;return o("div",{class:"breadcrumbs"},o("nav",{"aria-label":"Breadcrumb"},o(t,{breadcrumbs:this.breadcrumbs,className:"main"+(this.isOverflowing?" breadcrumbs-hidden":""),mainRef:n=>this.mainRef=n})),this.isOverflowing&&o("nano-dropdown",{dialogTitle:`${r?.label} Breadcrumb`,onNanoShow:()=>this.isOpen=!0,onNanoHide:()=>this.isOpen=!1,containingElement:this.el,class:"breadcrumbs__dropdown"},o("button",{class:"trigger-button",slot:"trigger"},o("span",null,this.breadcrumbs&&this.breadcrumbs.length>1&&o("span",{class:"trigger-button_label"},".."),o("span",{class:"trigger-button_label"},r?.label)),o("nano-icon",{class:{"trigger-icon":!0,"trigger-icon--open":this.isOpen},name:"light/chevron-down"})),o("nav",null,o("nano-menu",{class:"breadcrumbs small",label:"Breadcrumbs"},this.breadcrumbs?.slice(0,-1)?.map(((n,r)=>o("nano-nav-item",{key:r,href:n.href,class:{return:n.return,link:!!n.href},disabled:!n.href},n.label)))))))}},t=({breadcrumbs:n,className:r,mainRef:a})=>o("ol",{class:`breadcrumbs ${r}`,ref:a},n?.map(((n,r)=>o("li",null,o("a",{key:r,href:n.href,class:{return:n.return,link:!!n.href}},n.return&&o("nano-icon",{name:"light/chevron-left",size:"small",class:"breadcrumb-icon"}),n.label)))));e.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{--text-color:var(--nano-color-primary-1100);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:"/";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:"/";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}';export{e as nano_breadcrumb}
|
|
@@ -1773,7 +1773,7 @@
|
|
|
1773
1773
|
nano-icon-item a > [slot=heading] {
|
|
1774
1774
|
cursor: pointer;
|
|
1775
1775
|
text-decoration: underline;
|
|
1776
|
-
color: var(--nano-color-primary-
|
|
1776
|
+
color: var(--nano-color-primary-1100);
|
|
1777
1777
|
}
|
|
1778
1778
|
nano-icon-item a:hover {
|
|
1779
1779
|
color: var(--nano-color-primary-1200);
|