jupiter-dynamic-forms 1.15.1 → 1.15.3

package/dist/index.mjs

@@ -3073,18 +3073,29 @@ let JupiterFormField = class extends LitElement {
     if (availableUnits.length === 0) {
       return;
     }
-    if (!this.unit) {
-      this._xbrlErrors = [
-        ...this._xbrlErrors,
-        {
-          type: "unit",
-          message: I18n.t("validation.unitRequired"),
-          expectedValue: availableUnits.map((u2) => u2.label).join(", "),
-          actualValue: ""
-        }
-      ];
-      console.log(`❌ [FormField] Unit validation failed for ${this.conceptId}: unit is required but not selected`);
+    if (this.unit)
+      return;
+    const defaultUnit = availableUnits.find((u2) => u2.isDefault === true) ?? (availableUnits.length === 1 ? availableUnits[0] : null);
+    if (defaultUnit) {
+      this.unit = defaultUnit.id;
+      this.dispatchEvent(new CustomEvent("unit-change", {
+        detail: { fieldId: this.field.id, conceptId: this.conceptId, columnId: this.columnId, unit: this.unit },
+        bubbles: true,
+        composed: true
+      }));
+      console.log(`🎯 [FormField] Auto-selected default unit on blur: ${this.unit} for ${this.conceptId}`);
+      return;
     }
+    this._xbrlErrors = [
+      ...this._xbrlErrors,
+      {
+        type: "unit",
+        message: I18n.t("validation.unitRequired"),
+        expectedValue: availableUnits.map((u2) => u2.label).join(", "),
+        actualValue: ""
+      }
+    ];
+    console.log(`❌ [FormField] Unit validation failed for ${this.conceptId}: unit is required but not selected`);
   }
   _handlePeriodIconClick() {
     this._availableUnits = this._collectUnitsForConceptType();
@@ -3512,7 +3523,7 @@ let JupiterFormField = class extends LitElement {
     }
     const hasUserValue = this.value !== null && this.value !== void 0;
     const effectiveValue = isPredefinedValue ? this.masterData[baseConceptId] : hasUserValue ? this.value : factValue;
-    const effectiveDisabled = isPredefinedValue || this.disabled;
+    const effectiveDisabled = isPredefinedValue || this.disabled || this.mode === "readonly";
     return html`
       <div class="field-container">
         ${showLabel ? html`
@@ -3524,9 +3535,9 @@ let JupiterFormField = class extends LitElement {
         <div class="field-wrapper">
           ${this._renderInput(effectiveValue, effectiveDisabled)}
           
-          ${hasPeriodControl ? html`
-            <button 
-              class="period-icon-btn" 
+          ${hasPeriodControl && this.mode !== "readonly" ? html`
+            <button
+              class="period-icon-btn"
               type="button"
               @click="${this._handlePeriodIconClick}"
               title="Edit period"
@@ -4978,6 +4989,20 @@ let JupiterFormSection = class extends LitElement {
     }
     return result;
   }
+  /**
+   * Returns true when every column cell for a concept has no value.
+   * Used in readonly mode to hide fully-blank rows.
+   */
+  _isConceptRowBlank(concept) {
+    var _a;
+    for (const column2 of this.columns) {
+      const value = (_a = this.formData[concept.id]) == null ? void 0 : _a[column2.id];
+      if (value !== null && value !== void 0 && value !== "") {
+        return false;
+      }
+    }
+    return true;
+  }
   _getAllConceptIds(concepts) {
     const result = [];
     for (const concept of concepts) {
@@ -5109,24 +5134,25 @@ let JupiterFormSection = class extends LitElement {
                       ` : ""}
                     </div>
                     
-                    <!-- Column menu icon (3 vertical dots) -->
-                    <div 
+                    <!-- Column menu icon (hidden in readonly mode) -->
+                    ${this.mode !== "readonly" ? html`
+                    <div
                       class="column-menu-icon"
                       @click="${(e2) => this._toggleColumnMenu(column2.id, e2)}"
                       title="${I18n.t("column.columnOptions")}"
                     >⋮</div>
-                    
+
                     <!-- Context menu -->
                     ${this._openMenuColumnId === column2.id ? html`
                       <div class="column-context-menu">
-                        <button 
+                        <button
                           class="column-context-menu-item"
                           @click="${(e2) => this._handleAddColumnFromMenu(column2.id, e2)}"
                         >
                           ${I18n.t("column.addColumn")}
                         </button>
                         ${column2.removable ? html`
-                          <button 
+                          <button
                             class="column-context-menu-item remove"
                             @click="${(e2) => {
         e2.stopPropagation();
@@ -5138,13 +5164,14 @@ let JupiterFormSection = class extends LitElement {
                         ` : ""}
                       </div>
                     ` : ""}
+                    ` : ""}
                   </th>
                 `;
     })}
               </tr>
             </thead>
             <tbody class="table-body">
-              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).map((concept) => html`
+              ${this._flattenConcepts(this.section.concepts, this._expandedConcepts).filter((concept) => this.mode !== "readonly" || !this._isConceptRowBlank(concept)).map((concept) => html`
                 <tr>
                   <jupiter-concept-tree
                     .concept="${concept}"
@@ -8527,6 +8554,12 @@ let JupiterDynamicForm = class extends LitElement {
     }
     console.log(`✅ [Submit] No validation errors, proceeding with submission...`);
     this._validateForm();
+    if (!this._valid) {
+      console.log("❌ [Submit] Cannot submit - form validation errors present:", this._errors);
+      this._showErrorPopup = true;
+      this.requestUpdate();
+      return;
+    }
     const submissionData = this._generateSubmissionData();
     console.log("📊 Form Submission Data:", JSON.stringify(submissionData, null, 2));
     console.log("📊 Submission Data Summary:");
@@ -9716,6 +9749,32 @@ let JupiterDynamicForm = class extends LitElement {
   _toggleSidePanelCollapse() {
     this._sidePanelCollapsed = !this._sidePanelCollapsed;
   }
+  /**
+   * Returns true when every non-abstract concept row in the section has no value
+   * in any column. Used in readonly mode to hide fully-blank sections.
+   */
+  _isSectionBlank(section2) {
+    const columns = section2.columns || this._columns;
+    const hasValue = (concepts) => {
+      var _a;
+      for (const concept of concepts) {
+        if (!concept.abstract) {
+          for (const column2 of columns) {
+            const value = (_a = this._formData[concept.id]) == null ? void 0 : _a[column2.id];
+            if (value !== null && value !== void 0 && value !== "") {
+              return true;
+            }
+          }
+        }
+        if (concept.children && concept.children.length > 0) {
+          if (hasValue(concept.children))
+            return true;
+        }
+      }
+      return false;
+    };
+    return !hasValue(section2.concepts);
+  }
   _filterSidePanelSections(sections) {
     if (!this._sidePanelSearchQuery.trim()) {
       return sections;
@@ -10108,7 +10167,7 @@ let JupiterDynamicForm = class extends LitElement {
             <p>${I18n.t("filter.selectRoles")}</p>
             <p>${I18n.t("filter.roles")}: ${this._allSections.length}</p>
           </div>
-        ` : schema.sections.map((section2, index) => {
+        ` : (this.mode === "readonly" ? schema.sections.filter((s2) => !this._isSectionBlank(s2)) : schema.sections).map((section2, index) => {
       var _a;
       return html`
           <jupiter-form-section
@@ -10145,7 +10204,7 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _renderSidePanelLayout(schema, config, showValidationSummary, errorCount) {
     var _a;
-    const visibleSections = schema.sections;
+    const visibleSections = this.mode === "readonly" ? schema.sections.filter((s2) => !this._isSectionBlank(s2)) : schema.sections;
     const filteredSections = this._filterSidePanelSections(visibleSections);
     if (!this._activeSidePanelRoleId || !filteredSections.find((s2) => s2.id === this._activeSidePanelRoleId)) {
       this._activeSidePanelRoleId = filteredSections.length > 0 ? filteredSections[0].id : null;
@@ -10322,7 +10381,8 @@ let JupiterDynamicForm = class extends LitElement {
         <!-- Form Content -->
         ${this.display === "sidePanel" ? this._renderSidePanelLayout(schema, config, showValidationSummary, errorCount) : this._renderAccordionLayout(schema, config, showValidationSummary, errorCount)}
 
-        <!-- Form Actions - Fixed Footer -->
+        <!-- Form Actions - Fixed Footer (hidden in readonly mode) -->
+        ${this.mode !== "readonly" ? html`
         <div class="form-actions">
           <!-- Filter Roles Button (shown when more than 10 roles) -->
           ${this._shouldShowFilterButton() ? html`
@@ -10357,8 +10417,8 @@ let JupiterDynamicForm = class extends LitElement {
             ${this.submitButtonLabel || I18n.t("form.submit")}
           </button>
 
-         
         </div>
+        ` : ""}
 
         <!-- Filter Roles Dialog -->
         ${this._showFilterDialog ? html`