@nanoporetech-digital/components 6.3.0 → 6.3.1

package/dist/nano-components/transitions-5aecdeeb.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+const n=(n,s)=>{const e={className:"",show:true,showDisplay:"block",...s};return new Promise((s=>{const t=o=>{if((o.target===n||o.composedPath().some((n=>n===o.target)))&&(!e.transitionProp||e.transitionProp.includes(o.propertyName))){s("shown");n.removeEventListener("transitionend",t)}};const o=t=>{if((t.target===n||t.composedPath().some((n=>n===t.target)))&&(!e.transitionProp||e.transitionProp.includes(t.propertyName))){n.style.display="none";n.dataset.displayTransition="false";s("hidden");n.removeEventListener("transitionend",o)}};if(e.show){n.addEventListener("transitionend",t);n.style.display=e.showDisplay;n.dataset.displayTransition="true";setTimeout((()=>n.classList.add(e.className)),50)}else{n.addEventListener("transitionend",o);n.classList.remove(e.className)}}))};export{n as d};
+//# sourceMappingURL=transitions-5aecdeeb.js.map

package/dist/nano-components/transitions-5aecdeeb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["displayTransition","el","options","opts","className","show","showDisplay","Promise","resolve","showCb","e","target","composedPath","some","transitionProp","includes","propertyName","removeEventListener","hideCb","style","display","dataset","addEventListener","setTimeout","classList","add","remove"],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      el.clientWidth; // force reflow\n      setTimeout(() => el.classList.add(opts.className), 50);\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"mappings":";;;MA0BaA,EAAoB,CAC/BC,EACAC,KAOA,MAAMC,EAAO,CACXC,UAAW,GACXC,KAAM,KACNC,YAAa,WACVJ,GAGL,OAAO,IAAIK,SAASC,IAClB,MAAMC,EAAUC,IACd,IACGA,EAAEC,SAAWV,GAAMS,EAAEE,eAAeC,MAAMZ,GAAOA,IAAOS,EAAEC,aACzDR,EAAKW,gBAAkBX,EAAKW,eAAeC,SAASL,EAAEM,eACxD,CACAR,EAAQ,SACRP,EAAGgB,oBAAoB,gBAAiBR,E,GAI5C,MAAMS,EAAUR,IACd,IACGA,EAAEC,SAAWV,GAAMS,EAAEE,eAAeC,MAAMZ,GAAOA,IAAOS,EAAEC,aACzDR,EAAKW,gBAAkBX,EAAKW,eAAeC,SAASL,EAAEM,eACxD,CACAf,EAAGkB,MAAMC,QAAU,OACnBnB,EAAGoB,QAAQrB,kBAAoB,QAC/BQ,EAAQ,UACRP,EAAGgB,oBAAoB,gBAAiBC,E,GAI5C,GAAIf,EAAKE,KAAM,CACbJ,EAAGqB,iBAAiB,gBAAiBb,GACrCR,EAAGkB,MAAMC,QAAUjB,EAAKG,YACxBL,EAAGoB,QAAQrB,kBAAoB,OAE/BuB,YAAW,IAAMtB,EAAGuB,UAAUC,IAAItB,EAAKC,YAAY,G,KAC9C,CACLH,EAAGqB,iBAAiB,gBAAiBJ,GACrCjB,EAAGuB,UAAUE,OAAOvB,EAAKC,U,IAE3B,S"}

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-06-03T22:30:42",
+  "timestamp": "2024-06-07T13:30:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.2",

package/hydrate/index.js

@@ -12978,7 +12978,7 @@ const displayTransition = (el, options) => {
       el.addEventListener('transitionend', showCb);
       el.style.display = opts.showDisplay;
       el.dataset.displayTransition = 'true';
-      requestAnimationFrame(() => el.classList.add(opts.className));
+      setTimeout(() => el.classList.add(opts.className), 50);
     }
     else {
       el.addEventListener('transitionend', hideCb);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -130,7 +130,7 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "150beee9f428d732cac09b18611bee93ab54c748",
+  "gitHead": "f184a2cd57ce4d696588234d082bc150f26174f3",
   "volta": {
     "node": "18.14.0"
   }

package/dist/cjs/table.worker-6b65a9ea.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-6b65a9ea.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/transitions-20fce787.js.map

@@ -1 +0,0 @@
-{"file":"transitions-20fce787.js","mappings":";;;;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,OAAO;IACpB,GAAG,OAAO;GACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MAEtC,qBAAqB,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      el.clientWidth; // force reflow\n      requestAnimationFrame(() => el.classList.add(opts.className));\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"version":3}

package/dist/esm/table.worker-936e6d51.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-936e6d51.js","mappings":";;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/transitions-bd15e312.js.map

@@ -1 +0,0 @@
-{"file":"transitions-bd15e312.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,OAAO;IACpB,GAAG,OAAO;GACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MAEtC,qBAAqB,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  options?: {\n    className?: string;\n    show?: boolean;\n    showDisplay?: string;\n    transitionProp?: string[];\n  }\n): Promise<'shown' | 'hidden'> => {\n  const opts = {\n    className: '',\n    show: true,\n    showDisplay: 'block',\n    ...options,\n  };\n\n  return new Promise((resolve) => {\n    const showCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        resolve('shown');\n        el.removeEventListener('transitionend', showCb);\n      }\n    };\n\n    const hideCb = (e: TransitionEvent) => {\n      if (\n        (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n        (!opts.transitionProp || opts.transitionProp.includes(e.propertyName))\n      ) {\n        el.style.display = 'none';\n        el.dataset.displayTransition = 'false';\n        resolve('hidden');\n        el.removeEventListener('transitionend', hideCb);\n      }\n    };\n\n    if (opts.show) {\n      el.addEventListener('transitionend', showCb);\n      el.style.display = opts.showDisplay;\n      el.dataset.displayTransition = 'true';\n      el.clientWidth; // force reflow\n      requestAnimationFrame(() => el.classList.add(opts.className));\n    } else {\n      el.addEventListener('transitionend', hideCb);\n      el.classList.remove(opts.className);\n    }\n  });\n};\n"],"version":3}

package/dist/nano-components/transitions-bd15e312.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-const n=(n,e)=>{const s={className:"",show:true,showDisplay:"block",...e};return new Promise((e=>{const t=i=>{if((i.target===n||i.composedPath().some((n=>n===i.target)))&&(!s.transitionProp||s.transitionProp.includes(i.propertyName))){e("shown");n.removeEventListener("transitionend",t)}};const i=t=>{if((t.target===n||t.composedPath().some((n=>n===t.target)))&&(!s.transitionProp||s.transitionProp.includes(t.propertyName))){n.style.display="none";n.dataset.displayTransition="false";e("hidden");n.removeEventListener("transitionend",i)}};if(s.show){n.addEventListener("transitionend",t);n.style.display=s.showDisplay;n.dataset.displayTransition="true";requestAnimationFrame((()=>n.classList.add(s.className)))}else{n.addEventListener("transitionend",i);n.classList.remove(s.className)}}))};export{n as d};
-//# sourceMappingURL=transitions-bd15e312.js.map