@nanoporetech-digital/components 8.3.2 → 8.4.1

package/dist/components/constructible-style.js

@@ -0,0 +1,131 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Build, h, Host, getElement } from '@stencil/core/internal/client';
+
+// import type { VNode, HTMLStencilElement } from "@stencil/core";
+const supportsConstructibleStylesheets = (() => {
+    try {
+        return !!new CSSStyleSheet();
+    }
+    catch (_e) {
+        return false;
+    }
+})();
+const cacheKeys = new WeakMap();
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+function ConstructibleStyle(opts = {}) {
+    return (target, propertyKey) => {
+        if (!opts.cacheKeyProperty) {
+            opts.cacheKeyProperty = propertyKey;
+        }
+        const { componentWillLoad, render, componentWillRender } = target;
+        if (supportsConstructibleStylesheets && !Build.isServer) {
+            // adds a constructible stylesheet to the component
+            const addStylesheet = (instance) => {
+                if (!instance[opts.cacheKeyProperty] ||
+                    (cacheKeys.get(instance) &&
+                        cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
+                    return;
+                cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
+                const host = getElement(instance);
+                const cssText = typeof instance[propertyKey] === 'function'
+                    ? instance[propertyKey]()
+                    : instance[propertyKey];
+                const root = (host.shadowRoot || document);
+                root.adoptedStyleSheets = [
+                    ...(root.adoptedStyleSheets || []),
+                    getOrCreateStylesheet(instance, target, cssText, opts),
+                ];
+            };
+            target.componentWillLoad = function () {
+                const willLoadResult = componentWillLoad && componentWillLoad.call(this);
+                addStylesheet(this);
+                return willLoadResult;
+            };
+            target.componentWillRender = function () {
+                const willRenderResult = componentWillRender && componentWillRender.call(this);
+                addStylesheet(this);
+                return willRenderResult;
+            };
+        }
+        else {
+            // adds a style element to the component
+            target.render = function () {
+                const cssText = typeof this[propertyKey] === 'function'
+                    ? this[propertyKey]()
+                    : this[propertyKey];
+                let renderedNode = render.call(this);
+                if (isHost(renderedNode)) {
+                    appendStyleToHost(renderedNode, target.constructor.name, cssText);
+                }
+                else {
+                    renderedNode = h(Host, null, renderedNode);
+                    if (!('attachShadow' in HTMLElement.prototype)) {
+                        appendStyleToHost(renderedNode, target.constructor.name, cssText);
+                    }
+                    else {
+                        if (!target.__constructableStyle) {
+                            const style = document.createElement('style');
+                            style.setAttribute('type', 'text/css');
+                            style.setAttribute('constructible-style', target.constructor.name);
+                            style.innerHTML = cssText;
+                            target.__constructableStyle = style;
+                            document.head.appendChild(style);
+                        }
+                    }
+                }
+                return renderedNode;
+            };
+        }
+    };
+}
+function appendStyleToHost(node, targetName, cssText) {
+    (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
+}
+function getOrCreateStylesheet(instance, target, cssText, opts) {
+    if (!target.__constructableStyle) {
+        target.__constructableStyle = {};
+    }
+    const key = instance[opts.cacheKeyProperty];
+    if (!target.__constructableStyle[key]) {
+        target.__constructableStyle[key] = new CSSStyleSheet();
+        target.__constructableStyle[key].replace(cssText);
+    }
+    return target.__constructableStyle[key];
+}
+function isHost(node) {
+    for (const prop in node) {
+        if (prop in node) {
+            if (node[prop] === Host) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function getHostChildren(node) {
+    for (const prop in node) {
+        if (prop in node) {
+            if (Array.isArray(node[prop])) {
+                return node[prop];
+            }
+        }
+    }
+}
+
+export { ConstructibleStyle as C };

package/dist/components/details.js

@@ -131,7 +131,9 @@ const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends H
             if (this.stateChanging)
                 return;
             for (const change of changes) {
-                if (change.type === 'attributes' && change.attributeName === 'open') {
+                if (change.type === 'attributes' &&
+                    change.attributeName === 'open' &&
+                    !this.disabled) {
                     this.open = this.detailsEl.open;
                 }
             }
@@ -159,13 +161,13 @@ const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends H
         }
     }
     render() {
-        return (h(Host, { key: '4109b3670c8ccd41ddac5eb03e799e1c149ad7c8', class: "nano-details" }, h("details", { key: '6af0af31042e2bb156e835604b4f79edad79b7ce', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: '1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480', class: "nano-details" }, h("details", { key: '22659218ba7d1ec936523ff33c7ed2a1efb2af74', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 disabled: this.disabled,
-            } }, h("summary", { key: '6589a9dd56e93246177f8c7b6f5e46f279e661c1', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '7d794f0724f7c43bf4747edd1e402be32ec28129', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '4e55292c3018d9bbcb4b65e2f69002bf0cb5ae43', name: "icon-start" }))), h("div", { key: 'd3ab36f253ae4f062fe2aa998c483648b382b7ca', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '6bd0a9630c2d657915811164bdcbf0696609d4e5', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'b38f81f25f6d224da5afa1d701621993dba3d723', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            } }, h("summary", { key: '3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '4a8de08dca34823e162019e2d4dddef2ed2c123d', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: 'cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a', name: "icon-start" }))), h("div", { key: '0b11c544cfbb5852dfeae66b482154f1780a2569', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '5470af7891318c513870c473a8ad1f501174f51b', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '45960716eeec5d5ad08b63fd536608fcd33ab8f2', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
             !this.slotCtrl.has('icon-end') &&
             !this.slotCtrl.has('icon-expand') &&
-            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'be8d56737badde36a3a88f797f411065e5a59ae4', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: '90d0bba50dc77e45c5861ac74188aba8005980fc', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'ecc6e416fb9bc20d0d2feb99c7ed899104338c1e', class: "content-wrapper" }, h("div", { key: '18115d6264604535817c700ab7eea7265f4d7b3b', part: "content", class: "content", id: "content" }, h("slot", { key: 'bfdb6bda88ba909bbedec0e000b6fef5c1d1895c' })))))));
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '5357b61cb197dc4a1ceccf415a34defdfeb6b290', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'aa7f850c8415c2cd40fd7a965fba8eb98fca62b5', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'e98e6a68e4c15525b4377d4229fb4a1855650732', part: "content-wrapper", class: "content-wrapper" }, h("div", { key: '6710e302f7e2a5987ccd6703ea3c6cc0bf705d23', part: "content", class: "content", id: "content" }, h("slot", { key: '891525e66383979e621787f766bcfbcea78a9630' })))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]

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

