nanosplash 3.0.1 → 3.0.2

package/dist/versioned/3.0.1/es/ns.js

@@ -1,306 +0,0 @@
-var m = Object.defineProperty;
-var S = (e, t, n) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var r = (e, t, n) => (S(e, typeof t != "symbol" ? t + "" : t, n), n);
-const v = "3.0.1";
-var o = /* @__PURE__ */ ((e) => (e.Add = "add", e.Remove = "remove", e))(o || {});
-const d = class d {
-  /**
-   * # Constructor
-   * Creates a new Nanosplash instance.
-   */
-  constructor() {
-    /**
-     * # ID
-     * Each Nanosplash instance is given a unique GUID.
-     */
-    r(this, "id");
-    /**
-     * # Element
-     * The root element of the Nanosplash component.
-     */
-    r(this, "element");
-    this.element = N(), this.element.id = this.id = d.generateGUID();
-  }
-  /**
-   * # Generate GUID
-   * @returns {GUIDString} A GUID string.
-   * @private
-   */
-  static generateGUID() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (t) => {
-      const n = Math.random() * 16 | 0;
-      return (t === "x" ? n : n & 3 | 8).toString(16);
-    });
-  }
-  /**
-   * @inheritdoc
-   */
-  getNSContentElement() {
-    return this.getNSElement().firstElementChild;
-  }
-  /**
-   * @inheritdoc
-   */
-  getNSTextElement() {
-    return this.getNSContentElement().firstElementChild;
-  }
-  /**
-   * @inheritdoc
-   */
-  getId() {
-    return this.id;
-  }
-  /**
-   * @inheritdoc
-   */
-  getNSElement() {
-    return this.element;
-  }
-  /**
-   * @inheritdoc
-   */
-  setText(t) {
-    return this.getNSTextElement().innerText = t, t.length > 0 ? this.showText() : this.hideText(), this;
-  }
-  /**
-   * @inheritdoc
-   */
-  showText() {
-    return I(this.getNSTextElement()), this;
-  }
-  /**
-   * @inheritdoc
-   */
-  hideText() {
-    return y(this.getNSTextElement()), this;
-  }
-  /**
-   * @inheritdoc
-   */
-  remove() {
-    var t;
-    return this.element && ((t = this.element.parentElement) == null || t.removeChild(this.element), delete this.element), this;
-  }
-};
-/**
- * # CSS Class Name
- * The main CSS class name of the root element of a Nanosplash component.
- */
-r(d, "NSClass", "ns"), /**
- * # Host CSS Class Name
- * The CSS class name of the host element of a Nanosplash component.
- * The host element is the element that the Nanosplash is attached to.
- */
-r(d, "NSHostClass", "nsh");
-let l = d;
-function N() {
-  return new DOMParser().parseFromString(
-    '<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',
-    "text/html"
-  ).body.firstChild;
-}
-function w(e, t) {
-  t.children.length > 0 ? t.insertBefore(e, t.children.item(0)) : t.append(e);
-}
-function h(e, t) {
-  e == null || e.classList[t](l.NSHostClass);
-}
-function E(e) {
-  h(e.getNSElement().parentElement, o.Remove);
-}
-function I(e) {
-  e.style.display = "flex";
-}
-function y(e) {
-  e.style.display = "none";
-}
-function u(e) {
-  return e instanceof Element ? e : document.querySelector(e || "");
-}
-function C(e) {
-  var t;
-  return ((t = e == null ? void 0 : e.classList) == null ? void 0 : t.contains(l.NSClass)) ?? !1;
-}
-function x(e, t) {
-  h(e.parentElement, o.Remove), h(t, o.Add), w(e, t);
-}
-function f(e) {
-  const t = e.firstElementChild;
-  if (t !== null && C(t)) {
-    const c = t.id;
-    return a.getInstance().nsStack.find((g) => g.getId() === c) ?? null;
-  }
-  return null;
-}
-const s = class s {
-  /**
-   * # Constructor
-   * Private constructor to prevent multiple instances.
-   * @private
-   */
-  constructor() {
-    /**
-     * # Version
-     */
-    r(this, "version");
-    /**
-     * @inheritdoc
-     */
-    r(this, "nsStack");
-    this.version = v, this.nsStack = [];
-  }
-  /**
-   * # Find Index
-   * Find Nanosplash stack index by callback.
-   * @param callback Callback function that returns a boolean.
-   * @returns {number} Index of Nanosplash instance in the stack or -1.
-   * @private
-   */
-  findIndex(t) {
-    return this.nsStack.findIndex(t);
-  }
-  /**
-   * # Find
-   * Find Nanosplash in the stack by callback.
-   * @param callback Callback function that returns a boolean.
-   * @returns {Splash | undefined} Nanosplash instance or undefined
-   * @private
-   */
-  find(t) {
-    return this.nsStack.find(t);
-  }
-  /**
-   * # Get Instance
-   * Singleton instance accessor
-   * @returns {Service} NanosplashService instance
-   */
-  static getInstance() {
-    return s.instance || (s.instance = new s()), s.instance;
-  }
-  /**
-   * # Assign To Window
-   * Assign a NanosplashService instance to the Window object.
-   * The NanosplashService instance can be accessed in the window object
-   * using the key window accessor key.
-   * @see WindowAccessorKey
-   * @private
-   */
-  static assignToWindow() {
-    Object.defineProperty(window, s.WindowAccessorKey, {
-      value: s.getInstance(),
-      writable: !1
-    });
-  }
-  /**
-   * # Start
-   * Initialize and attach a Nanosplash Service instance to the Window object.
-   */
-  static start() {
-    s.assignToWindow(), window.addEventListener("load", () => {
-      window[s.WindowAccessorKey] instanceof s || s.assignToWindow();
-    });
-  }
-  /**
-   * # Create Nanosplash
-   * Return new Nanosplash instance and push it to the stack.
-   * @param text Text to display.
-   * @returns {Splash} Nanosplash instance.
-   * @private
-   */
-  createNS(t) {
-    const n = new l();
-    return n.setText(t || ""), this.nsStack.push(n), n;
-  }
-  /**
-   * # Clean And Remove
-   * Remove Nanosplash from DOM and clean its parent.
-   * @param ns Nanosplash instance.
-   * @returns {GUIDString} Nanosplash ID.
-   * @private
-   */
-  cleanAndRemove(t) {
-    return E(t), t.remove().getId();
-  }
-  /**
-   * # Stack Delete
-   * Remove Nanosplash instance from the stack.
-   * @param ns Nanosplash instance.
-   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-   * @private
-   */
-  stackDelete(t) {
-    let n = this.findIndex((i) => i.getId() === t.getId());
-    return n < 0 ? null : (this.nsStack.splice(n, 1), t.getId());
-  }
-  /**
-   * # Delete NS
-   * Remove Nanosplash instance from both the stack and the
-   * @param callback Callback function.
-   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-   * @private
-   */
-  deleteNS(t) {
-    const n = this.find(t);
-    return n ? (this.cleanAndRemove(n), this.stackDelete(n)) : null;
-  }
-  /**
-   * @inheritdoc
-   */
-  show(t) {
-    let n = f(document.body);
-    return n || (n = this.createNS(), x(n.getNSElement(), document.body)), n.setText(t || "").getId();
-  }
-  /**
-   * @inheritdoc
-   */
-  showInside(t, n) {
-    const i = u(t);
-    if (i) {
-      let c = f(i);
-      return c || (c = this.createNS()), x(c.getNSElement(), i), c.setText(n || "").getId();
-    }
-    return null;
-  }
-  /**
-   * @inheritdoc
-   */
-  hide() {
-    const t = this.nsStack.pop();
-    return t ? this.cleanAndRemove(t) : null;
-  }
-  /**
-   * @inheritdoc
-   */
-  hideAll() {
-    this.nsStack.forEach(this.cleanAndRemove), this.nsStack.splice(0, this.nsStack.length);
-  }
-  /**
-   * @inheritdoc
-   */
-  hideId(t) {
-    return this.deleteNS((n) => n.getId() === t);
-  }
-  /**
-   * @inheritdoc
-   */
-  hideInside(t) {
-    const n = u(t), i = (c) => c.getNSElement().parentElement === n;
-    return n ? this.deleteNS(i) : null;
-  }
-};
-/**
- * # Window Accessor Key
- * Key to access NanosplashService instance in the Window object.
- */
-r(s, "WindowAccessorKey", "ns"), /**
- * # Instance
- * Singleton instance of NanosplashService.
- * @private
- */
-r(s, "instance");
-let a = s;
-const A = { Service: a };
-export {
-  a as Service,
-  A as default
-};

