@sv443-network/userutils 7.0.0 → 7.1.0

package/dist/index.js

@@ -1,4 +1,4 @@
-'use strict';
+import { createNanoEvents } from 'nanoevents';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -531,6 +531,475 @@ function getSiblingsFrame(refElement, siblingAmount, refElementAlignment = "cent
     return [...siblings.slice(elemSiblIdx - siblingAmount + Number(includeRef), elemSiblIdx + Number(includeRef))];
   return [];
 }
+var NanoEmitter = class {
+  constructor(options = {}) {
+    __publicField(this, "events", createNanoEvents());
+    __publicField(this, "eventUnsubscribes", []);
+    __publicField(this, "emitterOptions");
+    this.emitterOptions = __spreadValues({
+      publicEmit: false
+    }, options);
+  }
+  /** Subscribes to an event - returns a function that unsubscribes the event listener */
+  on(event, cb) {
+    let unsub;
+    const unsubProxy = () => {
+      if (!unsub)
+        return;
+      unsub();
+      this.eventUnsubscribes = this.eventUnsubscribes.filter((u) => u !== unsub);
+    };
+    unsub = this.events.on(event, cb);
+    this.eventUnsubscribes.push(unsub);
+    return unsubProxy;
+  }
+  /** Subscribes to an event and calls the callback or resolves the Promise only once */
+  once(event, cb) {
+    return new Promise((resolve) => {
+      let unsub;
+      const onceProxy = (...args) => {
+        unsub();
+        cb == null ? void 0 : cb(...args);
+        resolve(args);
+      };
+      unsub = this.on(event, onceProxy);
+    });
+  }
+  /** Emits an event on this instance - Needs `publicEmit` to be set to true in the constructor! */
+  emit(event, ...args) {
+    if (this.emitterOptions.publicEmit) {
+      this.events.emit(event, ...args);
+      return true;
+    }
+    return false;
+  }
+  /** Unsubscribes all event listeners */
+  unsubscribeAll() {
+    for (const unsub of this.eventUnsubscribes)
+      unsub();
+    this.eventUnsubscribes = [];
+  }
+};
+
+// lib/Dialog.ts
+var defaultDialogCss = `.uu-no-select {
+  user-select: none;
+}
+
+.uu-dialog-bg {
+  --uu-dialog-bg: #333333;
+  --uu-dialog-bg-highlight: #252525;
+  --uu-scroll-indicator-bg: rgba(10, 10, 10, 0.7);
+  --uu-dialog-separator-color: #797979;
+  --uu-dialog-border-radius: 10px;
+}
+
+.uu-dialog-bg {
+  display: block;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.uu-dialog {
+  --uu-calc-dialog-height: calc(min(100vh - 40px, var(--uu-dialog-height-max)));
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: calc(min(100% - 60px, var(--uu-dialog-width-max)));
+  border-radius: var(--uu-dialog-border-radius);
+  height: auto;
+  max-height: var(--uu-calc-dialog-height);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 6;
+  color: #fff;
+  background-color: var(--uu-dialog-bg);
+}
+
+.uu-dialog.align-top {
+  top: 0;
+  transform: translate(-50%, 40px);
+}
+
+.uu-dialog.align-bottom {
+  top: 100%;
+  transform: translate(-50%, -100%);
+}
+
+.uu-dialog-body {
+  font-size: 1.5rem;
+  padding: 20px;
+}
+
+.uu-dialog-body.small {
+  padding: 15px;
+}
+
+#uu-dialog-opts {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 30px 0px;
+  overflow-y: auto;
+}
+
+.uu-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  padding: 15px 20px 15px 20px;
+  background-color: var(--uu-dialog-bg);
+  border: 2px solid var(--uu-dialog-separator-color);
+  border-style: none none solid none !important;
+  border-radius: var(--uu-dialog-border-radius) var(--uu-dialog-border-radius) 0px 0px;
+}
+
+.uu-dialog-header.small {
+  padding: 10px 15px;
+  border-style: none none solid none !important;
+}
+
+.uu-dialog-header-pad {
+  content: " ";
+  min-height: 32px;
+}
+
+.uu-dialog-header-pad.small {
+  min-height: 24px;
+}
+
+.uu-dialog-titlecont {
+  display: flex;
+  align-items: center;
+}
+
+.uu-dialog-titlecont-no-title {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.uu-dialog-title {
+  position: relative;
+  display: inline-block;
+  font-size: 22px;
+}
+
+.uu-dialog-close {
+  cursor: pointer;
+}
+
+.uu-dialog-header-img,
+.uu-dialog-close
+{
+  width: 32px;
+  height: 32px;
+}
+
+.uu-dialog-header-img.small,
+.uu-dialog-close.small
+{
+  width: 24px;
+  height: 24px;
+}
+
+.uu-dialog-footer {
+  font-size: 17px;
+  text-decoration: underline;
+}
+
+.uu-dialog-footer.hidden {
+  display: none;
+}
+
+.uu-dialog-footer-cont {
+  margin-top: 6px;
+  padding: 15px 20px;
+  background: var(--uu-dialog-bg);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--uu-dialog-bg) 30%, var(--uu-dialog-bg) 100%);
+  border: 2px solid var(--uu-dialog-separator-color);
+  border-style: solid none none none !important;
+  border-radius: 0px 0px var(--uu-dialog-border-radius) var(--uu-dialog-border-radius);
+}
+
+.uu-dialog-footer-buttons-cont button:not(:last-of-type) {
+  margin-right: 15px;
+}`;
+var currentDialogId = null;
+var openDialogs = [];
+var defaultStrings = {
+  closeDialogTooltip: "Click to close the dialog"
+};
+var Dialog = class _Dialog extends NanoEmitter {
+  constructor(options) {
+    super();
+    /** Options passed to the dialog in the constructor */
+    __publicField(this, "options");
+    /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
+    __publicField(this, "id");
+    /** Strings used in the dialog (used for translations) */
+    __publicField(this, "strings");
+    __publicField(this, "dialogOpen", false);
+    __publicField(this, "dialogMounted", false);
+    const _a = options, { strings } = _a, opts = __objRest(_a, ["strings"]);
+    this.strings = __spreadValues(__spreadValues({}, defaultStrings), strings != null ? strings : {});
+    this.options = __spreadValues({
+      closeOnBgClick: true,
+      closeOnEscPress: true,
+      destroyOnClose: false,
+      unmountOnClose: true,
+      removeListenersOnDestroy: true,
+      smallHeader: false,
+      verticalAlign: "center",
+      dialogCss: defaultDialogCss
+    }, opts);
+    this.id = opts.id;
+  }
+  //#region public
+  /** Call after DOMContentLoaded to pre-render the dialog and invisibly mount it in the DOM */
+  mount() {
+    return __async(this, null, function* () {
+      if (this.dialogMounted)
+        return;
+      this.dialogMounted = true;
+      if (!document.querySelector("style.uu-dialog-css"))
+        addGlobalStyle(this.options.dialogCss).classList.add("uu-dialog-css");
+      const bgElem = document.createElement("div");
+      bgElem.id = `uu-${this.id}-dialog-bg`;
+      bgElem.classList.add("uu-dialog-bg");
+      if (this.options.closeOnBgClick)
+        bgElem.ariaLabel = bgElem.title = this.getString("closeDialogTooltip");
+      bgElem.style.setProperty("--uu-dialog-width-max", `${this.options.width}px`);
+      bgElem.style.setProperty("--uu-dialog-height-max", `${this.options.height}px`);
+      bgElem.style.visibility = "hidden";
+      bgElem.style.display = "none";
+      bgElem.inert = true;
+      bgElem.appendChild(yield this.getDialogContent());
+      document.body.appendChild(bgElem);
+      this.attachListeners(bgElem);
+      this.events.emit("render");
+      return bgElem;
+    });
+  }
+  /** Closes the dialog and clears all its contents (unmounts elements from the DOM) in preparation for a new rendering call */
+  unmount() {
+    var _a;
+    this.close();
+    this.dialogMounted = false;
+    const clearSelectors = [
+      `#uu-${this.id}-dialog-bg`,
+      `#uu-style-dialog-${this.id}`
+    ];
+    for (const sel of clearSelectors)
+      (_a = document.querySelector(sel)) == null ? void 0 : _a.remove();
+    this.events.emit("clear");
+  }
+  /** Clears the DOM of the dialog and then renders it again */
+  remount() {
+    return __async(this, null, function* () {
+      this.unmount();
+      yield this.mount();
+    });
+  }
+  /**
+   * Opens the dialog - also mounts it if it hasn't been mounted yet  
+   * Prevents default action and immediate propagation of the passed event
+   */
+  open(e) {
+    return __async(this, null, function* () {
+      var _a;
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopImmediatePropagation();
+      if (this.isOpen())
+        return;
+      this.dialogOpen = true;
+      if (openDialogs.includes(this.id))
+        throw new Error(`A dialog with the same ID of '${this.id}' already exists and is open!`);
+      if (!this.isMounted())
+        yield this.mount();
+      const dialogBg = document.querySelector(`#uu-${this.id}-dialog-bg`);
+      if (!dialogBg)
+        return console.warn(`Couldn't find background element for dialog with ID '${this.id}'`);
+      dialogBg.style.visibility = "visible";
+      dialogBg.style.display = "block";
+      dialogBg.inert = false;
+      currentDialogId = this.id;
+      openDialogs.unshift(this.id);
+      for (const dialogId of openDialogs)
+        if (dialogId !== this.id)
+          (_a = document.querySelector(`#uu-${dialogId}-dialog-bg`)) == null ? void 0 : _a.setAttribute("inert", "true");
+      document.body.classList.remove("uu-no-select");
+      document.body.setAttribute("inert", "true");
+      this.events.emit("open");
+      return dialogBg;
+    });
+  }
+  /** Closes the dialog - prevents default action and immediate propagation of the passed event */
+  close(e) {
+    var _a, _b;
+    e == null ? void 0 : e.preventDefault();
+    e == null ? void 0 : e.stopImmediatePropagation();
+    if (!this.isOpen())
+      return;
+    this.dialogOpen = false;
+    const dialogBg = document.querySelector(`#uu-${this.id}-dialog-bg`);
+    if (!dialogBg)
+      return console.warn(`Couldn't find background element for dialog with ID '${this.id}'`);
+    dialogBg.style.visibility = "hidden";
+    dialogBg.style.display = "none";
+    dialogBg.inert = true;
+    openDialogs.splice(openDialogs.indexOf(this.id), 1);
+    currentDialogId = (_a = openDialogs[0]) != null ? _a : null;
+    if (currentDialogId)
+      (_b = document.querySelector(`#uu-${currentDialogId}-dialog-bg`)) == null ? void 0 : _b.removeAttribute("inert");
+    if (openDialogs.length === 0) {
+      document.body.classList.add("uu-no-select");
+      document.body.removeAttribute("inert");
+    }
+    this.events.emit("close");
+    if (this.options.destroyOnClose)
+      this.destroy();
+    else if (this.options.unmountOnClose)
+      this.unmount();
+  }
+  /** Returns true if the dialog is currently open */
+  isOpen() {
+    return this.dialogOpen;
+  }
+  /** Returns true if the dialog is currently mounted */
+  isMounted() {
+    return this.dialogMounted;
+  }
+  /** Clears the DOM of the dialog and removes all event listeners */
+  destroy() {
+    this.unmount();
+    this.events.emit("destroy");
+    this.options.removeListenersOnDestroy && this.unsubscribeAll();
+  }
+  //#region static
+  /** Returns the ID of the top-most dialog (the dialog that has been opened last) */
+  static getCurrentDialogId() {
+    return currentDialogId;
+  }
+  /** Returns the IDs of all currently open dialogs, top-most first */
+  static getOpenDialogs() {
+    return openDialogs;
+  }
+  //#region protected
+  getString(key) {
+    var _a;
+    return (_a = this.strings[key]) != null ? _a : defaultStrings[key];
+  }
+  /** Called once to attach all generic event listeners */
+  attachListeners(bgElem) {
+    if (this.options.closeOnBgClick) {
+      bgElem.addEventListener("click", (e) => {
+        var _a;
+        if (this.isOpen() && ((_a = e.target) == null ? void 0 : _a.id) === `uu-${this.id}-dialog-bg`)
+          this.close(e);
+      });
+    }
+    if (this.options.closeOnEscPress) {
+      document.body.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && this.isOpen() && _Dialog.getCurrentDialogId() === this.id)
+          this.close(e);
+      });
+    }
+  }
+  //#region protected
+  /**
+   * Adds generic, accessible interaction listeners to the passed element.  
+   * All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
+   * @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
+   */
+  onInteraction(elem, listener, listenerOptions) {
+    const _a = listenerOptions != null ? listenerOptions : {}, { preventDefault = true, stopPropagation = true } = _a, listenerOpts = __objRest(_a, ["preventDefault", "stopPropagation"]);
+    const interactionKeys = ["Enter", " ", "Space"];
+    const proxListener = (e) => {
+      if (e instanceof KeyboardEvent) {
+        if (interactionKeys.includes(e.key)) {
+          preventDefault && e.preventDefault();
+          stopPropagation && e.stopPropagation();
+        } else
+          return;
+      } else if (e instanceof MouseEvent) {
+        preventDefault && e.preventDefault();
+        stopPropagation && e.stopPropagation();
+      }
+      (listenerOpts == null ? void 0 : listenerOpts.once) && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOpts);
+      (listenerOpts == null ? void 0 : listenerOpts.once) && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOpts);
+      listener(e);
+    };
+    elem.addEventListener("click", proxListener, listenerOpts);
+    elem.addEventListener("keydown", proxListener, listenerOpts);
+  }
+  /** Returns the dialog content element and all its children */
+  getDialogContent() {
+    return __async(this, null, function* () {
+      var _a, _b, _c, _d;
+      const header = (_b = (_a = this.options).renderHeader) == null ? void 0 : _b.call(_a);
+      const footer = (_d = (_c = this.options).renderFooter) == null ? void 0 : _d.call(_c);
+      const dialogWrapperEl = document.createElement("div");
+      dialogWrapperEl.id = `uu-${this.id}-dialog`;
+      dialogWrapperEl.classList.add("uu-dialog");
+      dialogWrapperEl.ariaLabel = dialogWrapperEl.title = "";
+      dialogWrapperEl.role = "dialog";
+      dialogWrapperEl.setAttribute("aria-labelledby", `uu-${this.id}-dialog-title`);
+      dialogWrapperEl.setAttribute("aria-describedby", `uu-${this.id}-dialog-body`);
+      if (this.options.verticalAlign !== "center")
+        dialogWrapperEl.classList.add(`align-${this.options.verticalAlign}`);
+      const headerWrapperEl = document.createElement("div");
+      headerWrapperEl.classList.add("uu-dialog-header");
+      this.options.small && headerWrapperEl.classList.add("small");
+      if (header) {
+        const headerTitleWrapperEl = document.createElement("div");
+        headerTitleWrapperEl.id = `uu-${this.id}-dialog-title`;
+        headerTitleWrapperEl.classList.add("uu-dialog-title-wrapper");
+        headerTitleWrapperEl.role = "heading";
+        headerTitleWrapperEl.ariaLevel = "1";
+        headerTitleWrapperEl.appendChild(header instanceof Promise ? yield header : header);
+        headerWrapperEl.appendChild(headerTitleWrapperEl);
+      } else {
+        const padEl = document.createElement("div");
+        padEl.classList.add("uu-dialog-header-pad", this.options.small ? "small" : "");
+        headerWrapperEl.appendChild(padEl);
+      }
+      if (this.options.renderCloseBtn) {
+        const closeBtnEl = yield this.options.renderCloseBtn();
+        closeBtnEl.classList.add("uu-dialog-close");
+        this.options.small && closeBtnEl.classList.add("small");
+        closeBtnEl.tabIndex = 0;
+        if (closeBtnEl.hasAttribute("alt"))
+          closeBtnEl.setAttribute("alt", this.getString("closeDialogTooltip"));
+        closeBtnEl.title = closeBtnEl.ariaLabel = this.getString("closeDialogTooltip");
+        this.onInteraction(closeBtnEl, () => this.close());
+        headerWrapperEl.appendChild(closeBtnEl);
+      }
+      dialogWrapperEl.appendChild(headerWrapperEl);
+      const dialogBodyElem = document.createElement("div");
+      dialogBodyElem.id = `uu-${this.id}-dialog-body`;
+      dialogBodyElem.classList.add("uu-dialog-body");
+      this.options.small && dialogBodyElem.classList.add("small");
+      const body = this.options.renderBody();
+      dialogBodyElem.appendChild(body instanceof Promise ? yield body : body);
+      dialogWrapperEl.appendChild(dialogBodyElem);
+      if (footer) {
+        const footerWrapper = document.createElement("div");
+        footerWrapper.classList.add("uu-dialog-footer-cont");
+        dialogWrapperEl.appendChild(footerWrapper);
+        footerWrapper.appendChild(footer instanceof Promise ? yield footer : footer);
+      }
+      return dialogWrapperEl;
+    });
+  }
+};
 
 // lib/misc.ts
 function autoPlural(word, num) {
@@ -843,33 +1312,4 @@ tr.getLanguage = () => {
   return curLang;
 };
 
-exports.DataStore = DataStore;
-exports.DataStoreSerializer = DataStoreSerializer;
-exports.SelectorObserver = SelectorObserver;
-exports.addGlobalStyle = addGlobalStyle;
-exports.addParent = addParent;
-exports.autoPlural = autoPlural;
-exports.clamp = clamp;
-exports.compress = compress;
-exports.computeHash = computeHash;
-exports.debounce = debounce;
-exports.decompress = decompress;
-exports.fetchAdvanced = fetchAdvanced;
-exports.getSiblingsFrame = getSiblingsFrame;
-exports.getUnsafeWindow = getUnsafeWindow;
-exports.insertValues = insertValues;
-exports.interceptEvent = interceptEvent;
-exports.interceptWindowEvent = interceptWindowEvent;
-exports.isScrollable = isScrollable;
-exports.mapRange = mapRange;
-exports.observeElementProp = observeElementProp;
-exports.openInNewTab = openInNewTab;
-exports.pauseFor = pauseFor;
-exports.preloadImages = preloadImages;
-exports.randRange = randRange;
-exports.randomId = randomId;
-exports.randomItem = randomItem;
-exports.randomItemIndex = randomItemIndex;
-exports.randomizeArray = randomizeArray;
-exports.takeRandomItem = takeRandomItem;
-exports.tr = tr;
+export { DataStore, DataStoreSerializer, Dialog, NanoEmitter, SelectorObserver, addGlobalStyle, addParent, autoPlural, clamp, compress, computeHash, currentDialogId, debounce, decompress, defaultDialogCss, defaultStrings, fetchAdvanced, getSiblingsFrame, getUnsafeWindow, insertValues, interceptEvent, interceptWindowEvent, isScrollable, mapRange, observeElementProp, openDialogs, openInNewTab, pauseFor, preloadImages, randRange, randomId, randomItem, randomItemIndex, randomizeArray, takeRandomItem, tr };

package/dist/lib/Dialog.d.ts

@@ -0,0 +1,131 @@
+import { NanoEmitter } from "./NanoEmitter.js";
+export declare const defaultDialogCss = ".uu-no-select {\n  user-select: none;\n}\n\n.uu-dialog-bg {\n  --uu-dialog-bg: #333333;\n  --uu-dialog-bg-highlight: #252525;\n  --uu-scroll-indicator-bg: rgba(10, 10, 10, 0.7);\n  --uu-dialog-separator-color: #797979;\n  --uu-dialog-border-radius: 10px;\n}\n\n.uu-dialog-bg {\n  display: block;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n.uu-dialog {\n  --uu-calc-dialog-height: calc(min(100vh - 40px, var(--uu-dialog-height-max)));\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  width: calc(min(100% - 60px, var(--uu-dialog-width-max)));\n  border-radius: var(--uu-dialog-border-radius);\n  height: auto;\n  max-height: var(--uu-calc-dialog-height);\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 6;\n  color: #fff;\n  background-color: var(--uu-dialog-bg);\n}\n\n.uu-dialog.align-top {\n  top: 0;\n  transform: translate(-50%, 40px);\n}\n\n.uu-dialog.align-bottom {\n  top: 100%;\n  transform: translate(-50%, -100%);\n}\n\n.uu-dialog-body {\n  font-size: 1.5rem;\n  padding: 20px;\n}\n\n.uu-dialog-body.small {\n  padding: 15px;\n}\n\n#uu-dialog-opts {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 30px 0px;\n  overflow-y: auto;\n}\n\n.uu-dialog-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 6px;\n  padding: 15px 20px 15px 20px;\n  background-color: var(--uu-dialog-bg);\n  border: 2px solid var(--uu-dialog-separator-color);\n  border-style: none none solid none !important;\n  border-radius: var(--uu-dialog-border-radius) var(--uu-dialog-border-radius) 0px 0px;\n}\n\n.uu-dialog-header.small {\n  padding: 10px 15px;\n  border-style: none none solid none !important;\n}\n\n.uu-dialog-header-pad {\n  content: \" \";\n  min-height: 32px;\n}\n\n.uu-dialog-header-pad.small {\n  min-height: 24px;\n}\n\n.uu-dialog-titlecont {\n  display: flex;\n  align-items: center;\n}\n\n.uu-dialog-titlecont-no-title {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.uu-dialog-title {\n  position: relative;\n  display: inline-block;\n  font-size: 22px;\n}\n\n.uu-dialog-close {\n  cursor: pointer;\n}\n\n.uu-dialog-header-img,\n.uu-dialog-close\n{\n  width: 32px;\n  height: 32px;\n}\n\n.uu-dialog-header-img.small,\n.uu-dialog-close.small\n{\n  width: 24px;\n  height: 24px;\n}\n\n.uu-dialog-footer {\n  font-size: 17px;\n  text-decoration: underline;\n}\n\n.uu-dialog-footer.hidden {\n  display: none;\n}\n\n.uu-dialog-footer-cont {\n  margin-top: 6px;\n  padding: 15px 20px;\n  background: var(--uu-dialog-bg);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--uu-dialog-bg) 30%, var(--uu-dialog-bg) 100%);\n  border: 2px solid var(--uu-dialog-separator-color);\n  border-style: solid none none none !important;\n  border-radius: 0px 0px var(--uu-dialog-border-radius) var(--uu-dialog-border-radius);\n}\n\n.uu-dialog-footer-buttons-cont button:not(:last-of-type) {\n  margin-right: 15px;\n}";
+/** ID of the last opened (top-most) dialog */
+export declare let currentDialogId: string | null;
+/** IDs of all currently open dialogs, top-most first */
+export declare const openDialogs: string[];
+export declare const defaultStrings: {
+    closeDialogTooltip: string;
+};
+/** Options passed to the Dialog constructor */
+export interface DialogOptions {
+    /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
+    id: string;
+    /** Target and max width of the dialog in pixels */
+    width: number;
+    /** Target and max height of the dialog in pixels */
+    height: number;
+    /** Whether the dialog should close when the background is clicked - defaults to true */
+    closeOnBgClick?: boolean;
+    /** Whether the dialog should close when the escape key is pressed - defaults to true */
+    closeOnEscPress?: boolean;
+    /** Whether the dialog should be destroyed when it's closed - defaults to false */
+    destroyOnClose?: boolean;
+    /** Whether the dialog should be unmounted when it's closed - defaults to true - superseded by destroyOnClose */
+    unmountOnClose?: boolean;
+    /** Whether all listeners should be removed when the dialog is destroyed - defaults to true */
+    removeListenersOnDestroy?: boolean;
+    /** Whether the dialog should have a smaller overall appearance - defaults to false */
+    small?: boolean;
+    /** Where to align or anchor the dialog vertically - defaults to "center" */
+    verticalAlign?: "top" | "center" | "bottom";
+    /** Strings used in the dialog (used for translations) - defaults to the default English strings */
+    strings?: Partial<typeof defaultStrings>;
+    /** CSS to apply to the dialog - defaults to the {@linkcode defaultDialogCss} */
+    dialogCss?: string;
+    /** Called to render the body of the dialog */
+    renderBody: () => HTMLElement | Promise<HTMLElement>;
+    /** Called to render the header of the dialog - leave undefined for a blank header */
+    renderHeader?: () => HTMLElement | Promise<HTMLElement>;
+    /** Called to render the footer of the dialog - leave undefined for no footer */
+    renderFooter?: () => HTMLElement | Promise<HTMLElement>;
+    /** Called to render the close button of the dialog - leave undefined for no close button */
+    renderCloseBtn?: () => HTMLElement | Promise<HTMLElement>;
+}
+/** Creates and manages a modal dialog element */
+export declare class Dialog extends NanoEmitter<{
+    /** Emitted just **after** the dialog is closed */
+    close: () => void;
+    /** Emitted just **after** the dialog is opened */
+    open: () => void;
+    /** Emitted just **after** the dialog contents are rendered */
+    render: () => void;
+    /** Emitted just **after** the dialog contents are cleared */
+    clear: () => void;
+    /** Emitted just **after** the dialog is destroyed and **before** all listeners are removed */
+    destroy: () => void;
+}> {
+    /** Options passed to the dialog in the constructor */
+    readonly options: {
+        /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
+        id: string;
+        /** Target and max width of the dialog in pixels */
+        width: number;
+        /** Target and max height of the dialog in pixels */
+        height: number;
+        closeOnBgClick: boolean;
+        closeOnEscPress: boolean;
+        destroyOnClose: boolean;
+        unmountOnClose: boolean;
+        removeListenersOnDestroy: boolean;
+        /** Whether the dialog should have a smaller overall appearance - defaults to false */
+        small?: boolean | undefined;
+        verticalAlign: string;
+        dialogCss: string;
+        /** Called to render the body of the dialog */
+        renderBody: () => HTMLElement | Promise<HTMLElement>;
+        /** Called to render the header of the dialog - leave undefined for a blank header */
+        renderHeader?: (() => HTMLElement | Promise<HTMLElement>) | undefined;
+        /** Called to render the footer of the dialog - leave undefined for no footer */
+        renderFooter?: (() => HTMLElement | Promise<HTMLElement>) | undefined;
+        /** Called to render the close button of the dialog - leave undefined for no close button */
+        renderCloseBtn?: (() => HTMLElement | Promise<HTMLElement>) | undefined;
+        smallHeader: boolean;
+    };
+    /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
+    readonly id: string;
+    /** Strings used in the dialog (used for translations) */
+    strings: {
+        closeDialogTooltip: string;
+    };
+    protected dialogOpen: boolean;
+    protected dialogMounted: boolean;
+    constructor(options: DialogOptions);
+    /** Call after DOMContentLoaded to pre-render the dialog and invisibly mount it in the DOM */
+    mount(): Promise<HTMLDivElement | undefined>;
+    /** Closes the dialog and clears all its contents (unmounts elements from the DOM) in preparation for a new rendering call */
+    unmount(): void;
+    /** Clears the DOM of the dialog and then renders it again */
+    remount(): Promise<void>;
+    /**
+     * Opens the dialog - also mounts it if it hasn't been mounted yet
+     * Prevents default action and immediate propagation of the passed event
+     */
+    open(e?: MouseEvent | KeyboardEvent): Promise<void | HTMLElement>;
+    /** Closes the dialog - prevents default action and immediate propagation of the passed event */
+    close(e?: MouseEvent | KeyboardEvent): void;
+    /** Returns true if the dialog is currently open */
+    isOpen(): boolean;
+    /** Returns true if the dialog is currently mounted */
+    isMounted(): boolean;
+    /** Clears the DOM of the dialog and removes all event listeners */
+    destroy(): void;
+    /** Returns the ID of the top-most dialog (the dialog that has been opened last) */
+    static getCurrentDialogId(): string | null;
+    /** Returns the IDs of all currently open dialogs, top-most first */
+    static getOpenDialogs(): string[];
+    protected getString(key: keyof typeof defaultStrings): string;
+    /** Called once to attach all generic event listeners */
+    protected attachListeners(bgElem: HTMLElement): void;
+    /**
+     * Adds generic, accessible interaction listeners to the passed element.
+     * All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
+     * @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
+     */
+    protected onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: AddEventListenerOptions & {
+        preventDefault?: boolean;
+        stopPropagation?: boolean;
+    }): void;
+    /** Returns the dialog content element and all its children */
+    protected getDialogContent(): Promise<HTMLDivElement>;
+}

