jupiter-dynamic-forms 1.19.5 → 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
     };
   }
@@ -4966,6 +4971,9 @@ 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];
@@ -5123,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));
     }
@@ -6107,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;
@@ -6521,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">
@@ -6552,7 +6594,7 @@ let JupiterFormSection = class extends LitElement {
                         </div>
                       ` : ""}
                     </div>
-                    
+
                     <!-- Column menu icon (hidden in readonly mode) -->
                     ${this.mode !== "readonly" ? html`
                     <div
@@ -6581,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>
                     ` : ""}
                     ` : ""}
@@ -6754,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;
@@ -9020,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();
@@ -9773,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");
@@ -10349,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);
@@ -10784,7 +10900,8 @@ let JupiterDynamicForm = class extends LitElement {
       this.reportingLanguage,
       this._repeatCounts,
       this._decimalsData,
-      roleCompletedStates
+      roleCompletedStates,
+      this._getHiddenColumnsForMetadata()
     );
     const draftPayloadSnapshot = JSON.stringify({
       draftData,
@@ -10918,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");
@@ -12555,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}"
@@ -12585,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>
         `;
@@ -12699,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}"
@@ -12729,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">
@@ -14124,6 +14253,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_repeatCounts", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_hiddenColumnIds", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_columns", 2);