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

package/dist/components/details.js

@@ -0,0 +1,198 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { H as HasSlotController } from './slot.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const detailsCss = ":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{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";
+
+const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nanoOpen = createEvent(this, "nanoOpen", 7);
+        this.nanoClose = createEvent(this, "nanoClose", 7);
+        this.nanoAfterOpen = createEvent(this, "nanoAfterOpen", 7);
+        this.nanoAfterClose = createEvent(this, "nanoAfterClose", 7);
+    }
+    mo;
+    stateChanging = false;
+    slotCtrl = new HasSlotController(this, 'icon-start', 'icon-end');
+    detailsEl;
+    headerEl;
+    _bodyEl;
+    get bodyEl() {
+        return this._bodyEl;
+    }
+    set bodyEl(el) {
+        if (this.bodyEl && this.bodyEl === this._bodyEl)
+            return;
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+        el.addEventListener('transitionend', this.handleTransitionEnd);
+        this._bodyEl = el;
+    }
+    /** Summary / handle text. Use the `label` slot for HTML markup */
+    label = '';
+    /** Should item be open on load */
+    open = false;
+    /** Disables the details so it can't be toggled. */
+    disabled = false;
+    /** The size of the details. Primarily controls the trigger element and overall padding. */
+    size = 'medium';
+    /**
+     * Emitted when the component opens.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
+     */
+    nanoOpen;
+    /**
+     * Emitted when the component closes.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
+     */
+    nanoClose;
+    /** Emitted after the details opens and all transitions are complete. */
+    nanoAfterOpen;
+    /** Emitted after the details closes and all transitions are complete. */
+    nanoAfterClose;
+    toggleClick() {
+        this.stateChanging = true;
+        if (this.open)
+            this.show();
+        else
+            this.hide();
+    }
+    onKeyDown = (e) => {
+        if (this.stateChanging || this.disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.open = !this.open;
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.open = false;
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                e.preventDefault();
+                this.open = true;
+                break;
+        }
+    };
+    onMouseDown = (e) => {
+        e.preventDefault();
+        this.headerEl.focus();
+        if (this.stateChanging || this.disabled)
+            return;
+        this.open = !this.open;
+    };
+    handleTransitionEnd = (e) => {
+        if (e.propertyName !== 'opacity' ||
+            !e.composedPath().find((node) => node === this.bodyEl))
+            return;
+        if (this.open) {
+            this.nanoAfterOpen.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+        else {
+            this.detailsEl.open = false;
+            this.nanoAfterClose.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+    };
+    hide() {
+        const nanoClose = this.nanoClose.emit(this.open);
+        if (nanoClose.defaultPrevented) {
+            this.open = true;
+            this.detailsEl.open = true;
+            return;
+        }
+    }
+    show() {
+        const nanoOpen = this.nanoOpen.emit();
+        this.detailsEl.open = true;
+        if (nanoOpen.defaultPrevented) {
+            this.open = false;
+            this.detailsEl.open = false;
+            return;
+        }
+    }
+    attachMo() {
+        if (this.mo || !this.detailsEl || !Build.isBrowser)
+            return;
+        this.mo = new MutationObserver((changes) => {
+            if (this.stateChanging)
+                return;
+            for (const change of changes) {
+                if (change.type === 'attributes' && change.attributeName === 'open') {
+                    this.open = this.detailsEl.open;
+                }
+            }
+        });
+        this.mo.observe(this.detailsEl, { attributes: true });
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.detailsEl.setAttribute('open', 'true');
+        this.attachMo();
+    }
+    connectedCallback() {
+        this.attachMo();
+    }
+    disconnectedCallback() {
+        if (this.mo) {
+            this.mo.disconnect();
+            this.mo = undefined;
+        }
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'dfe08b9736512e4f2e7e77b6e08f391e570f7d35', class: "nano-details" }, h("details", { key: 'aee47095a745ec92d97e3eb2a09f1765fbad251d', part: "base", ref: (d) => (this.detailsEl = d), class: {
+                details: true,
+                disabled: this.disabled,
+            } }, h("summary", { key: 'b15a83c3386171f212a68cf456eb9ba6296917c2', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: 'c29db27dc0c74a8053c035421b0738eee1d72945', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '99381aa8452aac30498cfb27148c9e507e07989e', name: "icon-start" }))), h("div", { key: '59068fae315b9cd0427987eb59e03f2cd219e45a', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '8eb4304e5c0da199ef6ad7a9730f92130072afd8', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: 'a8c2b9213b96787007a85faf64d42436729bc6e4', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            !this.slotCtrl.has('icon-end') &&
+            !this.slotCtrl.has('icon-expand') &&
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: 'bfb3677f307b23b4947c80d7173b63ce51b83c70', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'dad8f7fbf316facfc2a505edf0041fb259d78d5b', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: '988b4a6201029002ab76004375955eaa87542ed9', class: "content-wrapper" }, h("div", { key: '159483b132abfc6d7edf87771af0f3c2c0e077bd', part: "content", class: "content", id: "content" }, h("slot", { key: '8bb9bbca225bca84bc1efd2c617372f490985bc1' })))))));
+    }
+    static get watchers() { return {
+        "open": ["toggleClick"]
+    }; }
+    static get style() { return detailsCss; }
+}, [1, "nano-details", {
+        "label": [1],
+        "open": [1540],
+        "disabled": [516],
+        "size": [513]
+    }, undefined, {
+        "open": ["toggleClick"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-details", "nano-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoDetails);
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NanoDetails as N, defineCustomElement as d };

package/dist/components/dom.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build } from '@stencil/core/internal/client';
 
