@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.4

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -36,134 +36,11 @@
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
-  }:host {
-  /**
+  }/**
   * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).
   * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).
   * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).
   * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).
   * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).
   * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).
-  */
-  --text-color: var(--nano-color-primary-1000);
-  --text-color-hover: var(--nano-color-primary-1200);
-  --text-color-secondary: var(--nano-color-neutral-1400);
-  --text-color-disabled: var(--nano-color-neutral-1000);
-  --border-color: var(--nano-color-neutral-400);
-  --trigger-bg-color: var(--nano-color-base-0);
-}
-:host .breadcrumbs {
-  container-type: inline-size;
-  container-name: breadcrumbs;
-  inline-size: 100%;
-  max-inline-size: 1346px;
-}
-:host ol,
-:host nano-menu::part(base) {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-}
-:host li,
-:host nano-nav-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  font-size: var(--nano-font-size-xs);
-  line-height: var(--nano-line-height-normal);
-  text-wrap: nowrap;
-  margin-block-end: 0;
-}
-:host li:not(.return-only li)::after,
-:host nano-nav-item::after {
-  content: "/";
-  margin: 0 var(--nano-spacing-xs);
-  color: var(--border-color);
-}
-:host a.link {
-  color: var(--text-color);
-}
-:host a:not(.link) {
-  color: var(--text-color-secondary);
-}
-:host a:focus-visible {
-  outline: var(--nano-focus-ring);
-  outline-offset: var(--nano-focus-ring-offset);
-  z-index: 1;
-}
-:host a.link:hover {
-  color: var(--text-color-hover);
-}
-:host a.return.link {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--nano-spacing-sm) / 2);
-}
-:host nano-dropdown {
-  inline-size: 100%;
-  display: none;
-}
-:host nano-dropdown[open]::part(trigger) {
-  box-shadow: var(--nano-shadow-l1);
-}
-:host nano-dropdown[open]::part(panel) {
-  box-shadow: var(--nano-shadow-l1);
-}
-:host .trigger-button {
-  inline-size: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
-  color: var(--text-color);
-  background-color: var(--trigger-bg-color);
-  cursor: pointer;
-  text-align: start;
-  border: none;
-  font-size: var(--nano-font-size-xs);
-}
-:host .trigger-button .trigger-button_label {
-  text-decoration: underline;
-}
-:host .trigger-button .trigger-button_label::after {
-  content: "/";
-  margin: 0 var(--nano-spacing-xs);
-  color: var(--border-color);
-}
-:host .trigger-button:focus-visible {
-  outline: var(--nano-focus-ring);
-  outline-offset: var(--nano-focus-ring-offset);
-}
-:host .trigger-icon {
-  transform: rotate(0deg);
-  transition: var(--nano-transition-x-fast) ease transform;
-}
-:host .trigger-icon--open {
-  transform: rotate(180deg);
-}
-@container breadcrumbs (max-width: 768px) {
-  :host .main {
-    display: none;
-  }
-  :host nano-dropdown {
-    display: block;
-  }
-  :host nano-menu::part(base) {
-    flex-direction: column;
-  }
-  :host nano-nav-item::after {
-    display: none;
-  }
-  :host .trigger-button_label::after {
-    display: inline-block;
-  }
-  :host .return-only {
-    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);
-  }
-  :host nano-nav-item::part(trigger) {
-    text-decoration: none;
-    color: var(--text-color-secondary);
-  }
-}
+  */

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { h } from "@stencil/core";
+import { h, Build } from "@stencil/core";
 import { addGlobalStylesheetToShadow } from "../../utils/style";
 /**
  * Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.
@@ -16,7 +16,8 @@ export class NanoBreadcrumb {
     isOpen = false;
     componentWillLoad() {
         // add global styles to shadow DOM
-        addGlobalStylesheetToShadow(this.el?.shadowRoot);
+        if (Build.isBrowser)
+            addGlobalStylesheetToShadow(this.el?.shadowRoot);
     }
     render() {
         const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);

package/dist/collection/components/collapsible-comparison/collapsible-comparison.js

@@ -1,7 +1,7 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, } from "@stencil/core";
+import { Build, Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import { addGlobalStylesheetToShadow } from "../../utils/style";
 /**
@@ -44,7 +44,8 @@ export class CollapsibleComparison {
         this.open = !this.open;
     };
     componentWillLoad() {
-        addGlobalStylesheetToShadow(this.el.shadowRoot);
+        if (Build.isBrowser)
+            addGlobalStylesheetToShadow(this.el.shadowRoot);
     }
     componentDidLoad() {
         if (this.open) {
@@ -54,7 +55,7 @@ export class CollapsibleComparison {
         }
     }
     render() {
-        return (h(Host, { key: 'b522b71cd7f9b9e793f1d1345563ee60b2fd76ed', class: "nano-collapsible-comparison" }, h("div", { key: '7a37b4880f5791455f03fb2b0a8b6f5ac1a79a56', class: "collapsible-comparison" }, h("div", { key: '2c90c230cd3b2b3417e642a6d31eff6f6920cb04', part: "header" }, h("div", { key: '36db63362337181821a7e58cba8fb346909228e7', class: "header" }, h("slot", { key: '29b0ca97e9dea363b4b41a5df393051db364f53c', name: "heading" }), h("nano-cta", { key: '33f265d889e154b943d68c7f42eae8056d6f7386', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '07e6a40182306df742e947ecfbc35ab4f9fe353b', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '116c3b24bb71628d1a64852699d988cfad57d287', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '492b3281c61c49be475483564e9e080d0512fa56', class: "headings" }, h("slot", { key: 'bb8d6afcb544ea4c9652bf94798c517e2062a2ed', name: "comparison-headings" }))), h("div", { key: 'd68d1a90c62bfe70d0e9074e3262c176f066e992', class: "content" }, h("slot", { key: 'd30b86a902b62d56d56adc92b88f246fe019a3fe', name: "content" })))));
+        return (h(Host, { key: '849c3d8630973d94ced90a7fe10506815932d9ab', class: "nano-collapsible-comparison" }, h("div", { key: 'f84d57632fc72fbc266839afd017d0087ba2ed61', class: "collapsible-comparison" }, h("div", { key: '6eeadd3c7ee8ccfacf6eeddd1addcb6f850d8561', part: "header" }, h("div", { key: 'fa7e80984c27a377b485392ada0bdc5bcacc523d', class: "header" }, h("slot", { key: '93e94814f324b460dbb69ae44214e77602e4af8f', name: "heading" }), h("nano-cta", { key: 'ac4faf7dddc1659c80493321ffacf10ccc9587dd', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: 'b7de49dacb1b827eaf17cfb81349b63d31858251', onClick: this.handleClick }, this.open ? 'Hide' : 'Show', " details")), h("nano-icon-button", { key: '3cddc59e59966562873e7e4999d22ff4db1b4da1', label: `${this.open ? 'Hide' : 'Show'} details`, onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: 'a977e27bf6aaea079bb80ca72433e2f2c385c683', class: "headings" }, h("slot", { key: '7793d25823855334f9d5223070ef84a1418fb1c0', name: "comparison-headings" }))), h("div", { key: '08102e78eda50cd562e0c31588a38c363e746e4d', class: "content" }, h("slot", { key: '0318767e2bb809f6db5a2c402438682d6101885a', name: "content" })))));
     }
     static get is() { return "nano-collapsible-comparison"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,9 +24,10 @@ export class NanoCta {
     /** Predefined styles when displaying a number of CTAs together */
     group;
     componentWillLoad() {
-        if (!this.host.querySelector('button, a')) {
+        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);
             });

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

