@nanoporetech-digital/components 8.0.0-alpha.1 → 8.0.0-alpha.3

package/dist/cjs/{tabbable-YPytg5sg.js → tabbable-CkzmpQhq.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-B76C6Tm9.js');
+require('./index-IR1lkhwT.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-bFxUCos7.js → table.worker-C5ofbi7M.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-BNwDI1rg.js');
-require('./index-B76C6Tm9.js');
-require('./renderer-Z8wHFL4e.js');
+var nanoDataTable_entry = require('./nano-data-table-C_KLyFMO.js');
+require('./index-IR1lkhwT.js');
+require('./renderer-h0yo23iy.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-DspYj7mY.js');
-require('./dom-CvQQBdol.js');
-require('./index-ChTXweZN.js');
+require('./scroll-_aiH0KkA.js');
+require('./dom-3kyE_RMm.js');
+require('./index-yq5hsIxW.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/collection-manifest.json

@@ -67,7 +67,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.35.1-dev.1750418634.dcb189d",
+    "version": "4.35.1-dev.1750682262.1ce9541",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/animation/animation.js

@@ -8,6 +8,9 @@ import { animations, easings } from "./animations";
  * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
  * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
  *
+ * @version 6.0.0
+ * @status stable
+ *
  * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.
  */
 export class NanoAnimation {
@@ -161,7 +164,7 @@ export class NanoAnimation {
         this.animation?.finish();
     }
     render() {
-        return (h(Host, { key: 'c5bd8b75985fd99981340c3cd20c74f99ac8dd3c', class: "nano-animation" }, h("slot", { key: '989677365d344809aa575626b3253ab888822171', ref: (slot) => {
+        return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
                 this.defaultSlot = slot;
             }, onSlotchange: this.handleSlotChange })));
     }

package/dist/collection/components/checkbox/checkbox.js

@@ -21,7 +21,7 @@ export class Checkbox {
     }
     set slotWrapper(value) {
         this._slotWrapper = value;
-        this.hasLabel = !!value.querySelectorAll('*').length || !!this.label;
+        this.hasLabel = !!value?.querySelectorAll('*').length || !!this.label;
     }
     host;
     inputType = 'checkbox';
@@ -229,7 +229,7 @@ export class Checkbox {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: 'ca41f256a304b8ec19dba81fbe0dcd30eefd63fe' }, h("label", { key: '31254b867b036d7703939e7b19f4f483f00af844', class: {
+        return (h(Host, { key: 'd1c462c6850bad6dd37696c1edc61d1413613908' }, h("label", { key: 'e45bce2bffd58378e79606d848b8dc4b2a023fb2', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
@@ -237,11 +237,11 @@ export class Checkbox {
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
                 ['nanocb__' + this.type]: true,
-            }, htmlFor: this.inputId }, h("input", { key: 'd46202d25ee15a0274766d845510608ed5af88f4', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0f3c9134ab08ce653a58d71d681495349536e211', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'e4315662f387dc17f3406f22931535061756cca6', id: labelId, class: {
+            }, htmlFor: this.inputId }, h("input", { key: '732c982c1613eed2075857fff33a869378ce2356', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '7299bc0cca8ea4230d4317ad1a5e9ec5c72fd58d', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'daa0fd8b2b63796e96ea40e843390ca62c41c968', id: labelId, class: {
                 nanocb__label: true,
                 [`nanocb__label--${this.type}`]: true,
                 'nanocb__label--hidden': this.hideLabel,
-            } }, this.label && !!this.label.length && h("span", { key: '05716b3189e0a489c530c2539944eaaae74e0e08' }, this.label), h("span", { key: '026a9bbb2f50332d184a29a03a58e6cb287d7f8c', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: '62b0ab184d32167780d52aa90dddcdc25977548c' })))))));
+            } }, this.label && !!this.label.length && h("span", { key: 'cdcdf9528ee8f39f22ddd9f61c490d4c02f910e4' }, this.label), h("span", { key: '021ecfc889a1bc89df711343cad337d847d93191', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: 'da6bb8cfd800f4f423aaa7be538b1e33af73f5bc' })))))));
     }
     static get is() { return "nano-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/cta/cta.js

@@ -1,7 +1,3 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { h } from "@stencil/core";
 /**
  * CTAs (Call To Actions) invite the user to take action.
  * They are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.
@@ -27,14 +23,16 @@ export class NanoCta {
     icon;
     /** Predefined styles when displaying a number of CTAs together */
     group;
-    internalButton = false;
     componentWillLoad() {
-        this.internalButton = !this.host.querySelector('button, a');
-    }
-    render() {
-        if (!this.internalButton)
-            return;
-        return (h("button", { type: "button", class: "nano-internal-cta" }, h("slot", null)));
+        if (!this.host.querySelector('button, a, div')) {
+            const button = document.createElement('button');
+            button.classList.add('nano-internal-cta');
+            button.type = 'button';
+            this.host.childNodes.forEach((node) => {
+                button.appendChild(node);
+            });
+            this.host.appendChild(button);
+        }
     }
     static get is() { return "nano-cta"; }
     static get originalStyleUrls() {

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

@@ -818,10 +818,13 @@ export class NanoDataTable {
         return (h(Host, { class: "nano-data-table" }, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { onNanoResize: () => {
                 if (this.tablePinnedService)
                     this.tablePinnedService.onResize();
-            } }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", { indeterminate: true, class: {
+            } }), Wrap(h("div", { class: `${CSSNAMESPACE}__wrap` }, h("nano-progress-bar", {
+            // indeterminate
+            class: {
                 [`${CSSNAMESPACE}__progress-bar`]: true,
                 [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h("caption", { class: {
+            }
+        }), h("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h("caption", { class: {
                 [`${CSSNAMESPACE}__caption`]: true,
                 [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
             } }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [

package/dist/collection/components/datalist/datalist.js

@@ -103,7 +103,7 @@ export class DataList {
         writeTask(() => {
             if (this.open) {
                 const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
-                this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40) + 'px');
+                this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
             }
             this.nanoDropdown.open = this.open;
             if (this.connectedInput) {
@@ -525,18 +525,18 @@ export class DataList {
         }
     }
     render() {
-        return (h(Host, { key: 'c869f626deae72020846edf761d0d8f1b59c34e7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '8fa52dc246705c9af636b1c96ee37df8b6bd746d', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '998896a220e3cf3f010bda3354bb530ac0cc9296', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8f585edd48ec29a847818d1e9af8baf0bc4b4ddf', name: "list-top" }), h("slot", { key: '3bdd8c0a51d63b6fcf3a25d630212db4ba7d8a9b' }), h("slot", { key: 'a7b997daebd6a1e25f1a4a97e4354b966ceeebd6', name: "internal-opts" }), h("slot", { key: '41ebc4da7244b1e4fb532a2fbb0356ea51eb865a', name: "list-bottom" })), h("nano-menu", { key: 'd5d360f4e8d3c78780477572d385daaa4bb12c15', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '3cc55519054da79e57dc70ecc936c0e67e7e3949', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '0662bfdc4056f2111647550d9aba6a331653d2f3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get is() { return "nano-datalist"; }
     static get encapsulation() { return "shadow"; }