jupiter-dynamic-forms 1.17.7 → 1.17.9

package/dist/index.mjs

@@ -569,6 +569,14 @@ class XBRLFormBuilder {
     }
     return Math.abs(hash).toString(36).substr(0, 6);
   }
+  static _extractDocumentationLabels(labels) {
+    const result = {};
+    const docRole = "http://www.xbrl.org/2003/role/documentation";
+    labels.filter((l2) => l2.role === docRole).forEach((l2) => {
+      result[l2.lang] = l2.label;
+    });
+    return result;
+  }
   /**
    * Build form schema from XBRL input data
    * Creates accordion sections for each presentation role
@@ -707,6 +715,14 @@ class XBRLFormBuilder {
         conceptId = `${conceptId}__occ${count + 1}`;
       }
     }
+    const conceptMetadata = {
+      conceptName: concept.conceptName,
+      type: concept.type,
+      substitutionGroup: concept.substitutionGroup,
+      periodType: concept.periodType,
+      balance: concept.balance,
+      documentationLabels: this._extractDocumentationLabels(concept.labels)
+    };
     return {
       id: conceptId,
       originalConceptId: concept.id,
@@ -719,6 +735,7 @@ class XBRLFormBuilder {
       level,
       children,
       fields,
+      conceptMetadata,
       facts: concept.facts || [],
       // Pass facts array from presentation concept for pre-population
       collapsed: level > 0,
@@ -1605,6 +1622,18 @@ class XBRLFormBuilder {
     }];
   }
 }
+const conceptInfo$1 = {
+  title: "Concept Information",
+  conceptName: "Concept name",
+  type: "Type",
+  substitutionGroup: "Substitution group",
+  periodType: "Period type",
+  balance: "Balance",
+  documentation: "Documentation",
+  instant: "Instant",
+  duration: "Duration",
+  close: "Close"
+};
 const form$1 = {
   loading: "Loading form...",
   submit: "Validate",
@@ -1713,7 +1742,12 @@ const field$1 = {
   phonePlaceholder: "+1 (555) 000-0000",
   enterValue: "Enter value",
   enterDetailedInformation: "Enter detailed information...",
-  scale: "Scale"
+  scale: "Scale",
+  addText: "Add text",
+  editText: "Edit",
+  save: "Save",
+  cancel: "Cancel",
+  characters: "characters"
 };
 const admin$1 = {
   title: "Configure Roles",
@@ -1749,6 +1783,7 @@ const error$1 = {
   }
 };
 const enTranslations = {
+  conceptInfo: conceptInfo$1,
   form: form$1,
   filter: filter$1,
   column: column$1,
@@ -1759,6 +1794,18 @@ const enTranslations = {
   xbrlValidation: xbrlValidation$1,
   error: error$1
 };
+const conceptInfo = {
+  title: "Conceptinformatie",
+  conceptName: "Conceptnaam",
+  type: "Type",
+  substitutionGroup: "Substitutiegroep",
+  periodType: "Periodetype",
+  balance: "Saldo",
+  documentation: "Documentatie",
+  instant: "Moment",
+  duration: "Periode",
+  close: "Sluiten"
+};
 const form = {
   loading: "Formulier laden...",
   submit: "Valideren",
@@ -1867,7 +1914,12 @@ const field = {
   phonePlaceholder: "+31 (0)20 123 4567",
   enterValue: "Voer waarde in",
   enterDetailedInformation: "Voer gedetailleerde informatie in...",
-  scale: "Schaal"
+  scale: "Schaal",
+  addText: "Tekst toevoegen",
+  editText: "Bewerken",
+  save: "Opslaan",
+  cancel: "Annuleren",
+  characters: "tekens"
 };
 const admin = {
   title: "Rollen configureren",
@@ -1903,6 +1955,7 @@ const error = {
   }
 };
 const nlTranslations = {
+  conceptInfo,
   form,
   filter,
   column,
@@ -3354,6 +3407,169 @@ let JupiterFormField = class extends LitElement {
       this._closePeriodPopup();
     }
   }
+  _ensureTextDialogStyles() {
+    if (document.getElementById("jdf-text-dialog-styles"))
+      return;
+    const style = document.createElement("style");
+    style.id = "jdf-text-dialog-styles";
+    style.textContent = `
+      dialog.jdf-text-entry-dialog {
+        border: none; border-radius: 8px; padding: 0;
+        max-width: 600px; width: 90vw;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
+        font-family: inherit;
+      }
+      dialog.jdf-text-entry-dialog::backdrop { background: rgba(0,0,0,0.35); }
+      .jdf-text-dialog-header {
+        background: #f0f2f5; padding: 14px 20px;
+        display: flex; align-items: center; justify-content: space-between;
+        border-bottom: 1px solid #ddd;
+      }
+      .jdf-text-dialog-title {
+        font-size: 15px; font-weight: 600; color: #333; margin: 0;
+        font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      }
+      .jdf-text-dialog-close {
+        flex-shrink: 0; width: 28px; height: 28px; border: none; background: transparent;
+        font-size: 20px; line-height: 1; cursor: pointer; color: #666;
+        border-radius: 4px; display: flex; align-items: center; justify-content: center;
+        padding: 0; font-family: inherit; margin-left: 8px;
+      }
+      .jdf-text-dialog-close:hover { background: #ddd; color: #333; }
+      .jdf-text-dialog-body { padding: 20px 20px 12px; }
+      .jdf-text-dialog-textarea {
+        width: 100%; min-height: 200px; max-height: 50vh;
+        padding: 10px 12px; font-size: 14px; font-family: inherit;
+        border: 1px solid #ddd; border-radius: 4px;
+        box-sizing: border-box; resize: vertical; line-height: 1.5;
+        color: #333; background: #fff;
+      }
+      .jdf-text-dialog-textarea:focus {
+        outline: none; border-color: #1976d2;
+        box-shadow: 0 0 0 2px rgba(25,118,210,0.2);
+      }
+      .jdf-text-dialog-char-count {
+        margin-top: 4px; font-size: 12px; color: #888; text-align: right;
+        font-family: inherit;
+      }
+      .jdf-text-dialog-actions {
+        display: flex; justify-content: flex-end; gap: 8px;
+        padding: 12px 20px 16px; border-top: 1px solid #eee;
+      }
+      .jdf-text-dialog-cancel {
+        padding: 7px 18px; border: 1px solid #ddd; border-radius: 4px;
+        background: transparent; color: #555; font-size: 14px;
+        cursor: pointer; font-family: inherit;
+      }
+      .jdf-text-dialog-cancel:hover { background: #f5f5f5; }
+      .jdf-text-dialog-save {
+        padding: 7px 18px; border: none; border-radius: 4px;
+        background: #1976d2; color: #fff; font-size: 14px;
+        cursor: pointer; font-family: inherit; font-weight: 500;
+      }
+      .jdf-text-dialog-save:hover { background: #1565c0; }
+    `;
+    document.head.appendChild(style);
+  }
+  _openTextDialog(currentValue, fieldLabel) {
+    var _a;
+    this._ensureTextDialogStyles();
+    (_a = document.getElementById("jdf-text-entry-dialog")) == null ? void 0 : _a.remove();
+    const dialog = document.createElement("dialog");
+    dialog.id = "jdf-text-entry-dialog";
+    dialog.className = "jdf-text-entry-dialog";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-labelledby", "jdf-text-dialog-title");
+    dialog.innerHTML = `
+      <div class="jdf-text-dialog-header">
+        <h3 class="jdf-text-dialog-title" id="jdf-text-dialog-title"></h3>
+        <button class="jdf-text-dialog-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div class="jdf-text-dialog-body">
+        <textarea class="jdf-text-dialog-textarea" spellcheck="true"></textarea>
+        <div class="jdf-text-dialog-char-count"></div>
+      </div>
+      <div class="jdf-text-dialog-actions">
+        <button class="jdf-text-dialog-cancel" type="button"></button>
+        <button class="jdf-text-dialog-save" type="button"></button>
+      </div>
+    `;
+    dialog.querySelector(".jdf-text-dialog-title").textContent = fieldLabel;
+    dialog.querySelector(".jdf-text-dialog-cancel").textContent = I18n.t("field.cancel");
+    dialog.querySelector(".jdf-text-dialog-save").textContent = I18n.t("field.save");
+    const textarea = dialog.querySelector(".jdf-text-dialog-textarea");
+    const charCount = dialog.querySelector(".jdf-text-dialog-char-count");
+    textarea.value = currentValue;
+    charCount.textContent = `${currentValue.length} ${I18n.t("field.characters")}`;
+    textarea.addEventListener("input", () => {
+      charCount.textContent = `${textarea.value.length} ${I18n.t("field.characters")}`;
+    });
+    dialog.querySelector(".jdf-text-dialog-close").addEventListener("click", () => dialog.close());
+    dialog.querySelector(".jdf-text-dialog-cancel").addEventListener("click", () => dialog.close());
+    dialog.querySelector(".jdf-text-dialog-save").addEventListener("click", () => {
+      const newValue = textarea.value;
+      const oldValue = this.value;
+      this.value = newValue;
+      this._touched = true;
+      this.dispatchEvent(new CustomEvent("field-change", {
+        detail: { fieldId: this.field.id, conceptId: this.conceptId, columnId: this.columnId, value: newValue, oldValue },
+        bubbles: true
+      }));
+      dialog.close();
+    });
+    dialog.addEventListener("click", (ev) => {
+      const rect = dialog.getBoundingClientRect();
+      if (ev.clientX < rect.left || ev.clientX > rect.right || ev.clientY < rect.top || ev.clientY > rect.bottom) {
+        dialog.close();
+      }
+    });
+    dialog.addEventListener("close", () => dialog.remove());
+    document.body.appendChild(dialog);
+    dialog.showModal();
+    textarea.focus();
+  }
+  _renderTextDialogTrigger(effectiveValue, effectiveDisabled) {
+    const hasValue = effectiveValue !== null && effectiveValue !== void 0 && String(effectiveValue).trim() !== "";
+    const displayText = hasValue ? String(effectiveValue) : "";
+    if (effectiveDisabled) {
+      return html`
+        <span class="text-readonly-label ${hasValue ? "" : "empty"}"
+          title="${displayText}">${hasValue ? displayText : "—"}</span>
+      `;
+    }
+    if (!hasValue) {
+      return html`
+        <button class="text-trigger-btn" type="button"
+          aria-label="${I18n.t("field.addText")}"
+          @click="${() => {
+        var _a;
+        return this._openTextDialog("", ((_a = this.field) == null ? void 0 : _a.label) || "");
+      }}">
+          + ${I18n.t("field.addText")}
+        </button>
+      `;
+    }
+    return html`
+      <div class="text-filled">
+        <span class="text-filled-label" title="${displayText}"
+          @click="${() => {
+      var _a;
+      return this._openTextDialog(displayText, ((_a = this.field) == null ? void 0 : _a.label) || "");
+    }}">
+          ${displayText}
+        </span>
+        <button class="text-edit-btn" type="button"
+          aria-label="${I18n.t("field.editText")}"
+          @click="${() => {
+      var _a;
+      return this._openTextDialog(displayText, ((_a = this.field) == null ? void 0 : _a.label) || "");
+    }}">
+          ✎ ${I18n.t("field.editText")}
+        </button>
+      </div>
+    `;
+  }
   _handlePeriodChange(event, type) {
     const target = event.target;
     const value = target.value;
@@ -3438,19 +3654,7 @@ let JupiterFormField = class extends LitElement {
       ;
     const effectiveFieldType = typeConfig.fieldType || this.field.type || "text";
     if (effectiveFieldType === "textarea" || isTextareaType(effectiveFieldType)) {
-      return html`
-        <textarea
-          id="${fieldId}"
-          name="${fieldName}"
-          class="${cssClass}"
-          .value="${effectiveValue || ""}"
-          ?disabled="${effectiveDisabled || this.field.disabled}"
-          placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
-          @input="${this._handleInput}"
-          @focus="${this._handleFocus}"
-          @blur="${this._handleBlur}"
-        ></textarea>
-      `;
+      return this._renderTextDialogTrigger(effectiveValue, effectiveDisabled || this.field.disabled || false);
     }
     if (effectiveFieldType === "select" || this.field.type === "select") {
       const selectOptions = typeConfig.enumerations || this.field.options || [];
@@ -3849,6 +4053,8 @@ JupiterFormField.styles = css`
     :host {
       display: block;
       margin-bottom: 0px; /* Remove bottom margin for table layout */
