@nanoporetech-digital/components 8.0.0-alpha.3 → 8.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.5",
   "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.3"
+    "@nanoporetech-digital/style": "8.0.0-alpha.5"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",

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: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
-                skeleton: true,
-                animate: this.animated,
-            } }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', 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: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
-                skeleton: true,
-                animate: this.animated,
-            } }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', 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 e,a as i,f as s,d as n}from"./index-DXvE-U_j.js";import{h as a}from"./renderer-BUaAsDso.js";const o=class{constructor(i){t(this,i),this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7),this.nanoResizeObserverReady=e(this,"nanoResizeObserverReady",7),this.nanoResizeContentFitChange=e(this,"nanoResizeContentFitChange",7),this.nanoResize=e(this,"nanoResize",7)}ro;appliedStates;isReady=!1;get host(){return i(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 e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map},this.states.split(",").map((e=>{if((e=e.trim()).includes(" ")){const[i,...s]=e.split(" "),{bp:n,dir:a}=t(i);this.appliedStates[a].set(n,{states:s,applied:!1})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:!1})}}))}assesContentFit(){if(!this.notifyContentFit)return;let t=!1;const e=(t=>{if("contents"!==window.getComputedStyle(t).display)return t;const e=t=>Array.from(t.children).find((t=>{if("contents"!==window.getComputedStyle(t).display)return t;e(t)}));return e(t)})(this.host.firstElementChild);e&&(this.notifyContentFit&&this.notifyContentFit.includes("x")&&(this.currentWidth<e.scrollWidth&&!1!==this.contentFitX?(t=!0,this.contentFitX=!1):this.currentWidth>=e.scrollWidth&&!0!==this.contentFitX&&(t=!0,this.contentFitX=!0)),this.notifyContentFit&&this.notifyContentFit.includes("y")&&(this.currentHeight<e.scrollHeight&&!1!==this.contentFitY?(t=!0,this.contentFitY=!1):this.currentHeight>=e.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 e=!1;Object.keys(this.appliedStates).forEach((i=>{let s;s="h"===i?this.currentHeight:this.currentWidth,this.appliedStates[i].forEach(((n,a)=>{s>=a&&!1===n.applied?(n.applied=!0,t[i].set(a,n),e=!0):s<a&&!0===n.applied&&(n.applied=!1,t[i].set(a,n),e=!0)}))})),e?this.applyChanges(t):this.classNames.includes("is-ready")||(this.classNames=[...this.classNames,"is-ready"])};applyChanges(t){if(!this.states)return;let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{t.states&&t.states.map((i=>{t.applied?(e.push(i),e=e.filter((t=>t!=="not-"+i))):(e.push("not-"+i),e=e.filter((t=>t!==i)))}))}))})),this.classNames=["is-ready",...e],this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};return Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))})),e}attachRO(){window.ResizeObserver&&(this.ro=new ResizeObserver((t=>{const{width:e,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(e),this.currentHeight=Math.ceil(i),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:e}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t),this.currentHeight=Math.ceil(e)}))}connectedCallback(){this.ro||this.attachRO()}disconnectedCallback(){this.ro&&this.ro.disconnect()}render(){return a(n,{key:"67ae39458d0f21c7100481c6aa68f9455e468d86",class:"nano-resize-observe"},a("slot",{key:"503108cec78fcfda303a9e392e1903ec7acfc244"}),!!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(e){t(this,e)}animated=!0;render(){return a(n,{key:"f73bd1aaaf1ed443643eb6fee3421071be76b064",class:"nano-skeleton"},a("div",{key:"a4023374bcd7855ef2638623b2dbf29ac758f0a6",class:{skeleton:!0,animate:this.animated}},a("div",{key:"bf89fd85a10834bb798515f46b51a4b26d0f885f",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/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;
-}