jupiter-dynamic-forms 1.0.1 → 1.2.0

package/dist/index.mjs

@@ -527,14 +527,15 @@ class XBRLFormBuilder {
    * Build form schema from XBRL input data
    * Creates accordion sections for each presentation role
    */
-  static buildFormSchema(xbrlInput) {
+  static buildFormSchema(xbrlInput, periodStartDate, periodEndDate) {
     if (!xbrlInput.presentation || xbrlInput.presentation.length === 0) {
       throw new Error("XBRL presentation data is required");
     }
     const presentationData = xbrlInput.presentation[0];
     const sections = [];
     presentationData.roles.forEach((role) => {
-      const section = this.buildSectionFromRole(role);
+      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate);
+      this.assignFieldColumnIds(section);
       sections.push(section);
     });
     return {
@@ -548,34 +549,36 @@ class XBRLFormBuilder {
   /**
    * Build a form section from a presentation role
    */
-  static buildSectionFromRole(role) {
+  static buildSectionFromRole(role, periodStartDate, periodEndDate) {
     var _a;
     const title = this.extractRoleTitle(role.role);
     const conceptTrees = [];
     if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
       role.presentationLinkbase.concepts.forEach((concept) => {
-        const conceptTree = this.buildConceptTree(concept, 0);
+        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate);
         if (conceptTree) {
           conceptTrees.push(conceptTree);
         }
       });
     }
+    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
     };
   }
   /**
    * Build concept tree from XBRL presentation concept
    */
-  static buildConceptTree(concept, level) {
+  static buildConceptTree(concept, level, periodStartDate, periodEndDate) {
     const label = this.getPreferredLabel(concept.labels);
     const fields = [];
     if (!concept.elementAbstract) {
-      const field = this.createFieldFromConcept(concept);
+      const field = this.createFieldFromConcept(concept, periodStartDate, periodEndDate);
       if (field) {
         fields.push(field);
       }
@@ -583,7 +586,7 @@ class XBRLFormBuilder {
     const children = [];
     if (concept.children && concept.children.length > 0) {
       concept.children.forEach((child) => {
-        const childTree = this.buildConceptTree(child, level + 1);
+        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate);
         if (childTree) {
           children.push(childTree);
         }
@@ -604,14 +607,21 @@ class XBRLFormBuilder {
   /**
    * Create form field from XBRL concept
    */
-  static createFieldFromConcept(concept) {
+  static createFieldFromConcept(concept, periodStartDate, periodEndDate) {
     const fieldType = this.mapXBRLTypeToFieldType(concept.type);
     const label = this.getPreferredLabel(concept.labels);
-    return {
+    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()}`,
@@ -620,6 +630,11 @@ class XBRLFormBuilder {
       disabled: concept.elementAbstract,
       defaultValue: null
     };
+    if (concept.periodType === "duration" || concept.periodType === "instant") {
+      field.periodStartDate = periodStartDate || "2025-01-01";
+      field.periodEndDate = periodEndDate || "2025-12-31";
+    }
+    return field;
   }
   /**
    * Map XBRL data type to form field type
@@ -655,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
    */
@@ -1568,6 +1739,8 @@ let JupiterDynamicForm = class extends LitElement {
     this.initialData = {};
     this.disabled = false;
     this.readonly = false;
+    this.periodStartDate = "2025-01-01";
+    this.periodEndDate = "2025-12-31";
     this._formData = {};
     this._columns = [];
     this._errors = [];
@@ -1590,7 +1763,12 @@ let JupiterDynamicForm = class extends LitElement {
     if (this.xbrlInput) {
       try {
         console.log("🔄 Initializing form from XBRL input:", this.xbrlInput);
-        this._currentSchema = XBRLFormBuilder.buildFormSchema(this.xbrlInput);
+        console.log("📅 Using period dates:", this.periodStartDate, "to", this.periodEndDate);
+        this._currentSchema = XBRLFormBuilder.buildFormSchema(
+          this.xbrlInput,
+          this.periodStartDate,
+          this.periodEndDate
+        );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
         this._columns = [
           {
@@ -1835,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}"
@@ -2044,6 +2222,12 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean })
 ], JupiterDynamicForm.prototype, "readonly", 2);
+__decorateClass([
+  n2({ type: String })
+], JupiterDynamicForm.prototype, "periodStartDate", 2);
+__decorateClass([
+  n2({ type: String })
+], JupiterDynamicForm.prototype, "periodEndDate", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_formData", 2);