@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/collection/components/global-search-results/global-search-results.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   display: block;
   flex: 1 1 100%;
 }
@@ -321,7 +335,7 @@
   display: inline-block;
 }
 .filters .filter-label::after {
-  background-image: url("data:image/svg+xml;charset=utf-8,url-encode(\"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\")");
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>");
   content: "";
   block-size: 0.7em;
   inline-size: 0.7em;
@@ -336,14 +350,12 @@
   background-repeat: no-repeat;
 }
 .filters .filter-cb {
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   block-size: 1px;
-  inline-size: 1px;
-  margin: -1px;
   overflow: hidden;
-  padding: 0;
   position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
 }
 .filters .filter-cb:checked + .filter-label::before {
   background: #245a6f;

package/dist/collection/components/global-search-results/global-search-results.js

@@ -1,10 +1,11 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import searchInsight from "../../utils/search-insights";
 import { transformTag, h } from "../../utils/renderer";
 const filterOldPosts = 'created > ' + Math.floor((Date.now() - 63115200000) / 1000);
+let searchResultIds = 0;
 /**
  * Nanopore Global Search results component
  * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).
@@ -17,6 +18,9 @@ export class GlobalSearchResults {
     filtersDiv;
     openFilterBtn;
     ro;
+    searchResultId = searchResultIds++;
+    queryId = this.searchResultId > 0 ? `searchq-${this.searchResultId}` : 'searchq';
+    globalNav;
     algoliaResults;
     algoliaEle;
     currentWidth;
@@ -24,7 +28,8 @@ export class GlobalSearchResults {
     appId;
     index;
     el;
-    /** Fired when the user clicks the 'back' button / closes the search panel
+    /**
+     * Fired when the user clicks the 'back' button / closes the search panel
      * Calling `event.preventDefault()` will prevent it from being closed.
      */
     nanoSearchGoBack;
@@ -46,18 +51,14 @@ export class GlobalSearchResults {
             this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
         }
     }
