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

package/dist/collection/utils/form.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export const renderHiddenInput = (container, name, value, disabled) => {
     let input = container.querySelector('input.aux-input');
@@ -13,4 +13,3 @@ export const renderHiddenInput = (container, name, value, disabled) => {
     input.name = name;
     input.value = value || '';
 };
-//# sourceMappingURL=form.js.map

package/dist/collection/utils/gesture/gesture-controller.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 class GestureController {
     gestureId = 0;
@@ -204,4 +204,3 @@ class BlockerDelegate {
 }
 const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();
-//# sourceMappingURL=gesture-controller.js.map

package/dist/collection/utils/gesture/index.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { GESTURE_CONTROLLER } from "./gesture-controller";
 import { createPointerEvents } from "./pointer-events";
@@ -248,4 +248,3 @@ const now = (ev) => {
     return ev.timeStamp || Date.now();
 };
 export { GESTURE_CONTROLLER };
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/gesture/listener.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export const addEventListener = (el, eventName, callback, opts) => {
     // use event listener options when supported
@@ -44,4 +44,3 @@ const supportsPassive = (node) => {
     return !!_sPassive;
 };
 let _sPassive;
-//# sourceMappingURL=listener.js.map

package/dist/collection/utils/gesture/pointer-events.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { addEventListener } from "./listener";
 const MOUSE_WAIT = 2000;
@@ -111,4 +111,3 @@ export const createPointerEvents = (el, pointerDown, pointerMove, pointerUp, opt
 const getDocument = (node) => {
     return node instanceof Document ? node : node.ownerDocument;
 };
-//# sourceMappingURL=pointer-events.js.map

package/dist/collection/utils/gesture/recognizers.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export const createPanRecognizer = (direction, thresh, maxAngle) => {
     const radians = maxAngle * (Math.PI / 180);
@@ -49,4 +49,3 @@ export const createPanRecognizer = (direction, thresh, maxAngle) => {
         },
     };
 };
-//# sourceMappingURL=recognizers.js.map

package/dist/collection/utils/gesture/swipe-back.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { clamp } from "../math";
 import { createGesture } from "./index";
@@ -47,4 +47,3 @@ export const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMo
         onEnd,
     });
 };
-//# sourceMappingURL=swipe-back.js.map

package/dist/collection/utils/math.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /**
  * Returns a given number between a min and max
@@ -32,4 +32,3 @@ export function cyrb53(str, seed = 0) {
             Math.imul(h1 ^ (h1 >>> 13), 3266489909);
     return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 }
-//# sourceMappingURL=math.js.map

package/dist/collection/utils/modal.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { getTabbableElements } from "./tabbable";
 let activeModals = [];
@@ -42,4 +42,3 @@ export default class Modal {
         }
     }
 }
-//# sourceMappingURL=modal.js.map

package/dist/collection/utils/popover.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 //
 // A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.
@@ -87,7 +87,10 @@ export default class Popover {
                     name: 'sameWidth',
                     enabled: true,
                     fn: ({ state }) => {
-                        state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+                        if (this.options.sameWidth === undefined ||
+                            !!this.options.sameWidth) {
+                            state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+                        }
                     },
                     phase: 'beforeWrite',
                     requires: ['computeStyles'],
@@ -103,8 +106,9 @@ export default class Popover {
                     options: {
                         padding: 5,
                         offset: ({ reference }) => {
-                            if (this.options.placement !== 'center')
+                            if (this.options.placement !== 'center') {
                                 return [this.options.skidding, this.options.distance];
+                            }
                             return [this.options.skidding, (reference.height + 1) * -1];
                         },
                     },
@@ -151,4 +155,3 @@ export default class Popover {
         }
     }
 }
-//# sourceMappingURL=popover.js.map

package/dist/collection/utils/promise-queue.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export class PromiseQueue {
     queue = [];
@@ -53,4 +53,3 @@ export class PromiseQueue {
         return true;
     }
 }
-//# sourceMappingURL=promise-queue.js.map

package/dist/collection/utils/renderer.js

@@ -1,8 +1,18 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /* eslint-disable @typescript-eslint/no-namespace */
 import { h as stencilH } from "@stencil/core/internal";
+// css only components cannot be transformed because their static css relies on the tag name
+const CSS_ONLY_COMPONENTS = [
+    'nano-avatar',
+    'nano-badge',
+    'nano-card',
+    'nano-cta',
+    'nano-icon-item',
+    'nano-tag',
+    'nano-content-links',
+];
 /**
  * Transforms a tag name by adding a prefix if it's a custom element
  * @param tag
@@ -11,7 +21,7 @@ import { h as stencilH } from "@stencil/core/internal";
 export function transformTag(tag) {
     if (!tagPrefix)
         return tag;
-    const isMyCustomElement = tag.startsWith('nano-');
+    const isMyCustomElement = tag.startsWith('nano-') && !CSS_ONLY_COMPONENTS.includes(tag);
     return isMyCustomElement ? `${tagPrefix}-${tag}` : tag;
 }
 /**
@@ -51,4 +61,3 @@ export function getTagPrefix() {
 }
 (function (h) {
 })(h || (h = {}));
-//# sourceMappingURL=renderer.js.map

package/dist/collection/utils/scroll.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { getOffset } from "./dom";
 /**
@@ -74,10 +74,11 @@ function scrollTo(element, scrollAmt, vertical = false) {
 }
 /**
  * Scrolls an element into view *of its parent container*.
+ * If the element is already in view, nothing will happen.
+ *
  * Note to future me - cannot use native `scrollIntoView`
  * 'cos it will move the whole window
  * (vertically even though we only care about parent).
- * If the element is already in view, nothing will happen.
  */
 export function scrollIntoView(element, container, direction = 'vertical', position = 'start') {
     if (!element)
@@ -117,4 +118,59 @@ export function scrollIntoView(element, container, direction = 'vertical', posit
         }
     }
 }