@@ -135,19 +135,17 @@
   gap: 10px;
 }
 .nano-tbl__progress-bar {
-  font-size: 0.2rem;
+  --height: 0.2125rem;
   position: sticky;
   inset-block-start: 0;
   inset-inline: 0;
   z-index: 10;
-  transition: scale 0.25s;
+  transition: transform 0.25s;
   transform: scale(0);
   inline-size: 100%;
-  block-size: 0;
 }
 .nano-tbl__progress-bar--show {
   transform: scale(1);
-  block-size: auto;
 }
 .nano-tbl__caption--hide {
   clip-path: inset(50%);
@@ -321,7 +319,4 @@ tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano
 .nano-tbl__spinner--show {
   scale: 1;
   position: sticky;
-}
-.nano-tbl .nano-skeleton {
-  line-height: var(--nano-line-height-normal);
 }

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

@@ -818,17 +818,20 @@ 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("progress", null)), 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, "aria-busy": this._loading || undefined }, 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) => [
             h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
                     sortable: this.defaultSort,
                 } }),
-        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+        ]))), this._loading && !this.blocks.length && (h("tbody", { class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(this.placeholderSize).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("span", { class: "n-loader-skeleton" }, h("span", null, "Content loading")) })))))))), h("tr", { hidden: !!this._loading || !!this.blocks.length }, h("th", { class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
                 this.blockElements.push(tb);
             }, class: {
                 [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),

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"; }