package/dist/versioned/3.0.1/es/style.css

@@ -1 +0,0 @@
-.ns,.nsh:before{width:100%;height:100%}.ns,.nsh:before{top:0;left:0}.nsc,.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .8);--zIdx: 999999999;--blur: blur(10px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh{height:100vh}.ns{position:absolute;z-index:calc(var(--zIdx) + 2)}.nsc{filter:drop-shadow(0 0 .1rem rgba(211,211,211,.5))}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);margin-right:var(--relSize);text-shadow:0 0 .06rem rgba(47,79,79,.25)}.nss{display:block;width:var(--relSize);height:var(--relSize)}.nss>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:Dash 1.5s ease-in-out infinite}@keyframes Rotate{to{transform:rotate(360deg)}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}

package/dist/versioned/3.0.1/iife/ns.iife.js

@@ -1,2 +0,0 @@
-var I=Object.defineProperty;var E=(o,i,d)=>i in o?I(o,i,{enumerable:!0,configurable:!0,writable:!0,value:d}):o[i]=d;var a=(o,i,d)=>(E(o,typeof i!="symbol"?i+"":i,d),d);(function(){"use strict";var o=document.createElement("style");o.textContent=`.ns,.nsh:before{width:100%;height:100%}.ns,.nsh:before{top:0;left:0}.nsc,.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .8);--zIdx: 999999999;--blur: blur(10px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh{height:100vh}.ns{position:absolute;z-index:calc(var(--zIdx) + 2)}.nsc{filter:drop-shadow(0 0 .1rem rgba(211,211,211,.5))}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);margin-right:var(--relSize);text-shadow:0 0 .06rem rgba(47,79,79,.25)}.nss{display:block;width:var(--relSize);height:var(--relSize)}.nss>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:Dash 1.5s ease-in-out infinite}@keyframes Rotate{to{transform:rotate(360deg)}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
-`,document.head.appendChild(o);const i="3.0.1",d="";var u=(t=>(t.Add="add",t.Remove="remove",t))(u||{});const h=class h{constructor(){a(this,"id");a(this,"element");this.element=S(),this.element.id=this.id=h.generateGUID()}static generateGUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const n=Math.random()*16|0;return(e==="x"?n:n&3|8).toString(16)})}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}getId(){return this.id}getNSElement(){return this.element}setText(e){return this.getNSTextElement().innerText=e,e.length>0?this.showText():this.hideText(),this}showText(){return k(this.getNSTextElement()),this}hideText(){return p(this.getNSTextElement()),this}remove(){var e;return this.element&&((e=this.element.parentElement)==null||e.removeChild(this.element),delete this.element),this}};a(h,"NSClass","ns"),a(h,"NSHostClass","nsh");let c=h;function S(){return new DOMParser().parseFromString('<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function w(t,e){e.children.length>0?e.insertBefore(t,e.children.item(0)):e.append(t)}function x(t,e){t==null||t.classList[e](c.NSHostClass)}function y(t){x(t.getNSElement().parentElement,u.Remove)}function k(t){t.style.display="flex"}function p(t){t.style.display="none"}function g(t){return t instanceof Element?t:document.querySelector(t||"")}function N(t){var e;return((e=t==null?void 0:t.classList)==null?void 0:e.contains(c.NSClass))??!1}function m(t,e){x(t.parentElement,u.Remove),x(e,u.Add),w(t,e)}function v(t){const e=t.firstElementChild;if(e!==null&&N(e)){const l=e.id;return f.getInstance().nsStack.find(b=>b.getId()===l)??null}return null}const s=class s{constructor(){a(this,"version");a(this,"nsStack");this.version=i,this.nsStack=[]}findIndex(e){return this.nsStack.findIndex(e)}find(e){return this.nsStack.find(e)}static getInstance(){return s.instance||(s.instance=new s),s.instance}static assignToWindow(){Object.defineProperty(window,s.WindowAccessorKey,{value:s.getInstance(),writable:!1})}static start(){s.assignToWindow(),window.addEventListener("load",()=>{window[s.WindowAccessorKey]instanceof s||s.assignToWindow()})}createNS(e){const n=new c;return n.setText(e||""),this.nsStack.push(n),n}cleanAndRemove(e){return y(e),e.remove().getId()}stackDelete(e){let n=this.findIndex(r=>r.getId()===e.getId());return n<0?null:(this.nsStack.splice(n,1),e.getId())}deleteNS(e){const n=this.find(e);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(e){let n=v(document.body);return n||(n=this.createNS(),m(n.getNSElement(),document.body)),n.setText(e||"").getId()}showInside(e,n){const r=g(e);if(r){let l=v(r);return l||(l=this.createNS()),m(l.getNSElement(),r),l.setText(n||"").getId()}return null}hide(){const e=this.nsStack.pop();return e?this.cleanAndRemove(e):null}hideAll(){this.nsStack.forEach(this.cleanAndRemove),this.nsStack.splice(0,this.nsStack.length)}hideId(e){return this.deleteNS(n=>n.getId()===e)}hideInside(e){const n=g(e),r=l=>l.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};a(s,"WindowAccessorKey","ns"),a(s,"instance");let f=s;try{f.start()}catch(t){console.warn(t)}})();

package/docs/index.6d66a821.js

@@ -1 +0,0 @@
-var S=Object.defineProperty;var N=(t,e,n)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var c=(t,e,n)=>(N(t,typeof e!="symbol"?e+"":e,n),n);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const d of o.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&r(d)}).observe(document,{childList:!0,subtree:!0});function n(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(s){if(s.ep)return;s.ep=!0;const o=n(s);fetch(s.href,o)}})();var u=(t=>(t.Add="add",t.Remove="remove",t))(u||{});const l=class l{constructor(){c(this,"id");c(this,"element");this.element=y(),this.element.id=this.id=l.generateGUID()}static generateGUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const n=Math.random()*16|0;return(e==="x"?n:n&3|8).toString(16)})}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}getId(){return this.id}getNSElement(){return this.element}setText(e){return this.getNSTextElement().innerText=e,e.length>0?this.showText():this.hideText(),this}showText(){return w(this.getNSTextElement()),this}hideText(){return E(this.getNSTextElement()),this}remove(){var e;return this.element&&((e=this.element.parentElement)==null||e.removeChild(this.element),delete this.element),this}};c(l,"NSClass","ns"),c(l,"NSHostClass","nsh");let a=l;function y(){return new DOMParser().parseFromString('<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function p(t,e){e.children.length>0?e.insertBefore(t,e.children.item(0)):e.append(t)}function f(t,e){t==null||t.classList[e](a.NSHostClass)}function v(t){f(t.getNSElement().parentElement,u.Remove)}function w(t){t.style.display="flex"}function E(t){t.style.display="none"}function x(t){return t instanceof Element?t:document.querySelector(t||"")}function I(t){var e;return((e=t==null?void 0:t.classList)==null?void 0:e.contains(a.NSClass))??!1}function m(t,e){f(t.parentElement,u.Remove),f(e,u.Add),p(t,e)}function g(t){const e=t.firstElementChild;if(e!==null&&I(e)){const s=e.id;return h.getInstance().nsStack.find(d=>d.getId()===s)??null}return null}const i=class i{constructor(){c(this,"nsStack");this.nsStack=[]}findIndex(e){return this.nsStack.findIndex(e)}find(e){return this.nsStack.find(e)}static getInstance(){return i.instance||(i.instance=new i),i.instance}static assignToWindow(){Object.defineProperty(window,i.WindowAccessorKey,{value:i.getInstance(),writable:!1})}static start(){i.assignToWindow(),window.addEventListener("load",()=>{window[i.WindowAccessorKey]instanceof i||i.assignToWindow()})}createNS(e){const n=new a;return n.setText(e||""),this.nsStack.push(n),n}cleanAndRemove(e){return v(e),e.remove().getId()}stackDelete(e){let n=this.findIndex(r=>r.getId()===e.getId());return n<0?null:(this.nsStack.splice(n,1),e.getId())}deleteNS(e){const n=this.find(e);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(e){let n=g(document.body);return n||(n=this.createNS(),m(n.getNSElement(),document.body)),n.setText(e||"").getId()}showInside(e,n){const r=x(e);if(r){let s=g(r);return s||(s=this.createNS()),m(s.getNSElement(),r),s.setText(n||"").getId()}return null}hide(){const e=this.nsStack.pop();return e?this.cleanAndRemove(e):null}hideAll(){this.nsStack.forEach(this.cleanAndRemove),this.nsStack=[]}hideId(e){return this.deleteNS(n=>n.getId()===e)}hideInside(e){const n=x(e),r=s=>s.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};c(i,"WindowAccessorKey","ns"),c(i,"instance");let h=i;try{h.start()}catch(t){console.warn(t)}

package/docs/index.74dbd99e.css

@@ -1 +0,0 @@
-.ns,.nsh:before{width:100%;height:100%}.ns,.nsh:before{top:0;left:0}.nsc,.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .8);--zIdx: 999999999;--blur: blur(10px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh{height:100vh}.ns{position:absolute;z-index:calc(var(--zIdx) + 2)}.nsc{filter:drop-shadow(0 0 .1rem rgba(211,211,211,.5))}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);margin-right:var(--relSize);text-shadow:0 0 .06rem rgba(47,79,79,.25)}.nss{display:block;width:var(--relSize);height:var(--relSize)}.nss>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:Dash 1.5s ease-in-out infinite}@keyframes Rotate{to{transform:rotate(360deg)}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}

