jupiter-dynamic-forms 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -535,6 +535,7 @@ class XBRLFormBuilder {
     const sections = [];
     presentationData.roles.forEach((role) => {
       const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate);
+      this.assignFieldColumnIds(section);
       sections.push(section);
     });
     return {
@@ -560,11 +561,13 @@ class XBRLFormBuilder {
         }
       });
     }
+    const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31");
     return {
       id: role.id,
       title,
       description: `Section for ${title}`,
       concepts: conceptTrees,
+      columns,
       expanded: false
     };
   }
@@ -607,11 +610,18 @@ class XBRLFormBuilder {
   static createFieldFromConcept(concept, periodStartDate, periodEndDate) {
     const fieldType = this.mapXBRLTypeToFieldType(concept.type);
     const label = this.getPreferredLabel(concept.labels);
+    let columnId = "default";
+    if (concept.periodType === "instant") {
+      columnId = "instant";
+    } else if (concept.periodType === "duration") {
+      columnId = "duration_start";
+    } else {
+      columnId = "default";
+    }
     const field = {
       id: `${concept.id}_field`,
       conceptId: concept.id,
-      columnId: "default",
-      // Default column, will be expanded later
+      columnId,
       type: fieldType,
       label,
       placeholder: `Enter ${label.toLowerCase()}`,
@@ -660,6 +670,162 @@ class XBRLFormBuilder {
       return terse.label;
     return labels[0].label;
   }
+  /**
+   * Assign appropriate column IDs to fields based on section's generated columns
+   */
+  static assignFieldColumnIds(section) {
+    if (!section.columns || section.columns.length === 0) {
+      return;
+    }
+    const columnIds = section.columns.map((col) => col.id);
+    section.concepts.forEach((conceptTree) => {
+      this.assignColumnIdsToConceptFields(conceptTree, columnIds);
+    });
+  }
+  /**
+   * Recursively assign column IDs to fields in a concept tree
+   */
+  static assignColumnIdsToConceptFields(conceptTree, columnIds) {
+    conceptTree.fields.forEach((field) => {
+      if (columnIds.includes("instant") && field.columnId === "instant") {
+        field.columnId = "instant";
+      } else if (columnIds.includes("duration_start") && field.columnId === "duration_start") {
+        field.columnId = "duration_start";
+      } else if (columnIds.includes("period_start") && (field.columnId === "duration_start" || field.columnId === "instant")) {
+        field.columnId = "period_start";
+      } else if (columnIds.length > 0) {
+        field.columnId = columnIds[0];
+      }
+    });
+    if (conceptTree.children) {
+      conceptTree.children.forEach((child) => {
+        this.assignColumnIdsToConceptFields(child, columnIds);
+      });
+    }
+  }
+  /**
+   * Get all non-abstract concepts from a role recursively
+   */
+  static getAllNonAbstractConcepts(role) {
+    var _a;
+    const nonAbstractConcepts = [];
+    if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
+      role.presentationLinkbase.concepts.forEach((concept) => {
+        this.collectNonAbstractConcepts(concept, nonAbstractConcepts);
+      });
+    }
+    return nonAbstractConcepts;
+  }
+  /**
+   * Recursively collect non-abstract concepts from a concept tree
+   */
+  static collectNonAbstractConcepts(concept, collection) {
+    if (!concept.elementAbstract) {
+      collection.push(concept);
+    }
+    if (concept.children && concept.children.length > 0) {
+      concept.children.forEach((child) => {
+        this.collectNonAbstractConcepts(child, collection);
+      });
+    }
+  }
+  /**
+   * Generate default columns based on period types of non-abstract concepts in a role
+   */
+  static generateDefaultColumnsForRole(role, periodStartDate, periodEndDate) {
+    const nonAbstractConcepts = this.getAllNonAbstractConcepts(role);
+    console.log(`📊 Analyzing role "${role.role}" with ${nonAbstractConcepts.length} non-abstract concepts`);
+    if (nonAbstractConcepts.length === 0) {
+      console.log("📊 No non-abstract concepts found, using default column");
+      return [{
+        id: "default",
+        title: "Value",
+        description: "Default value column",
+        type: "base",
+        order: 0,
+        removable: false
+      }];
+    }
+    const periodTypes = new Set(
+      nonAbstractConcepts.filter((concept) => concept.periodType).map((concept) => concept.periodType)
+    );
+    console.log(`📅 Found period types: ${Array.from(periodTypes).join(", ")}`);
+    const columns = [];
+    if (periodTypes.size === 0) {
+      console.log("📅 No period types found, using default column");
+      columns.push({
+        id: "default",
+        title: "Value",
+        description: "Default value column",
+        type: "base",
+        order: 0,
+        removable: false
+      });
+    } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
+      console.log("📅 All concepts are instant type, creating single column");
+      columns.push({
+        id: "instant",
+        title: `As of ${this.formatDateForDisplay(periodStartDate)}`,
+        description: `Values as of ${periodStartDate}`,
+        type: "base",
+        order: 0,
+        removable: false
+      });
+    } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
+      console.log("📅 All concepts are duration type, creating two columns");
+      columns.push({
+        id: "duration_start",
+        title: `From ${this.formatDateForDisplay(periodStartDate)}`,
+        description: `Period start: ${periodStartDate}`,
+        type: "base",
+        order: 0,
+        removable: false
+      });
+      columns.push({
+        id: "duration_end",
+        title: `To ${this.formatDateForDisplay(periodEndDate)}`,
+        description: `Period end: ${periodEndDate}`,
+        type: "base",
+        order: 1,
+        removable: false
+      });
+    } else {
+      console.log("📅 Mixed period types found, creating two columns for full range");
+      columns.push({
+        id: "period_start",
+        title: `From ${this.formatDateForDisplay(periodStartDate)}`,
+        description: `Period start: ${periodStartDate}`,
+        type: "base",
+        order: 0,
+        removable: false
+      });
+      columns.push({
+        id: "period_end",
+        title: `To ${this.formatDateForDisplay(periodEndDate)}`,
+        description: `Period end: ${periodEndDate}`,
+        type: "base",
+        order: 1,
+        removable: false
+      });
+    }
+    console.log(`📊 Generated ${columns.length} columns for role "${role.role}":`, columns.map((c2) => c2.title));
+    return columns;
+  }
+  /**
+   * Format date for display in column headers
+   */
+  static formatDateForDisplay(dateString) {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    } catch {
+      return dateString;
+    }
+  }
   /**
    * Extract entity name from entrypoint URL
    */
@@ -1847,7 +2013,7 @@ let JupiterDynamicForm = class extends LitElement {
           ${schema.sections.map((section) => html`
             <jupiter-form-section
               .section="${section}"
-              .columns="${this._columns}"
+              .columns="${section.columns || this._columns}"
               .formData="${this._formData}"
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"