@nanoporetech-digital/components 9.1.5 → 9.1.7

package/hydrate/index.mjs

@@ -13004,7 +13004,8 @@ class Dropdown {
     positioner;
     accessibleTrigger;
     didLoad = false;
-    focusFirstEle = true;
+    // only set when opened via keyboard; consumed (and reset) once the open transition ends
+    focusFirstEle = false;
     get menu() {
         return this.host.querySelector(transformTag('nano-menu'));
     }
@@ -13338,12 +13339,12 @@ class Dropdown {
             this.popover.destroy();
     }
     render() {
-        return (h(Host, { key: 'c0ed4b8b03d27f7437c148c8df305886c6cf29d9', class: "nano-dropdown" }, h("div", { key: '27165586e2caa99ba746e7db3aa1574f0e9d1576', part: "base", id: this.dropdownId, class: {
+        return (h(Host, { key: '00d9c9f79a99c0e2f926e4e8482cd1f06badfa73', class: "nano-dropdown" }, h("div", { key: 'b63f546d7d45cac07dded72bf666b4153df7e874', part: "base", id: this.dropdownId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, h("span", { key: 'b401a4d341e786ae4fe8c54adf06f8da1be4f531', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e0cb2a8823490b70f6aa01073d3873fa785fd763', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: '3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '19cc4dd331a4c2cbdc73a05687681cb2830fff0c', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
+            } }, h("span", { key: '7dc63a96ced0d342ee725ce6cfe84af479d75ebc', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, h("slot", { key: 'aee47edcef94de976c86780a91ae49e5052e8fc0', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '3bbcc7e43091542e909827c00cf84b36baef806c', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, h("div", { key: 'a94cd6ea9bbaaa3a8b743035746252666253fa17', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined, tabIndex: this.isOverflowing() ? 0 : undefined }, this.dialogTitle && (h("span", { key: '39622ee9886cd0094891032b4c939c6e420cd19d', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
                 ? undefined
-                : 'polite' }, this.dialogTitle)), h("slot", { key: '5da1881086c31481463b3b7244552e17ee66d997' }))))));
+                : 'polite' }, this.dialogTitle)), h("slot", { key: '39b7b9392d4649e6141dec80a95c56a9f176ac5d' }))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],
@@ -14445,10 +14446,16 @@ class FileUpload {
     checkFileSize(size) {
         return size / 1000000 <= this.maxFileSize;
     }
-    checkFileType(type) {
+    checkFileType(file) {
         if (!this.accept)
             return true;
-        return (!!type && this.accept.match(type) && this.accept.match(type).length > 0);
+        const type = file.type;
+        if (type) {
+            return !!this.accept.match(type) && this.accept.match(type).length > 0;
+        }
+        return this.accept
+            .split(',')
+            .some((accepted) => file.name.endsWith(accepted.trim()));
     }
     validate = () => {
         this.errorMessage = '';
@@ -14470,7 +14477,7 @@ class FileUpload {
                                 this.maxFileSize +
                                 'Mb';
                     }
-                    else if (!this.checkFileType(fileItem.file.type)) {
+                    else if (!this.checkFileType(fileItem.file)) {
                         listeItemError = `File type is not allowed (${this.accept})`;
                     }
                     fileItem.validationMessage = listeItemError;
@@ -14634,7 +14641,7 @@ class FileUpload {
         ];
     };
     render() {
-        return (h(Host, { key: 'c6fc291c7ac3c990d5304a2589c7dd1a0193333e', class: "nano-file-upload" }, h("div", { key: '12fd1e6551fe6ff6e1eb6a84000a21e526c61c36', class: {
+        return (h(Host, { key: '72dede3cd11629374dc390f030af0a9412a6af70', class: "nano-file-upload" }, h("div", { key: '913c23888d43555a1cbfae0d973c848f01e733dc', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,
@@ -14807,7 +14814,8 @@ class GlobalNav {
             this.myAccountData = (await Promise.resolve().then(function () { return localLoggedOut$1; }));
             return;
         }
-        fetch(this.myAccountUrl + '/nav_bar_data.json')
+        // MyAccount is cross-origin; send its session cookies or the user always appears logged out
+        fetch(this.myAccountUrl + '/nav_bar_data.json', { credentials: 'include' })
             .then((res) => res.json())
             .then((data) => {
             this.myAccountData = data;
@@ -15258,21 +15266,21 @@ class GlobalNav {
     }
     render() {
         const bpps = this.bpPartials;
-        return (h(Host, { key: '79ca6089ded878867c3febc0add938f4bc93eabd', class: {
+        return (h(Host, { key: '08fd38cc2711a83d40053e7ca147ce3a9ef38ce3', class: {
                 'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
                 'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
                 'nano-global-nav': true,
-            } }, h("div", { key: '87e6512e1973f4e67437959690e1333936e62cb9', class: {
+            } }, h("div", { key: '63b69c051b64880f07dc2c309064a3fd9e4490e3', class: {
                 gn: true,
                 'gn__search-open': this.searchBarShown,
-            } }, h("nano-drawer", { key: '402c74ddc996de4a0568dccd15e2f5e40a25bf7f', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '8d4c585f5a1b14b9bb432904c9527c89a1ab269a', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '3cdd62fbb5664b6ee24c9b4cf440c6ce7a312ebf', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
+            } }, h("nano-drawer", { key: 'a1db81578932ba08842ab49a3ff0a34f9d2afd73', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '3ee1efdef44a84b0fbf3434392e2fcb617abbfab', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: 'bea757cb52809fc472dbd5055b00462801f2a2a9', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
             ? bpps.mainMenu.tpl()
-            : '', h("slot", { key: '9e6b2a9d61043fb7a17d21e8904525dfaeb1c35f', name: "overflow" }))), h("div", { key: '015d506e548f826cf2a74f0fb35ffbbb8b666589', class: "gn__menu-bar-wrapper" }, h("div", { key: 'd37bdf198530424948dab02fc31c9c8d587bff71', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'ecc35be807c48079fead123dca093fcdeef0ea37', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'd3d673f2e0c8965d3497ac38dee5dcbe51715d2f', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: 'a3cde52880592ad39c88a13c156214cf232536e0', name: "logo" }, h("a", { key: '03f442de2365b2df4cc617e891f9fdb47c0b553c', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
+            : '', h("slot", { key: '571b994b306beacf7342536beb6bbde5c261a677', name: "overflow" }))), h("div", { key: '1bfbaa6397db0959e781a62a824b79929ac82468', class: "gn__menu-bar-wrapper" }, h("div", { key: '4dff6a82f085798b3ebd30bb01b960b9c2065b46', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '3e56113c9377dba138ec7b37f31f144d337fc707', "aria-label": "Global navigation", class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: '3667ae378b645ae6440126c591f6fe656a9b783e', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '742068e692bdd49fd0999568db15df4d84d74084', name: "logo" }, h("a", { key: '4584b27ecd617f2d176074f84626b2759bcdd164', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
                             (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "35", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
-                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'daddd483f4767056f6315fae07b23f3fa42516c9', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '91ef351b76c6699960c0f356f5f01eb106182e34', class: "gn__main-menu-actions" }, !this.myAccountData ||
-            (!!this.searchIndices.length && (h("nano-dropdown", { key: 'd0308a67b45e4337fa574d8d010b7e28f14b3239', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: 'cefaae614f193e02118476a060bfc8eb5ba71d92', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: 'bda3ff083a6808046f80336b93fa6a9ee7bdf21b', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '0147d8c7add407f1993850ac72a7765c4a5b0504', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '0513a5ff74d0c0d1b5f88660f8bd1818958face2', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
+                            (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "35", height: "35", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'a03353f5db8f5fd8cbb02219c1f63d04e74c8ca8', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '5579bee39208817f0fffb5ae97b9cf6b192bbcd6', class: "gn__main-menu-actions" }, !this.myAccountData ||
+            (!!this.searchIndices.length && (h("nano-dropdown", { key: '838047989bda4a5991bbe8a2bd4f8530524918d5', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '05c65d9f0d6e6570e3bef62ca535da36655ce021', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), h("form", { key: '2562ec900848f8f7b4f4f9f696a187a14a457f7d', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: '181f2d8f7fa89439f57af21b489beccda196cf34', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '2163e7a28516ba6e9f0c3d7e2e6a64b6fea3a9f0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, showInlineError: false, onNanoChange: (e) => {
                     this.handleSearchTermChangeEvent(e.detail.value);
-                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: 'a309cc734af7faec9310983ad85a2a119faaae54', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: 'e460a1e0b1bcfd0cf1e6a7ab9bdb8b9de3e1eca3', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '586f5f2c0b5a70ee6076da48d795b52def4a9dac', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '45656109a08eea5467f7ae306f31581a82f785c8' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
+                }, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon-button", { key: '6d85d49f3da82a2e970a8d54b778e0c9ef6ce563', slot: "end", "icon-name": "light/magnifying-glass", label: "Search", onClick: this.onSearchSubmit }), h("nano-datalist", { key: '70928f0886130da02bb02c88f75b8d55650612f2', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '223c85ed29b119cddb61d7e6cb88a7a4e3e15e8f', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'cf014da5a7f18f2d84251f825a1718c270a68162' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
                 this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
                         searchInsight.sendClick({
                             index: this.activeIndex.index,
@@ -15282,13 +15290,13 @@ class GlobalNav {
                             positions: [i + 1],
                         });
                     } }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
-                h("nano-option", { key: '1ff8c43585ef9863aacbe489b836889016e14fb3', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
-            ])))))), h("div", { key: 'd997f29cc0d38caa6f268ad692194f68d43fa1d8', class: "gn__cart" }, this.cartUrl && [
-            h("nano-icon-button", { key: '992788e9a06e19d3a75d4b8d2439f1900bfcde3e', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
-            !!this.cartCount && (h("nano-badge", { key: 'b7e6532aee69cb21901faaead2cd0e88c18f6e75', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
+                h("nano-option", { key: 'ca2e52576b2faa6f35c2377591212c7a37c2355e', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
+            ])))))), h("div", { key: '558eea256b3807c8066cfad3d303dfdd23cc7af2', class: "gn__cart" }, this.cartUrl && [
+            h("nano-icon-button", { key: '64fa87c0f21a947bed221ac4cf4f1996cd39f00c', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }),
+            !!this.cartCount && (h("nano-badge", { key: '26f65729803a1f345c83603a481321c86e770e33', theme: "danger" }, this.cartCount > 9 ? '9+' : this.cartCount)),
         ]), this.breakpoint <= bpps.contact.breakpoint
             ? bpps.contact.tpl()
-            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: 'fbdd99411cd64c03f00f64120367bc503b4560ec', part: "site-search-results" }, h("div", { key: '6ba33f25b6af1e5b58426d05b51ef9aaa221daf8', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fbf0bf5f7eb0c4b154537e66ce3f4b0acea4a10e' }))))));
+            : '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, typeof this.loginUrl === 'string' ? (h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login")) : (h("button", { onClick: this.loginUrl }, "Login")))))))), h("nano-global-search-results", { key: '60e0568f58c6a277b6a09c3541bb561b0dab1026', part: "site-search-results" }, h("div", { key: '743e3f716d1af6337ee95a8e48b017e7f9875770', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'fc1621f5b67db233aa7332d7a7d0334563ee7cd9' }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "9.1.5",
+  "version": "9.1.7",
   "sideEffects": false,
   "description": "A collection of Oxford Nanopore corporate / digital webcomponents",
   "type": "module",
@@ -56,7 +56,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "9.1.5"
+    "@nanoporetech-digital/style": "9.1.7"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",