jupiter-dynamic-forms 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -592,7 +592,7 @@ class XBRLFormBuilder {
     return {
       id: role.id,
       title,
-      description: `Section for ${title}`,
+      description: ``,
       concepts: conceptTrees,
       columns,
       expanded: false
@@ -904,7 +904,94 @@ class XBRLFormBuilder {
    * Generate columns for single dimension scenarios
    */
   static generateSingleDimensionColumns(dimension, periodStartDate, periodEndDate, periodTypes) {
-    var _a, _b;
+    var _a, _b, _c;
+    if (dimension.typedMember) {
+      console.log(`📊 Found typed member dimension:`, {
+        id: dimension.id,
+        conceptName: dimension.conceptName,
+        typedMemberId: dimension.typedMember.id
+      });
+      const axisLabel2 = ((_a = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a.label) || dimension.conceptName;
+      const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
+      const dimensionInfo2 = {
+        axisId: dimension.id,
+        axisLabel: axisLabel2,
+        memberId: dimension.typedMember.id,
+        memberLabel: typedMemberLabel,
+        dimensionKey: `${axisLabel2} | ${typedMemberLabel}`,
+        dimensionIdKey: `${dimension.id} | ${dimension.typedMember.id}`
+      };
+      console.log(`📊 Generated typed dimension info:`, dimensionInfo2);
+      const columns2 = [];
+      if (periodTypes.size === 0) {
+        const column = {
+          id: "default",
+          title: dimensionInfo2.memberLabel,
+          description: "Default typed dimension column",
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "default",
+            axisId: dimensionInfo2.axisId,
+            memberId: dimensionInfo2.memberId,
+            memberValue: dimensionInfo2.memberLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberLabel: dimensionInfo2.memberLabel,
+            isTypedMember: true,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey
+          },
+          order: 0,
+          removable: false
+        };
+        console.log(`📊 Generated typed member column:`, column);
+        columns2.push(column);
+      } else {
+        if (periodTypes.has("instant")) {
+          columns2.push({
+            id: `instant_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+            title: `${dimensionInfo2.memberLabel} (Instant)`,
+            description: `${periodStartDate}`,
+            type: "dimension",
+            dimensionData: {
+              dimensionId: `instant_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+              axisId: dimensionInfo2.axisId,
+              memberId: dimensionInfo2.memberId,
+              memberValue: dimensionInfo2.memberLabel,
+              axisLabel: dimensionInfo2.axisLabel,
+              memberLabel: dimensionInfo2.memberLabel,
+              isTypedMember: true,
+              dimensionIdKey: dimensionInfo2.dimensionIdKey
+            },
+            order: 0,
+            removable: false
+          });
+        }
+        if (periodTypes.has("duration")) {
+          columns2.push({
+            id: `duration_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+            title: `${dimensionInfo2.memberLabel} (Duration)`,
+            description: `${periodStartDate} / ${periodEndDate}`,
+            type: "dimension",
+            dimensionData: {
+              dimensionId: `duration_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+              axisId: dimensionInfo2.axisId,
+              memberId: dimensionInfo2.memberId,
+              memberValue: dimensionInfo2.memberLabel,
+              axisLabel: dimensionInfo2.axisLabel,
+              memberLabel: dimensionInfo2.memberLabel,
+              isTypedMember: true,
+              dimensionIdKey: dimensionInfo2.dimensionIdKey
+            },
+            order: 1,
+            removable: false
+          });
+        }
+      }
+      return columns2;
+    }
+    if (!dimension.members || !Array.isArray(dimension.members)) {
+      console.log(`⚠️ Dimension ${dimension.id} has no members defined, skipping column generation`);
+      return [];
+    }
     console.log(`📊 Found single dimension:`, {
       id: dimension.id,
       conceptName: dimension.conceptName,
@@ -913,9 +1000,9 @@ class XBRLFormBuilder {
     if (dimension.members.length === 0) {
       return [];
     }
-    const axisLabel = ((_a = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a.label) || dimension.conceptName;
+    const axisLabel = ((_b = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || dimension.conceptName;
     const firstMember = dimension.members[0];
-    const memberLabel = ((_b = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || firstMember.conceptName;
+    const memberLabel = ((_c = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || firstMember.conceptName;
     const dimensionInfo = {
       axisId: dimension.id,
       axisLabel,
@@ -1033,9 +1120,38 @@ class XBRLFormBuilder {
    */
   static generateMultiDimensionColumns(dimensions, periodStartDate, periodEndDate, periodTypes) {
     console.log(`📊 Processing ${dimensions.length} dimensions for multi-dimensional columns`);
-    const dimensionInfos = dimensions.map((dimension) => {
+    const validDimensions = dimensions.filter((dimension) => {
+      if (dimension.typedMember) {
+        return true;
+      }
+      if (!dimension.members || !Array.isArray(dimension.members) || dimension.members.length === 0) {
+        console.log(`⚠️ Skipping dimension ${dimension.id} - no members defined`);
+        return false;
+      }
+      return true;
+    });
+    if (validDimensions.length === 0) {
+      console.log(`⚠️ No valid dimensions with members found, skipping multi-dimensional column generation`);
+      return [];
+    }
+    const dimensionInfos = validDimensions.map((dimension) => {
       var _a;
       const axisLabel = ((_a = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a.label) || dimension.conceptName;
+      if (dimension.typedMember) {
+        const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
+        return {
+          id: dimension.id,
+          axisLabel,
+          isTypedDimension: true,
+          // Flag to track typed dimensions
+          members: [{
+            id: dimension.typedMember.id,
+            label: typedMemberLabel,
+            isTypedMember: true
+            // Flag for the member itself
+          }]
+        };
+      }
       const allMembers = this.getAllDimensionMembers(dimension.members);
       return {
         id: dimension.id,
@@ -1054,17 +1170,21 @@ class XBRLFormBuilder {
     const columns = [];
     combinations.forEach((combination, index) => {
       const columnTitle = combination.map((c2) => c2.memberLabel).join(" | ");
+      const hasTypedMembers = combination.some((c2) => c2.isTypedMember);
       const dimensionData = {
         dimensionId: `multi_${index}`,
         memberValue: columnTitle,
         // Required field
         memberLabel: columnTitle,
         // Required field
+        isTypedMember: hasTypedMembers,
+        // Flag if any dimension in combination is typed
         combinations: combination.map((c2) => ({
           axisId: c2.axisId,
           axisLabel: c2.axisLabel,
           memberId: c2.memberId,
-          memberLabel: c2.memberLabel
+          memberLabel: c2.memberLabel,
+          isTypedMember: c2.isTypedMember || false
         })),
         memberKey: columnTitle,
         dimensionIdKey: combination.map((c2) => `${c2.axisId}|${c2.memberId}`).join("::")
@@ -1129,6 +1249,9 @@ class XBRLFormBuilder {
    * Get all members including children recursively
    */
   static getAllDimensionMembers(members) {
+    if (!members || !Array.isArray(members)) {
+      return [];
+    }
     const allMembers = [];
     members.forEach((member) => {
       allMembers.push(member);
@@ -2150,6 +2273,7 @@ let JupiterFormSection = class extends LitElement {
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
+    this._typedMemberValues = {};
     this._expandedConcepts = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
@@ -2277,6 +2401,14 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleTypedMemberValueChange(columnId, value) {
+    this._typedMemberValues[columnId] = value;
+    this.dispatchEvent(new CustomEvent("typed-member-change", {
+      detail: { columnId, value, sectionId: this.section.id },
+      bubbles: true
+    }));
+    this.requestUpdate();
+  }
   _flattenConcepts(concepts, expanded = /* @__PURE__ */ new Set()) {
     const result = [];
     for (const concept of concepts) {
@@ -2345,22 +2477,36 @@ let JupiterFormSection = class extends LitElement {
             <thead class="table-header">
               <tr class="header-row">
                 <th class="header-cell concept-column">Concept</th>
-                ${this.columns.map((column) => html`
+                ${this.columns.map((column) => {
+      var _a;
+      return html`
                   <th class="header-cell ${column.removable ? "removable" : ""}">
                     ${column.title}
                     ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
+                    ${((_a = column.dimensionData) == null ? void 0 : _a.isTypedMember) ? html`
+                      <div style="margin-top: 8px;">
+                        <input 
+                          type="text" 
+                          placeholder="Enter typed member value"
+                          .value="${this._typedMemberValues[column.id] || ""}"
+                          @input="${(e2) => this._handleTypedMemberValueChange(column.id, e2.target.value)}"
+                          style="width: 100%; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;"
+                        />
+                      </div>
+                    ` : ""}
                     ${column.removable ? html`
                       <button 
                         class="remove-column-btn"
                         @click="${(e2) => {
-      e2.stopPropagation();
-      this._handleRemoveColumn(column.id);
-    }}"
+        e2.stopPropagation();
+        this._handleRemoveColumn(column.id);
+      }}"
                         title="Remove column"
                       >×</button>
                     ` : ""}
                   </th>
-                `)}
+                `;
+    })}
                 <th class="header-cell">
                   <button class="add-column-btn" @click="${(e2) => {
       e2.stopPropagation();
@@ -2593,6 +2739,9 @@ __decorateClass$1([
 __decorateClass$1([
   r()
 ], JupiterFormSection.prototype, "_sectionPeriodType", 2);
+__decorateClass$1([
+  r()
+], JupiterFormSection.prototype, "_typedMemberValues", 2);
 __decorateClass$1([
   r()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
@@ -2626,6 +2775,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._dirty = false;
     this._valid = true;
     this._submitted = false;
+    this._typedMemberValues = {};
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2738,6 +2888,16 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleTypedMemberChange(event) {
+    const { columnId, value, sectionId } = event.detail;
+    this._typedMemberValues[columnId] = value;
+    this._dirty = true;
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("typed-member-change", {
+      detail: { columnId, value, sectionId },
+      bubbles: true
+    }));
+  }
   _handleSectionExpand(event) {
     this.dispatchEvent(new CustomEvent("section-expand", {
       detail: event.detail,
@@ -2781,7 +2941,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._addColumnFromRequest(columnRequest, sectionId);
   }
   _addColumnFromRequest(request, sectionId) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const timestamp = Date.now();
     const newColumnId = `col-${timestamp}`;
     let title = "";
@@ -2804,10 +2964,28 @@ let JupiterDynamicForm = class extends LitElement {
         const item = hypercubeRole.items[0];
         if (item.dimensions.length === 1) {
           const dimension = item.dimensions[0];
-          if (dimension.members.length > 0) {
+          if (dimension.typedMember) {
             const axisLabel = ((_d = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || dimension.conceptName;
+            const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
+            const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+            title = `${typedMemberLabel} ${periodPart}`;
+            dimensionData = {
+              dimensionId: newColumnId,
+              axisId: dimension.id,
+              memberId: dimension.typedMember.id,
+              memberValue: typedMemberLabel,
+              memberLabel: typedMemberLabel,
+              axis: axisLabel,
+              axisLabel,
+              memberKey: `${axisLabel} | ${typedMemberLabel}`,
+              dimensionIdKey: `${dimension.id} | ${dimension.typedMember.id}`,
+              isTypedMember: true
+            };
+            console.log(`📊 Applied typed member dimension to new column: ${dimensionData.memberKey}`);
+          } else if (dimension.members && dimension.members.length > 0) {
+            const axisLabel = ((_e = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || dimension.conceptName;
             const firstMember = dimension.members[0];
-            const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
+            const memberLabel = ((_f = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _f.label) || firstMember.conceptName;
             const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
             title = `${memberLabel} ${periodPart}`;
             dimensionData = {
@@ -3029,11 +3207,18 @@ let JupiterDynamicForm = class extends LitElement {
     concepts.forEach((concept) => {
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           const conceptData = this._formData[concept.id];
           const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
             const column = this._findColumnById(field.columnId);
+            console.log(`🔍 Processing field for concept ${concept.id}:`, {
+              fieldColumnId: field.columnId,
+              foundColumn: column,
+              columnType: column == null ? void 0 : column.type,
+              dimensionData: column == null ? void 0 : column.dimensionData,
+              isTypedMember: (_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.isTypedMember
+            });
             const submissionEntry = {
               conceptId: concept.id,
               value: fieldValue,
@@ -3047,15 +3232,43 @@ let JupiterDynamicForm = class extends LitElement {
               submissionEntry.period.startDate = field.periodStartDate || this.periodStartDate;
               submissionEntry.period.endDate = field.periodEndDate || this.periodEndDate;
             }
-            if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
-              submissionEntry.dimension = column.dimensionData.dimensionIdKey;
-            } else if ((_b = section == null ? void 0 : section.columns) == null ? void 0 : _b.length) {
+            if ((column == null ? void 0 : column.type) === "dimension" && ((_b = column.dimensionData) == null ? void 0 : _b.dimensionIdKey)) {
+              console.log(`✅ Found column dimension data:`, column.dimensionData);
+              if (column.dimensionData.isTypedMember) {
+                submissionEntry.dimension = column.dimensionData.dimensionIdKey;
+                submissionEntry.typedDimension = true;
+                submissionEntry.typedMemberValue = this._typedMemberValues[column.id] || "";
+              } else {
+                submissionEntry.dimension = column.dimensionData.dimensionIdKey;
+              }
+            } else if ((_c = section == null ? void 0 : section.columns) == null ? void 0 : _c.length) {
+              console.log(`🔍 Checking section columns for dimension data:`, {
+                sectionId: section.id,
+                columnsCount: section.columns.length,
+                columns: section.columns.map((col) => {
+                  var _a2, _b2;
+                  return {
+                    id: col.id,
+                    type: col.type,
+                    hasDimensionData: !!col.dimensionData,
+                    dimensionIdKey: (_a2 = col.dimensionData) == null ? void 0 : _a2.dimensionIdKey,
+                    isTypedMember: (_b2 = col.dimensionData) == null ? void 0 : _b2.isTypedMember
+                  };
+                })
+              });
               const sectionDimensionColumn = section.columns.find((col) => {
                 var _a2;
                 return col.type === "dimension" && ((_a2 = col.dimensionData) == null ? void 0 : _a2.dimensionIdKey);
               });
-              if ((_c = sectionDimensionColumn == null ? void 0 : sectionDimensionColumn.dimensionData) == null ? void 0 : _c.dimensionIdKey) {
-                submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+              if ((_d = sectionDimensionColumn == null ? void 0 : sectionDimensionColumn.dimensionData) == null ? void 0 : _d.dimensionIdKey) {
+                console.log(`✅ Found section dimension data:`, sectionDimensionColumn.dimensionData);
+                if (sectionDimensionColumn.dimensionData.isTypedMember) {
+                  submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+                  submissionEntry.typedDimension = true;
+                  submissionEntry.typedMemberValue = this._typedMemberValues[sectionDimensionColumn.id] || "";
+                } else {
+                  submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+                }
               }
             }
             submissionData.push(submissionEntry);
@@ -3151,6 +3364,7 @@ let JupiterDynamicForm = class extends LitElement {
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
               @field-change="${this._handleFieldChange}"
+              @typed-member-change="${this._handleTypedMemberChange}"
               @section-expand="${this._handleSectionExpand}"
               @concept-expand="${this._handleConceptExpand}"
               @column-remove="${this._handleColumnRemove}"
@@ -3366,6 +3580,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_currentSchema", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_typedMemberValues", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);