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

package/dist/components/option.js

@@ -1,5 +1,5 @@
 /*!
- * 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 { h } from './renderer.js';
@@ -7,14 +7,12 @@ import { g as getDirectChildren } from './dom.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const optionCss = ":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{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
-const NanoOptionStyle0 = optionCss;
+const optionCss = ":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{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-300);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
 
 let optIds = 0;
 const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
     optId = `nano-option-${optIds++}`;
     get host() { return this; }
-    hasFocus = false;
     constructor() {
         super();
         this.__registerHost();
@@ -51,18 +49,20 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
      * search / filter via extra related terms. Another usecase is 'endonyms'
      */
     filterMeta = '';
+    /** Setting an href will render an `<a>` element */
+    href;
     /** Fired when an option is selected */
     nanoSelect;
     // Event handlers
-    // stop scrolling on select
     handleKeyDown(e) {
-        if (e.key !== ' ' && e.key !== 'Enter')
+        if ((e.key !== ' ' && e.key !== 'Enter') || this.href)
             return;
+        // stop scrolling on select
         e.preventDefault();
         this.nanoSelect.emit(this.host);
     }
     handleClick() {
-        if (this.disabled)
+        if (this.disabled || this.href)
             return;
         this.nanoSelect.emit(this.host);
     }
@@ -79,25 +79,26 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
+        const WrapTag = this.href ? 'a' : 'div';
+        return (h(Host, { key: 'ab20615d63e2e61ae1d685d4e56074e9192aad02', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: 'b301227561b6201851a03b6b1511fc789d58f872', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
+            } }, h("div", { key: 'ed2d11478560dd2e73f7b1373a6742a3f14368a8', part: "check-icon", class: "option__check" }, h("slot", { key: '23a98f11788b6427ea1187bd4f0ddce6fb945ad1', name: "check-icon" }, h("nano-icon", { key: 'ae544942a830172078186d6b060d06423cdce4f6', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '8cc27b2315e7746e5a239cc5f28f656963736e56', part: "start", class: "option__start" }, h("slot", { key: '774af5f7b50587f609dcefa3ba5c41340d9a6acf', name: "start" })), h("div", { key: '3c4524e66aac70d5e74b42271ff57ab10f747cf6', part: "label", class: "option__label" }, h("slot", { key: 'dc4fa00135857715d9867f747a14a19b01b892d1' }, this.label || this.value)), h("div", { key: '3f59b784aec9d62f4c1aaf731781ff21b53e114b', part: "end", class: "option__end" }, h("slot", { key: '138aa8b09d4195210528e87ff763c8c4d9a668b7', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
         "label": ["labelChanged"]
     }; }
-    static get style() { return NanoOptionStyle0; }
+    static get style() { return optionCss; }
 }, [1, "nano-option", {
         "value": [1537],
         "label": [1537],
         "selected": [516],
         "disabled": [516],
         "filterMeta": [1, "filter-meta"],
-        "hasFocus": [32]
+        "href": [1]
     }, [[0, "keydown", "handleKeyDown"]], {
         "value": ["valueChanged"],
         "label": ["labelChanged"]
@@ -122,5 +123,3 @@ function defineCustomElement() {
 }
 
 export { Option as O, defineCustomElement as d };
-
-//# sourceMappingURL=option.js.map

package/dist/components/page-dots.js

@@ -1,7 +1,7 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { F as Flickity, u as utils, U as Unipointer } from './nano-slides.js';
+import { F as Flickity, u as utils, U as Unipointer } from './slides.js';
 
 // -------------------------- PageDots -------------------------- //
 function PageDots(parent) {
@@ -12,7 +12,7 @@ function PageDots(parent) {
 PageDots.prototype = Object.create(Unipointer.prototype);
 PageDots.prototype._create = function () {
     // create holder element
-    this.holder = document.createElement('ol');
+    this.holder = document.createElement('div');
     this.holder.className = 'flickity-page-dots';
     this.holder.part.add('pagination');
     // create dots, array of elements
@@ -50,10 +50,9 @@ PageDots.prototype.addDots = function (count) {
     const length = this.dots.length;
     const max = length + count;
     for (let i = length; i < max; i++) {
-        const dot = document.createElement('li');
+        const dot = document.createElement('button');
         dot.classList.add('dot');
-        dot.part.add('pagination-item');
-        dot.setAttribute('aria-label', 'Page dot ' + (i + 1));
+        dot.innerText = `Go to slide ${i + 1}`;
         fragment.appendChild(dot);
         newDots.push(dot);
     }
@@ -88,7 +87,7 @@ PageDots.prototype.onTap = PageDots.prototype.onClick = function (event) {
     // old method name, backwards-compatible
     const target = event.target;
     // only care about dot clicks
-    if (target.nodeName != 'LI') {
+    if (target.nodeName != 'BUTTON') {
         return;
     }
     this.parent.uiChange();
@@ -133,5 +132,3 @@ proto.deactivatePageDots = function () {
 };
 // @ts-ignore
 Flickity.PageDots = PageDots;
-
-//# sourceMappingURL=page-dots.js.map

package/dist/components/popover.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 var top = 'top';
 var bottom = 'bottom';
@@ -144,7 +144,7 @@ function effect$2(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const applyStyles$1 = {
+var applyStyles$1 = {
   name: 'applyStyles',
   enabled: true,
   phase: 'write',
@@ -459,7 +459,7 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const arrow$1 = {
+var arrow$1 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
@@ -626,7 +626,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -673,7 +673,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -983,7 +983,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1179,7 +1178,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1241,7 +1240,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1293,7 +1292,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1311,13 +1310,12 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const popperOffsets$1 = {
+var popperOffsets$1 = {
   name: 'popperOffsets',
   enabled: true,
   phase: 'read',
@@ -1452,7 +1450,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1792,6 +1790,21 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+//
+// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.
+//
+// Powered by Popper.js.
+//
+// NOTE:
+//
+// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover
+//   won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.
+//
+// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different
+//   transitions for show/hide.
+//
+// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an
+//   undesired effect when the element is shown and when its placement changes.
 //
 class Popover {
     anchor;
@@ -1860,7 +1873,10 @@ 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'],
@@ -1876,8 +1892,9 @@ 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];
                         },
                     },
@@ -1926,5 +1943,3 @@ class Popover {
 }
 
 export { Popover as P };
-
-//# sourceMappingURL=popover.js.map

package/dist/components/progress-bar.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 progressBarCss = ":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
-const NanoProgressBarStyle0 = progressBarCss;
+const progressBarCss = ":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";
 
 const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends HTMLElement {
     constructor() {
@@ -21,16 +20,16 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
     showPercent = false;
     render() {
-        return (h(Host, { key: '36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd', class: "nano-progress-bar" }, h("div", { key: '3c02d554bcb4727c0a03769be1cd6c57693868f9', part: "base", class: {
+        return (h(Host, { key: '2d33cb1a93d9b155cef4ea64b1a36a275104ed5c', class: "nano-progress-bar" }, h("div", { key: '1477b01e971f00541af5501df4f42c2d69cb87d4', part: "base", class: {
                 'progress-bar': true,
                 'progress-bar--indeterminate': this.indeterminate,
-            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: '31a54ba3593cda595dc3566d86e763d8bb2701cf', part: "indicator", class: "progress-bar__indicator", style: {
+            }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { key: 'dd80b47ed6627db8d93bf20a7ef096d44757ec56', part: "indicator", class: "progress-bar__indicator", style: {
                 width: !this.indeterminate ? `${this.value}%` : undefined,
-            } }, h("span", { key: '91539c8c325358a416ca7b15e341ee0d70d31845', part: "label", class: "progress-bar__label" }, h("slot", { key: '6f24df7fdfbe3272581eac957cbe8b9ded8bc781' }, !this.indeterminate && this.showPercent
+            } }, h("span", { key: '7b967332cff45da08a49008ac727f247750347ae', part: "label", class: "progress-bar__label" }, h("slot", { key: '5d2c53909892f8c81e151ec64a337e656e7e4dae' }, !this.indeterminate && this.showPercent
             ? `${this.value}%`
             : ''))))));
     }
-    static get style() { return NanoProgressBarStyle0; }
+    static get style() { return progressBarCss; }
 }, [1, "nano-progress-bar", {
         "value": [2],
         "indeterminate": [4],
@@ -51,5 +50,3 @@ function defineCustomElement() {
 }
 
 export { ProgressBar as P, defineCustomElement as d };
-
-//# sourceMappingURL=progress-bar.js.map

package/dist/components/renderer.js

@@ -1,9 +1,19 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h as h$1 } from '@stencil/core/internal/client';
 
 /* eslint-disable @typescript-eslint/no-namespace */
+// 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
@@ -12,7 +22,7 @@ import { h as h$1 } from '@stencil/core/internal/client';
 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;
 }
 /**
@@ -54,5 +64,3 @@ function getTagPrefix() {
 })(h || (h = {}));
 
 export { getTagPrefix as g, h, setTagPrefix as s, transformTag as t };
-
-//# sourceMappingURL=renderer.js.map

package/dist/components/resize-observe.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, readTask, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
@@ -228,7 +228,7 @@ const ResizeObserve = /*@__PURE__*/ proxyCustomElement(class ResizeObserve exten
             this.ro.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
+        return (h(Host, { key: 'c18db95f590c660cc2c0e1dd1f2d2a0c66e63a54', class: "nano-resize-observe" }, h("slot", { key: '25cd2b6762d1bb05d5182fd817b758256ce6750a' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
             this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
             this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
@@ -270,5 +270,3 @@ function defineCustomElement() {
 }
 
 export { ResizeObserve as R, defineCustomElement as d };
-
-//# sourceMappingURL=resize-observe.js.map

package/dist/components/scroll.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { a as getOffset } from './dom.js';
 
@@ -75,10 +75,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.
  */
 function scrollIntoView(element, container, direction = 'vertical', position = 'start') {
     if (!element)
@@ -118,7 +119,61 @@ function scrollIntoView(element, container, direction = 'vertical', position = '
         }
     }
 }
+/**
+ * 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
+ */
+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
+ */
+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;
+}
 
-export { lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };
-
-//# sourceMappingURL=scroll.js.map
+export { findScrollParent as f, isInViewport as i, lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };