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

package/dist/components/avatar.js

@@ -0,0 +1,33 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const avatarCss = ":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}}";
+
+const NanoAvatar = /*@__PURE__*/ proxyCustomElement(class NanoAvatar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /** Initials to use as when no image is available (1–2 characters max recommended). */
+    initials;
+    static get style() { return avatarCss; }
+}, [0, "nano-avatar", {
+        "initials": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoAvatar);
+            }
+            break;
+    } });
+}
+
+export { NanoAvatar as N, defineCustomElement as d };

package/dist/components/badge.js

@@ -0,0 +1,36 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** The strength / vibrancy of the theme. Defaults to `3` */
+    strength;
+    /** Use pulse to draw attention to the badge with an animation */
+    pulse;
+}, [0, "nano-badge", {
+        "theme": [513],
+        "strength": [513],
+        "pulse": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoBadge);
+            }
+            break;
+    } });
+}
+
+export { NanoBadge as N, defineCustomElement as d };

package/dist/components/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/internal/client';
 import { d as debounce } from './throttle.js';
@@ -18,14 +18,7 @@ function parse(searchParams, replacer) {
             .map(n => decodeURIComponent(n.replace(/\+/g, ' ')));
         const value = rawValue.length === 1 ? rawValue[0] : rawValue;
         let key = paramKey;
-        let v = replacer ?
-            replacer({
-                firstRawValue: params.get(paramKey).split(','),
-                key,
-                rawValue,
-                value,
-            }) :
-            value;
+        let v = value;
         if (key.includes('.')) {
             const [f, ...kl] = key.split('.');
             const o = (t[f] || {});
@@ -64,9 +57,7 @@ function stringify(input, replacer) {
                     value = rawValue.toString();
                 else
                     value = String(rawValue);
-                const vv = replacer ?
-                    replacer({ flattenedKey, key, rawValue, value }) :
-                    value;
+                const vv = value;
                 vv != null && sp.append(flattenedKey, vv);
             }
         });
@@ -187,46 +178,58 @@ 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');
@@ -319,5 +322,3 @@ class Store {
 }
 
 export { ComponentStore as C };
-
-//# sourceMappingURL=component-store.js.map

package/dist/components/cta.js

@@ -0,0 +1,61 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const ctaCss = ":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}}";
+
+const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get host() { return this; }
+    /** The semantic theme of the button. Defaults to primary / brand blue  */
+    theme;
+    /** Turn on the secondary style. Every theme also has a secondary style */
+    secondary;
+    /** The size of the button. Defaults to large */
+    size;
+    /** Show a loading spinner */
+    loading;
+    /**
+     * A predefined icon to show. Defaults to no icon.
+     * *note* Will be overruled if a `<nano-icon />` or `<svg />` is detected
+     */
+    icon;
+    /** Predefined styles when displaying a number of CTAs together */
+    group;
+    internalButton = false;
+    componentWillLoad() {
+        this.internalButton = !this.host.querySelector('button, a');
+    }
+    render() {
+        if (!this.internalButton)
+            return;
+        return (h("button", { type: "button", class: "nano-internal-cta" }, h("slot", null)));
+    }
+    static get style() { return ctaCss; }
+}, [4, "nano-cta", {
+        "theme": [513],
+        "secondary": [516],
+        "size": [513],
+        "loading": [513],
+        "icon": [513],
+        "group": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-cta"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-cta":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoCta);
+            }
+            break;
+    } });
+}
+
+export { NanoCta as N, defineCustomElement as d };

package/dist/components/datalist.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, Build, Host } from '@stencil/core/internal/client';
 import { t as transformTag, h } from './renderer.js';
@@ -9,8 +9,7 @@ import { g as getDirectChildren } from './dom.js';
 import { d as defineCustomElement$2 } from './dropdown.js';
 import { d as defineCustomElement$1 } from './menu.js';
 
