jupiter-dynamic-forms 1.6.0 → 1.6.1

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { LitElement, html, css } from "lit";
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1 = (t2) => (e2, o2) => {
+const t$3 = (t2) => (e2, o2) => {
   void 0 !== o2 ? o2.addInitializer(() => {
     customElements.define(t2, e2);
   }) : customElements.define(t2, e2);
@@ -14,19 +14,19 @@ const t$1 = (t2) => (e2, o2) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t = globalThis, e$1 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s = Symbol(), o$2 = /* @__PURE__ */ new WeakMap();
-let n$2 = class n {
+const t$2 = globalThis, e$4 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$1 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
+let n$3 = class n {
   constructor(t2, e2, o2) {
-    if (this._$cssResult$ = true, o2 !== s)
+    if (this._$cssResult$ = true, o2 !== s$1)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t2, this.t = e2;
   }
   get styleSheet() {
     let t2 = this.o;
     const s2 = this.t;
-    if (e$1 && void 0 === t2) {
+    if (e$4 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = o$2.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$2.set(s2, t2));
+      e2 && (t2 = o$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$4.set(s2, t2));
     }
     return t2;
   }
@@ -34,29 +34,29 @@ let n$2 = class n {
     return this.cssText;
   }
 };
-const r$3 = (t2) => new n$2("string" == typeof t2 ? t2 : t2 + "", void 0, s), S = (s2, o2) => {
-  if (e$1)
+const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$1), S$1 = (s2, o2) => {
+  if (e$4)
     s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else
     for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t.litNonce;
+      const o3 = document.createElement("style"), n3 = t$2.litNonce;
       void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
     }
-}, c$1 = e$1 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+}, c$2 = e$4 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
   let e2 = "";
   for (const s2 of t3.cssRules)
     e2 += s2.cssText;
-  return r$3(e2);
+  return r$4(e2);
 })(t2) : t2;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: i, defineProperty: e, getOwnPropertyDescriptor: h, getOwnPropertyNames: r$2, getOwnPropertySymbols: o$1, getPrototypeOf: n$1 } = Object, a = globalThis, c = a.trustedTypes, l = c ? c.emptyScript : "", p = a.reactiveElementPolyfillSupport, d = (t2, s2) => t2, u = { toAttribute(t2, s2) {
+const { is: i$2, defineProperty: e$3, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$3, getOwnPropertySymbols: o$3, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$1 = a$1.trustedTypes, l$1 = c$1 ? c$1.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t2, s2) => t2, u$1 = { toAttribute(t2, s2) {
   switch (s2) {
     case Boolean:
-      t2 = t2 ? l : null;
+      t2 = t2 ? l$1 : null;
       break;
     case Object:
     case Array:
@@ -81,8 +81,8 @@ const { is: i, defineProperty: e, getOwnPropertyDescriptor: h, getOwnPropertyNam
       }
   }
   return i2;
-} }, f = (t2, s2) => !i(t2, s2), b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+} }, f$1 = (t2, s2) => !i$2(t2, s2), b = { attribute: true, type: String, converter: u$1, reflect: false, useDefault: false, hasChanged: f$1 };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class y extends HTMLElement {
   static addInitializer(t2) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t2);
