jupiter-dynamic-forms 1.19.7 → 1.19.8

package/dist/index.mjs

@@ -1805,6 +1805,15 @@ const error$1 = {
     ok: "OK"
   }
 };
+const calculationWarning$1 = {
+  title: "Calculation warning",
+  summaryLine: 'Total "{{label}}" should equal {{calculated}}, but you entered {{entered}}.',
+  childrenPrefix: "Children:",
+  childAdded: "{{label}} = {{value}} (added)",
+  childSubtracted: "{{label}} = {{value}} (subtracted, opposite balance)",
+  added: "Added",
+  subtracted: "Subtracted (opposite balance)"
+};
 const enTranslations = {
   conceptInfo: conceptInfo$1,
   form: form$1,
@@ -1815,7 +1824,8 @@ const enTranslations = {
   admin: admin$1,
   validation: validation$1,
   xbrlValidation: xbrlValidation$1,
-  error: error$1
+  error: error$1,
+  calculationWarning: calculationWarning$1
 };
 const conceptInfo = {
   title: "Conceptinformatie",
@@ -1990,6 +2000,15 @@ const error = {
     ok: "OK"
   }
 };
+const calculationWarning = {
+  title: "Berekeningswaarschuwing",
+  summaryLine: 'Totaal "{{label}}" zou {{calculated}} moeten zijn, maar u heeft {{entered}} ingevoerd.',
+  childrenPrefix: "Onderdelen:",
+  childAdded: "{{label}} = {{value}} (opgeteld)",
+  childSubtracted: "{{label}} = {{value}} (afgetrokken, tegengestelde balans)",
+  added: "Opgeteld",
+  subtracted: "Afgetrokken (tegengestelde balans)"
+};
 const nlTranslations = {
   conceptInfo,
   form,
@@ -2000,7 +2019,8 @@ const nlTranslations = {
   admin,
   validation,
   xbrlValidation,
-  error
+  error,
+  calculationWarning
 };
 const translations = {
   en: enTranslations,
@@ -4936,6 +4956,79 @@ let JupiterConceptTree = class extends LitElement {
     dialog.addEventListener("close", () => document.body.removeChild(dialog));
     dialog.showModal();
   }
+  _ensureCalcWarningDialogStyles() {
+    if (document.getElementById("jdf-calc-warning-dialog-styles"))
+      return;
+    const style = document.createElement("style");
+    style.id = "jdf-calc-warning-dialog-styles";
+    style.textContent = `
+      dialog.jdf-calc-warning-dialog {
+        border: none; border-radius: 8px; padding: 0;
+        max-width: 480px; width: 90vw;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
+      }
+      dialog.jdf-calc-warning-dialog::backdrop { background: rgba(0,0,0,0.35); }
+      .jdf-calc-warning-header {
+        background: #fff3e0; padding: 14px 20px;
+        display: flex; align-items: center; justify-content: space-between;
+        border-bottom: 1px solid #ffcc80;
+      }
+      .jdf-calc-warning-title { font-size: 15px; font-weight: 600; color: #e65100; margin: 0; font-family: inherit; }
+      .jdf-calc-warning-close-btn {
+        width: 28px; height: 28px; border: none; background: transparent;
+        font-size: 20px; line-height: 1; cursor: pointer; color: #666;
+        border-radius: 4px; display: flex; align-items: center; justify-content: center;
+        padding: 0; font-family: inherit;
+      }
+      .jdf-calc-warning-close-btn:hover { background: #ffe0b2; color: #e65100; }
+      .jdf-calc-warning-body { padding: 20px; font-family: inherit; font-size: 13px; color: #333; }
+      .jdf-calc-warning-summary { margin: 0 0 12px 0; font-weight: 600; }
+      .jdf-calc-warning-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: inherit; }
+      .jdf-calc-warning-table tr:not(:last-child) td { border-bottom: 1px solid #f0f0f0; }
+      .jdf-calc-warning-table td { padding: 6px 4px; vertical-align: top; }
+      .jdf-calc-warning-sign { font-weight: 600; white-space: nowrap; }
+      .jdf-calc-warning-sign.added { color: #2e7d32; }
+      .jdf-calc-warning-sign.subtracted { color: #c62828; }
+    `;
+    document.head.appendChild(style);
+  }
+  _openCalculationWarningDialog(e2, mismatch) {
+    var _a;
+    e2.stopPropagation();
+    this._ensureCalcWarningDialogStyles();
+    const rowsHtml = mismatch.children.map((child) => `
+      <tr>
+        <td>${this._escapeHtml(child.label)}</td>
+        <td>${this._escapeHtml(String(child.value))}</td>
+        <td>${this._escapeHtml(child.balance || "—")}</td>
+        <td class="jdf-calc-warning-sign ${child.weight === 1 ? "added" : "subtracted"}">
+          ${this._escapeHtml(child.weight === 1 ? I18n.t("calculationWarning.added") : I18n.t("calculationWarning.subtracted"))}
+        </td>
+      </tr>
+    `).join("");
+    const dialog = document.createElement("dialog");
+    dialog.className = "jdf-calc-warning-dialog";
+    dialog.innerHTML = `
+      <div class="jdf-calc-warning-header">
+        <h3 class="jdf-calc-warning-title">⚠️ ${this._escapeHtml(I18n.t("calculationWarning.title"))}</h3>
+        <button class="jdf-calc-warning-close-btn" type="button" aria-label="${this._escapeHtml(I18n.t("conceptInfo.close"))}">×</button>
+      </div>
+      <div class="jdf-calc-warning-body">
+        <p class="jdf-calc-warning-summary">${this._escapeHtml(mismatch.message)}</p>
+        <table class="jdf-calc-warning-table">${rowsHtml}</table>
+      </div>
+    `;
+    document.body.appendChild(dialog);
+    (_a = dialog.querySelector(".jdf-calc-warning-close-btn")) == null ? void 0 : _a.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("click", (ev) => {
+      const rect = dialog.getBoundingClientRect();
+      if (ev.clientX < rect.left || ev.clientX > rect.right || ev.clientY < rect.top || ev.clientY > rect.bottom) {
+        dialog.close();
+      }
+    });
+    dialog.addEventListener("close", () => document.body.removeChild(dialog));
+    dialog.showModal();
+  }
   render() {
     const hasChildren = this.concept.children && this.concept.children.length > 0;
     const level = this.concept.level || 0;
@@ -4980,8 +5073,17 @@ let JupiterConceptTree = class extends LitElement {
       const shouldShowField = !isAbstract && field2;
       const storedUnit = (_b = (_a = this.unitData) == null ? void 0 : _a[this.concept.id]) == null ? void 0 : _b[column2.id];
       const storedDecimals = (_d = (_c = this.decimalsData) == null ? void 0 : _c[this.concept.id]) == null ? void 0 : _d[column2.id];
+      const calcMismatch = this.mode !== "readonly" ? (_e = this.calculationMismatches) == null ? void 0 : _e.get(`${this.concept.id}__${column2.id}`) : void 0;
       return html`
-          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""} ${this.highlightType && column2.id === this.highlightColumnId ? "highlight-" + this.highlightType : ""} ${((_e = this.calculationErrorKeys) == null ? void 0 : _e.has(`${this.concept.id}__${column2.id}`)) ? "calc-error" : ""} ${this.rowFocused ? "row-focused" : ""}">
+          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""} ${this.highlightType && column2.id === this.highlightColumnId ? "highlight-" + this.highlightType : ""} ${calcMismatch ? "calc-warning" : ""} ${this.rowFocused ? "row-focused" : ""}">
+            ${calcMismatch ? html`
+              <button
+                class="calc-warning-badge"
+                type="button"
+                title="${calcMismatch.message}"
+                @click="${(e2) => this._openCalculationWarningDialog(e2, calcMismatch)}"
+              >!</button>
+            ` : ""}
             ${shouldShowField ? html`
               <jupiter-form-field
                 .field="${field2}"
@@ -5118,6 +5220,7 @@ JupiterConceptTree.styles = css`
     }
 
     .field-cell {
+      position: relative;
       vertical-align: middle;
       padding: 2px 6px;
       border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
@@ -5192,8 +5295,35 @@ JupiterConceptTree.styles = css`
       background: rgba(25, 118, 210, 0.07);
     }
 
-    .field-cell.calc-error {
-      box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
+    /* Non-blocking JDF-036 live total/debit-credit mismatch warning — deliberately amber, distinct
+       from any future genuinely-blocking calculation error, which should use a red style instead. */
+    .field-cell.calc-warning {
+      box-shadow: inset 0 0 0 2px var(--jupiter-warning-color, #ff9800);
+    }
+
+    .calc-warning-badge {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: none;
+      background: var(--jupiter-warning-color, #ff9800);
+      color: #fff;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 1;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 3;
+    }
+
+    .calc-warning-badge:hover {
+      background: #e65100;
     }
 
     /* Row-level highlight while a field in this row has focus. Applied to every
@@ -5324,7 +5454,7 @@ __decorateClass$5([
 ], JupiterConceptTree.prototype, "highlightColumnId", 2);
 __decorateClass$5([
   n2({ type: Object })
-], JupiterConceptTree.prototype, "calculationErrorKeys", 2);
+], JupiterConceptTree.prototype, "calculationMismatches", 2);
 __decorateClass$5([
   n2({ type: String })
 ], JupiterConceptTree.prototype, "language", 2);
@@ -6029,12 +6159,18 @@ let JupiterFormSection = class extends LitElement {
     this._boundFieldBlur = (e2) => {
       this._clearHighlights();
       this._focusedConceptId = null;
+      if (this.mode === "readonly")
+        return;
+      const detail = e2.detail;
+      if ((detail == null ? void 0 : detail.conceptId) && (detail == null ? void 0 : detail.columnId)) {
+        this._runCalculationCheck(detail.conceptId, detail.columnId);
+      }
     };
     this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
     this._highlightMap = /* @__PURE__ */ new Map();
     this._focusedConceptId = null;
-    this._calculationErrorKeys = /* @__PURE__ */ new Set();
+    this._calculationMismatches = /* @__PURE__ */ new Map();
     this._totalChildrenMap = /* @__PURE__ */ new Map();
     this._memberParentMap = /* @__PURE__ */ new Map();
     this._totalConceptMap = /* @__PURE__ */ new Map();
@@ -6342,50 +6478,100 @@ let JupiterFormSection = class extends LitElement {
       return;
     const totalConcept = this._totalConceptMap.get(totalConceptId);
     const totalRaw = (_a = this.formData[totalConceptId]) == null ? void 0 : _a[columnId];
-    const errorKey = `${totalConceptId}__${columnId}`;
+    const key = `${totalConceptId}__${columnId}`;
     if (totalRaw === null || totalRaw === void 0 || totalRaw === "") {
-      if (this._calculationErrorKeys.has(errorKey)) {
-        const next2 = new Set(this._calculationErrorKeys);
-        next2.delete(errorKey);
-        this._calculationErrorKeys = next2;
-      }
+      this._clearCalculationMismatch(key);
       return;
     }
     const totalValue = parseFloat(totalRaw);
-    if (isNaN(totalValue))
+    if (isNaN(totalValue)) {
+      this._clearCalculationMismatch(key);
       return;
+    }
     const children = this._totalChildConceptsMap.get(totalConceptId) || [];
-    const childData = children.map((child) => {
-      var _a2;
-      return {
-        value: (_a2 = this.formData[child.id]) == null ? void 0 : _a2[columnId],
-        balance: child.balance
-      };
-    });
-    const isValid = JupiterFormSection._checkTotal(totalValue, childData, totalConcept.balance);
-    const next = new Set(this._calculationErrorKeys);
-    if (!isValid) {
-      next.add(errorKey);
-    } else {
-      next.delete(errorKey);
+    const { calculatedSum, hasAnyValue, breakdown } = JupiterFormSection._buildCalculationBreakdown(
+      children,
+      this.formData,
+      columnId,
+      totalConcept.balance
+    );
+    if (!hasAnyValue || JupiterFormSection._checkTotal(totalValue, calculatedSum)) {
+      this._clearCalculationMismatch(key);
+      return;
     }
-    this._calculationErrorKeys = next;
+    const detailWithoutMessage = {
+      totalConceptId,
+      totalLabel: totalConcept.label,
+      columnId,
+      sectionId: this.section.id,
+      enteredTotal: totalValue,
+      calculatedSum,
+      children: breakdown
+    };
+    const detail = {
+      ...detailWithoutMessage,
+      message: JupiterFormSection._buildMismatchMessage(detailWithoutMessage)
+    };
+    const next = new Map(this._calculationMismatches);
+    next.set(key, detail);
+    this._calculationMismatches = next;
+    this._dispatchCalculationMismatchChanged(key, detail);
+  }
+  _clearCalculationMismatch(key) {
+    if (!this._calculationMismatches.has(key))
+      return;
+    const next = new Map(this._calculationMismatches);
+    next.delete(key);
+    this._calculationMismatches = next;
+    this._dispatchCalculationMismatchChanged(key, null);
+  }
+  _dispatchCalculationMismatchChanged(key, mismatch) {
+    this.dispatchEvent(new CustomEvent("calculation-mismatch-changed", {
+      detail: { key, mismatch },
+      bubbles: true,
+      composed: true
+    }));
   }
-  static _checkTotal(totalValue, children, totalBalance) {
+  /** Single source of truth for the debit/credit weighting used both to validate the total and to build the breakdown shown to the user. */
+  static _resolveWeight(totalBalance, childBalance) {
+    return !totalBalance || !childBalance || totalBalance === childBalance ? 1 : -1;
+  }
+  static _buildCalculationBreakdown(children, formData, columnId, totalBalance) {
+    var _a;
     let calculatedSum = 0;
     let hasAnyValue = false;
+    const breakdown = [];
     for (const child of children) {
-      const val = parseFloat(child.value);
+      const val = parseFloat((_a = formData[child.id]) == null ? void 0 : _a[columnId]);
       if (isNaN(val))
         continue;
       hasAnyValue = true;
-      const weight = !totalBalance || !child.balance || totalBalance === child.balance ? 1 : -1;
+      const weight = JupiterFormSection._resolveWeight(totalBalance, child.balance);
       calculatedSum += weight * val;
+      breakdown.push({ conceptId: child.id, label: child.label, value: val, balance: child.balance, weight });
     }
-    if (!hasAnyValue)
-      return true;
+    return { calculatedSum, hasAnyValue, breakdown };
+  }
+  static _checkTotal(totalValue, calculatedSum) {
     return Math.abs(calculatedSum - totalValue) < 0.01;
   }
+  static _formatNumber(n3) {
+    return Number.isInteger(n3) ? String(n3) : n3.toFixed(2);
+  }
+  static _buildMismatchMessage(detail) {
+    const summary = I18n.t("calculationWarning.summaryLine", {
+      label: detail.totalLabel,
+      calculated: JupiterFormSection._formatNumber(detail.calculatedSum),
+      entered: JupiterFormSection._formatNumber(detail.enteredTotal)
+    });
+    if (detail.children.length === 0)
+      return summary;
+    const childLines = detail.children.map((child) => I18n.t(
+      child.weight === 1 ? "calculationWarning.childAdded" : "calculationWarning.childSubtracted",
+      { label: child.label, value: JupiterFormSection._formatNumber(child.value) }
+    ));
+    return `${summary} ${I18n.t("calculationWarning.childrenPrefix")} ${childLines.join("; ")}`;
+  }
   _handleFieldFocusForHighlight(event) {
     var _a, _b;
     const conceptId = (_a = event.detail) == null ? void 0 : _a.conceptId;
@@ -6481,7 +6667,7 @@ let JupiterFormSection = class extends LitElement {
         .highlightType="${(_a2 = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _a2.type}"
         .highlightColumnId="${(_b = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _b.columnId}"
         .rowFocused="${this._focusedConceptId === instanceConcept.id}"
-        .calculationErrorKeys="${this._calculationErrorKeys}"
+        .calculationMismatches="${this._calculationMismatches}"
         @field-change="${this._handleFieldChange}"
         @field-focus="${this._handleFieldFocusForHighlight}"
         @period-change="${this._handlePeriodChange}"
@@ -7054,7 +7240,7 @@ __decorateClass$3([
 ], JupiterFormSection.prototype, "_focusedConceptId", 2);
 __decorateClass$3([
   r()
-], JupiterFormSection.prototype, "_calculationErrorKeys", 2);
+], JupiterFormSection.prototype, "_calculationMismatches", 2);
 JupiterFormSection = __decorateClass$3([
   t$1("jupiter-form-section")
 ], JupiterFormSection);
@@ -9097,6 +9283,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._valid = true;
     this._submitted = false;
     this._xbrlFormErrors = [];
+    this._calculationWarnings = /* @__PURE__ */ new Map();
     this._showErrorPopup = false;
     this._submitDisabled = false;
     this._allSections = [];
@@ -9144,6 +9331,9 @@ let JupiterDynamicForm = class extends LitElement {
       const customEvent = e2;
       this._handleFieldBlur(customEvent);
     });
+    this.addEventListener("calculation-mismatch-changed", (e2) => {
+      this._handleCalculationMismatchChanged(e2);
+    });
     document.addEventListener("click", () => {
       if (this._showRoleContextMenu) {
         this._showRoleContextMenu = false;
@@ -9931,9 +10121,29 @@ let JupiterDynamicForm = class extends LitElement {
         }
       }
     }
+    errors.push(...Array.from(this._calculationWarnings.values()));
     this._errors = errors;
     this._valid = errors.filter((e2) => e2.severity === "error").length === 0;
   }
+  _handleCalculationMismatchChanged(event) {
+    const { key, mismatch } = event.detail;
+    const next = new Map(this._calculationWarnings);
+    if (mismatch) {
+      next.set(key, {
+        fieldId: `${mismatch.totalConceptId}__${mismatch.columnId}`,
+        conceptId: mismatch.totalConceptId,
+        columnId: mismatch.columnId,
+        message: mismatch.message,
+        severity: "warning",
+        rule: { type: "custom", message: mismatch.message, severity: "warning" },
+        details: mismatch
+      });
+    } else {
+      next.delete(key);
+    }
+    this._calculationWarnings = next;
+    this._validateForm();
+  }
   _handleFieldChange(event) {
     const { fieldId, conceptId, columnId, value } = event.detail;
     console.log(`📝 Field change: conceptId=${conceptId}, columnId=${columnId}, value=${value}, fieldId=${fieldId}`);
@@ -12645,11 +12855,11 @@ let JupiterDynamicForm = class extends LitElement {
       <div class="form-sections">
         <!-- Validation Summary -->
         ${showValidationSummary ? html`
-          <div class="validation-summary">
-            <h4 class="validation-summary-title">${I18n.t("validation.summary")}</h4>
+          <div class="validation-summary ${errorCount === 0 ? "warnings-only" : ""}">
+            <h4 class="validation-summary-title">${errorCount > 0 ? I18n.t("validation.summary") : I18n.t("calculationWarning.title")}</h4>
             <ul class="validation-summary-list">
-              ${this._errors.filter((e2) => e2.severity === "error").map((error2) => html`
-                  <li class="validation-summary-item">${error2.message}</li>
+              ${this._errors.filter((e2) => e2.severity === "error" || e2.severity === "warning" && this.mode !== "readonly").map((error2) => html`
+                  <li class="validation-summary-item ${error2.severity}">${error2.severity === "warning" ? "⚠️ " : ""}${error2.message}</li>
                 `)}
             </ul>
           </div>
@@ -12809,11 +13019,11 @@ let JupiterDynamicForm = class extends LitElement {
           <div class="form-sections">
             <!-- Validation Summary -->
             ${showValidationSummary ? html`
-              <div class="validation-summary">
-                <h4 class="validation-summary-title">Please fix the following errors:</h4>
+              <div class="validation-summary ${errorCount === 0 ? "warnings-only" : ""}">
+                <h4 class="validation-summary-title">${errorCount > 0 ? I18n.t("validation.summary") : I18n.t("calculationWarning.title")}</h4>
                 <ul class="validation-summary-list">
-                  ${this._errors.filter((e2) => e2.severity === "error").map((error2) => html`
-                      <li class="validation-summary-item">${error2.message}</li>
+                  ${this._errors.filter((e2) => e2.severity === "error" || e2.severity === "warning" && this.mode !== "readonly").map((error2) => html`
+                      <li class="validation-summary-item ${error2.severity}">${error2.severity === "warning" ? "⚠️ " : ""}${error2.message}</li>
                     `)}
                 </ul>
               </div>
@@ -13163,8 +13373,9 @@ let JupiterDynamicForm = class extends LitElement {
   render() {
     var _a;
     const errorCount = this._errors.filter((e2) => e2.severity === "error").length;
+    const warningCount = this.mode === "readonly" ? 0 : this._errors.filter((e2) => e2.severity === "warning").length;
     const config = this.config || {};
-    const showValidationSummary = config.showValidationSummary !== false && errorCount > 0 && this._submitted;
+    const showValidationSummary = config.showValidationSummary !== false && (errorCount > 0 && this._submitted || warningCount > 0);
     const schema = this._currentSchema;
     if (!schema) {
       return html`<div>${I18n.t("form.loading")}</div>`;
@@ -13429,6 +13640,21 @@ JupiterDynamicForm.styles = css`
       margin-bottom: 4px;
     }
 
+    /* JDF-036: when the summary contains only non-blocking calculation warnings (no blocking
+       errors), style the whole box amber rather than error-red so it doesn't read as blocking. */
+    .validation-summary.warnings-only {
+      background: var(--jupiter-warning-background, #fff3e0);
+      border-color: var(--jupiter-warning-color, #ff9800);
+    }
+
+    .validation-summary.warnings-only .validation-summary-title {
+      color: var(--jupiter-warning-color, #ff9800);
+    }
+
+    .validation-summary-item.warning {
+      color: var(--jupiter-warning-color, #ff9800);
+    }
+
     .form-actions button {
       padding: 10px 20px;
       border: none;
@@ -14279,6 +14505,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_xbrlFormErrors", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_calculationWarnings", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_showErrorPopup", 2);