+      overflow: hidden;
+      min-width: 0;
     }
 
     :host([hideLabel]) {
@@ -3876,6 +4082,8 @@ JupiterFormField.styles = css`
       display: flex;
       align-items: center;
       gap: 8px;
+      min-width: 0;
+      overflow: hidden;
     }
 
     .period-icon-btn {
@@ -4194,6 +4402,89 @@ JupiterFormField.styles = css`
       outline: none;
       border-color: var(--jupiter-primary-color, #1976d2);
     }
+
+    /* Text dialog trigger — empty state */
+    .text-trigger-btn {
+      flex: 1;
+      min-width: 0;
+      padding: 5px 8px;
+      border: 1px dashed var(--jupiter-border-color, #bbb);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--jupiter-text-secondary, #888);
+      font-size: 12px;
+      cursor: pointer;
+      text-align: center;
+      font-family: inherit;
+      box-sizing: border-box;
+    }
+
+    .text-trigger-btn:hover {
+      border-color: var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      background: rgba(25, 118, 210, 0.04);
+    }
+
+    /* Text dialog trigger — filled state */
+    .text-filled {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    .text-filled-label {
+      flex: 1;
+      font-size: 13px;
+      color: var(--jupiter-text-primary, #333);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+      min-width: 0;
+    }
+
+    .text-filled-label:hover {
+      color: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .text-edit-btn {
+      flex-shrink: 0;
+      padding: 2px 7px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 3px;
+      background: transparent;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 11px;
+      cursor: pointer;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+
+    .text-edit-btn:hover {
+      border-color: var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      background: rgba(25, 118, 210, 0.04);
+    }
+
+    /* Read-only filled text (disabled/inputForm) */
+    .text-readonly-label {
+      display: block;
+      font-size: 13px;
+      color: var(--jupiter-text-primary, #333);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .text-readonly-label.empty {
+      color: var(--jupiter-text-secondary, #999);
+      font-style: italic;
+    }
   `;
 __decorateClass$6([
   n2({ type: Object })
@@ -4304,6 +4595,7 @@ let JupiterConceptTree = class extends LitElement {
     this.typedMemberData = {};
     this.showAddButton = false;
     this.showRemoveButton = false;
+    this.language = "en";
     this._expanded = true;
   }
   connectedCallback() {
@@ -4373,6 +4665,108 @@ let JupiterConceptTree = class extends LitElement {
     }));
     console.log(`🌲 [ConceptTree] Forwarded period-change event to form-section`);
   }
+  _getDocLabel() {
+    const meta = this.concept.conceptMetadata;
+    if (!meta)
+      return "";
+    const lang = this.language || this.locale.split("-")[0];
+    return meta.documentationLabels[lang] || meta.documentationLabels["en"] || meta.documentationLabels["nl"] || "";
+  }
+  _escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  _ensureDialogStyles() {
+    if (document.getElementById("jdf-concept-info-dialog-styles"))
+      return;
+    const style = document.createElement("style");
+    style.id = "jdf-concept-info-dialog-styles";
+    style.textContent = `
+      dialog.jdf-concept-info-dialog {
+        border: none; border-radius: 8px; padding: 0;
+        max-width: 480px; width: 90vw;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
+      }
+      dialog.jdf-concept-info-dialog::backdrop { background: rgba(0,0,0,0.35); }
+      .jdf-dialog-header {
+        background: #f0f2f5; padding: 14px 20px;
+        display: flex; align-items: center; justify-content: space-between;
+        border-bottom: 1px solid #ddd;
+      }
+      .jdf-dialog-title { font-size: 15px; font-weight: 600; color: #333; margin: 0; font-family: inherit; }
+      .jdf-dialog-close-btn {
+        width: 28px; height: 28px; border: none; background: transparent;
+        font-size: 20px; line-height: 1; cursor: pointer; color: #666;
+        border-radius: 4px; display: flex; align-items: center; justify-content: center;
+        padding: 0; font-family: inherit;
+      }
+      .jdf-dialog-close-btn:hover { background: #ddd; color: #333; }
+      .jdf-dialog-body { padding: 20px; }
+      .jdf-info-table { width: 100%; border-collapse: collapse; font-size: 14px; font-family: inherit; }
+      .jdf-info-table tr:not(:last-child) td { border-bottom: 1px solid #f0f0f0; }
+      .jdf-info-table td { padding: 9px 4px; vertical-align: top; }
+      .jdf-info-label { font-weight: 600; color: #666; width: 40%; white-space: nowrap; padding-right: 16px; }
+      .jdf-info-value { color: #333; word-break: break-all; }
+      .jdf-info-value.doc-text { font-style: italic; color: #555; line-height: 1.5; word-break: normal; }
+      .jdf-period-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
+      .jdf-period-pill.instant { background: rgba(25,118,210,0.1); color: #1565c0; border: 1px solid rgba(25,118,210,0.3); }
+      .jdf-period-pill.duration { background: rgba(56,142,60,0.1); color: #2e7d32; border: 1px solid rgba(56,142,60,0.3); }
+      .jdf-balance-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
+      .jdf-balance-pill.debit { background: rgba(211,47,47,0.1); color: #c62828; border: 1px solid rgba(211,47,47,0.3); }
+      .jdf-balance-pill.credit { background: rgba(56,142,60,0.1); color: #2e7d32; border: 1px solid rgba(56,142,60,0.3); }
+    `;
+    document.head.appendChild(style);
+  }
+  _openInfoDialog(e2) {
+    var _a;
+    e2.stopPropagation();
+    this._ensureDialogStyles();
+    const meta = this.concept.conceptMetadata;
+    const docLabel = this._getDocLabel();
+    const periodType = (meta == null ? void 0 : meta.periodType) || this.concept.periodType;
+    const balance = (meta == null ? void 0 : meta.balance) || this.concept.balance;
+    const periodLabel = periodType === "instant" ? I18n.t("conceptInfo.instant") : I18n.t("conceptInfo.duration");
+    const rows = [
+      { label: I18n.t("conceptInfo.conceptName"), valueHtml: this._escapeHtml((meta == null ? void 0 : meta.conceptName) || this.concept.name) },
+      { label: I18n.t("conceptInfo.type"), valueHtml: this._escapeHtml((meta == null ? void 0 : meta.type) || this.concept.type || "—") }
+    ];
+    if (meta == null ? void 0 : meta.substitutionGroup) {
+      rows.push({ label: I18n.t("conceptInfo.substitutionGroup"), valueHtml: this._escapeHtml(meta.substitutionGroup) });
+    }
+    rows.push({ label: I18n.t("conceptInfo.periodType"), valueHtml: `<span class="jdf-period-pill ${periodType}">${this._escapeHtml(periodLabel)}</span>` });
+    if (balance) {
+      rows.push({ label: I18n.t("conceptInfo.balance"), valueHtml: `<span class="jdf-balance-pill ${balance}">${this._escapeHtml(balance)}</span>` });
+    }
+    if (docLabel) {
+      rows.push({ label: I18n.t("conceptInfo.documentation"), valueHtml: this._escapeHtml(docLabel), isDoc: true });
+    }
+    const rowsHtml = rows.map((r2) => `
+      <tr>
+        <td class="jdf-info-label">${this._escapeHtml(r2.label)}</td>
+        <td class="jdf-info-value${r2.isDoc ? " doc-text" : ""}">${r2.valueHtml}</td>
+      </tr>
+    `).join("");
+    const dialog = document.createElement("dialog");
+    dialog.className = "jdf-concept-info-dialog";
+    dialog.innerHTML = `
+      <div class="jdf-dialog-header">
+        <h3 class="jdf-dialog-title">${this._escapeHtml(I18n.t("conceptInfo.title"))}</h3>
+        <button class="jdf-dialog-close-btn" type="button" aria-label="${this._escapeHtml(I18n.t("conceptInfo.close"))}">×</button>
+      </div>
+      <div class="jdf-dialog-body">
+        <table class="jdf-info-table">${rowsHtml}</table>
+      </div>
+    `;
+    document.body.appendChild(dialog);
+    (_a = dialog.querySelector(".jdf-dialog-close-btn")) == null ? void 0 : _a.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("click", (ev) => {
+      const rect = dialog.getBoundingClientRect();
+      if (ev.clientX < rect.left || ev.clientX > rect.right || ev.clientY < rect.top || ev.clientY > rect.bottom) {
+        dialog.close();
+      }
+    });
+    dialog.addEventListener("close", () => document.body.removeChild(dialog));
+    dialog.showModal();
+  }
   render() {
     const hasChildren = this.concept.children && this.concept.children.length > 0;
     const level = this.concept.level || 0;
@@ -4394,6 +4788,8 @@ let JupiterConceptTree = class extends LitElement {
           ${this.concept.balance ? html`
             <div class="concept-balance ${this.concept.balance}">${this.concept.balance}</div>
           ` : ""}
+          <button class="concept-info-btn" type="button" title="${I18n.t("conceptInfo.title")}"
+            @click="${this._openInfoDialog}">ℹ</button>
           ${this.showAddButton ? html`
             <button class="repeat-btn" type="button" title="Add row"
               @click="${this._handleAddRepeat}">+</button>
@@ -4445,6 +4841,7 @@ let JupiterConceptTree = class extends LitElement {
           </td>
         `;
     })}
+
     `;
   }
 };
@@ -4618,6 +5015,36 @@ JupiterConceptTree.styles = css`
       box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
     }
 
+    .concept-info-btn {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--jupiter-text-secondary, #888);
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.15s, background 0.15s, color 0.15s;
+      padding: 0;
+      margin-left: 4px;
+      line-height: 1;
+    }
+
+    .concept-content:hover .concept-info-btn {
+      opacity: 1;
+    }
+
+    .concept-info-btn:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: #fff;
+      border-color: var(--jupiter-primary-color, #1976d2);
+    }
+
   `;
 __decorateClass$5([
   n2({ type: Object })
@@ -4682,6 +5109,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "calculationErrorKeys", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "language", 2);
 __decorateClass$5([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -5351,6 +5781,7 @@ let JupiterFormSection = class extends LitElement {
     this.showFactsOnly = false;
     this.periodStartDate = "";
     this.periodEndDate = "";
+    this.language = "en";
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
@@ -5778,6 +6209,7 @@ let JupiterFormSection = class extends LitElement {
         .defaultUnits="${this.defaultUnits}"
         .disabled="${this.disabled}"
         .locale="${this.locale}"
+        .language="${this.language}"
         .expandedConcepts="${this._expandedConcepts}"
         .mode="${this.mode}"
         .masterData="${this.masterData}"
@@ -6046,6 +6478,7 @@ JupiterFormSection.styles = css`
 
     .form-table {
       width: 100%;
+      table-layout: fixed;
       border-collapse: separate;
       border-spacing: 0;
       background: var(--jupiter-table-background, #fff);
@@ -6295,6 +6728,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2({ type: String })
 ], JupiterFormSection.prototype, "periodEndDate", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterFormSection.prototype, "language", 2);
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_expanded", 2);
@@ -11721,6 +12157,7 @@ let JupiterDynamicForm = class extends LitElement {
             .disabled="${this.disabled || this.readonly}"
             .collapsible="${config.collapsibleSections !== false}"
             .locale="${config.locale || "en-US"}"
+            .language="${this.language}"
             .isFirstSection="${index === 0}"
             .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
             .mode="${this.mode}"
@@ -11865,6 +12302,7 @@ let JupiterDynamicForm = class extends LitElement {
                 .collapsible="${false}"
                 .hideHeader="${true}"
                 .locale="${config.locale || "en-US"}"
+                .language="${this.language}"
                 .isFirstSection="${true}"
                 .availableDimensions="${this._getAvailableDimensionsForSection(activeSection.id)}"
                 .mode="${this.mode}"