@@ -33,20 +33,20 @@ function getDirectChildren(el, sel, elesOnly = true) {
             return Array.from(el.querySelectorAll(sel));
         }
         catch (e) {
-            console.error(e, 'an error sad');
+            console.error(e, 'an error. sad');
         }
     }
     const ret = [];
     Array.from(el.childNodes).forEach((e) => {
-        if (!!e.matches && e.matches(sel))
+        if (!!e.matches &&
+            e.matches(sel) &&
+            (e.nodeName !== 'SLOT' || elesOnly !== 'slot')) {
             ret.push(e);
-        else if (e.nodeName.toLowerCase() === 'slot') {
-            Array.from(e.assignedNodes()).forEach((slotEl) => {
-                if (slotEl.nodeType === NODE_TYPE.ElementNode &&
-                    slotEl.matches(sel))
-                    ret.push(slotEl);
-                else if (slotEl.nodeType !== NODE_TYPE.ElementNode && !elesOnly)
-                    ret.push(slotEl);
+        }
+        else if (e.nodeName === 'SLOT') {
+            Array.from(e.assignedElements()).forEach((slottedEl) => {
+                if (slottedEl.matches(sel))
+                    ret.push(slottedEl);
             });
         }
         else if (!elesOnly)
@@ -54,15 +54,6 @@ function getDirectChildren(el, sel, elesOnly = true) {
     });
     return ret;
 }
-const getSiblings = (el, sel) => {
-    const siblings = [];
-    let firstChild = el.parentNode.firstElementChild;
-    do {
-        if (!sel || (firstChild !== el && firstChild.matches(sel)))
-            siblings.push(firstChild);
-    } while ((firstChild = firstChild.nextElementSibling));
-    return siblings;
-};
 function getOffset(element, parent) {
     if (!parent || !element)
         return { top: 0, left: 0 };
@@ -73,6 +64,4 @@ function getOffset(element, parent) {
     };
 }
 
-export { getOffset as a, getSiblings as b, closestElement as c, getDirectChildren as g };
-
-//# sourceMappingURL=dom.js.map
+export { getOffset as a, closestElement as c, getDirectChildren as g };

package/dist/components/drag.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /** Begins listening for dragging. */
 function drag(container, options) {
@@ -68,5 +68,3 @@ function drag(container, options) {
 }
 
 export { drag as d };
-
-//# sourceMappingURL=drag.js.map