-    handleGlobalNavReset(e) {
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
-            return;
+    handleGlobalNavReset = () => {
         this.algoliaResultsEle = null;
         this.goback();
-    }
-    handleGlobalNavSearch(e) {
+    };
+    handleGlobalNavSearch = (e) => {
         const { detail: { meta, client }, } = e;
         this.apiKey = client.apiKey;
         this.appId = client.appId;
-        if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))
-            return;
         this.index = {
             name: meta.indexTitle,
             index: meta.index,
@@ -66,7 +67,7 @@ export class GlobalSearchResults {
             replicas: meta.replicas,
         };
         this.algoliaEle.query = meta.query;
-    }
+    };
     handleReorder(e) {
         if (e
             .composedPath()
@@ -211,8 +212,29 @@ export class GlobalSearchResults {
             this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
     }
     connectedCallback() {
+        const globalNavTag = transformTag('nano-global-nav');
+        this.globalNav = this.el.closest(globalNavTag);
+        if (!this.globalNav) {
+            const ownerHost = this.el.getRootNode()?.host;
+            if (ownerHost && ownerHost.tagName === globalNavTag.toUpperCase()) {
+                this.globalNav = ownerHost;
+            }
+        }
+        if (!this.globalNav) {
+            console.error('`<nano-global-search-results>` must be a child of `<nano-global-nav>`');
+            return;
+        }
+        this.globalNav.addEventListener('nanoSearchResult', this.handleGlobalNavSearch);
+        this.globalNav.addEventListener('nanoSearchReset', this.handleGlobalNavReset);
         this.handleAlgoliaEleChange();
     }
+    disconnectedCallback() {
+        if (this.ro) {
+            this.ro.disconnect();
+        }
+        this.globalNav.removeEventListener('nanoSearchResult', this.handleGlobalNavSearch);
+        this.globalNav.removeEventListener('nanoSearchReset', this.handleGlobalNavReset);
+    }
     componentDidLoad() {
         if (!window['ResizeObserver'])
             return;
@@ -226,10 +248,10 @@ export class GlobalSearchResults {
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: '9e9ee3d64c3887ab038de05adbcf01164904a267', class: {
+        return (h(Host, { key: 'adc6446ad3c226627dcae79331259d44849e8266', class: {
                 small: this.currentWidth < 677,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '2716189744e26d36ab20ba3ce0d4e48852586955', storeId: "searchq", storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '048798b2c38c9af665c8555b366c545c57387fdc', slot: "template" }, 
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: '28968dd88fdd41225883b953de31cb113a5dc77e', storeId: this.queryId, storeMethod: "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { key: '3a12eec09e7ddc91a40b4043bbc6b14879433e11', slot: "template" }, 
         /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
@@ -614,7 +636,7 @@ export class GlobalSearchResults {
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: '836a3c9ba7855d4f08420f55c2df97c65438abad', slot: "output" }), h("slot", { key: 'a025d95f4ae2195f4aced3ade5acc3a433cbf3f5' }))));
+            </div>`), h("div", { key: '120fb25d6070d45591e81c9c67bef304136d21fc', slot: "output" }), h("slot", { key: '824a05f852bf5259f1809293a76cde06472a09a1' }))));
     }
     static get is() { return "nano-global-search-results"; }
     static get encapsulation() { return "shadow"; }
@@ -704,18 +726,6 @@ export class GlobalSearchResults {
     }
     static get listeners() {
         return [{
-                "name": "nanoSearchReset",
-                "method": "handleGlobalNavReset",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "nanoSearchResult",
-                "method": "handleGlobalNavSearch",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "nanoChange",
                 "method": "handleReorder",
                 "target": undefined,
@@ -730,10 +740,9 @@ export class GlobalSearchResults {
             }, {
                 "name": "nanoNewResults",
                 "method": "attachResultListeners",
-                "target": "body",
+                "target": undefined,
                 "capture": false,
                 "passive": false
             }];
     }
 }
-//# sourceMappingURL=global-search-results.js.map

package/dist/collection/components/grid/grid-item.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h } from "@stencil/core";
 /**
@@ -17,10 +17,9 @@ export class GridItem {
      * m-row-start-2
      */
     render() {
-        return h("slot", { key: '8455879c23d6022649f66a70f8812ce6129d0da1' });
+        return h("slot", { key: '8df6ce243d4a12c9cfe966f33d70b181eeb84b43' });
     }
     static get is() { return "nano-grid-item"; }
     static get encapsulation() { return "shadow"; }
     static get styles() { return ":host { display: inline-block; }"; }
 }
-//# sourceMappingURL=grid-item.js.map

package/dist/collection/components/grid/grid.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   /**
   * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding
   * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding

package/dist/collection/components/grid/grid.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -19,13 +19,11 @@ import { Host } from "@stencil/core";
 import { ConstructibleStyle } from "../../utils/constructible-style";
 import { h } from "../../utils/renderer";
 /**
- * A lightweight, context-aware CSS grid implementation.
+ * A context-aware CSS grid implementation.
+ *
+ * @version 1.0.0
+ * @status deprecated
  *
- * - Define multiple grids templates at different breakpoints
- * - Uses `@container` queries to select the correct grid depending on the current dimensions
- * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
- * - SSR optimised
-
  * @part grid - the main grid element.
  * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
  * @part helper - a replica grid showed when `show-helper` is true
@@ -177,7 +175,7 @@ export class Grid {
         this.constructSizeArray();
     }
     render() {
-        return (h(Host, { key: '0299504cb77aa4332c7dc2c2d895513938844d10', clas: "nano-grid" }, h("div", { key: 'ea2a3faf3994483ae290955ba4ba6a6a8afa4a94', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '8b0233a9a7b6fece32ddc3ebe7753efcf3d494cd' })), this.showHelper && (h("div", { key: 'e2a9d7d2dad1ce5a1b41716a377631123e74ebcd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '410e2e3fce3867216adb0f9bf0501f8d40514bce', class: "nano-grid" }, h("div", { key: '424f6da1b39d37ef70912e87e5d61320b5ff8d11', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: '051bdae40a3d63dfdb744a980c74a42c2ac9c05f' })), this.showHelper && (h("div", { key: 'b24395cdacf9d7ba3a15b1a9b064a2a97f3afac1', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get is() { return "nano-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -195,6 +193,7 @@ export class Grid {
         return {
             "sSize": {
                 "type": "any",
+                "attribute": "s-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number | string",
@@ -209,12 +208,12 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "s-size",
                 "reflect": true,
                 "defaultValue": "300"
             },
             "mSize": {
                 "type": "any",
+                "attribute": "m-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number | string",
@@ -229,12 +228,12 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "m-size",
                 "reflect": true,
                 "defaultValue": "550"
             },
             "lSize": {
                 "type": "any",
+                "attribute": "l-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number | string",
@@ -249,12 +248,12 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "l-size",
                 "reflect": true,
                 "defaultValue": "800"
             },
             "xlSize": {
                 "type": "any",
+                "attribute": "xl-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number | string",
@@ -269,12 +268,12 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "xl-size",
                 "reflect": true,
                 "defaultValue": "1000"
             },
             "sCols": {
                 "type": "number",
+                "attribute": "s-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -289,11 +288,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "s-cols",
                 "reflect": true
             },
             "mCols": {
                 "type": "number",
+                "attribute": "m-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -308,11 +307,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "m-cols",
                 "reflect": true
             },
             "lCols": {
                 "type": "number",
+                "attribute": "l-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -327,11 +326,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "l-cols",
                 "reflect": true
             },
             "xlCols": {
                 "type": "number",
+                "attribute": "xl-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -346,11 +345,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "xl-cols",
                 "reflect": true
             },
             "xxlCols": {
                 "type": "number",
+                "attribute": "xxl-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -365,11 +364,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "xxl-cols",
                 "reflect": true
             },
             "sTpl": {
                 "type": "string",
+                "attribute": "s-tpl",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -384,11 +383,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "s-tpl",
                 "reflect": false
             },
             "mTpl": {
                 "type": "string",
+                "attribute": "m-tpl",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -403,11 +402,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "m-tpl",
                 "reflect": false
             },
             "lTpl": {
                 "type": "string",
+                "attribute": "l-tpl",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -422,11 +421,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "l-tpl",
                 "reflect": false
             },
             "xlTpl": {
                 "type": "string",
+                "attribute": "xl-tpl",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -441,11 +440,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "xl-tpl",
                 "reflect": false
             },
             "xxlTpl": {
                 "type": "string",
+                "attribute": "xxl-tpl",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -460,11 +459,11 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "xxl-tpl",
                 "reflect": false
             },
             "showHelper": {
                 "type": "boolean",
+                "attribute": "show-helper",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -479,7 +478,6 @@ export class Grid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-helper",
                 "reflect": true,
                 "defaultValue": "false"
             }
@@ -543,4 +541,3 @@ __decorate([
     ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
     __metadata("design:type", Object)
 ], Grid.prototype, "styles", void 0);
-//# sourceMappingURL=grid.js.map

package/dist/collection/components/hero/hero.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host {
   /**
    * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;
    * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;