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

package/dist/collection/utils/tabbable.js

@@ -1,9 +1,22 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
+import { Build } from "@stencil/core";
 // 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 +49,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
  */
-export function getTabbableElements(root, first = false) {
+export 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 +96,7 @@ export 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 +105,7 @@ export 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,7 +113,8 @@ export function getTabbableElements(root, first = false) {
     return tabbableElements;
 }
 export 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;
 }
-//# sourceMappingURL=tabbable.js.map

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

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 // @ts-nocheck
 import { newE2EPage } from "@stencil/core/testing";
@@ -271,4 +271,3 @@ export const stringifyFormSnippet = `
     result.innerHTML = JSON.stringify(object);
   })
 </script>`;
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/theme.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export const hostContext = (selector, el) => {
     return el.closest(selector) !== null;
@@ -13,8 +13,7 @@ export const hostContext = (selector, el) => {
 export const createColorClasses = (color, cssClassMap) => {
     return typeof color === 'string' && color.length > 0
         ? {
-            'nano-color': true,
-            [`nano-color-${color}`]: true,
+            [color]: true,
             ...cssClassMap,
         }
         : cssClassMap;
@@ -43,4 +42,3 @@ export const getClassMap = (classes) => {
     getClassList(classes).forEach((c) => (map[c] = true));
     return map;
 };
-//# sourceMappingURL=theme.js.map

package/dist/collection/utils/throttle.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 export const deferEvent = (event) => {
     return debounceEvent(event, 0);
@@ -47,4 +47,3 @@ export const throttle = (callback, delay) => {
         }
     };
 };
-//# sourceMappingURL=throttle.js.map

package/dist/collection/utils/transitions.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /**
  * Quality of life for transition handling.
@@ -32,14 +32,17 @@ export const displayTransition = (el, options) => {
         className: '',
         show: true,
         showDisplay: 'block',
+        showProp: 'classList',
+        timeout: 1000,
         ...options,
     };
     return new Promise((resolve) => {
         const showCb = (e) => {
             if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
                 (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
-                resolve('shown');
+                el.dataset.displayTransition = 'true';
                 el.removeEventListener('transitionend', showCb);
+                resolve('shown');
             }
         };
         const hideCb = (e) => {
@@ -47,22 +50,36 @@ export const displayTransition = (el, options) => {
                 (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))) {
                 el.style.display = 'none';
                 el.dataset.displayTransition = 'false';
-                resolve('hidden');
                 el.removeEventListener('transitionend', hideCb);
+                resolve('hidden');
             }
         };
         if (opts.show) {
             el.addEventListener('transitionend', showCb);
             el.style.display = opts.showDisplay;
-            el.dataset.displayTransition = 'true';
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             el.clientWidth; // force reflow
-            setTimeout(() => el.classList.add(opts.className), 50);
+            setTimeout(() => el[opts.showProp].add(opts.className), 50);
         }
         else {
             el.addEventListener('transitionend', hideCb);
-            el.classList.remove(opts.className);
+            el[opts.showProp].remove(opts.className);
+        }
+        // If no transition, resolve after timeout
+        if (opts.timeout) {
+            setTimeout(() => {
+                if (opts.show && el.dataset.displayTransition !== 'true') {
+                    el.dataset.displayTransition = 'true';
+                    el.removeEventListener('transitionend', showCb);
+                    resolve('shown');
+                }
+                else if (!opts.show && el.dataset.displayTransition !== 'false') {
+                    el.style.display = 'none';
+                    el.dataset.displayTransition = 'false';
+                    el.removeEventListener('transitionend', hideCb);
+                    resolve('hidden');
+                }
+            }, opts.timeout);
         }
     });
 };
-//# sourceMappingURL=transitions.js.map

package/dist/components/active-element.js

@@ -1,5 +1,10 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
+ */
+/**
+ * Returns the currently active element in the document or shadow root.
+ * @param root - The root to start searching from
+ * @returns The active element
  */
 function getActiveElement(root = document) {
     const activeEl = root.activeElement;
@@ -13,7 +18,48 @@ function getActiveElement(root = document) {
         return activeEl;
     }
 }
+/**
+ * Calls the blur method on the current active element if it is a child of the provided element.
+ * Needed for fixing a11y console errors.
+ * @param elm The element to check
+ */
+const blurActiveElement = (elm) => {
+    const { activeElement } = document;
+    if (activeElement && elm.contains(activeElement)) {
+        document.activeElement?.blur();
+    }
+};
+/**
+ * Decides if the current active element or current event is within a containing element or a triggering element.
+ * This is useful for components that trigger some kind of modal panel.
+ * @param container The element to check
+ * @param trigger The element that triggered the event
+ * @param event The event that triggered the function
+ * @returns whether the current focus is within the dropdown
+ */
+function focusInContainer(container, trigger, e) {
+    const shadowActiveElement = getActiveElement();
+    const docActiveElement = document.activeElement;
+    if (e?.composedPath()?.length) {
+        const ddInPath = e.composedPath().includes(container);
+        if (ddInPath)
+            return ddInPath;
+        return e.composedPath().includes(trigger);
+    }
+    const closestTraverse = (el) => {
+        const found = el.closest(container.tagName.toLowerCase());
+        if (found) {
+            if (found === container)
+                return found;
+            else
+                return closestTraverse(found.parentElement);
+        }
+        return null;
+    };
+    return (closestTraverse(shadowActiveElement) ||
+        shadowActiveElement === trigger ||
+        docActiveElement === trigger ||
+        closestTraverse(docActiveElement));
+}
 
-export { getActiveElement as g };
-
-//# sourceMappingURL=active-element.js.map
+export { blurActiveElement as b, focusInContainer as f, getActiveElement as g };

package/dist/components/algolia-data.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { getElement } from '@stencil/core/internal/client';
 
@@ -45,5 +45,3 @@ var SearchChangeEvent;
 const Wormhole = (Component, props) => openWormhole(Component, props);
 
 export { SearchChangeEvent as S, Wormhole as W };
-
-//# sourceMappingURL=algolia-data.js.map