@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/global-nav/global-nav.css

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 :host {
   /**
    * @prop --padding: padding used for many elements. Defaults to '12px 0'.
@@ -125,7 +128,7 @@
   padding: 9px var(--padding) 9px var(--padding);
 }
 
-.menu {
+.gn-menu {
   position: fixed;
   top: 0;
   left: 0;
@@ -137,19 +140,19 @@
   width: 100vw;
   overflow-y: auto;
 }
-:host([dir=rtl]) .menu {
+:host([dir=rtl]) .gn-menu {
   left: auto;
   right: 0;
 }
 
-:host(.threshold-2) .menu {
+:host(.threshold-2) .gn-menu {
   position: absolute;
   width: calc(100vw - 20px);
 }
-.menu.menu-full-screen {
+.gn-menu.menu-full-screen {
   width: 100vw !important;
 }
-.menu_wrap {
+.gn-menu_wrap {
   max-width: 92vw;
   width: 335px;
   background: var(--menu-background);
@@ -167,15 +170,15 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
   transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
 }
-.menu_wrap.has-promotion {
+.gn-menu_wrap.has-promotion {
   padding: var(--padding) 0 0;
 }
-.menu.open {
+.gn-menu.open {
   z-index: var(--nano-layer-index-dropdown, 300);
   -webkit-transition: z-index 0.01s ease;
   transition: z-index 0.01s ease;
 }
-.menu.open .menu_wrap {
+.gn-menu.open .gn-menu_wrap {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0) !important;
           transform: translate3d(0, 0, 0) !important;
@@ -184,7 +187,7 @@
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s, -webkit-transform 0.2s ease 0.01s;
 }
-.menu_actions {
+.gn-menu_actions {
   padding-right: calc(var(--padding) / 2);
   display: -webkit-box;
   display: -ms-flexbox;
@@ -194,7 +197,7 @@
           justify-content: space-between;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu_actions {
+  .gn-menu_actions {
     padding-right: unset;
     /* autoprefixer: ignore next */
     /* autoprefixer: ignore next */
@@ -204,7 +207,7 @@
     padding-inline-end: calc(var(--padding) / 2);
   }
 }
-.menu_actions-counter {
+.gn-menu_actions-counter {
   background: #d0021b;
   color: #fff;
   position: absolute;
@@ -222,21 +225,21 @@
   text-align: center;
   text-indent: 0;
 }
-.menu .content-wrap {
+.gn-menu .content-wrap {
   position: relative;
   overflow: hidden;
   -webkit-transition: 0.2s ease min-height;
   transition: 0.2s ease min-height;
   min-height: 190px;
 }
-.menu .content--sub {
+.gn-menu .content--sub {
   padding: var(--padding) 0 var(--padding) 7px;
 }
-.menu .menu-btn {
+.gn-menu .menu-btn {
   margin-right: auto;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu .menu-btn {
+  .gn-menu .menu-btn {
     margin-right: unset;
     /* autoprefixer: ignore next */
     /* autoprefixer: ignore next */
@@ -246,15 +249,15 @@
     margin-inline-end: auto;
   }
 }
-.menu .nav-links {
+.gn-menu .nav-links {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.menu .nav-links ::slotted(nano-nav-item),
-.menu .nav-links nano-nav-item {
+.gn-menu .nav-links ::slotted(nano-nav-item),
+.gn-menu .nav-links nano-nav-item {
   --icon-size: 14px;
   --display: inline-block;
   --secondary-bg-color: #001a21;
@@ -270,19 +273,19 @@
   font-size: 0.99em;
   width: 100%;
 }
-.menu .nav-links .user-nav {
+.gn-menu .nav-links .user-nav {
   --bg-color: #193037;
   --padding-top: 9px;
   --padding-bottom: 9px;
   font-weight: bold;
   margin: 5px 0 0;
 }
-.menu .nav-links .user-nav ::slotted(nano-nav-item),
-.menu .nav-links .user-nav nano-nav-item {
+.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),
+.gn-menu .nav-links .user-nav nano-nav-item {
   font-weight: 500;
   --bg-color: transparent;
 }
-.menu .nav-links_title {
+.gn-menu .nav-links_title {
   margin: 0 var(--padding) 4px;
   border-bottom: 1px solid #33484d;
   padding-bottom: 8px;
@@ -292,13 +295,13 @@
   letter-spacing: 1px;
   font-weight: 700;
 }
-.menu .nav-links-wrap {
+.gn-menu .nav-links-wrap {
   margin: 18px 0;
 }
-.menu .nav-links-wrap:last-child {
+.gn-menu .nav-links-wrap:last-child {
   margin-bottom: 0;
 }
-.menu .nav-links .back-btn {
+.gn-menu .nav-links .back-btn {
   border-top: 1px solid #33484d;
   border-bottom: 1px solid #33484d;
   display: -webkit-box;
@@ -315,13 +318,13 @@
   letter-spacing: 1px;
   font-weight: 700;
 }
-.menu .nav-links .back-btn nano-icon {
+.gn-menu .nav-links .back-btn nano-icon {
   margin-right: 10px;
   font-size: 12px;
   color: white;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu .nav-links .back-btn nano-icon {
+  .gn-menu .nav-links .back-btn nano-icon {
     margin-right: unset;
     /* autoprefixer: ignore next */
     /* autoprefixer: ignore next */
@@ -331,15 +334,15 @@
     margin-inline-end: 10px;
   }
 }
-.menu .nav-links--sub {
+.gn-menu .nav-links--sub {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.menu .nav-links--sub ::slotted(nano-nav-item),
-.menu .nav-links--sub nano-nav-item {
+.gn-menu .nav-links--sub ::slotted(nano-nav-item),
+.gn-menu .nav-links--sub nano-nav-item {
   --border-bottom: none;
   --padding-end: var(--padding);
   --padding-start: var(--padding);
@@ -349,17 +352,17 @@
   width: 50%;
   line-height: 1.8;
 }
-.menu .nav-links .content {
+.gn-menu .nav-links .content {
   padding: 8px var(--padding);
 }
-.menu .login-btn {
+.gn-menu .login-btn {
   padding-left: 7px;
   padding-right: var(--padding);
   padding-top: 9px;
   padding-bottom: 9px;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu .login-btn {
+  .gn-menu .login-btn {
     padding-left: unset;
     padding-right: unset;
     /* autoprefixer: ignore next */
@@ -372,11 +375,11 @@
     padding-inline-end: var(--padding);
   }
 }
-.menu .login-btn nano-icon {
+.gn-menu .login-btn nano-icon {
   margin-left: 10px;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .menu .login-btn nano-icon {
+  .gn-menu .login-btn nano-icon {
     margin-left: unset;
     /* autoprefixer: ignore next */
     -webkit-margin-start: 10px;
@@ -386,12 +389,12 @@
     /* autoprefixer: ignore next */
   }
 }
-.menu .logout-btn {
+.gn-menu .logout-btn {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.menu .logout-btn a {
+.gn-menu .logout-btn a {
   padding: 0 5px;
 }
 
@@ -570,6 +573,9 @@
   overflow: hidden;
   max-height: 1em;
 }
+.bars nano-select.search-input .down-arrow {
+  font-size: 0.65em;
+}
 .bars nano-input.search-input {
   --input-text-color: inherit;
   --input-bg-color: var(--bar-color-shade, rgb(40, 110, 133));

package/dist/collection/components/global-nav/global-nav.js

@@ -271,17 +271,14 @@ export class GlobalNav {
       this.searchBarShown = false;
     };
     this.onSearchInput = (ev) => {
-      this.showAutocomplete = false;
       this.searchValInternal = this.searchInput.value;
       if (!this.isSearchValSet()) {
         this.searchLoading = false;
         return;
       }
-      this.searchLoading = true;
-      switch (ev.detail.key) {
-        case 'Enter':
-          this.onSearchSubmit();
-          break;
+      if (ev.detail.type === 'input') {
+        this.showAutocomplete = false;
+        this.searchLoading = true;
       }
     };
     this.onSearchChange = async (ev) => {
@@ -578,11 +575,9 @@ export class GlobalNav {
     this.searchInput.clientWidth; // force reflow
     if (this.showAutocomplete) {
       this.el.shadowRoot.addEventListener('click', this.onAutocompleteBlur);
-      this.el.shadowRoot.addEventListener('keydown', this.onAutocompleteInteract);
     }
     else {
       this.el.shadowRoot.removeEventListener('click', this.onAutocompleteBlur);
-      this.el.shadowRoot.removeEventListener('keydown', this.onAutocompleteInteract);
     }
   }
   /**
@@ -817,24 +812,24 @@ export class GlobalNav {
           "' were found. Try another phrase."));
       }
     }
-    return (h("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete }, content));
+    return (h("div", { class: "search-autocomplete", role: "listbox", id: "autocomplete-results", "aria-expanded": this.showAutocomplete ? 'true' : 'false', hidden: !this.showAutocomplete, onKeyDown: this.onAutocompleteInteract }, content));
   }
   searchWidget() {
     return [
       h("form", { class: "search-inputs", onSubmit: this.onSearchSubmit, id: "global-nav-search" },
         h("nano-select", { class: "search-input", label: "Which area of content would you like to search?", hideLabel: true, showInlineError: false, value: this.searchIndex, onNanoChange: this.onSearchIndexChange, mask: true },
           this.internalSearchIndeces.map((index) => {
-            return (h("option", { selected: index.index === this.searchIndex, value: index.index }, index.name || index.index));
+            return (h("nano-option", { selected: index.index === this.searchIndex, value: index.index }, index.name || index.index));
           }),
-          h("nano-icon", { name: "solid/caret-down", slot: "icon" })),
-        h("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for?", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search...", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
+          h("nano-icon", { name: "solid/caret-down", class: "down-arrow", slot: "down-arrow" })),
+        h("nano-input", { class: "search-input", label: "What would you like to search for?", "aria-label": "What would you like to search for?", hideLabel: true, showInlineError: false, "clear-input": true, placeholder: "Search...", type: "text", ref: (input) => (this.searchInput = input), onNanoChange: this.onSearchChange, onNanoInput: this.onSearchInput, onKeyDown: this.onAutocompleteInteract, debounce: 500, "aria-autocomplete": "list", "aria-activedescendant": this.autocompleteEles[this.currAIndex]
             ? this.autocompleteEles[this.currAIndex].id
             : false, "aria-controls": "autocomplete-results", onNanoFocus: this.showAutocompleteResults, value: this.searchValue, role: "textbox" },
           h("button", { class: {
               'search-icon': true,
               'search-icon--search': true,
               'search-icon--show': !this.searchValInternal.length,
-            }, slot: "inline-button", onMouseDown: (e) => {
+            }, slot: "end", onMouseDown: (e) => {
               this.searchValInternal = this.searchInput.value;
               this.onSearchSubmit(e, true);
             } },
@@ -843,7 +838,7 @@ export class GlobalNav {
               'search-icon': true,
               'search-icon--loader': true,
               'search-icon--show': this.searchLoading,
-            }, slot: "inline-button" },
+            }, slot: "end" },
             h("nano-icon", { name: "light/spinner-third" }))),
         h("input", { type: "submit" })),
     ];
@@ -866,14 +861,14 @@ export class GlobalNav {
           'scrolling-down': !this.scrollingUp,
         } },
         h("nav", { id: "global-nav-menu", class: {
-            menu: true,
+            'gn-menu': true,
             open: this.modalOpen,
             'has-promotion': this.hasPromotionSlot,
             'menu-full-screen': this.menuFullScreen,
             'secondary-open': this.secondaryMenuOpen,
           }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div) },
-          h("div", { class: "menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" },
-            h("div", { class: "menu_actions" },
+          h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1" },
+            h("div", { class: "gn-menu_actions" },
               h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown },
                 this.threshold < THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })),
                 this.threshold >= THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))),
@@ -884,10 +879,10 @@ export class GlobalNav {
                     this.activeMyAccountSections.includes('icons')) && [
                   this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" },
                     h("nano-icon", { name: "light/bell" }),
-                    this.msgCount > 0 && (h("span", { class: "menu_actions-counter" }, this.msgCount)))),
+                    this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
                   this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" },
                     h("nano-icon", { name: "light/shopping-cart" }),
-                    this.cartCount > 0 && (h("span", { class: "menu_actions-counter" }, this.cartCount)))),
+                    this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
                 ],
               ],
               this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" },
@@ -1006,7 +1001,7 @@ export class GlobalNav {
                 h("img", { src: getAssetPath(`./assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))),
               !this.showLogo && (h("div", { class: "logo-link" },
                 h("slot", { name: "logo" }))),
-              h("div", { class: "nav-links nav-links--main", hidden: !(this.threshold >= THRESHOLDLIMIT - 2 && !!this.mainSlotLen) },
+              h("div", { class: "nav-links nav-links--main" },
                 h("slot", { name: "main" })),
               this.threshold >= THRESHOLDLIMIT - 1 && [
                 this.showSearch && !!this.internalSearchIndeces.length && (h("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
@@ -1036,10 +1031,10 @@ export class GlobalNav {
                     this.activeMyAccountSections.includes('icons')) && [
                   this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" },
                     h("nano-icon", { name: "light/bell" }),
-                    this.msgCount > 0 && (h("span", { class: "menu_actions-counter" }, this.msgCount)))),
+                    this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
                   this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" },
                     h("nano-icon", { name: "light/shopping-cart" }),
-                    this.cartCount > 0 && (h("span", { class: "menu_actions-counter" }, this.cartCount)))),
+                    this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
                 ],
               ],
               this.myAccData &&
@@ -1358,7 +1353,7 @@ export class GlobalNav {
           },
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1607,7 +1602,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1627,7 +1622,7 @@ export class GlobalNav {
         "references": {
           "AlgoliaNetworkError": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1647,7 +1642,7 @@ export class GlobalNav {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }