jupiter-dynamic-forms 1.19.4 → 1.19.6

package/dist/index.mjs

@@ -1732,6 +1732,8 @@ const column$1 = {
   noMembersAvailable: "No members available for this dimension",
   cancel: "Cancel",
   removeColumn: "Remove column",
+  hideColumn: "Hide column",
+  showColumn: "Double-click to show column",
   required: "required"
 };
 const section$1 = {
@@ -1914,6 +1916,8 @@ const column = {
   noMembersAvailable: "Geen leden beschikbaar voor deze dimensie",
   cancel: "Annuleren",
   removeColumn: "Kolom verwijderen",
+  hideColumn: "Kolom verbergen",
+  showColumn: "Dubbelklik om kolom te tonen",
   required: "verplicht"
 };
 const section = {
@@ -2232,7 +2236,7 @@ class DraftStorageService {
   /**
    * Create metadata snapshot from current form state
    */
-  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en", repeatCounts, decimalsData, roleCompletedStates) {
+  createMetadataSnapshot(periodStartDate, periodEndDate, language, selectedRoleIds, allSections, typedMemberData, periodPreferences, periodData, unitData, reportingLanguage = "en", repeatCounts, decimalsData, roleCompletedStates, hiddenColumns) {
     return {
       periodStartDate,
       periodEndDate,
@@ -2248,6 +2252,7 @@ class DraftStorageService {
       decimalsData,
       repeatCounts,
       roleCompletedStates,
+      hiddenColumns,
       schemaVersion: this.STORAGE_VERSION
     };
   }
@@ -4757,6 +4762,7 @@ let JupiterConceptTree = class extends LitElement {
     this.showAddButton = false;
     this.showRemoveButton = false;
     this.language = "en";
+    this.rowFocused = false;
     this._expanded = true;
   }
   connectedCallback() {
@@ -4934,7 +4940,7 @@ let JupiterConceptTree = class extends LitElement {
     const isAbstract = this.concept.abstract || false;
     return html`
       <!-- Concept Name Cell (Left Column) -->
-      <td class="concept-name-cell ${isAbstract ? "abstract" : hasChildren ? "" : "leaf"}">
+      <td class="concept-name-cell ${isAbstract ? "abstract" : hasChildren ? "" : "leaf"} ${this.rowFocused ? "row-focused" : ""}">
         <div class="concept-content" style="--level: ${level}">
           <div class="concept-indent"></div>
           <div class="concept-toggle ${hasChildren ? this._expanded ? "expanded" : "" : "no-children"}"
@@ -4965,12 +4971,15 @@ let JupiterConceptTree = class extends LitElement {
       <!-- Input Field Cells (Period Columns) - Only for non-abstract concepts -->
       ${this.columns.map((column2) => {
       var _a, _b, _c, _d, _e;
+      if (column2.hidden) {
+        return html`<td class="field-cell hidden-column"></td>`;
+      }
       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];
       const storedDecimals = (_d = (_c = this.decimalsData) == null ? void 0 : _c[this.concept.id]) == null ? void 0 : _d[column2.id];
       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" : ""}">
+          <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" : ""}">
             ${shouldShowField ? html`
               <jupiter-form-field
                 .field="${field2}"
@@ -5122,6 +5131,15 @@ JupiterConceptTree.styles = css`
       background: var(--bg-color-2, var(--jupiter-empty-cell-background, #f8f9fa));
     }
 
+    .field-cell.hidden-column {
+      width: 10px;
+      min-width: 10px;
+      max-width: 10px;
+      padding: 0;
+      overflow: hidden;
+      background: var(--jupiter-border-color, #ddd);
+    }
+
     .field-cell.abstract-row {
       background: var(--bg-color-2, var(--jupiter-abstract-cell-background, #f0f2f5));
     }
@@ -5176,6 +5194,18 @@ JupiterConceptTree.styles = css`
       box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
     }
 
+    /* Row-level highlight while a field in this row has focus. Applied to every
+       cell so the row stays identifiable even after the user scrolls the table
+       horizontally away from the focused input. */
+    .concept-name-cell.row-focused,
+    .field-cell.row-focused {
+      background: var(--jupiter-row-focus-background, rgba(25, 118, 210, 0.14));
+    }
+
+    .concept-name-cell.row-focused {
+      box-shadow: inset 3px 0 0 0 var(--jupiter-primary-color, #1976d2);
+    }
+
     .concept-info-btn {
       flex-shrink: 0;
       width: 22px;
@@ -5296,6 +5326,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterConceptTree.prototype, "language", 2);
+__decorateClass$5([
+  n2({ type: Boolean })
+], JupiterConceptTree.prototype, "rowFocused", 2);
 __decorateClass$5([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -5993,10 +6026,12 @@ let JupiterFormSection = class extends LitElement {
     this._insertAfterColumnId = null;
     this._boundFieldBlur = (e2) => {
       this._clearHighlights();
+      this._focusedConceptId = null;
     };
     this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
     this._highlightMap = /* @__PURE__ */ new Map();
+    this._focusedConceptId = null;
     this._calculationErrorKeys = /* @__PURE__ */ new Set();
     this._totalChildrenMap = /* @__PURE__ */ new Map();
     this._memberParentMap = /* @__PURE__ */ new Map();
@@ -6089,6 +6124,25 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleHideColumn(columnId) {
+    this._openMenuColumnId = null;
+    this.dispatchEvent(new CustomEvent("column-hide", {
+      detail: {
+        columnId,
+        sectionId: this.section.id
+      },
+      bubbles: true
+    }));
+  }
+  _handleShowColumn(columnId) {
+    this.dispatchEvent(new CustomEvent("column-show", {
+      detail: {
+        columnId,
+        sectionId: this.section.id
+      },
+      bubbles: true
+    }));
+  }
   _toggleColumnMenu(columnId, event) {
     event.stopPropagation();
     this._openMenuColumnId = this._openMenuColumnId === columnId ? null : columnId;
@@ -6336,6 +6390,7 @@ let JupiterFormSection = class extends LitElement {
     const columnId = (_b = event.detail) == null ? void 0 : _b.columnId;
     if (!conceptId || !columnId)
       return;
+    this._focusedConceptId = conceptId;
     const newMap = /* @__PURE__ */ new Map();
     const isSelfTotal = this._totalChildrenMap.has(conceptId);
     if (isSelfTotal) {
@@ -6423,6 +6478,7 @@ let JupiterFormSection = class extends LitElement {
         .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}"
+        .rowFocused="${this._focusedConceptId === instanceConcept.id}"
         .calculationErrorKeys="${this._calculationErrorKeys}"
         @field-change="${this._handleFieldChange}"
         @field-focus="${this._handleFieldFocusForHighlight}"
@@ -6501,14 +6557,20 @@ let JupiterFormSection = class extends LitElement {
                 <th class="header-cell concept-column"></th>
                 ${this.columns.map((column2) => {
       var _a, _b, _c;
-      return html`
+      return column2.hidden ? html`
+                  <th
+                    class="header-cell hidden-column"
+                    title="${I18n.t("column.showColumn")}"
+                    @dblclick="${() => this._handleShowColumn(column2.id)}"
+                  ></th>
+                ` : html`
                   <th class="header-cell ${column2.removable ? "removable" : ""}">
                     <div class="column-header-content">
                       <div class="column-title">
                         ${column2.title}
                         ${column2.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column2.description}</div>` : ""}
                       </div>
-                      
+
                       <!-- Typed member input fields in column header -->
                       ${((_a = column2.dimensionData) == null ? void 0 : _a.hasTypedMembers) ? html`
                         <div class="typed-members-header">
@@ -6532,7 +6594,7 @@ let JupiterFormSection = class extends LitElement {
                         </div>
                       ` : ""}
                     </div>
-                    
+
                     <!-- Column menu icon (hidden in readonly mode) -->
                     ${this.mode !== "readonly" ? html`
                     <div
@@ -6561,6 +6623,17 @@ let JupiterFormSection = class extends LitElement {
                             ${I18n.t("column.removeColumn")}
                           </button>
                         ` : ""}
+                        ${!column2.removable && this.columns.filter((c2) => !c2.hidden).length > 1 ? html`
+                          <button
+                            class="column-context-menu-item remove"
+                            @click="${(e2) => {
+        e2.stopPropagation();
+        this._handleHideColumn(column2.id);
+      }}"
+                          >
+                            ${I18n.t("column.hideColumn")}
+                          </button>
+                        ` : ""}
                       </div>
                     ` : ""}
                     ` : ""}
@@ -6734,6 +6807,20 @@ JupiterFormSection.styles = css`
       position: relative;
     }
 
+    .header-cell.hidden-column {
+      width: 10px;
+      min-width: 10px;
+      max-width: 10px;
+      padding: 0;
+      overflow: hidden;
+      cursor: pointer;
+      background: var(--jupiter-border-color, #ddd);
+    }
+
+    .header-cell.hidden-column:hover {
+      background: var(--jupiter-text-secondary, #999);
+    }
+
     .column-menu-icon {
       position: absolute;
       top: 8px;
@@ -6960,6 +7047,9 @@ __decorateClass$3([
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_highlightMap", 2);
+__decorateClass$3([
+  r()
+], JupiterFormSection.prototype, "_focusedConceptId", 2);
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_calculationErrorKeys", 2);
@@ -8997,6 +9087,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._typedMemberData = {};
     this._preservedTypedMemberData = {};
     this._repeatCounts = {};
+    this._hiddenColumnIds = /* @__PURE__ */ new Map();
     this._columns = [];
     this._errors = [];
     this._touched = /* @__PURE__ */ new Set();
@@ -9750,7 +9841,9 @@ let JupiterDynamicForm = class extends LitElement {
       this._unitData,
       this.reportingLanguage,
       this._repeatCounts,
-      this._decimalsData
+      this._decimalsData,
+      void 0,
+      this._getHiddenColumnsForMetadata()
     );
     this._draftStorageService.saveDraft(currentFormData, currentMetadata);
     console.log("✅ Current form data saved to draft storage with NEW preferences");
@@ -10326,6 +10419,52 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleColumnHide(event) {
+    const { columnId, sectionId } = event.detail;
+    if (!sectionId || !columnId)
+      return;
+    if (!this._hiddenColumnIds.has(sectionId)) {
+      this._hiddenColumnIds.set(sectionId, /* @__PURE__ */ new Set());
+    }
+    this._hiddenColumnIds.get(sectionId).add(columnId);
+    this._dirty = true;
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("column-hide", {
+      detail: { columnId, sectionId },
+      bubbles: true
+    }));
+  }
+  _handleColumnShow(event) {
+    var _a;
+    const { columnId, sectionId } = event.detail;
+    if (!sectionId || !columnId)
+      return;
+    (_a = this._hiddenColumnIds.get(sectionId)) == null ? void 0 : _a.delete(columnId);
+    this._dirty = true;
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("column-show", {
+      detail: { columnId, sectionId },
+      bubbles: true
+    }));
+  }
+  _getColumnsWithHiddenFlags(section2) {
+    const columns = section2.columns || this._columns;
+    const hiddenIds = this._hiddenColumnIds.get(section2.id);
+    if (!hiddenIds || hiddenIds.size === 0)
+      return columns;
+    return columns.map((col) => hiddenIds.has(col.id) ? { ...col, hidden: true } : col);
+  }
+  _getHiddenColumnsForMetadata() {
+    if (this._hiddenColumnIds.size === 0)
+      return void 0;
+    const result = {};
+    this._hiddenColumnIds.forEach((ids, sectionId) => {
+      if (ids.size > 0) {
+        result[sectionId] = Array.from(ids);
+      }
+    });
+    return Object.keys(result).length > 0 ? result : void 0;
+  }
   _handleColumnAddRequest(event) {
     const { sectionId, columnRequest, insertAfterColumnId } = event.detail;
     this._addColumnFromRequest(columnRequest, sectionId, insertAfterColumnId);
@@ -10761,7 +10900,8 @@ let JupiterDynamicForm = class extends LitElement {
       this.reportingLanguage,
       this._repeatCounts,
       this._decimalsData,
-      roleCompletedStates
+      roleCompletedStates,
+      this._getHiddenColumnsForMetadata()
     );
     const draftPayloadSnapshot = JSON.stringify({
       draftData,
@@ -10895,6 +11035,14 @@ let JupiterDynamicForm = class extends LitElement {
       this._roleCompletedStates = new Map(Object.entries(metadata.roleCompletedStates));
       console.log("🔄 Restored role completed states:", Object.keys(metadata.roleCompletedStates).length, "roles");
     }
+    if (metadata.hiddenColumns) {
+      this._hiddenColumnIds = new Map(
+        Object.entries(metadata.hiddenColumns).map(
+          ([sectionId, columnIds]) => [sectionId, new Set(columnIds)]
+        )
+      );
+      console.log("🔄 Restored hidden columns for", this._hiddenColumnIds.size, "sections");
+    }
     if (metadata.periodPreferences) {
       if (this._skipPeriodPreferencesRestore) {
         console.log("⏭️ Skipping period preferences restoration - using new filter selections");
@@ -12532,7 +12680,7 @@ let JupiterDynamicForm = class extends LitElement {
           <jupiter-form-section
             section-id="${section2.id}"
             .section="${section2}"
-            .columns="${section2.columns || this._columns}"
+            .columns="${this._getColumnsWithHiddenFlags(section2)}"
             .datatypes="${section2.datatypes || ((_a = this.xbrlInput) == null ? void 0 : _a.datatypes)}"
             .formData="${this._formData}"
             .periodData="${this._periodData}"
@@ -12562,6 +12710,8 @@ let JupiterDynamicForm = class extends LitElement {
             @section-expand="${this._handleSectionExpand}"
             @concept-expand="${this._handleConceptExpand}"
             @column-remove="${this._handleColumnRemove}"
+            @column-hide="${this._handleColumnHide}"
+            @column-show="${this._handleColumnShow}"
             @column-add-request="${this._handleColumnAddRequest}"
           ></jupiter-form-section>
         `;
@@ -12676,7 +12826,7 @@ let JupiterDynamicForm = class extends LitElement {
               <jupiter-form-section
                 section-id="${activeSection.id}"
                 .section="${activeSection}"
-                .columns="${activeSection.columns || this._columns}"
+                .columns="${this._getColumnsWithHiddenFlags(activeSection)}"
                 .datatypes="${activeSection.datatypes || ((_a = this.xbrlInput) == null ? void 0 : _a.datatypes)}"
                 .formData="${this._formData}"
                 .periodData="${this._periodData}"
@@ -12706,6 +12856,8 @@ let JupiterDynamicForm = class extends LitElement {
                 @section-expand="${this._handleSectionExpand}"
                 @concept-expand="${this._handleConceptExpand}"
                 @column-remove="${this._handleColumnRemove}"
+                @column-hide="${this._handleColumnHide}"
+                @column-show="${this._handleColumnShow}"
                 @column-add-request="${this._handleColumnAddRequest}"
               ></jupiter-form-section>
               <div class="role-completion-row">
@@ -14101,6 +14253,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_repeatCounts", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_hiddenColumnIds", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_columns", 2);