web-mojo 2.3.2 → 2.3.5

package/dist/web-mojo.lite.iife.js

@@ -5379,23 +5379,11 @@ var MOJO = (function(exports) {
     }
     constructor(options = {}) {
       const modalId = options.id || `modal-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-      options.header === false || options.header === null;
-      options.headerContent !== void 0 && options.headerContent !== null;
-      let resolvedStyle = options.style;
-      let bandlessClass = "";
-      if (options.eyebrow === false || options.eyebrow === null) {
-        bandlessClass = "modal-bandless";
-      } else if (options.eyebrow) {
-        const safe = String(options.eyebrow).replace(/['"\\]/g, "");
-        const styleVar = `--mojo-eyebrow: '${safe}'`;
-        resolvedStyle = [resolvedStyle, styleVar].filter(Boolean).join("; ");
-      }
       super({
         ...options,
         id: modalId,
         tagName: "div",
-        className: `modal ${options.fade !== false ? "fade" : ""} ${bandlessClass} ${options.className || ""}`.trim().replace(/\s+/g, " "),
-        style: resolvedStyle,
+        className: `modal ${options.fade !== false ? "fade" : ""} ${options.className || ""}`.trim().replace(/\s+/g, " "),
         attributes: {
           tabindex: "-1",
           "aria-hidden": "true",
@@ -8499,48 +8487,91 @@ var MOJO = (function(exports) {
     metrics: ["view_metrics", "manage_metrics", "write_metrics"],
     files: ["view_fileman", "manage_files", "view_vault", "manage_vault"]
   };
-  User.GRANULAR_TO_CATEGORY = {};
-  for (const [category, perms] of Object.entries(User.CATEGORY_GRANULAR_MAP)) {
-    for (const perm of perms) {
-      User.GRANULAR_TO_CATEGORY[perm] = category;
-    }
-  }
   User.APP_CATEGORY_PERMISSIONS = [];
   User.APP_GRANULAR_PERMISSIONS = [];
-  User.PERMISSIONS = [
-    ...User.CATEGORY_PERMISSIONS,
-    ...User.GRANULAR_PERMISSION_TABS.flatMap((tab) => tab.permissions),
-    ...User.APP_CATEGORY_PERMISSIONS,
-    ...User.APP_GRANULAR_PERMISSIONS
-  ];
-  User.PERMISSION_FIELDS = [
-    ...User.PERMISSIONS.map((permission) => ({
-      name: `permissions.${permission.name}`,
+  User._permSwitch = function(p) {
+    return {
+      name: `permissions.${p.name}`,
       type: "switch",
-      label: permission.label,
-      columns: 6
-    }))
-  ];
-  const _permSwitch = (p) => ({ name: `permissions.${p.name}`, type: "switch", label: p.label, columns: 6, ...p.tooltip ? { tooltip: p.tooltip } : {} });
-  User.CATEGORY_PERMISSION_FIELDS = (() => {
-    const tabs = [
-      { label: "System", fields: User.CATEGORY_PERMISSIONS.map(_permSwitch) }
+      label: p.label,
+      columns: 6,
+      ...p.tooltip ? { tooltip: p.tooltip } : {}
+    };
+  };
+  User.PERMISSIONS = [];
+  User.PERMISSION_FIELDS = [];
+  User.CATEGORY_PERMISSION_FIELDS = [];
+  User.GRANULAR_PERMISSION_FIELDS = [];
+  User.GRANULAR_TO_CATEGORY = {};
+  User.rebuildPermissions = function() {
+    const _ps = User._permSwitch;
+    User.PERMISSIONS.length = 0;
+    User.PERMISSIONS.push(
+      ...User.CATEGORY_PERMISSIONS,
+      ...User.GRANULAR_PERMISSION_TABS.flatMap((tab) => tab.permissions),
+      ...User.APP_CATEGORY_PERMISSIONS,
+      ...User.APP_GRANULAR_PERMISSIONS
+    );
+    User.PERMISSION_FIELDS.length = 0;
+    User.PERMISSION_FIELDS.push(...User.PERMISSIONS.map(_ps));
+    const categoryTabs = [
+      { label: "System", fields: User.CATEGORY_PERMISSIONS.map(_ps) }
     ];
     if (User.APP_CATEGORY_PERMISSIONS.length > 0) {
-      tabs.push({ label: "App", fields: User.APP_CATEGORY_PERMISSIONS.map(_permSwitch) });
+      categoryTabs.push({ label: "App", fields: User.APP_CATEGORY_PERMISSIONS.map(_ps) });
     }
-    return [{ type: "tabset", tabs }];
-  })();
-  User.GRANULAR_PERMISSION_FIELDS = (() => {
-    const tabs = User.GRANULAR_PERMISSION_TABS.map((tab) => ({
+    User.CATEGORY_PERMISSION_FIELDS.length = 0;
+    User.CATEGORY_PERMISSION_FIELDS.push({ type: "tabset", tabs: categoryTabs });
+    const granularTabs = User.GRANULAR_PERMISSION_TABS.map((tab) => ({
       label: tab.label,
-      fields: tab.permissions.map(_permSwitch)
+      fields: tab.permissions.map(_ps)
     }));
     if (User.APP_GRANULAR_PERMISSIONS.length > 0) {
-      tabs.push({ label: "App", fields: User.APP_GRANULAR_PERMISSIONS.map(_permSwitch) });
+      granularTabs.push({ label: "App", fields: User.APP_GRANULAR_PERMISSIONS.map(_ps) });
+    }
+    User.GRANULAR_PERMISSION_FIELDS.length = 0;
+    User.GRANULAR_PERMISSION_FIELDS.push({ type: "tabset", tabs: granularTabs });
+    for (const k of Object.keys(User.GRANULAR_TO_CATEGORY)) {
+      delete User.GRANULAR_TO_CATEGORY[k];
+    }
+    for (const [category, perms] of Object.entries(User.CATEGORY_GRANULAR_MAP)) {
+      for (const perm of perms) {
+        User.GRANULAR_TO_CATEGORY[perm] = category;
+      }
+    }
+  };
+  User.registerCategoryMap = function(map) {
+    if (!map) return;
+    let touched = false;
+    for (const [category, perms] of Object.entries(map)) {
+      if (!Array.isArray(perms)) continue;
+      const existing = User.CATEGORY_GRANULAR_MAP[category] || [];
+      User.CATEGORY_GRANULAR_MAP[category] = Array.from(/* @__PURE__ */ new Set([...existing, ...perms]));
+      touched = true;
+    }
+    if (touched) User.rebuildPermissions();
+  };
+  User.registerPermissions = function(spec) {
+    if (!spec) return;
+    if (Array.isArray(spec.categories)) {
+      User.APP_CATEGORY_PERMISSIONS.push(...spec.categories);
+    }
+    if (Array.isArray(spec.granularPermissions)) {
+      User.APP_GRANULAR_PERMISSIONS.push(...spec.granularPermissions);
+    }
+    if (Array.isArray(spec.granularTabs)) {
+      User.GRANULAR_PERMISSION_TABS.push(...spec.granularTabs);
     }
-    return [{ type: "tabset", tabs }];
-  })();
+    if (spec.categoryGranularMap) {
+      for (const [category, perms] of Object.entries(spec.categoryGranularMap)) {
+        if (!Array.isArray(perms)) continue;
+        const existing = User.CATEGORY_GRANULAR_MAP[category] || [];
+        User.CATEGORY_GRANULAR_MAP[category] = Array.from(/* @__PURE__ */ new Set([...existing, ...perms]));
+      }
+    }
+    User.rebuildPermissions();
+  };
+  User.rebuildPermissions();
   const UserForms = {
     create: {
       title: "Create User",
@@ -8824,25 +8855,6 @@ var MOJO = (function(exports) {
     }
   };
   class Modal {
-    // ── Global eyebrow toggle ──────────────────────────────────
-    //
-    // The eyebrow band can be disabled app-wide by setting the
-    // `mojo-no-eyebrow` class on <html>. These helpers just wrap that so
-    // callers don't have to touch the DOM directly.
-    //
-    // Modal.setEyebrowEnabled(false);  // turn the band off everywhere
-    // Modal.setEyebrowEnabled(true);   // turn it back on
-    // if (Modal.isEyebrowEnabled()) ...
-    /** Enable or disable the eyebrow band on every modal in the app. */
-    static setEyebrowEnabled(enabled) {
-      if (typeof document === "undefined") return;
-      document.documentElement.classList.toggle("mojo-no-eyebrow", !enabled);
-    }
-    /** True when the eyebrow band is enabled (the default). */
-    static isEyebrowEnabled() {
-      if (typeof document === "undefined") return true;
-      return !document.documentElement.classList.contains("mojo-no-eyebrow");
-    }
     // ── Internal: shared render → show → resolve helper ────────
     //
     // Most static helpers want the same lifecycle: render the modal into
@@ -8968,49 +8980,6 @@ var MOJO = (function(exports) {
      * `value` (or its `action` / index when `value` is omitted), or
      * `null` on dismiss.
      */
-    /**
-     * Build a CSS `style` string with the `--mojo-eyebrow` custom property
-     * set so the hero band's `content` picks it up. View applies the
-     * returned string to `element.style.cssText` on the modal root.
-     *
-     * Caller's `eyebrow` option (string | null | '' | false | undefined)
-     * always wins over the helper's default. `null`, `''`, and `false`
-     * all clear the band content. `undefined` falls back to the default.
-     *
-     * @param {string} defaultEyebrow - the helper's default eyebrow text
-     * @param {string|null|false|undefined} callerEyebrow - user override
-     * @param {string} [callerStyle] - any other style string from the caller
-     * @returns {string} merged style string suitable for opts.style
-     */
-    /**
-     * Resolve the eyebrow text a helper will end up showing.
-     * Pure function — no formatting, just the value.
-     */
-    static _resolveEyebrow(defaultEyebrow, callerEyebrow) {
-      if (callerEyebrow === null || callerEyebrow === false || callerEyebrow === "") return "";
-      if (typeof callerEyebrow === "string") return callerEyebrow;
-      return defaultEyebrow || "";
-    }
-    /**
-     * If the modal-header title would just duplicate the band's eyebrow
-     * (case-insensitive), suppress the header title — the band already
-     * carries it and is the always-on system anchor.
-     */
-    static _suppressDuplicateTitle(title, eyebrowText) {
-      if (!eyebrowText || !title) return title;
-      const t = String(title).trim().toUpperCase();
-      const e = String(eyebrowText).trim().toUpperCase();
-      return t === e ? "" : title;
-    }
-    static _eyebrowStyle(defaultEyebrow, callerEyebrow, callerStyle) {
-      if (callerEyebrow === void 0 && typeof callerStyle === "string" && callerStyle.includes("--mojo-eyebrow")) {
-        return callerStyle;
-      }
-      const finalText = Modal._resolveEyebrow(defaultEyebrow, callerEyebrow);
-      const safe = String(finalText).replace(/['"\\]/g, "");
-      const styleVar = `--mojo-eyebrow: '${safe}'`;
-      return [callerStyle, styleVar].filter(Boolean).join("; ");
-    }
     static async dialog(options = {}) {
       if (typeof options === "string") {
         const message2 = arguments[0];
@@ -9028,21 +8997,15 @@ var MOJO = (function(exports) {
         centered = true,
         buttons = [{ text: "OK", class: "btn-primary", value: true }],
         rejectOnDismiss = false,
-        eyebrow,
-        style: callerStyle,
         ...rest2
       } = options;
       const resolvedBody = body ?? view ?? message ?? content ?? "";
-      const eyebrowText = Modal._resolveEyebrow("", eyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(title, eyebrowText);
-      const style = Modal._eyebrowStyle("", eyebrow, callerStyle);
       const modal = new ModalView({
-        title: finalTitle,
+        title,
         body: resolvedBody,
         size,
         centered,
         buttons,
-        style,
         ...rest2
       });
       return Modal._renderAndAwait(modal, { buttons, rejectOnDismiss });
@@ -9111,10 +9074,6 @@ var MOJO = (function(exports) {
         body: composedBody,
         size,
         centered: false,
-        // The drawer header replaces the modal's hero band entirely —
-        // suppress the band so the caller's eyebrow/title/meta block
-        // owns the top of the card cleanly.
-        className: `modal-bandless ${rest2.className || ""}`.trim(),
         buttons: [{ text: "Close", class: "btn-secondary", dismiss: true }],
         ...rest2
       });
@@ -9130,7 +9089,6 @@ var MOJO = (function(exports) {
      * (views typically have their own headers). Size defaults to `lg`.
      */
     static async show(view, options = {}) {
-      const { eyebrow, style: callerStyle, ...rest2 } = options;
       return Modal.dialog({
         header: options.title !== void 0 ? !!options.title : false,
         title: options.title || void 0,
@@ -9138,8 +9096,7 @@ var MOJO = (function(exports) {
         size: "lg",
         centered: false,
         buttons: [{ text: "Close", class: "btn-secondary", dismiss: true }],
-        style: Modal._eyebrowStyle("DETAILS", eyebrow, callerStyle),
-        ...rest2
+        ...options
       });
     }
     /**
@@ -9185,14 +9142,12 @@ var MOJO = (function(exports) {
         );
       }
       const viewInstance = new ViewClass({ model });
-      const { eyebrow, style: callerStyle, ...rest2 } = options;
       return Modal.dialog({
         header: false,
         body: viewInstance,
         size: "lg",
         centered: false,
-        style: Modal._eyebrowStyle("DETAILS", eyebrow, callerStyle),
-        ...rest2
+        ...options
       });
     }
     // ── alert / confirm / prompt / showError ──────────────────
@@ -9216,32 +9171,28 @@ var MOJO = (function(exports) {
         message = "",
         title: resolvedTitle = "Alert",
         type = "info",
-        eyebrow: callerEyebrow,
+        icon: callerIcon,
         className: callerClassName,
-        style: callerStyle,
         ...rest2
       } = opts;
       const typeKey = type === "danger" ? "error" : type;
       const typeClass = `modal-alert modal-alert-${typeKey}`;
       const className = [typeClass, callerClassName].filter(Boolean).join(" ");
-      const defaultEyebrowMap = {
-        info: "INFORMATION",
-        success: "SUCCESS",
-        warning: "WARNING",
-        error: "ERROR"
+      const defaultIcons = {
+        info: "bi-info-circle",
+        success: "bi-check-circle",
+        warning: "bi-exclamation-triangle",
+        error: "bi-x-circle"
       };
-      const defaultEyebrow = defaultEyebrowMap[typeKey] ?? defaultEyebrowMap.info;
-      const eyebrowText = Modal._resolveEyebrow(defaultEyebrow, callerEyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(resolvedTitle, eyebrowText);
-      const style = Modal._eyebrowStyle(defaultEyebrow, callerEyebrow, callerStyle);
-      const titleHtml = finalTitle ? `<span class="modal-alert-headline">${finalTitle}</span>` : "";
+      const iconClass = callerIcon !== void 0 ? callerIcon : defaultIcons[typeKey];
+      const iconHtml = iconClass ? `<i class="bi ${iconClass} modal-alert-icon"></i>` : "";
+      const headlineHtml = `<span class="modal-alert-headline">${resolvedTitle}</span>`;
       return Modal.dialog({
-        title: titleHtml,
+        title: `${iconHtml}${headlineHtml}`,
         body: `<p class="modal-alert-message">${message}</p>`,
         size: "sm",
         centered: true,
         className,
-        style,
         buttons: [{ text: "OK", class: "btn-primary", value: true }],
         ...rest2
       });
@@ -9263,19 +9214,14 @@ var MOJO = (function(exports) {
         { text: options.cancelText || "Cancel", class: "btn-secondary", dismiss: true, action: "cancel" },
         { text: options.confirmText || "Confirm", class: options.confirmClass || "btn-primary", action: "confirm" }
       ];
-      const { eyebrow, style: callerStyle, ...rest2 } = options;
-      const eyebrowText = Modal._resolveEyebrow("CONFIRM", eyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(title, eyebrowText);
-      const style = Modal._eyebrowStyle("CONFIRM", eyebrow, callerStyle);
       const modal = new ModalView({
-        title: finalTitle,
+        title,
         body: `<p>${message}</p>`,
         size: options.size || "sm",
         centered: true,
         backdrop: "static",
         buttons,
-        style,
-        ...rest2
+        ...options
       });
       const result = await Modal._renderAndAwait(modal, { buttons });
       return result === "confirm";
@@ -9293,12 +9239,8 @@ var MOJO = (function(exports) {
         { text: "Cancel", class: "btn-secondary", dismiss: true },
         { text: "OK", class: "btn-primary", action: "ok" }
       ];
-      const { eyebrow, style: callerStyle, ...rest2 } = options;
-      const eyebrowText = Modal._resolveEyebrow("INPUT", eyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(title, eyebrowText);
-      const style = Modal._eyebrowStyle("INPUT", eyebrow, callerStyle);
       const modal = new ModalView({
-        title: finalTitle,
+        title,
         body: `
                 <p>${message}</p>
                 <input type="${inputType}"
@@ -9311,8 +9253,7 @@ var MOJO = (function(exports) {
         centered: true,
         backdrop: "static",
         buttons,
-        style,
-        ...rest2
+        ...options
       });
       modal.on("shown", () => {
         const input = modal.element.querySelector(`#${inputId}`);
@@ -9348,8 +9289,6 @@ var MOJO = (function(exports) {
         centered = true,
         submitText = "Submit",
         cancelText = "Cancel",
-        eyebrow,
-        style: callerStyle,
         ...rest2
       } = options;
       const FormView2 = (await Promise.resolve().then(() => FormView$1)).default;
@@ -9369,17 +9308,12 @@ var MOJO = (function(exports) {
         { text: cancelText, class: "btn-secondary", action: "cancel" },
         { text: submitText, class: "btn-primary", action: "submit" }
       ];
-      const defaultEyebrow = String(title || "FORM").toUpperCase();
-      const eyebrowText = Modal._resolveEyebrow(defaultEyebrow, eyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(title, eyebrowText);
-      const style = Modal._eyebrowStyle(defaultEyebrow, eyebrow, callerStyle);
       const modal = new ModalView({
-        title: finalTitle,
+        title,
         body: formView,
         size,
         centered,
         buttons,
-        style,
         ...rest2
       });
       return Modal._renderAndAwait(modal, {
@@ -9436,8 +9370,6 @@ var MOJO = (function(exports) {
         cancelText = "Cancel",
         model,
         fields,
-        eyebrow,
-        style: callerStyle,
         ...rest2
       } = options;
       if (!model) {
@@ -9460,17 +9392,12 @@ var MOJO = (function(exports) {
         { text: cancelText, class: "btn-secondary", action: "cancel" },
         { text: submitText, class: "btn-primary", action: "submit" }
       ];
-      const defaultEyebrow = String(title || "EDIT").toUpperCase();
-      const eyebrowText = Modal._resolveEyebrow(defaultEyebrow, eyebrow);
-      const finalTitle = Modal._suppressDuplicateTitle(title, eyebrowText);
-      const style = Modal._eyebrowStyle(defaultEyebrow, eyebrow, callerStyle);
       const modal = new ModalView({
-        title: finalTitle,
+        title,
         body: formView,
         size,
         centered,
         buttons,
-        style,
         ...rest2
       });
       return Modal._renderAndAwait(modal, {