-//# sourceMappingURL=scroll.js.map
+/**
+ * Attempts to find the closest scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
+export function findScrollParent(element) {
+    let style = getComputedStyle(element);
+    const excludeStaticParent = style.position === 'absolute';
+    const overflowRegex = /(auto|scroll)/;
+    if (style.position === 'fixed')
+        return document.documentElement;
+    for (let parent = element; (parent = parent.parentElement);) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === 'static') {
+            continue;
+        }
+        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+            return parent;
+        }
+    }
+    return document.documentElement;
+}
+/**
+ * Checks whether an element is currently viewable within the viewport
+ * @param el - element to check
+ * @param percentVisible - the percentage of the element that should be within the viewport
+ * @returns true if the element's area percentage is visible
+ */
+export function isInViewport(el, percentVisible = 100, axis = 'y') {
+    const r = el.getBoundingClientRect();
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    if (!r.bottom &&
+        !r.top &&
+        !r.left &&
+        !r.right &&
+        !r.height &&
+        !r.width &&
+        !r.x &&
+        !r.y)
+        return false;
+    let check = true;
+    if (axis === 'y' || axis === 'both') {
+        check = !(Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <
+            percentVisible ||
+            Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
+                percentVisible);
+    }
+    if (axis === 'x' || (axis === 'both' && check)) {
+        check = !(Math.floor(100 - ((r.left >= 0 ? 0 : r.left) / +-r.width) * 100) <
+            percentVisible ||
+            Math.floor(100 - ((r.right - windowWidth) / r.width) * 100) <
+                percentVisible);
+    }
+    return check;
+}

package/dist/collection/utils/search-insights.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 let searchInsights;
 const searchInsight = {
@@ -45,4 +45,3 @@ const searchInsight = {
     },
 };
 export default searchInsight;
-//# sourceMappingURL=search-insights.js.map

package/dist/collection/utils/slot.js

@@ -1,6 +1,7 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
+import { Build, forceUpdate, getElement } from "@stencil/core";
 /**
  * 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.
@@ -21,39 +22,69 @@ export function getInnerHTML(slot) {
     return html;
 }
 /**
- * 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
  */
-export function getTextContent(slot) {
-    const nodes = slot.assignedNodes({ flatten: true });
-    let text = '';
-    [...nodes].map((node) => {
-        text += node.textContent + ' ';
-    });
-    return text.trim();
+export 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>}
+ *
  */
-export function hasSlot(host, name) {
-    // Look for a named slot
-    if (name) {
-        return host.querySelector(`[slot="${name}"]`) !== null;
+export 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;
                 }
@@ -61,8 +92,31 @@ export 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);
+        }
+    };
 }
-//# sourceMappingURL=slot.js.map

package/dist/collection/utils/store/component-store.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { getElement } from "@stencil/core";
 import { debounce } from "../throttle";
@@ -22,46 +22,58 @@ export const ComponentStore = {
             return acc;
         }, {});
         store.set(getId, new Store(getId, component, keys, initialState, method));
-        const componentstore = store.get(getId);
-        componentstore.dispatchToProps();
+        const componentStore = store.get(getId);
+        componentStore.dispatchToProps();
         const connectedCallback = component.connectedCallback;
         component.connectedCallback = function () {
             store.set(getId, new Store(getId, component, keys, initialState, method));
-            const componentstore = store.get(getId);
+            const componentStore = store.get(getId);
             if (connectedCallback) {
                 connectedCallback.call(component);
             }
-            if (componentstore)
-                componentstore.dispatchToProps();
+            if (componentStore)
+                componentStore.dispatchToProps();
         };
         const componentDidRender = component.componentDidRender;
         component.componentDidRender = function () {
-            const componentstore = store.get(getId);
+            const componentStore = store.get(getId);
             if (componentDidRender) {
                 componentDidRender.call(component);
             }
-            if (componentstore)
-                componentstore.savePropsToStore();
+            if (componentStore)
+                componentStore.savePropsToStore();
         };
         const disconnectedCallback = component.disconnectedCallback;
         component.disconnectedCallback = function () {
-            const componentstore = store.get(getId);
-            if (componentstore)
-                componentstore.delete();
+            const componentStore = store.get(getId);
+            if (componentStore)
+                componentStore.delete();
             store.delete(getId);
             if (disconnectedCallback) {
                 disconnectedCallback.call(component);
             }
         };
     },
+    update(id) {
+        const componentStore = store.get(id);
+        if (componentStore) {
+            componentStore.savePropsToStore();
+        }
+        else {
+            console.error(`No store found for id: ${id}`);
+        }
+    },
+    get(id) {
+        return store.get(id);
+    },
 };
 class Store {
     method = 'session';
     keys;
     id;
     component;
-    initialState = {};
     updateStore = true;
+    initialState = {};
     constructor(id, component, keys, initialState, method) {
         if (!id)
             throw new Error('No id set. You can only instantiate a new component store with an id');
@@ -152,4 +164,3 @@ class Store {
         }
     };
 }
-//# sourceMappingURL=component-store.js.map

package/dist/collection/utils/store/get-set.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { parse, stringify } from "tyqs";
 const STORAGE_NAME_SPACE = 'nano-component-store:';
@@ -95,4 +95,3 @@ export const storageGet = (key, win = window) => {
     const configStr = win.localStorage.getItem(STORAGE_NAME_SPACE + key);
     return configStr !== null ? JSON.parse(configStr) : null;
 };
-//# sourceMappingURL=get-set.js.map

package/dist/collection/utils/style.js

@@ -0,0 +1,54 @@
+/*!
+ * 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
+ */
+export 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');
+}