jupiter-dynamic-forms 1.16.6 → 1.16.8

package/dist/index.mjs

@@ -4215,6 +4215,13 @@ let JupiterConceptTree = class extends LitElement {
       composed: true
     }));
   }
+  _handleFieldFocus(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new CustomEvent("field-focus", {
+      detail: event.detail,
+      bubbles: true
+    }));
+  }
   _handlePeriodChange(event) {
     console.log(`🌲 [ConceptTree] Received period-change event:`, event.detail);
     event.stopPropagation();
@@ -4260,12 +4267,12 @@ let JupiterConceptTree = class extends LitElement {
 
       <!-- Input Field Cells (Period Columns) - Only for non-abstract concepts -->
       ${this.columns.map((column2) => {
-      var _a, _b;
+      var _a, _b, _c;
       const field2 = this._getFieldForColumn(column2.id);
       const shouldShowField = !isAbstract && field2;
       const storedUnit = (_b = (_a = this.unitData) == null ? void 0 : _a[this.concept.id]) == null ? void 0 : _b[column2.id];
       return html`
-          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""}">
+          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""} ${this.highlightType && column2.id === this.highlightColumnId ? "highlight-" + this.highlightType : ""} ${((_c = this.calculationErrorKeys) == null ? void 0 : _c.has(`${this.concept.id}__${column2.id}`)) ? "calc-error" : ""}">
             ${shouldShowField ? html`
               <jupiter-form-field
                 .field="${field2}"
@@ -4288,6 +4295,7 @@ let JupiterConceptTree = class extends LitElement {
                 .column="${column2}"
                 .typedMemberValues="${this.typedMemberData[`${this.concept.id}__${column2.id}`] || {}}"
                 @field-change="${this._handleFieldChange}"
+                @field-focus="${this._handleFieldFocus}"
                 @period-change="${this._handlePeriodChange}"
               ></jupiter-form-field>
             ` : ""}
@@ -4455,6 +4463,18 @@ JupiterConceptTree.styles = css`
       color: #fff;
     }
 
+    .field-cell.highlight-total {
+      background: rgba(25, 118, 210, 0.15);
+    }
+
+    .field-cell.highlight-member {
+      background: rgba(25, 118, 210, 0.07);
+    }
+
+    .field-cell.calc-error {
+      box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
+    }
+
   `;
 __decorateClass$4([
   n2({ type: Object })
@@ -4504,6 +4524,15 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Boolean })
 ], JupiterConceptTree.prototype, "showRemoveButton", 2);
+__decorateClass$4([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "highlightType", 2);
+__decorateClass$4([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "highlightColumnId", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "calculationErrorKeys", 2);
 __decorateClass$4([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -5131,8 +5160,20 @@ let JupiterFormSection = class extends LitElement {
     this._sectionPeriodType = "duration";
     this._openMenuColumnId = null;
     this._insertAfterColumnId = null;
+    this._boundFieldBlur = (e2) => {
+      this._clearHighlights();
+      const { conceptId, columnId } = e2.detail || {};
+      if (conceptId && columnId)
+        this._runCalculationCheck(conceptId, columnId);
+    };
     this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
+    this._highlightMap = /* @__PURE__ */ new Map();
+    this._calculationErrorKeys = /* @__PURE__ */ new Set();
+    this._totalChildrenMap = /* @__PURE__ */ new Map();
+    this._memberParentMap = /* @__PURE__ */ new Map();
+    this._totalConceptMap = /* @__PURE__ */ new Map();
+    this._totalChildConceptsMap = /* @__PURE__ */ new Map();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5140,16 +5181,22 @@ let JupiterFormSection = class extends LitElement {
     this._determinePeriodType();
     this._checkAndExpandFirstSection();
     document.addEventListener("click", () => this._closeColumnMenu());
+    this.addEventListener("field-blur", this._boundFieldBlur);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", () => this._closeColumnMenu());
+    this.removeEventListener("field-blur", this._boundFieldBlur);
   }
   updated(changedProperties) {
+    var _a;
     super.updated(changedProperties);
     if (changedProperties.has("isFirstSection") || changedProperties.has("section")) {
       this._checkAndExpandFirstSection();
     }
+    if (changedProperties.has("section") && ((_a = this.section) == null ? void 0 : _a.concepts)) {
+      this._buildTotalMaps(this.section.concepts);
+    }
   }
   _checkAndExpandFirstSection() {
     if (this.isFirstSection && this.section && this.section.concepts) {
@@ -5334,31 +5381,135 @@ let JupiterFormSection = class extends LitElement {
   }
   _expandAllTrees() {
     const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
-    allConceptIds.forEach((id) => this._expandedConcepts.add(id));
+    this._expandedConcepts = /* @__PURE__ */ new Set([...this._expandedConcepts, ...allConceptIds]);
     this._allTreeExpanded = true;
-    this.requestUpdate();
   }
   _collapseAllTrees() {
-    this._expandedConcepts.clear();
+    this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
-    this.requestUpdate();
   }
   _handleConceptExpand(event) {
     event.stopPropagation();
     const { conceptId, expanded } = event.detail;
+    const next = new Set(this._expandedConcepts);
     if (expanded) {
-      this._expandedConcepts.add(conceptId);
+      next.add(conceptId);
     } else {
-      this._expandedConcepts.delete(conceptId);
+      next.delete(conceptId);
     }
+    this._expandedConcepts = next;
     const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
-    this._allTreeExpanded = allConceptIds.length > 0 && allConceptIds.every((id) => this._expandedConcepts.has(id));
-    this.requestUpdate();
+    this._allTreeExpanded = allConceptIds.length > 0 && allConceptIds.every((id) => next.has(id));
     this.dispatchEvent(new CustomEvent("concept-expand", {
       detail: event.detail,
       bubbles: true
     }));
   }
+  _buildTotalMaps(concepts) {
+    this._totalChildrenMap.clear();
+    this._memberParentMap.clear();
+    this._totalConceptMap.clear();
+    this._totalChildConceptsMap.clear();
+    this._traverseTotalGroups(concepts);
+  }
+  _traverseTotalGroups(concepts) {
+    var _a, _b, _c;
+    for (const concept of concepts) {
+      if (((_a = concept.preferredLabel) == null ? void 0 : _a.includes("totalLabel")) && ((_b = concept.children) == null ? void 0 : _b.length)) {
+        const childIds = concept.children.map((c2) => c2.id);
+        this._totalChildrenMap.set(concept.id, childIds);
+        this._totalConceptMap.set(concept.id, concept);
+        this._totalChildConceptsMap.set(concept.id, concept.children);
+        for (const childId of childIds) {
+          this._memberParentMap.set(childId, concept.id);
+        }
+      }
+      if ((_c = concept.children) == null ? void 0 : _c.length) {
+        this._traverseTotalGroups(concept.children);
+      }
+    }
+  }
+  _runCalculationCheck(conceptId, columnId) {
+    var _a;
+    const isSelfTotal = this._totalConceptMap.has(conceptId);
+    const totalConceptId = isSelfTotal ? conceptId : this._memberParentMap.get(conceptId);
+    if (!totalConceptId)
+      return;
+    const totalConcept = this._totalConceptMap.get(totalConceptId);
+    const totalRaw = (_a = this.formData[totalConceptId]) == null ? void 0 : _a[columnId];
+    const errorKey = `${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;
+      }
+      return;
+    }
+    const totalValue = parseFloat(totalRaw);
+    if (isNaN(totalValue))
+      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);
+    }
+    this._calculationErrorKeys = next;
+  }
+  static _checkTotal(totalValue, children, totalBalance) {
+    let calculatedSum = 0;
+    let hasAnyValue = false;
+    for (const child of children) {
+      const val = parseFloat(child.value);
+      if (isNaN(val))
+        continue;
+      hasAnyValue = true;
+      const weight = !totalBalance || !child.balance || totalBalance === child.balance ? 1 : -1;
+      calculatedSum += weight * val;
+    }
+    if (!hasAnyValue)
+      return true;
+    return Math.abs(calculatedSum - totalValue) < 0.01;
+  }
+  _handleFieldFocusForHighlight(event) {
+    var _a, _b;
+    const conceptId = (_a = event.detail) == null ? void 0 : _a.conceptId;
+    const columnId = (_b = event.detail) == null ? void 0 : _b.columnId;
+    if (!conceptId || !columnId)
+      return;
+    const newMap = /* @__PURE__ */ new Map();
+    const isSelfTotal = this._totalChildrenMap.has(conceptId);
+    if (isSelfTotal) {
+      newMap.set(conceptId, { type: "total", columnId });
+      for (const childId of this._totalChildrenMap.get(conceptId)) {
+        newMap.set(childId, { type: "member", columnId });
+      }
+    } else {
+      const parentId = this._memberParentMap.get(conceptId);
+      if (parentId) {
+        newMap.set(parentId, { type: "total", columnId });
+        for (const siblingId of this._totalChildrenMap.get(parentId)) {
+          newMap.set(siblingId, { type: "member", columnId });
+        }
+      }
+    }
+    this._highlightMap = newMap;
+  }
+  _clearHighlights() {
+    if (this._highlightMap.size > 0) {
+      this._highlightMap = /* @__PURE__ */ new Map();
+    }
+  }
   _getTypedMemberHeaderValue(columnId, axisId) {
     var _a;
     return ((_a = this.typedMemberData[columnId]) == null ? void 0 : _a[axisId]) || "";
@@ -5398,7 +5549,9 @@ let JupiterFormSection = class extends LitElement {
       return ((_a2 = f2.crossRoleTypedMembers) == null ? void 0 : _a2.length) > 0;
     }));
     const repeatCount = isRepeatable ? this.repeatCounts[concept.id] || 0 : 0;