@@ -314,12 +314,12 @@ const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class GlobalSearchR
         this.ro.observe(this.el);
     }
     render() {
-        return (h(Host, { key: 'c3e9e501af8fea7703a69a11249b209a2b249d70', class: {
+        return (h(Host, { key: 'c88b1cd5b5fcf63cc3961cc3e190fe4432349b03', class: {
                 small: this.currentWidth < 780,
                 'nano-global-search-results': true,
-            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'f4778fa577bb79485a927565e938032db14981e3', 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",
+            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { key: 'e27f4efbd7405ca852f9e6ea96d3a53b4ded8041', 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",
             // @ts-expect-error this bubbles from nano-algolia-filter
-            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: '274742b09cfbccacda5776856a5a63fd3f256d5e', slot: "template" }, 
+            onNanoFilterChanged: () => this.handleNanoFilterChanged() }, h("template", { key: 'a614cc2ad29144b19555cf2106b8a38982817918', 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">
@@ -697,7 +697,7 @@ const GlobalSearchResults = /*@__PURE__*/ proxyCustomElement(class GlobalSearchR
                   </div>
                 </div>
               {{ /if }}
-            </div>`), h("div", { key: 'f34469ff51c7c07f4451112bfe1aa3a3e0e2d47c', slot: "output" }), h("slot", { key: '099de4e70571d4d4de3c8bc279a4b62f44dd6191' }))));
+            </div>`), h("div", { key: 'c759117717909ec2ca8973bd4de0175e06fd73fa', slot: "output" }), h("slot", { key: '45d84a723310889c1acb75b2563839e6bd164296' }))));
     }
     static get watchers() { return {
         "algoliaEle": ["handleAlgoliaCredsChange", "handleAlgoliaIndexChange", "handleAlgoliaEleChange"],

package/dist/components/grid.js

@@ -1,133 +1,9 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Build, h, Host, getElement, proxyCustomElement, HTMLElement as HTMLElement$1 } from '@stencil/core/internal/client';
-import { h as h$1 } from './renderer.js';
-
-// import type { VNode, HTMLStencilElement } from "@stencil/core";
-const supportsConstructibleStylesheets = (() => {
-    try {
-        return !!new CSSStyleSheet();
-    }
-    catch (_e) {
-        return false;
-    }
-})();
-const cacheKeys = new WeakMap();
-/**
- * Dynamically create a constructible stylesheet which is applied to the component.
- * The stylesheet is then cached for future instances of the component.
- * @usage
-As a string:
-```
-@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
-As a function:
-```
-@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
-```
- * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
- * @returns `@ConstructableStyle` decorator
- */
-function ConstructibleStyle(opts = {}) {
-    return (target, propertyKey) => {
-        if (!opts.cacheKeyProperty) {
-            opts.cacheKeyProperty = propertyKey;
-        }
-        const { componentWillLoad, render, componentWillRender } = target;
-        if (!componentWillLoad)
-            console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
-        if (supportsConstructibleStylesheets && !Build.isServer) {
-            const addStylesheet = (instance) => {
-                if (!instance[opts.cacheKeyProperty] ||
-                    (cacheKeys.get(instance) &&
-                        cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
-                    return;
-                cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
-                const host = getElement(instance);
-                const cssText = typeof instance[propertyKey] === 'function'
-                    ? instance[propertyKey]()
-                    : instance[propertyKey];
-                const root = (host.shadowRoot || document);
-                root.adoptedStyleSheets = [
-                    ...(root.adoptedStyleSheets || []),
-                    getOrCreateStylesheet(instance, target, cssText, opts),
-                ];
-            };
-            target.componentWillLoad = function () {
-                const willLoadResult = componentWillLoad && componentWillLoad.call(this);
-                addStylesheet(this);
-                return willLoadResult;
-            };
-            target.componentWillRender = function () {
-                const willRenderResult = componentWillRender && componentWillRender.call(this);
-                addStylesheet(this);
-                return willRenderResult;
-            };
-        }
-        else {
-            target.render = function () {
-                const cssText = typeof this[propertyKey] === 'function'
-                    ? this[propertyKey]()
-                    : this[propertyKey];
-                let renderedNode = render.call(this);
-                if (isHost(renderedNode)) {
-                    appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                }
-                else {
-                    renderedNode = h(Host, null, renderedNode);
-                    if (!('attachShadow' in HTMLElement.prototype)) {
-                        appendStyleToHost(renderedNode, target.constructor.name, cssText);
-                    }
-                    else {
-                        if (!target.__constructableStyle) {
-                            const style = document.createElement('style');
-                            style.setAttribute('type', 'text/css');
-                            style.setAttribute('constructible-style', target.constructor.name);
-                            style.innerHTML = cssText;
-                            target.__constructableStyle = style;
-                            document.head.appendChild(style);
-                        }
-                    }
-                }
-                return renderedNode;
-            };
-        }
-    };
-}
-function appendStyleToHost(node, targetName, cssText) {
-    (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
-}
-function getOrCreateStylesheet(instance, target, cssText, opts) {
-    if (!target.__constructableStyle) {
-        target.__constructableStyle = {};
-    }
-    const key = instance[opts.cacheKeyProperty];
-    if (!target.__constructableStyle[key]) {
-        target.__constructableStyle[key] = new CSSStyleSheet();
-        target.__constructableStyle[key].replace(cssText);
-    }
-    return target.__constructableStyle[key];
-}
-function isHost(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (node[prop] === Host) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-function getHostChildren(node) {
-    for (const prop in node) {
-        if (prop in node) {
-            if (Array.isArray(node[prop])) {
-                return node[prop];
-            }
-        }
-    }
-}
+import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { C as ConstructibleStyle } from './constructible-style.js';
+import { h } from './renderer.js';
 
 const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@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{box-sizing:border-box}[hidden]{display:none !important}@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{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:normal;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;place-items:var(--grid-align-items) var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh;inline-size:100%}";
 
@@ -145,7 +21,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement$1 {
+const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -295,7 +171,7 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement$1 {
         this.constructSizeArray();
     }
     render() {
-        return (h$1(Host, { key: '74b98156bf6fbb3bf105135be4f461737d7774ac', class: "nano-grid" }, h$1("div", { key: 'dda06ec152c7d25ee0e6090e6c301bc8e5e81aac', part: "grid", class: "grid", "cache-key": this.cacheKey }, h$1("slot", { key: '175e120e0198bfad25600316aa8a8becf9390866' })), this.showHelper && (h$1("div", { key: '773d0ca81af12cc416550578e4df88f08b7af3cd', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h$1("div", { class: "grid__helper-item" })))))));
+        return (h(Host, { key: '56ae0bda8aedac96841dd8cf308117ef1aaa9824', class: "nano-grid" }, h("div", { key: '6fffc201e4261b8f6c458bd044b31fe12cd9045e', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'a6d7473ba9a8ffd21c4df95c2028e67026ffd1a5' })), this.showHelper && (h("div", { key: '275145f83283b504171fdc973741a1398cca6317', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
     }
     static get watchers() { return {
         "sTpl": ["constructSizeArray"],

package/dist/components/icon.js

@@ -67,7 +67,7 @@ const isStr = (val) => typeof val === 'string';
 const toLower = (val) => val.toLowerCase();
 
 const validateContent = (svgContent) => {
-    if (svgContent) {
+    if (svgContent && document) {
         const div = document.createElement('div');
         div.innerHTML = svgContent;
         // setup this way to ensure it works on our buddy IE
@@ -307,7 +307,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
                 (this.name.indexOf('arrow') > -1 ||
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl());
-        return (h(Host, { key: '754a53ed280fd9bcb1dcbec89eba4180f491d1b8', class: {
+        return (h(Host, { key: '0bc1c17119f0e49b9798a1b61a4a768f6406129f', class: {
                 loading: this.isLoading,
                 'flip-rtl': !!flipRtl,
                 'nano-icon': true,

package/dist/components/img.js

@@ -142,16 +142,16 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: '640969f1b1d3872d0314b455fd602be4e68955cc', class: "nano-img" }, h("div", { key: 'fdc45639dabc5872b5a00e7db92865efd5a2ac77', class: "img" }, h("div", { key: '5b9cc3e0ef11e3941a6085625b1d9f5e9d6de56a', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: 'd8c3a0f6bf742608335189f33ba076d70b08d4a9', class: {
+        return (h(Host, { key: 'f8774fc9ad6e94727378337c2f405a068a7c88fb', class: "nano-img" }, h("div", { key: '15ae3c8ea944c8f0eab8616194f44fc1033e8fe2', class: "img" }, h("div", { key: 'ec3f433ded23dcb7fc57e53b0ecaba789ba492e0', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '8f4e8c9d595a31b477b0ae3f9e135f6b5c3f0e69', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'ec35744e264cb18d1ec97a4e9c84f0c7a2d80a3e' }))), h("img", { key: 'be687a80241f559f7df7567854e1a59812437624', class: {
+            }, style: bgStyle }, h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '62398606dab9cc346ffb2acbbb913458684030db', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get watchers() { return {
         "_src": ["_srcChanged"],

package/dist/components/masked-overflow.js

@@ -320,7 +320,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
         }
     }
     render() {
-        return (h(Host, { key: '5e3818d9ff886b75194db22fd7f42af484fe17d7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '991fa196ffc2eb42c907519bb8187f15c9868161', part: "base", class: {
+        return (h(Host, { key: '49485c7d6a96e8dd122f862abd2bd2f95b2343e7', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'acd0541992b9dda0c1ab6414e67cd8a71f429918', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -329,12 +329,12 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e6958d0060691af605afa2c6fd53194b4284f29d', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '167bb7fa1450371ceab4dc8467e5debbd672101f', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'ba25b3551a2b6be4906d538cbaabf0ba8cb859f6', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '72ca6ae1ef0300fc91a95d347702bac94fec97ac', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '8d8d7c305c0c89738d9660aff6b75ca029506ab7', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'fdd83d15c431538a2992887e58aed07e9393d411', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'a1fba6d2c2e62e05b5a062c563f22c8e2b0222a4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'a6d602d437702479bd67d71bd5ac838d0ae02941', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '30eae4cf86f7bead75734736b7192420255a64fc', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '34893f5e055e8b44a78cb0706e974ee45261bdb8', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '19ea27abc4878c5ab034e8ac0ee7085f19607a92', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: '6cfdb83598367d649e6705fe709e89d8a8b505a6', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '43f3164d6c962f951ac672f79d48943c44e0514e', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'eaa09e8faa9343fca660d1f2e0a4b5366b7c6668', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/components/nano-accordion.js

@@ -1,62 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { t as transformTag, h } from './renderer.js';
-import { g as getDirectChildren } from './dom.js';
-
-const accordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@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{box-sizing:border-box}[hidden]{display:none !important}@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:contents}";
-
-const NanoAccordion$1 = /*@__PURE__*/ proxyCustomElement(class NanoAccordion extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.nanoToggle = createEvent(this, "nanoToggle", 7);
-    }
-    itemOpened;
-    get el() { return this; }
-    /** Fires when accordion elements toggle */
-    nanoToggle;
-    onToggleHandler(event) {
-        if (event.target?.tagName !== 'NANO-DETAILS')
-            return;
-        event.stopPropagation();
-        const items = getDirectChildren(this.el, transformTag('nano-details')) ||
-            this.el.querySelectorAll(transformTag('nano-details'));
-        items.forEach((item, i) => {
-            if (item !== event.target)
-                item.open = false;
-            else
-                this.itemOpened = i;
-        });
-        this.nanoToggle.emit(event.target);
-    }
-    onClosedHandler(event) {
-        event.stopPropagation();
-        this.itemOpened = null;
-        this.nanoToggle.emit();
-    }
-    render() {
-        return h("slot", { key: 'ec9331ce0686c1234021e58af9a456aa267e9247' });
-    }
-    static get style() { return accordionCss; }
-}, [257, "nano-accordion", {
-        "itemOpened": [32]
-    }, [[0, "nanoOpen", "onToggleHandler"], [0, "nanoClose", "onClosedHandler"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-accordion"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-accordion":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NanoAccordion$1);
-            }
-            break;
-    } });
-}
+import { N as NanoAccordion$1, d as defineCustomElement$1 } from './accordion.js';
 
 const NanoAccordion = NanoAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nano-data-table.js

@@ -15,6 +15,20 @@ import { d as defineCustomElement$4 } from './resize-observe.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
+function perMark(name, end = false) {
+    if (!performance || false)
+        return;
+    if (end) {
+        performance?.mark('end' + name);
+        performance?.measure(name, 'start' + name, 'end' + name);
+        const entries = performance?.getEntriesByName(name);
+        console.info(entries[entries.length ? entries.length - 1 : 0]);
+    }
+    else {
+        performance?.mark('start' + name);
+    }
+}
+
 const CSSNAMESPACE = 'nano-tbl';
 
 const isInstanceOf = (value, className) => {
@@ -1386,6 +1400,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
         const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('sort');
         this.currentSort = order + ':' + column;
         // doesn't make sense to leave user in place for a sort
         this.scrollToTop(element);
@@ -1435,17 +1450,20 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
             return { ...c, order: null };
         });
         this.nanoTblAfterSort.emit({ column: column, order });
+        perMark('sort', true);
     }
     async searchStart() {
         this._loading = true;
         const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('search');
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
         try {
             await storeSearch(this.host, this.searchTerm);
             this.nanoTblAfterSearch.emit({ term: this.searchTerm });
+            perMark('search', true);
         }
         catch (e) {
             console.warn('search failed', e);
@@ -1472,6 +1490,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
         const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
         if (sortEvent.defaultPrevented)
             return;
+        perMark('filter');
         this.currentFilters = JSON.stringify(this.filters);
         // doesn't make sense to leave user in place for a search
         this.scrollToTop();
@@ -1526,6 +1545,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
         });
         await storeFilter(this.host, this.filters);
         this.nanoTblAfterFilter.emit({ filters: this.filters });
+        perMark('filter', true);
     }
     /** Scrolls to the top immediately - used whilst sorting / filtering */
     scrollToTop(element) {
@@ -1561,6 +1581,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
     setInitialBlockDimension() {
         if (!this.blockElements?.length)
             return;
+        perMark('blockDims');
         const testForDimensions = async () => {
             await this.setMeasureElement();
             if (this.unitHeight)
@@ -1586,6 +1607,8 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
         });
         // we're all finished.
         dimensionsReady.then(() => {
+            perMark('blockDims', true);
+            perMark('init', true);
             requestAnimationFrame(() => (this.isReady = true));
         });
     }
@@ -1620,6 +1643,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
             this.blocks = [];
             return;
         }
+        perMark('setBlocks');
         // this.ignoreIO = true;
         let i = 1;
         const l = this.virtualTotalItems > dRows.length
@@ -1642,6 +1666,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
             blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
         }
         this.blocks = blocks;
+        perMark('setBlocks', true);
     }
     /**
      * Returns a block render height.
@@ -1691,6 +1716,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
      */
     scrollHandler = () => {
         let scrollPos = 0;
+        perMark('scrollHandler');
         // don't listen if this table isn't in the viewport
         if (!this.store?.general.state.isActive || !this.rows)
             return;
@@ -1728,6 +1754,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
                 }
                 blockIndex++;
             }
+            perMark('scrollHandler', true);
         });
     };
     /** Process slotted content */
@@ -1756,6 +1783,7 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
     }
     // Component lifecycle
     async componentWillLoad() {
+        perMark('init');
         // setup stores
         this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
         this.handleRowsChange();
@@ -1797,9 +1825,11 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
             return false;
     }
     componentWillRender() {
+        perMark('render');
     }
     componentDidRender() {
         this.setMeasureElement().then(() => this.setBlockHeight());
+        perMark('render', true);
     }
     disconnectedCallback() {
         if (!this.activeWatcherIo)

package/dist/components/nano-field-validator.js

@@ -508,7 +508,9 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
             this._valid = this.activeForm.checkValidity();
             this.internalValidate = false;
         }
-        this.nanoPayloadChange.emit(this._store.state);
+        setTimeout(() => {
+            this.nanoPayloadChange.emit(this._store.state);
+        }, 20);
     };
     /**
      * Handles nano field value changes and passes to store
@@ -601,7 +603,7 @@ const FieldValidator = /*@__PURE__*/ proxyCustomElement(class FieldValidator ext
             this.activeForm.removeEventListener('invalid', this.handleFormInvalid, true);
     }
     render() {
-        return (h(Host, { key: '145b307561c5a2a35d5b6b6d88d03c88ba8a41b4', class: "nano-field-validator" }, this.userForm && h("slot", { key: '2a16d6a8f32afe2c22522e240e117ccf8446edc5' }), !this.userForm && (h("form", { key: 'c72a5b25d958c97d28c78279b05fa7a3643a994e', ref: (f) => (this.activeForm = f) }, h("slot", { key: '7983e9fc33115b5448b980cbcba0940163521db8' })))));
+        return (h(Host, { key: 'bb60437392e410d528560b9a8a63c58b13f25495', class: "nano-field-validator" }, this.userForm && h("slot", { key: '7e9ff598dce291e80b53638453a8544398382cdd' }), !this.userForm && (h("form", { key: '68241c190268172ff742839ff57a5ac1ff66ca8e', ref: (f) => (this.activeForm = f) }, h("slot", { key: 'e89427bf668eb47217accdb2844d14cb4c3abd36' })))));
     }
     static get watchers() { return {
         "userForm": ["userFormChange"],