joopjs 2.0.0

package/dist/ui/index.js

@@ -0,0 +1,811 @@
+'use strict';
+
+// src/events/index.ts
+var JoopSubject = class {
+  _listeners = [];
+  subscribe(listener) {
+    this._listeners.push(listener);
+    return () => {
+      this._listeners = this._listeners.filter((l) => l !== listener);
+    };
+  }
+  next(value) {
+    for (const listener of this._listeners) {
+      listener(value);
+    }
+  }
+  asObservable() {
+    return new JoopObservable((listener) => this.subscribe(listener));
+  }
+};
+var JoopBehaviorSubject = class extends JoopSubject {
+  _value;
+  constructor(initialValue) {
+    super();
+    this._value = initialValue;
+  }
+  getValue() {
+    return this._value;
+  }
+  next(value) {
+    this._value = value;
+    super.next(value);
+  }
+  subscribe(listener) {
+    listener(this._value);
+    return super.subscribe(listener);
+  }
+  asObservable() {
+    return new JoopObservable((listener) => this.subscribe(listener));
+  }
+};
+var JoopObservable = class {
+  constructor(_subscribeFn) {
+    this._subscribeFn = _subscribeFn;
+  }
+  _subscribeFn;
+  subscribe(listener) {
+    return this._subscribeFn(listener);
+  }
+  /** Returns the current value without subscribing (only meaningful for BehaviorSubject-backed observables). */
+  getOnce() {
+    let result;
+    const unsub = this.subscribe((v) => {
+      result = v;
+    });
+    unsub();
+    return result;
+  }
+};
+
+// src/ui/loader.service.ts
+var JoopLoaderService = class {
+  _count = 0;
+  _loading$ = new JoopBehaviorSubject(false);
+  _delayTimer = null;
+  _cfg;
+  constructor(config = {}) {
+    this._cfg = config;
+  }
+  /** Increment loader counter — shows loader when count goes 0 → 1 */
+  show() {
+    this._count++;
+    if (this._count === 1) {
+      if (this._cfg.delayMs && this._cfg.delayMs > 0) {
+        this._delayTimer = setTimeout(() => this._loading$.next(true), this._cfg.delayMs);
+      } else {
+        this._loading$.next(true);
+      }
+    }
+  }
+  /** Decrement loader counter — hides loader when count reaches 0 */
+  hide() {
+    if (this._count > 0) this._count--;
+    if (this._count === 0) {
+      if (this._delayTimer) {
+        clearTimeout(this._delayTimer);
+        this._delayTimer = null;
+      }
+      this._loading$.next(false);
+    }
+  }
+  /** Force-show regardless of count */
+  forceShow() {
+    this._count = Math.max(this._count, 1);
+    this._loading$.next(true);
+  }
+  /** Force-hide and reset counter */
+  reset() {
+    this._count = 0;
+    if (this._delayTimer) {
+      clearTimeout(this._delayTimer);
+      this._delayTimer = null;
+    }
+    this._loading$.next(false);
+  }
+  isLoading() {
+    return this._loading$.getValue();
+  }
+  isLoading$() {
+    return this._loading$.asObservable();
+  }
+  get pendingCount() {
+    return this._count;
+  }
+};
+
+// src/ui/alert.service.ts
+var COLORS = {
+  success: { bg: "#d4edda", border: "#28a745", icon: "\u2713" },
+  error: { bg: "#f8d7da", border: "#dc3545", icon: "\u2715" },
+  warning: { bg: "#fff3cd", border: "#ffc107", icon: "\u26A0" },
+  info: { bg: "#d1ecf1", border: "#17a2b8", icon: "\u2139" }
+};
+var TOAST_CONTAINER_ID = "__joop_toast_container__";
+var OVERLAY_ID = "__joop_dialog_overlay__";
+var JoopAlertService = class {
+  _inline$ = new JoopBehaviorSubject(null);
+  _open$ = new JoopSubject();
+  inline$() {
+    return this._inline$.asObservable();
+  }
+  open$() {
+    return this._open$.asObservable();
+  }
+  showInline(data) {
+    this._inline$.next(data);
+  }
+  hideInline() {
+    this._inline$.next(null);
+  }
+  toast(message, options = {}) {
+    if (typeof document === "undefined") return;
+    const { type = "info", duration = 3e3, position = "bottom", closeable = false } = options;
+    const c = COLORS[type];
+    const container = this._getToastContainer(position);
+    const toast = document.createElement("div");
+    toast.setAttribute("role", "alert");
+    Object.assign(toast.style, {
+      background: c.bg,
+      borderLeft: `4px solid ${c.border}`,
+      padding: "12px 16px",
+      marginBottom: "8px",
+      borderRadius: "4px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+      fontSize: "14px",
+      maxWidth: "320px",
+      opacity: "0",
+      transition: "opacity 0.2s ease",
+      cursor: closeable ? "pointer" : "default"
+    });
+    const icon = document.createElement("span");
+    icon.textContent = c.icon;
+    icon.style.fontWeight = "bold";
+    const text = document.createElement("span");
+    text.textContent = message;
+    text.style.flex = "1";
+    toast.appendChild(icon);
+    toast.appendChild(text);
+    if (closeable) {
+      const btn = document.createElement("button");
+      btn.textContent = "\xD7";
+      Object.assign(btn.style, { background: "none", border: "none", cursor: "pointer", fontSize: "16px", padding: "0 4px" });
+      btn.onclick = () => this._removeToast(toast);
+      toast.appendChild(btn);
+    }
+    container.appendChild(toast);
+    requestAnimationFrame(() => {
+      toast.style.opacity = "1";
+    });
+    if (duration > 0) {
+      setTimeout(() => this._removeToast(toast), duration);
+    }
+    this._open$.next("toast");
+  }
+  dialog(options) {
+    return new Promise((resolve) => {
+      if (typeof document === "undefined") {
+        resolve("close");
+        return;
+      }
+      const { title, message, type = "info", closeable = true, htmlContent = false } = options;
+      const buttons = options.buttons ?? [{ label: "OK", action: "ok", style: "primary" }];
+      const c = COLORS[type];
+      const overlay = document.createElement("div");
+      overlay.id = OVERLAY_ID;
+      Object.assign(overlay.style, {
+        position: "fixed",
+        inset: "0",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: "99999"
+      });
+      const dialog = document.createElement("div");
+      Object.assign(dialog.style, {
+        background: "#fff",
+        borderRadius: "8px",
+        padding: "24px",
+        minWidth: "280px",
+        maxWidth: "480px",
+        boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+        position: "relative"
+      });
+      if (title) {
+        const h = document.createElement("h3");
+        h.textContent = title;
+        Object.assign(h.style, { margin: "0 0 12px", fontSize: "18px", color: c.border });
+        dialog.appendChild(h);
+      }
+      const msg = document.createElement("div");
+      if (htmlContent) {
+        msg.innerHTML = message;
+      } else {
+        msg.textContent = message;
+      }
+      Object.assign(msg.style, { marginBottom: "20px", fontSize: "14px", lineHeight: "1.5" });
+      dialog.appendChild(msg);
+      const btnRow = document.createElement("div");
+      Object.assign(btnRow.style, { display: "flex", gap: "8px", justifyContent: "flex-end" });
+      const finish = (action) => {
+        overlay.remove();
+        resolve(action);
+      };
+      for (const btn of buttons) {
+        const el = document.createElement("button");
+        el.textContent = btn.label;
+        const isPrimary = btn.style === "primary";
+        const isDanger = btn.style === "danger";
+        Object.assign(el.style, {
+          padding: "8px 16px",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "14px",
+          border: "none",
+          background: isDanger ? "#dc3545" : isPrimary ? c.border : "#e9ecef",
+          color: isPrimary || isDanger ? "#fff" : "#333"
+        });
+        el.onclick = () => finish(btn.action);
+        btnRow.appendChild(el);
+      }
+      dialog.appendChild(btnRow);
+      if (closeable) {
+        const closeBtn = document.createElement("button");
+        closeBtn.textContent = "\xD7";
+        Object.assign(closeBtn.style, {
+          position: "absolute",
+          top: "12px",
+          right: "16px",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          fontSize: "20px",
+          color: "#666"
+        });
+        closeBtn.onclick = () => finish("close");
+        overlay.addEventListener("click", (e) => {
+          if (e.target === overlay) finish("close");
+        });
+        dialog.appendChild(closeBtn);
+      }
+      overlay.appendChild(dialog);
+      document.body.appendChild(overlay);
+      this._open$.next("dialog");
+    });
+  }
+  dismiss() {
+    document.getElementById(OVERLAY_ID)?.remove();
+    document.getElementById(TOAST_CONTAINER_ID)?.remove();
+    this._inline$.next(null);
+  }
+  _getToastContainer(position) {
+    const existing = document.getElementById(TOAST_CONTAINER_ID);
+    if (existing) return existing;
+    const container = document.createElement("div");
+    container.id = TOAST_CONTAINER_ID;
+    const top = position.startsWith("top");
+    const right = position.endsWith("right");
+    Object.assign(container.style, {
+      position: "fixed",
+      [top ? "top" : "bottom"]: "16px",
+      [right ? "right" : "left"]: right ? "16px" : "50%",
+      transform: right ? "none" : "translateX(-50%)",
+      zIndex: "99998",
+      display: "flex",
+      flexDirection: top ? "column" : "column-reverse",
+      alignItems: right ? "flex-end" : "center"
+    });
+    document.body.appendChild(container);
+    return container;
+  }
+  _removeToast(el) {
+    el.style.opacity = "0";
+    setTimeout(() => el.remove(), 200);
+  }
+};
+
+// src/ui/pagination.service.ts
+var JoopPaginationService = class {
+  _state$ = new JoopBehaviorSubject(this._compute(1, 10, 0));
+  _compute(page, pageSize, total) {
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const clamped = Math.min(Math.max(1, page), totalPages);
+    const from = total === 0 ? 0 : (clamped - 1) * pageSize + 1;
+    const to = Math.min(clamped * pageSize, total);
+    return { page: clamped, pageSize, total, totalPages, hasPrev: clamped > 1, hasNext: clamped < totalPages, from, to };
+  }
+  _update(patch) {
+    const { page, pageSize, total } = this._state$.getValue();
+    const next = { page, pageSize, total, ...patch };
+    this._state$.next(this._compute(next.page, next.pageSize, next.total));
+  }
+  setTotal(total) {
+    this._update({ total, page: 1 });
+  }
+  setPage(page) {
+    this._update({ page });
+  }
+  setPageSize(size) {
+    this._update({ pageSize: size, page: 1 });
+  }
+  nextPage() {
+    const s = this._state$.getValue();
+    if (s.hasNext) this._update({ page: s.page + 1 });
+  }
+  prevPage() {
+    const s = this._state$.getValue();
+    if (s.hasPrev) this._update({ page: s.page - 1 });
+  }
+  firstPage() {
+    this._update({ page: 1 });
+  }
+  lastPage() {
+    this._update({ page: this._state$.getValue().totalPages });
+  }
+  getState() {
+    return this._state$.getValue();
+  }
+  state$() {
+    return this._state$.asObservable();
+  }
+  /** Returns page numbers for pagination UI — with ellipsis as -1 */
+  getPages(maxVisible = 7) {
+    const { page, totalPages } = this._state$.getValue();
+    if (totalPages <= maxVisible) return Array.from({ length: totalPages }, (_, i) => i + 1);
+    const pages = [];
+    const half = Math.floor(maxVisible / 2);
+    let start = Math.max(2, page - half);
+    let end = Math.min(totalPages - 1, page + half);
+    if (page - half < 2) end = Math.min(totalPages - 1, maxVisible - 1);
+    if (page + half > totalPages - 1) start = Math.max(2, totalPages - maxVisible + 2);
+    pages.push(1);
+    if (start > 2) pages.push(-1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (end < totalPages - 1) pages.push(-1);
+    pages.push(totalPages);
+    return pages;
+  }
+  reset() {
+    this._state$.next(this._compute(1, this._state$.getValue().pageSize, 0));
+  }
+};
+
+// src/ui/print.service.ts
+var JoopPrintService = class {
+  /** Print the current page */
+  print() {
+    window.print();
+  }
+  /** Print a specific element by ID or reference */
+  printElement(elementOrId, options = {}) {
+    const el = typeof elementOrId === "string" ? document.getElementById(elementOrId) : elementOrId;
+    if (!el) return;
+    this.printHtml(el.outerHTML, options);
+  }
+  /** Open a new window with custom HTML and print it */
+  printHtml(html, options = {}) {
+    const win = window.open("", "_blank", "width=800,height=600");
+    if (!win) return;
+    const { styles = "", title = document.title, bodyClass = "" } = options;
+    const defaultStyles = `
+      body { font-family: Arial, sans-serif; font-size: 12pt; margin: 20mm; }
+      @media print { body { margin: 0; } }
+      table { border-collapse: collapse; width: 100%; }
+      th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
+      th { background: #f5f5f5; font-weight: bold; }
+    `;
+    win.document.write(`<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>${title}</title>
+  <style>${defaultStyles}${styles}</style>
+</head>
+<body class="${bodyClass}">${html}</body>
+</html>`);
+    win.document.close();
+    win.focus();
+    setTimeout(() => {
+      win.print();
+      win.close();
+    }, 300);
+  }
+  /** Print a plain-text receipt in a monospace layout */
+  printReceipt(lines, options = {}) {
+    const html = `<pre style="font-family:monospace;font-size:11pt;white-space:pre-wrap">${lines.join("\n")}</pre>`;
+    this.printHtml(html, { ...options, styles: `${options.styles ?? ""}body{margin:10mm;}` });
+  }
+  /** Build a receipt-style text block for printing */
+  buildReceiptText(title, rows, width = 42) {
+    const line = "\u2500".repeat(width);
+    const center = (s) => s.padStart(Math.floor((width + s.length) / 2)).padEnd(width);
+    const row = ([l, v]) => `${l.padEnd(width - v.length - 2)}  ${v}`;
+    return [center(title), line, ...rows.map(row), line];
+  }
+};
+
+// src/ui/a11y.service.ts
+var JoopA11yService = class {
+  _liveRegions = /* @__PURE__ */ new Map();
+  _trapStack = [];
+  _skipLink = null;
+  _focusHandlers = [];
+  _focusListener = null;
+  // ── ARIA Live Regions ────────────────────────────────────────────────────
+  announce(message, politeness = "polite") {
+    const region = this._getOrCreateLiveRegion(politeness);
+    region.textContent = "";
+    setTimeout(() => {
+      region.textContent = message;
+    }, 50);
+  }
+  _getOrCreateLiveRegion(politeness) {
+    if (!this._liveRegions.has(politeness)) {
+      const el = document.createElement("div");
+      el.setAttribute("aria-live", politeness);
+      el.setAttribute("aria-atomic", "true");
+      el.setAttribute("aria-relevant", "additions text");
+      Object.assign(el.style, { position: "absolute", width: "1px", height: "1px", padding: "0", overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: "0" });
+      document.body.appendChild(el);
+      this._liveRegions.set(politeness, el);
+    }
+    return this._liveRegions.get(politeness);
+  }
+  clearAnnouncements() {
+    for (const el of this._liveRegions.values()) el.textContent = "";
+  }
+  // ── Focus Trap ───────────────────────────────────────────────────────────
+  trapFocus(container, opts = {}) {
+    const prev = document.activeElement;
+    const focusable = () => container.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])');
+    const handleKeydown = (e) => {
+      if (e.key !== "Tab") return;
+      const elements = Array.from(focusable());
+      if (!elements.length) {
+        e.preventDefault();
+        return;
+      }
+      const first = elements[0], last = elements[elements.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener("keydown", handleKeydown);
+    const initialEl = opts.initialFocus ? container.querySelector(opts.initialFocus) : focusable()[0];
+    initialEl?.focus();
+    const release = () => {
+      container.removeEventListener("keydown", handleKeydown);
+      if (opts.returnFocusOnDeactivate !== false && prev instanceof HTMLElement) prev.focus();
+    };
+    this._trapStack.push({ el: container, prev, release });
+    return release;
+  }
+  releaseFocus() {
+    const entry = this._trapStack.pop();
+    entry?.release();
+  }
+  releaseAllTraps() {
+    while (this._trapStack.length) this.releaseFocus();
+  }
+  // ── Skip Link ────────────────────────────────────────────────────────────
+  createSkipLink(targetId, label = "Skip to main content") {
+    const link = document.createElement("a");
+    link.href = `#${targetId}`;
+    link.textContent = label;
+    link.className = "joop-skip-link";
+    Object.assign(link.style, {
+      position: "absolute",
+      top: "-9999px",
+      left: "0",
+      zIndex: "9999",
+      padding: "8px 16px",
+      background: "#fff",
+      color: "#000",
+      textDecoration: "underline"
+    });
+    link.addEventListener("focus", () => {
+      link.style.top = "0";
+    });
+    link.addEventListener("blur", () => {
+      link.style.top = "-9999px";
+    });
+    document.body.insertBefore(link, document.body.firstChild);
+    this._skipLink = link;
+    return link;
+  }
+  removeSkipLink() {
+    this._skipLink?.remove();
+    this._skipLink = null;
+  }
+  // ── Keyboard helpers ─────────────────────────────────────────────────────
+  /** Start tracking focus changes */
+  trackFocus() {
+    const handler = (e) => {
+      if (e.target instanceof Element) this._focusHandlers.forEach((h) => h(e.target));
+    };
+    document.addEventListener("focusin", handler);
+    this._focusListener = handler;
+    return () => {
+      document.removeEventListener("focusin", handler);
+      this._focusListener = null;
+    };
+  }
+  onFocusChange(handler) {
+    this._focusHandlers.push(handler);
+    return () => {
+      this._focusHandlers = this._focusHandlers.filter((h) => h !== handler);
+    };
+  }
+  /** Set visible page title + meta description */
+  setPageTitle(title, suffix) {
+    document.title = suffix ? `${title} \u2014 ${suffix}` : title;
+  }
+  /** Make an element visually hidden but accessible */
+  visuallyHide(el) {
+    Object.assign(el.style, { position: "absolute", width: "1px", height: "1px", padding: "0", overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: "0" });
+  }
+  /** Get all focusable elements within a container */
+  getFocusable(container = document.body) {
+    return Array.from(container.querySelectorAll(
+      'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+    ));
+  }
+  /** Check whether an element is visible and not hidden from accessibility */
+  isAccessible(el) {
+    const style = window.getComputedStyle(el);
+    return style.display !== "none" && style.visibility !== "hidden" && el.getAttribute("aria-hidden") !== "true";
+  }
+  destroy() {
+    for (const el of this._liveRegions.values()) el.remove();
+    this._liveRegions.clear();
+    this.releaseAllTraps();
+    this.removeSkipLink();
+    if (this._focusListener) document.removeEventListener("focusin", this._focusListener);
+  }
+};
+
+// src/ui/virtual-scroll.ts
+var JoopVirtualScroll = class {
+  _container = null;
+  _items = [];
+  _renderFn = null;
+  _opts = { itemHeight: 40, overscan: 3 };
+  _scrollListener = null;
+  _rangeHandlers = [];
+  _innerEl = null;
+  _spacerTop = null;
+  _spacerBottom = null;
+  _rendered = [];
+  _lastRange = { start: 0, end: 0, offsetTop: 0 };
+  attach(container, items, renderFn, opts) {
+    this.detach();
+    this._container = container;
+    this._items = items;
+    this._renderFn = renderFn;
+    if (opts) Object.assign(this._opts, opts);
+    container.style.overflow = "auto";
+    container.style.position = "relative";
+    this._spacerTop = _spacer();
+    this._innerEl = document.createElement("div");
+    this._spacerBottom = _spacer();
+    container.appendChild(this._spacerTop);
+    container.appendChild(this._innerEl);
+    container.appendChild(this._spacerBottom);
+    const render = () => this._render();
+    container.addEventListener("scroll", render);
+    this._scrollListener = () => container.removeEventListener("scroll", render);
+    this._render();
+  }
+  detach() {
+    this._scrollListener?.();
+    this._spacerTop?.remove();
+    this._innerEl?.remove();
+    this._spacerBottom?.remove();
+    this._scrollListener = null;
+    this._container = null;
+    this._rendered = [];
+  }
+  updateItems(items) {
+    this._items = items;
+    this._render();
+  }
+  scrollTo(index) {
+    if (!this._container) return;
+    this._container.scrollTop = index * this._opts.itemHeight;
+  }
+  getVisibleRange() {
+    return { ...this._lastRange };
+  }
+  onRangeChange(handler) {
+    this._rangeHandlers.push(handler);
+    return () => {
+      this._rangeHandlers = this._rangeHandlers.filter((h) => h !== handler);
+    };
+  }
+  _render() {
+    if (!this._container || !this._innerEl || !this._spacerTop || !this._spacerBottom || !this._renderFn) return;
+    const scrollTop = this._container.scrollTop;
+    const viewHeight = this._container.clientHeight;
+    const { itemHeight, overscan } = this._opts;
+    const total = this._items.length;
+    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const end = Math.min(total, Math.ceil((scrollTop + viewHeight) / itemHeight) + overscan);
+    this._lastRange = { start, end, offsetTop: start * itemHeight };
+    this._rangeHandlers.forEach((h) => h(this._lastRange));
+    this._spacerTop.style.height = `${start * itemHeight}px`;
+    this._spacerBottom.style.height = `${(total - end) * itemHeight}px`;
+    this._innerEl.innerHTML = "";
+    this._rendered = [];
+    for (let i = start; i < end; i++) {
+      const el = this._renderFn(this._items[i], i);
+      el.style.height = `${itemHeight}px`;
+      this._innerEl.appendChild(el);
+      this._rendered.push(el);
+    }
+  }
+};
+function _spacer() {
+  const el = document.createElement("div");
+  el.style.height = "0";
+  el.style.pointerEvents = "none";
+  return el;
+}
+
+// src/ui/banking-keyboard.ts
+function shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+var JoopBankingKeyboard = class {
+  _container = null;
+  _value = "";
+  _config;
+  _opts;
+  constructor(opts = {}) {
+    this._opts = opts;
+    this._config = {
+      mode: opts.mode ?? "pin",
+      scramble: opts.scramble ?? true,
+      haptic: opts.haptic ?? true,
+      maskInput: opts.maskInput ?? (opts.mode === "amount" ? false : true),
+      maxLength: opts.maxLength,
+      theme: opts.theme ?? "light"
+    };
+  }
+  render(container) {
+    this._container = container;
+    this._container.innerHTML = "";
+    this._container.setAttribute("role", "application");
+    this._container.setAttribute("aria-label", "Secure keyboard");
+    this._container.style.cssText = `
+      display: grid; gap: 8px; padding: 12px;
+      background: ${this._config.theme === "dark" ? "#1a1a2e" : "#f8f9fa"};
+      border-radius: 12px; user-select: none; touch-action: manipulation;
+    `;
+    this._renderDisplay();
+    this._renderKeys();
+  }
+  getValue() {
+    return this._value;
+  }
+  clear() {
+    this._value = "";
+    this._opts.onClear?.();
+    this._opts.onInput?.("");
+    this._refresh();
+  }
+  destroy() {
+    if (this._container) {
+      this._container.innerHTML = "";
+      this._container = null;
+    }
+  }
+  _renderDisplay() {
+    if (!this._container) return;
+    const display = document.createElement("div");
+    const maxLen = this._config.maxLength ?? (this._config.mode === "pin" ? 6 : 16);
+    const dots = this._config.maskInput ? Array.from({ length: maxLen }, (_, i) => `<span style="
+          display:inline-block; width:12px; height:12px; border-radius:50%; margin:0 4px;
+          background:${i < this._value.length ? "#2563eb" : "#d1d5db"};
+          transition:background .15s;
+        "></span>`).join("") : `<span style="font-size:24px;font-weight:700;letter-spacing:4px;color:${this._config.theme === "dark" ? "#fff" : "#111"}">${this._value || "\xA0"}</span>`;
+    display.style.cssText = "text-align:center; padding:12px 0; min-height:40px;";
+    display.innerHTML = dots;
+    this._container.appendChild(display);
+  }
+  _renderKeys() {
+    if (!this._container) return;
+    let digits = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+    if (this._config.scramble) {
+      const numericPart = shuffle(["1", "2", "3", "4", "5", "6", "7", "8", "9"]);
+      digits = [...numericPart, "0"];
+    }
+    const grid = document.createElement("div");
+    grid.style.cssText = "display:grid; grid-template-columns: repeat(3,1fr); gap:8px;";
+    const btnStyle = (bg, color) => `background:${bg}; color:${color}; border:none; border-radius:10px; font-size:22px;
+       font-weight:600; padding:16px; cursor:pointer; transition:opacity .1s;
+       -webkit-tap-highlight-color:transparent;`;
+    const keyColor = this._config.theme === "dark" ? "#2a2a3e" : "#ffffff";
+    const textColor = this._config.theme === "dark" ? "#e2e8f0" : "#1a202c";
+    digits.slice(0, 9).forEach((d) => {
+      const btn = this._makeKey(d, btnStyle(keyColor, textColor));
+      grid.appendChild(btn);
+    });
+    if (this._config.mode === "amount" || this._config.mode === "numeric") {
+      const decBtn = this._makeKey(".", btnStyle(keyColor, textColor));
+      grid.appendChild(decBtn);
+    } else {
+      grid.appendChild(this._makeSpacer());
+    }
+    const zeroBtn = this._makeKey("0", btnStyle(keyColor, textColor));
+    grid.appendChild(zeroBtn);
+    const backBtn = this._makeKey("\u232B", btnStyle("#ef4444", "#fff"));
+    backBtn.setAttribute("aria-label", "Backspace");
+    backBtn.addEventListener("click", () => {
+      this._value = this._value.slice(0, -1);
+      this._opts.onInput?.(this._value);
+      this._refresh();
+    });
+    grid.appendChild(backBtn);
+    this._container.appendChild(grid);
+    const actionRow = document.createElement("div");
+    actionRow.style.cssText = "display:flex; gap:8px; margin-top:4px;";
+    const clearBtn = document.createElement("button");
+    clearBtn.textContent = "Clear";
+    clearBtn.style.cssText = btnStyle("#6b7280", "#fff") + "flex:1; font-size:14px; padding:12px;";
+    clearBtn.addEventListener("click", () => this.clear());
+    const submitBtn = document.createElement("button");
+    submitBtn.textContent = "Submit";
+    submitBtn.style.cssText = btnStyle("#2563eb", "#fff") + "flex:2; font-size:14px; padding:12px;";
+    submitBtn.addEventListener("click", () => {
+      this._opts.onSubmit?.(this._value);
+    });
+    actionRow.appendChild(clearBtn);
+    actionRow.appendChild(submitBtn);
+    this._container.appendChild(actionRow);
+  }
+  _makeKey(label, style) {
+    const btn = document.createElement("button");
+    btn.textContent = label;
+    btn.style.cssText = style;
+    btn.addEventListener("click", () => {
+      const maxLen = this._config.maxLength ?? (this._config.mode === "pin" ? 6 : this._config.mode === "otp" ? 6 : 16);
+      if (this._value.length >= maxLen) return;
+      if (this._config.haptic && navigator.vibrate) navigator.vibrate(10);
+      this._value += label;
+      this._opts.onInput?.(this._value);
+      this._refresh();
+    });
+    return btn;
+  }
+  _makeSpacer() {
+    const el = document.createElement("div");
+    return el;
+  }
+  _refresh() {
+    if (!this._container) return;
+    this.render(this._container);
+  }
+};
+
+exports.JoopA11yService = JoopA11yService;
+exports.JoopAlertService = JoopAlertService;
+exports.JoopBankingKeyboard = JoopBankingKeyboard;
+exports.JoopLoaderService = JoopLoaderService;
+exports.JoopPaginationService = JoopPaginationService;
+exports.JoopPrintService = JoopPrintService;
+exports.JoopVirtualScroll = JoopVirtualScroll;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map