jupiter-dynamic-forms 1.18.8 → 1.18.9

package/dist/index.mjs

@@ -3242,7 +3242,7 @@ let JupiterFormField = class extends LitElement {
     }
     if (this._isPercentItemType() && this.value !== null && this.value !== void 0) {
       const numVal = Number(this.value);
-      if (!isNaN(numVal) && Math.abs(numVal) >= 1) {
+      if (!isNaN(numVal) && Math.abs(numVal) > 1) {
         this.value = numVal / 100;
         const oldValue = numVal;
         this.dispatchEvent(new CustomEvent("field-change", {
@@ -3892,6 +3892,7 @@ let JupiterFormField = class extends LitElement {
               <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                     a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                     a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+            </svg>
           </div>
         </div>
       `;
@@ -3899,17 +3900,18 @@ let JupiterFormField = class extends LitElement {
       return html`
         <div class="period-controls">
           <label>From:</label>
-            <div class="date-wrapper">
-              <input
-                type="date"
-                .value="${this.periodStartDate || this.field.periodStartDate || ""}"
-                @change="${(e2) => this._handlePeriodChange(e2, "start")}"
-                ?disabled="${this.disabled}"
-              />
-              <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+          <div class="date-wrapper">
+            <input
+              type="date"
+              .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+              @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+              ?disabled="${this.disabled}"
+            />
+            <svg class="calendar-icon-svg" viewBox="0 0 24 24">
               <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                     a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                     a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+            </svg>
             </div>
           <label>To:</label>
           <div class="date-wrapper">
@@ -3923,6 +3925,7 @@ let JupiterFormField = class extends LitElement {
               <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                     a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                     a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+            </svg>
           </div>
         </div>
       `;
@@ -3955,6 +3958,7 @@ let JupiterFormField = class extends LitElement {
                     <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                           a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                           a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                  </svg>
                 </div>
               </div>
             ` : html`
@@ -3967,12 +3971,13 @@ let JupiterFormField = class extends LitElement {
                     @change="${(e2) => this._handlePeriodChange(e2, "start")}"
                     ?disabled="${this.disabled}"
                   />
-                    <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
                     <path
                       fill="currentColor"
                       d="M19 4h-1V2h-2v2H8V2H6v2H5
                         a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                         a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                  </svg>
                 </div>
               </div>
               <div class="period-controls">
@@ -3988,6 +3993,7 @@ let JupiterFormField = class extends LitElement {
                     <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                           a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                           a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                  </svg>
                 </div>
               </div>
             `}
@@ -4011,7 +4017,7 @@ let JupiterFormField = class extends LitElement {
               </div>
             ` : ""}
 
-            ${this._isMonetaryType() || this._isPercentItemType() ? html`
+            ${this._isMonetaryType() ? html`
               <div class="period-controls">
                 <label>${I18n.t("field.scale")}:</label>
                 <input
@@ -4019,7 +4025,7 @@ let JupiterFormField = class extends LitElement {
                   min="0"
                   class="typed-member-input"
                   placeholder="Leave blank for INF"
-                  .value="${this.decimals !== void 0 && this.decimals !== null && this.decimals !== "" ? this.decimals : this._isPercentItemType() ? "4" : this.globalDecimals !== "INF" ? this.globalDecimals : ""}"
+                  .value="${this.decimals !== void 0 && this.decimals !== null && this.decimals !== "" ? this.decimals : this.globalDecimals !== "INF" ? this.globalDecimals : ""}"
                   @input="${this._handleDecimalsChange}"
                   ?disabled="${this.disabled}"
                 />
@@ -4298,20 +4304,26 @@ JupiterFormField.styles = css`
     width: min-content;
     }
 
-       /* hide native icon */
+    .date-wrapper input[type="date"] {
+      appearance: none;
+      -webkit-appearance: none;
+      padding-right: 34px;
+    }
+
+    /* Chrome/Edge/Safari: hide the native calendar picker indicator and use custom SVG */
     input[type="date"]::-webkit-calendar-picker-indicator {
       opacity: 0;
       position: absolute;
-      right: 10px;
-      width: 20px;
-      height: 20px;
+      right: 0;
+      width: 34px;
+      height: 100%;
       cursor: pointer;
     }
 
-       .calendar-icon-svg {
+    .calendar-icon-svg {
       position: absolute;
-    right: 3px;
-    top: 18px;
+      right: 8px;
+      top: 50%;
       transform: translateY(-50%);
       width: 20px;
       height: 20px;
@@ -4319,6 +4331,17 @@ JupiterFormField.styles = css`
       pointer-events: none;
     }
 
+    /* Firefox: cannot hide native calendar icon via pseudo-element;
+       hide our custom SVG so only the native icon shows (no duplication) */
+    @supports (-moz-appearance: none) {
+      .calendar-icon-svg {
+        display: none;
+      }
+      .date-wrapper input[type="date"] {
+        padding-right: 10px;
+      }
+    }
+
     .period-popup-content .period-controls input[type="date"] {
       padding: 8px 10px;
       font-size: 14px;
@@ -5434,6 +5457,7 @@ let JupiterAddColumnDialog = class extends LitElement {
                   <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                         a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                         a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </svg>
               </div>
             </div>
           ` : html`
@@ -5452,6 +5476,7 @@ let JupiterAddColumnDialog = class extends LitElement {
                     <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                           a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                           a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                  </svg>
                 </div>
               </div>
               <div class="date-field">
@@ -5468,6 +5493,7 @@ let JupiterAddColumnDialog = class extends LitElement {
                     <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
                           a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
                           a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                  </svg>
                 </div>
               </div>
             </div>
@@ -5633,20 +5659,26 @@ JupiterAddColumnDialog.styles = css`
     width: min-content;
     }
 
-       /* hide native icon */
+    .date-wrapper input[type="date"] {
+      appearance: none;
+      -webkit-appearance: none;
+      padding-right: 34px;
+    }
+
+    /* Chrome/Edge/Safari: hide the native calendar picker indicator and use custom SVG */
     input[type="date"]::-webkit-calendar-picker-indicator {
       opacity: 0;
       position: absolute;
-      right: 10px;
-      width: 20px;
-      height: 20px;
+      right: 0;
+      width: 34px;
+      height: 100%;
       cursor: pointer;
     }
-      
-       .calendar-icon-svg {
+
+    .calendar-icon-svg {
       position: absolute;
-    right: 3px;
-    top: 18px;
+      right: 8px;
+      top: 50%;
       transform: translateY(-50%);
       width: 20px;
       height: 20px;
@@ -5654,6 +5686,17 @@ JupiterAddColumnDialog.styles = css`
       pointer-events: none;
     }
 
+    /* Firefox: cannot hide native calendar icon via pseudo-element;
+       hide our custom SVG so only the native icon shows (no duplication) */
+    @supports (-moz-appearance: none) {
+      .calendar-icon-svg {
+        display: none;
+      }
+      .date-wrapper input[type="date"] {
+        padding-right: 10px;
+      }
+    }
+
     .form-group {
       margin-bottom: 16px;
     }
@@ -11306,7 +11349,7 @@ let JupiterDynamicForm = class extends LitElement {
     return null;
   }
   _addConceptDataToSubmission(concept, columnId, value, submissionData, section2) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const field2 = concept.fields.find((f2) => f2.columnId === columnId);
     if (!field2)
       return;
@@ -11341,15 +11384,13 @@ let JupiterDynamicForm = class extends LitElement {
       console.log(`✅ [Submission] Adding unit to entry: ${fieldUnit} for ${concept.id}/${columnId}`);
     }
     const isMonetary = (_d = concept.type) == null ? void 0 : _d.toLowerCase().includes("monetary");
-    const isPercent = (_e = concept.type) == null ? void 0 : _e.toLowerCase().includes("percentitemtype");
-    const fieldDecimals = (_f = this._decimalsData[concept.id]) == null ? void 0 : _f[columnId];
-    const globalFallback = isPercent ? "4" : this.decimals !== "INF" ? this.decimals : void 0;
-    const decimalsValue = fieldDecimals || globalFallback;
-    if ((isMonetary || isPercent) && decimalsValue) {
+    const fieldDecimals = (_e = this._decimalsData[concept.id]) == null ? void 0 : _e[columnId];
+    const decimalsValue = fieldDecimals || (this.decimals !== "INF" ? this.decimals : void 0);
+    if (isMonetary && decimalsValue) {
       const parsed = parseFloat(decimalsValue);
       entry.decimals = isNaN(parsed) ? decimalsValue : String(-Math.abs(parsed));
     }
-    if ((_g = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _g.memberLabel) {
+    if ((_f = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _f.memberLabel) {
       entry.dimension = column2.dimensionData.memberLabel;
     }
     console.log(`📤 [Submission Entry] Created entry:`, JSON.stringify(entry, null, 2));
@@ -11487,7 +11528,7 @@ let JupiterDynamicForm = class extends LitElement {
       }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field2) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _i;
           const conceptData = this._formData[concept.id];
           let fieldValue = conceptData == null ? void 0 : conceptData[field2.columnId];
           const baseConceptId = field2.conceptId || concept.id.split("__").slice(0, -1).join("__") || concept.id;
@@ -11542,15 +11583,13 @@ let JupiterDynamicForm = class extends LitElement {
               console.log(`⚠️ [Submission] No unit found in _unitData for ${concept.id}/${field2.columnId}. _unitData state:`, JSON.stringify(this._unitData, null, 2));
             }
             const isMonetary = (_e = concept.type) == null ? void 0 : _e.toLowerCase().includes("monetary");
-            const isPercent = (_f = concept.type) == null ? void 0 : _f.toLowerCase().includes("percentitemtype");
-            const fieldDecimals = (_g = this._decimalsData[concept.id]) == null ? void 0 : _g[field2.columnId];
-            const globalFallback = isPercent ? "4" : this.decimals !== "INF" ? this.decimals : void 0;
-            const decimalsValue = fieldDecimals || globalFallback;
-            if ((isMonetary || isPercent) && decimalsValue) {
+            const fieldDecimals = (_f = this._decimalsData[concept.id]) == null ? void 0 : _f[field2.columnId];
+            const decimalsValue = fieldDecimals || (this.decimals !== "INF" ? this.decimals : void 0);
+            if (isMonetary && decimalsValue) {
               const parsed = parseFloat(decimalsValue);
               submissionEntry.decimals = isNaN(parsed) ? decimalsValue : String(-Math.abs(parsed));
             }
-            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_h = column2.dimensionData) == null ? void 0 : _h.dimensionIdKey)) {
+            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_g = column2.dimensionData) == null ? void 0 : _g.dimensionIdKey)) {
               submissionEntry.dimension = column2.dimensionData.dimensionIdKey;
               console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field2.columnId}):`, column2.dimensionData.dimensionIdKey);
             } else {
@@ -11586,12 +11625,12 @@ let JupiterDynamicForm = class extends LitElement {
                 console.log(`🔍 [DynamicForm] Column details:`, {
                   id: column2.id,
                   type: column2.type,
-                  hasTypedMembers: (_i = column2.dimensionData) == null ? void 0 : _i.hasTypedMembers,
+                  hasTypedMembers: (_h = column2.dimensionData) == null ? void 0 : _h.hasTypedMembers,
                   dimensionData: column2.dimensionData
                 });
               }
             }
-            if (!submissionEntry.typedMembers && ((_j = field2.crossRoleTypedMembers) == null ? void 0 : _j.length)) {
+            if (!submissionEntry.typedMembers && ((_i = field2.crossRoleTypedMembers) == null ? void 0 : _i.length)) {
               const crossRoleKey = `${concept.id}__${field2.columnId}`;
               const crossRoleValues = this._typedMemberData[crossRoleKey];
               if (crossRoleValues) {
@@ -12758,6 +12797,29 @@ let JupiterDynamicForm = class extends LitElement {
     const conceptIdBase = conceptId.includes("__") ? conceptId.split("__")[0] : conceptId;
     console.log(`[scrollToConcept] conceptId="${conceptId}" conceptIdBase="${conceptIdBase}"`);
     const sameBaseConcept = (fieldConceptId) => fieldConceptId === conceptId || fieldConceptId.includes("__") && fieldConceptId.split("__")[0] === conceptIdBase;
+    const getFieldScaleFactor = (fieldEl) => {
+      const effectiveDecimals = fieldEl.decimals || (fieldEl.globalDecimals !== void 0 && fieldEl.globalDecimals !== "INF" ? fieldEl.globalDecimals : null);
+      if (!effectiveDecimals)
+        return 1;
+      const scale = parseFloat(String(effectiveDecimals));
+      if (isNaN(scale) || scale <= 0)
+        return 1;
+      return Math.pow(10, scale);
+    };
+    const valueMatchesTarget = (fieldEl, targetVal) => {
+      if (String(fieldEl.value ?? "") === targetVal)
+        return true;
+      const targetNum = Number(targetVal);
+      const fieldNum = Number(fieldEl.value);
+      if (!isNaN(targetNum) && !isNaN(fieldNum) && fieldNum !== 0) {
+        const scaleFactor = getFieldScaleFactor(fieldEl);
+        if (scaleFactor !== 1) {
+          if (Math.abs(fieldNum * scaleFactor - targetNum) < 1e-4)
+            return true;
+        }
+      }
+      return false;
+    };
     let phase1FieldCount = 0;
     conceptTrees == null ? void 0 : conceptTrees.forEach((ct) => {
       var _a2;
@@ -12768,10 +12830,10 @@ let JupiterDynamicForm = class extends LitElement {
         if (targetFieldEl)
           return;
         const columnMatch = targetColumnId ? fieldEl.conceptId === conceptId && fieldEl.columnId === targetColumnId : fieldEl.conceptId === conceptId;
-        const valueMatch = !hasValueMatch || String(fieldEl.value ?? "") === targetValue;
+        const valueMatch = !hasValueMatch || valueMatchesTarget(fieldEl, targetValue);
         if (columnMatch) {
           phase1FieldCount++;
-          console.log(`[scrollToConcept] Phase1 candidate: conceptId=${fieldEl.conceptId} columnId=${fieldEl.columnId} value=${fieldEl.value} valueMatch=${valueMatch}`);
+          console.log(`[scrollToConcept] Phase1 candidate: conceptId=${fieldEl.conceptId} columnId=${fieldEl.columnId} value=${fieldEl.value} scale=${getFieldScaleFactor(fieldEl)} valueMatch=${valueMatch}`);
         }
         if (columnMatch && valueMatch)
           targetFieldEl = fieldEl;
@@ -12793,9 +12855,9 @@ let JupiterDynamicForm = class extends LitElement {
             if (targetFieldEl)
               return;
             const baseMatch = sameBaseConcept(fieldEl.conceptId);
-            const valMatch = String(fieldEl.value ?? "") === targetValue;
+            const valMatch = valueMatchesTarget(fieldEl, targetValue);
             if (baseMatch) {
-              console.log(`[scrollToConcept] Phase2 candidate: conceptId=${fieldEl.conceptId} value=${fieldEl.value} valMatch=${valMatch}`);
+              console.log(`[scrollToConcept] Phase2 candidate: conceptId=${fieldEl.conceptId} value=${fieldEl.value} scale=${getFieldScaleFactor(fieldEl)} valMatch=${valMatch}`);
             }
             if (baseMatch && valMatch) {
               console.log(`[scrollToConcept] Phase2 ✅ MATCH: conceptId=${fieldEl.conceptId} columnId=${fieldEl.columnId} value=${fieldEl.value}`);