@nanoporetech-digital/components 9.1.1 → 9.1.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.
Files changed (38) hide show
  1. package/dist/cjs/nano-avatar_5.cjs.entry.js +1 -1
  2. package/dist/cjs/nano-breadcrumb.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +1 -1
  4. package/dist/cjs/nano-datalist_3.cjs.entry.js +8 -6
  5. package/dist/cjs/nano-footer.cjs.entry.js +1 -1
  6. package/dist/cjs/nano-global-nav.cjs.entry.js +20 -16
  7. package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +1 -1
  8. package/dist/cjs/style-CIGbDa5n.js +141 -0
  9. package/dist/collection/components/cta/cta.js +1 -1
  10. package/dist/collection/components/datalist/datalist.js +8 -6
  11. package/dist/collection/components/global-nav/global-nav.js +19 -15
  12. package/dist/collection/utils/style.js +79 -10
  13. package/dist/components/datalist.js +8 -6
  14. package/dist/components/nano-global-nav.js +19 -15
  15. package/dist/components/style.js +79 -10
  16. package/dist/esm/nano-avatar_5.entry.js +1 -1
  17. package/dist/esm/nano-breadcrumb.entry.js +1 -1
  18. package/dist/esm/nano-collapsible-comparison.entry.js +1 -1
  19. package/dist/esm/nano-datalist_3.entry.js +8 -6
  20. package/dist/esm/nano-footer.entry.js +1 -1
  21. package/dist/esm/nano-global-nav.entry.js +20 -16
  22. package/dist/esm/nano-step-breadcrumb.entry.js +1 -1
  23. package/dist/esm/style-BVRinbua.js +139 -0
  24. package/dist/nano-components/nano-avatar_5.entry.js +1 -1
  25. package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
  26. package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
  27. package/dist/nano-components/nano-datalist_3.entry.js +1 -1
  28. package/dist/nano-components/nano-footer.entry.js +1 -1
  29. package/dist/nano-components/nano-global-nav.entry.js +1 -1
  30. package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
  31. package/dist/nano-components/style-BVRinbua.js +4 -0
  32. package/docs-json.json +7 -7
  33. package/hydrate/index.js +27 -21
  34. package/hydrate/index.mjs +27 -21
  35. package/package.json +2 -2
  36. package/dist/cjs/style-Du-L-qMa.js +0 -72
  37. package/dist/esm/style-Ds52s5za.js +0 -70
  38. package/dist/nano-components/style-Ds52s5za.js +0 -4
package/hydrate/index.mjs CHANGED
@@ -9113,7 +9113,9 @@ class DataList {
9113
9113
  const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
9114
9114
  this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
9115
9115
  }
9116
- this.nanoDropdown.open = this.open;
9116
+ if (this.nanoDropdown) {
9117
+ this.nanoDropdown.open = this.open;
9118
+ }
9117
9119
  if (this.connectedInput) {
9118
9120
  this.connectedInput.setAttribute('aria-expanded', this.open.toString());
9119
9121
  }
@@ -9533,18 +9535,18 @@ class DataList {
9533
9535
  }
9534
9536
  }
