@nanoporetech-digital/components 4.2.0 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/nano-components.cjs.js +1 -1
  4. package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
  5. package/dist/cjs/nano-global-nav.cjs.entry.js +18 -6
  6. package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
  7. package/dist/cjs/nano-overflow-nav.cjs.entry.js +8 -4
  8. package/dist/cjs/nano-overflow-nav.cjs.entry.js.map +1 -1
  9. package/dist/cjs/{nano-table-d5eb9221.js → nano-table-b59537e5.js} +2 -2
  10. package/dist/cjs/{nano-table-d5eb9221.js.map → nano-table-b59537e5.js.map} +1 -1
  11. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  12. package/dist/cjs/{table.worker-37f25c78.js → table.worker-590fb88b.js} +2 -2
  13. package/dist/cjs/table.worker-590fb88b.js.map +1 -0
  14. package/dist/collection/components/details/details.js +1 -0
  15. package/dist/collection/components/details/details.js.map +1 -1
  16. package/dist/collection/components/global-nav/global-nav.js +49 -5
  17. package/dist/collection/components/global-nav/global-nav.js.map +1 -1
  18. package/dist/collection/components/global-nav/style/global-nav.css +1 -1
  19. package/dist/collection/components/overflow-nav/overflow-nav.css +9 -9
  20. package/dist/collection/components/overflow-nav/overflow-nav.js +10 -4
  21. package/dist/collection/components/overflow-nav/overflow-nav.js.map +1 -1
  22. package/dist/components/nano-details.js.map +1 -1
  23. package/dist/components/nano-global-nav.js +20 -7
  24. package/dist/components/nano-global-nav.js.map +1 -1
  25. package/dist/components/nano-overflow-nav.js +8 -4
  26. package/dist/components/nano-overflow-nav.js.map +1 -1
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/nano-components.js +1 -1
  29. package/dist/esm/nano-details.entry.js.map +1 -1
  30. package/dist/esm/nano-global-nav.entry.js +18 -6
  31. package/dist/esm/nano-global-nav.entry.js.map +1 -1
  32. package/dist/esm/nano-overflow-nav.entry.js +8 -4
  33. package/dist/esm/nano-overflow-nav.entry.js.map +1 -1
  34. package/dist/esm/{nano-table-81cc50c7.js → nano-table-b20d3a48.js} +2 -2
  35. package/dist/esm/{nano-table-81cc50c7.js.map → nano-table-b20d3a48.js.map} +1 -1
  36. package/dist/esm/nano-table.entry.js +1 -1
  37. package/dist/esm/{table.worker-86754436.js → table.worker-9cfa17ca.js} +2 -2
  38. package/dist/esm/table.worker-9cfa17ca.js.map +1 -0
  39. package/dist/nano-components/nano-components.esm.js +1 -1
  40. package/dist/nano-components/nano-components.esm.js.map +1 -1
  41. package/dist/nano-components/p-556b6e8a.entry.js +5 -0
  42. package/dist/nano-components/p-556b6e8a.entry.js.map +1 -0
  43. package/dist/nano-components/{p-fa658659.entry.js → p-62052277.entry.js} +2 -2
  44. package/dist/nano-components/p-62052277.entry.js.map +1 -0
  45. package/dist/nano-components/p-76a650b1.entry.js.map +1 -1
  46. package/dist/nano-components/{p-099a573a.js → p-aeaa2ed9.js} +2 -2
  47. package/dist/nano-components/p-b5805a8c.js +5 -0
  48. package/dist/nano-components/{p-1525c97b.entry.js → p-e3ee4c68.entry.js} +2 -2
  49. package/dist/types/components/details/details.d.ts +1 -0
  50. package/dist/types/components/global-nav/global-nav.d.ts +12 -0
  51. package/dist/types/components/overflow-nav/overflow-nav.d.ts +1 -0
  52. package/dist/types/components.d.ts +5 -0
  53. package/docs-json.json +85 -20
  54. package/hydrate/index.js +36 -11
  55. package/package.json +2 -2
  56. package/dist/cjs/table.worker-37f25c78.js.map +0 -1
  57. package/dist/esm/table.worker-86754436.js.map +0 -1
  58. package/dist/nano-components/p-6c47fdc2.js +0 -5
  59. package/dist/nano-components/p-7730ce8e.entry.js +0 -5
  60. package/dist/nano-components/p-7730ce8e.entry.js.map +0 -1
  61. package/dist/nano-components/p-fa658659.entry.js.map +0 -1
  62. /package/dist/nano-components/{p-099a573a.js.map → p-aeaa2ed9.js.map} +0 -0
  63. /package/dist/nano-components/{p-1525c97b.entry.js.map → p-b5805a8c.js.map} +0 -0
  64. /package/dist/nano-components/{p-6c47fdc2.js.map → p-e3ee4c68.entry.js.map} +0 -0
package/hydrate/index.js CHANGED
@@ -13194,6 +13194,7 @@ const detailsCss = "/*!@:host*/.sc-nano-details-h{box-sizing:border-box}/*!@*,\n
13194
13194
  * @slot icon-start - used for icons at the start of the handle
13195
13195
  * @slot label - can be used when you wish to insert complex label markup
13196
13196
  * @slot icon-end - used for icons at the end of the handle
13197
+ *
13197
13198
  * @part button - the main details ui control
13198
13199
  * @part label - the text wrapper of the ui control
13199
13200
  * @part icon--start - the icon wrapper at the start of the ui control
@@ -17230,7 +17231,7 @@ async function clientFetch(url, _a = {}) {
17230
17231
  }
17231
17232
  }
17232
17233
 
