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

package/dist/collection/components/icon-item/icon-item.js

@@ -0,0 +1,72 @@
+/**
+ * Icon Items are a standard way of displaying a Pictogram or Device Icon with some concise text.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ *
+ * @slot icon - The icon of the icon item. Appears first.
+ * @slot title - The title of the icon item.
+ * @slot content - The main content of the icon item.
+ */
+export class NanoIconItem {
+    /** The layout of the icon items. Defaults to portrait. */
+    layout = 'portrait';
+    /** The size of the icon. Defaults to regular */
+    size = 'regular';
+    static get is() { return "nano-icon-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "attribute": "layout",
+                "mutable": false,
+                "complexType": {
+                    "original": "'portrait' | 'landscape'",
+                    "resolved": "\"landscape\" | \"portrait\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout of the icon items. Defaults to portrait."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'portrait'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'large'",
+                    "resolved": "\"large\" | \"regular\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the icon. Defaults to regular"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'regular'"
+            }
+        };
+    }
+}

package/dist/collection/components/img/img.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@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 {
@@ -22,7 +26,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@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 {
   /**
    * @prop --padding: padding around any content. Only relevent on `<nano-img background>`
   */

package/dist/collection/components/img/img.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build, Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -134,16 +134,16 @@ export class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h(Host, { key: '5f56dcb4a2fe386f1bdd130f4ddf48e2f6859f67', class: "nano-img" }, h("div", { key: 'bf901f23c00d91e988c530b98ea3e72d55a06b25', class: "img" }, h("nano-skeleton", { key: '67b01b95235b44ac958f74b9162a1f10f81d5253', class: "img__loader" }), !!this.background && (h("div", { key: 'b5f786a707e70b78a183fcd15fb02d0ed1066d9c', class: {
+        return (h(Host, { key: 'a9d5cb1d0be8540d7ea690fd13d92b1f5ec614af', class: "nano-img" }, h("div", { key: '1f40afc64a5652f53b224403c59b4f108e5eb044', class: "img" }, h("nano-skeleton", { key: 'a8872721a38b11951ca6950d567193ba16e1d348', class: "img__loader" }), !!this.background && (h("div", { key: 'd9c1fd739f4a4914a0cfe8c1eb8ef50832ecc35c', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'a56ca90ca3a47eeefe1f54229c2d4cf056dab2fc' }))), h("img", { key: 'f15763c2522895d76416e38044cc26baff76f74a', class: {
+            }, style: bgStyle }, h("slot", { key: '750330595e7dc0e2127d8646616107154215e97b' }))), h("img", { key: 'c04ad33e34573482e701f4239e17a9a28fd98dd0', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '4db81fe9e3b7fb99773daa70efe9f89abb2ad362', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
+            }, decoding: "async", src: Build.isServer ? this.src : this.loadSrc, loading: Build.isServer && this.lazy ? 'lazy' : undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '4d40e294ec3a56be5756aede03e91aaf3d629bf3', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
     }
     static get is() { return "nano-img"; }
     static get encapsulation() { return "shadow"; }
@@ -161,6 +161,7 @@ export class Img {
         return {
             "alt": {
                 "type": "string",
+                "attribute": "alt",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -175,11 +176,11 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alt",
                 "reflect": false
             },
             "src": {
                 "type": "string",
+                "attribute": "src",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -194,11 +195,11 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src",
                 "reflect": false
             },
             "srcSet": {
                 "type": "string",
+                "attribute": "src-set",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -213,11 +214,11 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src-set",
                 "reflect": false
             },
             "lazy": {
                 "type": "boolean",
+                "attribute": "lazy",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -232,12 +233,12 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "lazy",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "background": {
                 "type": "boolean",
+                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -252,11 +253,11 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background",
                 "reflect": false
             },
             "autoHeight": {
                 "type": "string",
+                "attribute": "auto-height",
                 "mutable": false,
                 "complexType": {
                     "original": "'content' | 'image'",
@@ -271,7 +272,6 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-height",
                 "reflect": false,
                 "defaultValue": "'content'"
             }
@@ -351,4 +351,3 @@ export class Img {
             }];
     }
 }
-//# sourceMappingURL=img.js.map

package/dist/collection/components/in-page-nav/in-page-nav.css

@@ -0,0 +1,122 @@
+: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;
+    }
+  }/**
+* @prop --color-bottom-border: The border color for the bottom of the list items. Defaults to rgba(var(--nano-color-base-rgb-1000) / 10%)
+* @prop --color-text: The text color for the main list items. Defaults to var(--nano-color-neutral-1400)
+* @prop --color-primary: The primary color for the secondary list items. Defaults to var(--nano-color-primary-1100)
+* @prop --color-text-hover: The text color for all list items on hover. Defaults to var(--color-primary)
+* @prop --color-border-active: The border color for the active list items. Defaults to var(--nano-color-primary-1000)
+* @prop --color-bg: The background color for the nav. Defaults to var(--nano-color-primary-75)
+* @prop --font-size: The font size. Defaults to var(--nano-font-size-small)
+* @prop --font-weight: The font weight. Defaults to var(--nano-font-weight-normal)
+* @prop --font-weight-active: The font weight for the active list items. Defaults to var(--nano-font-weight-bold)
+* @prop --line-height: The line height. Defaults to var(--nano-line-height-dense)
+* @prop --letter-spacing: The letter spacing. Defaults to var(--nano-letter-spacing-loose)
+*/
+:host nav {
+  background-color: var(--color-bg);
+  padding: 0;
+}
+:host nav:has(nano-details) {
+  padding: 0;
+}
+:host .details-wrapper {
+  --padding: 0;
+  --btn-bg-color: transparent;
+  --btn-bg-color--hover: transparent;
+  --btn-text-color: var(--color-text);
+  border: none;
+}
+:host .details-wrapper::part(header), :host .details-wrapper [part~="header"] {
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  font-weight: var(--font-weight);
+  letter-spacing: var(--letter-spacing);
+  padding: var(--spacing-l2);
+}
+:host .details-wrapper[open]::part(header), :host .details-wrapper[open] [part~="header"] {
+  background-color: var(--nano-color-primary-75);
+}
+:host .details-wrapper::part(content), :host .details-wrapper [part~="content"] {
+  padding: 0;
+}
+:host .details-wrapper::part(body), :host .details-wrapper [part~="body"] {
+  padding: 0;
+}
+:host .header {
+  padding: var(--spacing-l2) var(--spacing-l2) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-l2);
+  font-size: var(--font-size);
+}
+:host .header ::slotted(a[slot=back]), :host .header::slotted(a[slot=back]) {
+  display: flex !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0;
+  gap: var(--spacing-l3) !important;
+  cursor: pointer;
+}
+:host .header ::slotted(a[slot=back])::before, :host .header::slotted(a[slot=back])::before {
+  content: "";
+  display: inline-block;
+  background-size: cover;
+  inline-size: 1rem;
+  block-size: 1rem;
+  background-color: var(--color-primary);
+  -webkit-mask-image: var(--nano-component-icon-chevron);
+          mask-image: var(--nano-component-icon-chevron);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  transform-origin: center;
+  rotate: calc(180deg * var(--flip-icon-ltr));
+}
+:host nav:has(.details-wrapper[open]) {
+  box-shadow: var(--nano-shadow-l1);
+}
+:host .details-wrapper.sticky.stuck[open]::part(header), :host .details-wrapper.sticky.stuck[open] [part~="header"] {
+  z-index: var(--nano-z-index-menubar);
+  inset-block-start: 0;
+  position: sticky;
+  box-shadow: var(--nano-shadow-l1);
+  padding: var(--spacing-l2);
+}

package/dist/collection/components/in-page-nav/in-page-nav.js

@@ -0,0 +1,278 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { Host, Build, } from "@stencil/core";
+import { h } from "../../utils/renderer";
+import { HasSlotController } from "../../utils/slot";
+/**\
+ * In-page navigation allows users to quickly find different sections on a page.
+ *
+ * @status new
+ * @version 8.0.0
+ *
+ * @slot default - The default slot.
+ * @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
+ * @slot back - For a link to navigate back to the previous section.
+ * @slot accessory - To add nav accessories, such as a text input.
+ *
+ * @part root - The root element of the navigation.
+ */
+export class NanoInPageNav {
+    /** The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767 */
+    breakpoint = 767;
+    /** Whether the headers should be sticky (small screen only). Defaults to true */
+    stickyHeaders = true;
+    el;
+    isMobile = window.innerWidth <= this.breakpoint;
+    stickyClass = 'sticky';
+    stuckClass = 'stuck';
+    stickyObserver;
+    slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
+    componentDidLoad() {
+        this.updateNavForBreakpoint();
+        window.addEventListener('resize', this.updateNavForBreakpoint);
+    }
+    /**
+     * Checks if the current screen width is less than or equal to the breakpoint.
+     * If it is, it transforms the desktop navigation into a mobile one.
+     * If not, it transforms the mobile navigation back into a desktop one.
+     */
+    updateNavForBreakpoint = () => {
+        this.isMobile = window.innerWidth <= this.breakpoint;
+        if (this.isMobile) {
+            // if the mobile slot is not there, we need to transform the desktop nav into a mobile one
+            if (!this.slotCtrl.has('mobile'))
+                this.transformToMobile();
+        }
+        else {
+            this.transformToDesktop();
+        }
+        // always init stickiness if the headers are sticky and we're on a small screen
+        if (this.isMobile && this.stickyHeaders) {
+            this.initStickiness();
+        }
+    };
+    // make nano-details headers sticky
+    initStickiness() {
+        let lastScrollTop = 0;
+        // shadowRoot for mobile slot, light DOM for default nav
+        const nanoDetails = this.isMobile && this.slotCtrl.has('mobile')
+            ? this.el.shadowRoot?.querySelectorAll('.details-wrapper')
+            : this.el.querySelectorAll('.details-wrapper');
+        if (!nanoDetails?.length)
+            return;
+        nanoDetails.forEach((details) => {
+            details.classList.add(this.stickyClass);
+        });
+        this.stickyObserver = new IntersectionObserver((entries) => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            entries.forEach((entry) => {
+                const target = entry.target;
+                if (entry.intersectionRatio < 1) {
+                    if (scrollTop > lastScrollTop) {
+                        // User is scrolling down
+                        target.classList.add(this.stuckClass);
+                        target.classList.remove('hidden');
+                    }
+                    else {
+                        // User is scrolling up
+                        target.classList.add('hidden');
+                    }
+                }
+                else {
+                    target.classList.remove(this.stuckClass);
+                    target.classList.remove('hidden');
+                }
+            });
+            // Prevent negative scroll values
+            lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+        }, {
+            threshold: [1.0],
+            root: this.el.closest('nav'),
+            rootMargin: '0px 0px 0px 0px',
+        });
+        nanoDetails.forEach((details) => {
+            this.stickyObserver.observe(details);
+        });
+    }
+    disconnectedCallback() {
+        if (this.stickyObserver) {
+            this.stickyObserver.disconnect();
+        }
+        if (this.updateNavForBreakpoint) {
+            window.removeEventListener('resize', this.updateNavForBreakpoint);
+        }
+    }
+    /**
+     * Transforms the desktop navigation into a mobile one by wrapping the <ul> elements in collapsible nano-details elements.
+     * Maintains the original attributes of the <a> elements.
+     */
+    transformToMobile() {
+        if (Build.isServer)
+            return;
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        const nodes = slot
+            ?.assignedElements({ flatten: true })
+            ?.filter((x) => x.tagName === 'UL') || [];
+        nodes.forEach((ul) => {
+            if (!(ul instanceof HTMLUListElement))
+                return;
+            // Transform individual list items
+            ul.querySelectorAll(':scope > li').forEach((li) => {
+                const link = li.querySelector(':scope > a');
+                const submenu = li.querySelector(':scope > ul');
+                if (link && submenu && !li.querySelector(':scope > nano-details')) {
+                    // Create the nano-details element
+                    const details = this.createDetails(link.textContent?.trim() || '', submenu, link.attributes);
+                    // Clean up and replace
+                    link.remove();
+                    li.prepend(details);
+                }
+            });
+            // Detach the <ul> from the DOM
+            const parent = ul.parentElement;
+            if (!parent)
+                return;
+            parent.removeChild(ul);
+            // Create the nano-details wrapper
+            const menuWrapper = this.createDetails('Menu', ul);
+            menuWrapper.classList.add('details-wrapper');
+            // Append the <ul> to the nano-details wrapper
+            menuWrapper.appendChild(ul);
+            // Replace the original <ul> with the nano-details wrapper
+            parent.appendChild(menuWrapper);
+        });
+    }
+    /**
+     * Creates a nano-details element with the given label and submenu.
+     * Optionally, a href can be provided to set the data-href attribute,
+     * so we can use it to reinstate the link on desktop.
+     */
+    createDetails(label, submenu, attributes) {
+        const node = document.createElement('nano-details');
+        node.setAttribute('label', label);
+        if (attributes) {
+            // Copy all attributes from the original link to the nano-details element
+            Array.from(attributes).forEach((attr) => {
+                node.setAttribute(`data-link-${attr.name}`, attr.value);
+            });
+        }
+        node.appendChild(submenu);
+        return node;
+    }
+    /**
+     * Transforms the mobile navigation back into a desktop one by removing the nano-details wrappers
+     * and restoring the original <ul> elements, maintains the original attributes.
+     */
+    transformToDesktop() {
+        const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
+        const nodes = slot
+            ?.assignedElements({ flatten: true })
+            ?.filter((x) => x.tagName.toLowerCase() === 'nano-details') || [];
+        nodes.forEach((detail) => {
+            if (!(detail instanceof HTMLElement))
+                return;
+            const ul = detail.querySelector('ul');
+            ul.querySelectorAll(':scope > li').forEach((li) => {
+                const details = li.querySelector('nano-details');
+                if (!details)
+                    return;
+                const submenu = details.querySelector('ul');
+                const label = details?.getAttribute('label');
+                const href = details?.getAttribute('data-href') || '#';
+                if (submenu && label) {
+                    // Create the <a> element
+                    const link = document.createElement('a');
+                    link.textContent = label;
+                    link.href = href;
+                    // Restore all attributes from the nano-details element to the <a> element
+                    Array.from(details.attributes).forEach((attr) => {
+                        if (attr.name.startsWith('data-link-')) {
+                            link.setAttribute(attr.name.replace('data-link-', ''), attr.value);
+                        }
+                    });
+                    li.prepend(link);
+                    li.appendChild(submenu);
+                    details.remove();
+                }
+            });
+            // Clean up the nano-details wrapper
+            const parent = detail.parentElement;
+            if (!parent)
+                return;
+            parent.removeChild(detail);
+            const ulElement = detail.querySelector('ul');
+            if (!ulElement)
+                return;
+            parent.appendChild(ulElement);
+            detail.remove();
+        });
+    }
+    render() {
+        return (h(Host, { key: '92552373d8a09fb223e32246547a8d134cb09da2', class: "nano-in-page-nav" }, h("nav", { key: '6fa0d66432e09b4a3e744f2d9e6c90d2d589f1b2', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '1c596d58e78b17a8ba5e408a5156a6be59cf1765', class: "header" }, h("slot", { key: '9d6b924c2a24e85681564744a3667eb23692ae07', name: "back" }), h("slot", { key: 'c3f9a3a6f2879054df7b50074872a3341d02f0f5', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
+                ? `details-wrapper ${this.stickyClass}`
+                : 'details-wrapper' }, h("slot", { name: "mobile" }))) : (h("slot", null)))));
+    }
+    static get is() { return "nano-in-page-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["in-page-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["in-page-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "breakpoint": {
+                "type": "number",
+                "attribute": "breakpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "767"
+            },
+            "stickyHeaders": {
+                "type": "boolean",
+                "attribute": "sticky-headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the headers should be sticky (small screen only). Defaults to true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}