@@ -93,11 +93,11 @@ class y extends HTMLElement {
   static createProperty(t2, s2 = b) {
     if (s2.state && (s2.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t2) && ((s2 = Object.create(s2)).wrapped = true), this.elementProperties.set(t2, s2), !s2.noAccessor) {
       const i2 = Symbol(), h2 = this.getPropertyDescriptor(t2, i2, s2);
-      void 0 !== h2 && e(this.prototype, t2, h2);
+      void 0 !== h2 && e$3(this.prototype, t2, h2);
     }
   }
   static getPropertyDescriptor(t2, s2, i2) {
-    const { get: e2, set: r2 } = h(this.prototype, t2) ?? { get() {
+    const { get: e2, set: r2 } = h$1(this.prototype, t2) ?? { get() {
       return this[s2];
     }, set(t3) {
       this[s2] = t3;
@@ -111,16 +111,16 @@ class y extends HTMLElement {
     return this.elementProperties.get(t2) ?? b;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(d("elementProperties")))
+    if (this.hasOwnProperty(d$1("elementProperties")))
       return;
-    const t2 = n$1(this);
+    const t2 = n$2(this);
     t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(d("finalized")))
+    if (this.hasOwnProperty(d$1("finalized")))
       return;
-    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
-      const t3 = this.properties, s2 = [...r$2(t3), ...o$1(t3)];
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
+      const t3 = this.properties, s2 = [...r$3(t3), ...o$3(t3)];
       for (const i2 of s2)
         this.createProperty(i2, t3[i2]);
     }
@@ -143,9 +143,9 @@ class y extends HTMLElement {
     if (Array.isArray(s2)) {
       const e2 = new Set(s2.flat(1 / 0).reverse());
       for (const s3 of e2)
-        i2.unshift(c$1(s3));
+        i2.unshift(c$2(s3));
     } else
-      void 0 !== s2 && i2.push(c$1(s2));
+      void 0 !== s2 && i2.push(c$2(s2));
     return i2;
   }
   static _$Eu(t2, s2) {
@@ -175,7 +175,7 @@ class y extends HTMLElement {
   }
   createRenderRoot() {
     const t2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S(t2, this.constructor.elementStyles), t2;
+    return S$1(t2, this.constructor.elementStyles), t2;
   }
   connectedCallback() {
     var _a;
@@ -200,7 +200,7 @@ class y extends HTMLElement {
     var _a;
     const i2 = this.constructor.elementProperties.get(t2), e2 = this.constructor._$Eu(t2, i2);
     if (void 0 !== e2 && true === i2.reflect) {
-      const h2 = (void 0 !== ((_a = i2.converter) == null ? void 0 : _a.toAttribute) ? i2.converter : u).toAttribute(s2, i2.type);
+      const h2 = (void 0 !== ((_a = i2.converter) == null ? void 0 : _a.toAttribute) ? i2.converter : u$1).toAttribute(s2, i2.type);
       this._$Em = t2, null == h2 ? this.removeAttribute(e2) : this.setAttribute(e2, h2), this._$Em = null;
     }
   }
@@ -208,7 +208,7 @@ class y extends HTMLElement {
     var _a, _b;
     const i2 = this.constructor, e2 = i2._$Eh.get(t2);
     if (void 0 !== e2 && this._$Em !== e2) {
-      const t3 = i2.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== ((_a = t3.converter) == null ? void 0 : _a.fromAttribute) ? t3.converter : u;
+      const t3 = i2.getPropertyOptions(e2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== ((_a = t3.converter) == null ? void 0 : _a.fromAttribute) ? t3.converter : u$1;
       this._$Em = e2;
       const r2 = h2.fromAttribute(s2, t3.type);
       this[e2] = r2 ?? ((_b = this._$Ej) == null ? void 0 : _b.get(e2)) ?? r2, this._$Em = null;
@@ -218,7 +218,7 @@ class y extends HTMLElement {
     var _a;
     if (void 0 !== t2) {
       const e2 = this.constructor, h2 = this[t2];
-      if (i2 ?? (i2 = e2.getPropertyOptions(t2)), !((i2.hasChanged ?? f)(h2, s2) || i2.useDefault && i2.reflect && h2 === ((_a = this._$Ej) == null ? void 0 : _a.get(t2)) && !this.hasAttribute(e2._$Eu(t2, i2))))
+      if (i2 ?? (i2 = e2.getPropertyOptions(t2)), !((i2.hasChanged ?? f$1)(h2, s2) || i2.useDefault && i2.reflect && h2 === ((_a = this._$Ej) == null ? void 0 : _a.get(t2)) && !this.hasAttribute(e2._$Eu(t2, i2))))
         return;
       this.C(t2, s2, i2);
     }
@@ -298,13 +298,13 @@ class y extends HTMLElement {
   firstUpdated(t2) {
   }
 }
-y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p == null ? void 0 : p({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.1");
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: y }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f }, r$1 = (t2 = o, e2, r2) => {
+const o$2 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$1 }, r$2 = (t2 = o$2, e2, r2) => {
   const { kind: n3, metadata: i2 } = r2;
   let s2 = globalThis.litPropertyMetadata.get(i2);
   if (void 0 === s2 && globalThis.litPropertyMetadata.set(i2, s2 = /* @__PURE__ */ new Map()), "setter" === n3 && ((t2 = Object.create(t2)).wrapped = true), s2.set(r2.name, t2), "accessor" === n3) {
@@ -325,8 +325,8 @@ const o = { attribute: true, type: String, converter: u, reflect: false, hasChan
   }
   throw Error("Unsupported decorator location: " + n3);
 };
-function n2(t2) {
-  return (e2, o2) => "object" == typeof o2 ? r$1(t2, e2, o2) : ((t3, e3, o3) => {
+function n$1(t2) {
+  return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => {
     const r2 = e3.hasOwnProperty(o3);
     return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
   })(t2, e2, o2);
@@ -336,8 +336,8 @@ function n2(t2) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function r(r2) {
-  return n2({ ...r2, state: true, attribute: false });
+function r$1(r2) {
+  return n$1({ ...r2, state: true, attribute: false });
 }
 class FormValidator {
   /**
@@ -527,13 +527,30 @@ class XBRLFormBuilder {
    * Create unique concept ID by combining original ID with preferred label suffix
    * This handles cases where the same concept appears multiple times with different labels
    */
-  static createUniqueConceptId(concept) {
+  static createUniqueConceptId(concept, sectionId) {
+    let baseId = concept.id;
     if (concept.preferredLabel && concept.preferredLabel.trim() !== "") {
       const roleMatch = concept.preferredLabel.match(/\/([^\/]+)$/);
       const roleSuffix = roleMatch ? roleMatch[1] : concept.preferredLabel.replace(/[^a-zA-Z0-9]/g, "_");
-      return `${concept.id}_${roleSuffix}`;
+      baseId = `${concept.id}_${roleSuffix}`;
     }
-    return concept.id;
+    if (sectionId) {
+      const sectionHash = this.createSectionHash(sectionId);
+      return `${baseId}__${sectionHash}`;
+    }
+    return baseId;
+  }
+  /**
+   * Create a short hash from section ID for concept uniqueness
+   */
+  static createSectionHash(sectionId) {
+    let hash = 0;
+    for (let i2 = 0; i2 < sectionId.length; i2++) {
+      const char = sectionId.charCodeAt(i2);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36).substr(0, 6);
   }
   /**
    * Build form schema from XBRL input data
@@ -579,11 +596,17 @@ class XBRLFormBuilder {
     const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31", hypercubeRole, nonAbstractConcepts, periodTypes);
     const availableColumnIds = columns.map((col) => col.id);
     console.log(`📋 Available column IDs for role "${role.id}":`, availableColumnIds);
+    if (availableColumnIds.some((id) => id.includes("multi_"))) {
+      console.log(`🔍 [DEBUG] Multi-dimensional role "${role.role}" - Total columns generated: ${columns.length}`);
+      columns.forEach((col, index) => {
+        console.log(`  Column ${index}: id=${col.id}, title=${col.title}, type=${col.type}`);
+      });
+    }
     const roleInfo = { periodTypes, availableColumnIds };
     const conceptTrees = [];
     if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
       role.presentationLinkbase.concepts.forEach((concept) => {
-        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo);
+        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo, role.id);
         if (conceptTree) {
           conceptTrees.push(conceptTree);
         }
@@ -592,16 +615,20 @@ class XBRLFormBuilder {
     return {
       id: role.id,
       title,
-      description: ``,
+      description: role.description || `Section for ${title}`,
       concepts: conceptTrees,
       columns,
-      expanded: false
+      expanded: false,
+      metadata: {
+        roleURI: role.roleURI,
+        originalRole: role.role
+      }
     };
   }
   /**
    * Build concept tree from XBRL presentation concept
    */
-  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo) {
+  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo, sectionId) {
     const label = this.getPreferredLabel(concept.labels);
     const fields = [];
     if (!concept.elementAbstract) {
@@ -645,7 +672,7 @@ class XBRLFormBuilder {
     const children = [];
     if (concept.children && concept.children.length > 0) {
       concept.children.forEach((child) => {
-        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo);
+        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo, sectionId);
         if (childTree) {
           children.push(childTree);
         }
@@ -656,7 +683,7 @@ class XBRLFormBuilder {
       return null;
     }
     return {
-      id: this.createUniqueConceptId(concept),
+      id: this.createUniqueConceptId(concept, sectionId),
       // Use unique ID for form management
       originalConceptId: concept.id,
       // Store original for submission data
@@ -861,7 +888,7 @@ class XBRLFormBuilder {
         console.log("📅 All concepts are instant type, creating single column");
         columns.push({
           id: "instant",
-          title: `As of ${this.formatDateForDisplay(periodStartDate)}`,
+          title: `Current`,
           description: `Values as of ${periodStartDate}`,
           type: "base",
           order: 0,
@@ -871,7 +898,7 @@ class XBRLFormBuilder {
         console.log("📅 All concepts are duration type, creating single column with period range");
         columns.push({
           id: "duration",
-          title: `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`,
+          title: `Current Period`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "base",
           order: 0,
@@ -881,7 +908,7 @@ class XBRLFormBuilder {
         console.log("📅 Mixed period types found, creating both duration and instant columns");
         columns.push({
           id: "duration",
-          title: `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`,
+          title: `Current Period`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "base",
           order: 0,
@@ -889,7 +916,7 @@ class XBRLFormBuilder {
         });
         columns.push({
           id: "instant",
-          title: `As of ${this.formatDateForDisplay(periodStartDate)}`,
+          title: `Current`,
           description: `Values as of ${periodStartDate}`,
           type: "base",
           order: 1,
@@ -904,92 +931,172 @@ class XBRLFormBuilder {
    * Generate columns for single dimension scenarios
    */
   static generateSingleDimensionColumns(dimension, periodStartDate, periodEndDate, periodTypes) {
-    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";
+    var _a, _b, _c, _d, _e;
+    console.log(`📊 Processing single dimension:`, {
+      id: dimension.id,
+      conceptName: dimension.conceptName,
+      hasMembers: !!(dimension.members && Array.isArray(dimension.members)),
+      membersCount: ((_a = dimension.members) == null ? void 0 : _a.length) || 0,
+      hasTypedMember: !!dimension.typedMember,
+      typedMemberId: (_b = dimension.typedMember) == null ? void 0 : _b.id
+    });
+    if (dimension.typedMember && (!dimension.members || dimension.members.length === 0)) {
+      console.log(`🔤 Processing typed dimension: ${dimension.id} with typed member: ${dimension.typedMember.id}`);
+      const axisLabel2 = ((_c = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || dimension.conceptName;
       const dimensionInfo2 = {
         axisId: dimension.id,
         axisLabel: axisLabel2,
-        memberId: dimension.typedMember.id,
-        memberLabel: typedMemberLabel,
-        dimensionKey: `${axisLabel2} | ${typedMemberLabel}`,
-        dimensionIdKey: `${dimension.id} | ${dimension.typedMember.id}`
+        typedMemberId: dimension.typedMember.id,
+        dimensionKey: `${axisLabel2} | [Typed Input]`,
+        dimensionIdKey: `${dimension.id}|[typed]`
       };
-      console.log(`📊 Generated typed dimension info:`, dimensionInfo2);
+      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",
+        columns2.push({
+          id: "typed-default",
+          title: axisLabel2,
+          description: "Typed dimension input column",
           type: "dimension",
           dimensionData: {
-            dimensionId: "default",
+            dimensionId: "typed-default",
             axisId: dimensionInfo2.axisId,
-            memberId: dimensionInfo2.memberId,
-            memberValue: dimensionInfo2.memberLabel,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
             axisLabel: dimensionInfo2.axisLabel,
-            memberLabel: dimensionInfo2.memberLabel,
-            isTypedMember: true,
-            dimensionIdKey: dimensionInfo2.dimensionIdKey
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
           },
           order: 0,
           removable: false
-        };
-        console.log(`📊 Generated typed member column:`, column);
-        columns2.push(column);
+        });
+      } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
+        columns2.push({
+          id: "typed-instant",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values as of ${periodStartDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-instant",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
+      } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
+        columns2.push({
+          id: "typed-duration",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-duration",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
       } 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}`,
+        columns2.push({
+          id: "typed-duration",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-duration",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
               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}`,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
+        columns2.push({
+          id: "typed-instant",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values as of ${periodStartDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-instant",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
               axisId: dimensionInfo2.axisId,
-              memberId: dimensionInfo2.memberId,
-              memberValue: dimensionInfo2.memberLabel,
               axisLabel: dimensionInfo2.axisLabel,
-              memberLabel: dimensionInfo2.memberLabel,
-              isTypedMember: true,
-              dimensionIdKey: dimensionInfo2.dimensionIdKey
-            },
-            order: 1,
-            removable: false
-          });
-        }
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 1,
+          removable: false
+        });
       }
+      console.log(`🔤 Generated ${columns2.length} typed dimension columns`);
       return columns2;
     }
     if (!dimension.members || !Array.isArray(dimension.members)) {
-      console.log(`⚠️ Dimension ${dimension.id} has no members defined, skipping column generation`);
+      console.log(`⚠️ Dimension ${dimension.id} has no members defined and no typed member, skipping column generation`);
       return [];
     }
     console.log(`📊 Found single dimension:`, {
@@ -1000,9 +1107,9 @@ class XBRLFormBuilder {
     if (dimension.members.length === 0) {
       return [];
     }
-    const axisLabel = ((_b = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || dimension.conceptName;
+    const axisLabel = ((_d = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || dimension.conceptName;
     const firstMember = dimension.members[0];
-    const memberLabel = ((_c = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || firstMember.conceptName;
+    const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
     const dimensionInfo = {
       axisId: dimension.id,
       axisLabel,
@@ -1036,7 +1143,7 @@ class XBRLFormBuilder {
     } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
       columns.push({
         id: "instant",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Values as of ${periodStartDate}`,
         type: "dimension",
         dimensionData: {
@@ -1056,7 +1163,7 @@ class XBRLFormBuilder {
     } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
       columns.push({
         id: "duration",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Period: ${periodStartDate} to ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
@@ -1076,7 +1183,7 @@ class XBRLFormBuilder {
     } else {
       columns.push({
         id: "duration",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Period: ${periodStartDate} to ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
@@ -1095,7 +1202,7 @@ class XBRLFormBuilder {
       });
       columns.push({
         id: "instant",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Values as of ${periodStartDate}`,
         type: "dimension",
         dimensionData: {
@@ -1120,15 +1227,30 @@ class XBRLFormBuilder {
    */
   static generateMultiDimensionColumns(dimensions, periodStartDate, periodEndDate, periodTypes) {
     console.log(`📊 Processing ${dimensions.length} dimensions for multi-dimensional columns`);
+    console.log(`🔍 [DEBUG] Input dimensions:`, dimensions.map((d2) => {
+      var _a, _b, _c;
+      return {
+        id: d2.id,
+        label: (_b = (_a = d2.labels) == null ? void 0 : _a.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label,
+        membersCount: ((_c = d2.members) == null ? void 0 : _c.length) || 0,
+        hasTypedMember: !!d2.typedMember
+      };
+    }));
+    const hasTypedMembers = dimensions.some((dimension) => dimension.typedMember);
+    if (hasTypedMembers) {
+      console.log(`🔤 Found typed members in dimensions - will indicate in column headers`);
+    }
     const validDimensions = dimensions.filter((dimension) => {
       if (dimension.typedMember) {
+        console.log(`🔤 Keeping typed dimension: ${dimension.id} with typed member: ${dimension.typedMember.id}`);
         return true;
       }
-      if (!dimension.members || !Array.isArray(dimension.members) || dimension.members.length === 0) {
-        console.log(`⚠️ Skipping dimension ${dimension.id} - no members defined`);
-        return false;
+      if (dimension.members && Array.isArray(dimension.members) && dimension.members.length > 0) {
+        console.log(`📂 Keeping domain dimension: ${dimension.id} with ${dimension.members.length} members`);
+        return true;
       }
-      return true;
+      console.log(`⚠️ Skipping dimension ${dimension.id} - no members or typed member defined`);
+      return false;
     });
     if (validDimensions.length === 0) {
       console.log(`⚠️ No valid dimensions with members found, skipping multi-dimensional column generation`);
@@ -1138,17 +1260,14 @@ class XBRLFormBuilder {
       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
+          isTyped: true,
+          typedMemberId: dimension.typedMember.id,
           members: [{
-            id: dimension.typedMember.id,
-            label: typedMemberLabel,
-            isTypedMember: true
-            // Flag for the member itself
+            id: "[typed]",
+            label: `${axisLabel} [Typed Input Available]`
           }]
         };
       }
@@ -1156,6 +1275,7 @@ class XBRLFormBuilder {
       return {
         id: dimension.id,
         axisLabel,
+        isTyped: false,
         members: allMembers.map((member) => {
           var _a2;
           return {
@@ -1167,32 +1287,63 @@ class XBRLFormBuilder {
     });
     const combinations = this.generateDimensionCombinations(dimensionInfos);
     console.log(`📊 Generated ${combinations.length} dimension combinations`);
+    console.log(`🔍 [DEBUG] Generated combinations:`, combinations.map((combo) => ({
+      memberLabels: combo.map((c2) => c2.memberLabel),
+      axisIds: combo.map((c2) => c2.axisId),
+      memberIds: combo.map((c2) => c2.memberId)
+    })));
     const columns = [];
     combinations.forEach((combination, index) => {
+      var _a, _b;
       const columnTitle = combination.map((c2) => c2.memberLabel).join(" | ");
-      const hasTypedMembers = combination.some((c2) => c2.isTypedMember);
+      const typedMembers = combination.filter((c2) => c2.isTyped);
+      const domainMembers = combination.filter((c2) => !c2.isTyped);
+      console.log(`🔍 [Column ${index}] Combination analysis:`, {
+        totalMembers: combination.length,
+        typedMembers: typedMembers.length,
+        domainMembers: domainMembers.length,
+        hasTypedMembers: typedMembers.length > 0,
+        columnTitle,
+        memberLabels: combination.map((c2) => c2.memberLabel),
+        memberIds: combination.map((c2) => c2.memberId)
+      });
       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) => ({
+        combinations: domainMembers.map((c2) => ({
           axisId: c2.axisId,
           axisLabel: c2.axisLabel,
           memberId: c2.memberId,
-          memberLabel: c2.memberLabel,
-          isTypedMember: c2.isTypedMember || false
+          memberLabel: c2.memberLabel
         })),
+        // Add typed member information for form fields
+        typedMembers: typedMembers.map((c2) => ({
+          axisId: c2.axisId,
+          axisLabel: c2.axisLabel,
+          typedMemberId: c2.typedMemberId,
+          memberLabel: c2.memberLabel
+        })),
+        hasTypedMembers: typedMembers.length > 0,
         memberKey: columnTitle,
-        dimensionIdKey: combination.map((c2) => `${c2.axisId}|${c2.memberId}`).join("::")
+        dimensionIdKey: [
+          ...domainMembers.map((c2) => `${c2.axisId}|${c2.memberId}`),
+          ...typedMembers.map((c2) => `${c2.axisId}|[typed]`)
+        ].join("::")
       };
+      console.log(`🔍 [Column ${index}] Final dimension data:`, {
+        dimensionId: dimensionData.dimensionId,
+        memberLabel: dimensionData.memberLabel,
+        dimensionIdKey: dimensionData.dimensionIdKey,
+        combinationsCount: (_a = dimensionData.combinations) == null ? void 0 : _a.length,
+        typedMembersCount: (_b = dimensionData.typedMembers) == null ? void 0 : _b.length
+      });
       if (periodTypes.size === 0 || periodTypes.size === 1 && periodTypes.has("duration")) {
         columns.push({
           id: `duration_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+          title: `${columnTitle}`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
@@ -1205,7 +1356,7 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
         columns.push({
           id: `instant_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)})`,
+          title: `${columnTitle}`,
           description: `Values as of ${periodStartDate}`,
           type: "dimension",
           dimensionData: {
@@ -1218,7 +1369,7 @@ class XBRLFormBuilder {
       } else {
         columns.push({
           id: `duration_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+          title: `${columnTitle}`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
@@ -1230,7 +1381,7 @@ class XBRLFormBuilder {
         });
         columns.push({
           id: `instant_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)})`,
+          title: `${columnTitle}`,
           description: `Values as of ${periodStartDate}`,
           type: "dimension",
           dimensionData: {
@@ -1272,7 +1423,9 @@ class XBRLFormBuilder {
         axisId: dimensionInfos[0].id,
         axisLabel: dimensionInfos[0].axisLabel,
         memberId: member.id,
-        memberLabel: member.label
+        memberLabel: member.label,
+        isTyped: dimensionInfos[0].isTyped || false,
+        typedMemberId: dimensionInfos[0].typedMemberId
       }]);
     }
     const [firstDimension, ...restDimensions] = dimensionInfos;
@@ -1284,7 +1437,9 @@ class XBRLFormBuilder {
           axisId: firstDimension.id,
           axisLabel: firstDimension.axisLabel,
           memberId: member.id,
-          memberLabel: member.label
+          memberLabel: member.label,
+          isTyped: firstDimension.isTyped || false,
+          typedMemberId: firstDimension.typedMemberId
         }]);
       } else {
         restCombinations.forEach((restCombination) => {
@@ -1293,7 +1448,9 @@ class XBRLFormBuilder {
               axisId: firstDimension.id,
               axisLabel: firstDimension.axisLabel,
               memberId: member.id,
-              memberLabel: member.label
+              memberLabel: member.label,
+              isTyped: firstDimension.isTyped || false,
+              typedMemberId: firstDimension.typedMemberId
             },
             ...restCombination
           ]);
@@ -1355,15 +1512,15 @@ class XBRLFormBuilder {
     }];
   }
 }
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$4(target, key, result);
+    __defProp$5(target, key, result);
   return result;
 };
 let JupiterFormField = class extends LitElement {
@@ -1668,45 +1825,45 @@ JupiterFormField.styles = css`
       width: auto;
     }
   `;
-__decorateClass$4([
-  n2({ type: Object })
+__decorateClass$5([
+  n$1({ type: Object })
 ], JupiterFormField.prototype, "field", 2);
-__decorateClass$4([
-  n2({ type: String })
+__decorateClass$5([
+  n$1({ type: String })
 ], JupiterFormField.prototype, "conceptId", 2);
-__decorateClass$4([
-  n2({ type: String })
+__decorateClass$5([
+  n$1({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
-__decorateClass$4([
-  n2()
+__decorateClass$5([
+  n$1()
 ], JupiterFormField.prototype, "value", 2);
-__decorateClass$4([
-  n2({ type: Boolean })
+__decorateClass$5([
+  n$1({ type: Boolean })
 ], JupiterFormField.prototype, "disabled", 2);
-__decorateClass$4([
-  n2({ type: String })
+__decorateClass$5([
+  n$1({ type: String })
 ], JupiterFormField.prototype, "locale", 2);
-__decorateClass$4([
-  n2({ type: Boolean })
+__decorateClass$5([
+  n$1({ type: Boolean })
 ], JupiterFormField.prototype, "hideLabel", 2);
-__decorateClass$4([
-  r()
+__decorateClass$5([
+  r$1()
 ], JupiterFormField.prototype, "_errors", 2);
-__decorateClass$4([
-  r()
+__decorateClass$5([
+  r$1()
 ], JupiterFormField.prototype, "_touched", 2);
-JupiterFormField = __decorateClass$4([
-  t$1("jupiter-form-field")
+JupiterFormField = __decorateClass$5([
+  t$3("jupiter-form-field")
 ], JupiterFormField);
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$3(target, key, result);
+    __defProp$4(target, key, result);
   return result;
 };
 let JupiterConceptTree = class extends LitElement {
@@ -1899,40 +2056,42 @@ JupiterConceptTree.styles = css`
     .children-wrapper {
       display: none;
     }
+
+
   `;
-__decorateClass$3([
-  n2({ type: Object })
+__decorateClass$4([
+  n$1({ type: Object })
 ], JupiterConceptTree.prototype, "concept", 2);
-__decorateClass$3([
-  n2({ type: Array })
+__decorateClass$4([
+  n$1({ type: Array })
 ], JupiterConceptTree.prototype, "columns", 2);
-__decorateClass$3([
-  n2({ type: Object })
+__decorateClass$4([
+  n$1({ type: Object })
 ], JupiterConceptTree.prototype, "formData", 2);
-__decorateClass$3([
-  n2({ type: Boolean })
+__decorateClass$4([
+  n$1({ type: Boolean })
 ], JupiterConceptTree.prototype, "disabled", 2);
-__decorateClass$3([
-  n2({ type: String })
+__decorateClass$4([
+  n$1({ type: String })
 ], JupiterConceptTree.prototype, "locale", 2);
-__decorateClass$3([
-  n2({ type: Set })
+__decorateClass$4([
+  n$1({ type: Set })
 ], JupiterConceptTree.prototype, "expandedConcepts", 2);
-__decorateClass$3([
-  r()
+__decorateClass$4([
+  r$1()
 ], JupiterConceptTree.prototype, "_expanded", 2);
-JupiterConceptTree = __decorateClass$3([
-  t$1("jupiter-concept-tree")
+JupiterConceptTree = __decorateClass$4([
+  t$3("jupiter-concept-tree")
 ], JupiterConceptTree);
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$2(target, key, result);
+    __defProp$3(target, key, result);
   return result;
 };
 let JupiterAddColumnDialog = class extends LitElement {
@@ -2230,36 +2389,36 @@ JupiterAddColumnDialog.styles = css`
       cursor: not-allowed;
     }
   `;
-__decorateClass$2([
-  n2({ type: String })
+__decorateClass$3([
+  n$1({ type: String })
 ], JupiterAddColumnDialog.prototype, "periodType", 2);
-__decorateClass$2([
-  n2({ type: Boolean })
+__decorateClass$3([
+  n$1({ type: Boolean })
 ], JupiterAddColumnDialog.prototype, "open", 2);
-__decorateClass$2([
-  r()
+__decorateClass$3([
+  r$1()
 ], JupiterAddColumnDialog.prototype, "_startDate", 2);
-__decorateClass$2([
-  r()
+__decorateClass$3([
+  r$1()
 ], JupiterAddColumnDialog.prototype, "_endDate", 2);
-__decorateClass$2([
-  r()
+__decorateClass$3([
+  r$1()
 ], JupiterAddColumnDialog.prototype, "_instantDate", 2);
-__decorateClass$2([
-  r()
+__decorateClass$3([
+  r$1()
 ], JupiterAddColumnDialog.prototype, "_selectedType", 2);
-JupiterAddColumnDialog = __decorateClass$2([
-  t$1("jupiter-add-column-dialog")
+JupiterAddColumnDialog = __decorateClass$3([
+  t$3("jupiter-add-column-dialog")
 ], JupiterAddColumnDialog);
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$1(target, key, result);
+    __defProp$2(target, key, result);
   return result;
 };
 let JupiterFormSection = class extends LitElement {
@@ -2267,13 +2426,13 @@ let JupiterFormSection = class extends LitElement {
     super(...arguments);
     this.columns = [];
     this.formData = {};
+    this.typedMemberData = {};
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
-    this._typedMemberValues = {};
     this._expandedConcepts = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
@@ -2401,14 +2560,6 @@ 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) {
@@ -2434,6 +2585,23 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _getTypedMemberHeaderValue(columnId, axisId) {
+    var _a;
+    return ((_a = this.typedMemberData[columnId]) == null ? void 0 : _a[axisId]) || "";
+  }
+  _handleTypedMemberHeaderChange(event, columnId, axisId) {
+    const target = event.target;
+    const value = target.value;
+    console.log(`🔍 [FormSection] Typed member header change: columnId=${columnId}, axisId=${axisId}, value=${value}`);
+    this.dispatchEvent(new CustomEvent("typed-member-change", {
+      detail: {
+        columnId,
+        axisId,
+        value
+      },
+      bubbles: true
+    }));
+  }
   render() {
     if (!this.section.concepts || this.section.concepts.length === 0) {
       return html`
@@ -2478,32 +2646,43 @@ let JupiterFormSection = class extends LitElement {
               <tr class="header-row">
                 <th class="header-cell concept-column">Concept</th>
                 ${this.columns.map((column) => {
-      var _a;
+      var _a, _b, _c;
       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 class="column-header-content">
+                      <div class="column-title">
+                        ${column.title}
+                        ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
                       </div>
-                    ` : ""}
-                    ${column.removable ? html`
-                      <button 
-                        class="remove-column-btn"
-                        @click="${(e2) => {
+                      
+                      <!-- Typed member input fields in column header -->
+                      ${((_a = column.dimensionData) == null ? void 0 : _a.hasTypedMembers) ? html`
+                        <div class="typed-members-header">
+                          ${(_c = (_b = column.dimensionData) == null ? void 0 : _b.typedMembers) == null ? void 0 : _c.map((typedMember) => html`
+                            <div class="typed-member-header-input">
+                              <input
+                                type="text"
+                                class="typed-member-header-field"
+                                placeholder="Enter ${typedMember.axisLabel}"
+                                .value="${this._getTypedMemberHeaderValue(column.id, typedMember.axisId)}"
+                                @input="${(e2) => this._handleTypedMemberHeaderChange(e2, column.id, typedMember.axisId)}"
+                              />
+                            </div>
+                          `)}
+                        </div>
+                      ` : ""}
+                      
+                      ${column.removable ? html`
+                        <button 
+                          class="remove-column-btn"
+                          @click="${(e2) => {
         e2.stopPropagation();
         this._handleRemoveColumn(column.id);
       }}"
-                        title="Remove column"
-                      >×</button>
-                    ` : ""}
+                          title="Remove column"
+                        >×</button>
+                      ` : ""}
+                    </div>
                   </th>
                 `;
     })}
@@ -2705,6 +2884,63 @@ JupiterFormSection.styles = css`
       background: var(--jupiter-primary-color-dark, #5a6fd8);
     }
 
+    /* Column header content styling */
+    .column-header-content {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .column-title {
+      text-align: center;
+    }
+
+    /* Typed member header input styles */
+    .typed-members-header {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+      padding: 8px;
+      background: var(--jupiter-typed-member-header-background, #f8f9fa);
+      border-radius: 4px;
+      border: 1px solid var(--jupiter-border-color, #e0e0e0);
+    }
+
+    .typed-member-header-input {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .typed-member-header-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--jupiter-text-secondary, #666);
+      text-align: left;
+    }
+
+    .typed-member-header-field {
+      width: 100%;
+      padding: 4px 6px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 3px;
+      font-size: 12px;
+      background: var(--jupiter-input-background, #fff);
+    }
+
+    .typed-member-header-field:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 1px var(--jupiter-primary-color, #1976d2);
+    }
+
+    .typed-member-header-field::placeholder {
+      color: var(--jupiter-text-placeholder, #999);
+      font-size: 11px;
+    }
+
     .empty-section {
       padding: 24px;
       text-align: center;
@@ -2712,71 +2948,964 @@ JupiterFormSection.styles = css`
       font-style: italic;
     }
   `;
-__decorateClass$1([
-  n2({ type: Object })
+__decorateClass$2([
+  n$1({ type: Object })
 ], JupiterFormSection.prototype, "section", 2);
-__decorateClass$1([
-  n2({ type: Array })
+__decorateClass$2([
+  n$1({ type: Array })
 ], JupiterFormSection.prototype, "columns", 2);
-__decorateClass$1([
-  n2({ type: Object })
+__decorateClass$2([
+  n$1({ type: Object })
 ], JupiterFormSection.prototype, "formData", 2);
-__decorateClass$1([
-  n2({ type: Boolean })
+__decorateClass$2([
+  n$1({ type: Object })
+], JupiterFormSection.prototype, "typedMemberData", 2);
+__decorateClass$2([
+  n$1({ type: Boolean })
 ], JupiterFormSection.prototype, "disabled", 2);
-__decorateClass$1([
-  n2({ type: Boolean })
+__decorateClass$2([
+  n$1({ type: Boolean })
 ], JupiterFormSection.prototype, "collapsible", 2);
-__decorateClass$1([
-  n2({ type: String })
+__decorateClass$2([
+  n$1({ type: String })
 ], JupiterFormSection.prototype, "locale", 2);
-__decorateClass$1([
-  r()
+__decorateClass$2([
+  r$1()
 ], JupiterFormSection.prototype, "_expanded", 2);
-__decorateClass$1([
-  r()
+__decorateClass$2([
+  r$1()
 ], JupiterFormSection.prototype, "_showAddColumnDialog", 2);
-__decorateClass$1([
-  r()
+__decorateClass$2([
+  r$1()
 ], JupiterFormSection.prototype, "_sectionPeriodType", 2);
-__decorateClass$1([
-  r()
-], JupiterFormSection.prototype, "_typedMemberValues", 2);
-__decorateClass$1([
-  r()
+__decorateClass$2([
+  r$1()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
-JupiterFormSection = __decorateClass$1([
-  t$1("jupiter-form-section")
+JupiterFormSection = __decorateClass$2([
+  t$3("jupiter-form-section")
 ], JupiterFormSection);
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = globalThis, i$1 = t$1.trustedTypes, s = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$2 = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$1 = "?" + h, n2 = `<${o$1}>`, r = document, l = () => r.createComment(""), c = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129);
+function P(t2, i2) {
+  if (!a(t2) || !t2.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return void 0 !== s ? s.createHTML(i2) : i2;
+}
+const V = (t2, i2) => {
+  const s2 = t2.length - 1, o2 = [];
+  let r2, l2 = 2 === i2 ? "<svg>" : 3 === i2 ? "<math>" : "", c2 = f;
+  for (let i3 = 0; i3 < s2; i3++) {
+    const s3 = t2[i3];
+    let a2, u2, d2 = -1, y2 = 0;
+    for (; y2 < s3.length && (c2.lastIndex = y2, u2 = c2.exec(s3), null !== u2); )
+      y2 = c2.lastIndex, c2 === f ? "!--" === u2[1] ? c2 = v : void 0 !== u2[1] ? c2 = _ : void 0 !== u2[2] ? ($.test(u2[2]) && (r2 = RegExp("</" + u2[2], "g")), c2 = m) : void 0 !== u2[3] && (c2 = m) : c2 === m ? ">" === u2[0] ? (c2 = r2 ?? f, d2 = -1) : void 0 === u2[1] ? d2 = -2 : (d2 = c2.lastIndex - u2[2].length, a2 = u2[1], c2 = void 0 === u2[3] ? m : '"' === u2[3] ? g : p) : c2 === g || c2 === p ? c2 = m : c2 === v || c2 === _ ? c2 = f : (c2 = m, r2 = void 0);
+    const x = c2 === m && t2[i3 + 1].startsWith("/>") ? " " : "";
+    l2 += c2 === f ? s3 + n2 : d2 >= 0 ? (o2.push(a2), s3.slice(0, d2) + e$2 + s3.slice(d2) + h + x) : s3 + h + (-2 === d2 ? i3 : x);
+  }
+  return [P(t2, l2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : 3 === i2 ? "</math>" : "")), o2];
 };
-let JupiterDynamicForm = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.config = {};
-    this.initialData = {};
-    this.disabled = false;
-    this.readonly = false;
-    this.periodStartDate = "2025-01-01";
-    this.periodEndDate = "2025-12-31";
-    this._formData = {};
-    this._columns = [];
-    this._errors = [];
-    this._touched = /* @__PURE__ */ new Set();
-    this._dirty = false;
-    this._valid = true;
-    this._submitted = false;
-    this._typedMemberValues = {};
-  }
+class N {
+  constructor({ strings: t2, _$litType$: s2 }, n3) {
+    let r2;
+    this.parts = [];
+    let c2 = 0, a2 = 0;
+    const u2 = t2.length - 1, d2 = this.parts, [f2, v2] = V(t2, s2);
+    if (this.el = N.createElement(f2, n3), C.currentNode = this.el.content, 2 === s2 || 3 === s2) {
+      const t3 = this.el.content.firstChild;
+      t3.replaceWith(...t3.childNodes);
+    }
+    for (; null !== (r2 = C.nextNode()) && d2.length < u2; ) {
+      if (1 === r2.nodeType) {
+        if (r2.hasAttributes())
+          for (const t3 of r2.getAttributeNames())
+            if (t3.endsWith(e$2)) {
+              const i2 = v2[a2++], s3 = r2.getAttribute(t3).split(h), e2 = /([.?@])?(.*)/.exec(i2);
+              d2.push({ type: 1, index: c2, name: e2[2], strings: s3, ctor: "." === e2[1] ? H : "?" === e2[1] ? I : "@" === e2[1] ? L : k }), r2.removeAttribute(t3);
+            } else
+              t3.startsWith(h) && (d2.push({ type: 6, index: c2 }), r2.removeAttribute(t3));
+        if ($.test(r2.tagName)) {
+          const t3 = r2.textContent.split(h), s3 = t3.length - 1;
+          if (s3 > 0) {
+            r2.textContent = i$1 ? i$1.emptyScript : "";
+            for (let i2 = 0; i2 < s3; i2++)
+              r2.append(t3[i2], l()), C.nextNode(), d2.push({ type: 2, index: ++c2 });
+            r2.append(t3[s3], l());
+          }
+        }
+      } else if (8 === r2.nodeType)
+        if (r2.data === o$1)
+          d2.push({ type: 2, index: c2 });
+        else {
+          let t3 = -1;
+          for (; -1 !== (t3 = r2.data.indexOf(h, t3 + 1)); )
+            d2.push({ type: 7, index: c2 }), t3 += h.length - 1;
+        }
+      c2++;
+    }
+  }
+  static createElement(t2, i2) {
+    const s2 = r.createElement("template");
+    return s2.innerHTML = t2, s2;
+  }
+}
+function S(t2, i2, s2 = t2, e2) {
+  var _a, _b;
+  if (i2 === T)
+    return i2;
+  let h2 = void 0 !== e2 ? (_a = s2._$Co) == null ? void 0 : _a[e2] : s2._$Cl;
+  const o2 = c(i2) ? void 0 : i2._$litDirective$;
+  return (h2 == null ? void 0 : h2.constructor) !== o2 && ((_b = h2 == null ? void 0 : h2._$AO) == null ? void 0 : _b.call(h2, false), void 0 === o2 ? h2 = void 0 : (h2 = new o2(t2), h2._$AT(t2, s2, e2)), void 0 !== e2 ? (s2._$Co ?? (s2._$Co = []))[e2] = h2 : s2._$Cl = h2), void 0 !== h2 && (i2 = S(t2, h2._$AS(t2, i2.values), h2, e2)), i2;
+}
+class M {
+  constructor(t2, i2) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(t2) {
+    const { el: { content: i2 }, parts: s2 } = this._$AD, e2 = ((t2 == null ? void 0 : t2.creationScope) ?? r).importNode(i2, true);
+    C.currentNode = e2;
+    let h2 = C.nextNode(), o2 = 0, n3 = 0, l2 = s2[0];
+    for (; void 0 !== l2; ) {
+      if (o2 === l2.index) {
+        let i3;
+        2 === l2.type ? i3 = new R(h2, h2.nextSibling, this, t2) : 1 === l2.type ? i3 = new l2.ctor(h2, l2.name, l2.strings, this, t2) : 6 === l2.type && (i3 = new z(h2, this, t2)), this._$AV.push(i3), l2 = s2[++n3];
+      }
+      o2 !== (l2 == null ? void 0 : l2.index) && (h2 = C.nextNode(), o2++);
+    }
+    return C.currentNode = r, e2;
+  }
+  p(t2) {
+    let i2 = 0;
+    for (const s2 of this._$AV)
+      void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
+  }
+}
+class R {
+  get _$AU() {
+    var _a;
+    return ((_a = this._$AM) == null ? void 0 : _a._$AU) ?? this._$Cv;
+  }
+  constructor(t2, i2, s2, e2) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cv = (e2 == null ? void 0 : e2.isConnected) ?? true;
+  }
+  get parentNode() {
+    let t2 = this._$AA.parentNode;
+    const i2 = this._$AM;
+    return void 0 !== i2 && 11 === (t2 == null ? void 0 : t2.nodeType) && (t2 = i2.parentNode), t2;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t2, i2 = this) {
+    t2 = S(this, t2, i2), c(t2) ? t2 === E || null == t2 || "" === t2 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t2 !== this._$AH && t2 !== T && this._(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : u(t2) ? this.k(t2) : this._(t2);
+  }
+  O(t2) {
+    return this._$AA.parentNode.insertBefore(t2, this._$AB);
+  }
+  T(t2) {
+    this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
+  }
+  _(t2) {
+    this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(r.createTextNode(t2)), this._$AH = t2;
+  }
+  $(t2) {
+    var _a;
+    const { values: i2, _$litType$: s2 } = t2, e2 = "number" == typeof s2 ? this._$AC(t2) : (void 0 === s2.el && (s2.el = N.createElement(P(s2.h, s2.h[0]), this.options)), s2);
+    if (((_a = this._$AH) == null ? void 0 : _a._$AD) === e2)
+      this._$AH.p(i2);
+    else {
+      const t3 = new M(e2, this), s3 = t3.u(this.options);
+      t3.p(i2), this.T(s3), this._$AH = t3;
+    }
+  }
+  _$AC(t2) {
+    let i2 = A.get(t2.strings);
+    return void 0 === i2 && A.set(t2.strings, i2 = new N(t2)), i2;
+  }
+  k(t2) {
+    a(this._$AH) || (this._$AH = [], this._$AR());
+    const i2 = this._$AH;
+    let s2, e2 = 0;
+    for (const h2 of t2)
+      e2 === i2.length ? i2.push(s2 = new R(this.O(l()), this.O(l()), this, this.options)) : s2 = i2[e2], s2._$AI(h2), e2++;
+    e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
+  }
+  _$AR(t2 = this._$AA.nextSibling, i2) {
+    var _a;
+    for ((_a = this._$AP) == null ? void 0 : _a.call(this, false, true, i2); t2 !== this._$AB; ) {
+      const i3 = t2.nextSibling;
+      t2.remove(), t2 = i3;
+    }
+  }
+  setConnected(t2) {
+    var _a;
+    void 0 === this._$AM && (this._$Cv = t2, (_a = this._$AP) == null ? void 0 : _a.call(this, t2));
+  }
+}
+class k {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t2, i2, s2, e2, h2) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = h2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = E;
+  }
+  _$AI(t2, i2 = this, s2, e2) {
+    const h2 = this.strings;
+    let o2 = false;
+    if (void 0 === h2)
+      t2 = S(this, t2, i2, 0), o2 = !c(t2) || t2 !== this._$AH && t2 !== T, o2 && (this._$AH = t2);
+    else {
+      const e3 = t2;
+      let n3, r2;
+      for (t2 = h2[0], n3 = 0; n3 < h2.length - 1; n3++)
+        r2 = S(this, e3[s2 + n3], i2, n3), r2 === T && (r2 = this._$AH[n3]), o2 || (o2 = !c(r2) || r2 !== this._$AH[n3]), r2 === E ? t2 = E : t2 !== E && (t2 += (r2 ?? "") + h2[n3 + 1]), this._$AH[n3] = r2;
+    }
+    o2 && !e2 && this.j(t2);
+  }
+  j(t2) {
+    t2 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t2 ?? "");
+  }
+}
+class H extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t2) {
+    this.element[this.name] = t2 === E ? void 0 : t2;
+  }
+}
+class I extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t2) {
+    this.element.toggleAttribute(this.name, !!t2 && t2 !== E);
+  }
+}
+class L extends k {
+  constructor(t2, i2, s2, e2, h2) {
+    super(t2, i2, s2, e2, h2), this.type = 5;
+  }
+  _$AI(t2, i2 = this) {
+    if ((t2 = S(this, t2, i2, 0) ?? E) === T)
+      return;
+    const s2 = this._$AH, e2 = t2 === E && s2 !== E || t2.capture !== s2.capture || t2.once !== s2.once || t2.passive !== s2.passive, h2 = t2 !== E && (s2 === E || e2);
+    e2 && this.element.removeEventListener(this.name, this, s2), h2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
+  }
+  handleEvent(t2) {
+    var _a;
+    "function" == typeof this._$AH ? this._$AH.call(((_a = this.options) == null ? void 0 : _a.host) ?? this.element, t2) : this._$AH.handleEvent(t2);
+  }
+}
+class z {
+  constructor(t2, i2, s2) {
+    this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(t2) {
+    S(this, t2);
+  }
+}
+const j = t$1.litHtmlPolyfillSupport;
+j == null ? void 0 : j(N, R), (t$1.litHtmlVersions ?? (t$1.litHtmlVersions = [])).push("3.3.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$1 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
+class i {
+  constructor(t2) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t2, e2, i2) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  }
+  _$AS(t2, e2) {
+    return this.update(t2, e2);
+  }
+  update(t2, e2) {
+    return this.render(...e2);
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class e extends i {
+  constructor(i2) {
+    if (super(i2), this.it = E, i2.type !== t.CHILD)
+      throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r2) {
+    if (r2 === E || null == r2)
+      return this._t = void 0, this.it = r2;
+    if (r2 === T)
+      return r2;
+    if ("string" != typeof r2)
+      throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r2 === this.it)
+      return this._t;
+    this.it = r2;
+    const s2 = [r2];
+    return s2.raw = s2, this._t = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
+  }
+}
+e.directiveName = "unsafeHTML", e.resultType = 1;
+const o = e$1(e);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+let JupiterFilterRolesDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.availableRoles = [];
+    this.selectedRoleIds = [];
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this._searchQuery = "";
+    this._filteredRoles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initializeTempSelection();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectedRoleIds") || changedProperties.has("open")) {
+      this._initializeTempSelection();
+    }
+    if (changedProperties.has("availableRoles") || changedProperties.has("_searchQuery")) {
+      this._updateFilteredRoles();
+    }
+  }
+  _updateFilteredRoles() {
+    if (!this._searchQuery.trim()) {
+      this._filteredRoles = [...this.availableRoles];
+      return;
+    }
+    const query = this._searchQuery.toLowerCase().trim();
+    this._filteredRoles = this.availableRoles.filter((role) => {
+      var _a;
+      const titleMatch = role.title.toLowerCase().includes(query);
+      const idMatch = role.id.toLowerCase().includes(query);
+      const descriptionMatch = ((_a = role.description) == null ? void 0 : _a.toLowerCase().includes(query)) || false;
+      const uriMatch = this._searchInRoleURI(role, query);
+      return titleMatch || idMatch || descriptionMatch || uriMatch;
+    });
+  }
+  _searchInRoleURI(role, query) {
+    var _a;
+    if ((_a = role.metadata) == null ? void 0 : _a.roleURI) {
+      return role.metadata.roleURI.toLowerCase().includes(query);
+    }
+    const uriPattern = /https?:\/\/[^\s]+/i;
+    const titleHasURI = uriPattern.test(role.title);
+    const idHasURI = uriPattern.test(role.id);
+    if (titleHasURI || idHasURI) {
+      return role.title.toLowerCase().includes(query) || role.id.toLowerCase().includes(query);
+    }
+    if (role.id.includes(".") || role.id.includes("/") || role.id.includes(":")) {
+      return role.id.toLowerCase().includes(query);
+    }
+    return false;
+  }
+  _handleSearchInput(event) {
+    const input = event.target;
+    this._searchQuery = input.value;
+  }
+  _clearSearch() {
+    var _a;
+    this._searchQuery = "";
+    const searchInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".search-input");
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+  }
+  _highlightSearchTerm(text) {
+    if (!this._searchQuery.trim()) {
+      return text;
+    }
+    const query = this._searchQuery.trim();
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    return text.replace(regex, "<mark>$1</mark>");
+  }
+  _getSelectedFilteredCount() {
+    return this._filteredRoles.filter((role) => this._tempSelectedRoles.has(role.id)).length;
+  }
+  _initializeTempSelection() {
+    this._tempSelectedRoles = new Set(this.selectedRoleIds);
+  }
+  _handleCheckboxChange(event, roleId) {
+    const checkbox = event.target;
+    const newSelection = new Set(this._tempSelectedRoles);
+    if (checkbox.checked) {
+      newSelection.add(roleId);
+    } else {
+      newSelection.delete(roleId);
+    }
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectAll() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => newSelection.add(role.id));
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectNone() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => newSelection.delete(role.id));
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectAllGlobal() {
+    this._tempSelectedRoles = new Set(this.availableRoles.map((role) => role.id));
+    this.requestUpdate();
+  }
+  _selectNoneGlobal() {
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this.requestUpdate();
+  }
+  _resetToOriginal() {
+    this._tempSelectedRoles = new Set(this.selectedRoleIds);
+    this.requestUpdate();
+  }
+  _handleCancel() {
+    this._initializeTempSelection();
+    this.dispatchEvent(new CustomEvent("dialog-cancel", {
+      bubbles: true
+    }));
+  }
+  _handleApply() {
+    const selectedRoles = Array.from(this._tempSelectedRoles);
+    this.dispatchEvent(new CustomEvent("roles-filter-apply", {
+      detail: { selectedRoleIds: selectedRoles },
+      bubbles: true
+    }));
+  }
+  _handleBackdropClick(event) {
+    if (event.target === this) {
+      this._handleCancel();
+    }
+  }
+  render() {
+    const selectedCount = this._tempSelectedRoles.size;
+    const totalCount = this.availableRoles.length;
+    const filteredCount = this._filteredRoles.length;
+    const hasSearchQuery = this._searchQuery.trim().length > 0;
+    return html`
+      <div class="dialog" @click="${(e2) => e2.stopPropagation()}">
+        <!-- Dialog Header -->
+        <div class="dialog-header">
+          <svg class="filter-icon" viewBox="0 0 24 24">
+            <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+          </svg>
+          <h2 class="dialog-title">Filter Roles</h2>
+          <button class="close-button" @click="${this._handleCancel}">×</button>
+        </div>
+
+        <!-- Dialog Content -->
+        <div class="dialog-content">
+          <p class="description">
+            Select the roles you want to display in the form. You can search and choose specific roles 
+            to focus on or manage all ${totalCount} available roles.
+          </p>
+
+          <!-- Search Input -->
+          <div class="search-container">
+            <input
+              type="text"
+              class="search-input"
+              placeholder="Search roles by name, ID, or URI..."
+              .value="${this._searchQuery}"
+              @input="${this._handleSearchInput}"
+            />
+            ${this._searchQuery ? html`
+              <button class="clear-search" @click="${this._clearSearch}" title="Clear search">
+                ×
+              </button>
+            ` : html`
+              <svg class="search-icon" viewBox="0 0 24 24">
+                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+              </svg>
+            `}
+          </div>
+
+          <!-- Search Results Info -->
+          ${hasSearchQuery ? html`
+            <div class="search-results-info">
+              Showing ${filteredCount} of ${totalCount} roles
+              ${filteredCount !== totalCount ? html`matching "${this._searchQuery}"` : ""}
+            </div>
+          ` : ""}
+
+          <!-- Selection Controls -->
+          <div class="selection-controls">
+            ${hasSearchQuery ? html`
+              <button class="selection-control" @click="${this._selectAll}">
+                Select Filtered (${filteredCount})
+              </button>
+              <button class="selection-control" @click="${this._selectNone}">
+                Deselect Filtered
+              </button>
+              <button class="selection-control" @click="${this._selectAllGlobal}">
+                Select All (${totalCount})
+              </button>
+              <button class="selection-control" @click="${this._selectNoneGlobal}">
+                Deselect All
+              </button>
+            ` : html`
+              <button class="selection-control" @click="${this._selectAll}">
+                Select All
+              </button>
+              <button class="selection-control" @click="${this._selectNone}">
+                Select None
+              </button>
+            `}
+            <button class="selection-control" @click="${this._resetToOriginal}">
+              Reset
+            </button>
+          </div>
+
+          <!-- Roles List -->
+          <div class="roles-list">
+            ${this._filteredRoles.length === 0 ? html`
+              <div class="no-results">
+                ${hasSearchQuery ? html`
+                  No roles found matching "${this._searchQuery}".<br>
+                  Try a different search term or clear the search.
+                ` : html`
+                  No roles available.
+                `}
+              </div>
+            ` : html`
+              ${this._filteredRoles.map((role) => {
+      var _a;
+      const isSelected = this._tempSelectedRoles.has(role.id);
+      return html`
+                  <div class="role-item">
+                    <input
+                      type="checkbox"
+                      class="role-checkbox"
+                      .checked="${isSelected}"
+                      @change="${(e2) => this._handleCheckboxChange(e2, role.id)}"
+                    />
+                    <div class="role-info">
+                      <h4 class="role-title">${o(this._highlightSearchTerm(role.title))}</h4>
+                      ${role.description ? html`
+                        <p class="role-description">${o(this._highlightSearchTerm(role.description))}</p>
+                      ` : ""}
+                      ${role.id !== role.title ? html`
+                        <p class="role-description">ID: ${o(this._highlightSearchTerm(role.id))}</p>
+                      ` : ""}
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <p class="role-description">URI: ${o(this._highlightSearchTerm(role.metadata.roleURI))}</p>
+                      ` : ""}
+                    </div>
+                  </div>
+                `;
+    })}
+            `}
+          </div>
+
+          <div class="selected-count">
+            ${selectedCount} of ${totalCount} roles selected
+            ${hasSearchQuery && filteredCount !== totalCount ? html`
+              <br><small>(${this._getSelectedFilteredCount()} of ${filteredCount} filtered roles selected)</small>
+            ` : ""}
+          </div>
+        </div>
+
+        <!-- Dialog Actions -->
+        <div class="dialog-actions">
+          <button class="btn-secondary" @click="${this._handleCancel}">
+            Cancel
+          </button>
+          <button 
+            class="btn-primary" 
+            @click="${this._handleApply}"
+            ?disabled="${selectedCount === 0}"
+          >
+            Apply Filter (${selectedCount})
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+JupiterFilterRolesDialog.styles = css`
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.5);
+      font-family: var(--jupiter-font-family, system-ui, -apple-system, sans-serif);
+    }
+
+    :host([open]) {
+      display: flex;
+    }
+
+    .dialog {
+      background: var(--jupiter-background, #fff);
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      
+      width: 90vw;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .dialog-header {
+      padding: 20px 24px 16px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .dialog-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+      color: var(--jupiter-text-primary, #333);
+      flex: 1;
+    }
+
+    .filter-icon {
+      width: 20px;
+      height: 20px;
+      fill: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .close-button {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 4px;
+      color: var(--jupiter-text-secondary, #666);
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+    }
+
+    .close-button:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    .dialog-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+    }
+
+    .description {
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 14px;
+      margin: 0 0 20px 0;
+      line-height: 1.5;
+    }
+
+    .selection-controls {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .search-container {
+      margin-bottom: 16px;
+      position: relative;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 10px 40px 10px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: inherit;
+      background: var(--jupiter-background, #fff);
+      color: var(--jupiter-text-primary, #333);
+      transition: border-color 0.2s ease;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+    }
+
+    .search-input::placeholder {
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .search-icon {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 16px;
+      height: 16px;
+      fill: var(--jupiter-text-secondary, #666);
+      pointer-events: none;
+    }
+
+    .clear-search {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 2px;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 16px;
+      line-height: 1;
+      transition: color 0.2s ease;
+    }
+
+    .clear-search:hover {
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .search-results-info {
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    .no-results {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+    }
+
+    mark {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      padding: 1px 2px;
+      border-radius: 2px;
+      font-weight: 500;
+    }
+
+    .selection-control {
+      background: none;
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .selection-control:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .roles-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 12px;
+    }
+
+    .role-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 8px;
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+    }
+
+    .role-item:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    .role-checkbox {
+      margin-top: 2px;
+      cursor: pointer;
+    }
+
+    .role-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .role-title {
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+      margin: 0 0 4px 0;
+      word-wrap: break-word;
+      line-height: 1.3;
+    }
+
+    .role-description {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0;
+      line-height: 1.4;
+      word-break: break-all; /* Allow URI breaking */
+    }
+
+    .role-description:last-child {
+      margin-bottom: 4px;
+    }
+
+    .selected-count {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin-top: 16px;
+      text-align: center;
+    }
+
+    .dialog-actions {
+      padding: 16px 24px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      background: var(--jupiter-form-actions-background, #f8f9fa);
+    }
+
+    .dialog-actions button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .btn-primary {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .btn-secondary {
+      background: transparent;
+      color: var(--jupiter-text-secondary, #666);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .btn-secondary:hover:not(:disabled) {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `;
+__decorateClass$1([
+  n$1({ type: Boolean, reflect: true })
+], JupiterFilterRolesDialog.prototype, "open", 2);
+__decorateClass$1([
+  n$1({ type: Array })
+], JupiterFilterRolesDialog.prototype, "availableRoles", 2);
+__decorateClass$1([
+  n$1({ type: Array })
+], JupiterFilterRolesDialog.prototype, "selectedRoleIds", 2);
+__decorateClass$1([
+  r$1()
+], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
+__decorateClass$1([
+  r$1()
+], JupiterFilterRolesDialog.prototype, "_searchQuery", 2);
+__decorateClass$1([
+  r$1()
+], JupiterFilterRolesDialog.prototype, "_filteredRoles", 2);
+JupiterFilterRolesDialog = __decorateClass$1([
+  t$3("jupiter-filter-roles-dialog")
+], JupiterFilterRolesDialog);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let JupiterDynamicForm = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.config = {};
+    this.initialData = {};
+    this.disabled = false;
+    this.readonly = false;
+    this.periodStartDate = "2025-01-01";
+    this.periodEndDate = "2025-12-31";
+    this._formData = {};
+    this._preservedFormData = {};
+    this._typedMemberData = {};
+    this._preservedTypedMemberData = {};
+    this._columns = [];
+    this._errors = [];
+    this._touched = /* @__PURE__ */ new Set();
+    this._dirty = false;
+    this._valid = true;
+    this._submitted = false;
+    this._allSections = [];
+    this._selectedRoleIds = [];
+    this._showFilterDialog = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     this._initializeForm();
@@ -2798,6 +3927,13 @@ let JupiterDynamicForm = class extends LitElement {
           this.periodEndDate
         );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
+        this._allSections = [...this._currentSchema.sections];
+        if (this._allSections.length > 10 && this._selectedRoleIds.length === 0) {
+          this._selectedRoleIds = this._allSections.slice(0, 10).map((section) => section.id);
+        } else if (this._selectedRoleIds.length === 0) {
+          this._selectedRoleIds = this._allSections.map((section) => section.id);
+        }
+        this._applyRoleFilter();
         this._columns = [
           {
             id: "base",
@@ -2811,13 +3947,19 @@ let JupiterDynamicForm = class extends LitElement {
       } catch (error) {
         console.error("❌ Error building form from XBRL input:", error);
         this._currentSchema = this._getDefaultSchema();
+        this._allSections = [];
+        this._selectedRoleIds = [];
         this._columns = this._getDefaultColumns();
       }
     } else if (this.schema) {
       this._currentSchema = this.schema;
+      this._allSections = [...this.schema.sections];
+      this._selectedRoleIds = this._allSections.map((section) => section.id);
       this._columns = this._getDefaultColumns();
     } else {
       this._currentSchema = this._getDefaultSchema();
+      this._allSections = [];
+      this._selectedRoleIds = [];
       this._columns = this._getDefaultColumns();
     }
     this._formData = { ...this.initialData };
@@ -2847,6 +3989,106 @@ let JupiterDynamicForm = class extends LitElement {
       }
     ];
   }
+  _applyRoleFilter() {
+    if (!this._currentSchema || !this._allSections.length)
+      return;
+    this._preserveDataForHiddenSections();
+    const filteredSections = this._allSections.filter(
+      (section) => this._selectedRoleIds.includes(section.id)
+    );
+    this._restoreDataForVisibleSections(filteredSections);
+    this._currentSchema = {
+      ...this._currentSchema,
+      sections: filteredSections
+    };
+  }
+  _preserveDataForHiddenSections() {
+    var _a;
+    const currentlyVisibleSectionIds = ((_a = this._currentSchema) == null ? void 0 : _a.sections.map((s2) => s2.id)) || [];
+    const sectionsThatWillBeHidden = currentlyVisibleSectionIds.filter(
+      (sectionId) => !this._selectedRoleIds.includes(sectionId)
+    );
+    sectionsThatWillBeHidden.forEach((sectionId) => {
+      const section = this._allSections.find((s2) => s2.id === sectionId);
+      if (section) {
+        this._preserveSectionData(section);
+      }
+    });
+    console.log(`📦 Preserved data for ${sectionsThatWillBeHidden.length} hidden sections:`, sectionsThatWillBeHidden);
+  }
+  _restoreDataForVisibleSections(visibleSections) {
+    visibleSections.forEach((section) => {
+      this._restoreSectionData(section);
+    });
+    console.log(`🔄 Restored data for ${visibleSections.length} visible sections`);
+  }
+  _preserveSectionData(section) {
+    section.concepts.forEach((concept) => {
+      this._preserveConceptData(concept);
+    });
+  }
+  _preserveConceptData(concept) {
+    if (this._formData[concept.id]) {
+      this._preservedFormData[concept.id] = { ...this._formData[concept.id] };
+      console.log(`💾 Preserved form data for concept: ${concept.id}`);
+    }
+    concept.fields.forEach((field) => {
+      if (this._typedMemberData[field.columnId]) {
+        this._preservedTypedMemberData[field.columnId] = { ...this._typedMemberData[field.columnId] };
+        console.log(`💾 Preserved typed data for column: ${field.columnId}`);
+      }
+    });
+    if (concept.children) {
+      concept.children.forEach((child) => {
+        this._preserveConceptData(child);
+      });
+    }
+  }
+  _restoreSectionData(section) {
+    section.concepts.forEach((concept) => {
+      this._restoreConceptData(concept);
+    });
+  }
+  _restoreConceptData(concept) {
+    if (this._preservedFormData[concept.id]) {
+      this._formData[concept.id] = { ...this._preservedFormData[concept.id] };
+      console.log(`🔄 Restored form data for concept: ${concept.id}`);
+    }
+    concept.fields.forEach((field) => {
+      if (this._preservedTypedMemberData[field.columnId]) {
+        this._typedMemberData[field.columnId] = { ...this._preservedTypedMemberData[field.columnId] };
+        console.log(`🔄 Restored typed data for column: ${field.columnId}`);
+      }
+    });
+    if (concept.children) {
+      concept.children.forEach((child) => {
+        this._restoreConceptData(child);
+      });
+    }
+  }
+  _shouldShowFilterButton() {
+    return this._allSections.length > 10;
+  }
+  _handleFilterRolesClick() {
+    this._showFilterDialog = true;
+  }
+  _handleFilterDialogCancel() {
+    this._showFilterDialog = false;
+  }
+  _handleRoleFilterApply(event) {
+    const { selectedRoleIds } = event.detail;
+    this._selectedRoleIds = selectedRoleIds;
+    this._applyRoleFilter();
+    this._showFilterDialog = false;
+    this.dispatchEvent(new CustomEvent("roles-filter-changed", {
+      detail: {
+        selectedRoleIds,
+        totalRoles: this._allSections.length,
+        visibleRoles: selectedRoleIds.length
+      },
+      bubbles: true
+    }));
+  }
   _validateForm() {
     var _a;
     const errors = [];
@@ -2874,11 +4116,13 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFieldChange(event) {
     const { fieldId, conceptId, columnId, value } = event.detail;
-    if (!this._formData[conceptId]) {
-      this._formData[conceptId] = {};
+    const updatedFormData = { ...this._formData };
+    if (!updatedFormData[conceptId]) {
+      updatedFormData[conceptId] = {};
     }
-    const oldValue = this._formData[conceptId][columnId];
-    this._formData[conceptId][columnId] = value;
+    const oldValue = updatedFormData[conceptId][columnId];
+    updatedFormData[conceptId] = { ...updatedFormData[conceptId], [columnId]: value };
+    this._formData = updatedFormData;
     this._touched.add(`${conceptId}-${columnId}`);
     this._dirty = true;
     this._validateForm();
@@ -2888,13 +4132,32 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  /**
+   * Generate a unique concept key that includes section context
+   */
+  _generateUniqueConceptKey(sectionId, conceptId) {
+    return `${sectionId}::${conceptId}`;
+  }
+  /**
+   * Extract the original concept ID from a unique concept key
+   */
+  _extractOriginalConceptId(uniqueConceptKey) {
+    const parts = uniqueConceptKey.split("::");
+    return parts.length > 1 ? parts[1] : uniqueConceptKey;
+  }
   _handleTypedMemberChange(event) {
-    const { columnId, value, sectionId } = event.detail;
-    this._typedMemberValues[columnId] = value;
+    const { columnId, axisId, value } = event.detail;
+    console.log(`🔍 [DynamicForm] Typed member change: columnId=${columnId}, axisId=${axisId}, value=${value}`);
+    const updatedTypedMemberData = { ...this._typedMemberData };
+    if (!updatedTypedMemberData[columnId]) {
+      updatedTypedMemberData[columnId] = {};
+    }
+    updatedTypedMemberData[columnId] = { ...updatedTypedMemberData[columnId], [axisId]: value };
+    this._typedMemberData = updatedTypedMemberData;
     this._dirty = true;
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("typed-member-change", {
-      detail: { columnId, value, sectionId },
+      detail: { columnId, axisId, value },
       bubbles: true
     }));
   }
@@ -2941,17 +4204,17 @@ let JupiterDynamicForm = class extends LitElement {
     this._addColumnFromRequest(columnRequest, sectionId);
   }
   _addColumnFromRequest(request, sectionId) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const timestamp = Date.now();
     const newColumnId = `col-${timestamp}`;
     let title = "";
     let description = "";
     if (request.periodType === "instant") {
-      title = request.instantDate || "Instant Date";
-      description = `Instant period: ${request.instantDate}`;
+      title = "Current";
+      description = `Values as of ${request.instantDate}`;
     } else if (request.periodType === "duration" || request.periodType === "mixed") {
-      title = `${request.startDate} / ${request.endDate}`;
-      description = `Duration period: ${request.startDate} to ${request.endDate}`;
+      title = "Current Period";
+      description = `Period: ${request.startDate} to ${request.endDate}`;
     }
     let dimensionData = {
       dimensionId: "period",
@@ -2964,28 +4227,10 @@ let JupiterDynamicForm = class extends LitElement {
         const item = hypercubeRole.items[0];
         if (item.dimensions.length === 1) {
           const dimension = item.dimensions[0];
-          if (dimension.typedMember) {
+          if (dimension.members && dimension.members.length > 0) {
             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 = ((_f = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _f.label) || firstMember.conceptName;
+            const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
             const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
             title = `${memberLabel} ${periodPart}`;
             dimensionData = {
@@ -3187,7 +4432,103 @@ let JupiterDynamicForm = class extends LitElement {
     this._currentSchema.sections.forEach((section) => {
       this._processConceptsForSubmission(section.concepts, submissionData, section);
     });
-    return submissionData;
+    this._includePreservedDataInSubmission(submissionData);
+    const uniqueSubmissionData = this._removeDuplicateSubmissions(submissionData);
+    return uniqueSubmissionData;
+  }
+  _includePreservedDataInSubmission(submissionData) {
+    Object.keys(this._preservedFormData).forEach((conceptId) => {
+      const conceptData = this._preservedFormData[conceptId];
+      if (conceptData) {
+        Object.keys(conceptData).forEach((columnId) => {
+          const value = conceptData[columnId];
+          if (value !== void 0 && value !== null && value !== "") {
+            const originalConcept = this._findConceptInAllSections(conceptId);
+            if (originalConcept) {
+              const originalSection = this._findSectionForConcept(conceptId);
+              this._addConceptDataToSubmission(originalConcept, columnId, value, submissionData, originalSection || void 0);
+            }
+          }
+        });
+      }
+    });
+    console.log(`📤 Included preserved data in submission. Total entries: ${submissionData.length}`);
+  }
+  _findConceptInAllSections(conceptId) {
+    for (const section of this._allSections) {
+      const concept = this._findConceptInSection(section.concepts, conceptId);
+      if (concept) {
+        return concept;
+      }
+    }
+    return null;
+  }
+  _findConceptInSection(concepts, conceptId) {
+    for (const concept of concepts) {
+      if (concept.id === conceptId) {
+        return concept;
+      }
+      if (concept.children) {
+        const found = this._findConceptInSection(concept.children, conceptId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  }
+  _findSectionForConcept(conceptId) {
+    for (const section of this._allSections) {
+      const concept = this._findConceptInSection(section.concepts, conceptId);
+      if (concept) {
+        return section;
+      }
+    }
+    return null;
+  }
+  _addConceptDataToSubmission(concept, columnId, value, submissionData, section) {
+    var _a;
+    const field = concept.fields.find((f2) => f2.columnId === columnId);
+    if (!field)
+      return;
+    const isInstant = concept.periodType === "instant";
+    const entry = {
+      conceptId: concept.originalConceptId || concept.id,
+      value,
+      period: {
+        type: concept.periodType || "duration",
+        ...isInstant ? { date: field.periodStartDate || this.periodStartDate } : {
+          startDate: field.periodStartDate || this.periodStartDate,
+          endDate: field.periodEndDate || this.periodEndDate
+        }
+      }
+    };
+    const column = this._findColumnByIdInAllSections(columnId);
+    if ((_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.memberLabel) {
+      entry.dimension = column.dimensionData.memberLabel;
+    }
+    submissionData.push(entry);
+  }
+  _findColumnByIdInAllSections(columnId) {
+    for (const section of this._allSections) {
+      if (section.columns) {
+        const column = section.columns.find((col) => col.id === columnId);
+        if (column) {
+          return column;
+        }
+      }
+    }
+    return void 0;
+  }
+  _removeDuplicateSubmissions(submissionData) {
+    const uniqueEntries = /* @__PURE__ */ new Map();
+    submissionData.forEach((entry) => {
+      const key = `${entry.conceptId}_${entry.value}_${entry.dimension || "no-dimension"}`;
+      if (!uniqueEntries.has(key)) {
+        uniqueEntries.set(key, entry);
+      }
+    });
+    return Array.from(uniqueEntries.values());
   }
   _findColumnById(columnId) {
     if (!this._currentSchema) {
@@ -3203,22 +4544,114 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return void 0;
   }
+  _findColumnByIdInSection(columnId, section) {
+    if (!(section == null ? void 0 : section.columns)) {
+      return void 0;
+    }
+    return section.columns.find((col) => col.id === columnId);
+  }
+  _getTypedMemberNameForAxis(axisId, section) {
+    var _a, _b, _c, _d;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      return null;
+    }
+    const sectionRoleId = section == null ? void 0 : section.id;
+    if (!sectionRoleId) {
+      return null;
+    }
+    const hypercube = this.xbrlInput.hypercubes[0];
+    const role = (_c = hypercube.roles) == null ? void 0 : _c.find((r2) => r2.roleId === sectionRoleId);
+    if (!(role == null ? void 0 : role.items)) {
+      return null;
+    }
+    for (const item of role.items) {
+      if (item.dimensions) {
+        const dimension = item.dimensions.find((d2) => d2.id === axisId);
+        if ((_d = dimension == null ? void 0 : dimension.typedMember) == null ? void 0 : _d.id) {
+          return dimension.typedMember.id;
+        }
+      }
+    }
+    return null;
+  }
+  _doesConceptApplyToTypedDimension(concept, section, columnId) {
+    var _a, _b, _c;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      return false;
+    }
+    const sectionRoleId = section == null ? void 0 : section.id;
+    if (!sectionRoleId) {
+      return false;
+    }
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionRoleId);
+    if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
+      return false;
+    }
+    for (const item of hypercubeRole.items) {
+      const conceptIdToCheck = concept.originalConceptId || concept.id;
+      if (item.conceptIds && item.conceptIds.includes(conceptIdToCheck)) {
+        const hasTypedDimensions = item.dimensions.some((dim) => dim.typedMember);
+        console.log(`🔍 [DynamicForm] Concept ${conceptIdToCheck} found in hypercube item. Has typed dimensions:`, hasTypedDimensions);
+        return hasTypedDimensions;
+      }
+    }
+    console.log(`🔍 [DynamicForm] Concept ${concept.originalConceptId || concept.id} not found in any hypercube items for role ${sectionRoleId}`);
+    return false;
+  }
+  /**
+   * Get the specific typed dimensions that apply to a concept in its role
+   */
+  _getApplicableTypedDimensions(concept, section) {
+    var _a, _b, _c;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) || !(section == null ? void 0 : section.id)) {
+      return [];
+    }
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === section.id);
+    if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
+      return [];
+    }
+    const conceptIdToCheck = concept.originalConceptId || concept.id;
+    for (const item of hypercubeRole.items) {
+      if (item.conceptIds && item.conceptIds.includes(conceptIdToCheck)) {
+        const typedDimensions = item.dimensions.filter((dim) => dim.typedMember).map((dim) => dim.id);
+        console.log(`🔍 [DynamicForm] Found applicable typed dimensions for concept ${conceptIdToCheck}:`, typedDimensions);
+        return typedDimensions;
+      }
+    }
+    return [];
+  }
   _processConceptsForSubmission(concepts, submissionData, section) {
+    const targetRole = "Toelichting op de geconsolideerde jaarrekening - Financiële vaste activa: Deelnemingen: Volledig geconsolideerd: Specificatie";
+    const sectionTitle = (section == null ? void 0 : section.title) || "Unknown";
     concepts.forEach((concept) => {
+      if (sectionTitle === targetRole) {
+        console.warn(`[DUPLICATE DEBUG] Processing concept ${concept.originalConceptId || concept.id} in target role`);
+        if (concept.fields) {
+          console.warn(`[DUPLICATE DEBUG] Concept has ${concept.fields.length} fields`);
+          concept.fields.forEach((field, index) => {
+            var _a;
+            console.warn(`[DUPLICATE DEBUG] Field ${index}: columnId=${field.columnId}, current value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
+          });
+        }
+      }
+      if (concept.fields && concept.fields.length > 1) {
+        console.log(`🔍 [DEBUG] Processing concept ${concept.originalConceptId}, fields count: ${concept.fields.length}`);
+        concept.fields.forEach((field, index) => {
+          var _a;
+          console.log(`  Field ${index}: columnId=${field.columnId}, value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
+        });
+      }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field) => {
-          var _a, _b, _c, _d;
+          var _a, _b;
           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
-            });
+            if (sectionTitle === targetRole) {
+              console.warn(`[DUPLICATE DEBUG] Creating submission entry for concept ${concept.originalConceptId || concept.id}, field columnId=${field.columnId}, value=${fieldValue}`);
+            }
+            const column = this._findColumnByIdInSection(field.columnId, section);
+            console.log(`🔍 [DynamicForm] Processing field for concept ${concept.originalConceptId || concept.id}, field columnId: ${field.columnId}, found column in section ${section == null ? void 0 : section.id}: ${!!column}, column title: ${column == null ? void 0 : column.title}`);
             const submissionEntry = {
               conceptId: concept.id,
               value: fieldValue,
@@ -3232,45 +4665,50 @@ 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" && ((_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 ((_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] || "";
+            if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
+              submissionEntry.dimension = column.dimensionData.dimensionIdKey;
+              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column.dimensionData.dimensionIdKey);
+            } else {
+              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field.columnId}. Column type: ${column == null ? void 0 : column.type}, has dimensionData: ${!!(column == null ? void 0 : column.dimensionData)}`);
+            }
+            if (this._typedMemberData[field.columnId]) {
+              const applicableTypedDimensions = this._getApplicableTypedDimensions(concept, section);
+              console.log(`🔍 [DynamicForm] Concept ${concept.id} applicable typed dimensions:`, applicableTypedDimensions);
+              if (applicableTypedDimensions.length > 0) {
+                const filteredTypedMembers = {};
+                const allTypedMemberData = this._typedMemberData[field.columnId];
+                applicableTypedDimensions.forEach((dimensionId) => {
+                  if (allTypedMemberData[dimensionId]) {
+                    const memberName = this._getTypedMemberNameForAxis(dimensionId, section);
+                    filteredTypedMembers[dimensionId] = {
+                      value: allTypedMemberData[dimensionId],
+                      memberName: memberName || "Unknown"
+                    };
+                  }
+                });
+                if (Object.keys(filteredTypedMembers).length > 0) {
+                  submissionEntry.typedMembers = filteredTypedMembers;
+                  console.log(`🔍 [DynamicForm] Adding filtered typed members to submission:`, filteredTypedMembers);
                 } else {
-                  submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+                  console.log(`🔍 [DynamicForm] No typed member values found for applicable dimensions:`, applicableTypedDimensions);
                 }
+              } else {
+                console.log(`🔍 [DynamicForm] Skipping typed members for concept ${concept.id} - not applicable to this hypercube`);
+              }
+            } else {
+              console.log(`🔍 [DynamicForm] No typed member data found for column ${field.columnId}. Available columns:`, Object.keys(this._typedMemberData));
+              if (column) {
+                console.log(`🔍 [DynamicForm] Column details:`, {
+                  id: column.id,
+                  type: column.type,
+                  hasTypedMembers: (_b = column.dimensionData) == null ? void 0 : _b.hasTypedMembers,
+                  dimensionData: column.dimensionData
+                });
               }
             }
+            if (sectionTitle === targetRole) {
+              console.warn(`[DUPLICATE DEBUG] Final submission entry:`, submissionEntry);
+            }
             submissionData.push(submissionEntry);
           }
         });
@@ -3285,6 +4723,9 @@ let JupiterDynamicForm = class extends LitElement {
     this._touched.clear();
     this._dirty = false;
     this._submitted = false;
+    this._preservedFormData = {};
+    this._preservedTypedMemberData = {};
+    console.log("🔄 Form reset - all data and preserved data cleared");
     this._validateForm();
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("form-reset", {
@@ -3360,6 +4801,7 @@ let JupiterDynamicForm = class extends LitElement {
               .section="${section}"
               .columns="${section.columns || this._columns}"
               .formData="${this._formData}"
+              .typedMemberData="${this._typedMemberData}"
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
@@ -3375,6 +4817,21 @@ let JupiterDynamicForm = class extends LitElement {
 
         <!-- Form Actions - Fixed Footer -->
         <div class="form-actions">
+          <!-- Filter Roles Button (shown when more than 10 roles) -->
+          ${this._shouldShowFilterButton() ? html`
+            <button 
+              class="filter-roles-button"
+              @click="${this._handleFilterRolesClick}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              <svg class="filter-icon" viewBox="0 0 24 24">
+                <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+              </svg>
+              Filter Roles
+              <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
+            </button>
+          ` : ""}
+          
           <button 
             class="btn-secondary"
             @click="${this._handleSaveDraft}"
@@ -3397,6 +4854,18 @@ let JupiterDynamicForm = class extends LitElement {
             <span>Valid: ${this._valid ? "Yes" : "No"}</span>
           </div>
         </div>
+
+        <!-- Filter Roles Dialog -->
+        ${this._showFilterDialog ? html`
+          <jupiter-filter-roles-dialog
+            ?open="${this._showFilterDialog}"
+            .availableRoles="${this._allSections}"
+            .selectedRoleIds="${this._selectedRoleIds}"
+            @dialog-cancel="${this._handleFilterDialogCancel}"
+            @roles-filter-apply="${this._handleRoleFilterApply}"
+            @click="${this._handleFilterDialogCancel}"
+          ></jupiter-filter-roles-dialog>
+        ` : ""}
       </div>
     `;
   }
@@ -3531,67 +5000,124 @@ JupiterDynamicForm.styles = css`
       color: var(--jupiter-text-secondary, #666);
       margin-left: auto;
     }
+
+    .filter-roles-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-right: auto;
+    }
+
+    .filter-roles-button:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .filter-roles-button .filter-icon {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .roles-count {
+      display: inline-flex;
+      align-items: center;
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 6px;
+      margin-left: 4px;
+      min-width: 18px;
+      justify-content: center;
+    }
   `;
 __decorateClass([
-  n2({ type: Object })
+  n$1({ type: Object })
 ], JupiterDynamicForm.prototype, "schema", 2);
 __decorateClass([
-  n2({ type: Object })
+  n$1({ type: Object })
 ], JupiterDynamicForm.prototype, "xbrlInput", 2);
 __decorateClass([
-  n2({ type: Object })
+  n$1({ type: Object })
 ], JupiterDynamicForm.prototype, "config", 2);
 __decorateClass([
-  n2({ type: Object })
+  n$1({ type: Object })
 ], JupiterDynamicForm.prototype, "initialData", 2);
 __decorateClass([
-  n2({ type: Boolean })
+  n$1({ type: Boolean })
 ], JupiterDynamicForm.prototype, "disabled", 2);
 __decorateClass([
-  n2({ type: Boolean })
+  n$1({ type: Boolean })
 ], JupiterDynamicForm.prototype, "readonly", 2);
 __decorateClass([
-  n2({ type: String })
+  n$1({ type: String })
 ], JupiterDynamicForm.prototype, "periodStartDate", 2);
 __decorateClass([
-  n2({ type: String })
+  n$1({ type: String })
 ], JupiterDynamicForm.prototype, "periodEndDate", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_formData", 2);
 __decorateClass([
-  r()
+  r$1()
+], JupiterDynamicForm.prototype, "_preservedFormData", 2);
+__decorateClass([
+  r$1()
+], JupiterDynamicForm.prototype, "_typedMemberData", 2);
+__decorateClass([
+  r$1()
+], JupiterDynamicForm.prototype, "_preservedTypedMemberData", 2);
+__decorateClass([
+  r$1()
 ], JupiterDynamicForm.prototype, "_columns", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_errors", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_touched", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_dirty", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_valid", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_submitted", 2);
 __decorateClass([
-  r()
+  r$1()
 ], JupiterDynamicForm.prototype, "_currentSchema", 2);
 __decorateClass([
-  r()
-], JupiterDynamicForm.prototype, "_typedMemberValues", 2);
+  r$1()
+], JupiterDynamicForm.prototype, "_allSections", 2);
+__decorateClass([
+  r$1()
+], JupiterDynamicForm.prototype, "_selectedRoleIds", 2);
+__decorateClass([
+  r$1()
+], JupiterDynamicForm.prototype, "_showFilterDialog", 2);
 JupiterDynamicForm = __decorateClass([
-  t$1("jupiter-dynamic-form")
+  t$3("jupiter-dynamic-form")
 ], JupiterDynamicForm);
-const version = "1.0.0";
+const version = "1.5.0";
 export {
   FormValidator,
   JupiterAddColumnDialog,
   JupiterConceptTree,
   JupiterDynamicForm,
+  JupiterFilterRolesDialog,
   JupiterFormField,
   JupiterFormSection,
   version