jupiter-dynamic-forms 1.15.5 → 1.15.6

package/dist/index.mjs

@@ -3222,7 +3222,31 @@ let JupiterFormField = class extends LitElement {
       periodType: this.field.periodType
     });
   }
+  /**
+   * Renders a plain text label for readonly mode instead of an interactive input.
+   * Resolves the display value for selects (shows label, not raw id) and
+   * booleans (shows Yes/No).
+   */
+  _renderReadonlyValue(effectiveValue) {
+    const typeConfig = getInputTypeForConceptType(this.conceptType, this.datatypes);
+    const effectiveFieldType = typeConfig.fieldType || this.field.type || "text";
+    let displayValue;
+    if (effectiveFieldType === "boolean" || isCheckboxType(effectiveFieldType)) {
+      displayValue = effectiveValue ? I18n.t("form.yes") : I18n.t("form.no");
+    } else if (effectiveFieldType === "select" || this.field.type === "select") {
+      const selectOptions = typeConfig.enumerations || this.field.options || [];
+      const match = selectOptions.find((o2) => o2.value === effectiveValue);
+      displayValue = match ? match.label || match.value : effectiveValue ?? "";
+    } else {
+      displayValue = effectiveValue !== null && effectiveValue !== void 0 ? String(effectiveValue) : "";
+    }
+    const isEmpty = displayValue === "" || displayValue === null || displayValue === void 0;
+    return html`<span class="readonly-value ${isEmpty ? "empty" : ""}">${isEmpty ? "—" : displayValue}</span>`;
+  }
   _renderInput(effectiveValue = this.value, effectiveDisabled = this.disabled) {
+    if (this.mode === "readonly") {
+      return this._renderReadonlyValue(effectiveValue);
+    }
     const hasErrors = this._errors.some((e2) => e2.severity === "error");
     const hasWarnings = this._errors.some((e2) => e2.severity === "warning");
     const isMonetary = this._isMonetaryType();
@@ -3806,6 +3830,21 @@ JupiterFormField.styles = css`
       min-height: 60px;
     }
 
+    .readonly-value {
+      display: block;
+      padding: 6px 0;
+      color: var(--jupiter-text-primary, #333);
+      font-size: inherit;
+      line-height: 1.4;
+      word-break: break-word;
+      min-height: 1.4em;
+    }
+
+    .readonly-value.empty {
+      color: var(--jupiter-text-secondary, #999);
+      font-style: italic;
+    }
+
     .checkbox-container {
       display: flex;
       align-items: center;
@@ -5121,13 +5160,19 @@ let JupiterFormSection = class extends LitElement {
                         <div class="typed-members-header">
                           ${(_c = (_b = column2.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="${I18n.t("section.enterPlaceholder")} ${typedMember.axisLabel}"
-                                .value="${this._getTypedMemberHeaderValue(column2.id, typedMember.axisId)}"
-                                @input="${(e2) => this._handleTypedMemberHeaderChange(e2, column2.id, typedMember.axisId)}"
-                              />
+                              ${this.mode === "readonly" ? html`
+                                <span class="typed-member-header-field" style="display:block;padding:4px 0;">
+                                  ${this._getTypedMemberHeaderValue(column2.id, typedMember.axisId) || "—"}
+                                </span>
+                              ` : html`
+                                <input
+                                  type="text"
+                                  class="typed-member-header-field"
+                                  placeholder="${I18n.t("section.enterPlaceholder")} ${typedMember.axisLabel}"
+                                  .value="${this._getTypedMemberHeaderValue(column2.id, typedMember.axisId)}"
+                                  @input="${(e2) => this._handleTypedMemberHeaderChange(e2, column2.id, typedMember.axisId)}"
+                                />
+                              `}
                             </div>
                           `)}
                         </div>