17233
- const globalNavCss = "/*!@:host*/.sc-nano-global-nav-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-global-nav,*.sc-nano-global-nav::before,*.sc-nano-global-nav::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-global-nav{display:none !important}/*!@.global-nav*/.global-nav.sc-nano-global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}/*!@.global-nav button*/.global-nav.sc-nano-global-nav button.sc-nano-global-nav{background:none;color:inherit;border:none}/*!@.global-nav .icon-btn*/.global-nav.sc-nano-global-nav .icon-btn.sc-nano-global-nav{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}/*!@.global-nav .icon-btn nano-icon*/.global-nav.sc-nano-global-nav .icon-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{width:18px;height:18px}/*!@.global-nav ::slotted(nano-nav-item[slot=icon])*/.global-nav .sc-nano-global-nav-s>nano-nav-item[slot=icon]{--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}/*!@.global-nav a*/.global-nav.sc-nano-global-nav a.sc-nano-global-nav{color:inherit;text-decoration:none;white-space:nowrap}/*!@.global-nav .nav-links_title*/.global-nav.sc-nano-global-nav .nav-links_title.sc-nano-global-nav{margin:8px 0 3px}/*!@.global-nav .nav-links ul*/.global-nav.sc-nano-global-nav .nav-links.sc-nano-global-nav ul.sc-nano-global-nav{margin:0;padding:0}/*!@.global-nav .nav-links li*/.global-nav.sc-nano-global-nav .nav-links.sc-nano-global-nav li.sc-nano-global-nav{list-style:none}/*!@.global-nav .login-btn*/.global-nav.sc-nano-global-nav .login-btn.sc-nano-global-nav{display:flex;align-items:center}/*!@.global-nav .menu-btn*/.global-nav.sc-nano-global-nav .menu-btn.sc-nano-global-nav{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}/*!@.site-content*/.site-content.sc-nano-global-nav{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}/*!@.mask*/.mask.sc-nano-global-nav{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}/*!@.mask.open*/.mask.open.sc-nano-global-nav{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}/*!@.bars*/.bars.sc-nano-global-nav{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}/*!@[stuck] .bars*/[stuck].sc-nano-global-nav .bars.sc-nano-global-nav{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}/*!@.bars::before*/.bars.sc-nano-global-nav::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}/*!@.main-bar*/.main-bar.sc-nano-global-nav{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}/*!@.main-bar:focus*/.main-bar.sc-nano-global-nav:focus{outline:none}/*!@:host(.ready) .main-bar*/.ready.sc-nano-global-nav-h .main-bar.sc-nano-global-nav{overflow-x:visible}/*!@.main-bar > *,\n.main-bar ::slotted(*)*/.main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.main-bar .sc-nano-global-nav-s>*{transition:opacity 0.2s ease}/*!@:host(:not(.ready)) .main-bar > *,\n:host(:not(.ready)) .main-bar ::slotted(*)*/.sc-nano-global-nav-h:not(.ready) .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h:not(.ready) .main-bar .sc-nano-global-nav-s>*{opacity:0 !important}/*!@:host(.ready) .main-bar > *,\n:host(.ready) .main-bar ::slotted(*)*/.ready.sc-nano-global-nav-h .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h.ready .main-bar .sc-nano-global-nav-s>*{opacity:1}/*!@:host(.resizing) .main-bar > *,\n:host(.resizing) .main-bar ::slotted(*)*/.resizing.sc-nano-global-nav-h .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h.resizing .main-bar .sc-nano-global-nav-s>*{opacity:0 !important}/*!@.main-bar > **/.main-bar.sc-nano-global-nav>*.sc-nano-global-nav{flex:0 0 auto}/*!@.main-bar > * ::slotted(nano-nav-item[slot=icon])*/.main-bar .sc-nano-global-nav-s>nano-nav-item[slot=icon]{-webkit-margin-start:11px;margin-inline-start:11px}/*!@.main-bar > * ::slotted(nano-nav-item),\n.main-bar > * nano-nav-item*/.main-bar .sc-nano-global-nav-s>nano-nav-item,.main-bar.sc-nano-global-nav>*.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}/*!@.main-bar .icon-btn*/.main-bar.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}/*!@:host(.threshold-2) .main-bar .icon-btn*/.threshold-2.sc-nano-global-nav-h .main-bar.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}/*!@.main-bar .menu-btn.icon-btn*/.main-bar.sc-nano-global-nav .menu-btn.icon-btn.sc-nano-global-nav{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}/*!@.main-bar .logo*/.main-bar.sc-nano-global-nav .logo.sc-nano-global-nav{height:36px;width:200px;min-width:200px}/*!@:host(:not(.threshold-1)) .main-bar .logo*/.sc-nano-global-nav-h:not(.threshold-1) .main-bar.sc-nano-global-nav .logo.sc-nano-global-nav{height:30px}/*!@.main-bar .logo-link*/.main-bar.sc-nano-global-nav .logo-link.sc-nano-global-nav{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}/*!@.main-bar .nav-links*/.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav{flex:0 0 auto;display:flex;justify-content:space-around}/*!@.main-bar .nav-links ul*/.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav ul.sc-nano-global-nav{display:flex;justify-content:space-around}/*!@.main-bar .nav-links ::slotted(nano-nav-item),\n.main-bar .nav-links nano-nav-item*/.main-bar .nav-links .sc-nano-global-nav-s>nano-nav-item,.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}/*!@.main-bar .nav-links--main*/.main-bar.sc-nano-global-nav .nav-links--main.sc-nano-global-nav{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}/*!@.main-bar .nav-links--main ::slotted(nano-nav-item)*/.main-bar .nav-links--main .sc-nano-global-nav-s>nano-nav-item{--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}/*!@.main-bar .nav-links--sub*/.main-bar.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}/*!@.main-bar .login-btn*/.main-bar.sc-nano-global-nav .login-btn.sc-nano-global-nav{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}/*!@.main-bar .measure-ele*/.main-bar.sc-nano-global-nav .measure-ele.sc-nano-global-nav{min-width:1px;display:block;margin:0;padding:0}/*!@.sticker-trigger*/.sticker-trigger.sc-nano-global-nav{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}/*!@.sticker-trigger + .sticker-trigger*/.sticker-trigger.sc-nano-global-nav+.sticker-trigger.sc-nano-global-nav{display:none}/*!@.gn-menu*/.gn-menu.sc-nano-global-nav{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}/*!@:host(.threshold-4) .gn-menu*/.threshold-4.sc-nano-global-nav-h .gn-menu.sc-nano-global-nav{position:absolute;width:calc(100vw - 20px)}/*!@.gn-menu.menu-full-screen*/.gn-menu.menu-full-screen.sc-nano-global-nav{width:100vw !important}/*!@.gn-menu_wrap*/.gn-menu_wrap.sc-nano-global-nav{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease}/*!@.gn-menu_wrap.has-promotion*/.gn-menu_wrap.has-promotion.sc-nano-global-nav{padding:var(--menu-padding) 0 0}/*!@.gn-menu.open*/.gn-menu.open.sc-nano-global-nav{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}/*!@.gn-menu.open .gn-menu_wrap*/.gn-menu.open.sc-nano-global-nav .gn-menu_wrap.sc-nano-global-nav{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}/*!@.gn-menu_actions*/.gn-menu_actions.sc-nano-global-nav{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}/*!@.gn-menu_actions-counter*/.gn-menu_actions-counter.sc-nano-global-nav{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}/*!@.gn-menu .content-wrap*/.gn-menu.sc-nano-global-nav .content-wrap.sc-nano-global-nav{position:relative;overflow:hidden;transition:0.2s ease min-height;min-height:190px}/*!@.gn-menu .content--sub*/.gn-menu.sc-nano-global-nav .content--sub.sc-nano-global-nav{padding:var(--menu-padding) 0 var(--menu-padding) 7px}/*!@.gn-menu .menu-btn*/.gn-menu.sc-nano-global-nav .menu-btn.sc-nano-global-nav{-webkit-margin-end:auto;margin-inline-end:auto}/*!@.gn-menu .nav-links*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav{display:flex;flex-wrap:wrap}/*!@.gn-menu .nav-links ::slotted(nano-nav-item),\n.gn-menu .nav-links nano-nav-item*/.gn-menu .nav-links .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}/*!@.gn-menu .nav-links .user-nav*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}/*!@.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),\n.gn-menu .nav-links .user-nav nano-nav-item*/.gn-menu .nav-links .user-nav .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{font-weight:500;--bg-color:transparent}/*!@.gn-menu .nav-links .user-nav .content*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .content.sc-nano-global-nav{padding:0;background-color:var(--menu-user-panel-bg)}/*!@.gn-menu .nav-links .user-nav .content--sub*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .content--sub.sc-nano-global-nav{padding-inline:var(--menu-padding)}/*!@.gn-menu .nav-links .user-nav .back-btn*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .back-btn.sc-nano-global-nav{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}/*!@.gn-menu .nav-links_title*/.gn-menu.sc-nano-global-nav .nav-links_title.sc-nano-global-nav{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}/*!@.gn-menu .nav-links_title--sites*/.gn-menu.sc-nano-global-nav .nav-links_title--sites.sc-nano-global-nav{-webkit-border-after:none;border-block-end:none}/*!@.gn-menu .nav-links-wrap*/.gn-menu.sc-nano-global-nav .nav-links-wrap.sc-nano-global-nav{margin:18px 0}/*!@.gn-menu .nav-links-wrap:last-child*/.gn-menu.sc-nano-global-nav .nav-links-wrap.sc-nano-global-nav:last-child{-webkit-margin-after:0;margin-block-end:0}/*!@.gn-menu .nav-links .back-btn*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}/*!@.gn-menu .nav-links .back-btn:hover*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav:hover{color:var(--menu-text-color)}/*!@.gn-menu .nav-links .back-btn nano-icon*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}/*!@.gn-menu .nav-links--sub*/.gn-menu.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav{display:flex;flex-wrap:wrap}/*!@.gn-menu .nav-links--sub ::slotted(nano-nav-item),\n.gn-menu .nav-links--sub nano-nav-item*/.gn-menu .nav-links--sub .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}/*!@.gn-menu .nav-links--sites ::slotted(nano-nav-item),\n.gn-menu .nav-links--sites nano-nav-item*/.gn-menu .nav-links--sites .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links--sites.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{width:100%}/*!@.gn-menu .nav-links .content*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .content.sc-nano-global-nav{padding:8px var(--menu-padding)}/*!@.gn-menu .login-btn*/.gn-menu.sc-nano-global-nav .login-btn.sc-nano-global-nav{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}/*!@.gn-menu .login-btn nano-icon*/.gn-menu.sc-nano-global-nav .login-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-start:10px;margin-inline-start:10px}/*!@.gn-menu .logout-btn*/.gn-menu.sc-nano-global-nav .logout-btn.sc-nano-global-nav{justify-content:flex-end}/*!@.gn-menu .logout-btn a*/.gn-menu.sc-nano-global-nav .logout-btn.sc-nano-global-nav a.sc-nano-global-nav{padding:0 5px}/*!@.search-btn::before*/.search-btn.sc-nano-global-nav::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@.search-btn--open::before*/.search-btn--open.sc-nano-global-nav::before{transform:translateZ(0) scaleX(1);opacity:0.7}/*!@.search-bar*/.search-bar.sc-nano-global-nav{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto}/*!@.search-bar .search-widget*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}/*!@.search-bar .search-widget .search-icon--search*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .search-icon--search.sc-nano-global-nav{display:none}/*!@.search-bar .search-widget .search-input*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .search-input.sc-nano-global-nav{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}/*!@.search-bar .search-widget nano-select.search-input*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav nano-select.search-input.sc-nano-global-nav{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}/*!@.search-bar .search-widget nano-select.search-input.has-focus*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav nano-select.search-input.has-focus.sc-nano-global-nav{color:var(--bar-color-shade)}/*!@.search-bar .search-widget .select-input__arrow*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .select-input__arrow.sc-nano-global-nav{font-size:0.75em}/*!@.search-bar .search-widget .select__mask.sc-nano-select*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .select__mask.sc-nano-select.sc-nano-global-nav{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}/*!@.search-bar .search-inputs*/.search-bar.sc-nano-global-nav .search-inputs.sc-nano-global-nav{padding:0;margin:0}/*!@.search-bar .search-autocomplete*/.search-bar.sc-nano-global-nav .search-autocomplete.sc-nano-global-nav{inset-block-start:100%;width:100%}/*!@.search-widget*/.search-widget.sc-nano-global-nav{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}/*!@.search-inputs*/.search-inputs.sc-nano-global-nav{display:flex;margin:0}/*!@.search-inputs input[type=submit]*/.search-inputs.sc-nano-global-nav input[type=submit].sc-nano-global-nav{display:none}/*!@.search-autocomplete*/.search-autocomplete.sc-nano-global-nav{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}/*!@.search-autocomplete-hit*/.search-autocomplete-hit.sc-nano-global-nav{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}/*!@.search-autocomplete-hit-scope*/.search-autocomplete-hit-scope.sc-nano-global-nav{color:#a7b0b3;font-weight:600}/*!@.search-autocomplete-hit:hover, .search-autocomplete-hit:focus-visible*/.search-autocomplete-hit.sc-nano-global-nav:hover,.search-autocomplete-hit.sc-nano-global-nav:focus-visible{background-color:#e4e6e8}/*!@.search-autocomplete-hit:focus-visible*/.search-autocomplete-hit.sc-nano-global-nav:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.search-autocomplete-hit:focus*/.search-autocomplete-hit.sc-nano-global-nav:focus{outline:none}/*!@.search-autocomplete-hit .search__highlight,\n.search-autocomplete-hit em*/.search-autocomplete-hit.sc-nano-global-nav .search__highlight.sc-nano-global-nav,.search-autocomplete-hit.sc-nano-global-nav em.sc-nano-global-nav{font-weight:bold;font-style:normal}/*!@.search-autocomplete-hit--no-result:hover, .search-autocomplete-hit--no-result:focus*/.search-autocomplete-hit--no-result.sc-nano-global-nav:hover,.search-autocomplete-hit--no-result.sc-nano-global-nav:focus{background:none !important}/*!@.search-autocomplete-foot*/.search-autocomplete-foot.sc-nano-global-nav{margin:7px 0 0}/*!@.search-autocomplete-submit*/.search-autocomplete-submit.sc-nano-global-nav{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}/*!@.search-autocomplete-submit:hover, .search-autocomplete-submit:focus*/.search-autocomplete-submit.sc-nano-global-nav:hover,.search-autocomplete-submit.sc-nano-global-nav:focus{background-color:#e4e6e8}/*!@nano-select.search-input*/nano-select.search-input.sc-nano-global-nav{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}/*!@:host(:not(.ready)) nano-select.search-input*/.sc-nano-global-nav-h:not(.ready) nano-select.search-input.sc-nano-global-nav{overflow:hidden;max-height:1em}/*!@nano-select.search-input .down-arrow*/nano-select.search-input.sc-nano-global-nav .down-arrow.sc-nano-global-nav{font-size:0.65em}/*!@nano-input.search-input*/nano-input.search-input.sc-nano-global-nav{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}/*!@:host([dir=rtl]) nano-input.search-input*/[dir=rtl].sc-nano-global-nav-h nano-input.search-input.sc-nano-global-nav{--input-border-radius:5px 0 0 5px}/*!@:host(:not(.ready)) nano-input.search-input*/.sc-nano-global-nav-h:not(.ready) nano-input.search-input.sc-nano-global-nav{overflow:hidden;max-height:1em}/*!@nano-input.search-input .search-icon*/nano-input.search-input.sc-nano-global-nav .search-icon.sc-nano-global-nav{background:none;padding:0 8px;display:none;font-size:0.9em}/*!@nano-input.search-input .search-icon--show*/nano-input.search-input.sc-nano-global-nav .search-icon--show.sc-nano-global-nav{display:flex !important}/*!@nano-input.search-input .search-icon--loader*/nano-input.search-input.sc-nano-global-nav .search-icon--loader.sc-nano-global-nav{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}/*!@nano-input.search-input .search-icon nano-icon*/nano-input.search-input.sc-nano-global-nav .search-icon.sc-nano-global-nav nano-icon.sc-nano-global-nav{height:1.4em}/*!@.user-profile*/.user-profile.sc-nano-global-nav{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}/*!@.user-profile .left*/.user-profile.sc-nano-global-nav .left.sc-nano-global-nav{display:flex;align-items:center}/*!@.user-profile .avatar-container*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav{position:relative}/*!@.user-profile .avatar-container img.avatar*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav img.avatar.sc-nano-global-nav{border-radius:50px}/*!@.user-profile .avatar-container img.logo-small*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav img.logo-small.sc-nano-global-nav{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}/*!@.user-profile .user-details*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav{display:flex;flex-direction:column;margin:0 1.25em;color:white}/*!@.user-profile .user-details .name*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .name.sc-nano-global-nav{font-size:1.25em}/*!@.user-profile .user-details .bio*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .bio.sc-nano-global-nav{margin:0.5em 0}/*!@.user-profile .user-details .kudos span*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .kudos.sc-nano-global-nav span.sc-nano-global-nav{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}/*!@.user-profile .chevron-right*/.user-profile.sc-nano-global-nav .chevron-right.sc-nano-global-nav{font-size:1.5em;color:white}/*!@.user-links*/.user-links.sc-nano-global-nav{position:relative}/*!@.user-links .icon-btn*/.user-links.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-padding-end:0;padding-inline-end:0;font-weight:500;padding:7px}/*!@.user-links .icon-btn nano-icon*/.user-links.sc-nano-global-nav .icon-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}/*!@.user-links .icon-btn.open nano-icon*/.user-links.sc-nano-global-nav .icon-btn.open.sc-nano-global-nav nano-icon.sc-nano-global-nav{transform:rotate(180deg);color:#007495}/*!@.user-links-panel*/.user-links-panel.sc-nano-global-nav{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}/*!@.user-links-panel:focus*/.user-links-panel.sc-nano-global-nav:focus{outline:none}/*!@.user-links-panel.show*/.user-links-panel.show.sc-nano-global-nav{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}/*!@.user-links-panel-content*/.user-links-panel-content.sc-nano-global-nav{padding:0 18px;display:flex;flex-direction:column;color:white}/*!@.user-links-panel-content a*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}/*!@.user-links-panel-content a:hover, .user-links-panel-content a:focus*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:hover,.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:focus{color:#455556}/*!@.user-links-panel-content a:last-child*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:last-child{-webkit-border-after:none;border-block-end:none}/*!@.user-links-panel-foot*/.user-links-panel-foot.sc-nano-global-nav{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}/*!@.user-links-panel-foot a:hover*/.user-links-panel-foot.sc-nano-global-nav a.sc-nano-global-nav:hover{text-decoration:underline}/*!@.user-links-panel .user-profile*/.user-links-panel.sc-nano-global-nav .user-profile.sc-nano-global-nav{background-color:var(--bar-user-panel-bg)}/*!@:host*/.sc-nano-global-nav-h{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}/*!@:host input,\n:host select,\n:host button*/.sc-nano-global-nav-h input.sc-nano-global-nav,.sc-nano-global-nav-h select.sc-nano-global-nav,.sc-nano-global-nav-h button.sc-nano-global-nav{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}/*!@:host a:focus,\n:host button:focus*/.sc-nano-global-nav-h a.sc-nano-global-nav:focus,.sc-nano-global-nav-h button.sc-nano-global-nav:focus{outline:none}/*!@:host a:focus-visible,\n:host button:focus-visible*/.sc-nano-global-nav-h a.sc-nano-global-nav:focus-visible,.sc-nano-global-nav-h button.sc-nano-global-nav:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
17234
+ const globalNavCss = "/*!@:host*/.sc-nano-global-nav-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-global-nav,*.sc-nano-global-nav::before,*.sc-nano-global-nav::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-global-nav{display:none !important}/*!@.global-nav*/.global-nav.sc-nano-global-nav{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;z-index:var(--nano-layer-index-menubar, 10)}/*!@.global-nav button*/.global-nav.sc-nano-global-nav button.sc-nano-global-nav{background:none;color:inherit;border:none}/*!@.global-nav .icon-btn*/.global-nav.sc-nano-global-nav .icon-btn.sc-nano-global-nav{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}/*!@.global-nav .icon-btn nano-icon*/.global-nav.sc-nano-global-nav .icon-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{width:18px;height:18px}/*!@.global-nav ::slotted(nano-nav-item[slot=icon])*/.global-nav .sc-nano-global-nav-s>nano-nav-item[slot=icon]{--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}/*!@.global-nav a*/.global-nav.sc-nano-global-nav a.sc-nano-global-nav{color:inherit;text-decoration:none;white-space:nowrap}/*!@.global-nav .nav-links_title*/.global-nav.sc-nano-global-nav .nav-links_title.sc-nano-global-nav{margin:8px 0 3px}/*!@.global-nav .nav-links ul*/.global-nav.sc-nano-global-nav .nav-links.sc-nano-global-nav ul.sc-nano-global-nav{margin:0;padding:0}/*!@.global-nav .nav-links li*/.global-nav.sc-nano-global-nav .nav-links.sc-nano-global-nav li.sc-nano-global-nav{list-style:none}/*!@.global-nav .login-btn*/.global-nav.sc-nano-global-nav .login-btn.sc-nano-global-nav{display:flex;align-items:center}/*!@.global-nav .menu-btn*/.global-nav.sc-nano-global-nav .menu-btn.sc-nano-global-nav{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}/*!@.site-content*/.site-content.sc-nano-global-nav{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}/*!@.mask*/.mask.sc-nano-global-nav{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;height:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}/*!@.mask.open*/.mask.open.sc-nano-global-nav{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:3;visibility:visible}/*!@.bars*/.bars.sc-nano-global-nav{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-width:100%;min-width:100%;box-shadow:none;transition:0.2s ease box-shadow}/*!@[stuck] .bars*/[stuck].sc-nano-global-nav .bars.sc-nano-global-nav{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}/*!@.bars::before*/.bars.sc-nano-global-nav::before{content:\"\";width:100%;height:100%;z-index:-1;background:var(--bar-background);position:absolute}/*!@.main-bar*/.main-bar.sc-nano-global-nav{width:100%;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}/*!@.main-bar:focus*/.main-bar.sc-nano-global-nav:focus{outline:none}/*!@:host(.ready) .main-bar*/.ready.sc-nano-global-nav-h .main-bar.sc-nano-global-nav{overflow-x:visible}/*!@.main-bar > *,\n.main-bar ::slotted(*)*/.main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.main-bar .sc-nano-global-nav-s>*{transition:opacity 0.2s ease}/*!@:host(:not(.ready)) .main-bar > *,\n:host(:not(.ready)) .main-bar ::slotted(*)*/.sc-nano-global-nav-h:not(.ready) .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h:not(.ready) .main-bar .sc-nano-global-nav-s>*{opacity:0 !important}/*!@:host(.ready) .main-bar > *,\n:host(.ready) .main-bar ::slotted(*)*/.ready.sc-nano-global-nav-h .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h.ready .main-bar .sc-nano-global-nav-s>*{opacity:1}/*!@:host(.resizing) .main-bar > *,\n:host(.resizing) .main-bar ::slotted(*)*/.resizing.sc-nano-global-nav-h .main-bar.sc-nano-global-nav>*.sc-nano-global-nav,.sc-nano-global-nav-h.resizing .main-bar .sc-nano-global-nav-s>*{opacity:0 !important}/*!@.main-bar > **/.main-bar.sc-nano-global-nav>*.sc-nano-global-nav{flex:0 0 auto}/*!@.main-bar > * ::slotted(nano-nav-item[slot=icon])*/.main-bar .sc-nano-global-nav-s>nano-nav-item[slot=icon]{-webkit-margin-start:11px;margin-inline-start:11px}/*!@.main-bar > * ::slotted(nano-nav-item),\n.main-bar > * nano-nav-item*/.main-bar .sc-nano-global-nav-s>nano-nav-item,.main-bar.sc-nano-global-nav>*.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}/*!@.main-bar .icon-btn*/.main-bar.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:6px;margin-inline-start:6px}/*!@:host(.threshold-2) .main-bar .icon-btn*/.threshold-2.sc-nano-global-nav-h .main-bar.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:11px;margin-inline-start:11px}/*!@.main-bar .menu-btn.icon-btn*/.main-bar.sc-nano-global-nav .menu-btn.icon-btn.sc-nano-global-nav{margin:0 !important;-webkit-border-end:1.5px solid var(--bar-color-shade);border-inline-end:1.5px solid var(--bar-color-shade)}/*!@.main-bar .logo*/.main-bar.sc-nano-global-nav .logo.sc-nano-global-nav{height:36px;width:200px;min-width:200px}/*!@:host(:not(.threshold-1)) .main-bar .logo*/.sc-nano-global-nav-h:not(.threshold-1) .main-bar.sc-nano-global-nav .logo.sc-nano-global-nav{height:30px}/*!@.main-bar .logo-link*/.main-bar.sc-nano-global-nav .logo-link.sc-nano-global-nav{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}/*!@.main-bar .nav-links*/.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav{flex:0 0 auto;display:flex;justify-content:space-around}/*!@.main-bar .nav-links ul*/.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav ul.sc-nano-global-nav{display:flex;justify-content:space-around}/*!@.main-bar .nav-links ::slotted(nano-nav-item),\n.main-bar .nav-links nano-nav-item*/.main-bar .nav-links .sc-nano-global-nav-s>nano-nav-item,.main-bar.sc-nano-global-nav .nav-links.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}/*!@.main-bar .nav-links--main*/.main-bar.sc-nano-global-nav .nav-links--main.sc-nano-global-nav{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;-webkit-margin-end:auto;margin-inline-end:auto}/*!@.main-bar .nav-links--main ::slotted(nano-nav-item)*/.main-bar .nav-links--main .sc-nano-global-nav-s>nano-nav-item{--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}/*!@.main-bar .nav-links--sub*/.main-bar.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav{--color:var(--color, #e2e2e2);-webkit-margin-start:6px;margin-inline-start:6px;justify-content:flex-end}/*!@.main-bar .login-btn*/.main-bar.sc-nano-global-nav .login-btn.sc-nano-global-nav{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}/*!@.main-bar .measure-ele*/.main-bar.sc-nano-global-nav .measure-ele.sc-nano-global-nav{min-width:1px;display:block;margin:0;padding:0}/*!@.sticker-trigger*/.sticker-trigger.sc-nano-global-nav{background:var(--bar-background);width:100%;height:1px;z-index:20;position:relative}/*!@.sticker-trigger + .sticker-trigger*/.sticker-trigger.sc-nano-global-nav+.sticker-trigger.sc-nano-global-nav{display:none}/*!@.gn-menu*/.gn-menu.sc-nano-global-nav{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;height:100vh;width:100vw;overflow-y:auto}/*!@:host(.threshold-4) .gn-menu*/.threshold-4.sc-nano-global-nav-h .gn-menu.sc-nano-global-nav{position:absolute;width:calc(100vw - 20px)}/*!@.gn-menu.menu-full-screen*/.gn-menu.menu-full-screen.sc-nano-global-nav{width:100vw !important}/*!@.gn-menu_wrap*/.gn-menu_wrap.sc-nano-global-nav{max-width:92vw;width:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;-webkit-margin-after:36px;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}/*!@.gn-menu_wrap.has-promotion*/.gn-menu_wrap.has-promotion.sc-nano-global-nav{padding:var(--menu-padding) 0 0}/*!@.gn-menu.open*/.gn-menu.open.sc-nano-global-nav{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}/*!@.gn-menu.open .gn-menu_wrap*/.gn-menu.open.sc-nano-global-nav .gn-menu_wrap.sc-nano-global-nav{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}/*!@.gn-menu_actions*/.gn-menu_actions.sc-nano-global-nav{-webkit-padding-end:calc(var(--menu-padding) / 2);padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}/*!@.gn-menu_actions-counter*/.gn-menu_actions-counter.sc-nano-global-nav{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;height:14px;line-height:14px;width:auto;min-width:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}/*!@.gn-menu .content-wrap*/.gn-menu.sc-nano-global-nav .content-wrap.sc-nano-global-nav{position:relative;transition:0.2s ease min-height;min-height:190px}/*!@.gn-menu .content--sub*/.gn-menu.sc-nano-global-nav .content--sub.sc-nano-global-nav{padding:var(--menu-padding) 0 var(--menu-padding) 7px}/*!@.gn-menu .menu-btn*/.gn-menu.sc-nano-global-nav .menu-btn.sc-nano-global-nav{-webkit-margin-end:auto;margin-inline-end:auto}/*!@.gn-menu .nav-links*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav{display:flex;flex-wrap:wrap}/*!@.gn-menu .nav-links ::slotted(nano-nav-item),\n.gn-menu .nav-links nano-nav-item*/.gn-menu .nav-links .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;width:100%}/*!@.gn-menu .nav-links .user-nav*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}/*!@.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),\n.gn-menu .nav-links .user-nav nano-nav-item*/.gn-menu .nav-links .user-nav .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{font-weight:500;--bg-color:transparent}/*!@.gn-menu .nav-links .user-nav .content*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .content.sc-nano-global-nav{padding:0;background-color:var(--menu-user-panel-bg)}/*!@.gn-menu .nav-links .user-nav .content--sub*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .content--sub.sc-nano-global-nav{padding-inline:var(--menu-padding)}/*!@.gn-menu .nav-links .user-nav .back-btn*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .user-nav.sc-nano-global-nav .back-btn.sc-nano-global-nav{-webkit-padding-start:var(--menu-padding);padding-inline-start:var(--menu-padding)}/*!@.gn-menu .nav-links_title*/.gn-menu.sc-nano-global-nav .nav-links_title.sc-nano-global-nav{margin:0 var(--menu-padding) 4px;-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);-webkit-padding-after:8px;padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}/*!@.gn-menu .nav-links_title--sites*/.gn-menu.sc-nano-global-nav .nav-links_title--sites.sc-nano-global-nav{-webkit-border-after:none;border-block-end:none}/*!@.gn-menu .nav-links-wrap*/.gn-menu.sc-nano-global-nav .nav-links-wrap.sc-nano-global-nav{margin:18px 0}/*!@.gn-menu .nav-links-wrap:last-child*/.gn-menu.sc-nano-global-nav .nav-links-wrap.sc-nano-global-nav:last-child{-webkit-margin-after:0;margin-block-end:0}/*!@.gn-menu .nav-links .back-btn*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav{-webkit-border-before:1px solid var(--menu-hint-color);border-block-start:1px solid var(--menu-hint-color);-webkit-border-after:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;width:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}/*!@.gn-menu .nav-links .back-btn:hover*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav:hover{color:var(--menu-text-color)}/*!@.gn-menu .nav-links .back-btn nano-icon*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .back-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-end:10px;margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}/*!@.gn-menu .nav-links--sub*/.gn-menu.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav{display:flex;flex-wrap:wrap}/*!@.gn-menu .nav-links--sub ::slotted(nano-nav-item),\n.gn-menu .nav-links--sub nano-nav-item*/.gn-menu .nav-links--sub .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links--sub.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;width:50%;line-height:1.8}/*!@.gn-menu .nav-links--sites ::slotted(nano-nav-item),\n.gn-menu .nav-links--sites nano-nav-item*/.gn-menu .nav-links--sites .sc-nano-global-nav-s>nano-nav-item,.gn-menu.sc-nano-global-nav .nav-links--sites.sc-nano-global-nav nano-nav-item.sc-nano-global-nav{width:100%}/*!@.gn-menu .nav-links .content*/.gn-menu.sc-nano-global-nav .nav-links.sc-nano-global-nav .content.sc-nano-global-nav{padding:8px var(--menu-padding)}/*!@.gn-menu .login-btn*/.gn-menu.sc-nano-global-nav .login-btn.sc-nano-global-nav{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}/*!@.gn-menu .login-btn nano-icon*/.gn-menu.sc-nano-global-nav .login-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-start:10px;margin-inline-start:10px}/*!@.gn-menu .logout-btn*/.gn-menu.sc-nano-global-nav .logout-btn.sc-nano-global-nav{justify-content:flex-end}/*!@.gn-menu .logout-btn a*/.gn-menu.sc-nano-global-nav .logout-btn.sc-nano-global-nav a.sc-nano-global-nav{padding:0 5px}/*!@.search-btn::before*/.search-btn.sc-nano-global-nav::before{content:\"\";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@.search-btn--open::before*/.search-btn--open.sc-nano-global-nav::before{transform:translateZ(0) scaleX(1);opacity:0.7}/*!@.search-bar*/.search-bar.sc-nano-global-nav{height:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-width:45em;-webkit-margin-start:auto;margin-inline-start:auto}/*!@.search-bar .search-widget*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav{margin:0;overflow:inherit;max-width:none;max-height:none;min-width:auto;-webkit-padding-end:0;padding-inline-end:0}/*!@.search-bar .search-widget .search-icon--search*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .search-icon--search.sc-nano-global-nav{display:none}/*!@.search-bar .search-widget .search-input*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .search-input.sc-nano-global-nav{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}/*!@.search-bar .search-widget nano-select.search-input*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav nano-select.search-input.sc-nano-global-nav{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}/*!@.search-bar .search-widget nano-select.search-input.has-focus*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav nano-select.search-input.has-focus.sc-nano-global-nav{color:var(--bar-color-shade)}/*!@.search-bar .search-widget .select-input__arrow*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .select-input__arrow.sc-nano-global-nav{font-size:0.75em}/*!@.search-bar .search-widget .select__mask.sc-nano-select*/.search-bar.sc-nano-global-nav .search-widget.sc-nano-global-nav .select__mask.sc-nano-select.sc-nano-global-nav{line-height:2.35em;min-height:2.35em;-webkit-padding-before:2px;padding-block-start:2px}/*!@.search-bar .search-inputs*/.search-bar.sc-nano-global-nav .search-inputs.sc-nano-global-nav{padding:0;margin:0}/*!@.search-bar .search-autocomplete*/.search-bar.sc-nano-global-nav .search-autocomplete.sc-nano-global-nav{inset-block-start:100%;width:100%}/*!@.search-widget*/.search-widget.sc-nano-global-nav{-webkit-padding-end:var(--bar-item-spacing);padding-inline-end:var(--bar-item-spacing);-webkit-margin-start:var(--bar-item-spacing);margin-inline-start:var(--bar-item-spacing);-webkit-margin-end:auto;margin-inline-end:auto;position:relative;flex:1 1 auto;max-width:500px;min-width:350px;max-height:36px;inset-block-start:-1px}/*!@.search-inputs*/.search-inputs.sc-nano-global-nav{display:flex;margin:0}/*!@.search-inputs input[type=submit]*/.search-inputs.sc-nano-global-nav input[type=submit].sc-nano-global-nav{display:none}/*!@.search-autocomplete*/.search-autocomplete.sc-nano-global-nav{position:absolute;inset-block-start:calc(100% + 15px);width:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;-webkit-padding-before:calc(var(--bar-vertical-padding) / 2);padding-block-start:calc(var(--bar-vertical-padding) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:1px;padding-block-end:1px;-webkit-padding-start:0;padding-inline-start:0;z-index:1}/*!@.search-autocomplete-hit*/.search-autocomplete-hit.sc-nano-global-nav{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}/*!@.search-autocomplete-hit-scope*/.search-autocomplete-hit-scope.sc-nano-global-nav{color:#a7b0b3;font-weight:600}/*!@.search-autocomplete-hit:hover, .search-autocomplete-hit:focus-visible*/.search-autocomplete-hit.sc-nano-global-nav:hover,.search-autocomplete-hit.sc-nano-global-nav:focus-visible{background-color:#e4e6e8}/*!@.search-autocomplete-hit:focus-visible*/.search-autocomplete-hit.sc-nano-global-nav:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.search-autocomplete-hit:focus*/.search-autocomplete-hit.sc-nano-global-nav:focus{outline:none}/*!@.search-autocomplete-hit .search__highlight,\n.search-autocomplete-hit em*/.search-autocomplete-hit.sc-nano-global-nav .search__highlight.sc-nano-global-nav,.search-autocomplete-hit.sc-nano-global-nav em.sc-nano-global-nav{font-weight:bold;font-style:normal}/*!@.search-autocomplete-hit--no-result:hover, .search-autocomplete-hit--no-result:focus*/.search-autocomplete-hit--no-result.sc-nano-global-nav:hover,.search-autocomplete-hit--no-result.sc-nano-global-nav:focus{background:none !important}/*!@.search-autocomplete-foot*/.search-autocomplete-foot.sc-nano-global-nav{margin:7px 0 0}/*!@.search-autocomplete-submit*/.search-autocomplete-submit.sc-nano-global-nav{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;width:100%;text-decoration:underline;-webkit-border-before:1px solid #e8eaea;border-block-start:1px solid #e8eaea}/*!@.search-autocomplete-submit:hover, .search-autocomplete-submit:focus*/.search-autocomplete-submit.sc-nano-global-nav:hover,.search-autocomplete-submit.sc-nano-global-nav:focus{background-color:#e4e6e8}/*!@nano-select.search-input*/nano-select.search-input.sc-nano-global-nav{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;width:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}/*!@:host(:not(.ready)) nano-select.search-input*/.sc-nano-global-nav-h:not(.ready) nano-select.search-input.sc-nano-global-nav{overflow:hidden;max-height:1em}/*!@nano-select.search-input .down-arrow*/nano-select.search-input.sc-nano-global-nav .down-arrow.sc-nano-global-nav{font-size:0.65em}/*!@nano-input.search-input*/nano-input.search-input.sc-nano-global-nav{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;width:206px;display:flex;align-items:center;flex-direction:column;flex:1}/*!@:host([dir=rtl]) nano-input.search-input*/[dir=rtl].sc-nano-global-nav-h nano-input.search-input.sc-nano-global-nav{--input-border-radius:5px 0 0 5px}/*!@:host(:not(.ready)) nano-input.search-input*/.sc-nano-global-nav-h:not(.ready) nano-input.search-input.sc-nano-global-nav{overflow:hidden;max-height:1em}/*!@nano-input.search-input .search-icon*/nano-input.search-input.sc-nano-global-nav .search-icon.sc-nano-global-nav{background:none;padding:0 8px;display:none;font-size:0.9em}/*!@nano-input.search-input .search-icon--show*/nano-input.search-input.sc-nano-global-nav .search-icon--show.sc-nano-global-nav{display:flex !important}/*!@nano-input.search-input .search-icon--loader*/nano-input.search-input.sc-nano-global-nav .search-icon--loader.sc-nano-global-nav{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}/*!@nano-input.search-input .search-icon nano-icon*/nano-input.search-input.sc-nano-global-nav .search-icon.sc-nano-global-nav nano-icon.sc-nano-global-nav{height:1.4em}/*!@.user-profile*/.user-profile.sc-nano-global-nav{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}/*!@.user-profile .left*/.user-profile.sc-nano-global-nav .left.sc-nano-global-nav{display:flex;align-items:center}/*!@.user-profile .avatar-container*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav{position:relative}/*!@.user-profile .avatar-container img.avatar*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav img.avatar.sc-nano-global-nav{border-radius:50px}/*!@.user-profile .avatar-container img.logo-small*/.user-profile.sc-nano-global-nav .avatar-container.sc-nano-global-nav img.logo-small.sc-nano-global-nav{position:absolute;height:30px;width:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}/*!@.user-profile .user-details*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav{display:flex;flex-direction:column;margin:0 1.25em;color:white}/*!@.user-profile .user-details .name*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .name.sc-nano-global-nav{font-size:1.25em}/*!@.user-profile .user-details .bio*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .bio.sc-nano-global-nav{margin:0.5em 0}/*!@.user-profile .user-details .kudos span*/.user-profile.sc-nano-global-nav .user-details.sc-nano-global-nav .kudos.sc-nano-global-nav span.sc-nano-global-nav{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}/*!@.user-profile .chevron-right*/.user-profile.sc-nano-global-nav .chevron-right.sc-nano-global-nav{font-size:1.5em;color:white}/*!@.user-links*/.user-links.sc-nano-global-nav{position:relative}/*!@.user-links .icon-btn*/.user-links.sc-nano-global-nav .icon-btn.sc-nano-global-nav{-webkit-padding-end:0;padding-inline-end:0;font-weight:500;padding:7px}/*!@.user-links .icon-btn nano-icon*/.user-links.sc-nano-global-nav .icon-btn.sc-nano-global-nav nano-icon.sc-nano-global-nav{-webkit-margin-start:5px;margin-inline-start:5px;width:16px;height:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}/*!@.user-links .icon-btn.open nano-icon*/.user-links.sc-nano-global-nav .icon-btn.open.sc-nano-global-nav nano-icon.sc-nano-global-nav{transform:rotate(180deg);color:#007495}/*!@.user-links-panel*/.user-links-panel.sc-nano-global-nav{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-width:318px;z-index:2}/*!@.user-links-panel:focus*/.user-links-panel.sc-nano-global-nav:focus{outline:none}/*!@.user-links-panel.show*/.user-links-panel.show.sc-nano-global-nav{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}/*!@.user-links-panel-content*/.user-links-panel-content.sc-nano-global-nav{padding:0 18px;display:flex;flex-direction:column;color:white}/*!@.user-links-panel-content a*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav{padding:11px 0;-webkit-border-after:#669dac 1px solid;border-block-end:#669dac 1px solid}/*!@.user-links-panel-content a:hover, .user-links-panel-content a:focus*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:hover,.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:focus{color:#455556}/*!@.user-links-panel-content a:last-child*/.user-links-panel-content.sc-nano-global-nav a.sc-nano-global-nav:last-child{-webkit-border-after:none;border-block-end:none}/*!@.user-links-panel-foot*/.user-links-panel-foot.sc-nano-global-nav{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:500;justify-content:space-between}/*!@.user-links-panel-foot a:hover*/.user-links-panel-foot.sc-nano-global-nav a.sc-nano-global-nav:hover{text-decoration:underline}/*!@.user-links-panel .user-profile*/.user-links-panel.sc-nano-global-nav .user-profile.sc-nano-global-nav{background-color:var(--bar-user-panel-bg)}/*!@:host*/.sc-nano-global-nav-h{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;height:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}/*!@:host input,\n:host select,\n:host button*/.sc-nano-global-nav-h input.sc-nano-global-nav,.sc-nano-global-nav-h select.sc-nano-global-nav,.sc-nano-global-nav-h button.sc-nano-global-nav{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}/*!@:host a:focus,\n:host button:focus*/.sc-nano-global-nav-h a.sc-nano-global-nav:focus,.sc-nano-global-nav-h button.sc-nano-global-nav:focus{outline:none}/*!@:host a:focus-visible,\n:host button:focus-visible*/.sc-nano-global-nav-h a.sc-nano-global-nav:focus-visible,.sc-nano-global-nav-h button.sc-nano-global-nav:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
17234
17235
 
