@trintel/zooy 1.0.1-beta.0

package/dist/chunks/main-Dp7wHHgP.js

@@ -0,0 +1,2882 @@
+const numericString = "0123456789".split("");
+[...numericString];
+const alphaLower = "abcdefghijklmnopqrstuvwxyz".split(""), alphaUpper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+[...alphaLower, ...alphaUpper, ...numericString];
+(/* @__PURE__ */ new Map()).set("true", !0).set("false", !1);
+const compose = (...n) => (...e) => n.reduce((t, r) => (i) => t(r(i)))(...e), identity = (n) => n, whatType = (n) => typeof n, isDef = (n) => n !== void 0, isUndefined = (n) => n === void 0, isDefAndNotNull = (n) => n != null, isString = (n) => whatType(n) === "string", isNumber = (n) => whatType(n) === "number" && !Number.isNaN(
+  /** @type number */
+  n
+), isArray = (n) => n instanceof Array, reverse = (n) => Array.from(n).reduce((e, t) => [t, ...e], []), toLowerCase = (n) => n.toLowerCase(), toString = (n) => n + "", toNumber = (n) => +n;
+compose(toLowerCase, toString);
+const makeRandomString = () => {
+  let n = 2147483648;
+  return Math.floor(Math.random() * n).toString(36) + Math.abs(Math.floor(Math.random() * n) ^ Date.now()).toString(36);
+}, stripLeadingChar = (n) => (e) => e.startsWith(n) ? e.slice(n.length) : e, join = (n) => (e) => e.join(n);
+compose(join(""), reverse);
+const pathOr = (n, e) => (t) => {
+  const r = e.reduce((i, o) => {
+    try {
+      return i[maybeNumber(o)];
+    } catch {
+      return;
+    }
+  }, t);
+  return r === void 0 ? n : r;
+}, randomId = (n) => {
+  const e = makeRandomString();
+  return n ? e.substr(0, n) : e;
+}, maybeNumber = (n) => {
+  if (n === null || whatType(n) === "string" && n.length > 1 && n.startsWith("0") && !n.startsWith("0."))
+    return n;
+  const e = 1 * n;
+  return e > Number.MAX_SAFE_INTEGER || Number.isNaN(e) ? n : e;
+};
+compose(toNumber, join(""), reverse, toString);
+class EVT extends EventTarget {
+  /**
+   * Set this to true to get some debug in the console.
+   * @type {boolean}
+   * @private
+   */
+  #e = !1;
+  /**
+   * True if this is disposed.
+   * @type {boolean}
+   * @private
+   */
+  #t = !1;
+  /**
+   * A map of listener targets to an object of event: functions
+   * When adding a listener, immediately also create the un-listen functions
+   * and store those in an object keyed with the event.
+   * Store these objects against the target in a map
+   * @type {Map<!EventTarget, !Object<string, !Function>>}
+   * @private
+   */
+  #s = /* @__PURE__ */ new Map();
+  /**
+   * A set of components that are currently listening to this component
+   * @type {!Set<!EventTarget>}
+   * @private
+   */
+  #n = /* @__PURE__ */ new Set();
+  /**
+   * A set of interval timers as defined by setInterval.
+   * Use this to store the timers created particular to this component.
+   * On destruction, these timers will be cleared.
+   * @type {Set<any>}
+   * @private
+   */
+  #r = /* @__PURE__ */ new Set();
+  //--[ Static ]--
+  /**
+   * Creates a CustomEvent with the given type and data payload.
+   * @param {string} event The event type
+   * @param {*} data The data to attach to the event's detail property
+   * @return {!CustomEvent} A new CustomEvent instance
+   */
+  static makeEvent(e, t) {
+    return new CustomEvent(e, { detail: t });
+  }
+  /**
+   * Sets debug mode for this component. When enabled, debug messages
+   * will be logged to the console.
+   * @param {boolean} bool True to enable debug mode, false to disable
+   * @throws {Error} If the value is not a boolean
+   */
+  set debugMode(e) {
+    if (typeof e != "boolean")
+      throw new Error("This must be a boolean");
+    this.#e = e;
+  }
+  get debugMode() {
+    return this.#e;
+  }
+  /**
+   * Returns whether this component has been disposed.
+   * @return {boolean} True if disposed, false otherwise
+   */
+  get disposed() {
+    return this.#t;
+  }
+  /**
+   * Returns the map of targets this component is listening to.
+   * @return {!Map<!EventTarget, !Object<string, !Function>>} Map of targets to their event handlers
+   */
+  get listeningTo() {
+    return this.#s;
+  }
+  get isObservedBy() {
+    return this.#n;
+  }
+  get activeIntervals() {
+    return this.#r;
+  }
+  /**
+   * Logs debug messages to the console if debug mode is enabled.
+   * Automatically prepends the constructor name to the output.
+   * @param {...*} s Arguments to log
+   */
+  debugMe(...e) {
+    this.#e && console.log.apply(null, [this.constructor.name, "DEBUG:", ...e]);
+  }
+  //--[ Listeners and Listening ]--
+  /**
+   * @param {!EventTarget|!EVT} comp
+   */
+  isListenedToBy(e) {
+    this.#n.add(e);
+  }
+  /**
+   * WARNING! DO not use options={passive: true} here. It disallows us to
+   * use preventDefault when we intercept the form, and that leads to a
+   * general inability to POST forms.
+   *
+   * @param {!EventTarget|!EVT|!Node} target
+   * @param {string} event
+   * @param {!Function} action
+   * @param {boolean|!Object} options
+   */
+  listen(e, t, r, i = !1) {
+    e.addEventListener(t, r, i);
+    const o = this.listeningTo.get(e) || {};
+    o[t] = () => e.removeEventListener(t, r, i), this.listeningTo.set(e, o), isDef(e.isListenedToBy) && e.isListenedToBy(this);
+  }
+  /**
+   * Remove self from all components tt are listening to me.
+   */
+  stopBeingListenedTo() {
+    for (const e of this.isObservedBy)
+      e.stopListeningTo(this), this.isObservedBy.delete(e);
+  }
+  /**
+   * Stop listening to all events on target.
+   * @param {!EventTarget|!EVT|!Node|undefined} target
+   * @param {string=} opt_event
+   */
+  stopListeningTo(e, t) {
+    e && this.listeningTo.has(e) && (isDef(e.isObservedBy) && e.isObservedBy.delete(this), isDef(t) ? (Object.entries(this.listeningTo.get(e)).forEach(([r, i]) => {
+      r === t && i();
+    }), Object.keys(this.listeningTo.get(e)).length || this.listeningTo.delete(e)) : (Object.values(this.listeningTo.get(e)).forEach((r) => r()), this.listeningTo.delete(e)));
+  }
+  /**
+   * Removes all the event listeners that is managed by this
+   * component.
+   */
+  removeAllListener() {
+    for (const e of this.listeningTo.keys())
+      this.stopListeningTo(e);
+  }
+  /**
+   * Clears all active intervals created by this component.
+   * Called automatically during disposal to prevent memory leaks.
+   */
+  clearAllIntervals() {
+    for (const e of this.activeIntervals)
+      clearInterval(e), this.activeIntervals.delete(e);
+  }
+  /**
+   * Executes a function repeatedly at a specified interval.
+   * The interval is tracked and will be automatically cleared on disposal.
+   * @param {!Function} f The function to execute on each interval
+   * @param {number} interval The interval in milliseconds
+   */
+  doOnBeat(e, t) {
+    const r = setInterval(e, t);
+    this.activeIntervals.add(r);
+  }
+  /**
+   * Disposes of the component.  Calls `exitDocument`, which is expected to
+   * remove event handlers and clean up the component.  Propagates the call to
+   * the component's children, if any. Removes the component's DOM from the
+   * document unless it was decorated.
+   * @protected
+   */
+  disposeInternal() {
+    this.stopBeingListenedTo(), this.removeAllListener(), this.clearAllIntervals(), this.#t = !0;
+  }
+  /**
+   * Public method to dispose of this component. Calls disposeInternal()
+   * to perform cleanup of event listeners, intervals, and observers.
+   * After calling this method, the component should not be used.
+   */
+  dispose() {
+    this.disposeInternal();
+  }
+}
+class ZooyEventData {
+  constructor(e, t) {
+    this.value_ = e, this.data_ = t || {};
+  }
+  getValue() {
+    return this.value_;
+  }
+  getData() {
+    return this.data_;
+  }
+}
+const UiEventType = {
+  /**
+   * Dispatched after the content from the template is in the DOM
+   * and the in-line scripts from the AJAX call has been eval'd.
+   */
+  COMP: randomId(),
+  COMP_DRAG_START: randomId(),
+  COMP_DRAG_MOVE: randomId(),
+  COMP_DRAG_END: randomId(),
+  PANEL: randomId(),
+  VIEW: randomId(),
+  SPLIT: randomId(),
+  SPLIT_WILL_OPEN: randomId(),
+  SPLIT_DID_OPEN: randomId(),
+  SPLIT_WILL_CLOSE: randomId(),
+  SPLIT_DID_CLOSE: randomId(),
+  SPLIT_TRANSITION_END: randomId(),
+  READY: randomId(),
+  PANEL_MINIMIZE: randomId(),
+  FORM_SUBMIT_SUCCESS: randomId()
+};
+var EN_US = ["second", "minute", "hour", "day", "week", "month", "year"];
+function en_US(n, e) {
+  if (e === 0)
+    return ["just now", "right now"];
+  var t = EN_US[Math.floor(e / 2)];
+  return n > 1 && (t += "s"), [n + " " + t + " ago", "in " + n + " " + t];
+}
+var ZH_CN = ["秒", "分钟", "小时", "天", "周", "个月", "年"];
+function zh_CN(n, e) {
+  if (e === 0)
+    return ["刚刚", "片刻后"];
+  var t = ZH_CN[~~(e / 2)];
+  return [n + " " + t + "前", n + " " + t + "后"];
+}
+var Locales = {}, register = function(n, e) {
+  Locales[n] = e;
+}, getLocale = function(n) {
+  return Locales[n] || Locales.en_US;
+}, SEC_ARRAY = [
+  60,
+  60,
+  24,
+  7,
+  365 / 7 / 12,
+  12
+];
+function toDate(n) {
+  return n instanceof Date ? n : !isNaN(n) || /^\d+$/.test(n) ? new Date(parseInt(n)) : (n = (n || "").trim().replace(/\.\d+/, "").replace(/-/, "/").replace(/-/, "/").replace(/(\d)T(\d)/, "$1 $2").replace(/Z/, " UTC").replace(/([+-]\d\d):?(\d\d)/, " $1$2"), new Date(n));
+}
+function formatDiff(n, e) {
+  var t = n < 0 ? 1 : 0;
+  n = Math.abs(n);
+  for (var r = n, i = 0; n >= SEC_ARRAY[i] && i < SEC_ARRAY.length; i++)
+    n /= SEC_ARRAY[i];
+  return n = Math.floor(n), i *= 2, n > (i === 0 ? 9 : 1) && (i += 1), e(n, i, r)[t].replace("%s", n.toString());
+}
+function diffSec(n, e) {
+  var t = /* @__PURE__ */ new Date();
+  return (+t - +toDate(n)) / 1e3;
+}
+var format = function(n, e, t) {
+  var r = diffSec(n);
+  return formatDiff(r, getLocale(e));
+};
+register("en_US", en_US);
+register("zh_CN", zh_CN);
+const getInputChecked_ = function(n) {
+  return n.checked ? (
+    /** @type {?} */
+    n.value
+  ) : null;
+}, getSelectSingle_ = function(n) {
+  const e = (
+    /** @type {!HTMLSelectElement} */
+    n.selectedIndex
+  );
+  return e >= 0 ? (
+    /** @type {!HTMLSelectElement} */
+    n.options[e].value
+  ) : null;
+}, getSelectMultiple_ = function(n) {
+  const e = [];
+  for (let t, r = 0; t = /** @type {!HTMLSelectElement} */
+  n.options[r]; r++)
+    t.selected && e.push(t.value);
+  return e.length ? e : null;
+}, getValue = function(n) {
+  const e = (
+    /** @type {!HTMLInputElement} */
+    n.type
+  );
+  switch (isString(e) && e.toLowerCase()) {
+    case "checkbox":
+    case "radio":
+      return getInputChecked_(n);
+    case "select-one":
+      return getSelectSingle_(n);
+    case "select-multiple":
+      return getSelectMultiple_(n);
+    default:
+      return n.value !== null && n.value !== void 0 ? n.value : null;
+  }
+}, formToJSON = (n) => [...n].reduce((e, t) => (e[t.name] = t.value, e), {}), replaceNode = (n, e) => {
+  const t = e.parentNode;
+  t && t.replaceChild(n, e);
+}, removeNode = (n) => n && n.parentNode ? n.parentNode.removeChild(n) : null, insertSiblingAfter = (n, e) => {
+  e.parentNode && e.parentNode.insertBefore(n, e.nextSibling);
+}, isInPage = (n) => n === document.body ? !1 : document.body.contains(n), getPos = (n) => [n.offsetLeft, n.offsetTop], randomColour = (n) => [1, 2, 3].map(() => Math.floor(Math.random() * 256) + 1).reduce((e, t) => `${e}${t},`, "rgba(") + `${n || 0.5}`, totalWidth = (n) => {
+  const e = window.getComputedStyle(n), t = n.offsetWidth, r = parseFloat(e.marginLeft) + parseFloat(e.marginRight), i = parseFloat(e.paddingLeft) + parseFloat(e.paddingRight), o = parseFloat(e.borderLeftWidth) + parseFloat(e.borderRightWidth);
+  return t + r - i + o;
+}, totalHeight = (n) => {
+  const e = window.getComputedStyle(n), t = n.offsetHeight, r = parseFloat(e.marginTop) + parseFloat(e.marginBottom), i = parseFloat(e.paddingTop) + parseFloat(e.paddingBottom), o = parseFloat(e.borderTopWidth) + parseFloat(e.borderBottomWidth);
+  return t + r - i + o;
+}, evalScripts = (comp) => (arr) => {
+  arr && Array.from(arr).forEach((s) => {
+    (function() {
+      eval(s.text);
+    }).bind(comp)();
+  });
+}, evalModules = (n) => (e) => {
+  e && Array.from(e).forEach((t) => {
+    (function() {
+      const r = document.createElement("script");
+      r.type = "module", r.textContent = t.textContent;
+      const i = n.getElement(), o = getElDataMap(t).zv_comp_access;
+      o && (i.zvComponent = n, i.classList.add(o)), i.appendChild(r);
+    }).bind(n)();
+  });
+}, splitScripts = (n) => {
+  const t = new DOMParser().parseFromString(n, "text/html");
+  return {
+    html: t.body.firstElementChild,
+    scripts: t.querySelectorAll('script:not([type="module"])'),
+    modules: t.querySelectorAll('script[type="module"]')
+  };
+}, handleTemplateProm = (n) => Promise.resolve(splitScripts(n)), enableClass = (n, e, t) => {
+  t ? n.classList.add(e) : n.classList.remove(e);
+}, toggleClass = (n, e) => {
+  const t = !Array.from(n.classList).includes(e);
+  return enableClass(n, e, t), t;
+}, getElDataMap = (n) => n ? Object.assign({}, n.dataset || {}) : {}, dtFormatter = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+}, dFormatter = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+}, dtf = new Intl.DateTimeFormat("en", {
+  day: "2-digit",
+  month: "short",
+  year: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  // hour12: false
+  hourCycle: "h23"
+}), dateToZooyStdTimeString = (n) => {
+  const [{ value: e }, , { value: t }, , { value: r }, , { value: i }, , { value: o }, , { value: a }, ,] = dtf.formatToParts(n);
+  return `${t} ${e} ${r} ${i}:${o}:${a}`;
+}, parseMomentAgo = (n, e = "both", t = void 0) => {
+  let r = n;
+  isNumber(r) && r < 9466848e5 ? r = r * 1e3 : t && (r = r + t);
+  const i = new Date(r), o = format(i), a = dateToZooyStdTimeString(i);
+  switch (e) {
+    case "time|ago":
+      return `${a}|${o}`;
+    case "ago":
+      return `${o}`;
+    case "datetime":
+    case "time":
+      return `${a}`;
+    case "both":
+    case "ago (time)":
+    default:
+      return `${o} (${a})`;
+  }
+}, parseObfuscated = (n) => {
+  const t = ((i) => (o) => o < i.length - 4)(n);
+  return ((i) => i.split("").map((o, a) => t(a) ? "*" : o).join(""))(n);
+}, parseMap = (/* @__PURE__ */ new Map()).set(void 0, (n, e, t) => identity(n)).set("", (n, e, t) => identity(n)).set("class_update_only", (n, e, t) => identity(n)).set("frac_100", (n, e, t) => Math.round(n * 100 * 100) / 100).set("date_and_time", (n, e, t) => new Date(n).toLocaleString(void 0, dtFormatter)).set("date", (n, e, t) => new Date(n).toLocaleString(void 0, dFormatter)).set("moment_ago", (n, e, t) => parseMomentAgo(n, "both", t.zdd_date_tz || void 0)).set("moment_ago_only", (n, e, t) => parseMomentAgo(n, "ago", t.zdd_date_tz || void 0)).set("moment_ago_datetime", (n, e, t) => parseMomentAgo(n, "datetime", t.zdd_date_tz || void 0)).set("pretty-json", (n, e, t) => JSON.stringify(n, null, 4)).set("obfuscated", (n, e, t) => parseObfuscated(n)).set("linear-progress", (n, e, t) => {
+  const r = toNumber(t.zpmax), i = e.linProg;
+  return r && i && (i.progress = n / r, n = void 0), n;
+}), parseDataPropKvDef = (n) => n.trim().split(",").map((r) => r.trim()).map((r) => {
+  const [i, o] = r.split(":").map((a) => a.trim());
+  return [i, o];
+}).filter(([r, i]) => r !== "" && i !== ""), parseDataProps = (n, e) => {
+  const t = getElDataMap(n);
+  delete n.dataset.zoodatapropkv;
+  const r = t.zoodatapropkv || "";
+  return parseDataPropKvDef(r).forEach(([o, a]) => {
+    n.dataset[o] = pathOr(void 0, a.split("."))(e);
+  }), n;
+}, mapDataToEls = (n, e, t = /* @__PURE__ */ new Map(), r = void 0) => {
+  if (!e)
+    return;
+  const i = new Map([...parseMap, ...t]);
+  [...n.querySelectorAll("[data-zdd],[data-zdd_class_update],[data-zdd_template_loop_index]")].forEach((o) => {
+    const a = getElDataMap(o), p = a.zdd || "", f = a.zdd_parse_as, _ = a.zdd_render_effect || "", g = a.zdd_class_update, v = a.zdd_template_loop_index, c = a.zdd_units || "";
+    let l = pathOr(void 0, p.split("."))(e);
+    if (isDefAndNotNull(l) && (l = i.has(f) ? i.get(f)(l, o, a) : l), v && isNumber(r) && (console.log("loopIndex: ", v, " opt_loopIndex: ", r), v === "zero_indexed" ? o.innerHTML = r : v === "one_indexed" ? o.innerHTML = r + 1 : o.innerHTML = r), g) {
+      const [d, h, u] = g.split(":"), m = pathOr(void 0, d.split("."))(e);
+      if (isDefAndNotNull(m))
+        switch (h) {
+          case "swap": {
+            const E = /\{}/gi, y = u.replace(E, ""), T = u.replace(E, m);
+            o.classList.remove(...[...o.classList].filter((b) => b.includes(y))), o.classList.add(T);
+            break;
+          }
+          case "remove_on_data":
+            o.classList.remove(u);
+            break;
+          case "choice_map":
+            u.split("|").filter((E) => E !== "").forEach((E) => {
+              const [y, T] = E.split(">");
+              y === m + "" ? o.classList.add.apply(o.classList, T.split(".")) : o.classList.remove.apply(o.classList, T.split("."));
+            });
+            break;
+        }
+    }
+    if (f === "templated-array" && isArray(l))
+      if (l.length === 0)
+        o.classList.add("display__none");
+      else {
+        o.classList.remove("display__none"), l = l || [];
+        const d = o.firstElementChild;
+        d.classList.remove("display__none"), o.replaceChildren(...l.map((h, u) => {
+          const m = d.cloneNode(!0), E = parseDataProps(m, h);
+          return mapDataToEls(E, h, void 0, u), E;
+        }));
+      }
+    else if (isDefAndNotNull(l))
+      if (_ === "typewriter") {
+        let d = 0;
+        const h = l + c, u = 5, m = () => {
+          d < h.length && (o.innerHTML += h.charAt(d), d++, setTimeout(m, u));
+        };
+        o.innerHTML = "", m();
+      } else
+        o.innerHTML = l + c;
+  });
+}, domUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  dateToZooyStdTimeString,
+  dtf,
+  enableClass,
+  evalModules,
+  evalScripts,
+  formToJSON,
+  getElDataMap,
+  getPos,
+  getValue,
+  handleTemplateProm,
+  insertSiblingAfter,
+  isInPage,
+  mapDataToEls,
+  parseDataPropKvDef,
+  parseMap,
+  parseMomentAgo,
+  randomColour,
+  removeNode,
+  replaceNode,
+  splitScripts,
+  toggleClass,
+  totalHeight,
+  totalWidth
+}, Symbol.toStringTag, { value: "Module" }));
+class ComponentLibraryRegistry {
+  /**
+   * Internal storage for registered component libraries.
+   * @type {Map<string, {render: Function, cache: Map, config: Object}>}
+   * @private
+   */
+  static #e = /* @__PURE__ */ new Map();
+  /**
+   * Registers a pluggable component library.
+   *
+   * @param {string} name - Library identifier (e.g., 'carbon', 'material')
+   * @param {Object} library - Library configuration object
+   * @param {Function} library.render - Main render function: async function(panel, cache)
+   * @param {Function} [library.dispose] - Optional cleanup function: function(element)
+   * @param {Object} [library.config] - Optional library-specific configuration
+   *
+   * @throws {Error} If library doesn't provide a render function
+   *
+   * @example
+   * ComponentLibraryRegistry.register('carbon', {
+   *   render: async function(panel, cache) {
+   *     // Scan, load, and attach components
+   *   },
+   *   dispose: function(element) {
+   *     // Optional cleanup logic
+   *   },
+   *   config: { version: '2.0' }
+   * });
+   */
+  static register(e, t) {
+    if (!t.render)
+      throw new Error(`Component library '${e}' must provide a render function`);
+    this.#e.set(e, {
+      ...t,
+      // Preserve all library properties (utils, helpers, etc.)
+      dispose: t.dispose || null,
+      // Optional disposal function
+      cache: /* @__PURE__ */ new Map(),
+      // Each library gets its own import cache
+      config: t.config || {}
+    }), console.debug(`[ComponentLibraryRegistry] Registered: ${e}`);
+  }
+  /**
+   * Gets a registered component library by name.
+   *
+   * @param {string} name - Library identifier
+   * @returns {Object} Library object with render, cache, config
+   * @throws {Error} If library is not registered
+   */
+  static get(e) {
+    if (!this.#e.has(e)) {
+      const t = Array.from(this.#e.keys()).join(", ");
+      throw new Error(
+        `Component library '${e}' is not registered. Available: ${t || "none"}`
+      );
+    }
+    return this.#e.get(e);
+  }
+  /**
+   * Checks if a component library is registered.
+   *
+   * @param {string} name - Library identifier
+   * @returns {boolean} True if registered
+   */
+  static has(e) {
+    return this.#e.has(e);
+  }
+  /**
+   * Gets all registered library names.
+   *
+   * @returns {string[]} Array of registered library names
+   */
+  static getRegisteredLibraries() {
+    return Array.from(this.#e.keys());
+  }
+  /**
+   * Gets cache statistics for all registered component libraries.
+   * Useful for debugging and monitoring.
+   *
+   * @returns {Object} Map of library name → cache stats
+   */
+  static getCacheStats() {
+    const e = {};
+    for (const [t, r] of this.#e.entries())
+      e[t] = {
+        cacheSize: r.cache.size,
+        config: r.config
+      };
+    return e;
+  }
+  /**
+   * Clears import caches for all component libraries.
+   * Useful for development/hot-reload scenarios.
+   */
+  static clearAllCaches() {
+    for (const [e, t] of this.#e.entries())
+      t.cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${e}`);
+  }
+  /**
+   * Clears cache for a specific library.
+   *
+   * @param {string} name - Library identifier
+   * @throws {Error} If library is not registered
+   */
+  static clearCache(e) {
+    this.get(e).cache.clear(), console.debug(`[ComponentLibraryRegistry] Cleared cache for: ${e}`);
+  }
+  /**
+   * Unregisters a component library (primarily for testing).
+   *
+   * @param {string} name - Library identifier
+   * @returns {boolean} True if library was unregistered, false if not found
+   */
+  static unregister(e) {
+    return this.#e.delete(e);
+  }
+  /**
+   * Unregisters all component libraries (primarily for testing).
+   */
+  static unregisterAll() {
+    this.#e.clear();
+  }
+}
+const ComponentError = {
+  /**
+   * Error when a method is not supported.
+   */
+  NOT_SUPPORTED: "Method not supported",
+  /**
+   * Error when the given element can not be decorated.
+   */
+  DECORATE_INVALID: "Invalid element to decorate",
+  /**
+   * Error when the component is already rendered and another render attempt is
+   * made.
+   */
+  ALREADY_RENDERED: "Component already rendered",
+  /**
+   * Error when an already disposed component is attempted to be rendered.
+   */
+  ALREADY_DISPOSED: "Component already disposed",
+  /**
+   * Error when an attempt is made to set the parent of a component in a way
+   * that would result in an inconsistent object graph.
+   */
+  PARENT_UNABLE_TO_BE_SET: "Unable to set parent component",
+  /**
+   * Error when an attempt is made to add a child component at an out-of-bounds
+   * index.  We don't support sparse child arrays.
+   */
+  CHILD_INDEX_OUT_OF_BOUNDS: "Child component index out of bounds",
+  /**
+   * Error when an attempt is made to remove a child component from a component
+   * other than its parent.
+   */
+  NOT_OUR_CHILD: "Child is not in parent component",
+  /**
+   * Error when an operation requiring DOM interaction is made when the
+   * component is not in the document
+   */
+  NOT_IN_DOCUMENT: "Operation not supported while component is not in document",
+  /**
+   * Error when an invalid component state is encountered.
+   */
+  STATE_INVALID: "Invalid component state"
+};
+class Component extends EVT {
+  //--[ Static ]--
+  /**
+   * Returns the component event type code used for dispatching component events.
+   * @return {string} The COMP event type
+   */
+  static compEventCode() {
+    return UiEventType.COMP;
+  }
+  /**
+   * Returns the component ready event type code.
+   * @return {string} The READY event type
+   */
+  static compReadyCode() {
+    return UiEventType.READY;
+  }
+  /**
+   * Returns the component error enumeration object.
+   * @return {!Object<string, string>} The ComponentError enum
+   */
+  static compErrors() {
+    return ComponentError;
+  }
+  #e;
+  #t;
+  #s;
+  #n;
+  #r;
+  #o;
+  #i;
+  #a;
+  constructor() {
+    super(), this.#e = () => (
+      /** @type {!HTMLElement} */
+      document.createElement("div")
+    ), this.#t = !1, this.#s = void 0, this.#n = void 0, this.#r = void 0, this.#o = void 0, this.#i = /* @__PURE__ */ new Map(), this.outOfTreeElements = [], this.placeholderDom = void 0, this.#a = () => {
+    };
+  }
+  //--[ Getters and Setters ]--
+  /**
+   * @param {Element|undefined} e
+   */
+  set target(e) {
+    this.#r = e;
+  }
+  /**
+   * @returns {Element|undefined}
+   */
+  get target() {
+    return this.#r;
+  }
+  /**
+   * Sets the model associated with the UI component.
+   * @param {*} m
+   */
+  set model(e) {
+    this.#n = e;
+  }
+  /**
+   * Returns the model associated with the UI component.
+   * @return {*}
+   */
+  get model() {
+    return this.#n;
+  }
+  /**
+   * @param {boolean} bool
+   */
+  set isInDocument(e) {
+    this.#t = e;
+  }
+  /**
+   * @return {boolean}
+   */
+  get isInDocument() {
+    return this.#t;
+  }
+  /**
+   * A function that makes a DOM element.
+   * @param {!function():(!HTMLElement|!Element|!DocumentFragment)} func
+   */
+  set domFunc(e) {
+    this.#e = e;
+  }
+  /**
+   * @param {!Function} func A callback guaranteed to fire after the panels is
+   * ready, and in the document, but before the
+   * {@code UiEventType.READY} event is fired.
+   */
+  set readyFunc(e) {
+    this.#a = e;
+  }
+  //--[ DOM Management ]--
+  /**
+   * Internal method to set the component's root element. Used primarily during
+   * rendering and re-rendering operations.
+   * @param {!Node} frag The DOM node to set as this component's element
+   * @private
+   */
+  setElementInternal_(e) {
+    this.#s = e;
+  }
+  /**
+   * Gets the component's element.
+   * @return {!HTMLElement|undefined} The element
+   *    for the component.
+   */
+  getElement() {
+    return this.#s;
+  }
+  /**
+   * Creates the initial DOM representation for the component.  The default
+   * implementation is to set this.element_ = div.
+   */
+  createDom() {
+    this.#s = this.#e();
+  }
+  /**
+   * Asserts that this component can be rendered asynchronously.
+   * Throws an error if the component has already been disposed.
+   * Used by async rendering methods to validate component state.
+   * @throws {Error} If the component is already disposed
+   */
+  assertCanRenderAsync() {
+    if (this.disposed)
+      throw new Error(ComponentError.ALREADY_DISPOSED);
+  }
+  /**
+   * Renders the component.  If a parent element is supplied, the component's
+   * element will be appended to it.  If there is no optional parent element and
+   * the element doesn't have a parentNode then it will be appended to the
+   * document body.
+   *
+   * If this component has a parent component, and the parent component is
+   * not in the document already, then this will not call `enterDocument`
+   * on this component.
+   *
+   * Throws an Error if the component is already rendered.
+   *
+   * @param {Element=} opt_parentElement Optional parent element to render the
+   *    component into.
+   */
+  render(e) {
+    this.render_(e);
+  }
+  /**
+   * Renders the component.  If a parent element is supplied, the component's
+   * element will be appended to it.  If there is no optional parent element and
+   * the element doesn't have a parentNode then it will be appended to the
+   * document body.
+   *
+   * If this component has a parent component, and the parent component is
+   * not in the document already, then this will not call `enterDocument`
+   * on this component.
+   *
+   * Throws an Error if the component is already rendered.
+   *
+   * @param {Element=} opt_target Optional parent element to render the
+   *    component into.
+   * @private
+   */
+  render_(e) {
+    if (this.disposed)
+      throw new Error(ComponentError.ALREADY_DISPOSED);
+    if (this.isInDocument)
+      throw new Error(ComponentError.ALREADY_RENDERED);
+    this.#s || this.createDom();
+    const t = (
+      /** @type {!Node} */
+      this.#s
+    );
+    e && (this.#r = e), this.placeholderDom && removeNode(this.placeholderDom), this.#r ? isInPage(t) || this.#r.insertBefore(t, null) : isInPage(
+      /** @type {!Node} */
+      t
+    ) || document.body.appendChild(t), (!this.#o || this.#o.isInDocument) && this.enterDocument();
+  }
+  //--[ Life-cycle ]--
+  /**
+   * @param {Node} el
+   * @param {Node} targetParent
+   */
+  hoist(e, t = void 0) {
+    t || (t = document.querySelector("body")), t.appendChild(e), this.outOfTreeElements.push(e);
+  }
+  /**
+   * Executes the beforeReady callback function if one was set.
+   * Called automatically during enterDocument, before the READY event is dispatched.
+   * Allows components to perform final setup operations once they're in the DOM.
+   */
+  executeBeforeReady() {
+    this.#a();
+  }
+  /**
+   * Called when the component's element is known to be in the document. Anything
+   * using document.getElementById etc. should be done at this stage.
+   *
+   * If the component contains child components, this call is propagated to its
+   * children.
+   */
+  enterDocument() {
+    this.disposed ? removeNode(this.getElement()) : (this.isInDocument = !0, [...this.#i.values()].forEach((e) => {
+      !e.isInDocument && e.getElement() && e.enterDocument();
+    }), this.executeBeforeReady(), this.dispatchCompEvent(UiEventType.READY));
+  }
+  /**
+   * Called by dispose to clean up the elements and listeners created by a
+   * component, or by a parent component/application who has removed the
+   * component from the document but wants to reuse it later.
+   *
+   * If the component contains child components, this call is propagated to its
+   * children.
+   *
+   * It should be possible for the component to be rendered again once this
+   * method has been called.
+   */
+  exitDocument() {
+    [...this.#i.values()].forEach((e) => {
+      e.isInDocument && e.exitDocument();
+    }), this.stopBeingListenedTo(), this.removeAllListener(), this.isInDocument = !1, removeNode(this.getElement()), this.placeholderDom && removeNode(this.placeholderDom);
+  }
+  /**
+   * Disposes of the component.  Calls `exitDocument`, which is expected to
+   * remove event handlers and clean up the component.  Propagates the call to
+   * the component's children, if any. Removes the component's DOM from the
+   * document unless it was decorated.
+   * @protected
+   */
+  disposeInternal() {
+    this.isInDocument && this.exitDocument(), this.#i && [...this.#i.values()].forEach((e) => e.disposeInternal()), this.outOfTreeElements.forEach(removeNode), this.#s && removeNode(this.#s), this.placeholderDom && removeNode(this.placeholderDom), this.#i = null, this.#s = void 0, this.#n = null, this.#o = null, super.disposeInternal();
+  }
+  /**
+   * Disposes of the component and performs cleanup. Aborts any pending async
+   * operations, asks registered component libraries to cleanup their components,
+   * and calls the parent dispose method.
+   * After calling this method, the component should not be used.
+   */
+  dispose() {
+    this.abortController && this.abortController.abort();
+    const e = this.getElement();
+    if (e)
+      for (const t of ComponentLibraryRegistry.getRegisteredLibraries())
+        try {
+          const r = ComponentLibraryRegistry.get(t);
+          r.dispose && r.dispose(e);
+        } catch (r) {
+          console.debug(`[${t}] Cleanup error during component disposal (non-critical):`, r);
+        }
+    super.dispose();
+  }
+  //--[ Built in events ]--
+  /**
+   * Dispatches a {@code UiEventType.COMP} event.
+   * A shorthand method to get panels to dispatch uniform events.
+   * Views may listen just to this event, and act on the supplied value or
+   * data payload.
+   * Example:
+   *    b.listen(a, Component.compEventCode(), e => {
+   *      console.log('B got', Component.compEventCode(), e);
+   *      console.log('Value is', e.detail.getValue());
+   *      console.log('Data is', e.detail.getData());
+   *    });
+   * @param {string|number} value
+   * @param {(string|number|?Object)=} opt_data
+   * @return {boolean} If anyone called preventDefault on the event object (or
+   *     if any of the handlers returns false this will also return false.
+   */
+  dispatchCompEvent(e, t) {
+    const r = new ZooyEventData(e, t), i = EVT.makeEvent(UiEventType.COMP, r);
+    return this.dispatchEvent(i);
+  }
+}
+const EV = {
+  // Mouse events
+  CLICK: "click",
+  DBLCLICK: "dblclick",
+  MOUSEDOWN: "mousedown",
+  MOUSEUP: "mouseup",
+  MOUSEMOVE: "mousemove",
+  // Touch events
+  // Note that other touch events exist, but we should follow the W3C list here.
+  // http://www.w3.org/TR/touch-events/#list-of-touchevent-types
+  TOUCHSTART: "touchstart",
+  TOUCHMOVE: "touchmove",
+  TOUCHEND: "touchend",
+  // Form events
+  SUBMIT: "submit",
+  CHANGE: "change",
+  INPUT: "input",
+  INVALID: "invalid",
+  // Drag and drop events
+  DRAGSTART: "dragstart",
+  DRAGEND: "dragend",
+  DRAGOVER: "dragover",
+  DRAGENTER: "dragenter",
+  DRAGEXIT: "dragexit",
+  DRAGLEAVE: "dragleave",
+  DROP: "drop",
+  // Transitions
+  TRANSITIONEND: "transitionend"
+}, touchEvents = [EV.TOUCHMOVE, EV.TOUCHSTART, EV.TOUCHEND], isTouchEvent = (n) => touchEvents.includes(n.type), normalizeEvent = (n) => (isTouchEvent(n) && (n.clientX = n.targetTouches[0].clientX, n.clientY = n.targetTouches[0].clientY), n), dragStartListener = (n, e, t, r) => (i) => {
+  i.preventDefault();
+  const o = normalizeEvent(i), a = (
+    /** @type {!HTMLElement} */
+    o.currentTarget
+  ), [p, f] = getPos(a), _ = o.clientX - p, g = o.clientY - f, v = n(p, f, _, g, a), c = t(p, f, _, g, a), l = e(p, f, _, g, a);
+  let d = freeMoveListener(l, a, _, g);
+  ["x", "ew"].includes(r) ? d = xMoveOnlyListener(l, a, _) : ["y", "ns"].includes(r) && (d = yMoveOnlyListener(l, a, _, g));
+  let h = !1;
+  const u = (E) => {
+    h = !0, d(E);
+  }, m = (E) => {
+    document.removeEventListener(EV.MOUSEMOVE, u, !0), document.removeEventListener(EV.TOUCHMOVE, u, !0), document.removeEventListener(EV.MOUSEUP, m, !0), document.removeEventListener(EV.TOUCHEND, m, !0), h && c(E);
+  };
+  return document.addEventListener(EV.MOUSEUP, m, !0), document.addEventListener(EV.TOUCHEND, m, !0), document.addEventListener(EV.MOUSEMOVE, u, !0), document.addEventListener(EV.TOUCHMOVE, u, !0), v(i), m;
+}, freeMoveListener = (n, e, t, r) => (i) => {
+  i.preventDefault();
+  const o = normalizeEvent(i);
+  e.style.left = `${o.clientX - t}px`, e.style.top = `${o.clientY - r}px`, n(o);
+}, xMoveOnlyListener = (n, e, t, r) => (i) => {
+  i.preventDefault();
+  const o = normalizeEvent(i);
+  e.style.left = `${o.clientX - t}px`, n(o);
+}, yMoveOnlyListener = (n, e, t, r) => (i) => {
+  i.preventDefault();
+  const o = normalizeEvent(i);
+  e.style.top = `${o.clientY - r}px`, n(o);
+}, makeEmitter = (n, e) => (t, r, i, o, a) => (p) => {
+  n.dispatchCompEvent(e, {
+    component: n,
+    browserEvent: p,
+    left: t,
+    top: r,
+    clientX: p.clientX,
+    clientY: p.clientY,
+    xOrg: i,
+    yOrg: o,
+    deltaX: p.clientX - i - t,
+    deltaY: p.clientY - o - r,
+    target: a
+  });
+};
+class Dragger extends Component {
+  #e;
+  #t;
+  #s;
+  #n;
+  /**
+   * @param {string} freedom Restrict the directions in which the
+   * dragger can be moved.
+   */
+  constructor(e = "xy") {
+    super(), this.#e = ["x", "y", "xy", "ew", "ns"].includes(e.toLowerCase()) ? e.toLowerCase() : "xy", this.#t = void 0, this.#s = !0, this.#n = (t) => null;
+  }
+  /**
+   * Cancels the current drag operation in progress, if any.
+   * @param {!Event} event The event that triggered the cancel
+   */
+  cancelDrag(e) {
+    this.#n(e);
+  }
+  //--[ Getters and Setters ]--
+  /**
+   * Sets the direction in which the component can be dragged.
+   * Only 'x' or 'y' will lock the movements to those directions.
+   * Anything else will be considered free movement
+   * @param {string} axis
+   */
+  set moveFreedom(e) {
+    this.#e = e, this.#s || (this.lock(), this.unlock());
+  }
+  /**
+   * Get the direction in which this component can move.
+   * @return {string}
+   */
+  get moveFreedom() {
+    return this.#e;
+  }
+  //--[ Override ]--
+  /**
+   * @inheritDoc
+   */
+  executeBeforeReady() {
+    this.unlock(), super.executeBeforeReady();
+  }
+  //--[ Dragger Specific ]--
+  /**
+   * Make the component draggable
+   */
+  unlock() {
+    const e = (t) => (r) => {
+      this.#n = t(r);
+    };
+    if (this.isInDocument && this.#s) {
+      const t = makeEmitter(this, UiEventType.COMP_DRAG_MOVE), r = makeEmitter(this, UiEventType.COMP_DRAG_START), i = makeEmitter(this, UiEventType.COMP_DRAG_END), o = dragStartListener(
+        r,
+        t,
+        i,
+        this.#e
+      );
+      this.#s = !1, this.#t = /** @type {!Node} */
+      this.#t || this.getElement(), this.listen(this.#t, EV.MOUSEDOWN, e(o)), this.listen(this.#t, EV.TOUCHSTART, o), this.#t.classList.remove("locked");
+    }
+  }
+  /**
+   * Lock the component in place.
+   * Removes all the listeners added when it was made draggable.
+   */
+  lock() {
+    this.stopListeningTo(this.#t, EV.MOUSEDOWN), this.stopListeningTo(this.#t, EV.TOUCHSTART), this.#s = !0, this.#t.classList.add("locked");
+  }
+}
+const splitRe_ = new RegExp(
+  "^(?:([^:/?#.]+):)?(?://(?:([^/?#]*)@)?([^/#?]*?)(?::([0-9]+))?(?=[/#?]|$))?([^?#]+)?(?:\\?([^#]*))?(?:#([\\s\\S]*))?$"
+), ComponentIndex = {
+  PATH: 5,
+  QUERY_DATA: 6
+}, split = (n) => (
+  /** @type {!Array<string|undefined>} */
+  n.match(splitRe_)
+), decodeOrEmpty_ = (n, e) => n ? decodeURI(n.replace(/%25/g, "%2525")) : "", getPath = (n) => decodeOrEmpty_(split(n)[ComponentIndex.PATH]), getQueryData = (n) => decodeOrEmpty_(split(n)[ComponentIndex.QUERY_DATA]), objectToUrlParms = (n) => [...Object.entries(n)].map(
+  (e) => `${e[0]}=${e[1]}`
+).join("&"), isValidValue = (n) => n != null && n !== "", queryDataToMap = (n) => n.split("&").reduce((e, t) => {
+  const [r, i] = t.split("=");
+  return isValidValue(r) && isValidValue(i) && e.set(r, i), e;
+}, /* @__PURE__ */ new Map()), uriUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getPath,
+  getQueryData,
+  objectToUrlParms,
+  queryDataToMap
+}, Symbol.toStringTag, { value: "Module" })), stripLeadingSpace = stripLeadingChar(" "), stripLeadingSlash = stripLeadingChar("/"), getCookieByName = (n) => document.cookie.split(";").map((e) => e.split("=")).reduce((e, t) => e.set(stripLeadingSpace(t[0]), t[1]), /* @__PURE__ */ new Map()).get(n), spinner = (n) => {
+  let e = 0, t;
+  const r = (i) => {
+    const o = i > 0;
+    return o ? e += 1 : e -= 1, o ? e === 1 : e === 0;
+  };
+  return (i) => {
+    t = t || document.getElementById(n), t && r(i) && t.classList.toggle("viz", e > 0);
+  };
+}, spin = spinner("the_loader"), startSpin = () => Promise.resolve(spin(1)), stopSpin = (n) => (spin(0), Promise.resolve(n)), checkStatus = (n) => n.ok ? Promise.resolve(n) : Promise.reject(new Error(`${n.url} ${n.status} (${n.statusText})`)), checkStatusTwo = (n) => (e) => {
+  if (e.type === "opaqueredirect" || e.redirected) {
+    const t = stripLeadingSlash(getPath(e.url));
+    n.setIsRedirected(!0, t), console.log("Redirect detected", t);
+  }
+  return checkStatus(e);
+}, getJson = (n) => n.status === 204 ? Promise.resolve({}) : n.json().then(
+  (e) => Promise.resolve(e),
+  (e) => Promise.reject(new Error(`Could not get JSON from response: ${e}`))
+), getText = (n) => n.text().then(
+  (e) => Promise.resolve(e),
+  (e) => Promise.reject(new Error(`Could not get text from response: ${e}`))
+), getTextOrJson = (n) => n.headers.get("Content-Type") === "application/json" ? getJson(n) : getText(n), jsonInit = (n, e, t = "POST", r = void 0) => {
+  const i = new Headers();
+  i.append("Content-type", "application/json"), i.append("X-Requested-With", "XMLHttpRequest"), n && n !== "" && i.append("Authorization", `Bearer ${n}`);
+  const o = {
+    cache: "no-cache",
+    method: t,
+    headers: i,
+    credentials: "include",
+    body: JSON.stringify(e)
+  };
+  return r && (o.signal = r), o;
+}, basicPutPostPatchInit = (n, e, t = !1, r = void 0) => {
+  const i = new Headers();
+  if (e && e !== "" && i.append("Authorization", `Bearer ${e}`), i.append("X-Requested-With", "XMLHttpRequest"), t) {
+    const a = getCookieByName("csrftoken");
+    a && t && i.append("X-CSRFToken", a);
+  }
+  const o = {
+    cache: "no-cache",
+    method: n,
+    headers: i,
+    redirect: "follow",
+    // This is anyway the default.
+    credentials: "include"
+  };
+  return r && (o.signal = r), o;
+}, formPostInit = (n, e, t = void 0) => {
+  const i = basicPutPostPatchInit("POST", n, !1, t);
+  return i.body = new FormData(e.formEl), i;
+}, basicGetInit = (n, e = void 0) => {
+  const t = new Headers();
+  t.append("Authorization", `Bearer ${n}`), t.append("X-Requested-With", "XMLHttpRequest");
+  const r = {
+    cache: "no-cache",
+    headers: t,
+    credentials: "include"
+  };
+  return e && (r.signal = e), r;
+}, putPostPatchNobody = (n, e) => {
+  const t = new Request(n);
+  return fetch(t, e).then(checkStatus).then(getText);
+}, genCatchClause = (n, e = void 0) => (t) => (stopSpin("").then(identity), t.name === "AbortError" ? console.info(n, "ABORTED!") : console.error(n, t), e);
+class UserManager {
+  /**
+   * @param {!Object=} opt_data
+   */
+  constructor(e) {
+    this.user_ = {}, this.jwt = "", e && this.updateProfileFromJwt(e).then(() => {
+    });
+  }
+  /**
+   * @param {Object} data
+   * @param {boolean=} opt_onlyIfNoneExists
+   * @return {Promise}
+   * @private
+   */
+  updateProfileFromJwt(e, t = !1) {
+    return t && this.jwt !== "" ? Promise.resolve("User Profile Already exists") : e.non_field_errors ? Promise.reject(new Error(`JWT ${e.non_field_errors}`)) : (this.updateToken(e.token), this.updateProfile(e.user), Promise.resolve("User Profile Updated"));
+  }
+  /**
+   * @param {UserLikeType} data
+   */
+  updateProfile(e) {
+    this.user_ = e;
+  }
+  /**
+   * @param {string} t
+   */
+  updateToken(e) {
+    this.jwt = e;
+  }
+  /**
+   * @return {number|undefined}
+   */
+  get id() {
+    return this.user_.id;
+  }
+  /**
+   * @return {string|undefined}
+   */
+  get name() {
+    return this.user_.name;
+  }
+  /**
+   * @return {string|undefined}
+   */
+  get surname() {
+    return this.user_.surname;
+  }
+  /**
+   * @return {string|undefined}
+   */
+  get salutation() {
+    let e = this.name;
+    const t = this.surname;
+    return t && (e = e + " " + t), e;
+  }
+  /**
+   * @param {FormPanel} formPanel
+   * @return {Promise}
+   */
+  formSubmit(e) {
+    const t = new Request(e.uri.toString()), r = e.processSubmitReply.bind(e), i = genCatchClause("Form submit error");
+    return startSpin().then(() => fetch(t, formPostInit(
+      this.jwt,
+      e,
+      e.abortController.signal
+    ))).then(checkStatusTwo(e)).then(stopSpin).then(getTextOrJson).then(r).catch(i);
+  }
+  /**
+   * @param {string} uri
+   * @param {Boolean} useDocumentCookies
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  putNoBody(e, t = void 0, r = !1) {
+    const i = genCatchClause("putNobody error"), o = basicPutPostPatchInit(
+      "PUT",
+      this.jwt,
+      r,
+      t
+    );
+    return putPostPatchNobody(e, o).catch(i);
+  }
+  /**
+   * @param {string} uri
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  fetch(e, t = void 0) {
+    const r = new Request(e.toString()), i = genCatchClause(`UMan Text GET Fetch: ${e}`);
+    return startSpin().then(() => fetch(r, basicGetInit(this.jwt, t))).then(checkStatus).then(stopSpin).then(getText).catch(i);
+  }
+  /**
+   * Use this if you want to directly get a parsed template that does not go
+   * through panel logic.
+   * @param {string} uri
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  fetchAndSplit(e, t = void 0) {
+    const r = genCatchClause(`fetchAndSplit: ${e}`);
+    return this.fetch(e, t).then(handleTemplateProm).catch(r);
+  }
+  /**
+   * @param {string} uri
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  fetchJson(e, t = void 0) {
+    const r = new Request(e.toString()), i = genCatchClause(`fetchJson: ${e}`, {}), o = basicGetInit(this.jwt, t);
+    return startSpin().then(() => fetch(r, o)).then(checkStatus).then(stopSpin).then(getJson).catch(i);
+  }
+  /**
+   * @param {string} uri
+   * @param {Object} payload
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  patchJson(e, t, r = void 0) {
+    const i = new Request(e.toString()), o = genCatchClause(`patchJson: ${e}`), a = jsonInit(this.jwt, t, "PATCH", r);
+    return fetch(i, a).then(checkStatus).then(getJson).catch(o);
+  }
+  /**
+   * @param {string} uri
+   * @param {Object} payload
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  postJson(e, t, r = void 0) {
+    const i = new Request(e.toString()), o = genCatchClause(`postJson: ${e}`), a = jsonInit(this.jwt, t, "POST", r);
+    return fetch(i, a).then(checkStatus).then(getJson).catch(o);
+  }
+  /**
+   * @param {string} uri
+   * @param {Object} payload
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  putJson(e, t, r = void 0) {
+    const i = new Request(e.toString()), o = genCatchClause(`putJson: ${e}`), a = jsonInit(this.jwt, t, "PUT", r);
+    return fetch(i, a).then(checkStatus).then(getJson).catch(o);
+  }
+  /**
+   * @param {string} uri
+   * @param {Object} payload
+   * @param {AbortSignal|undefined} signal
+   * @return {Promise}
+   */
+  delJson(e, t, r = void 0) {
+    const i = new Request(e.toString()), o = genCatchClause(`delJson: ${e}`), a = jsonInit(this.jwt, t, "DELETE", r);
+    return fetch(i, a).then(checkStatus).then(getJson).catch(o);
+  }
+}
+class Panel extends Component {
+  /**
+   * Returns the panel event type code used for dispatching panel events.
+   * @return {string} The PANEL event type
+   */
+  static panelEventCode() {
+    return UiEventType.PANEL;
+  }
+  /**
+   * Returns the component ready event type code.
+   * @return {string} The READY event type
+   */
+  static compReadyCode() {
+    return UiEventType.READY;
+  }
+  /**
+   * Creates a new Panel instance.
+   * @param {string=} uri Optional URI for fetching panel content
+   */
+  constructor(e) {
+    super(), this.qParamMap_ = /* @__PURE__ */ new Map(), this.uri_ = "", e && this.parseUri(e), this.evalScripts = evalScripts(this), this.evalModules = evalModules(this), this.redirected = !1, this.responseObject = { html: null, scripts: null }, this.user_ = void 0, "AbortController" in window ? this.abortController = new AbortController() : this.abortController = {
+      signal: void 0,
+      abort: () => {
+      }
+    }, this.listMap = /* @__PURE__ */ new Map();
+  }
+  //--[ Getters and Setters ]--
+  get uri() {
+    const e = this.qParamMap_.size > 0 ? "?" + objectToUrlParms(Object.fromEntries(this.qParamMap_)) : "";
+    return this.uri_ + e;
+  }
+  /**
+   * @param {!UserManager} user
+   */
+  set user(e) {
+    this.user_ = e;
+  }
+  /**
+   * @return {!UserManager}
+   */
+  get user() {
+    return this.user_ || (this.user_ = new UserManager()), this.user_;
+  }
+  /**
+   * Parses a URI into its path and query parameters. Updates the panel's
+   * internal URI and query parameter map.
+   * @param {string} uri The URI to parse
+   */
+  parseUri(e) {
+    this.uri_ = getPath(e), this.qParamMap_ = queryDataToMap(getQueryData(e));
+  }
+  /**
+   * Adds or updates a query parameter in the panel's query parameter map.
+   * @param {string} k The parameter key
+   * @param {string} v The parameter value
+   */
+  addToQParams(e, t) {
+    this.qParamMap_.set(e, t);
+  }
+  /**
+   * Removes a query parameter from the panel's query parameter map.
+   * @param {string} k The parameter key to remove
+   */
+  removeFromQParams(e) {
+    this.qParamMap_.delete(e);
+  }
+  /**
+   * Clears all query parameters from the panel's query parameter map.
+   */
+  clearQParams() {
+    this.qParamMap_.clear();
+  }
+  //--[ Template Render ]-----
+  /**
+   * Temporarily render placeholder DOM
+   * @param {Node!} placeholder
+   */
+  renderPlaceHolder(e) {
+    this.target && (this.placeholderDom = e, this.target.insertBefore(this.placeholderDom, null));
+  }
+  /**
+   * Expects HTML data from a call to the back.
+   * @param {Function=} opt_callback An optional callback to call before
+   * rendering the panel. This is useful for when you only want to attach the
+   * new panel to the view right before you render it - meaning the existing
+   * panel stays in place on the DOM for the duration of the fetch call.
+   * @return {Promise} Returns a promise with this panel as value.
+   */
+  renderWithTemplate(e) {
+    const t = this.user;
+    return t ? t.fetch(this.uri, this.abortController.signal).then((r) => (this.assertCanRenderAsync(), e && e(this), this.onRenderWithTemplateReply(r).catch((i) => {
+      i.message !== Component.compErrors().ALREADY_DISPOSED && console.error("RenderWithTemplate Err:", i);
+    }), this)).catch((r) => {
+      throw console.error("Panel.renderWithTemplate fetch failed:", r), r;
+    }) : Promise.reject(new Error("No UserManager instance available for Panel.renderWithTemplate()"));
+  }
+  /**
+   * @param {string} s
+   * @private
+   * @return {Promise}
+   */
+  onRenderWithTemplateReply(e) {
+    return this.responseObject = splitScripts(e), this.domFunc = () => (
+      /** @type {!Element} */
+      this.responseObject.html
+    ), this.render(), Promise.resolve(this);
+  }
+  /**
+   * Partially replace panel's content.
+   * If an ID query selector (#something) is passed in, then that single node is replaced
+   * in the panel DOM with the single node in the content DOM
+   *
+   * If a class query selector (.some_class) is passed in, all elements in the
+   * panel's dom with that class is replaced with the matching
+   * element ID in the content DOM matching the target DOMs element IDs
+   *
+   * NOTE: For the spot replacement to work, you need both the classname
+   * and a unique element ID on the element you intend to replace.
+   *
+   * NOTE: Top level replacements will clobber child replacements.
+   *
+   * @param content
+   * @param qs
+   */
+  onReplacePartialDom(e, t) {
+    const r = this.getElement();
+    if (isUndefined(r))
+      return;
+    const i = e.html;
+    if (t.startsWith("."))
+      [...r.querySelectorAll(t)].filter((o) => isDefAndNotNull(o.id)).map((o) => [o, i.querySelector(`#${o.id}`)]).filter(([o, a]) => isDefAndNotNull(a)).forEach(([o, a]) => {
+        o.parentNode.replaceChild(a, o), this.parseContent(a);
+      });
+    else if (t.startsWith("#")) {
+      const o = i.querySelector(t), a = r.querySelector(t);
+      a.parentNode.replaceChild(o, a), this.parseContent(o);
+    }
+    this.evalScripts(e.scripts), this.evalModules(e.modules);
+  }
+  //--[ JSON Render ]-----
+  /**
+   * Equivalent to the @code{renderWithTemplate} method in that it is guaranteed
+   * that a reply from the callback is received before @code{render} is called.
+   * @param {function(Object, !Panel)} opt_callback The callback function
+   *      that will receive the reply event.
+   */
+  renderWithJSON(e) {
+    return this.user ? this.user.fetchJson(this.uri_, this.abortController.signal).then((r) => {
+      this.assertCanRenderAsync(), e && e(r, this), this.onRenderWithJSON(r).then(identity);
+    }).catch((r) => {
+      throw console.error("Panel.renderWithJSON fetch failed:", r), r;
+    }) : Promise.reject(new Error("No UserManager instance available for Panel.renderWithJSON()"));
+  }
+  /**
+   * On reply from a GET call to the panel URI
+   * @param {Object} _json The callback function
+   *      that will receive the reply event.
+   * @return {Promise}
+   */
+  onRenderWithJSON(e) {
+    return Promise.resolve(this);
+  }
+  /**
+   * @param {Element} _el
+   * @param {Object} _elDataMap
+   * @param {Object} _json
+   */
+  onAsyncJsonReply(e, t, r) {
+  }
+  /**
+   * Called on each async HTML response, after the content is in the DOM
+   * and rendered.
+   * @param {Element} _el
+   * @param {Object} _elDataMap
+   */
+  onAsyncHtmlReply(e, t) {
+  }
+  /**
+   * Hook method called when the view broadcasts data to all its panels.
+   * Override this method to handle broadcasted data in subclasses.
+   * @param {*} _data The data broadcast from the view
+   */
+  onViewDataBroadcast(e) {
+  }
+  //--[ JSON Render ]-----
+  /**
+   * @param {Element} panel
+   */
+  parseContent(e) {
+    if (this.debugMe("Enable interactions. Panel:", e), typeof window.customElements < "u" && ComponentLibraryRegistry.has("carbon")) {
+      const c = ComponentLibraryRegistry.get("carbon");
+      c.render.call(this, e, c.cache).catch((l) => console.error("[Zooy] Carbon initialization failed:", l));
+    }
+    if (ComponentLibraryRegistry.has("mdc")) {
+      const c = ComponentLibraryRegistry.get("mdc");
+      c.render.call(this, e, c.cache);
+    }
+    e.classList.contains("zoo__modal-base") && e.classList.contains("close_on_click") && this.listen(e, EV.CLICK, (c) => {
+      c.target === e && this.dispatchPanelEvent("destroy_me");
+    }), [...e.querySelectorAll(
+      ".zoo__button:not(.external):not(.mdc-data-table__row)"
+    )].forEach((c) => {
+      this.listen(c, EV.CLICK, (l) => {
+        l.stopPropagation();
+        const d = l.currentTarget, h = getElDataMap(d);
+        this.dispatchPanelEvent(h.zv, Object.assign({
+          orgEvt: l,
+          trigger: d,
+          href: d.href || h.href
+        }, h));
+      });
+    }), [...e.querySelectorAll("[href]:not(.external)")].forEach((c) => {
+      this.listen(c, EV.CLICK, (l) => {
+        const d = l.currentTarget;
+        l.preventDefault(), l.stopPropagation();
+        const h = getElDataMap(d), u = h.zv || "href";
+        this.dispatchPanelEvent(u, Object.assign({
+          orgEvt: l,
+          trigger: l.target,
+          href: d.href || h.href
+        }, h));
+      });
+    }), [...e.querySelectorAll("form.intercept_submit")].forEach((c) => {
+      c.noValidate = !0, this.listen(c, EV.SUBMIT, (l) => {
+        l.preventDefault(), l.stopPropagation();
+        const d = getElDataMap(c), h = formToJSON(c.elements);
+        this.dispatchPanelEvent(d.zv, Object.assign({
+          orgEvt: l,
+          trigger: l.target,
+          formData: h,
+          href: d.href
+        }, d));
+      });
+    }), [...e.querySelectorAll(".zoo__toggle_class_driver")].forEach(
+      (c) => {
+        const l = getElDataMap(c), d = l.toggle_class_target_id, h = l.toggle_class, u = e.querySelector(`#${d}`);
+        u && h && c.addEventListener(EV.CLICK, (m) => {
+          m.stopPropagation(), u.classList.toggle(h);
+        });
+      }
+    );
+    const t = Array.from(e.querySelectorAll(".folder_drop_zone")), r = Array.from(e.querySelectorAll("[draggable]")), i = (c) => {
+      c.preventDefault(), c.target.classList.add("drag_over");
+    }, o = (c) => {
+      c.preventDefault();
+    }, a = (c) => {
+      c.preventDefault(), c.target.classList.remove("drag_over");
+    }, p = (c) => {
+      c.preventDefault(), c.target.classList.remove("drag_over");
+    }, f = (c) => {
+      c.preventDefault(), c.target.classList.remove("drag_over");
+    }, _ = (c) => {
+      c.dataTransfer.dropEffect = "move";
+      const l = getElDataMap(c.target);
+      c.dataTransfer.setData("text/plain", JSON.stringify(l)), c.target.classList.add("drag_in_progress");
+    }, g = (c) => {
+      c.target.classList.remove("drag_in_progress");
+    }, v = (c) => {
+      f(c), c.stopPropagation();
+      const l = JSON.parse(c.dataTransfer.getData("text/plain")), d = getElDataMap(c.target);
+      return this.dispatchPanelEvent("drop_on", {
+        custom: { on: d, from: l }
+      }), !1;
+    };
+    t.forEach((c) => {
+      this.listen(c, EV.DRAGOVER, o), this.listen(c, EV.DRAGENTER, i), this.listen(c, EV.DRAGEXIT, p), this.listen(c, EV.DRAGLEAVE, a), this.listen(c, EV.DROP, v);
+    }), r.forEach((c) => {
+      this.listen(c, EV.DRAGSTART, _), this.listen(c, EV.DRAGEND, g);
+    }), [...e.querySelectorAll(".zoo_async_json")].forEach((c) => {
+      const l = getElDataMap(c), d = l.href, h = this.onAsyncJsonReply.bind(this, c, l);
+      this.user.fetchJson(d, this.abortController.signal).then(h);
+      const u = l.z_json_reusable;
+      u && (this.jsonCallFuncs = this.jsonCallFuncs || {}, this.jsonCallFuncs[u] = () => {
+        this.user.fetchJson(d, this.abortController.signal).then(h);
+      });
+      const m = toNumber(l.z_interval);
+      isNumber(m) && this.doOnBeat(() => {
+        this.user.fetchJson(d, this.abortController.signal).then(h);
+      }, m * 60 * 1e3);
+    }), [...e.querySelectorAll(".zoo_async_html")].forEach(
+      /**
+       * @param {Element} el
+       */
+      (c) => {
+        const l = getElDataMap(c), d = l.href;
+        this.user.fetchAndSplit(d, this.abortController.signal).then((u) => {
+          c.appendChild(u.html), this.parseContent(c), this.evalScripts(u.scripts), this.evalModules(u.modules), this.onAsyncHtmlReply(c, l);
+        });
+        const h = toNumber(l.z_interval);
+        isNumber(h) && this.doOnBeat(() => {
+          this.user.fetchAndSplit(d, this.abortController.signal).then((u) => {
+            c.replaceChildren(u.html), this.parseContent(c), this.evalScripts(u.scripts), this.evalModules(u.modules);
+          });
+        }, h * 60 * 1e3);
+      }
+    );
+  }
+  /**
+   * @inheritDoc
+   * Called when the panel enters the document. Parses content to enable
+   * Material Design Components, executes scripts and modules, then dispatches
+   * the READY event.
+   */
+  enterDocument() {
+    const e = this.getElement();
+    this.parseContent(e), this.evalScripts(this.responseObject.scripts), this.evalModules(this.responseObject.modules), super.enterDocument();
+  }
+  /**
+   * @inheritDoc
+   * Called when the panel exits the document. Aborts any pending async
+   * operations and performs cleanup.
+   */
+  exitDocument() {
+    this.abortController.abort(), super.exitDocument();
+  }
+  /**
+   * @param {boolean} bool
+   * @param {?string} url
+   */
+  setIsRedirected(e, t) {
+    this.redirected = e, this.redirected && t && (this.uri_ = t);
+  }
+  //--[ Built in events ]--
+  /**
+   * Dispatches a @code{UiEventType.PANEL} event.
+   * A shorthand method to get panels to dispatch uniform events.
+   * Views may listen just to this event, and act on the supplied value or
+   * data payload.
+   * @example
+   *    b.listen(a, Panel.panelEventCode(), e => {
+   *      console.log('B got', Panel.panelEventCode(), e);
+   *      console.log('Value is', e.detail.getValue());
+   *      console.log('Data is', e.detail.getData());
+   *    });
+   * @param {string|number} value
+   * @param {(string|number|?Object)=} opt_data
+   * @return {boolean} If anyone called preventDefault on the event object
+   *  or if any of the handlers returns false this will also return false.
+   */
+  dispatchPanelEvent(e, t) {
+    const r = new ZooyEventData(e, t), i = EVT.makeEvent(UiEventType.PANEL, r);
+    return this.debugMe("PANEL EVENT FIRED. Value:", e, "Opt DATA:", t), this.dispatchEvent(i);
+  }
+}
+class FormPanel extends Panel {
+  /**
+   * @type {?HTMLFormElement}
+   * @private
+   */
+  #e = null;
+  /**
+   * Map of form fields to their error message DOM elements
+   * @type {!Map<HTMLInputElement, Element>}
+   * @private
+   */
+  #t = /* @__PURE__ */ new Map();
+  #s = !0;
+  /**
+   * Creates a new FormPanel instance.
+   * @param {string=} uri Optional URI for fetching form content
+   * @param {boolean} intercept If false, we do not try and intercept the forms
+   */
+  constructor(e, t = !0) {
+    super(e), this.#s = t, this.debugMode = !0, this.onSubmitSucFunc = (r, i) => null;
+  }
+  /**
+   * Gets the form element managed by this panel.
+   * @return {?HTMLFormElement} The form element, or null if not found
+   */
+  get formEl() {
+    return this.#e;
+  }
+  /**
+   * @inheritDoc
+   * Called when the form panel enters the document. Identifies the form element
+   * and sets up submission interception and field error handling.
+   */
+  enterDocument() {
+    super.enterDocument(), this.formIdElementToForm_();
+  }
+  /**
+   * Internal method to identify the form element and set up interception.
+   * @private
+   */
+  formIdElementToForm_() {
+    this.#e = this.getFormFromId(), this.#e && (this.#a(this.#e), this.#n());
+  }
+  /**
+   * @param {string=} string The id of the form we want to sterilise.
+   * @return {?HTMLFormElement}
+   */
+  getFormFromId(e) {
+    let t = null, r = this.getElement().querySelector("form");
+    return e && (r = document.getElementById(
+      /** @type {string} */
+      e
+    ) || r), r && r.tagName.toLowerCase() === "form" && (t = /** @type {HTMLFormElement} */
+    r), t;
+  }
+  //--[ Field Validation Methods ]--
+  /**
+   * Initializes field validation. Sets up event listeners on the form
+   * for change, input, and invalid events.
+   * @private
+   */
+  #n() {
+    this.#e && (this.listen(this.#e, EV.CHANGE, (e) => {
+      this.#i(e);
+    }, { passive: !0 }), this.listen(this.#e, EV.INPUT, (e) => {
+      this.clearAllValidationErrors(), this.#i(e);
+    }), this.listen(this.#e, EV.INVALID, (e) => {
+      e.preventDefault();
+      const t = (
+        /** @type {HTMLInputElement} */
+        e.target
+      );
+      this.#o(t), this.displayFieldError(t);
+    }, { passive: !0 }));
+  }
+  /**
+   * Checks all form fields for validity. Returns true if all fields are valid.
+   * Displays error messages for any invalid fields.
+   * @return {boolean} True if all fields are valid, false otherwise
+   */
+  checkAllFields() {
+    const e = [...this.#e.elements].map((t) => [this.#r(t), t]).filter((t) => !t[0]);
+    return e.forEach((t) => this.displayFieldError(t[1])), e.length === 0;
+  }
+  /**
+   * Clear all existing validation errors
+   */
+  clearAllValidationErrors() {
+    [...this.#e ? this.#e.elements : []].forEach((r) => this.#o(r)), [...this.#e.querySelectorAll(".non-field-errors")].forEach((r) => r.classList.remove("alert-error"));
+  }
+  /**
+   * Format the message dom object and insert it into the DOM
+   * @param {HTMLInputElement} field The field after which the alert will be inserted.
+   * @param {string} msg The message in the alert.
+   * @param {string} _css A CSS class name to add to the alert div.
+   * @private
+   */
+  displayAlert_(e, t, r) {
+    const i = document.getElementById(`${e.id}-helper-text`) || document.createElement("p");
+    i.textContent = t, this.#t.set(e, i);
+  }
+  /**
+   * Check validation for a single field
+   * @param {HTMLInputElement} field
+   * @return {boolean} True if field is valid
+   * @private
+   */
+  #r(e) {
+    this.#o(e);
+    let t = !e.willValidate;
+    return e.willValidate && (t = e.checkValidity()), t;
+  }
+  /**
+   * Clear alert for a single field
+   * @param {HTMLInputElement} field
+   * @private
+   */
+  #o(e) {
+    e.classList.remove("error"), this.#t.has(e) && (this.#t.get(e).textContent = ""), this.#t.delete(e);
+  }
+  /**
+   * Display the given error message on the given form field.
+   * @param {HTMLInputElement} field
+   * @param {string=} opt_msg
+   */
+  displayFieldError(e, t) {
+    const r = t || e.validationMessage;
+    e.classList.add("error"), this.displayAlert_(e, r, "alert-error");
+  }
+  /**
+   * Display the given success message on the given form field.
+   * @param {HTMLInputElement} field
+   * @param {string} message
+   */
+  displayFieldSuccess(e, t) {
+    this.displayAlert_(e, t, "alert-success");
+  }
+  /**
+   * Display the given information message on the given form field.
+   * @param {HTMLInputElement} field
+   * @param {string} message
+   */
+  displayFieldInfo(e, t) {
+    this.displayAlert_(e, t, "alert-info");
+  }
+  /**
+   * Validate field on change event
+   * @param {Event} e
+   * @private
+   */
+  #i(e) {
+    this.#r(
+      /** @type {HTMLInputElement} */
+      e.target
+    );
+  }
+  /**
+   * Given a form id, get the form, and intercept and sterilise its submit.
+   * Forms that passed through here will not be able to be submitted with a
+   * normal submit button anymore, but built in HTML5 Constraint Validation
+   * will still function on the form. This way, we can still have a button with
+   * type="submit", which will trigger the validation, and we can submit
+   * valid forms with xhrio which allows us to add callbacks to them.
+   *
+   * @param {HTMLFormElement} form The form we want to sterilise.
+   * @return {HTMLFormElement}
+   */
+  #a(e) {
+    if (e && this.#s) {
+      e.noValidate = !0;
+      const t = this.user;
+      this.listen(e, EV.SUBMIT, (r) => {
+        r.preventDefault(), this.debugMe("Intercepted from SUBMIT"), this.checkAllFields() && t && t.formSubmit(this);
+      });
+    }
+    return e;
+  }
+  //--[ Round Trip ]--
+  /**
+   * @param {function(!FormPanel, (string|!ServerFormSuccessJsonType)=): (?|null|Promise<?>)} func
+   */
+  onSubmitSuccess(e) {
+    this.onSubmitSucFunc = e;
+  }
+  /**
+   * Given a 'fetch' reply, replace the form.
+   * This simply replaced the form element with what came back from the server
+   * and re-reads the scripts.
+   * @param {string} reply
+   */
+  replaceForm(e) {
+    if (this.responseObject = splitScripts(e), this.responseObject.html) {
+      if (this.redirected) {
+        this.removeAllListener();
+        const t = this.getElement(), r = t.parentNode;
+        this.setElementInternal_(this.responseObject.html), r.replaceChild(this.getElement(), t);
+      } else {
+        const t = (
+          /** @type {!Element} */
+          this.responseObject.html.querySelector("form")
+        );
+        t && replaceNode(t, this.#e);
+        const r = (
+          /** @type {!Element} */
+          this.responseObject.html.querySelector('button[type="submit"]')
+        ), i = (
+          /** @type {!Element} */
+          this.getElement().querySelector('button[type="submit"]')
+        );
+        r && i && replaceNode(r, i);
+      }
+      this.enterDocument();
+    }
+  }
+  /**
+   * Expects HTML data from a call to the back.
+   * @return {Promise} Returns a promise with this panel as value.
+   */
+  refreshFromFromServer() {
+    const e = this.user, t = this.uri;
+    return e ? e.fetch(t, this.abortController.signal).then(
+      (r) => this.replaceForm(r)
+    ) : Promise.reject(new Error("No UserManager instance available for FormPanel.refreshFromFromServer()"));
+  }
+  /**
+   * @param {string} reply
+   * @return {Promise}
+   */
+  processSubmitReply(e) {
+    this.clearAllValidationErrors();
+    let t = !1;
+    if (whatType(e) === "object" && e.success)
+      return Promise.resolve(this).then(() => {
+        this.onSubmitSucFunc(this, e), this.dispatchCompEvent(UiEventType.FORM_SUBMIT_SUCCESS);
+      });
+    if (e === "success" ? (this.debugMe(`
+      1.REDIRECTED: ${this.redirected}
+      REPLY: ${e}`), t = !0) : e === `redirected_success
+` ? (this.debugMe(`
+      2.REDIRECTED: ${this.redirected}
+      REPLY: ${e}`), t = !0, this.redirected = !1) : (this.debugMe(`
+      3.REDIRECTED: ${this.redirected}
+      REPLY: Some form HTML`), this.replaceForm(e)), t && this.redirected)
+      return this.debugMe(`
+      4.REDIRECTED: ${this.redirected}
+      SUCCESS: ${t}`), this.redirected = !1, Promise.resolve(this);
+    if (t)
+      return this.debugMe(`
+      5.REDIRECTED: ${this.redirected}
+      SUCCESS: ${t}`), Promise.resolve(this).then(() => {
+        this.onSubmitSucFunc(this), this.dispatchCompEvent(UiEventType.FORM_SUBMIT_SUCCESS);
+      });
+    this.debugMe(`
+      6.REDIRECTED: ${this.redirected}
+      SUCCESS: ${t}`);
+  }
+}
+class Split extends Component {
+  /**
+   * Returns the split event type code used for dispatching split events.
+   * @return {string} The SPLIT event type
+   */
+  static splitEventCode() {
+    return UiEventType.SPLIT;
+  }
+  /**
+   * Creates a new Split component instance. Initializes nest tracking and
+   * callback management.
+   */
+  constructor() {
+    super(), this.dragImage_ = document.createElement("canvas"), this.nestMap_ = /* @__PURE__ */ new Map(), this.nestCallbackMap_ = /* @__PURE__ */ new Map(), this.splitNests_ = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Returns all nest entries (name and config object) that have a valid element.
+   * @return {!Array<!Array<string, !Object>>} Array of [nestName, nestConfig] pairs
+   */
+  get nests() {
+    return [...this.nestMap_.entries()].filter(([e, { nestEl: t }]) => t);
+  }
+  /**
+   * Gets the nest element for a given nest name.
+   * @param {string} nestName The nest name to look up
+   * @return {!Element | undefined} The nest element, or undefined if not found
+   */
+  getNest(e) {
+    return this.nestMap_.get(e)?.nestEl;
+  }
+  /**
+   * Returns the names of all nests that haven't been further split.
+   * @return {!Array<string>} Array of nest names
+   */
+  get nestNames() {
+    return [...this.nestMap_.entries()].filter(([e, t]) => !this.splitNests_.has(t)).map(([e]) => e);
+  }
+  /**
+   * Closes and locks all nests in this split component.
+   * @param {!Function=} callback Callback to execute after each nest closes
+   * @param {boolean=} opt_skipAni If true, skips animation
+   */
+  closeAndLockAll(e = identity, t = !1) {
+    this.nestNames.forEach((r) => this.closeAndLock(r, e, t));
+  }
+  /**
+   * Opens and unlocks all nests in this split component.
+   * @param {!Function=} callback Callback to execute after each nest opens
+   * @param {boolean=} opt_skipAni If true, skips animation
+   */
+  openAndUnlockAll(e = identity, t = !1) {
+    this.nestNames.forEach((r) => this.openAndUnlock(r, e, t));
+  }
+  // ---------------------------------------------------------------------------
+  /**
+   * Lock a dragger. Removes the listeners that make it draggable.
+   * Adds the 'locked' class to the element.
+   * Sets the element's "display" style to none.
+   * Even though all these operations are performed on the the dragger, access
+   * is vai the nest name - for consistency with the rest of the API.
+   * @param {string} nestName Nest name
+   */
+  lock(e) {
+    const { dragEl: t } = this.nestMap_.get(e);
+    t.classList.add("locked");
+  }
+  /**
+   * The reverse of a lock. Removes the classes added by <@code>lock</> and
+   * restores the draggable listeners.
+   * Even though all these operations are performed on the the dragger, access
+   * is vai the nest name - for consistency with the rest of the API.
+   * @param {string} nestName Nest name
+   */
+  unlock(e) {
+    const { dragEl: t } = this.nestMap_.get(e);
+    t.classList.remove("locked");
+  }
+  /**
+   * Resize a nest.
+   * @param {string} nestName Nest name
+   * @param {number} size The required size of the resulting move.
+   * @param {Function?} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  resize(e, t, r = identity, i = !1) {
+    const { sizeNow: o, nestEl: a, canResize: p } = this.nestMap_.get(e);
+    p && (i || o === t ? (a.classList.remove("animated"), a.style.flexBasis = `${t}px`, this.nestMap_.get(e).sizeNow = t, r()) : (a.classList.add("animated"), this.nestCallbackMap_.set(e, () => {
+      a.classList.remove("animated"), this.nestMap_.get(e).sizeNow = t, r();
+    }), a.style.flexBasis = `${t}px`));
+  }
+  /**
+   * Close the nest and lock it. See <@code>lock</>
+   * @param {string} nestName Nest name
+   * @param {Function?} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  closeAndLock(e, t = identity, r = !1) {
+    const { nestEl: i, dragEl: o, canResize: a } = this.nestMap_.get(e);
+    if (!a)
+      return;
+    const p = () => {
+      o.classList.add("locked", "closed"), i.classList.add("closed"), t();
+    };
+    this.resize(e, 0, p, r);
+  }
+  closeAndUnlock(e, t = identity, r = !1) {
+    const { nestEl: i, dragEl: o, canResize: a } = this.nestMap_.get(e);
+    if (!a)
+      return;
+    const p = () => {
+      i.classList.remove("closed"), o.classList.remove("closed", "locked"), o.classList.add("collapsed"), t();
+    };
+    this.resize(e, 0, p, r);
+  }
+  /**
+   * Open a closed and locked nest. Simply a convenience method to combine
+   * the unlock and resize steps.
+   * @param {string} nestName Nest name
+   * @param {number?} size The required size of the resulting move.
+   * @param {Function?} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  openAndUnlock(e, t, r, i = !1) {
+    const {
+      nestEl: o,
+      dragEl: a,
+      defSize: p,
+      lastSize: f,
+      canResize: _
+    } = this.nestMap_.get(e);
+    if (!_)
+      return;
+    const g = t || f || p;
+    o.classList.remove("closed"), a.classList.remove("closed", "locked", "collapsed"), setTimeout(() => {
+      this.resize(e, g, r, i);
+    }, 50);
+  }
+  /**
+   * Open a closed and locked nest. Keep the nest locked.
+   * @param {string} nestName Nest name
+   * @param {number?} size The required size of the resulting move.
+   * @param {Function?} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  openAndLock(e, t, r, i = !1) {
+    const {
+      nestEl: o,
+      dragEl: a,
+      defSize: p,
+      lastSize: f,
+      canResize: _
+    } = this.nestMap_.get(e);
+    if (!_)
+      return;
+    const g = t || f || p;
+    o.classList.remove("closed"), a.classList.remove("closed", "collapsed"), setTimeout(() => {
+      this.resize(e, g, r, i);
+    }, 50);
+  }
+  /**
+   * Close nest. Move it out the way, but continue to make it draggable;
+   * to the nest and dragger.
+   * @param {string} nestName Nest name
+   * @param {Function|undefined} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  close(e, t = identity, r = !1) {
+    const { dragEl: i, canResize: o, nestEl: a } = this.nestMap_.get(e);
+    if (!o)
+      return;
+    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_CLOSE, { nestName: e, nestEl: a });
+    const p = () => {
+      i.classList.add("collapsed"), this.dispatchSplitEvent(UiEventType.SPLIT_DID_CLOSE, { nestName: e, nestEl: a }), t();
+    };
+    this.resize(e, 0, p, r);
+  }
+  /**
+   * Open the nest ignoring its current locked state.
+   * @param {string} nestName Nest name
+   * @param {Function|undefined} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  open(e, t = identity, r = !1) {
+    const { defSize: i, lastSize: o, dragEl: a, canResize: p, nestEl: f } = this.nestMap_.get(e);
+    if (!p)
+      return;
+    this.dispatchSplitEvent(UiEventType.SPLIT_WILL_OPEN, { nestName: e, nestEl: f }), a.classList.remove("collapsed", "closed");
+    const _ = o || i, g = () => {
+      this.dispatchSplitEvent(UiEventType.SPLIT_DID_OPEN, { nestName: e, nestEl: f }), t();
+    };
+    this.resize(e, _, g, r);
+  }
+  /**
+   * Close the nest ignoring its current locked state.
+   * @param {string} nestName Nest name
+   * @param {Function|undefined} callback A callback function to call once
+   *    the resize completed.
+   * @param {boolean?} opt_skipAni When true, the resize won't be animated, but
+   *    simply affected directly.
+   */
+  toggle(e, t, r = !1) {
+    this.nestMap_.get(e).sizeNow === 0 ? this.open(e, t, r) : this.close(e, t, r);
+  }
+  //----------------------------------------------------------------------------
+  /**
+   * Split an element into parts, each separated by a dragger component.
+   * The split creates 3 new elements inside root element. Thus it is not
+   * truly splitting the reference element, but rather overlaying the
+   * split functionality over the reference element.
+   * A split can be either horizontal - called "EW" (east-west) or
+   * vertical - called "NS" (north-south).
+   * By convention the new elements created are called 'nests', and are named
+   * in order "A", "B" and "C" respectively.
+   * For EW splits the we name from left to right:
+   *    A B C
+   * For NS splits we name from top to bottom:
+   *    A
+   *    B
+   *    C
+   * Each newly created nest is a valid root for further splitting.
+   * When a nest is split, the resultant nests names are prepended with the
+   * name of the root nest that was split.
+   * Example: If nest C is split, the resultant nests are named CA, CB, and CC.
+   * When one of these (for example CA) is split further, the pattern continues
+   * with the resulting nests being CAA, CAB, CAC etc.
+   * @param {Element=} opt_el The element to split. If not given, the
+   *    components own element is used. Else, the element is checked to be
+   *    a member of this split-group, and if so, is split.
+   * @param {?string} orientation Only 'EW' or 'NS'. Defaults to 'EW'
+   * @param {?number} defSizeA Default size of the 'A' nest.
+   * @param {?number} defSizeC Default size of the 'C' nest. The 'B' nest gets the
+   *    remainder of the 'A' and 'C' nests, and can not be set directly.
+   * @param {?Array<string>} classArrA Extra class names to be added to this nest
+   * @param {?Array<string>} classArrB Extra class names to be added to this nest
+   * @param {?Array<string>} classArrC Extra class names to be added to this nest
+   * @param {?Array<string>} classArrDragger Extra classes for the dragger element
+   * @param {?Array<string>} classArrGrabber Extra classes for the grabber element
+   */
+  addSplit(e = void 0, t = "EW", r = 100, i = 100, o = [], a = [], p = [], f = [], _ = []) {
+    const g = e || this.getElement();
+    if (this.splitNests_.has(g))
+      return ["Already used!", g];
+    convertElToSplit(g, t), this.splitNests_.add(g);
+    let v = "";
+    if (e) {
+      const S = [...this.nestMap_.entries()].find(([C, { nestEl: D }]) => D === e);
+      if (S)
+        v = S[0];
+      else
+        return ["Element not managed by this component", e];
+    }
+    const c = `${v}A`, l = makeOuterNest(r, ["zoo_nest__A", c, ...o]), d = new Dragger(t);
+    d.domFunc = makeDraggerEl([`zoo_drag_${c}`, ...f], _), d.render(g), this.nestMap_.set(c, {
+      side: "A",
+      nestEl: l,
+      dragger: d,
+      dragEl: d.getElement(),
+      defSize: r,
+      sizeNow: -1,
+      canResize: !0
+    });
+    const h = `${v}B`, u = makeInnerNest(["zoo_nest__B", h, ...a]);
+    this.nestMap_.set(h, { nestEl: u, canResize: !1 });
+    const m = `${v}C`, E = new Dragger(t);
+    E.domFunc = makeDraggerEl([`zoo_drag_${m}`, ...f], _), E.render(g);
+    const y = makeOuterNest(i, ["zoo_nest__C", m, ...p]);
+    this.nestMap_.set(m, {
+      side: "C",
+      nestEl: y,
+      dragger: E,
+      dragEl: E.getElement(),
+      defSize: i,
+      sizeNow: -1,
+      canResize: !0
+    }), [l, d.getElement(), u, E.getElement(), y].forEach((S) => g.appendChild(S));
+    let T = 0;
+    const b = (S, C, D, O) => {
+      let M;
+      const w = S === "NS" ? "height" : "width", A = S === "NS" ? "deltaY" : "deltaX";
+      return (L) => {
+        switch (L.detail.value_) {
+          case UiEventType.COMP_DRAG_START:
+            M = C.getBoundingClientRect()[w], T = u.getBoundingClientRect()[w] + M, this.nestMap_.get(D).dragEl.classList.remove("collapsed");
+            break;
+          case UiEventType.COMP_DRAG_MOVE: {
+            const I = Math.min(T, M + O * L.detail.data_[A]);
+            this.nestMap_.get(D).lastSize = I, C.style.flexBasis = I + "px";
+            break;
+          }
+          case UiEventType.COMP_DRAG_END:
+            this.dispatchSplitEvent(UiEventType.COMP_DRAG_END, this.nestMap_.get(D));
+            break;
+        }
+      };
+    };
+    this.listen(d, Component.compEventCode(), b(t, l, c, 1)), this.listen(E, Component.compEventCode(), b(t, y, m, -1)), this.listen(d.getElement(), EV.DBLCLICK, () => this.toggle(c)), this.listen(E.getElement(), EV.DBLCLICK, () => this.toggle(m)), this.listen(d.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(c)), this.listen(E.getElement().querySelector(".zoo_grabber"), EV.CLICK, () => this.toggle(m)), this.listen(l, EV.TRANSITIONEND, (S) => {
+      if (S.propertyName === "flex-basis" && S.target === l) {
+        const C = this.nestCallbackMap_.get(c);
+        this.nestCallbackMap_.delete(c), C && C(), this.dispatchSplitEvent(UiEventType.SPLIT_TRANSITION_END, this.nestMap_.get(c));
+      }
+    }), this.listen(y, EV.TRANSITIONEND, (S) => {
+      if (S.propertyName === "flex-basis" && S.target === y) {
+        const C = this.nestCallbackMap_.get(m);
+        this.nestCallbackMap_.delete(m), C && C(), this.dispatchSplitEvent(UiEventType.SPLIT_TRANSITION_END, this.nestMap_.get(m));
+      }
+    });
+  }
+  //--[ Built in events ]--
+  /**
+   * Dispatches a {@code UiEventType.SPLIT} event.
+   * Views may listen just to this event, and act on the supplied value or
+   * data payload.
+   * @param {string|number} value
+   * @param {(string|number|?Object)=} opt_data
+   * @return {boolean} If anyone called preventDefault on the event object (or
+   *     if any of the handlers returns false this will also return false.
+   */
+  dispatchSplitEvent(e, t) {
+    const r = new ZooyEventData(e, t), i = EVT.makeEvent(UiEventType.SPLIT, r);
+    return this.dispatchEvent(i);
+  }
+}
+const convertElToSplit = (n, e) => (n.classList.add("zoo_split", `zoo_split__${e.toLowerCase()}`), n), makeOuterNest = (n, e = []) => {
+  const t = document.createElement("div");
+  return t.setAttribute("id", randomId(7)), t.classList.add("zoo_nest", "zoo_nest__outer", ...e), t.style.flexBasis = n + "px", t;
+}, makeInnerNest = (n = []) => {
+  const e = document.createElement("div");
+  return e.setAttribute("id", randomId(7)), e.classList.add("zoo_nest", "zoo_nest__inner", ...n), e;
+}, makeDraggerEl = (n = [], e = []) => () => {
+  const t = document.createElement("div");
+  t.setAttribute("id", randomId(7)), t.classList.add("zoo_dragger", ...n);
+  const r = document.createElement("div");
+  return r.classList.add("zoo_grabber", ...e), t.appendChild(r), t;
+}, needsToScroll = (n) => {
+  const t = n.getBoundingClientRect().bottom;
+  return (r) => r.getBoundingClientRect().bottom > t;
+}, treeNodeSelect = (n) => (e) => {
+  const t = n.getElement().querySelector(".zv_tree_container"), r = needsToScroll(t), i = n.getElement().querySelectorAll(".tree-node");
+  let o;
+  [...i].forEach((a) => {
+    enableClass(a, "mdc-deprecated-list-item--activated", a.id === `tree-node_${e}`), a.id === `tree-node_${e}` && (o = a);
+  }), o && r(o) && o.scrollIntoView(!1);
+}, toggleTree = (n, e) => {
+  const t = e.getElement().querySelector(".children"), r = (
+    /**@type {boolean} */
+    n.isOn
+  ), i = e.getElement().querySelectorAll(".children"), o = e.getElement().querySelectorAll(".zoo__reveal_icon");
+  [...i].forEach((a) => enableClass(
+    a,
+    "zoo__tree-children__hidden",
+    a !== t && !r
+  )), [...o].forEach((a) => enableClass(
+    a,
+    "zoo__icon_rotated",
+    a !== t && !r
+  ));
+}, toggleTreeChildren = (n, e) => {
+  const t = e.trigger, r = t.getAttribute("data-child-id"), i = n.getElement().querySelector(`#${r}`);
+  toggleClass(i, "zoo__tree-children__hidden"), toggleClass(t, "zoo__icon_rotated");
+}, _openTreeFromNodeUp = (n, e) => {
+  const t = e.parentElement;
+  t.classList.contains("children") && (enableClass(t, "zoo__tree-children__hidden", !1), _openTreeFromNodeUp(n, t));
+}, treeUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  _openTreeFromNodeUp,
+  toggleTree,
+  toggleTreeChildren,
+  treeNodeSelect
+}, Symbol.toStringTag, { value: "Module" })), MdcTreeHandlers = {
+  /**
+   * Toggle the entire tree open or closed.
+   * First level children remain open for better UX.
+   *
+   * @param {Object} eventData - Event data with isOn boolean
+   * @param {Panel} ePanel - The panel containing the tree
+   */
+  toggle_tree: function(n, e) {
+    toggleTree(n, e);
+  },
+  /**
+   * Toggle children visibility for a specific tree node.
+   *
+   * @param {Object} eventData - Event data with trigger element
+   * @param {Panel} ePanel - The panel containing the tree
+   */
+  "tree_toggle-children": function(n, e) {
+    toggleTreeChildren(e, n);
+  }
+}, SearchHandlers = {
+  /**
+   * Perform search with query string construction.
+   * Builds href with search query and additional query parameters.
+   *
+   * @param {Object} eventData - Event data with href, formData.q, and targetval
+   * @param {Panel} ePanel - The panel to update
+   */
+  search: function(n, e) {
+    let t = `${n.href}`;
+    const r = n.formData.q, i = n.targetval;
+    if (r !== "" && (t = `${t}?q=${r}`), i !== "") {
+      let o = i;
+      i.includes("page=") && (o = i.split("&").filter((a) => !a.includes("page=")).join("&")), t = r !== "" ? `${t}&${o}` : `${t}?${o}`;
+    }
+    this.user.fetchAndSplit(t, e.abortController.signal).then(
+      (o) => e.onReplacePartialDom(o, n.zvptarget)
+    );
+  },
+  /**
+   * Reset search form and query parameters.
+   * Clears the 'q' field in the closest form and removes 'q' from query params.
+   *
+   * @param {Object} eventData - Event data with trigger element
+   * @param {Panel} ePanel - The panel to update
+   */
+  reset_search: function(n, e) {
+    const t = n.trigger.closest("form");
+    e.removeFromQParams("q"), t.elements.q.value = "", t.dispatchEvent(new Event("submit"));
+  }
+}, QueryParamHandlers = {
+  /**
+   * Handle pagination by fetching content with query parameters.
+   *
+   * @param {Object} eventData - Event data with href and targetval for pagination
+   * @param {Panel} ePanel - The panel to update
+   */
+  paginate: function(n, e) {
+    const t = `${n.href}?${n.targetval}`;
+    this.user.fetchAndSplit(t, e.abortController.signal).then(
+      (r) => e.onReplacePartialDom(r, n.zvptarget)
+    );
+  },
+  /**
+   * Handle list filtering with query parameters.
+   *
+   * @param {Object} eventData - Event data with href and targetval for filtering
+   * @param {Panel} ePanel - The panel to update
+   */
+  list_filter: function(n, e) {
+    const t = `${n.href}?${n.targetval}`;
+    this.user.fetchAndSplit(t, e.abortController.signal).then(
+      (r) => e.onReplacePartialDom(r, n.zvptarget)
+    );
+  }
+}, handlers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  MdcTreeHandlers,
+  QueryParamHandlers,
+  SearchHandlers
+}, Symbol.toStringTag, { value: "Module" }));
+class View extends EVT {
+  //--[ Static ]--
+  /**
+   * Returns the view event type code used for dispatching view events.
+   * @return {string} The VIEW event type
+   */
+  static viewEventCode() {
+    return UiEventType.VIEW;
+  }
+  /**
+   * Creates a new View instance. Initializes panel management, event handling,
+   * and metadata storage.
+   */
+  constructor() {
+    super(), this.panelMap = /* @__PURE__ */ new Map(), this.user_ = void 0, this.split_ = void 0, this.panelEventMap_ = this.initPanelEventsInternal_(), this.switchViewMap_ = /* @__PURE__ */ new Map(), this.metaData_ = /* @__PURE__ */ new Map(), this.recordHistory_ = void 0, this.registerViewConstructor_ = void 0;
+  }
+  set recordHistory(e) {
+    this.recordHistory_ = e;
+  }
+  get recordHistory() {
+    return this.recordHistory_;
+  }
+  set registerViewConstructor(e) {
+    this.registerViewConstructor_ = e;
+  }
+  get registerViewConstructor() {
+    return this.registerViewConstructor_;
+  }
+  set split(e) {
+    this.split_ = e, this.listen(this.split_, UiEventType.SPLIT, (t) => {
+      const r = t.detail.getValue(), i = t.detail.getData();
+      switch (r) {
+        case UiEventType.SPLIT_WILL_OPEN:
+          this.onSplitWillOpen(i);
+          break;
+        case UiEventType.SPLIT_WILL_CLOSE:
+          this.onSplitWillClose(i);
+          break;
+        case UiEventType.SPLIT_DID_CLOSE:
+          this.onSplitDidClose(i);
+          break;
+        case UiEventType.SPLIT_DID_OPEN:
+          this.onSplitDidOpen(i);
+          break;
+        case UiEventType.SPLIT_TRANSITION_END:
+          break;
+      }
+    });
+  }
+  get split() {
+    if (!this.split_)
+      throw new Error("No SPLIT component available");
+    return this.split_;
+  }
+  /**
+   * @param {!UserManager} user
+   */
+  set user(e) {
+    this.user_ = e, this.panelMap.forEach((t) => t.user = e);
+  }
+  /**
+   * @return {!UserManager}
+   */
+  get user() {
+    return this.user_ || (this.user_ = new UserManager()), this.user_;
+  }
+  /**
+   * Render each of the panels in this view.
+   */
+  render() {
+    this.initPanelEvents(), this.preRender(), this.configurePanels(), this.displayPanels(), this.postRender();
+  }
+  /**
+   * Placeholder for subclasses to add panel event functions.
+   */
+  initPanelEvents() {
+  }
+  /**
+   * Run before the render.
+   */
+  preRender() {
+  }
+  /**
+   * Placeholder for panel configuration functionality;
+   */
+  configurePanels() {
+  }
+  /**
+   * Placeholder for panel display functionality;
+   */
+  displayPanels() {
+  }
+  /**
+   * Placeholder for post render functionality.
+   */
+  postRender() {
+  }
+  /**
+   * @inheritDoc
+   */
+  dispose() {
+    [...this.panelMap.values()].forEach((e) => e.dispose()), super.dispose();
+  }
+  /**
+   * Add a panel as a child of the view.
+   * @param {string} name The name of the panel - used as a key in the panel map.
+   * @param {!Panel} panel The panel itself.
+   */
+  addPanelToView(e, t) {
+    t.user = this.user, this.removePanelByName(e), this.panelMap.set(e, t), this.listen(t, Panel.panelEventCode(), this.onPanelEvent.bind(this));
+  }
+  /**
+   * Remove a panel from the view by name.
+   * @param {string} name The name of the panel - used as a key in the panel map.
+   */
+  removePanelByName(e) {
+    this.panelMap.has(e) && this.panelMap.get(e).dispose();
+  }
+  /**
+   * @param {Panel} panel
+   */
+  removePanel(e) {
+    const [t, r] = [...this.panelMap.entries()].find(([i, o]) => o === e);
+    t && r && (r.dispose(), this.panelMap.delete(t));
+  }
+  /**
+   * @param {string} name
+   * @return {Panel|undefined}
+   */
+  getPanelByName(e) {
+    return this.panelMap.get(e);
+  }
+  /**
+   * Broadcasts data to all panels in this view. Each panel receives the data
+   * via its onViewDataBroadcast method.
+   * @param {*} data The data to broadcast to all panels
+   */
+  broadcastToPanels(e) {
+    [...this.panelMap.values()].forEach((t) => t.onViewDataBroadcast(e));
+  }
+  /**
+   * Initializes the internal panel event map with default event handlers.
+   * Sets up handlers for panel lifecycle and view coordination.
+   *
+   * Note: This method also registers application-specific handlers (search,
+   * pagination, etc.) for backwards compatibility. These will be removed in
+   * a future version - applications should explicitly register handlers they need.
+   *
+   * @return {!Map<string, !Function>} Map of event names to handler functions
+   * @private
+   */
+  initPanelEventsInternal_() {
+    const e = /* @__PURE__ */ new Map();
+    return e.set("destroy_me", (t, r) => {
+      this.removePanel(r);
+    }), e.set("switch_view", (t, r) => {
+      this.debugMe("switch_view received: eventData", t);
+      const i = t.view;
+      this.switchViewMap_.has(i) ? this.switchViewMap_.get(i)(t, r) : this.debugMe("NO VIEW FOUND FOR:", i, this.switchViewMap_);
+    }), Object.entries({
+      ...SearchHandlers,
+      ...QueryParamHandlers
+    }).forEach(([t, r]) => {
+      e.set(t, r.bind(this));
+    }), e;
+  }
+  /**
+   * Maps a panel event name to a handler function. Allows dynamic registration
+   * of custom panel event handlers at runtime.
+   * @param {string} s The event name to map
+   * @param {!Function} func The handler function that receives (eventData, ePanel)
+   */
+  mapPanEv(e, t) {
+    this.panelEventMap_.set(e, t);
+  }
+  /**
+   * A map of string to function where the function receives an object and
+   * a panel.
+   * @param {string} s
+   * @param {function(
+   *  {view:string, pk:string, emit:string, href:string}, Panel):?} func
+   */
+  mapSwitchView(e, t) {
+    this.switchViewMap_.set(e, t);
+  }
+  /**
+   * @param {!CustomEvent} e
+   */
+  onPanelEvent(e) {
+    const t = e.detail.getValue(), r = e.detail.getData(), i = (
+      /** @type {Panel} */
+      e.target
+    );
+    this.panelEventMap_.has(t) ? this.panelEventMap_.get(t)(r, i) : this.debugMe(`NO EVENT MATCH
+          oPe: ${e}
+          eventValue: ${t}
+          eventData: ${JSON.stringify(r, void 0, 2)}
+          ePanel: ${i.constructor.name}`);
+  }
+  //--[ Split Events ]--
+  /**
+   * Triggered before a split will open.
+   *
+   * @param {{nestName: !string, nestEl:!HTMLElement}} _data
+   */
+  onSplitWillOpen(e) {
+  }
+  /**
+   * Triggered before a split will close.
+   *
+   * @param {{nestName: !string, nestEl:!HTMLElement}} _data
+   */
+  onSplitWillClose(e) {
+  }
+  /**
+   * Triggered after a split closed.
+   *
+   * @param {{nestName: !string, nestEl:!HTMLElement}} _data
+   */
+  onSplitDidClose(e) {
+  }
+  /**
+   * Triggered after a split opened.
+   *
+   * @param {{nestName: !string, nestEl:!HTMLElement}} _data
+   */
+  onSplitDidOpen(e) {
+  }
+  //--[ Built in events ]--
+  /**
+   * Dispatches a {@code UiEventType.VIEW} event.
+   * A shorthand method to get panels to dispatch uniform events.
+   * Views may listen just to this event, and act on the supplied value or
+   * data payload.
+   * Example:
+   *    b.listen(a, Component.compEventCode(), e => {
+   *      console.log('B got', Component.compEventCode(), e);
+   *      console.log('Value is', e.detail.getValue());
+   *      console.log('Data is', e.detail.getData());
+   *    });
+   * @param {string|number} value
+   * @param {(string|number|?Object)=} opt_data
+   * @return {boolean} If anyone called preventDefault on the event object (or
+   *     if any of the handlers returns false this will also return false.
+   */
+  dispatchViewEvent(e, t) {
+    const r = new ZooyEventData(e, t), i = EVT.makeEvent(UiEventType.VIEW, r);
+    return this.dispatchEvent(i);
+  }
+  //--[  Meta Data ]--
+  /**
+   * Returns the metadata map associated with this view.
+   * @return {!Map<string, *>} The metadata map
+   */
+  get metaData() {
+    return this.metaData_;
+  }
+  /**
+   * Sets a metadata key-value pair for this view.
+   * @param {string} k The metadata key
+   * @param {*} v The metadata value
+   * @return {!Map<string, *>} The updated metadata map
+   */
+  setMetaData(e, t) {
+    return this.metaData_.set(e, t), this.metaData;
+  }
+  /**
+   * Retrieves a metadata value by key.
+   * @param {string} k The metadata key
+   * @return {*} The metadata value, or undefined if not found
+   */
+  getMetaData(e) {
+    return this.metaData_.get(e);
+  }
+  /**
+   * Checks if a metadata key exists.
+   * @param {string} k The metadata key
+   * @return {boolean} True if the key exists, false otherwise
+   */
+  hasMetaData(e) {
+    return this.metaData_.has(e);
+  }
+}
+class Conductor extends EVT {
+  /**
+   * Creates a new Conductor instance. Sets up browser history listening
+   * and initializes view event handling.
+   */
+  constructor() {
+    super(), this.activeView_ = null, this.user_ = void 0, this.split_ = void 0, this.viewEventMap_ = this.initViewEventsInternal_(), this.viewConstructorMap_ = /* @__PURE__ */ new Map(), window.addEventListener("popstate", (e) => {
+      e.state !== null && this.navTo(e.state);
+    });
+  }
+  set split(e) {
+    this.split_ = e;
+  }
+  get split() {
+    if (!this.split_)
+      throw new Error("No SPLIT component available");
+    return this.split_;
+  }
+  /**
+   * @param {!UserManager} user
+   */
+  set user(e) {
+    this.user_ = e, this.activeView_ && (this.activeView_.user = this.user);
+  }
+  /**
+   * @return {!UserManager}
+   */
+  get user() {
+    return this.user_ || (this.user_ = new UserManager()), this.user_;
+  }
+  /**
+   * Initializes the internal view event map with default event handlers.
+   * Sets up handlers for common view events like 'switch_view'.
+   * @return {!Map<string, !Function>} Map of event names to handler functions
+   * @private
+   */
+  initViewEventsInternal_() {
+    return (/* @__PURE__ */ new Map()).set("switch_view", (e, t) => {
+      if (this.viewConstructorMap_.has(e.view)) {
+        const r = this.viewConstructorMap_.get(e.view)(
+          e.pk,
+          e
+        );
+        this.switchView(r);
+      }
+    });
+  }
+  /**
+   * Maps a view event name to a handler function. Allows dynamic registration
+   * of custom view event handlers at runtime.
+   * @param {string} s The event name to map
+   * @param {!Function} func The handler function that receives (eventData, eView)
+   */
+  mapViewEv(e, t) {
+    this.viewEventMap_.set(e, t);
+  }
+  /**
+   * Registers a view constructor function that can be used to create instances
+   * of a specific view type.
+   * @param {string} s The view type identifier
+   * @param {!Function} f Constructor function that receives (pk, data) and returns a View
+   */
+  registerViewConstructor(e, t) {
+    this.viewConstructorMap_.set(e, t);
+  }
+  /**
+   * @param {!CustomEvent} e Event object.
+   */
+  onViewEvent(e) {
+    const t = e.detail.getValue(), r = e.detail.getData(), i = (
+      /** @type {Panel} */
+      e.target
+    );
+    this.viewEventMap_.has(t) ? this.viewEventMap_.get(t)(r, i) : console.warn("Unhandled VIEW Event:", e, t, r, i);
+  }
+  /**
+   * Make the given view active.
+   * @param {!View} view
+   */
+  setActiveView(e) {
+    this.activeView_ && (this.stopListeningTo(this.activeView_), this.activeView_.dispose(), this.activeView_ = null, delete this.activeView_), this.activeView_ = e, this.activeView_.render();
+  }
+  /**
+   * @param {!View} view
+   * @returns {!View}
+   */
+  initView(e) {
+    return e.user = this.user, e.split = this.split, e.recordHistory = this.recordHistory.bind(this), e.registerViewConstructor = this.registerViewConstructor.bind(this), this.listen(e, View.viewEventCode(), this.onViewEvent.bind(this)), e;
+  }
+  //--[ Views Utilities ]--
+  /**
+   * @param {!View} view The view we want active.
+   */
+  switchView(e) {
+    this.setActiveView(this.initView(e));
+  }
+  //--[ History and Navigation ]--
+  /**
+   * Records the given item in browser history. If item.init is true, replaces
+   * the current history state. Otherwise, pushes a new history state unless
+   * item.history is true.
+   * @param {!Object} item The history item containing view state
+   */
+  recordHistory(e) {
+    this.debugMe("HISTORY", e), e.init ? history.replaceState(e, "", document.location.href) : e.history || history.pushState(e, "", null);
+  }
+  /**
+   * Navigates to a specific view based on the history item. Attempts to use
+   * the active view's switchViewMap first, falling back to registered view
+   * constructors if needed.
+   * @param {!Object} item History item containing {view, pk, ...} properties
+   */
+  navTo = (e) => {
+    e.history = !0;
+    const t = e.view, r = this.activeView_;
+    if (r.switchViewMap_.has(t))
+      this.debugMe("NAV:VIEW:MAP", e), r.switchViewMap_.get(t)(e);
+    else if (this.viewConstructorMap_.has(t)) {
+      const i = this.viewConstructorMap_.get(t)(e.pk, e);
+      this.debugMe("NAV:NEW:VIEW", e), this.switchView(i);
+    }
+  };
+}
+async function loadIcon(n, e = 16) {
+  try {
+    return (await import(`@carbon/icons/es/${n}/${e}.js`)).default;
+  } catch (t) {
+    throw console.error(`[Zooy] Failed to load icon: ${n}/${e}`, t), new Error(`Icon not found: ${n}/${e}. Check https://carbondesignsystem.com/guidelines/icons/library/`);
+  }
+}
+function iconDataToElement(n, e = {}) {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg"), r = {
+    ...n.attrs,
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    "aria-hidden": "true",
+    ...e
+  };
+  return Object.entries(r).forEach(([i, o]) => {
+    t.setAttribute(i, o);
+  }), n.content && n.content.forEach((i) => {
+    const o = document.createElementNS("http://www.w3.org/2000/svg", i.elem);
+    i.attrs && Object.entries(i.attrs).forEach(([a, p]) => {
+      o.setAttribute(a, p);
+    }), t.appendChild(o);
+  }), t;
+}
+async function createIcon(n, e = 16, t = {}) {
+  const r = await loadIcon(n, e);
+  return iconDataToElement(r, t);
+}
+async function getIconSVG(n, e = 16, t = {}) {
+  return (await createIcon(n, e, t)).outerHTML;
+}
+const Icons = {
+  // Actions
+  ADD: "add",
+  EDIT: "edit",
+  DELETE: "trash-can",
+  SAVE: "save",
+  CLOSE: "close",
+  SEARCH: "search",
+  FILTER: "filter",
+  SETTINGS: "settings",
+  // Navigation
+  CHEVRON_LEFT: "chevron--left",
+  CHEVRON_RIGHT: "chevron--right",
+  CHEVRON_UP: "chevron--up",
+  CHEVRON_DOWN: "chevron--down",
+  ARROW_LEFT: "arrow--left",
+  ARROW_RIGHT: "arrow--right",
+  MENU: "menu",
+  // Status
+  CHECKMARK: "checkmark",
+  ERROR: "error",
+  WARNING: "warning",
+  INFO: "information",
+  // Files & Folders
+  FOLDER: "folder",
+  DOCUMENT: "document",
+  DOWNLOAD: "download",
+  UPLOAD: "upload",
+  // Common UI
+  OVERFLOW_MENU: "overflow-menu--vertical",
+  VIEW: "view",
+  VIEW_OFF: "view--off",
+  COPY: "copy",
+  LINK: "link",
+  USER: "user",
+  NOTIFICATION: "notification"
+};
+async function carbonIcon(n, e = 16) {
+  return createIcon(n, e, { slot: "icon" });
+}
+const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Icons,
+  carbonIcon,
+  createIcon,
+  getIconSVG,
+  iconDataToElement,
+  loadIcon
+}, Symbol.toStringTag, { value: "Module" }));
+async function registerCarbonLibrary() {
+  const { registerCarbonLibrary: n } = await import("./register-JwwMwdRf.js");
+  return n();
+}
+async function registerMdcLibrary() {
+  const { registerMdcLibrary: n } = await import("./register-BK21_Wkj.js");
+  return n();
+}
+const zooy = {
+  EVT,
+  Component,
+  Dragger,
+  Panel,
+  FormPanel,
+  Split,
+  UserManager,
+  View,
+  Conductor,
+  UiEventType,
+  domUtils,
+  uriUtils,
+  icons,
+  registerCarbonLibrary,
+  registerMdcLibrary,
+  ComponentLibraryRegistry,
+  handlers
+};
+export {
+  ComponentLibraryRegistry as C,
+  treeUtils as a,
+  getElDataMap as g,
+  isDefAndNotNull as i,
+  toLowerCase as t,
+  zooy as z
+};