jupiter-dynamic-forms 1.7.0 → 1.7.2

package/dist/index.mjs

@@ -2215,8 +2215,34 @@ let JupiterAddColumnDialog = class extends LitElement {
     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}`);
+      } else if (dimension.typedMember && (!dimension.members || dimension.members.length === 0)) {
+        const selection = {
+          axisId: dimension.id,
+          axisLabel: dimension.axisLabel,
+          isTyped: true
+          // Note: typedValue will be entered in column header, not here
+        };
+        this._selectedDimensions.set(dimension.id, selection);
+        console.log(`🎯 Auto-selected typed dimension: ${dimension.axisLabel} (value will be entered in column header)`);
+      }
+    });
+  }
   render() {
     if (!this.open)
       return html``;
@@ -2225,9 +2251,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">
@@ -2258,25 +2282,27 @@ 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>
           `}
 
@@ -2284,7 +2310,7 @@ let JupiterAddColumnDialog = class extends LitElement {
           ${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>
+              <p class="form-description">Select dimensions to include in the column. Domain members can be selected here, while typed dimension values will be entered directly in the column header.</p>
               
               ${this.availableDimensions.map((dimension) => {
       const isSelected = this._selectedDimensions.has(dimension.id);
@@ -2398,9 +2424,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 {
@@ -2409,6 +2438,7 @@ JupiterAddColumnDialog.styles = css`
 
     .dialog-header {
       margin-bottom: 20px;
+      flex-shrink: 0;
     }
 
     .dialog-title {
@@ -2426,12 +2456,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;
@@ -2471,6 +2513,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 {
@@ -4278,6 +4324,33 @@ let JupiterDynamicForm = class extends LitElement {
       removable: true,
       dimensionData
     };
+    if (request.selectedDimensions && request.selectedDimensions.length > 0) {
+      const typedMembers = {};
+      let hasTypedDimensions = false;
+      for (const dimSelection of request.selectedDimensions) {
+        if (dimSelection.isTyped) {
+          typedMembers[dimSelection.axisId] = dimSelection.typedValue || "";
+          hasTypedDimensions = true;
+          console.log(`💾 Initializing typed member data: ${dimSelection.axisLabel} = "${dimSelection.typedValue || "(empty - will be entered in column header)"}"`);
+        }
+      }
+      if (hasTypedDimensions) {
+        this._typedMemberData[newColumnId] = typedMembers;
+        if (newColumn.dimensionData) {
+          newColumn.dimensionData.hasTypedMembers = true;
+          newColumn.dimensionData.typedMembers = request.selectedDimensions.filter((dim) => dim.isTyped).map((dim) => ({
+            axisId: dim.axisId,
+            axisLabel: dim.axisLabel,
+            typedMemberId: dim.axisId,
+            // Use axisId as typedMemberId for typed dimensions
+            memberLabel: dim.axisLabel
+            // Use axisLabel as memberLabel
+          }));
+          console.log(`� Added typed members to column dimension data:`, newColumn.dimensionData.typedMembers);
+        }
+        console.log(`� Initialized typed member data for column ${newColumnId}:`, typedMembers);
+      }
+    }
     if (this._currentSchema) {
       const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
       if (targetSection) {