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

package/dist/components/nano-sortable.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, writeTask, Build, readTask, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
@@ -7,8 +7,7 @@ import { d as drag } from './drag.js';
 import { d as debounce } from './throttle.js';
 import { a as addListeners } from './events.js';
 
-const sortableCss = ":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{position:relative;display:block}.sortable__live-region{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
-const NanoSortableStyle0 = sortableCss;
+const sortableCss = ":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{position:relative;display:block}.sortable__live-region{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 
 // Orientation map to limit dragging to horizontal or vertical.
 const orientationMap = {
@@ -77,6 +76,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
      * you must use this function to render a control *outside* of the focusable element.
      * @param _number
      * @param _element
+     * @default () => <nano-icon-button></nano-icon-button>;
      * @returns a function that attaches a keyboard accessible handle control element.
      * The function itself *must* return the handle element.
      */
@@ -411,6 +411,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         const targetElement = e.target;
         let foundHandle;
         let sortEle;
+        console.log('yooo', e.key);
         if (this.handleSelector) {
             foundHandle = targetElement.closest(this.handleSelector);
             sortEle = targetElement.closest(this.itemSelector);
@@ -730,7 +731,7 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: 'c9bce5fa4dd5410d54d84a41ab8ece10d316ede0', class: "nano-sortable" }, h("div", { key: 'beffbe43a385e254cb696cb5ba98797c0a8be718', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '9a552eeb74869b9825311907172f44ea0358a3cb' })));
+        return (h(Host, { key: '864871b13cc5f7a14e5b3a72c7776daec8f75bf0', class: "nano-sortable" }, h("div", { key: '9645cde622750e8d9476430712bb71ca090b6d0d', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '5083e13e75b08b68732fccc7181d2358e5a3198d' })));
     }
     static get watchers() { return {
         "itemSelector": ["handleItemSelectorChange"],
@@ -738,18 +739,18 @@ const Sortable = /*@__PURE__*/ proxyCustomElement(class Sortable extends HTMLEle
         "createKeyboardHandle": ["handleCreateKeyboardHandleChange"],
         "sortableHostElement": ["handleSortableHostElement"]
     }; }
-    static get style() { return NanoSortableStyle0; }
+    static get style() { return sortableCss; }
 }, [1, "nano-sortable", {
         "itemSelector": [1, "item-selector"],
         "handleSelector": [1, "handle-selector"],
         "dropzoneSelector": [1, "dropzone-selector"],
         "helperText": [1, "helper-text"],
-        "itemDescriptor": [16],
-        "grabbedHelperText": [16],
-        "droppedHelperText": [16],
-        "reorderHelperText": [16],
-        "createKeyboardHandle": [16],
-        "sortableHostElement": [16],
+        "itemDescriptor": [16, "item-descriptor"],
+        "grabbedHelperText": [16, "grabbed-helper-text"],
+        "droppedHelperText": [16, "dropped-helper-text"],
+        "reorderHelperText": [16, "reorder-helper-text"],
+        "createKeyboardHandle": [16, "create-keyboard-handle"],
+        "sortableHostElement": [16, "sortable-host-element"],
         "animationEnabled": [4, "animation-enabled"],
         "draggedClass": [1, "dragged-class"],
         "handleDraggedClass": [1, "handle-dragged-class"],
@@ -785,5 +786,3 @@ const NanoSortable = Sortable;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoSortable, defineCustomElement };
-
-//# sourceMappingURL=nano-sortable.js.map

package/dist/components/nano-spinner.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { S as Spinner, d as defineCustomElement$1 } from './spinner.js';
 
@@ -7,5 +7,3 @@ const NanoSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoSpinner, defineCustomElement };
-
-//# sourceMappingURL=nano-spinner.js.map

package/dist/components/nano-split-pane.js

