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

package/dist/components/slot.js

@@ -1,46 +1,72 @@
 /*!
- * Web Components for Nanopore digital Web Apps
- */
-/**
- * Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated
- * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
- * @param slot
- * @returns a concatenated string from html and text nodes
+ * Custom elements for Nanopore-Digital Web applications
  */
+import { getElement, Build, forceUpdate } from '@stencil/core/internal/client';
+
 /**
- * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
- * string. This is useful because we can't use slot.textContent as an alternative.
+ * Given an element (which can either be within a shadowRoot or not) find it's innerText
  * @param slot
  * @returns a concatenated string of text
  */
-function getTextContent(slot) {
-    const nodes = slot.assignedNodes({ flatten: true });
-    let text = '';
-    [...nodes].map((node) => {
-        text += node.textContent + ' ';
-    });
-    return text.trim();
+function getTextContent(element) {
+    const root = element.getRootNode();
+    if (root.host)
+        return root.host.innerText;
+    return element.innerText;
 }
 /**
- * Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
- * slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
- * @param host a custom element host
- * @param name a slot to find
- * @returns boolean
+ * Decides if slots are being used and re-renders when slot content changes.
+ *
+ * @param instance The component instance
+ * @param slotNames The names of the slots to watch for changes
+ *
+ * @example
+ * // in your component
+ * private slotController = new HasSlotController(this, [default], 'header', 'footer');
+ * ...
+ * // in your render method
+ * {slotController.has('header') && <div class="header"><slot name="header /></div>}
+ *
  */
-function hasSlot(host, name) {
-    // Look for a named slot
-    if (name) {
-        return host.querySelector(`[slot="${name}"]`) !== null;
+class HasSlotController {
+    host;
+    slotNames = [];
+    constructor(instance, ...slotNames) {
+        this.slotNames = slotNames;
+        const ogComponentWillLoad = instance.componentWillLoad;
+        instance.componentWillLoad = () => {
+            this.host = getElement(instance);
+            if (ogComponentWillLoad) {
+                ogComponentWillLoad.call(instance);
+            }
+        };
+        const ogConnectedCallback = instance.connectedCallback;
+        instance.connectedCallback = () => {
+            this.host = getElement(instance);
+            this.hostConnected();
+            if (ogConnectedCallback) {
+                ogConnectedCallback.call(instance);
+            }
+        };
+        const ogDisconnectedCallback = instance.disconnectedCallback;
+        instance.disconnectedCallback = () => {
+            this.hostDisconnected();
+            this.host = undefined;
+            if (ogDisconnectedCallback) {
+                ogDisconnectedCallback.call(instance);
+            }
+        };
     }
-    // Look for a default slot
-    if (this.host.shadowRoot) {
-        return [...Array.from(host.childNodes)].some((node) => {
-            if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+    hasDefaultSlot() {
+        if (!this.host || !this.host.isConnected)
+            return;
+        return [...this.host.childNodes].some((node) => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
                 return true;
             }
-            if (node.nodeType === node.ELEMENT_NODE) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
                 const el = node;
+                // If it doesn't have a slot attribute, it's part of the default slot
                 if (!el.hasAttribute('slot')) {
                     return true;
                 }
@@ -48,11 +74,33 @@ function hasSlot(host, name) {
             return false;
         });
     }
-    // non-shadow component...TODO - only for 'scoped' components atm
-    if (host.querySelector(`:not(.sc-${host.tagName.toLowerCase()}):not([slot])`))
-        return true;
+    hasNamedSlot(name) {
+        if (!this.host || !this.host.isConnected)
+            return;
+        return !!Array.from(this.host.children).find(ele => ele.getAttribute('slot') && ele.getAttribute('slot') === name);
+    }
+    has(slotName) {
+        return slotName === '[default]'
+            ? this.hasDefaultSlot()
+            : this.hasNamedSlot(slotName);
+    }
+    hostConnected() {
+        if (Build.isServer)
+            return;
+        this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    }
+    hostDisconnected() {
+        if (Build.isServer || !this.host)
+            return;
+        this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    handleSlotChange = (event) => {
+        const slot = event.target;
+        if ((this.slotNames.includes('[default]') && !slot.name) ||
+            (slot.name && this.slotNames.includes(slot.name))) {
+            forceUpdate(this.host);
+        }
+    };
 }
 
-export { getTextContent as g, hasSlot as h };
-
-//# sourceMappingURL=slot.js.map
+export { HasSlotController as H, getTextContent as g };

package/dist/components/spinner.js

@@ -1,11 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
 
-const spinnerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84 140 175);--indicator-color:var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );--track-color:var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));--overlay-color:var(--nano-layer-overlay-light, rgb(255 255 255 / 70%))}.spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);animation:flex 1.5s linear infinite;transform-origin:center center}.spinner__dnatrack--2::before{animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50%;background:var(--indicator-color);animation:rotate 1.5s linear infinite;transform-origin:center center;inset-inline-start:50%;transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-block-start:0.5em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(-50%) translateY(1.875em) scale(2)}50%{transform:translateX(-50%) translateY(3.75em) scale(1)}75%{transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes flex{0%,100%{transform:translateX(-50%) scaleY(5)}25%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(5)}75%{transform:translateX(-50%) scaleY(1)}}";
-const NanoSpinnerStyle0 = spinnerCss;
+const spinnerCss = ":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:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84 140 175);--indicator-color:var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );--track-color:var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));--overlay-color:var(--nano-layer-overlay-light, rgb(255 255 255 / 70%))}.spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);animation:flex 1.5s linear infinite;transform-origin:center center}.spinner__dnatrack--2::before{animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50%;background:var(--indicator-color);animation:rotate 1.5s linear infinite;transform-origin:center center;inset-inline-start:50%;transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-block-start:0.5em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(-50%) translateY(1.875em) scale(2)}50%{transform:translateX(-50%) translateY(3.75em) scale(1)}75%{transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes flex{0%,100%{transform:translateX(-50%) scaleY(5)}25%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(5)}75%{transform:translateX(-50%) scaleY(1)}}";
 
 const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLElement {
     constructor() {
@@ -23,9 +22,9 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
         this.hasText = !!this.el.childNodes.length;
     }
     render() {
-        return (h(Host, { key: '650f22e1f076d786590389993562fb03d73b50d5', class: "nano-spinner" }, h("div", { key: '392afaac4ae23acdc247a7d4d5dea7166beaa6f4', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: '71699c822304d7bc40bc6510a373bd6da4905dc0', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'f3cf1be6056a3aacd9f08fb2ba20a0196a751912', class: "spinner__dna" }, h("div", { key: '9fbc4e80ce66f14751001ed7e9559e01649d1e7b', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '1242c2d9c928cf0e371133335ad05dc1e1426380', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '1dcfced70f0813796681ca5049fb50144d83e9ec', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: 'cdb111d45ddbab07c9c0fed293bff499e306215e', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: '326aa2074a4e16f7d6fddc41354672188c602f70', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: 'd436ba81949ada55d5fe2356e663ba1b2f24f1fd', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'ad2b9393afa3d2e9109fe7af696ab06001541344', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'db18ff89bdfa702a733e817099ec03e550b7a967', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '812f51e0fdb34fae89c048fef6925feeed8e5d7f', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: 'e53e41b6adc1fbf35ae07f7e0783b097d5a201db', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '0407e5a7234424094b1bc452a6f3bfe2c38ad7a7', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: 'f9c9ee014b3cb7df2f6ca9e1f5ef6fc21a7b2c5c', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '3af97dda00e1ed9eaa738a2e0167f59916a69dbe', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '1f49f2d13828475a24dc318f3f28cca6973e01d5', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: '5aee21e437ab1f35a35a1616e170ce1fed8d2811', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: '3e87f7a4aca4c55d750b6f01d14f83c8c9b232e8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: '1e3e90c45121e16f4297ccf31d3809910d5721cf' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
+        return (h(Host, { key: 'dbc40d7788bbf362c854bb8e2edfec5eba74dab7', class: "nano-spinner" }, h("div", { key: '43ed7c0bc040a058f5ae2e667d060bc977ab1cd6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'e5b5e56150e94540cb10114ea50414fbfa388f9b', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'd710dd242b6f87267dd7e5e027e06970d50bf404', class: "spinner__dna" }, h("div", { key: '8a352a82329fab518e60016e02b6a8ed5acc2f09', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '11df9066edf3c1976e3a2389d01ec16db6351449', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '4b3491c97ff57acc3630e084965c22f4f2be21ac', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '539be4e37c8ef5942c96a9e956da72edaa85a717', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'cb819582c58208d071303faa623a6d1204eae265', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '852c3b793018c03021555321f9c10f5060a129f0', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: '915260775e7f710e9d54c80ebe66a4be9ffb4d56', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'bad113420011fbeff7421a347459060ea0e27c32', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: 'e2d6aee7635d1262116119240f4d4e7518b26fc6', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '0ccd6e6d73eca5bcc50073bd4502d88cdd1aaaeb', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '1046da948f271f9a8812e1795eca262a86eb5e77', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '65b4f08dd543597c477bf3bb3d1b01d2de29d897', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '7e6df709a6c943e14cafdbcff845a40aaedadca9', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '70e7baee2dea251a9413905a0f8df825ea8a1c9f', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'ca16ebfa9ab9932f67dbe542eacced2056644295', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'fa9e17f125e1f435f75538b24111cefbbce930c8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'c2ce2c01f09a02201a1247f9db1baae3afd62c55' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
     }
-    static get style() { return NanoSpinnerStyle0; }
+    static get style() { return spinnerCss; }
 }, [1, "nano-spinner", {
         "type": [1],
         "overlay": [516],
@@ -46,5 +45,3 @@ function defineCustomElement() {
 }
 
 export { Spinner as S, defineCustomElement as d };
-
-//# sourceMappingURL=spinner.js.map

package/dist/components/sticker.js

@@ -1,14 +1,13 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { a as getOffset } from './dom.js';
 import { d as debounce } from './throttle.js';
-import { f as findScrollParent } from './scroll-parent.js';
+import { f as findScrollParent } from './scroll.js';
 import { t as transformTag, h } from './renderer.js';
 
-const stickerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index=\"1\"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index=\"2\"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index=\"3\"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index=\"4\"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index=\"5\"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index=\"1\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index=\"2\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index=\"3\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index=\"4\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index=\"5\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}";
-const NanoStickerStyle0 = stickerCss;
+const stickerCss = ":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{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index=\"1\"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index=\"2\"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index=\"3\"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index=\"4\"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index=\"5\"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index=\"1\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index=\"2\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index=\"3\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index=\"4\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index=\"5\"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}";
 
 function _getScrollTop(ele) {
     return ele instanceof Document ? window.pageYOffset : ele.scrollTop;
@@ -611,12 +610,12 @@ const Sticker = /*@__PURE__*/ proxyCustomElement(class Sticker extends HTMLEleme
         this.hasBootstrapped = false;
     }
     render() {
-        return (h(Host, { key: 'b282e10cddb66120a13fcade77d1f2b554a20579', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '33b8b8a569e522809bc9dd8efba10282728117a8', class: {
+        return (h(Host, { key: 'cdcb7fdadde75c5f860cbc5d93ef7d6f58bc499b', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'fa8b5831edde3d5e39036681cc75a0c2c0e84ccf', class: {
                 sticker: true,
                 sticky: this.isRootSticker && this.isSticky,
                 stuck: this.isStuck && this.isRootSticker && this.isSticky,
                 hide: this.isRootSticker && this.hide && this.isStuck,
-            }, ref: (div) => (this.sticker = div) }, h("div", { key: 'bc0584d28222ecaa8c362817ef3a71f618fe4796', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '12f6f6dca5d58ccdc446aee97cd5bee39f3c322e' })))));
+            }, ref: (div) => (this.sticker = div) }, h("div", { key: '8ec62a7127c1823f5e2ab35b80617ec495fa4121', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '6206fa5ac74522b69e7c5a99b4147458399f3a5d' })))));
     }
     static get watchers() { return {
         "trigger": ["updateTriggerOffset"],
@@ -633,7 +632,7 @@ const Sticker = /*@__PURE__*/ proxyCustomElement(class Sticker extends HTMLEleme
         "scrollHide": ["visibilityDecisionHandler"],
         "hide": ["handleHideChange"]
     }; }
-    static get style() { return NanoStickerStyle0; }
+    static get style() { return stickerCss; }
 }, [1, "nano-sticker", {
         "autoResize": [4, "auto-resize"],
         "isSticky": [1028, "is-sticky"],
@@ -643,7 +642,7 @@ const Sticker = /*@__PURE__*/ proxyCustomElement(class Sticker extends HTMLEleme
         "hideOnNewStickers": [4, "hide-on-new-stickers"],
         "breakPointMax": [2, "break-point-max"],
         "breakPointMin": [2, "break-point-min"],
-        "scrollParent": [1040],
+        "scrollParent": [1040, "scroll-parent"],
         "stickTo": [1, "stick-to"],
         "isStuck": [32],
         "isRootSticker": [32],
@@ -693,5 +692,3 @@ function defineCustomElement() {
 }
 
 export { Sticker as S, defineCustomElement as d };
-
-//# sourceMappingURL=sticker.js.map

package/dist/components/style.js

@@ -0,0 +1,56 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+let cachedCSStylesheet;
+/**
+ * Adds the global nano-components stylesheets as a constructable stylesheet to a shadow root.
+ * This is useful when shadow DOM enabled components:
+ * - use css-only components
+ * - use themed sections within their markup (i.e. `<div class="nano-theme-darK">Always dark themed section</div>`)
+ *
+ * @param shadowRoot - The shadow root to add the stylesheet to
+ */
+function addGlobalStylesheetToShadow(shadowRoot) {
+    if (!shadowRoot)
+        return;
+    if (cachedCSStylesheet) {
+        // we've already constructed the stylesheet
+        shadowRoot.adoptedStyleSheets.push(cachedCSStylesheet);
+        return;
+    }
+    const globalStylesheets = document.styleSheets;
+    let stylesheet = null;
+    let rule = null;
+    let globalStylesheet = [];
+    for (stylesheet of globalStylesheets) {
+        if (!(stylesheet instanceof CSSStyleSheet))
+            continue;
+        for (rule of stylesheet.cssRules) {
+            // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
+            // this is a bit fragile but does the job
+            if (rule instanceof CSSLayerBlockRule &&
+                rule.cssText.indexOf('.nano-toast-stack') > -1) {
+                globalStylesheet.push(stylesheet);
+            }
+            if (rule instanceof CSSLayerBlockRule &&
+                rule.cssText.indexOf('.nano-theme') > -1) {
+                globalStylesheet.push(stylesheet);
+            }
+        }
+    }
+    if (globalStylesheet.length) {
+        // if we found the global stylesheet, add it to the shadow root
+        const sheet = new CSSStyleSheet();
+        for (const globalSheet of globalStylesheet) {
+            for (const rule of globalSheet.cssRules) {
+                sheet.insertRule(rule.cssText);
+            }
+        }
+        cachedCSStylesheet = sheet;
+        shadowRoot.adoptedStyleSheets.push(sheet);
+        return;
+    }
+    console.warn('No global stylesheet found');
+}
+
+export { addGlobalStylesheetToShadow as a };

package/dist/components/tabbable.js

@@ -1,9 +1,23 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
+import { Build } from '@stencil/core/internal/client';
+
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
-function isTabbable(el) {
+function isTabbable(el, skipVisible = false) {
     const tag = el.tagName.toLowerCase();
+    if (![
+        'button',
+        'input',
+        'select',
+        'textarea',
+        'a',
+        'audio',
+        'video',
+        'summary',
+    ].includes(tag)) {
+        return false;
+    }
     // Elements with a -1 tab index are not tabbable
     if (el.getAttribute('tabindex') === '-1') {
         return false;
@@ -36,46 +50,46 @@ function isTabbable(el) {
         !el.hasAttribute('checked')) {
         return false;
     }
-    // Elements that are hidden have no offsetParent and are not tabbable
-    if (!el.offsetParent) {
+    // Anchors without href are not tabbable
+    if (tag === 'a' && !el.hasAttribute('href')) {
         return false;
     }
-    // Elements without visibility are not tabbable (calculated last due to performance)
-    if (window.getComputedStyle(el).visibility === 'hidden') {
-        return false;
+    if (!skipVisible) {
+        // Elements that are hidden have no offsetParent and are not tabbable
+        if (!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)) {
+            return false;
+        }
+        if (typeof el.checkVisibility === 'function' &&
+            !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) {
+            return false;
+        }
     }
-    // At this point, the following elements are considered tabbable
-    return [
-        'button',
-        'input',
-        'select',
-        'textarea',
-        'a',
-        'audio',
-        'video',
-        'summary',
-    ].includes(tag);
+    return true;
 }
 /**
  * Recursively locate all tabbable elements within an element.
  * If the target element is tabbable, it will be included in the
  * resulting array. This function will also look in open shadow roots.
+ *
  * @param root the root to search from
- * @param first return the first tabbable element found
+ * @param first stop drilling after finding the first tabbable elements
+ * @param skipVisible if true, will skip visibility checks
  * @returns an array of tabbable elements
  */
-function getTabbableElements(root, first = false) {
+function getTabbableElements(root, first = false, skipVisible = false, skipShadow = false) {
+    if (Build.isServer)
+        return [];
     const tabbableElements = [];
     if (root instanceof HTMLElement) {
         // Is the root element tabbable?
-        if (isTabbable(root)) {
+        if (isTabbable(root, skipVisible)) {
             tabbableElements.push(root);
             if (first)
                 return tabbableElements;
         }
         // Look for tabbable elements in the shadow root
-        if (root.shadowRoot && root.shadowRoot.mode === 'open') {
-            getTabbableElements(root.shadowRoot, first).map((el) => {
+        if (!skipShadow && root.shadowRoot && root.shadowRoot.mode === 'open') {
+            getTabbableElements(root.shadowRoot, first, skipVisible).map((el) => {
                 if (!tabbableElements.includes(el))
                     tabbableElements.push(el);
             });
@@ -83,7 +97,7 @@ function getTabbableElements(root, first = false) {
         // Look at slotted elements
         if (HTMLSlotElement && root instanceof HTMLSlotElement) {
             root.assignedElements().map((slottedEl) => {
-                getTabbableElements(slottedEl, first).map((el) => {
+                getTabbableElements(slottedEl, first, skipVisible).map((el) => {
                     if (!tabbableElements.includes(el))
                         tabbableElements.push(el);
                 });
@@ -92,7 +106,7 @@ function getTabbableElements(root, first = false) {
     }
     // Look for tabbable elements in children
     Array.from(root.children).map((el) => {
-        getTabbableElements(el, first).map((el) => {
+        getTabbableElements(el, first, skipVisible).map((el) => {
             if (!tabbableElements.includes(el))
                 tabbableElements.push(el);
         });
@@ -100,10 +114,10 @@ function getTabbableElements(root, first = false) {
     return tabbableElements;
 }
 function getNearestTabbableElement(el) {
-    const tabbableElements = getTabbableElements(el, true);
+    // @ts-ignore
+    window.getTabbableElements = getTabbableElements;
+    const tabbableElements = getTabbableElements(el, true, true);
     return tabbableElements.length ? tabbableElements[0] : null;
 }
 
 export { getNearestTabbableElement as a, getTabbableElements as g };
-
-//# sourceMappingURL=tabbable.js.map

package/dist/components/table.worker.js

@@ -1,11 +1,11 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { c as createWorker } from './nano-table.js';
+import { c as createWorker } from './nano-data-table.js';
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';
-const workerPath = new URL('assets/table.worker-da5412ed.js', import.meta.url).href;
+const workerPath = new URL('assets/table.worker-BTF0UXAd.js', import.meta.url).href;
 let worker;
 try {
   // first try directly starting the worker with the URL
@@ -19,5 +19,3 @@ try {
 }
 
 export { worker, workerMsgId, workerName, workerPath };
-
-//# sourceMappingURL=table.worker.js.map

package/dist/components/tag.js

@@ -0,0 +1,89 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+const tagCss = ":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}}";
+
+const NanoTag = /*@__PURE__*/ proxyCustomElement(class NanoTag extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.nanoClose = createEvent(this, "nanoClose", 7);
+    }
+    /**
+     * Whether the tag is closable or not.
+     * If true, a close button will be displayed.
+     */
+    closable = false;
+    /**
+     * The size of the tag.
+     */
+    size = 'regular';
+    get el() { return this; }
+    /**
+     * Fires when close button is clicked
+     */
+    nanoClose;
+    onKeyDown = (e) => {
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    };
+    handleClick = (_e) => {
+        this.close();
+    };
+    close() {
+        this.nanoClose.emit();
+    }
+    containsAnchor = () => !!this.el.querySelector('a');
+    render() {
+        return (this.closable &&
+            !this.containsAnchor() && [
+            h("slot", { key: '0d6e99e16dc034266f43677f5dbb47b7a390d562' }),
+            h("nano-icon-button", { key: '08586a086598c37e6d4af76df6ff19ca1723b3d8', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
+        ]);
+    }
+    static get style() { return tagCss; }
+}, [4, "nano-tag", {
+        "closable": [516],
+        "size": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-tag", "nano-icon", "nano-icon-button", "nano-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoTag);
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "nano-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NanoTag as N, defineCustomElement as d };

package/dist/components/theme.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /**
  * Create the mode and color classes for the component based on the classes passed in
@@ -10,8 +10,7 @@
 const createColorClasses = (color, cssClassMap) => {
     return typeof color === 'string' && color.length > 0
         ? {
-            'nano-color': true,
-            [`nano-color-${color}`]: true,
+            [color]: true,
             ...cssClassMap,
         }
         : cssClassMap;
@@ -42,5 +41,3 @@ const getClassMap = (classes) => {
 };
 
 export { createColorClasses as c, getClassMap as g };
-
-//# sourceMappingURL=theme.js.map

package/dist/components/throttle.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 const debounceEvent = (event, wait) => {
     const original = event._original || event;
@@ -46,5 +46,3 @@ const throttle = (callback, delay) => {
 };
 
 export { debounceEvent as a, debounce as d, throttle as t };
-
-//# sourceMappingURL=throttle.js.map