-    const sharedProps = (instanceConcept, opts) => html`
+    const sharedProps = (instanceConcept, opts) => {
+      var _a2, _b;
+      return html`
       <jupiter-concept-tree
         .concept="${instanceConcept}"
         .columns="${this.columns}"
@@ -5416,13 +5569,18 @@ let JupiterFormSection = class extends LitElement {
         .typedMemberData="${this.typedMemberData}"
         .showAddButton="${opts.showAdd || false}"
         .showRemoveButton="${opts.showRemove || false}"
+        .highlightType="${(_a2 = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _a2.type}"
+        .highlightColumnId="${(_b = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _b.columnId}"
+        .calculationErrorKeys="${this._calculationErrorKeys}"
         @field-change="${this._handleFieldChange}"
+        @field-focus="${this._handleFieldFocusForHighlight}"
         @period-change="${this._handlePeriodChange}"
         @concept-expand="${this._handleConceptExpand}"
         @add-concept-repeat="${this._handleAddRepeat}"
         @remove-concept-repeat="${this._handleRemoveRepeat}"
       ></jupiter-concept-tree>
     `;
+    };
     const rows = [html`
       <tr>${sharedProps(concept, { showAdd: isRepeatable })}</tr>
     `];
@@ -5923,6 +6081,12 @@ __decorateClass$2([
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_allTreeExpanded", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_highlightMap", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_calculationErrorKeys", 2);
 JupiterFormSection = __decorateClass$2([
   t$1("jupiter-form-section")
 ], JupiterFormSection);
@@ -7049,10 +7213,10 @@ JupiterFilterRolesDialog.styles = css`
       transition: all 0.2s ease;
     }
 