package/dist/lib/NanoEmitter.d.ts

@@ -0,0 +1,20 @@
+import { type DefaultEvents, type EventsMap, type Unsubscribe } from "nanoevents";
+export interface NanoEmitterOptions {
+    /** If set to true, allows emitting events through the public method emit() */
+    publicEmit: boolean;
+}
+/** Class that can be extended or instantiated by itself to create an event emitter with helper methods and a strongly typed event map */
+export declare class NanoEmitter<TEvtMap extends EventsMap = DefaultEvents> {
+    protected readonly events: import("nanoevents").Emitter<TEvtMap>;
+    protected eventUnsubscribes: Unsubscribe[];
+    protected emitterOptions: NanoEmitterOptions;
+    constructor(options?: Partial<NanoEmitterOptions>);
+    /** Subscribes to an event - returns a function that unsubscribes the event listener */
+    on<TKey extends keyof TEvtMap>(event: TKey | "_", cb: TEvtMap[TKey]): () => void;
+    /** Subscribes to an event and calls the callback or resolves the Promise only once */
+    once<TKey extends keyof TEvtMap>(event: TKey | "_", cb?: TEvtMap[TKey]): Promise<Parameters<TEvtMap[TKey]>>;
+    /** Emits an event on this instance - Needs `publicEmit` to be set to true in the constructor! */
+    emit<TKey extends keyof TEvtMap>(event: TKey, ...args: Parameters<TEvtMap[TKey]>): boolean;
+    /** Unsubscribes all event listeners */
+    unsubscribeAll(): void;
+}

package/dist/lib/index.d.ts

@@ -1,9 +1,11 @@
 export * from "./array.js";
 export * from "./DataStore.js";
 export * from "./DataStoreSerializer.js";
+export * from "./Dialog.js";
 export * from "./dom.js";
 export * from "./math.js";
 export * from "./misc.js";
+export * from "./NanoEmitter.js";
 export * from "./SelectorObserver.js";
 export * from "./translation.js";
 export * from "./types.js";