@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.0.0-alpha.2"
+    "@nanoporetech-digital/style": "8.0.0-alpha.4"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",
@@ -70,7 +70,7 @@
     "@stencil-community/eslint-plugin": "^0.10.0",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil-community/web-types-output-target": "^1.0.3",
-    "@stencil/core": "latest",
+    "@stencil/core": "../../../stenciljs",
     "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "3.0.12",
     "@stencil/vue-output-target": "^0.6.2",

package/dist/collection/components/file-upload/file-upload-list.js

@@ -1,3 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */

package/dist/collection/components/skeleton/skeleton.css

@@ -1,83 +0,0 @@
-: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 {
-  /**
-   * @prop --base-color-rgb: default var(--nano-skeleton-rgb, 228 230 232);
-   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));
-   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));
-   */
-  --base-color-rgb: var(--nano-skeleton-rgb, 228 230 232);
-  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));
-  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));
-  display: block;
-  position: relative;
-  border-radius: 0.25rem;
-  min-block-size: 1em;
-  line-height: inherit;
-}
-
-.skeleton {
-  display: flex;
-  min-inline-size: 100%;
-  min-block-size: 100%;
-  border-radius: inherit;
-  line-height: inherit;
-}
-
-.skeleton__indicator {
-  flex: 1 1 auto;
-  background: var(--color);
-  border-radius: inherit;
-  line-height: inherit;
-}
-
-.skeleton.animate .skeleton__indicator {
-  background: linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));
-  background-size: 400% 100%;
-  animation: loader 6s ease-in-out infinite;
-}
-
-@keyframes loader {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}

package/dist/collection/components/skeleton/skeleton.js

@@ -1,57 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { Host } from "@stencil/core";
-import { h } from "../../utils/renderer";
-/**
- * Skeletons are used to show where content will eventually be drawn.
- *
- * @version 1.0.0
- * @status stable
- */
-export class Skeleton {
-    /** When `true`, the skeleton will animate. */
-    animated = true;
-    render() {
-        return (h(Host, { key: 'fcfda9d2eb69c98089f410f30087a5cc773b4dd7', class: "nano-skeleton" }, h("div", { key: '6f489367c6e9a366d8fc4290244141a8a0b1c4d8', class: {
-                skeleton: true,
-                animate: this.animated,
-            } }, h("div", { key: 'd54f326dd7e8d181702d6ab16ca08c6c88c654e0', class: "skeleton__indicator" }, "\u00A0"))));
-    }
-    static get is() { return "nano-skeleton"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["skeleton.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["skeleton.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "animated": {
-                "type": "boolean",
-                "attribute": "animated",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When `true`, the skeleton will animate."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "true"
-            }
-        };
-    }
-}

package/dist/components/nano-skeleton.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface NanoSkeleton extends Components.NanoSkeleton, HTMLElement {}
-export const NanoSkeleton: {
-    prototype: NanoSkeleton;
-    new (): NanoSkeleton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/nano-skeleton.js

@@ -1,9 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { S as Skeleton, d as defineCustomElement$1 } from './skeleton.js';
-
-const NanoSkeleton = Skeleton;
-const defineCustomElement = defineCustomElement$1;
-
-export { NanoSkeleton, defineCustomElement };

package/dist/components/skeleton.js

@@ -1,41 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { h } from './renderer.js';
-
-const skeletonCss = ":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{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";
-
-const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    /** When `true`, the skeleton will animate. */
-    animated = true;
-    render() {
-        return (h(Host, { key: 'fcfda9d2eb69c98089f410f30087a5cc773b4dd7', class: "nano-skeleton" }, h("div", { key: '6f489367c6e9a366d8fc4290244141a8a0b1c4d8', class: {
-                skeleton: true,
-                animate: this.animated,
-            } }, h("div", { key: 'd54f326dd7e8d181702d6ab16ca08c6c88c654e0', class: "skeleton__indicator" }, "\u00A0"))));
-    }
-    static get style() { return skeletonCss; }
-}, [1, "nano-skeleton", {
-        "animated": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-skeleton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-skeleton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Skeleton);
-            }
-            break;
-    } });
-}
-
-export { Skeleton as S, defineCustomElement as d };

package/dist/nano-components/nano-resize-observe_2.entry.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-import{r as t,c as i,a as e,f as s,d as n}from"./index-DXvE-U_j.js";import{h as a}from"./renderer-BUaAsDso.js";const o=class{constructor(e){t(this,e),this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7),this.nanoResizeObserverReady=i(this,"nanoResizeObserverReady",7),this.nanoResizeContentFitChange=i(this,"nanoResizeContentFitChange",7),this.nanoResize=i(this,"nanoResize",7)}ro;appliedStates;isReady=!1;get host(){return e(this)}currentWidth;currentHeight;classNames=[];contentFitX=null;contentFitY=null;classNameChange(){this.host.className=this.classNames.join(" "),!this.isReady&&this.classNames.includes("is-ready")&&(this.isReady=!0,this.nanoResizeObserverReady.emit())}notifyContentFit;states;newStatesProp(){this.statesChanged()}nanoResizeStateChange;nanoResizeObserverReady;nanoResizeContentFitChange;nanoResize;dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((i=>{if((i=i.trim()).includes(" ")){const[e,...s]=i.split(" "),{bp:n,dir:a}=t(e);this.appliedStates[a].set(n,{states:s,applied:!1})}else{const{bp:e,dir:s}=t(i);this.appliedStates[s].set(e,{applied:!1})}}))}assesContentFit(){if(!this.notifyContentFit)return;let t=!1;const i=(t=>{if("contents"!==window.getComputedStyle(t).display)return t;const i=t=>Array.from(t.children).find((t=>{if("contents"!==window.getComputedStyle(t).display)return t;i(t)}));return i(t)})(this.host.firstElementChild);i&&(this.notifyContentFit&&this.notifyContentFit.includes("x")&&(this.currentWidth<i.scrollWidth&&!1!==this.contentFitX?(t=!0,this.contentFitX=!1):this.currentWidth>=i.scrollWidth&&!0!==this.contentFitX&&(t=!0,this.contentFitX=!0)),this.notifyContentFit&&this.notifyContentFit.includes("y")&&(this.currentHeight<i.scrollHeight&&!1!==this.contentFitY?(t=!0,this.contentFitY=!1):this.currentHeight>=i.scrollHeight&&!0!==this.contentFitY&&(t=!0,this.contentFitY=!0)),t&&this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY}))}assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;if(s((()=>this.assesContentFit())),!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let i=!1;Object.keys(this.appliedStates).forEach((e=>{let s;s="h"===e?this.currentHeight:this.currentWidth,this.appliedStates[e].forEach(((n,a)=>{s>=a&&!1===n.applied?(n.applied=!0,t[e].set(a,n),i=!0):s<a&&!0===n.applied&&(n.applied=!1,t[e].set(a,n),i=!0)}))})),i?this.applyChanges(t):this.classNames.includes("is-ready")||(this.classNames=[...this.classNames,"is-ready"])};applyChanges(t){if(!this.states)return;let i=[...this.classNames];Object.keys(t).forEach((e=>{t[e].forEach((t=>{t.states&&t.states.map((e=>{t.applied?(i.push(e),i=i.filter((t=>t!=="not-"+e))):(i.push("not-"+e),i=i.filter((t=>t!==e)))}))}))})),this.classNames=["is-ready",...i],this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};return Object.keys(t).forEach((e=>{t[e].forEach(((t,s)=>{i[s+e]=t.applied}))})),i}attachRO(){window.ResizeObserver&&(this.ro=new ResizeObserver((t=>{const{width:i,height:e}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(i),this.currentHeight=Math.ceil(e),this.nanoResize.emit(t)})),this.ro.observe(this.host))}componentWillLoad(){this.classNames=Array.from(this.host.classList),this.statesChanged(),this.applyChanges(this.appliedStates),this.currentWidth||this.currentHeight?this.assessChanges():s((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t),this.currentHeight=Math.ceil(i)}))}connectedCallback(){this.ro||this.attachRO()}disconnectedCallback(){this.ro&&this.ro.disconnect()}render(){return a(n,{key:"c18db95f590c660cc2c0e1dd1f2d2a0c66e63a54",class:"nano-resize-observe"},a("slot",{key:"25cd2b6762d1bb05d5182fd817b758256ce6750a"}),!!this.notifyContentFit&&(null!==this.contentFitX||null!==this.contentFitY)&&[a("slot",this.contentFitX?{name:"content-fit-x"}:{name:"content-nofit-x"}),a("slot",this.contentFitY?{name:"content-fit-y"}:{name:"content-nofit-y"})])}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};o.style=":host { display: block }";const r=class{constructor(i){t(this,i)}animated=!0;render(){return a(n,{key:"fcfda9d2eb69c98089f410f30087a5cc773b4dd7",class:"nano-skeleton"},a("div",{key:"6f489367c6e9a366d8fc4290244141a8a0b1c4d8",class:{skeleton:!0,animate:this.animated}},a("div",{key:"d54f326dd7e8d181702d6ab16ca08c6c88c654e0",class:"skeleton__indicator"}," ")))}};r.style=":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{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";export{o as nano_resize_observe,r as nano_skeleton}

package/dist/nano-components/style-BrRDhFfF.js

@@ -1,4 +0,0 @@
-/*!
- * Custom elements for Nanopore-Digital Web applications
- */
-let o;function e(e){if(!e)return;if(o)return void e.adoptedStyleSheets.push(o);const n=document.styleSheets;let t=null,f=null,l=[];for(t of n)if(t instanceof CSSStyleSheet)for(f of t.cssRules)f instanceof CSSLayerBlockRule&&f.cssText.indexOf(".nano-toast-stack")>-1&&l.push(t),f instanceof CSSLayerBlockRule&&f.cssText.indexOf(".nano-theme")>-1&&l.push(t);if(l.length){const n=new CSSStyleSheet;for(const o of l)for(const e of o.cssRules)n.insertRule(e.cssText);return o=n,void e.adoptedStyleSheets.push(n)}console.warn("No global stylesheet found")}export{e as a}

package/dist/types/components/skeleton/skeleton.d.ts

@@ -1,12 +0,0 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
-/**
- * Skeletons are used to show where content will eventually be drawn.
- *
- * @version 1.0.0
- * @status stable
- */
-export declare class Skeleton implements ComponentInterface {
-    /** When `true`, the skeleton will animate. */
-    animated: boolean;
-    render(): any;
-}