-    .selection-control:hover {
-      background: var(--menuBgColorLighter, var(--jupiter-primary-color, #1976d2));
-      color: white;
-    }
+    // .selection-control:hover {
+    //   background: var(--menuBgColorLighter, var(--jupiter-primary-color, #1976d2));
+    //   color: white;
+    // }
 
     .roles-list {
       display: flex;
@@ -11034,7 +11198,7 @@ let JupiterDynamicForm = class extends LitElement {
 
           ${this._validationStatus === "complete" || this.showLastValidationResultBtn ? html`
             <button
-              class="btn-last-results"
+              class="btn-secondary btn-last-results"
               @click="${() => this.dispatchEvent(new CustomEvent("show-validation-results", { bubbles: true, composed: true }))}"
               ?disabled="${this.disabled || this.readonly}"
             >
@@ -11290,14 +11454,6 @@ JupiterDynamicForm.styles = css`
       background: var(--jupiter-primary-color-dark, #1565c0);
     }
 
-    .btn-last-results {
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
-    }
-    .btn-last-results:hover:not(:disabled) {
-      background: var(--jupiter-primary-color, #1976d2);
-      color: white;
-    }
 
     .validation-spinner {
       display: inline-block;
@@ -11367,15 +11523,15 @@ JupiterDynamicForm.styles = css`
     .no-roles-message {
       padding: 40px;
       text-align: center;
-      color: var(--jupiter-text-secondary, #666);
-      background: var(--jupiter-background-light, #f8f9fa);
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
+      background: var(--bg-color-2, var(--jupiter-background-light, #f8f9fa));
       border-radius: 8px;
       margin: 20px 0;
     }
 
     .no-roles-message h3 {
       margin: 0 0 16px 0;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
     }
 
     .no-roles-message p {
@@ -11510,11 +11666,12 @@ JupiterDynamicForm.styles = css`
 
     .side-panel-search-results-info {
       font-size: 12px;
-      color: var(--jupiter-text-secondary, #666);
       padding: 8px 16px;
       text-align: center;
       border-bottom: 1px solid var(--jupiter-border-color, #e0e0e0);
-      background: var(--jupiter-background-light, #f8f9fa);
+      
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
+      background: var(--bg-color-2, var(--jupiter-background-light, #f8f9fa));
     }
 
     .side-panel-no-results {
@@ -11573,6 +11730,7 @@ JupiterDynamicForm.styles = css`
       flex: 1;
       overflow-y: auto;
       padding: 0;
+      background: var(--bg-color-2, var(--jupiter-background, #fff));
     }
 
     .side-panel-content .form-sections {