jupiter-dynamic-forms 1.6.1 → 1.7.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$3 = (t2) => (e2, o2) => {
+const t$1 = (t2) => (e2, o2) => {
   void 0 !== o2 ? o2.addInitializer(() => {
     customElements.define(t2, e2);
   }) : customElements.define(t2, e2);
@@ -14,19 +14,19 @@ const t$3 = (t2) => (e2, o2) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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 {
+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 {
   constructor(t2, e2, o2) {
-    if (this._$cssResult$ = true, o2 !== s$1)
+    if (this._$cssResult$ = true, o2 !== s)
       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$4 && void 0 === t2) {
+    if (e$1 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = o$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$4.set(s2, t2));
+      e2 && (t2 = o$2.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && o$2.set(s2, t2));
     }
     return t2;
   }
@@ -34,29 +34,29 @@ let n$3 = class n {
     return this.cssText;
   }
 };
-const r$4 = (t2) => new n$3("string" == typeof t2 ? t2 : t2 + "", void 0, s$1), S$1 = (s2, o2) => {
-  if (e$4)
+const r$3 = (t2) => new n$2("string" == typeof t2 ? t2 : t2 + "", void 0, s), S = (s2, o2) => {
+  if (e$1)
     s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else
     for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t$2.litNonce;
+      const o3 = document.createElement("style"), n3 = t.litNonce;
       void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
     }
-}, c$2 = e$4 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+}, c$1 = e$1 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
   let e2 = "";
   for (const s2 of t3.cssRules)
     e2 += s2.cssText;
-  return r$4(e2);
+  return r$3(e2);
 })(t2) : t2;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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) {
+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) {
   switch (s2) {
     case Boolean:
-      t2 = t2 ? l$1 : null;
+      t2 = t2 ? l : null;
       break;
     case Object:
     case Array:
@@ -81,8 +81,8 @@ const { is: i$2, defineProperty: e$3, getOwnPropertyDescriptor: h$1, getOwnPrope
       }
   }
   return i2;
-} }, 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());
+} }, 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());
 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$3(this.prototype, t2, h2);