-const datalistCss = ":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{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";
-const NanoDatalistStyle0 = datalistCss;
+const datalistCss = ":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{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-neutral-1000);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";
 
 function findLabel(formCtrl) {
     let foundLabel;
@@ -102,9 +101,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
     open = false;
     openWatcher() {
         writeTask(() => {
+            if (this.open) {
+                const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
+                this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40) + 'px');
+            }
             this.nanoDropdown.open = this.open;
-            if (this.connectedInput)
+            if (this.connectedInput) {
                 this.connectedInput.setAttribute('aria-expanded', this.open.toString());
+            }
         });
     }
     /** Use this option to disable to default filtering. This is useful if filtering happens
@@ -182,7 +186,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         // forceUpdate(this.host);
     }
     watchTypeChange() {
-        if (!this.connectedInput || this.disabled)
+        if (!this.connectedInput)
             return;
         let dwConfig = { closeOnSelect: false };
         let autocompleteType = 'both';
@@ -194,7 +198,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
             case 'select':
                 autocompleteType = 'list';
                 readonly = true;
-                dwConfig = { closeOnSelect: true, placement: 'center' };
+                dwConfig = { closeOnSelect: true };
                 break;
         }
         if (!this.isNanoInput) {
@@ -336,7 +340,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         e.stopPropagation();
         this.changeInputValue(e.detail);
         requestAnimationFrame(() => this.inputChange());
-        if (this.type !== 'selctMulti')
+        if (this.type !== 'selectMulti')
             this.shouldOpen = false;
     };
     // this is for type="select" only.
@@ -404,7 +408,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         const attrFind = (toFind) => toFind.toLowerCase().indexOf(valStr) > -1;
         this.allOptEles.forEach((opt) => {
             if ((val === opt.value || val === opt.label) &&
-                this.type !== 'selctMulti') {
+                this.type !== 'selectMulti') {
                 opt.selected = true;
                 exactMatch = true;
             }
@@ -428,19 +432,14 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         this.actvOptEles = activeEles;
     }
     inputClick = () => {
+        if (this.open)
+            return;
         this.shouldOpen = true;
         // open dropdown if possible
         this.manageDropdownDisplay();
     };
     inputKeydown = (e) => {
-        const ignoreKeys = [
-            'Shift',
-            'ArrowRight',
-            'ArrowLeft',
-            'Escape',
-            'Enter',
-            'Tab',
-        ];
+        const ignoreKeys = ['Shift', 'ArrowRight', 'ArrowLeft', 'Escape', 'Tab'];
         if (ignoreKeys.includes(e.key)) {
             if (e.key === 'Tab')
                 this.shouldOpen = false;
@@ -448,7 +447,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         }
         // When select, mirror native select behaviour. Search on closed list
         if (this.type === 'select' &&
-            !['ArrowDown', 'ArrowUp'].includes(e.key) &&
+            !['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) &&
             (e.key !== ' ' || this.typeToSelectTimeout)) {
             if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {
                 clearTimeout(this.typeToSelectTimeout);
@@ -468,7 +467,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         this.shouldOpen = true;
         // open dropdown if possible
         this.manageDropdownDisplay();
-        if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(e.key)) {
             e.preventDefault();
             this.shouldFocus = true;
         }
@@ -525,18 +524,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (h(Host, { key: 'e6a6afd64373143835f8e12f9349e839abaf63e1', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '0e0725581517a0a58fbaf04bfd5dba2d4362f71d', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: 'bd1a92afc347e6e3a9d63695bd56fb76b3a06464', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: '5b0a39513e9c0717bf3240c250f703c6997b8a23', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '846d438e2314582af9a962289ab0f908857083fa', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'a6c4229eda26e59f8cf37602bcb0fa61e80ee2e5', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: 'f306217f59daac3e67e41bd5dbbf2a3681d56007', name: "list-top" }), h("slot", { key: '0174164d6761691413ead34af1436ee370849d98' }), h("slot", { key: 'fdcaea628c1920017a4d250b125769d422d306dc', name: "internal-opts" }), h("slot", { key: 'bcb453282e86a98805fa0c8f357b389110764252', name: "list-bottom" })), h("nano-menu", { key: '61b91937f773707bd6369649d5761951459b7991', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'c96ff0ec6819c41954f073fb07799a3e30c50101', name: "list-top" }), h("slot", { key: 'da56d581d05587674da3371088280ed98f837af1' }), h("slot", { key: '0f372b97c431d484e9ffc87594660e4ca5d2bba6', name: "internal-opts" }), h("slot", { key: 'e51e02accb72f3ac43386dba8e240470695efa1c', name: "list-bottom" })), h("nano-menu", { key: 'df93b22751834dfbbf6e23a9bdaad5a8086355ec', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '433a4643f759e5391b13ee757628c6f196cb8060', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'caafff3ec17cba31fdc5092d96da166f64541776', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '785156311b41d90eecb951782342fd1b8d706ff1', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'b57c146e650ef55c51fa445c097fc1e10845efc9', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -544,21 +543,20 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         "options": ["handleOptionsChange"],
         "type": ["watchTypeChange"],
         "connectedInput": ["watchTypeChange", "manageInputEvents"],
-        "disabled": ["watchTypeChange"],
         "selected": ["watchActvOptChange"],
         "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
         "hasNoResult": ["manageCanOpen"],
         "shouldOpen": ["manageDropdownDisplay"],
         "canOpen": ["manageDropdownDisplay"]
     }; }
-    static get style() { return NanoDatalistStyle0; }
+    static get style() { return datalistCss; }
 }, [1, "nano-datalist", {
         "selected": [1040],
-        "dropDownConfig": [6160],
+        "dropDownConfig": [6160, "drop-down-config"],
         "options": [16],
         "input": [1],
         "type": [1],
-        "activeOptions": [2064],
+        "activeOptions": [2064, "active-options"],
         "open": [1028],
         "disableFilter": [4, "disable-filter"],
         "disabled": [4],
@@ -575,7 +573,6 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
         "options": ["handleOptionsChange"],
         "type": ["watchTypeChange"],
         "connectedInput": ["watchTypeChange", "manageInputEvents"],
-        "disabled": ["watchTypeChange"],
         "selected": ["watchActvOptChange"],
         "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
         "hasNoResult": ["manageCanOpen"],
@@ -607,5 +604,3 @@ function defineCustomElement() {
 }
 
 export { DataList as D, defineCustomElement as d };
-
-//# sourceMappingURL=datalist.js.map