@@ -1,15 +1,14 @@
 /*!
- * 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';
 import { d as drag } from './drag.js';
-import { c as clamp } from './math.js';
+import { a as clamp } from './math.js';
 import { d as debounce } from './throttle.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const splitPaneCss = ":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{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical]):not([disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:\"\";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:\"\";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}";
-const NanoSplitPaneStyle0 = splitPaneCss;
+const splitPaneCss = ":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{--divider-width:4px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1000);display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-focus-ring-color)}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:\"\";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:\"\";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}";
 
 const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLElement {
     get host() { return this; }
@@ -289,13 +288,13 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class SplitPane extends HTMLE
         else {
             styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
         }
-        return (h(Host, { style: styles, class: "nano-split-pane" }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-lines" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-lines-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
+        return (h(Host, { style: styles, class: "nano-split-pane" }, h("div", { part: "panel start", class: "start" }, h("slot", { name: "start" })), h("div", { part: "divider", class: "divider", tabindex: this.disabled ? undefined : '0', role: "separator", "aria-label": "Resize", onKeyDown: this.handleKeyDown, onMouseDown: this.handleDrag, onTouchStart: this.handleDrag }, h("slot", { name: "handle" }, !this.disabled && this.vertical ? (h("nano-icon", { slot: "handle", name: "solid/grip-dots" })) : (h("nano-icon", { slot: "handle", name: "solid/grip-dots-vertical" })))), h("div", { part: "panel end", class: "end" }, h("slot", { name: "end" }))));
     }
     static get watchers() { return {
         "position": ["handlePositionChange"],
         "positionInPixels": ["handlePositionInPixelsChange"]
     }; }
-    static get style() { return NanoSplitPaneStyle0; }
+    static get style() { return splitPaneCss; }
 }, [1, "nano-split-pane", {
         "position": [6146],
         "positionInPixels": [1026, "position-in-pixels"],
@@ -334,5 +333,3 @@ const NanoSplitPane = SplitPane;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoSplitPane, defineCustomElement };
-
-//# sourceMappingURL=nano-split-pane.js.map

package/dist/components/nano-sticker.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { S as Sticker, d as defineCustomElement$1 } from './sticker.js';
 
@@ -7,5 +7,3 @@ const NanoSticker = Sticker;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoSticker, defineCustomElement };
-
-//# sourceMappingURL=nano-sticker.js.map

package/dist/components/nano-tab-content.js

@@ -1,14 +1,13 @@
 /*!
- * 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 tabContentCss = ":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{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";
-const NanoTabContentStyle0 = tabContentCss;
+const tabContentCss = ":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{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";
 
 let id = 0;
-const TabPanel = /*@__PURE__*/ proxyCustomElement(class TabPanel extends HTMLElement {
+const NanoTabContent$1 = /*@__PURE__*/ proxyCustomElement(class NanoTabContent extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -25,12 +24,12 @@ const TabPanel = /*@__PURE__*/ proxyCustomElement(class TabPanel extends HTMLEle
         requestAnimationFrame(() => (this.ready = true));
     }
     render() {
-        return (h(Host, { key: '08abcc599bd876200b180401e671ddbd6a9bf32f', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
+        return (h(Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                 ready: this.ready,
                 'nano-tab-content': true,
-            } }, h("div", { key: '11c30baa5c02d8ad2d134e18ab7757482cbf64a1', part: "base", class: "nano-tab-content" }, h("slot", { key: 'e57eea4e5a61fdc5b57d9c745ea479055f3caa13' }))));
+            } }, h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
     }
-    static get style() { return NanoTabContentStyle0; }
+    static get style() { return tabContentCss; }
 }, [1, "nano-tab-content", {
         "name": [513],
         "active": [516],
@@ -44,15 +43,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "nano-tab-content":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, TabPanel);
+                customElements.define(tagName, NanoTabContent$1);
             }
             break;
     } });
 }
 
-const NanoTabContent = TabPanel;
+const NanoTabContent = NanoTabContent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoTabContent, defineCustomElement };
-
-//# sourceMappingURL=nano-tab-content.js.map