+      void 0 !== h2 && e(this.prototype, t2, h2);
     }
   }
   static getPropertyDescriptor(t2, s2, i2) {
-    const { get: e2, set: r2 } = h$1(this.prototype, t2) ?? { get() {
+    const { get: e2, set: r2 } = h(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$1("elementProperties")))
+    if (this.hasOwnProperty(d("elementProperties")))
       return;
-    const t2 = n$2(this);
+    const t2 = n$1(this);
     t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(d$1("finalized")))
+    if (this.hasOwnProperty(d("finalized")))
       return;
-    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
-      const t3 = this.properties, s2 = [...r$3(t3), ...o$3(t3)];
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
+      const t3 = this.properties, s2 = [...r$2(t3), ...o$1(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$2(s3));
+        i2.unshift(c$1(s3));
     } else
-      void 0 !== s2 && i2.push(c$2(s2));
+      void 0 !== s2 && i2.push(c$1(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$1(t2, this.constructor.elementStyles), t2;
+    return S(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$1).toAttribute(s2, i2.type);
+      const h2 = (void 0 !== ((_a = i2.converter) == null ? void 0 : _a.toAttribute) ? i2.converter : u).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$1;
+      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;
       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$1)(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)(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$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");
+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");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$2 = { attribute: true, type: String, converter: u$1, reflect: false, hasChanged: f$1 }, r$2 = (t2 = o$2, e2, r2) => {
+const o = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f }, r$1 = (t2 = o, 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$2 = { attribute: true, type: String, converter: u$1, reflect: false, has
   }
   throw Error("Unsupported decorator location: " + n3);
 };
-function n$1(t2) {
-  return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => {
+function n2(t2) {
+  return (e2, o2) => "object" == typeof o2 ? r$1(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 n$1(t2) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function r$1(r2) {
-  return n$1({ ...r2, state: true, attribute: false });
+function r(r2) {
+  return n2({ ...r2, state: true, attribute: false });
 }
 class FormValidator {
   /**
@@ -1826,34 +1826,34 @@ JupiterFormField.styles = css`
     }
   `;
 __decorateClass$5([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterFormField.prototype, "field", 2);
 __decorateClass$5([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterFormField.prototype, "conceptId", 2);
 __decorateClass$5([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
 __decorateClass$5([
-  n$1()
+  n2()
 ], JupiterFormField.prototype, "value", 2);
 __decorateClass$5([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterFormField.prototype, "disabled", 2);
 __decorateClass$5([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterFormField.prototype, "locale", 2);
 __decorateClass$5([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterFormField.prototype, "hideLabel", 2);
 __decorateClass$5([
-  r$1()
+  r()
 ], JupiterFormField.prototype, "_errors", 2);
 __decorateClass$5([
-  r$1()
+  r()
 ], JupiterFormField.prototype, "_touched", 2);
 JupiterFormField = __decorateClass$5([
-  t$3("jupiter-form-field")
+  t$1("jupiter-form-field")
 ], JupiterFormField);
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
@@ -2060,28 +2060,28 @@ JupiterConceptTree.styles = css`
 
   `;
 __decorateClass$4([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterConceptTree.prototype, "concept", 2);
 __decorateClass$4([
-  n$1({ type: Array })
+  n2({ type: Array })
 ], JupiterConceptTree.prototype, "columns", 2);
 __decorateClass$4([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterConceptTree.prototype, "formData", 2);
 __decorateClass$4([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterConceptTree.prototype, "disabled", 2);
 __decorateClass$4([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterConceptTree.prototype, "locale", 2);
 __decorateClass$4([
-  n$1({ type: Set })
+  n2({ type: Set })
 ], JupiterConceptTree.prototype, "expandedConcepts", 2);
 __decorateClass$4([
-  r$1()
+  r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
 JupiterConceptTree = __decorateClass$4([
-  t$3("jupiter-concept-tree")
+  t$1("jupiter-concept-tree")
 ], JupiterConceptTree);
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -2099,15 +2099,20 @@ let JupiterAddColumnDialog = class extends LitElement {
     super(...arguments);
     this.periodType = "duration";
     this.open = false;
+    this.availableDimensions = [];
     this._startDate = "";
     this._endDate = "";
     this._instantDate = "";
     this._selectedType = "duration";
+    this._selectedDimensions = /* @__PURE__ */ new Map();
   }
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
       this._resetForm();
     }
+    if (changedProperties.has("availableDimensions")) {
+      console.log(`🎯 Add Column Dialog received ${this.availableDimensions.length} dimensions:`, this.availableDimensions.map((d2) => d2.axisLabel));
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2119,13 +2124,6 @@ let JupiterAddColumnDialog = class extends LitElement {
       this._resetForm();
     }
   }
-  _resetForm() {
-    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-    this._startDate = today;
-    this._endDate = today;
-    this._instantDate = today;
-    this._selectedType = "duration";
-  }
   _handleCancel() {
     this.open = false;
     this.dispatchEvent(new CustomEvent("dialog-cancel", { bubbles: true }));
@@ -2142,6 +2140,9 @@ let JupiterAddColumnDialog = class extends LitElement {
       request.startDate = this._startDate;
       request.endDate = this._endDate;
     }
+    if (this._selectedDimensions.size > 0) {
+      request.selectedDimensions = Array.from(this._selectedDimensions.values());
+    }
     this.dispatchEvent(new CustomEvent("column-add", {
       detail: request,
       bubbles: true
@@ -2173,6 +2174,66 @@ let JupiterAddColumnDialog = class extends LitElement {
   _handleInstantDateChange(e2) {
     this._instantDate = e2.target.value;
   }
+  _handleDimensionToggle(dimensionId, event) {
+    const checkbox = event.target;
+    if (checkbox.checked) {
+      const dimension = this.availableDimensions.find((d2) => d2.id === dimensionId);
+      if (dimension) {
+        const selection = {
+          axisId: dimension.id,
+          axisLabel: dimension.axisLabel,
+          isTyped: !!(dimension.typedMember && (!dimension.members || dimension.members.length === 0))
+        };
+        this._selectedDimensions.set(dimensionId, selection);
+      }
+    } else {
+      this._selectedDimensions.delete(dimensionId);
+    }
+    this.requestUpdate();
+  }
+  _handleMemberSelection(dimensionId, memberId, memberLabel) {
+    const existing = this._selectedDimensions.get(dimensionId);
+    if (existing) {
+      existing.memberId = memberId;
+      existing.memberLabel = memberLabel;
+      this._selectedDimensions.set(dimensionId, existing);
+      this.requestUpdate();
+    }
+  }
+  _handleTypedValueChange(dimensionId, event) {
+    const input = event.target;
+    const existing = this._selectedDimensions.get(dimensionId);
+    if (existing) {
+      existing.typedValue = input.value;
+      this._selectedDimensions.set(dimensionId, existing);
+    }
+  }
+  _resetForm() {
+    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    this._startDate = today;
+    this._endDate = today;
+    this._instantDate = today;
+    this._selectedType = this.periodType === "instant" ? "instant" : "duration";
+    this._selectedDimensions.clear();
+    this._autoSelectSingleMemberDimensions();
+    this.requestUpdate();
+  }
+  _autoSelectSingleMemberDimensions() {
+    this.availableDimensions.forEach((dimension) => {
+      if (dimension.members && dimension.members.length === 1) {
+        const member = dimension.members[0];
+        const selection = {
+          axisId: dimension.id,
+          axisLabel: dimension.axisLabel,
+          memberId: member.id,
+          memberLabel: member.label,
+          isTyped: false
+        };
+        this._selectedDimensions.set(dimension.id, selection);
+        console.log(`🎯 Auto-selected single member: ${dimension.axisLabel} -> ${member.label}`);
+      }
+    });
+  }
   render() {
     if (!this.open)
       return html``;
@@ -2181,9 +2242,7 @@ let JupiterAddColumnDialog = class extends LitElement {
       <div class="dialog" @click="${(e2) => e2.stopPropagation()}">
         <div class="dialog-header">
           <h2 class="dialog-title">Add Column</h2>
-          <p class="dialog-description">
-            ${this.periodType === "instant" ? "Add a new instant period column by specifying the date." : this.periodType === "duration" ? "Add a new duration period column by specifying the start and end dates." : "This section contains both instant and duration concepts. Choose the type of column to add."}
-          </p>
+
         </div>
 
         <div class="dialog-content">
@@ -2214,27 +2273,102 @@ let JupiterAddColumnDialog = class extends LitElement {
               />
             </div>
           ` : html`
-            <div class="form-group">
-              <label class="form-label required">Start Period Date</label>
-              <input 
-                type="date" 
-                class="form-input"
-                .value="${this._startDate}"
-                @change="${this._handleStartDateChange}"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <label class="form-label required">End Period Date</label>
-              <input 
-                type="date" 
-                class="form-input"
-                .value="${this._endDate}"
-                @change="${this._handleEndDateChange}"
-                required
-              />
+            <div class="form-group date-row">
+              <div class="date-field">
+                <label class="form-label required">Start Period Date</label>
+                <input 
+                  type="date" 
+                  class="form-input"
+                  .value="${this._startDate}"
+                  @change="${this._handleStartDateChange}"
+                  required
+                />
+              </div>
+              <div class="date-field">
+                <label class="form-label required">End Period Date</label>
+                <input 
+                  type="date" 
+                  class="form-input"
+                  .value="${this._endDate}"
+                  @change="${this._handleEndDateChange}"
+                  required
+                />
+              </div>
             </div>
           `}
+
+          <!-- Dimensions Section -->
+          ${this.availableDimensions.length > 0 ? html`
+            <div class="dimensions-section">
+              <h3>Available Dimensions</h3>
+              <p class="form-description">Select dimensions to include in the column. You can choose specific members or enter typed values.</p>
+              
+              ${this.availableDimensions.map((dimension) => {
+      const isSelected = this._selectedDimensions.has(dimension.id);
+      const selection = this._selectedDimensions.get(dimension.id);
+      const isTypedDimension = !!(dimension.typedMember && (!dimension.members || dimension.members.length === 0));
+      return html`
+                  <div class="dimension-item">
+                    <div class="dimension-header">
+                      <input 
+                        type="checkbox" 
+                        class="dimension-checkbox"
+                        .checked="${isSelected}"
+                        @change="${(e2) => this._handleDimensionToggle(dimension.id, e2)}"
+                        id="dim-${dimension.id}"
+                      />
+                      <label for="dim-${dimension.id}" class="dimension-label">
+                        ${dimension.axisLabel || dimension.conceptName}
+                      </label>
+                    </div>
+                    
+                    ${isSelected ? html`
+                      <div class="dimension-details">
+                        ${isTypedDimension ? html`
+                          <!-- Typed Dimension Input -->
+                          <div class="member-selection">
+                            <label>Enter value for ${dimension.conceptName}:</label>
+                            <input
+                              type="text"
+                              class="typed-input"
+                              .value="${(selection == null ? void 0 : selection.typedValue) || ""}"
+                              @input="${(e2) => this._handleTypedValueChange(dimension.id, e2)}"
+                              placeholder="Enter value..."
+                            />
+                          </div>
+                        ` : html`
+                          <!-- Domain Members Selection -->
+                          ${dimension.members && dimension.members.length > 0 ? html`
+                            <div class="member-selection">
+                              <label>Select member:</label>
+                              <div class="member-list">
+                                ${dimension.members.map((member) => html`
+                                  <div class="member-option">
+                                    <input
+                                      type="radio"
+                                      name="member-${dimension.id}"
+                                      .checked="${(selection == null ? void 0 : selection.memberId) === member.id}"
+                                      @change="${() => this._handleMemberSelection(dimension.id, member.id, member.label)}"
+                                      id="member-${dimension.id}-${member.id}"
+                                    />
+                                    <label for="member-${dimension.id}-${member.id}">
+                                      ${member.label}
+                                    </label>
+                                  </div>
+                                `)}
+                              </div>
+                            </div>
+                          ` : html`
+                            <p class="form-description">No members available for this dimension</p>
+                          `}
+                        `}
+                      </div>
+                    ` : ""}
+                  </div>
+                `;
+    })}
+            </div>
+          ` : ""}
         </div>
 
         <div class="dialog-actions">
@@ -2281,9 +2415,12 @@ JupiterAddColumnDialog.styles = css`
       padding: 24px;
       min-width: 400px;
       max-width: 500px;
+      max-height: 90vh;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       transform: scale(0.9);
       transition: transform 0.3s ease;
+      display: flex;
+      flex-direction: column;
     }
 
     :host([open]) .dialog {
@@ -2292,6 +2429,7 @@ JupiterAddColumnDialog.styles = css`
 
     .dialog-header {
       margin-bottom: 20px;
+      flex-shrink: 0;
     }
 
     .dialog-title {
@@ -2309,12 +2447,24 @@ JupiterAddColumnDialog.styles = css`
 
     .dialog-content {
       margin-bottom: 24px;
+      flex: 1;
+      overflow-y: auto;
+      max-height: calc(90vh - 160px);
     }
 
     .form-group {
       margin-bottom: 16px;
     }
 
+    .form-group.date-row {
+      display: flex;
+      gap: 12px;
+    }
+
+    .form-group.date-row .date-field {
+      flex: 1;
+    }
+
     .form-label {
       display: block;
       font-weight: 500;
@@ -2354,6 +2504,10 @@ JupiterAddColumnDialog.styles = css`
       display: flex;
       gap: 12px;
       justify-content: flex-end;
+      flex-shrink: 0;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      padding-top: 16px;
+      margin-top: 16px;
     }
 
     .btn {
@@ -2388,27 +2542,135 @@ JupiterAddColumnDialog.styles = css`
       background: var(--jupiter-disabled-background, #ccc);
       cursor: not-allowed;
     }
+
+    /* Dimension Selection Styles */
+    .dimensions-section {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .dimensions-section h3 {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .dimension-item {
+      margin-bottom: 16px;
+      padding: 16px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--jupiter-card-background, #fafafa);
+    }
+
+    .dimension-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .dimension-checkbox {
+      margin: 0;
+    }
+
+    .dimension-label {
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+      flex: 1;
+    }
+
+    .dimension-details {
+      margin-left: 24px;
+    }
+
+    .member-selection {
+      margin-top: 12px;
+    }
+
+    .member-selection label {
+      display: block;
+      margin-bottom: 4px;
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .typed-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+    }
+
+    .member-list {
+      max-height: 120px;
+      overflow-y: auto;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 8px;
+    }
+
+    .member-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+    }
+
+    .member-option input[type="radio"] {
+      margin: 0;
+    }
+
+    .member-option label {
+      margin: 0;
+      font-size: 13px;
+      color: var(--jupiter-text-primary, #333);
+      cursor: pointer;
+    }
+
+    .no-dimensions {
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+      padding: 20px;
+    }
+
+    .form-description {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0 0 12px 0;
+      line-height: 1.4;
+    }
   `;
 __decorateClass$3([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterAddColumnDialog.prototype, "periodType", 2);
 __decorateClass$3([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterAddColumnDialog.prototype, "open", 2);
 __decorateClass$3([
-  r$1()
+  n2({ type: Array })
+], JupiterAddColumnDialog.prototype, "availableDimensions", 2);
+__decorateClass$3([
+  r()
 ], JupiterAddColumnDialog.prototype, "_startDate", 2);
 __decorateClass$3([
-  r$1()
+  r()
 ], JupiterAddColumnDialog.prototype, "_endDate", 2);
 __decorateClass$3([
-  r$1()
+  r()
 ], JupiterAddColumnDialog.prototype, "_instantDate", 2);
 __decorateClass$3([
-  r$1()
+  r()
 ], JupiterAddColumnDialog.prototype, "_selectedType", 2);
+__decorateClass$3([
+  r()
+], JupiterAddColumnDialog.prototype, "_selectedDimensions", 2);
 JupiterAddColumnDialog = __decorateClass$3([
-  t$3("jupiter-add-column-dialog")
+  t$1("jupiter-add-column-dialog")
 ], JupiterAddColumnDialog);
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
@@ -2430,6 +2692,7 @@ let JupiterFormSection = class extends LitElement {
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
+    this.availableDimensions = [];
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
@@ -2720,6 +2983,7 @@ let JupiterFormSection = class extends LitElement {
       <jupiter-add-column-dialog
         .periodType="${this._sectionPeriodType}"
         ?open="${this._showAddColumnDialog}"
+        .availableDimensions="${this.availableDimensions}"
         @dialog-cancel="${this._handleDialogCancel}"
         @column-add="${this._handleColumnAdd}"
       ></jupiter-add-column-dialog>
@@ -2949,331 +3213,44 @@ JupiterFormSection.styles = css`
     }
   `;
 __decorateClass$2([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterFormSection.prototype, "section", 2);
 __decorateClass$2([
-  n$1({ type: Array })
+  n2({ type: Array })
 ], JupiterFormSection.prototype, "columns", 2);
 __decorateClass$2([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterFormSection.prototype, "formData", 2);
 __decorateClass$2([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterFormSection.prototype, "typedMemberData", 2);
 __decorateClass$2([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterFormSection.prototype, "disabled", 2);
 __decorateClass$2([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterFormSection.prototype, "collapsible", 2);
 __decorateClass$2([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterFormSection.prototype, "locale", 2);
 __decorateClass$2([
-  r$1()
+  n2({ type: Array })
+], JupiterFormSection.prototype, "availableDimensions", 2);
+__decorateClass$2([
+  r()
 ], JupiterFormSection.prototype, "_expanded", 2);
 __decorateClass$2([
-  r$1()
+  r()
 ], JupiterFormSection.prototype, "_showAddColumnDialog", 2);
 __decorateClass$2([
-  r$1()
+  r()
 ], JupiterFormSection.prototype, "_sectionPeriodType", 2);
 __decorateClass$2([
-  r$1()
+  r()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
 JupiterFormSection = __decorateClass$2([
-  t$3("jupiter-form-section")
+  t$1("jupiter-form-section")
 ], JupiterFormSection);
-/**
- * @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];
-};
-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) => {
@@ -3359,6 +3336,9 @@ let JupiterFilterRolesDialog = class extends LitElement {
     const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
     return text.replace(regex, "<mark>$1</mark>");
   }
+  _renderHighlightedText(text) {
+    return text;
+  }
   _getSelectedFilteredCount() {
     return this._filteredRoles.filter((role) => this._tempSelectedRoles.has(role.id)).length;
   }
@@ -3521,15 +3501,15 @@ let JupiterFilterRolesDialog = class extends LitElement {
                       @change="${(e2) => this._handleCheckboxChange(e2, role.id)}"
                     />
                     <div class="role-info">
-                      <h4 class="role-title">${o(this._highlightSearchTerm(role.title))}</h4>
+                      <h4 class="role-title">${role.title}</h4>
                       ${role.description ? html`
-                        <p class="role-description">${o(this._highlightSearchTerm(role.description))}</p>
+                        <p class="role-description">${role.description}</p>
                       ` : ""}
                       ${role.id !== role.title ? html`
-                        <p class="role-description">ID: ${o(this._highlightSearchTerm(role.id))}</p>
+                        <p class="role-description">ID: ${role.id}</p>
                       ` : ""}
                       ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
-                        <p class="role-description">URI: ${o(this._highlightSearchTerm(role.metadata.roleURI))}</p>
+                        <p class="role-description">URI: ${role.metadata.roleURI}</p>
                       ` : ""}
                     </div>
                   </div>
@@ -3852,25 +3832,25 @@ JupiterFilterRolesDialog.styles = css`
     }
   `;
 __decorateClass$1([
-  n$1({ type: Boolean, reflect: true })
+  n2({ type: Boolean, reflect: true })
 ], JupiterFilterRolesDialog.prototype, "open", 2);
 __decorateClass$1([
-  n$1({ type: Array })
+  n2({ type: Array })
 ], JupiterFilterRolesDialog.prototype, "availableRoles", 2);
 __decorateClass$1([
-  n$1({ type: Array })
+  n2({ type: Array })
 ], JupiterFilterRolesDialog.prototype, "selectedRoleIds", 2);
 __decorateClass$1([
-  r$1()
+  r()
 ], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
 __decorateClass$1([
-  r$1()
+  r()
 ], JupiterFilterRolesDialog.prototype, "_searchQuery", 2);
 __decorateClass$1([
-  r$1()
+  r()
 ], JupiterFilterRolesDialog.prototype, "_filteredRoles", 2);
 JupiterFilterRolesDialog = __decorateClass$1([
-  t$3("jupiter-filter-roles-dialog")
+  t$1("jupiter-filter-roles-dialog")
 ], JupiterFilterRolesDialog);
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -4203,6 +4183,56 @@ let JupiterDynamicForm = class extends LitElement {
     const { sectionId, columnRequest } = event.detail;
     this._addColumnFromRequest(columnRequest, sectionId);
   }
+  _getAvailableDimensionsForSection(sectionId) {
+    var _a, _b, _c;
+    console.log(`🔍 Getting dimensions for section: ${sectionId}`);
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      console.log("❌ No hypercubes data available");
+      return [];
+    }
+    console.log(`📊 Available hypercube roles:`, this.xbrlInput.hypercubes[0].roles.map((r2) => r2.roleId));
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionId);
+    if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
+      console.log(`❌ No hypercube items found for role: ${sectionId}`);
+      return [];
+    }
+    console.log(`✅ Found hypercube role with ${hypercubeRole.items.length} items`);
+    const availableDimensions = [];
+    hypercubeRole.items.forEach((item) => {
+      if (item.dimensions && item.dimensions.length > 0) {
+        item.dimensions.forEach((dimension) => {
+          var _a2;
+          if (!availableDimensions.find((d2) => d2.id === dimension.id)) {
+            const axisLabel = ((_a2 = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a2.label) || dimension.conceptName;
+            const availableDimension = {
+              id: dimension.id,
+              conceptName: dimension.conceptName,
+              axisLabel
+            };
+            if (dimension.members && dimension.members.length > 0) {
+              availableDimension.members = dimension.members.map((member) => {
+                var _a3, _b2;
+                return {
+                  id: member.id,
+                  label: ((_b2 = (_a3 = member.labels) == null ? void 0 : _a3.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b2.label) || member.conceptName || member.id
+                };
+              });
+            }
+            if (dimension.typedMember) {
+              availableDimension.typedMember = {
+                id: dimension.typedMember.id,
+                dataType: "string"
+                // Default to string for now
+              };
+            }
+            availableDimensions.push(availableDimension);
+          }
+        });
+      }
+    });
+    console.log(`📈 Found ${availableDimensions.length} dimensions for section ${sectionId}:`, availableDimensions.map((d2) => d2.axisLabel));
+    return availableDimensions;
+  }
   _addColumnFromRequest(request, sectionId) {
     var _a, _b, _c, _d, _e;
     const timestamp = Date.now();
@@ -4221,30 +4251,57 @@ let JupiterDynamicForm = class extends LitElement {
       memberValue: request.periodType === "instant" ? `instant-${request.instantDate}` : `duration-${request.startDate}-${request.endDate}`,
       memberLabel: title
     };
-    if ((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) {
-      const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionId);
-      if (((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length) === 1) {
-        const item = hypercubeRole.items[0];
-        if (item.dimensions.length === 1) {
-          const dimension = item.dimensions[0];
-          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 firstMember = dimension.members[0];
-            const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
-            const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
-            title = `${memberLabel} ${periodPart}`;
-            dimensionData = {
-              dimensionId: newColumnId,
-              axisId: dimension.id,
-              memberId: firstMember.id,
-              memberValue: memberLabel,
-              memberLabel,
-              axis: axisLabel,
-              axisLabel,
-              memberKey: `${axisLabel} | ${memberLabel}`,
-              dimensionIdKey: `${dimension.id} | ${firstMember.id}`
-            };
-            console.log(`📊 Applied hypercube dimension to new column: ${dimensionData.memberKey}`);
+    if (request.selectedDimensions && request.selectedDimensions.length > 0) {
+      const dimensionParts = [];
+      const dimensionKeys = [];
+      for (const dimSelection of request.selectedDimensions) {
+        if (dimSelection.isTyped && dimSelection.typedValue) {
+          dimensionParts.push(`${dimSelection.axisLabel}: ${dimSelection.typedValue}`);
+          dimensionKeys.push(`${dimSelection.axisId}|${dimSelection.typedValue}`);
+        } else if (dimSelection.memberId && dimSelection.memberLabel) {
+          dimensionParts.push(dimSelection.memberLabel);
+          dimensionKeys.push(`${dimSelection.axisId}|${dimSelection.memberId}`);
+        }
+      }
+      const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+      if (dimensionParts.length > 0) {
+        title = `${dimensionParts.join(" | ")} ${periodPart}`;
+        dimensionData = {
+          dimensionId: newColumnId,
+          memberValue: dimensionParts.join(" | "),
+          memberLabel: dimensionParts.join(" | "),
+          memberKey: dimensionParts.join(" | "),
+          dimensionIdKey: dimensionKeys.join("::"),
+          selectedDimensions: request.selectedDimensions
+        };
+        console.log(`📊 Applied selected dimensions to new column: ${dimensionData.memberKey}`);
+      }
+    } else {
+      if ((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) {
+        const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionId);
+        if (((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length) === 1) {
+          const item = hypercubeRole.items[0];
+          if (item.dimensions.length === 1) {
+            const dimension = item.dimensions[0];
+            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 firstMember = dimension.members[0];
+              const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
+              const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+              title = `${memberLabel} ${periodPart}`;
+              dimensionData = {
+                dimensionId: newColumnId,
+                axisId: dimension.id,
+                memberId: firstMember.id,
+                memberValue: memberLabel,
+                memberLabel,
+                axis: axisLabel,
+                axisLabel,
+                memberKey: `${axisLabel} | ${memberLabel}`,
+                dimensionIdKey: `${dimension.id} | ${firstMember.id}`
+              };
+              console.log(`📊 Applied hypercube dimension to new column: ${dimensionData.memberKey}`);
+            }
           }
         }
       }
@@ -4399,9 +4456,27 @@ let JupiterDynamicForm = class extends LitElement {
     }));
   }
   _handleSubmit() {
+    console.log("📝 Form submission started...");
     this._submitted = true;
     this._validateForm();
     const submissionData = this._generateSubmissionData();
+    console.log("📊 Generated submission data:", {
+      formData: this._formData,
+      submissionData,
+      submissionDataCount: submissionData.length,
+      valid: this._valid,
+      errors: this._errors
+    });
+    submissionData.forEach((entry, index) => {
+      console.log(`📋 Submission Entry ${index + 1}:`, {
+        conceptId: entry.conceptId,
+        value: entry.value,
+        period: entry.period,
+        dimension: entry.dimension,
+        typedMembers: entry.typedMembers,
+        hasTypedMembers: !!(entry.typedMembers && Object.keys(entry.typedMembers).length > 0)
+      });
+    });
     this.dispatchEvent(new CustomEvent("form-submit", {
       detail: {
         data: this._formData,
@@ -4411,6 +4486,7 @@ let JupiterDynamicForm = class extends LitElement {
       },
       bubbles: true
     }));
+    console.log("✅ Form submit event dispatched");
   }
   _handleSaveDraft() {
     const draftData = this._generateSubmissionData();
@@ -4805,6 +4881,7 @@ let JupiterDynamicForm = class extends LitElement {
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
+              .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
               @field-change="${this._handleFieldChange}"
               @typed-member-change="${this._handleTypedMemberChange}"
               @section-expand="${this._handleSectionExpand}"
@@ -5043,73 +5120,73 @@ JupiterDynamicForm.styles = css`
     }
   `;
 __decorateClass([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterDynamicForm.prototype, "schema", 2);
 __decorateClass([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterDynamicForm.prototype, "xbrlInput", 2);
 __decorateClass([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterDynamicForm.prototype, "config", 2);
 __decorateClass([
-  n$1({ type: Object })
+  n2({ type: Object })
 ], JupiterDynamicForm.prototype, "initialData", 2);
 __decorateClass([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterDynamicForm.prototype, "disabled", 2);
 __decorateClass([
-  n$1({ type: Boolean })
+  n2({ type: Boolean })
 ], JupiterDynamicForm.prototype, "readonly", 2);
 __decorateClass([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterDynamicForm.prototype, "periodStartDate", 2);
 __decorateClass([
-  n$1({ type: String })
+  n2({ type: String })
 ], JupiterDynamicForm.prototype, "periodEndDate", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_formData", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_preservedFormData", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_typedMemberData", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_preservedTypedMemberData", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_columns", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_errors", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_touched", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_dirty", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_valid", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_submitted", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_currentSchema", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_allSections", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_selectedRoleIds", 2);
 __decorateClass([
-  r$1()
+  r()
 ], JupiterDynamicForm.prototype, "_showFilterDialog", 2);
 JupiterDynamicForm = __decorateClass([
-  t$3("jupiter-dynamic-form")
+  t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);
 const version = "1.5.0";
 export {