17235
17236
  // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
17236
17237
  const THRESHOLDBREAKS = {
@@ -17255,6 +17256,13 @@ const THRESHOLDBREAKS = {
17255
17256
  * @slot promotion - a free area for any promotional content, displayed within the overflow menu panel
17256
17257
  * @slot logo - when show-logo="false" you can utilise the logo slot
17257
17258
  * @slot - if using search functionality, place a `<nano-search-results />` element in the default slot
17259
+ *
17260
+ * @part burger - the overflow / burger menu
17261
+ * @part burger-actions-bar - the top bar of the overflow / burger menu
17262
+ * @part burger-content - the main content area of the overflow / burger menu
17263
+ * @part main-bar - the main nav menu bar
17264
+ * @part logo-link - the link wrapping the logo
17265
+ * @part search-bar - the search bar that appears under the main nav menu bar
17258
17266
  */
17259
17267
  class GlobalNav {
17260
17268
  constructor(hostRef) {
@@ -17664,6 +17672,18 @@ class GlobalNav {
17664
17672
  this.showAutocomplete = false;
17665
17673
  return;
17666
17674
  }
17675
+ /**
17676
+ * Manually open or close the overflow (burger) menu
17677
+ * @param openClose - optionally force open (true) or close (false)
17678
+ */
17679
+ async toggleOverflowMenu(openClose) {
17680
+ if (openClose === true || (openClose === undefined && !this.modalIsOpen)) {
17681
+ this.menuOpen();
17682
+ }
17683
+ else {
17684
+ this.menuClose(null, true);
17685
+ }
17686
+ }
17667
17687
  async getMyAccData() {
17668
17688
  if (!!this.myAccData)
17669
17689
  return;
@@ -18094,7 +18114,7 @@ class GlobalNav {
18094
18114
  'has-promotion': this.hasPromotionSlot,
18095
18115
  'menu-full-screen': this.menuFullScreen,
18096
18116
  'secondary-open': !!this.secondaryMenuOpen,
18097
- }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div) }, hAsync("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, hAsync("div", { class: "gn-menu_actions" }, hAsync("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (hAsync("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (hAsync("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
18117
+ }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, hAsync("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" }, hAsync("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, hAsync("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (hAsync("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (hAsync("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
18098
18118
  this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
18099
18119
  !!this.iconSlotLen && hAsync("slot", { name: "icon" }),
18100
18120
  this.myAccData &&
@@ -18103,7 +18123,7 @@ class GlobalNav {
18103
18123
  this.msgUrl && (hAsync("a", { href: this.msgUrl, class: "icon-btn" }, hAsync("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (hAsync("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
18104
18124
  this.cartUrl && (hAsync("a", { href: this.cartUrl, class: "icon-btn" }, hAsync("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (hAsync("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
18105
18125
  ],
18106
- ], this.myAccData && this.myAccData.urls.login && (hAsync("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', hAsync("nano-icon", { name: "solid/chevron-right" })))), hAsync("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, hAsync("div", { class: "content" }, hAsync("nav", { class: "nav-links nav-links--main", role: "menu" }, hAsync("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
18126
+ ], this.myAccData && this.myAccData.urls.login && (hAsync("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', hAsync("nano-icon", { name: "solid/chevron-right" })))), hAsync("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, hAsync("div", { class: "content", part: "burger-content" }, hAsync("nav", { class: "nav-links nav-links--main", role: "menu" }, hAsync("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
18107
18127
  this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
18108
18128
  !!this.mainSlotLen && (hAsync("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
18109
18129
  this.hasSiteSlot) ||
@@ -18124,7 +18144,7 @@ class GlobalNav {
18124
18144
  (this.loggedInNavItms.length || this.hasLoggedinSlot) && (hAsync("nav", { class: "nav-links", "aria-label": "Your user account links" }, hAsync("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu" }, this.myAccountUser.name, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), hAsync("div", { slot: "secondary" }, hAsync("div", { class: "content" }, hAsync("button", { class: "back-btn", onClick: this.subMenuClose }, hAsync("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (hAsync("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), hAsync("div", { class: "content--sub" }, hAsync("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
18125
18145
  return (hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: link.address, target: link.target }, link.title)));
18126
18146
  }), hAsync("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, hAsync("a", { href: this.myAccData.urls.forgot_password +
18127
- this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, hAsync("div", { class: "bars" }, hAsync("nav", { class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
18147
+ this.ssoRedirect }, "Change Password")))))))), hAsync("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (hAsync("div", { class: "login-btn logout-btn" }, hAsync("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), hAsync("div", { class: "sticker-trigger" }), hAsync("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 } }, hAsync("div", { class: "bars" }, hAsync("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div), role: !!this.mainSlotLen &&
18128
18148
  this.threshold >= this.THRESHOLDLIMIT - THRESHOLDBREAKS.main
18129
18149
  ? 'menu'
18130
18150
  : undefined }, (this.hasPromotionSlot ||
@@ -18143,7 +18163,7 @@ class GlobalNav {
18143
18163
  this.threshold <
18144
18164
  this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
18145
18165
  this.hasSiteSlot ||
18146
- !!this.siteNavItms.length) && (hAsync("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, hAsync("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (hAsync("a", { href: this.logoUrl, class: "logo-link" }, hAsync("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (hAsync("div", { class: "logo-link" }, hAsync("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), hAsync("div", { class: "nav-links nav-links--main" }, hAsync("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
18166
+ !!this.siteNavItms.length) && (hAsync("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, hAsync("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (hAsync("a", { href: this.logoUrl, class: "logo-link", part: "logo-link" }, hAsync("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (hAsync("div", { class: "logo-link" }, hAsync("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), hAsync("div", { class: "nav-links nav-links--main" }, hAsync("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
18147
18167
  this.threshold >=
18148
18168
  this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
18149
18169
  this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
@@ -18189,7 +18209,7 @@ class GlobalNav {
18189
18209
  this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (hAsync("div", { id: "global-nav-search-bar", class: {
18190
18210
  'search-bar': true,
18191
18211
  show: this.searchBarShown,
18192
- }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div) }, hAsync("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
18212
+ }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, hAsync("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (hAsync("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
18193
18213
  !!this.searchSlotLen && (hAsync("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
18194
18214
  this.menuFullScreen) && (hAsync("div", { class: {
18195
18215
  mask: true,
@@ -18353,7 +18373,8 @@ class GlobalNav {
18353
18373
  "userMenuOpen": [32],
18354
18374
  "menuFullScreen": [32],
18355
18375
  "searchValInternal": [32],
18356
- "submitSearch": [64]
18376
+ "submitSearch": [64],
18377
+ "toggleOverflowMenu": [64]
18357
18378
  },
18358
18379
  "$listeners$": [[0, "nanoOpen", "secondaryOpen"], [0, "nanoClose", "secondaryClose"], [16, "click", "menuClose"]],
18359
18380
  "$lazyBundleId$": "-",
@@ -21108,6 +21129,10 @@ const overflowNavCss = "/*!@:host*/.sc-nano-overflow-nav-h{box-sizing:border-box
21108
21129
  * @part scroll-button-next - The button shown at the end of the scrolling area
21109
21130
  */
21110
21131
  class OverflowNav {
21132
+ watchIsActiveHandler() {
21133
+ this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
21134
+ this.recalculatePositions(true);
21135
+ }
21111
21136
  // private state
21112
21137
  constructor(hostRef) {
21113
21138
  registerInstance(this, hostRef);
@@ -21194,7 +21219,7 @@ class OverflowNav {
21194
21219
  this.recalculatePositions = (init) => {
21195
21220
  this.updateScrollControls();
21196
21221
  this.syncActiveItemIndicator(init);
21197
- setTimeout(() => this.scrollToActiveItem(init), 300);
21222
+ this.scrollToActiveItem(init);
21198
21223
  };
21199
21224
  this.scrollControls = true;
21200
21225
  this.orientation = 'horizontal';
@@ -21250,9 +21275,7 @@ class OverflowNav {
21250
21275
  return getDirectChildren(this.host, '*', true);
21251
21276
  }
21252
21277
  get activeItem() {
21253
- if (this._activeItem)
21254
- return this._activeItem;
21255
- return this.allActiveItems.find((el) => this.isActiveHandler(el));
21278
+ return this._activeItem;
21256
21279
  }
21257
21280
  set activeItem(item) {
21258
21281
  if (!item ||
@@ -21339,6 +21362,7 @@ class OverflowNav {
21339
21362
  mo.observe(this.host);
21340
21363
  }
21341
21364
  componentDidLoad() {
21365
+ this.activeItem = this.allActiveItems.find((el) => this.isActiveHandler(el));
21342
21366
  this.recalculatePositions(true);
21343
21367
  }
21344
21368
  disconnectedCallback() {
@@ -21368,6 +21392,7 @@ class OverflowNav {
21368
21392
  }
21369
21393
  get host() { return getElement(this); }
21370
21394
  static get watchers() { return {
21395
+ "isActiveHandler": ["watchIsActiveHandler"],
21371
21396
  "hasScrollControls": ["watchScrollControls"],
21372
21397
  "hideControlEnd": ["hideEndBtn"],
21373
21398
  "hideControlStart": ["hideStartBtn"]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nanoporetech-digital/components",
3
- "version": "4.2.0",
3
+ "version": "4.3.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -130,7 +130,7 @@
130
130
  "nanopore",
131
131
  "digital"
132
132
  ],
133
- "gitHead": "1d9cea12688d2026d699f9be44673470494bf865",
133
+ "gitHead": "f87eae26d8a27a2a0814ce17b154a61533808817",
134
134
  "volta": {
135
135
  "node": "14.18.1",
136
136
  "npm": "8.6.0"
package/dist/cjs/table.worker-37f25c78.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"table.worker-37f25c78.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
package/dist/esm/table.worker-86754436.js.map DELETED
@@ -1 +0,0 @@
1
- {"file":"table.worker-86754436.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
package/dist/nano-components/p-6c47fdc2.js DELETED
@@ -1,5 +0,0 @@
1
- /*!
2
- * Web Components for Nanopore digital Web Apps
3
- */
4
- import{c as t}from"./p-099a573a.js";import"./p-f6a8467a.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-9ebbb814.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-e2f9ccfa.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
5
- //# sourceMappingURL=p-6c47fdc2.js.map
package/dist/nano-components/p-7730ce8e.entry.js DELETED
@@ -1,5 +0,0 @@
1
- /*!
2
- * Web Components for Nanopore digital Web Apps
3
- */
4
- import{r as t,h as i,a,g as e}from"./p-f6a8467a.js";import{g as s,a as o}from"./p-257432ff.js";import{d as r}from"./p-9746b0a5.js";const n=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;width:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow-x:auto;overflow-y:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";width:100%;height:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{width:100%}.onav--vertical .onav__nav{max-height:100%;display:flex}.onav--vertical .onav__scroller{width:100%;overflow-y:auto;overflow-x:hidden;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-block:var(--padding);-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;-webkit-padding-before:calc(var(--fade-size) + 12px);padding-block-start:calc(var(--fade-size) + 12px);-webkit-padding-after:var(--fade-size);padding-block-end:var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;width:-moz-fit-content;width:fit-content}.onav--vertical .onav__items::before{content:"";height:100%;width:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{constructor(i){t(this,i);this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find((t=>this.isActiveHandler(t)));if(t)this.activeItem=t;this.recalculatePositions()};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=t=>{this.updateScrollControls();this.syncActiveItemIndicator(t);setTimeout((()=>this.scrollToActiveItem(t)),300)};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=t=>t.classList.add("active");this.inActiveHandler=t=>t.classList.remove("active");this.isActiveHandler=t=>t.classList.contains("active");this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=r(this.recalculatePositions,50)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return s(this.host,"*",true)}get activeItem(){if(this._activeItem)return this._activeItem;return this.allActiveItems.find((t=>this.isActiveHandler(t)))}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach((t=>{if(t===this._activeItem)this.activeHandler(t);else this.inActiveHandler(t)}));this.syncActiveItemIndicator();this.scrollToActiveItem()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(t){if(!this.nav||!this.activeItem)return;requestAnimationFrame((()=>{this.activeItem.scrollIntoView({behavior:t?"auto":"smooth",block:"center",inline:"center"})}))}syncActiveItemIndicator(t){if(!this.activeItem)return;const i=this.activeItem;const a=i.clientWidth||0;const e=i.clientHeight+2||0;const s=o(i,this.itemContainer);if(!this.activeIndicator)return;const r=s.top;const n=s.left;if(t)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${a}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${n}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${e}px`;this.activeIndicator.style.transform=`translateY(${r}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.recalculatePositions(true)}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return e(this)}static get watchers(){return{hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=n;export{l as nano_overflow_nav};
5
- //# sourceMappingURL=p-7730ce8e.entry.js.map
package/dist/nano-components/p-7730ce8e.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["overflowNavCss","OverflowNav","constructor","hostRef","this","updateScrollControls","nav","hasScrollControls","scrollProp","clientDimProp","itemContainer","handleScroll","hideControlStart","hideControlEnd","finishEnd","isRtl","scrollOffset","Math","abs","finishStart","handleBtnClick","goEnd","navDim","scrollAmt","scroll","left","orientation","top","behavior","e","slotChangeHandler","allActiveItems","length","item","find","el","isActiveHandler","activeItem","recalculatePositions","handleClick","event","foundItem","composedPath","includes","handleKeyDown","key","init","syncActiveItemIndicator","setTimeout","scrollToActiveItem","classList","add","remove","contains","debounce","watchScrollControls","hideEndBtn","endBtn","activateBtn","hideStartBtn","startBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","forEach","activeHandler","inActiveHandler","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","instant","requestAnimationFrame","scrollIntoView","block","inline","width","clientWidth","height","clientHeight","offset","getOffset","activeIndicator","offsetTop","offsetLeft","style","transition","transform","connectedCallback","closest","window","ro","disconnect","undefined","mo","ResizeObserver","observe","componentDidLoad","disconnectedCallback","render","h","Host","dir","part","class","onav","onClick","onKeyDown","scrollControls","ref","label","iconName","onScroll","onSlotchange"],"sources":["./src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","./src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --indicator-transition. Defaults to #{$transition-fast}\n * @prop --indicator-color. Defaults to #{map.get($colors, lightblue)};\n * @prop --indicator-size. Defaults to 0;\n * @prop --indicator-track-color. Defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-track-size. Defaults to var(--indicator-size);\n\n * @prop --scroll-btn-color. Defaults to 'currentColor';\n * @prop --fade-size. The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n * @prop --fade-transparency. Defaults to 0;\n *\n * @prop --padding. Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n */\n\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-size: 0;\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-track-size: var(--indicator-size);\n --scroll-btn-color: 'currentColor';\n --fade-size: 1.75rem;\n --fade-transparency: 0;\n --padding: var(--fade-size);\n\n position: relative;\n z-index: #{$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n display: flex;\n}\n\n.onav {\n $root: &;\n\n &__scroller {\n @include hide-scrollbar();\n\n display: flex;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-size: calc(100% + calc(var(--fade-size) * 4));\n mask-position: calc(var(--fade-size) * -2);\n\n &::after {\n content: ' ';\n line-height: 1;\n flex: 0 0 auto;\n display: block;\n }\n\n #{$root}--has-scroll-controls-start & {\n mask-position: 0;\n mask-size: calc(100% + (var(--fade-size) * 2));\n }\n\n #{$root}--has-scroll-controls-end & {\n mask-position: calc(var(--fade-size) * -1);\n mask-size: calc(100% + var(--fade-size));\n }\n\n #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n &__items {\n flex: 1 1 auto;\n position: relative;\n width: auto;\n flex-wrap: nowrap;\n display: flex;\n\n &::before {\n content: '';\n background: var(--indicator-track-color);\n display: block;\n position: absolute;\n z-index: 1;\n }\n }\n\n &__active-indicator {\n position: absolute;\n z-index: 10;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease,\n var(--indicator-transition) height ease;\n }\n\n nano-icon-button.onav__scroll-button {\n --nano-color-base: var(--scroll-btn-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n pointer-events: all;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n }\n\n ///////////// HORIZONTAL ///////////////\n\n &--horizontal {\n\n #{$root}__scroller {\n overflow-x: auto;\n overflow-y: hidden;\n mask-repeat: no-repeat;\n padding-inline: var(--padding);\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n\n &::after {\n padding-inline: 0 var(--fade-size);\n padding-block: 0 0;\n }\n }\n\n &#{$root}--has-scroll-controls #{$root}__scroller {\n padding-inline: var(--fade-size) 0;\n padding-block-start: 0;\n padding-block-end: 0;\n }\n\n #{$root}__items {\n flex-direction: row;\n\n &::before {\n content: '';\n width: 100%;\n height: var(--indicator-track-size);\n inset-block-end: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-block-end: 0;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-block: 0;\n\n &--start {\n inset-inline-start: 0;\n }\n\n &--end {\n inset-inline-end: 0;\n }\n }\n }\n\n ///////////// VERTICAL ///////////////\n\n &--vertical {\n width: 100%;\n\n #{$root}__nav {\n max-height: 100%;\n display: flex;\n }\n\n #{$root}__scroller {\n width: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n flex-direction: column;\n mask-repeat: no-repeat;\n padding-block: var(--padding);\n mask-image:\n linear-gradient(\n to top,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--fade-size)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n padding-inline: 0 0;\n padding-block-start: calc(var(--fade-size) + 12px);\n padding-block-end: var(--fade-size);\n\n &::after {\n padding-inline: 0 0;\n padding-block: 0 var(--fade-size);\n }\n }\n\n #{$root}__items {\n flex-direction: column;\n width: fit-content;\n\n &::before {\n content: '';\n height: 100%;\n width: var(--indicator-track-size);\n inset-inline-start: 0;\n }\n }\n\n #{$root}__active-indicator {\n inset-inline-start: 0;\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n #{$root}__scroll-button {\n inset-inline: 0;\n\n &--start {\n inset-block-start: 0;\n }\n\n &--end {\n inset-block-end: 0;\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /** Disables the scroll arrow buttons that appear when content overflows */\n @Prop() scrollControls = true;\n\n /** The flex direction of the element */\n @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n 'horizontal';\n\n /**\n * A function called when an item becomes 'active' (via click or keyboard)\n * @param item\n * @returns void */\n @Prop() activeHandler = (item: HTMLElement) => item.classList.add('active');\n\n /**\n * A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item\n * @returns void */\n @Prop() inActiveHandler = (item: HTMLElement) =>\n item.classList.remove('active');\n\n /**\n * A function called to assess an initial, active item\n * @param item\n * @returns void */\n @Prop() isActiveHandler = (item: HTMLElement) =>\n item.classList.contains('active');\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(this.recalculatePositions, 50);\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled || el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '*', true);\n }\n\n get activeItem() {\n if (this._activeItem) return this._activeItem;\n return this.allActiveItems.find((el) => this.isActiveHandler(el));\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item ||\n item === this.activeItem ||\n (item as any).disabled ||\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el) => {\n if (el === this._activeItem) this.activeHandler(el);\n else this.inActiveHandler(el);\n });\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem(instant?: boolean) {\n if (!this.nav || !this.activeItem) return;\n requestAnimationFrame(() => {\n this.activeItem.scrollIntoView({\n behavior: instant ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n });\n }\n\n private syncActiveItemIndicator(instant?: boolean) {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth || 0;\n const height = item.clientHeight + 2 || 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (instant) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el) => this.isActiveHandler(el));\n if (item) this.activeItem = item;\n this.recalculatePositions();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = (init?: any) => {\n this.updateScrollControls();\n this.syncActiveItemIndicator(init);\n setTimeout(() => this.scrollToActiveItem(init), 300);\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.recalculatePositions(true);\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}