nanosplash 2.5.3 → 3.0.0

package/.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: Build and Test
+
+on:
+  push:
+    branches:
+      - production
+  pull_request:
+    branches:
+      - production
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+
+      - name: Set up Git and update production branch
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          git checkout production
+          git fetch
+          git pull --no-rebase
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build (Vite)
+        run: yarn build
+
+      - name: Test (Vitest)
+        run: yarn test
+
+      - name: Generate Code Coverage (Vitest)
+        run: yarn coverage
+
+      - name: Commit and push changes
+        run: |
+          git add .
+          git commit --allow-empty -m "Build, test, and coverage report"
+          git push

package/.prettierrc

@@ -1,11 +1,12 @@
 {
-	"tabWidth": 2,
-	"useTabs": true,
-	"singleQuote": true,
-	"bracketSpacing": true,
-	"jsxSingleQuote": true,
-	"endOfLine": "lf",
-	"trailingComma": "es5",
-	"arrowParens": "avoid",
-	"semi": false
+  "tabWidth": 2,
+  "useTabs": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "semi": false,
+  "printWidth": 80
 }

package/README.md

@@ -1,124 +1,57 @@
-# nanosplash 🍩
+# Nanosplash
 
-![npm](https://img.shields.io/npm/v/nanosplash)
-![Minified+gzip size](https://badgen.net/bundlephobia/minzip/nanosplash)
-![Minified size](https://badgen.net/bundlephobia/dependency-count/nanosplash)
-![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/nanosplash)
+### Tiny loading screen for web artisans
 
-![npm maintenance score](https://img.shields.io/npms-io/maintenance-score/nanosplash)
-![npm quality score](https://img.shields.io/npms-io/quality-score/nanosplash)
-![npm final score](https://img.shields.io/npms-io/final-score/nanosplash)
-![npm popularity score](https://img.shields.io/npms-io/popularity-score/nanosplash)
+<br>
 
-<strong>The simple, tiny loading screen</strong>
+[![Build](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml) [![Build Status](https://github.com/isakhauge/nanosplash/workflows/CI/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions?query=workflow%3ACI) [![Coverage](https://img.shields.io/badge/Coverage-98.5%25-brightgreen.svg?style=flat)](https://your-coverage-report-url) [![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) [![Last Commit](https://img.shields.io/github/last-commit/isakhauge/nanosplash)](https://github.com/isakhauge/nanosplash/commits/production)
 
-# Getting started
+<br>
 
-## Import via CDN (recommended)
+## Get started
 
-```html
-<script src="https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js"></script>
-```
-```js
-// Install Nanosplash in the browser
-window.installNanosplash()
-// Display your first Nanosplash
-window.ns.show('Hello world')
-```
+Always get the latest version.
 
-## Install (advanced)
-```bash
-yarn add nanosplash
+```html
+<script src="https://unpkg.com/nanosplash/dist/ns.iife.js">
 ```
 
-### Modules
+## Display loading screen
 
-When including either ES or CJS modules, you need the CSS in the dist folder, whereas in the IIFE variant, everything is included. If you are using a modern bundler e.g Vite, NextJS, NuxtJS, you can import the CSS directly into your code.
+Display spinning wheel only.
 
 ```js
-import 'nanosplash/dist/module/style.css'
+ns.show()
 ```
 
-> ### Location of the stylesheet
->
-> Full: `node_modules/nanosplash/dist/module/style.css`<br>
-> Relative: `nanosplash/dist/module/style.css`
-
-#### ESM (ES modules)
+Display with text.
 
 ```js
-import { Nanosplash } from 'nanosplash'
+ns.show('Loading assets')
 ```
 
-#### CJS (CommonJS)
+Display inside another element.
 
 ```js
-const Nanosplash = require('nanosplash')
+ns.showInside('Loading table', '#my-table')
 ```
 
-### Inject Nanosplash into global scope
-#### Using CDN
-```js
-const nsOptions = {
-    spinner: true,
-    fontSize: '18px',
-}
-window.installNanosplash(nsOptions)
-```
-#### Using modules
-```js
-const nsOptions = {
-    spinner: true,
-    fontSize: '18px',
-}
-window.ns = new Nanosplash(nsOptions)
-```
-
-## Basic usage
-
-### Display the loading screen
+## Hide loading screen
 
-```js
-ns.show('Loading the good stuff')
-```
-
-### Hide the loading screen
+Hide the last loading screen (LIFO).
 
 ```js
-// Hide one at a time
 ns.hide()
-
-// Hide all
-ns.hideAll()
 ```
 
-## Advanced usage
-
-### Display the loading screen inside an element
+Hide loading screen inside another element.
 
 ```js
-// Use CSS selector string
-ns.show('Loading component').inside('#my-element')
-
-// Use HTMLElement objects directly
-ns.show('Loading component').inside(document.getElementById('my-element'))
+ns.hideInside('#my-table')
 ```
 
-### Combine Nanosplash with async tasks
+Hide all loading screens.
 
 ```js
-const task1 = new Promise(r => setTimeout(r, 3000))
-const task2 = async () => await getDataFromApi()
-
-ns.while(task1).show('Loading resources')
-ns.while(task2).show('Fetching table data').inside('#my-table')
-
-ns.progress(
-    [task1, 'Loading data from API'],
-    [task2, 'Processing data']
-).inside('#my-table')
+ns.hideAll()
 ```
-
-<hr>
-
-## If you like it, give it a star! ⭐️

package/dist/main.css

@@ -0,0 +1 @@
+.ns,.ns-host:before{width:100%;height:100%}.ns,.ns-host:before{top:0;left:0}.ns-content,.ns{display:flex;justify-content:center;align-items:center}.ns-host{--text-color: DarkSlateGray;--font-size: 20px;--proportional-size: calc(var(--font-size) * .9);--font-family: "Helvetica", "Arial", sans-serif;--font-weight: 400;--background: rgba(255, 255, 255, .8);--z-index: 999999999;--blur-filter: blur(10px)}.ns-host{position:relative;z-index:var(--z-index)}.ns-host:before{position:absolute;background-color:var(--background);content:"";backdrop-filter:var(--blur-filter);-webkit-backdrop-filter:var(--blur-filter);z-index:calc(var(--z-index) + 1)}body.ns-host{height:100vh}.ns{position:absolute;z-index:calc(var(--z-index) + 2)}.ns-text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);margin-right:var(--proportional-size)}.ns-spinner{display:block;width:var(--proportional-size);height:var(--proportional-size)}.ns-spinner>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.ns-spinner .path{stroke:var(--text-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/ns.cjs.js

@@ -0,0 +1 @@
+"use strict";var g=Object.defineProperty;var S=(e,t,n)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var i=(e,t,n)=>(S(e,typeof t!="symbol"?t+"":t,n),n);function N(){return new DOMParser().parseFromString('<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><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 o(e,t){e==null||e.classList[t](l.nsHostClassName)}function E(e){o(e.getNSElement().parentElement,"remove")}function v(e){e.style.display="flex"}function y(e){e.style.display="none"}function a(e){let t;if(typeof e=="string")t=document.querySelector(e);else{if(e instanceof Node)return e;if(typeof e=="function"){if(t=e(),!(t instanceof Node))return null}else t=null}return t}function p(e){var t;return(t=e==null?void 0:e.classList)==null?void 0:t.contains("ns")}function u(e,t){o(e.parentElement,"remove"),o(t,"add"),w(e,t)}function m(e){const t=a(e);if(!t)return null;const n=t.firstChild;if(n!==null&&p(n)){const x=n.id;return d.getInstance().nsStack.items.find(f=>f.getId()===x)??null}return null}function I(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=Math.random()*16|0;return(e==="x"?t:t&3|8).toString(16)})}const h=class{constructor(){i(this,"id");i(this,"element");this.element=N(),this.element.id=this.id=I()}getId(){return this.id}getNSElement(){return this.element}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}hideText(){return y(this.getNSTextElement()),this}setText(t){return this.getNSTextElement().innerText=t,t.length>0?this.showText():this.hideText(),this}showText(){return v(this.getNSTextElement()),this}remove(){var t;this.element&&((t=this.element.parentElement)==null||t.removeChild(this.element),delete this.element)}};let l=h;i(l,"nsClassName","ns"),i(l,"nsHostClassName",h.nsClassName+"-host");class C{constructor(){i(this,"_items");this._items=[]}get items(){return this._items}push(t){this._items.push(t)}pop(){return this._items.pop()}peek(){return this._items[this._items.length-1]}isEmpty(){return this._items.length===0}size(){return this._items.length}clear(){this._items=[]}}const s=class{constructor(){i(this,"nsStack");this.nsStack=new C}findIndex(t){return this.nsStack.items.findIndex(t)}find(t){return this.nsStack.items.find(t)}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(t){const n=new l;return n.setText(t||""),this.nsStack.push(n),n}cleanAndRemove(t){return E(t),t.remove(),t.getId()}stackDelete(t){let n=this.findIndex(r=>r.getId()===t.getId());return n<0?null:(this.nsStack.items.splice(n,1),t.getId())}deleteNS(t){const n=this.find(t);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(t){let n=m(document.body);return n||(n=this.createNS(),u(n.getNSElement(),document.body)),n.setText(t||""),n.getId()}showInside(t,n){const r=a(t);if(r){let c=m(r);return c||(c=this.createNS()),c.setText(n||""),u(c.getNSElement(),r),c.getId()}return null}hideAll(){this.nsStack.items.forEach(t=>{this.cleanAndRemove(t)}),this.nsStack.clear()}hide(){const t=this.nsStack.pop();return t?this.cleanAndRemove(t):null}hideId(t){return this.deleteNS(n=>n.getId()===t)}hideInside(t){const n=a(t),r=c=>c.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};let d=s;i(d,"WindowAccessorKey","ns"),i(d,"instance");try{d.start()}catch(e){console.warn(e)}

package/dist/ns.es.js

@@ -0,0 +1,330 @@
+var g = Object.defineProperty;
+var S = (e, t, n) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var i = (e, t, n) => (S(e, typeof t != "symbol" ? t + "" : t, n), n);
+function N() {
+  return new DOMParser().parseFromString(
+    '<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><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 o(e, t) {
+  e == null || e.classList[t](l.nsHostClassName);
+}
+function E(e) {
+  o(e.getNSElement().parentElement, "remove");
+}
+function v(e) {
+  e.style.display = "flex";
+}
+function y(e) {
+  e.style.display = "none";
+}
+function a(e) {
+  let t;
+  if (typeof e == "string")
+    t = document.querySelector(e);
+  else {
+    if (e instanceof Node)
+      return e;
+    if (typeof e == "function") {
+      if (t = e(), !(t instanceof Node))
+        return null;
+    } else
+      t = null;
+  }
+  return t;
+}
+function p(e) {
+  var t;
+  return (t = e == null ? void 0 : e.classList) == null ? void 0 : t.contains("ns");
+}
+function u(e, t) {
+  o(e.parentElement, "remove"), o(t, "add"), w(e, t);
+}
+function m(e) {
+  const t = a(e);
+  if (!t)
+    return null;
+  const n = t.firstChild;
+  if (n !== null && p(n)) {
+    const x = n.id;
+    return d.getInstance().nsStack.items.find((f) => f.getId() === x) ?? null;
+  }
+  return null;
+}
+function I() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (e) => {
+    const t = Math.random() * 16 | 0;
+    return (e === "x" ? t : t & 3 | 8).toString(16);
+  });
+}
+const h = class {
+  constructor() {
+    i(this, "id");
+    i(this, "element");
+    this.element = N(), this.element.id = this.id = I();
+  }
+  /**
+   * @inheritDoc
+   */
+  getId() {
+    return this.id;
+  }
+  /**
+   * @inheritDoc
+   */
+  getNSElement() {
+    return this.element;
+  }
+  /**
+   * # Get NS Content Element
+   * Returns the content element of the Nanosplash.
+   */
+  getNSContentElement() {
+    return this.getNSElement().firstElementChild;
+  }
+  /**
+   * # Get NS Text Element
+   * Returns the text element of the Nanosplash.
+   */
+  getNSTextElement() {
+    return this.getNSContentElement().firstElementChild;
+  }
+  /**
+   * @inheritDoc
+   */
+  hideText() {
+    return y(this.getNSTextElement()), this;
+  }
+  /**
+   * @inheritDoc
+   */
+  setText(t) {
+    return this.getNSTextElement().innerText = t, t.length > 0 ? this.showText() : this.hideText(), this;
+  }
+  /**
+   * @inheritDoc
+   */
+  showText() {
+    return v(this.getNSTextElement()), this;
+  }
+  /**
+   * @inheritDoc
+   */
+  remove() {
+    var t;
+    this.element && ((t = this.element.parentElement) == null || t.removeChild(this.element), delete this.element);
+  }
+};
+let l = h;
+i(l, "nsClassName", "ns"), i(l, "nsHostClassName", h.nsClassName + "-host");
+class C {
+  /**
+   * Constructs a new stack.
+   */
+  constructor() {
+    i(this, "_items");
+    this._items = [];
+  }
+  /**
+   * Returns the items in the stack.
+   */
+  get items() {
+    return this._items;
+  }
+  /**
+   * Adds an item to the top of the stack.
+   * @param item The item to add to the stack.
+   */
+  push(t) {
+    this._items.push(t);
+  }
+  /**
+   * Removes and returns the item at the top of the stack.
+   * @returns The item at the top of the stack, or undefined if the stack is empty.
+   */
+  pop() {
+    return this._items.pop();
+  }
+  /**
+   * Returns the item at the top of the stack without removing it.
+   * @returns The item at the top of the stack, or undefined if the stack is empty.
+   */
+  peek() {
+    return this._items[this._items.length - 1];
+  }
+  /**
+   * Returns true if the stack is empty, false otherwise.
+   * @returns True if the stack is empty, false otherwise.
+   */
+  isEmpty() {
+    return this._items.length === 0;
+  }
+  /**
+   * Returns the number of items in the stack.
+   * @returns The number of items in the stack.
+   */
+  size() {
+    return this._items.length;
+  }
+  /**
+   * Removes all items from the stack.
+   */
+  clear() {
+    this._items = [];
+  }
+}
+const s = class {
+  /**
+   * # Constructor
+   * Private constructor to prevent multiple instances.
+   * @private
+   */
+  constructor() {
+    i(this, "nsStack");
+    this.nsStack = new C();
+  }
+  /**
+   * # 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.
+   */
+  findIndex(t) {
+    return this.nsStack.items.findIndex(t);
+  }
+  /**
+   * # Find
+   * Find Nanosplash in the stack by callback.
+   * @param callback Callback function that returns a boolean.
+   * @returns {Nanosplash | undefined} Nanosplash instance or undefined
+   */
+  find(t) {
+    return this.nsStack.items.find(t);
+  }
+  /**
+   * # Get Instance
+   * Singleton instance accessor
+   * @returns {NanosplashService} NanosplashService instance
+   */
+  static getInstance() {
+    return s.instance || (s.instance = new s()), s.instance;
+  }
+  /**
+   * # Assign To Window
+   * Assign Nanosplash service instance to Window object.
+   * The NanosplashService instance can be accessed in the window object
+   * using the key window accessor key.
+   * @see WindowAccessorKey
+   */
+  static assignToWindow() {
+    Object.defineProperty(window, s.WindowAccessorKey, {
+      value: s.getInstance(),
+      writable: !1
+    });
+  }
+  /**
+   * # Start
+   * Initialize Nanosplash Service instance in Window when it's loaded.
+   */
+  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 {Nanosplash} Nanosplash instance.
+   */
+  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.
+   */
+  cleanAndRemove(t) {
+    return E(t), t.remove(), t.getId();
+  }
+  /**
+   * # Stack Delete At
+   * Remove Nanosplash instance from the stack.
+   * @param ns Nanosplash instance.
+   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
+   */
+  stackDelete(t) {
+    let n = this.findIndex((r) => r.getId() === t.getId());
+    return n < 0 ? null : (this.nsStack.items.splice(n, 1), t.getId());
+  }
+  /**
+   * # Delete NS
+   * Remove Nanosplash instance from both the stack and the DOM.
+   * @param callback Callback function.
+   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
+   */
+  deleteNS(t) {
+    const n = this.find(t);
+    return n ? (this.cleanAndRemove(n), this.stackDelete(n)) : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  show(t) {
+    let n = m(document.body);
+    return n || (n = this.createNS(), u(n.getNSElement(), document.body)), n.setText(t || ""), n.getId();
+  }
+  /**
+   * @inheritDoc
+   */
+  showInside(t, n) {
+    const r = a(t);
+    if (r) {
+      let c = m(r);
+      return c || (c = this.createNS()), c.setText(n || ""), u(c.getNSElement(), r), c.getId();
+    }
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  hideAll() {
+    this.nsStack.items.forEach((t) => {
+      this.cleanAndRemove(t);
+    }), this.nsStack.clear();
+  }
+  /**
+   * @inheritDoc
+   */
+  hide() {
+    const t = this.nsStack.pop();
+    return t ? this.cleanAndRemove(t) : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  hideId(t) {
+    return this.deleteNS((n) => n.getId() === t);
+  }
+  /**
+   * @inheritDoc
+   */
+  hideInside(t) {
+    const n = a(t), r = (c) => c.getNSElement().parentElement === n;
+    return n ? this.deleteNS(r) : null;
+  }
+};
+let d = s;
+i(d, "WindowAccessorKey", "ns"), i(d, "instance");
+try {
+  d.start();
+} catch (e) {
+  console.warn(e);
+}

package/dist/ns.iife.js

@@ -0,0 +1,2 @@
+var C=Object.defineProperty;var I=(r,o,c)=>o in r?C(r,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[o]=c;var i=(r,o,c)=>(I(r,typeof o!="symbol"?o+"":o,c),c);(function(){var r=document.createElement("style");r.textContent=`.ns,.ns-host:before{width:100%;height:100%}.ns,.ns-host:before{top:0;left:0}.ns-content,.ns{display:flex;justify-content:center;align-items:center}.ns-host{--text-color: DarkSlateGray;--font-size: 20px;--proportional-size: calc(var(--font-size) * .9);--font-family: "Helvetica", "Arial", sans-serif;--font-weight: 400;--background: rgba(255, 255, 255, .8);--z-index: 999999999;--blur-filter: blur(10px)}.ns-host{position:relative;z-index:var(--z-index)}.ns-host:before{position:absolute;background-color:var(--background);content:"";backdrop-filter:var(--blur-filter);-webkit-backdrop-filter:var(--blur-filter);z-index:calc(var(--z-index) + 1)}body.ns-host{height:100vh}.ns{position:absolute;z-index:calc(var(--z-index) + 2)}.ns-text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);margin-right:var(--proportional-size)}.ns-spinner{display:block;width:var(--proportional-size);height:var(--proportional-size)}.ns-spinner>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.ns-spinner .path{stroke:var(--text-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(r);const o="";function c(){return new DOMParser().parseFromString('<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><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(e,t){t.children.length>0?t.insertBefore(e,t.children.item(0)):t.append(e)}function u(e,t){e==null||e.classList[t](d.nsHostClassName)}function v(e){u(e.getNSElement().parentElement,"remove")}function y(e){e.style.display="flex"}function S(e){e.style.display="none"}function f(e){let t;if(typeof e=="string")t=document.querySelector(e);else{if(e instanceof Node)return e;if(typeof e=="function"){if(t=e(),!(t instanceof Node))return null}else t=null}return t}function k(e){var t;return(t=e==null?void 0:e.classList)==null?void 0:t.contains("ns")}function x(e,t){u(e.parentElement,"remove"),u(t,"add"),p(e,t)}function g(e){const t=f(e);if(!t)return null;const n=t.firstChild;if(n!==null&&k(n)){const b=n.id;return h.getInstance().nsStack.items.find(E=>E.getId()===b)??null}return null}function w(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=Math.random()*16|0;return(e==="x"?t:t&3|8).toString(16)})}const m=class{constructor(){i(this,"id");i(this,"element");this.element=c(),this.element.id=this.id=w()}getId(){return this.id}getNSElement(){return this.element}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}hideText(){return S(this.getNSTextElement()),this}setText(t){return this.getNSTextElement().innerText=t,t.length>0?this.showText():this.hideText(),this}showText(){return y(this.getNSTextElement()),this}remove(){var t;this.element&&((t=this.element.parentElement)==null||t.removeChild(this.element),delete this.element)}};let d=m;i(d,"nsClassName","ns"),i(d,"nsHostClassName",m.nsClassName+"-host");class N{constructor(){i(this,"_items");this._items=[]}get items(){return this._items}push(t){this._items.push(t)}pop(){return this._items.pop()}peek(){return this._items[this._items.length-1]}isEmpty(){return this._items.length===0}size(){return this._items.length}clear(){this._items=[]}}const s=class{constructor(){i(this,"nsStack");this.nsStack=new N}findIndex(t){return this.nsStack.items.findIndex(t)}find(t){return this.nsStack.items.find(t)}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(t){const n=new d;return n.setText(t||""),this.nsStack.push(n),n}cleanAndRemove(t){return v(t),t.remove(),t.getId()}stackDelete(t){let n=this.findIndex(a=>a.getId()===t.getId());return n<0?null:(this.nsStack.items.splice(n,1),t.getId())}deleteNS(t){const n=this.find(t);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(t){let n=g(document.body);return n||(n=this.createNS(),x(n.getNSElement(),document.body)),n.setText(t||""),n.getId()}showInside(t,n){const a=f(t);if(a){let l=g(a);return l||(l=this.createNS()),l.setText(n||""),x(l.getNSElement(),a),l.getId()}return null}hideAll(){this.nsStack.items.forEach(t=>{this.cleanAndRemove(t)}),this.nsStack.clear()}hide(){const t=this.nsStack.pop();return t?this.cleanAndRemove(t):null}hideId(t){return this.deleteNS(n=>n.getId()===t)}hideInside(t){const n=f(t),a=l=>l.getNSElement().parentElement===n;return n?this.deleteNS(a):null}};let h=s;i(h,"WindowAccessorKey","ns"),i(h,"instance");try{h.start()}catch(e){console.warn(e)}})();