9535
9537
  render() {
9536
- return (h(Host, { key: '8acb3be76246d665171db96444cff3a5141e1132', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
9538
+ return (h(Host, { key: '2e64e78b3582d1c7198f55425f87c115a597beb1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
9537
9539
  ? 'Select options from the list below'
9538
- : undefined }, h("nano-dropdown", { key: '56c051873a20a3dab17a36eec1a2f040f83247fa', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
9540
+ : undefined }, h("nano-dropdown", { key: '3596eb7b1364fb13a8ca137ce846223508ca0775', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
9539
9541
  dlist__dropdown: true,
9540
9542
  'dlist--isfiltered': this.isFiltered,
9541
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
9543
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '473e5fff336a3b8d2c0d52fbb85b7bce88cdaff2', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
9542
9544
  dlist__menu: true,
9543
9545
  'dlist__menu--open': this.dropwdownOpen,
9544
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
9546
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '572df9989a0ea9b70918a79f73084080d0adf975', name: "list-top" }), h("slot", { key: '0cdebdc62aa2aee8ca169aa71ee770310773edc7' }), h("slot", { key: 'f694eae7a6312f8220d7eddb5367830836130c5c', name: "internal-opts" }), h("slot", { key: 'f6f4b2a0c7401799db21f85b14e76a81b43ff751', name: "list-bottom" })), h("nano-menu", { key: 'a7c487506e3a69eb65d60382a1c903196715f2a7', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
9545
9547
  dlist__menu: true,
9546
9548
  'dlist__menu--open': this.dropwdownOpen,
9547
- } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
9549
+ } }, h("slot", { key: 'bfadcf697f2c9a76acd7ea557c87022d341d9c48', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '57d347cd46afb73739d100feb35ecad36b48640f', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
9548
9550
  }
9549
9551
  static get watchers() { return {
9550
9552
  "open": ["openWatcher"],
@@ -14831,6 +14833,13 @@ class GlobalNav {
14831
14833
  return this.myAccountData?.user?.uuid ? this.myAccountData.user : null;
14832
14834
  }
14833
14835
  processUserData() {
14836
+ // Login & cart are available whether or not the user is logged in,
14837
+ // so set them before the logged-out early return.
14838
+ if (this.myAccountData) {
14839
+ this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
14840
+ this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
14841
+ this.cartCount = this.cartCount || this.myAccountData.cart?.count;
14842
+ }
14834
14843
  if (!this.myAccountUser) {
14835
14844
  this.isLoggedIn = false;
14836
14845
  this.userLinks = [];
@@ -14841,12 +14850,9 @@ class GlobalNav {
14841
14850
  }
14842
14851
  this.userLinks =
14843
14852
  this.myAccountData?.links?.filter((link) => link.area === 'profile-panel-list') || [];
14844
- this.loginUrl = this.loginUrl || this.myAccountData.urls?.login;
14845
14853
  this.logoutUrl = this.logoutUrl || this.myAccountData.urls?.logout;
14846
14854
  this.msgUrl = this.msgUrl || this.myAccountData.urls?.messages;
14847
14855
  this.msgCount = this.msgCount || this.myAccountData.notifications?.count;
14848
- this.cartUrl = this.cartUrl || this.myAccountData.urls?.cart;
14849
- this.cartCount = this.cartCount || this.myAccountData.cart?.count;
14850
14856
  this.isLoggedIn = true;
14851
14857
  this.nanoUserData.emit(this.myAccountUser);
14852
14858
  }
@@ -15252,21 +15258,21 @@ class GlobalNav {
15252
15258
  }
15253
15259
  render() {
15254
15260
  const bpps = this.bpPartials;
15255
- return (h(Host, { key: '53c751962d1ed36bae13be0a3c74b340b4a553bd', class: {
15261
+ return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
15256
15262
  'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
15257
15263
  'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
15258
15264
  'nano-global-nav': true,
15259
- } }, h("div", { key: '40ab68a79d28c8ace97c06f3b1d1222e1c21cf0e', class: {
15265
+ } }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
15260
15266
  gn: true,
15261
15267
  'gn__search-open': this.searchBarShown,
15262
- } }, h("nano-drawer", { key: '7a4b70e3364f66678843c3b66a46a11b4018d26c', 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: '49a9b1c0de594cbe45f844d16be862fb84b27776', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'af7cabec8e9897f5e48d0a3a0c5e47f23b4cf151', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
15268
+ } }, h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', 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: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
15263
15269
  ? bpps.mainMenu.tpl()
15264
- : '', h("slot", { key: '25b6d6721170837ae7c908d7db7f3ac0507c0775', name: "overflow" }))), h("div", { key: 'c2ea4f60360ed705d8fefa86712d9fa1fdacb8c6', class: "gn__menu-bar-wrapper" }, h("div", { key: '504deb61564e7de04cf6c437a1692fd456d6bf38', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'd83c1e1397e054aac75a7942d0b49c9ea012e1c0', "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: '201f58efe6e86cef00e45f43b74b805d997e4647', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '2370a4105d6462c6b19a9cd407aa6ad0616f53b4', name: "logo" }, h("a", { key: '82cfdc19c8521f251d9cec4671f8623c4dbd0b42', 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,
15270
+ : '', h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "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: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', 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,
15265
15271
  (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
15266
- (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '7c43301ad5c735c8dae4081d2bb91fef7db41762', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '12285c67b6773c7bc31897cb0752fb4db549a162', class: "gn__main-menu-actions" }, !this.myAccountData ||
15267
- (!!this.searchIndices.length && (h("nano-dropdown", { key: 'f7845d92127df80f548ae65573725b2c1497b703', 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: '6ca7605ce6e9829b6155f3e17d9262db9d452642', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'aba9d208a95acae67b2e2d05b6cbf39ac6aed329', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '7d6894101fb8e74e90c712f8768926e4604468bb', 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: '8ae65dcf14ec20041c3152fe875923a1bf19ab4e', 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) => {
15272
+ (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
15273
+ (!!this.searchIndices.length && (h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', 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: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', 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) => {
15268
15274
  this.handleSearchTermChangeEvent(e.detail.value);
15269
- }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'f232ad693769e872e8fe8a2e42109c2ea5286e02', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'cca09389259f1b63a607a7a0e667f839ae9a2904', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '6a134d0b971806091e973f7c8c1b5ef79ddfab5a', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '2bb8c2c2a7351cc1d95be9517d4c4db687c11c49' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
15275
+ }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
15270
15276
  this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
15271
15277
  searchInsight.sendClick({
15272
15278
  index: this.activeIndex.index,
@@ -15276,13 +15282,13 @@ class GlobalNav {
15276
15282
  positions: [i + 1],
15277
15283
  });
15278
15284
  } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
15279
- h("nano-option", { key: '0f453d14dada8aff48749a7fb99ceee46ad4d3ef', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
15280
- ])))))), h("div", { key: '44b96146b2cd8d71c832e5f400a3de65cd1a8f04', class: "gn__cart" }, this.cartUrl && [
15281
- h("nano-icon-button", { key: '1745e9090c7850789417d70b82ce25b2661b556c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
15282
- !!this.cartCount && (h("nano-badge", { key: '997946ee187bba74e880ab485f1a8e43cc74f707', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
15285
+ h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
15286
+ ])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
15287
+ h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
15288
+ !!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
15283
15289
  ]), this.breakpoint <= bpps.contact.breakpoint
15284
15290
  ? bpps.contact.tpl()
15285
- : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '41a5c6ee1257b595b391d711841dbab6d6c5ecc0', part: "site-search-results" }, h("div", { key: '94418390bfa82f913fa521e5612effe53b319ab4', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'd0c7c41fb54d7d57d44a0ae9a79216a4f1780675' }))))));
15291
+ : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
15286
15292
  }
15287
15293
  static get assetsDirs() { return ["assets"]; }
15288
15294
  static get watchers() { return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nanoporetech-digital/components",
3
- "version": "9.1.1",
3
+ "version": "9.1.2",
4
4
  "sideEffects": false,
5
5
  "description": "A collection of Oxford Nanopore corporate / digital webcomponents",
6
6
  "type": "module",
@@ -56,7 +56,7 @@
56
56
  "smart-array-filter": "^4.0.2",
57
57
  "stencil-wormhole": "3.2.1",
58
58
  "tyqs": "^0.1.3",
59
- "@nanoporetech-digital/style": "9.1.1"
59
+ "@nanoporetech-digital/style": "9.1.2"
60
60
  },
61
61
  "devDependencies": {
62
62
  "@algolia/client-search": "^4.22.1",
@@ -1,72 +0,0 @@
1
- /*!
2
- * Custom elements for Nanopore-Digital Web applications
3
- */
4
- 'use strict';
5
-
6
- let cachedCSStylesheet;
7
- /**
8
- * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
9
- * This is useful when shadow DOM enabled components:
10
- * - use css-only components
11
- * - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
12
- *
13
- * @param shadowRoot - The shadow root to add the stylesheet to
14
- */
15
- function addGlobalStylesheetToShadow(shadowRoot) {
16
- if (!shadowRoot)
17
- return;
18
- if (cachedCSStylesheet) {
19
- // we've already constructed the stylesheet
20
- shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
21
- return;
22
- }
23
- const globalStylesheets = document.styleSheets;
24
- let stylesheet = null;
25
- let rule = null;
26
- const globalStylesheet = [];
27
- for (stylesheet of globalStylesheets) {
28
- if (!(stylesheet instanceof CSSStyleSheet)) {
29
- continue;
30
- }
31
- let cssRules;
32
- try {
33
- // Attempt to access the cssRules of the stylesheet
34
- cssRules = stylesheet?.cssRules;
35
- // no cssRules? skip it
36
- if (!cssRules)
37
- continue;
38
- }
39
- catch (e) {
40
- // some stylesheets may not be accessible due to CORS or other restrictions
41
- console.warn('Unable to access stylesheet:', stylesheet, e);
42
- continue;
43
- }
44
- for (rule of cssRules) {
45
- // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
46
- // this is a bit fragile but does the job
47
- if (rule instanceof CSSLayerBlockRule &&
48
- rule.cssText.indexOf('.nano-toast-stack') > -1) {
49
- globalStylesheet.push(stylesheet);
50
- }
51
- if (rule instanceof CSSLayerBlockRule &&
52
- rule.cssText.indexOf('.nano-theme') > -1) {
53
- globalStylesheet.push(stylesheet);
54
- }
55
- }
56
- }
57
- if (globalStylesheet.length) {
58
- // if we found the global stylesheet, add it to the shadow root
59
- const sheet = new CSSStyleSheet();
60
- for (const globalSheet of globalStylesheet) {
61
- for (const rule of globalSheet.cssRules) {
62
- sheet.insertRule(rule.cssText);
63
- }
64
- }
65
- cachedCSStylesheet = sheet;
66
- shadowRoot.adoptedStyleSheets.push(sheet);
67
- return;
68
- }
69
- console.warn('No global stylesheet found');
70
- }
71
-
72
- exports.addGlobalStylesheetToShadow = addGlobalStylesheetToShadow;
@@ -1,70 +0,0 @@
1
- /*!
2
- * Custom elements for Nanopore-Digital Web applications
3
- */
4
- let cachedCSStylesheet;
5
- /**
6
- * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
7
- * This is useful when shadow DOM enabled components:
8
- * - use css-only components
9
- * - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
10
- *
11
- * @param shadowRoot - The shadow root to add the stylesheet to
12
- */
13
- function addGlobalStylesheetToShadow(shadowRoot) {
14
- if (!shadowRoot)
15
- return;
16
- if (cachedCSStylesheet) {
17
- // we've already constructed the stylesheet
18
- shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
19
- return;
20
- }
21
- const globalStylesheets = document.styleSheets;
22
- let stylesheet = null;
23
- let rule = null;
24
- const globalStylesheet = [];
25
- for (stylesheet of globalStylesheets) {
26
- if (!(stylesheet instanceof CSSStyleSheet)) {
27
- continue;
28
- }
29
- let cssRules;
30
- try {
31
- // Attempt to access the cssRules of the stylesheet
32
- cssRules = stylesheet?.cssRules;
33
- // no cssRules? skip it
34
- if (!cssRules)
35
- continue;
36
- }
37
- catch (e) {
38
- // some stylesheets may not be accessible due to CORS or other restrictions
39
- console.warn('Unable to access stylesheet:', stylesheet, e);
40
- continue;
41
- }
42
- for (rule of cssRules) {
43
- // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
44
- // this is a bit fragile but does the job
45
- if (rule instanceof CSSLayerBlockRule &&
46
- rule.cssText.indexOf('.nano-toast-stack') > -1) {
47
- globalStylesheet.push(stylesheet);
48
- }
49
- if (rule instanceof CSSLayerBlockRule &&
50
- rule.cssText.indexOf('.nano-theme') > -1) {
51
- globalStylesheet.push(stylesheet);
52
- }
53
- }
54
- }
55
- if (globalStylesheet.length) {
56
- // if we found the global stylesheet, add it to the shadow root
57
- const sheet = new CSSStyleSheet();
58
- for (const globalSheet of globalStylesheet) {
59
- for (const rule of globalSheet.cssRules) {
60
- sheet.insertRule(rule.cssText);
61
- }
62
- }
63
- cachedCSStylesheet = sheet;
64
- shadowRoot.adoptedStyleSheets.push(sheet);
65
- return;
66
- }
67
- console.warn('No global stylesheet found');
68
- }
69
-
70
- export { addGlobalStylesheetToShadow as a };
@@ -1,4 +0,0 @@
1
- /*!
2
- * Custom elements for Nanopore-Digital Web applications
3
- */
4
- let e;function o(o){if(!o)return;if(e)return void o.adoptedStyleSheets.push(e);const t=document.styleSheets;let n=null,c=null;const l=[];for(n of t){if(!(n instanceof CSSStyleSheet))continue;let e;try{if(e=n?.cssRules,!e)continue}catch(e){console.warn("Unable to access stylesheet:",n,e);continue}for(c of e)c instanceof CSSLayerBlockRule&&c.cssText.indexOf(".nano-toast-stack")>-1&&l.push(n),c instanceof CSSLayerBlockRule&&c.cssText.indexOf(".nano-theme")>-1&&l.push(n)}if(l.length){const t=new CSSStyleSheet;for(const e of l)for(const o of e.cssRules)t.insertRule(o.cssText);return e=t,void o.adoptedStyleSheets.push(t)}console.warn("No global stylesheet found")}export{o as a}