@nanoporetech-digital/components 8.16.0 → 8.16.2
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-card-carousel.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/card-carousel/card-carousel.css +6 -6
- package/dist/collection/components/global-nav/global-nav.js +7 -7
- 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-card-carousel.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-card-carousel.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-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-card-carousel.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/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 +12 -12
- package/hydrate/index.mjs +12 -12
- package/package.json +2 -2
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{scdfPYwW → WUhA-BsM}/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) {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-DGttnXif.js');
|
|
7
7
|
var renderer = require('./renderer-jVpDRMfV.js');
|
|
8
8
|
|
|
9
|
-
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n
|
|
9
|
+
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n border: 0;\n clip: rect(0 0 0 0);\n block-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute !important;\n inline-size: 1px;\n}\n.base .pagination-btn--active {\n background: var(--pagination-button-active);\n}\n@container (width < 615px) {\n .base {\n --gap: var(--nano-spacing-md);\n --peek: var(--bleed);\n --slide-width: calc((100% + var(--gap)) - var(--peek));\n }\n .base ::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n }\n .base .header {\n flex-direction: column;\n align-items: start;\n }\n .base .pagination {\n transform: translateY(-50%);\n }\n}";
|
|
10
10
|
|
|
11
11
|
const ContentCarousel = 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/WUhA-BsM/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -142,14 +142,14 @@
|
|
|
142
142
|
background: var(--pagination-button-active);
|
|
143
143
|
}
|
|
144
144
|
.base .pagination-btn__label {
|
|
145
|
-
|
|
146
|
-
inline-size: 1px;
|
|
147
|
-
block-size: 1px;
|
|
145
|
+
border: 0;
|
|
148
146
|
clip: rect(0 0 0 0);
|
|
149
|
-
|
|
147
|
+
block-size: 1px;
|
|
148
|
+
margin: -1px;
|
|
150
149
|
overflow: hidden;
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
padding: 0;
|
|
151
|
+
position: absolute !important;
|
|
152
|
+
inline-size: 1px;
|
|
153
153
|
}
|
|
154
154
|
.base .pagination-btn--active {
|
|
155
155
|
background: var(--pagination-button-active);
|
|
@@ -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"; }
|
|
@@ -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() {
|
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/cl
|
|
|
5
5
|
import { h } from './renderer.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './slides.js';
|
|
7
7
|
|
|
8
|
-
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n
|
|
8
|
+
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n border: 0;\n clip: rect(0 0 0 0);\n block-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute !important;\n inline-size: 1px;\n}\n.base .pagination-btn--active {\n background: var(--pagination-button-active);\n}\n@container (width < 615px) {\n .base {\n --gap: var(--nano-spacing-md);\n --peek: var(--bleed);\n --slide-width: calc((100% + var(--gap)) - var(--peek));\n }\n .base ::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n }\n .base .header {\n flex-direction: column;\n align-items: start;\n }\n .base .pagination {\n transform: translateY(-50%);\n }\n}";
|
|
9
9
|
|
|
10
10
|
const ContentCarousel = /*@__PURE__*/ proxyCustomElement(class ContentCarousel extends HTMLElement {
|
|
11
11
|
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) {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, g as getElement, a as Host } from './index-BM3Om9WE.js';
|
|
5
5
|
import { h } from './renderer-DpNDfhNy.js';
|
|
6
6
|
|
|
7
|
-
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n
|
|
7
|
+
const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n */\n --bleed: 0px;\n --gap: var(--nano-spacing-xl);\n --pagination-button-color: var(--nano-color-neutral-400);\n --pagination-button-hover: var(--nano-color-primary-700);\n --pagination-button-active: var(--nano-color-primary-1000);\n --peek: calc(var(--bleed) / 2);\n --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));\n display: block;\n position: relative;\n margin-inline: 0 calc(var(--bleed) * -1);\n container-type: inline-size;\n overflow: hidden;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n display: block;\n text-align: unset;\n min-block-size: auto;\n inline-size: var(--slide-width);\n padding-inline-end: var(--gap);\n}\n.base nano-slides {\n overflow: visible;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);\n}\n.base nano-slides[ready]::part(slide-container) {\n flex-flow: column wrap;\n justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport) {\n flex: auto;\n}\n.base nano-slides::part(navigation-button--previous) {\n display: none;\n}\n.base nano-slides::part(navigation-button--next) {\n transform: none;\n block-size: 100%;\n inline-size: calc(var(--peek) + var(--gap));\n inset-inline-end: 0;\n inset-block-start: 0;\n border-radius: 0;\n margin: 0;\n padding: 0;\n opacity: 0;\n}\n.base .header {\n max-inline-size: calc(100% - var(--bleed));\n display: flex;\n gap: var(--nano-spacing-md);\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--gap);\n}\n.base .title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-xl);\n line-height: var(--nano-line-height-denser);\n text-wrap: balance;\n line-height: 1;\n}\n.base .pagination {\n display: inline-flex;\n gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n all: unset;\n inline-size: 1.25rem;\n block-size: 0.375rem;\n margin-block: 0;\n cursor: pointer;\n background: var(--pagination-button-color);\n position: relative;\n}\n.base .pagination-btn::after {\n content: \"\";\n position: absolute;\n inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n z-index: 1;\n}\n.base .pagination-btn:hover {\n background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n border: 0;\n clip: rect(0 0 0 0);\n block-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute !important;\n inline-size: 1px;\n}\n.base .pagination-btn--active {\n background: var(--pagination-button-active);\n}\n@container (width < 615px) {\n .base {\n --gap: var(--nano-spacing-md);\n --peek: var(--bleed);\n --slide-width: calc((100% + var(--gap)) - var(--peek));\n }\n .base ::slotted(nano-slide) {\n --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n }\n .base .header {\n flex-direction: column;\n align-items: start;\n }\n .base .pagination {\n transform: translateY(-50%);\n }\n}";
|
|
8
8
|
|
|
9
9
|
const ContentCarousel = 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;
|