package/docs/index.f34144dc.js

@@ -1 +0,0 @@
-var S=Object.defineProperty;var N=(t,e,n)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var c=(t,e,n)=>(N(t,typeof e!="symbol"?e+"":e,n),n);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const l of o.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&r(l)}).observe(document,{childList:!0,subtree:!0});function n(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(s){if(s.ep)return;s.ep=!0;const o=n(s);fetch(s.href,o)}})();const v="3.0.1";var u=(t=>(t.Add="add",t.Remove="remove",t))(u||{});const d=class d{constructor(){c(this,"id");c(this,"element");this.element=p(),this.element.id=this.id=d.generateGUID()}static generateGUID(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const n=Math.random()*16|0;return(e==="x"?n:n&3|8).toString(16)})}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}getId(){return this.id}getNSElement(){return this.element}setText(e){return this.getNSTextElement().innerText=e,e.length>0?this.showText():this.hideText(),this}showText(){return E(this.getNSTextElement()),this}hideText(){return I(this.getNSTextElement()),this}remove(){var e;return this.element&&((e=this.element.parentElement)==null||e.removeChild(this.element),delete this.element),this}};c(d,"NSClass","ns"),c(d,"NSHostClass","nsh");let a=d;function p(){return new DOMParser().parseFromString('<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function y(t,e){e.children.length>0?e.insertBefore(t,e.children.item(0)):e.append(t)}function f(t,e){t==null||t.classList[e](a.NSHostClass)}function w(t){f(t.getNSElement().parentElement,u.Remove)}function E(t){t.style.display="flex"}function I(t){t.style.display="none"}function x(t){return t instanceof Element?t:document.querySelector(t||"")}function C(t){var e;return((e=t==null?void 0:t.classList)==null?void 0:e.contains(a.NSClass))??!1}function m(t,e){f(t.parentElement,u.Remove),f(e,u.Add),y(t,e)}function g(t){const e=t.firstElementChild;if(e!==null&&C(e)){const s=e.id;return h.getInstance().nsStack.find(l=>l.getId()===s)??null}return null}const i=class i{constructor(){c(this,"version");c(this,"nsStack");this.version=v,this.nsStack=[]}findIndex(e){return this.nsStack.findIndex(e)}find(e){return this.nsStack.find(e)}static getInstance(){return i.instance||(i.instance=new i),i.instance}static assignToWindow(){Object.defineProperty(window,i.WindowAccessorKey,{value:i.getInstance(),writable:!1})}static start(){i.assignToWindow(),window.addEventListener("load",()=>{window[i.WindowAccessorKey]instanceof i||i.assignToWindow()})}createNS(e){const n=new a;return n.setText(e||""),this.nsStack.push(n),n}cleanAndRemove(e){return w(e),e.remove().getId()}stackDelete(e){let n=this.findIndex(r=>r.getId()===e.getId());return n<0?null:(this.nsStack.splice(n,1),e.getId())}deleteNS(e){const n=this.find(e);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(e){let n=g(document.body);return n||(n=this.createNS(),m(n.getNSElement(),document.body)),n.setText(e||"").getId()}showInside(e,n){const r=x(e);if(r){let s=g(r);return s||(s=this.createNS()),m(s.getNSElement(),r),s.setText(n||"").getId()}return null}hide(){const e=this.nsStack.pop();return e?this.cleanAndRemove(e):null}hideAll(){this.nsStack.forEach(this.cleanAndRemove),this.nsStack.splice(0,this.nsStack.length)}hideId(e){return this.deleteNS(n=>n.getId()===e)}hideInside(e){const n=x(e),r=s=>s.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};c(i,"WindowAccessorKey","ns"),c(i,"instance");let h=i;try{h.start()}catch(t){console.warn(t)}

package/docs/index.html

@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Nanosplash</title>
-		<script src="https://cdn.tailwindcss.com"></script>
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-		<script type="module" crossorigin src="/nanosplash/index.f34144dc.js"></script>
-		<link rel="stylesheet" href="/nanosplash/index.74dbd99e.css">
-	</head>
-	<body class="bg-slate-50 min-w-full min-h-screen">
-		<div
-			id="main"
-			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
-			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
-				Nanosplash
-			</div>
-			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
-				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
-				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
-				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
-			</div>
-			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
-				<button
-					id="run"
-					type="button"
-					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<span class="material-symbols-outlined">magic_button</span>
-					Run demo
-				</button>
-				<a
-					id="doc"
-					href="https://github.com/isakhauge/nanosplash"
-					type="button"
-					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<span class="material-symbols-outlined">menu_book</span>
-					Documentation
-				</a>
-			</div>
-			<div
-				id="wrapper"
-				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
-				<div
-					id="a"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
-				</div>
-				<div
-					id="b"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
-				</div>
-				<div
-					id="c"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
-				</div>
-			</div>
-		</div>
-		
-		<script>
-			const wait = (ms) => new Promise(r => setTimeout(r, ms))
-			const ref = (selector) => document.querySelector(selector)
-			const run = ref('#run')
-			run.onclick = async () => {
-				console.log('Running demo')
-				const sec = (n) => n * 1000
-				ns.show('Nanosplash')
-				await wait(sec(2))
-				ns.show('Tiny loading screen')
-				await wait(sec(2))
-				ns.show('For web artisans')
-				await wait(sec(2))
-				ns.hide()
-				ns.showInside('#wrapper', 'Display over elements')
-				await wait(sec(2.25))
-				ns.hide()
-				ns.showInside('#a', 'Like this')
-				await wait(sec(0.5))
-				ns.showInside('#b', 'This')
-				await wait(sec(0.5))
-				ns.showInside('#c', 'Or this')
-				await wait(sec(1))
-				ns.hideAll()
-				ns.show('Simple API')
-				await wait(sec(1.5))
-				ns.show('1.5kb minzipped')
-				await wait(sec(1.5))
-				ns.show('No dependencies')
-				await wait(sec(1.5))
-				ns.show('99% test coverage')
-				await wait(sec(1.5))
-				ns.show('Nanosplash')
-				await wait(sec(2))
-				ns.hide()
-			}
-		</script>
-	</body>
-</html>

package/index.html

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Nanosplash</title>
-		<script src="https://cdn.tailwindcss.com"></script>
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-	</head>
-	<body class="bg-slate-50 min-w-full min-h-screen">
-		<div
-			id="main"
-			class="min-h-screen flex flex-col justify-center items-center p-5 overflow-hidden">
-			<div class="text-slate-700 font-medium text-4xl md:text-4xl xl:text-5xl drop-shadow-md tracking-wide">
-				Nanosplash
-			</div>
-			<div class="mt-5 md:mt-10 flex max-w-md justify-center flex-wrap gap-x-1 gap-y-1 drop-shadow-md">
-				<img loading="lazy" src="https://badgen.net/npm/v/nanosplash" alt="Version">
-				<img loading="lazy" src="https://badgen.net/npm/license/nanosplash" alt="License">
-				<img loading="lazy" src="https://badgen.net/npm/types/nanosplash" alt="Types">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/minzip/nanosplash" alt="Minzipped size">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/dependency-count/nanosplash" alt="Dependency count">
-				<img loading="lazy" src="https://badgen.net/bundlephobia/tree-shaking/nanosplash" alt="Tree shaking">
-			</div>
-			<div class="mt-5 md:mt-10 flex gap-x-3 w-full max-w-[500px] justify-center">
-				<button
-					id="run"
-					type="button"
-					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<span class="material-symbols-outlined">magic_button</span>
-					Run demo
-				</button>
-				<a
-					id="doc"
-					href="https://github.com/isakhauge/nanosplash"
-					type="button"
-					class="py-2 px-3 bg-white text-slate-700 rounded-xl shadow flex items-center gap-x-2 ease-in-out duration-300 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<span class="material-symbols-outlined">menu_book</span>
-					Documentation
-				</a>
-			</div>
-			<div
-				id="wrapper"
-				class="relative min-w-[300px] mt-5 md:mt-20 flex flex-col md:flex-row gap-y-5 md:gap-y-0 md:gap-x-5 justify-stretch items-stretch bg-white 00 p-10 md:p-10 xl:p-20 rounded-xl ease-in-out duration-500 shadow-md hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-				<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#wrapper</div>
-				<div
-					id="a"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#a</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element A</div>
-				</div>
-				<div
-					id="b"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#b</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element B</div>
-				</div>
-				<div
-					id="c"
-					class="relative bg-white p-8 md:p-10 xl:p-20 rounded-xl shadow-md ease-in-out duration-500 hover:shadow-2xl hover:translate-y-[-2px] border border-[rgba(0,0,0,0.02)]">
-					<div class="absolute top-2 left-2 font-mono text-xs md:text-sm xl:text-base text-slate-500 cursor-default">#c</div>
-					<div class="text-slate-500 text-base md:text-xl xl:text-2xl font-medium cursor-default">Element C</div>
-				</div>
-			</div>
-		</div>
-		<script type="module" src="src/ts/main.ts"></script>
-		<script>
-			const wait = (ms) => new Promise(r => setTimeout(r, ms))
-			const ref = (selector) => document.querySelector(selector)
-			const run = ref('#run')
-			run.onclick = async () => {
-				console.log('Running demo')
-				const sec = (n) => n * 1000
-				ns.show('Nanosplash')
-				await wait(sec(2))
-				ns.show('Tiny loading screen')
-				await wait(sec(2))
-				ns.show('For web artisans')
-				await wait(sec(2))
-				ns.hide()
-				ns.showInside('#wrapper', 'Display over elements')
-				await wait(sec(2.25))
-				ns.hide()
-				ns.showInside('#a', 'Like this')
-				await wait(sec(0.5))
-				ns.showInside('#b', 'This')
-				await wait(sec(0.5))
-				ns.showInside('#c', 'Or this')
-				await wait(sec(1))
-				ns.hideAll()
-				ns.show('Simple API')
-				await wait(sec(1.5))
-				ns.show('1.5kb minzipped')
-				await wait(sec(1.5))
-				ns.show('No dependencies')
-				await wait(sec(1.5))
-				ns.show('99% test coverage')
-				await wait(sec(1.5))
-				ns.show('Nanosplash')
-				await wait(sec(2))
-				ns.hide()
-			}
-		</script>
-	</body>
-</html>

package/src/sass/ns.sass

@@ -1,95 +0,0 @@
-%maximize
-	width: 100%
-	height: 100%
-
-%upper-left
-	top: 0
-	left: 0
-
-%flex-center-xy
-	display: flex
-	justify-content: center
-	align-items: center
-
-// Nanosplash host scoped varibles
-.nsh
-	--color: DarkSlateGray
-	--size: 20px
-	--relSize: calc(var(--size) * 0.9)
-	--font: 'Helvetica', 'Arial', sans-serif
-	--weight: 400
-	--bg: #{ rgba(White, 0.8) }
-	--zIdx: 999999999
-	--blur: blur(10px)
-
-// Nanosplash host
-.nsh
-	position: relative
-	z-index: var(--zIdx)
-	&::before
-		@extend %maximize
-		@extend %upper-left
-		position: absolute
-		background-color: var(--bg)
-		content: ''
-		backdrop-filter: var(--blur)
-		-webkit-backdrop-filter: var(--blur)
-		z-index: calc(var(--zIdx) + 1)
-		border-radius: inherit
-
-// When Nanosplash host is the document body
-body.nsh
-	height: 100vh
-
-// Nanosplash (main element)
-.ns
-	@extend %maximize
-	@extend %upper-left
-	@extend %flex-center-xy
-	position: absolute
-	z-index: calc(var(--zIdx) + 2)
-
-// Nanosplash container
-.nsc
-	@extend %flex-center-xy
-	filter: drop-shadow(0 0 0.1rem #{ rgba(LightGray, 0.5) })
-
-// Nanosplash text
-.nst
-	color: var(--color)
-	font-size: var(--size)
-	font-family: var(--font)
-	font-weight: var(--weight)
-	margin-right: var(--relSize)
-	text-shadow: 0 0 0.06rem #{ rgba(DarkSlateGray, .25) }
-
-// Nanosplash spinner
-.nss
-	display: block
-	width: var(--relSize)
-	height: var(--relSize)
-	& > svg
-		animation: Rotate 2s linear infinite
-		position: relative
-		width: inherit
-		height: inherit
-		stroke-width: 8
-	& .path
-		stroke: var(--color)
-		stroke-linecap: round
-		animation: Dash 1.5s ease-in-out infinite
-
-// Spinner animations:
-@keyframes Rotate
-	100%
-		transform: rotate(360deg)
-@keyframes Dash
-	0%
-		stroke-dasharray: 1, 150
-		stroke-dashoffset: 0
-	50%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -35
-	100%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -124

package/vite.demo.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig(() => ({
-	base: 'nanosplash',
-	build: {
-		outDir: 'docs',
-		rollupOptions: {
-			input: 'index.html',
-			output: {
-				entryFileNames: '[name].[hash].js',
-				chunkFileNames: '[name].[hash].js',
-				assetFileNames: '[name].[hash].[ext]',
-			},
-		},
-	},
-}))