jupiter-dynamic-forms 1.9.10 → 1.10.1

package/dist/index.mjs

@@ -573,9 +573,9 @@ class XBRLFormBuilder {
       return a2.role.localeCompare(b2.role);
     });
     sortedRoles.forEach((role) => {
-      const section = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language, periodPreferences);
-      this.assignFieldColumnIds(section);
-      sections.push(section);
+      const section2 = this.buildSectionFromRole(role, periodStartDate, periodEndDate, hypercubeData, language, periodPreferences);
+      this.assignFieldColumnIds(section2);
+      sections.push(section2);
     });
     return {
       formId: `xbrl-form-${Date.now()}`,
@@ -789,12 +789,12 @@ class XBRLFormBuilder {
   /**
    * Assign appropriate column IDs to fields based on section's generated columns
    */
-  static assignFieldColumnIds(section) {
-    if (!section.columns || section.columns.length === 0) {
+  static assignFieldColumnIds(section2) {
+    if (!section2.columns || section2.columns.length === 0) {
       return;
     }
-    const columnIds = section.columns.map((col) => col.id);
-    section.concepts.forEach((conceptTree) => {
+    const columnIds = section2.columns.map((col) => col.id);
+    section2.concepts.forEach((conceptTree) => {
       this.assignColumnIdsToConceptFields(conceptTree, columnIds);
     });
   }
@@ -961,52 +961,52 @@ class XBRLFormBuilder {
     const previousYearColumns = [];
     const prevStartDate = this.getPreviousYearDate(periodStartDate);
     const prevEndDate = this.getPreviousYearDate(periodEndDate);
-    currentYearColumns.forEach((column, index) => {
-      let prevTitle = column.title;
+    currentYearColumns.forEach((column2, index) => {
+      let prevTitle = column2.title;
       let prevDescription = "";
       let prevId = "";
-      if (column.dimensionData) {
-        prevTitle = column.title;
-        if (column.description && column.description.includes("/")) {
+      if (column2.dimensionData) {
+        prevTitle = column2.title;
+        if (column2.description && column2.description.includes("/")) {
           prevDescription = `${prevStartDate} / ${prevEndDate}`;
         } else {
           prevDescription = prevEndDate;
         }
-        prevId = `${column.id}_prev`;
+        prevId = `${column2.id}_prev`;
       } else {
-        if (column.id === "instant" || column.id.includes("instant")) {
+        if (column2.id === "instant" || column2.id.includes("instant")) {
           prevTitle = prevEndDate;
           prevDescription = "";
           prevId = `instant_prev_${index}`;
-        } else if (column.id === "duration" || column.id.includes("duration")) {
+        } else if (column2.id === "duration" || column2.id.includes("duration")) {
           prevTitle = `${prevStartDate} / ${prevEndDate}`;
           prevDescription = "";
           prevId = `duration_prev_${index}`;
-        } else if (column.title.includes("/")) {
+        } else if (column2.title.includes("/")) {
           prevTitle = `${prevStartDate} / ${prevEndDate}`;
           prevDescription = "";
-          prevId = `${column.id}_prev`;
+          prevId = `${column2.id}_prev`;
         } else {
           prevTitle = prevEndDate;
           prevDescription = "";
-          prevId = `${column.id}_prev`;
+          prevId = `${column2.id}_prev`;
         }
       }
       previousYearColumns.push({
-        ...column,
+        ...column2,
         id: prevId,
         title: prevTitle,
         description: prevDescription,
-        order: column.order + 100,
+        order: column2.order + 100,
         // Place after current year columns
         removable: true,
         periodStartDate: prevStartDate,
         // Set previous year start date
         periodEndDate: prevEndDate,
         // Set previous year end date
-        dimensionData: column.dimensionData ? {
-          ...column.dimensionData,
-          dimensionId: `${column.dimensionData.dimensionId}_prev`
+        dimensionData: column2.dimensionData ? {
+          ...column2.dimensionData,
+          dimensionId: `${column2.dimensionData.dimensionId}_prev`
         } : void 0
       });
     });
@@ -1016,10 +1016,10 @@ class XBRLFormBuilder {
    * Filter columns based on user's period preferences
    */
   static filterColumnsByPeriodPreferences(columns, preferences) {
-    return columns.filter((column) => {
+    return columns.filter((column2) => {
       var _a, _b, _c, _d;
-      const isDuration = column.id.includes("duration") || ((_b = (_a = column.dimensionData) == null ? void 0 : _a.dimensionId) == null ? void 0 : _b.includes("duration"));
-      const isInstant = column.id.includes("instant") || ((_d = (_c = column.dimensionData) == null ? void 0 : _c.dimensionId) == null ? void 0 : _d.includes("instant"));
+      const isDuration = column2.id.includes("duration") || ((_b = (_a = column2.dimensionData) == null ? void 0 : _a.dimensionId) == null ? void 0 : _b.includes("duration"));
+      const isInstant = column2.id.includes("instant") || ((_d = (_c = column2.dimensionData) == null ? void 0 : _c.dimensionId) == null ? void 0 : _d.includes("instant"));
       if (!isDuration && !isInstant) {
         return true;
       }
@@ -1558,6 +1558,239 @@ class XBRLFormBuilder {
     }];
   }
 }
+const form$1 = {
+  loading: "Loading form...",
+  submit: "Submit",
+  saveDraft: "Save Draft",
+  errors: "Errors",
+  modified: "Modified",
+  valid: "Valid",
+  yes: "Yes",
+  no: "No",
+  noRoleSelected: "No Role Selected",
+  pleaseSelectRole: "Please select a role from the list on the left."
+};
+const filter$1 = {
+  selectRoles: "Select Roles",
+  filterRoles: "Filter Roles",
+  title: "Filter Roles",
+  description: "Select the roles you want to display in the form. You can search and choose specific roles to focus on or manage all available roles.",
+  searchPlaceholder: "Search roles by name, ID, or URI...",
+  clearSearch: "Clear search",
+  showingResults: "Showing",
+  of: "of",
+  roles: "roles",
+  matching: "matching",
+  selectAll: "Select All",
+  selectNone: "Select None",
+  selectFiltered: "Select Filtered",
+  deselectFiltered: "Deselect Filtered",
+  deselectAll: "Deselect All",
+  reset: "Reset",
+  noRolesFound: "No roles found matching",
+  tryDifferentSearch: "Try a different search term or clear the search.",
+  noRolesAvailable: "No roles available.",
+  cancel: "Cancel",
+  applyFilter: "Apply Filter",
+  showPeriodColumn: "Show Period Column:",
+  additionalOptions: "Additional Options:",
+  showPreviousYear: "Show previous year",
+  duration: "Duration",
+  instant: "Instant",
+  uri: "URI"
+};
+const column$1 = {
+  addColumn: "Add Column",
+  columnType: "Column Type",
+  instantSingleDate: "Instant (single date)",
+  durationDates: "Duration (start and end dates)",
+  instantDate: "Instant Date",
+  startPeriodDate: "Start Period Date",
+  endPeriodDate: "End Period Date",
+  availableDimensions: "Available Dimensions",
+  dimensionsDescription: "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.",
+  enterValue: "Enter value for",
+  enterValuePlaceholder: "Enter value...",
+  selectMember: "Select member:",
+  noMembersAvailable: "No members available for this dimension",
+  cancel: "Cancel",
+  removeColumn: "Remove column",
+  required: "required"
+};
+const section$1 = {
+  enterPlaceholder: "Enter"
+};
+const admin$1 = {
+  title: "Configure Roles",
+  description: "Select which roles should display the 'Show Previous Year' checkbox and configure period type columns."
+};
+const validation$1 = {
+  summary: "Please fix the following errors before submitting:",
+  errorsFound: "errors found"
+};
+const enTranslations = {
+  form: form$1,
+  filter: filter$1,
+  column: column$1,
+  section: section$1,
+  admin: admin$1,
+  validation: validation$1
+};
+const form = {
+  loading: "Formulier laden...",
+  submit: "Indienen",
+  saveDraft: "Concept opslaan",
+  errors: "Fouten",
+  modified: "Gewijzigd",
+  valid: "Geldig",
+  yes: "Ja",
+  no: "Nee",
+  noRoleSelected: "Geen rol geselecteerd",
+  pleaseSelectRole: "Selecteer een rol uit de lijst aan de linkerkant."
+};
+const filter = {
+  selectRoles: "Rollen selecteren",
+  filterRoles: "Rollen filteren",
+  title: "Rollen filteren",
+  description: "Selecteer de rollen die u in het formulier wilt weergeven. U kunt zoeken en specifieke rollen kiezen om op te focussen of alle beschikbare rollen beheren.",
+  searchPlaceholder: "Zoek rollen op naam, ID of URI...",
+  clearSearch: "Zoekopdracht wissen",
+  showingResults: "Weergeven",
+  of: "van",
+  roles: "rollen",
+  matching: "overeenkomend met",
+  selectAll: "Alles selecteren",
+  selectNone: "Niets selecteren",
+  selectFiltered: "Gefilterd selecteren",
+  deselectFiltered: "Gefilterd deselecteren",
+  deselectAll: "Alles deselecteren",
+  reset: "Resetten",
+  noRolesFound: "Geen rollen gevonden die overeenkomen met",
+  tryDifferentSearch: "Probeer een andere zoekterm of wis de zoekopdracht.",
+  noRolesAvailable: "Geen rollen beschikbaar.",
+  cancel: "Annuleren",
+  applyFilter: "Filter toepassen",
+  showPeriodColumn: "Periodekolom weergeven:",
+  additionalOptions: "Aanvullende opties:",
+  showPreviousYear: "Vorig jaar weergeven",
+  duration: "Duur",
+  instant: "Moment",
+  uri: "URI"
+};
+const column = {
+  addColumn: "Kolom toevoegen",
+  columnType: "Kolomtype",
+  instantSingleDate: "Moment (enkele datum)",
+  durationDates: "Duur (begin- en einddatum)",
+  instantDate: "Momentdatum",
+  startPeriodDate: "Startdatum periode",
+  endPeriodDate: "Einddatum periode",
+  availableDimensions: "Beschikbare dimensies",
+  dimensionsDescription: "Selecteer dimensies om in de kolom op te nemen. Domeinleden kunnen hier worden geselecteerd, terwijl getypte dimensiewaarden direct in de kolomkop worden ingevoerd.",
+  enterValue: "Voer waarde in voor",
+  enterValuePlaceholder: "Voer waarde in...",
+  selectMember: "Selecteer lid:",
+  noMembersAvailable: "Geen leden beschikbaar voor deze dimensie",
+  cancel: "Annuleren",
+  removeColumn: "Kolom verwijderen",
+  required: "verplicht"
+};
+const section = {
+  enterPlaceholder: "Invoeren"
+};
+const admin = {
+  title: "Rollen configureren",
+  description: "Selecteer welke rollen het selectievakje 'Vorig jaar weergeven' moeten weergeven en configureer periodetype kolommen."
+};
+const validation = {
+  summary: "Corrigeer de volgende fouten voordat u indient:",
+  errorsFound: "fouten gevonden"
+};
+const nlTranslations = {
+  form,
+  filter,
+  column,
+  section,
+  admin,
+  validation
+};
+const translations = {
+  en: enTranslations,
+  nl: nlTranslations
+};
+class I18n {
+  /**
+   * Set the current language
+   * @param language Language code ('en' or 'nl')
+   */
+  static setLanguage(language) {
+    if (translations[language]) {
+      this.currentLanguage = language;
+    } else {
+      console.warn(`Language '${language}' not supported, falling back to 'en'`);
+      this.currentLanguage = "en";
+    }
+  }
+  /**
+   * Get the current language
+   */
+  static getLanguage() {
+    return this.currentLanguage;
+  }
+  /**
+   * Translate a key to the current language
+   * @param key Translation key in dot notation (e.g., 'form.submit')
+   * @param params Optional parameters to replace in the translation
+   * @returns Translated string
+   */
+  static t(key, params) {
+    const keys = key.split(".");
+    let value = translations[this.currentLanguage];
+    for (const k of keys) {
+      if (value && typeof value === "object" && k in value) {
+        value = value[k];
+      } else {
+        console.warn(`Translation key '${key}' not found for language '${this.currentLanguage}'`);
+        return key;
+      }
+    }
+    if (params && typeof value === "string") {
+      return this.interpolate(value, params);
+    }
+    return value;
+  }
+  /**
+   * Interpolate parameters into a string
+   * Supports {{paramName}} syntax
+   */
+  static interpolate(str, params) {
+    return str.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+      return key in params ? String(params[key]) : match;
+    });
+  }
+  /**
+   * Check if a translation exists for a key
+   */
+  static has(key) {
+    const keys = key.split(".");
+    let value = translations[this.currentLanguage];
+    for (const k of keys) {
+      if (value && typeof value === "object" && k in value) {
+        value = value[k];
+      } else {
+        return false;
+      }
+    }
+    return value !== void 0;
+  }
+  /**
+   * Get all available languages
+   */
+  static getAvailableLanguages() {
+    return Object.keys(translations);
+  }
+}
+I18n.currentLanguage = "en";
 const TYPE_INPUT_MAP = {
   // ==========================================
   // Dutch XBRL Types (nl-types namespace)
@@ -2236,8 +2469,8 @@ let JupiterConceptTree = class extends LitElement {
       </td>
 
       <!-- Input Field Cells (Period Columns) - Only for non-abstract concepts -->
-      ${this.columns.map((column) => {
-      const field = this._getFieldForColumn(column.id);
+      ${this.columns.map((column2) => {
+      const field = this._getFieldForColumn(column2.id);
       const shouldShowField = !isAbstract && field;
       return html`
           <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""}">
@@ -2246,7 +2479,7 @@ let JupiterConceptTree = class extends LitElement {
                 .field="${field}"
                 .conceptId="${this.concept.id}"
                 .conceptType="${this.concept.type}"
-                .columnId="${column.id}"
+                .columnId="${column2.id}"
                 .value="${this._getFieldValue(field)}"
                 .disabled="${this.disabled}"
                 .locale="${this.locale}"
@@ -2551,29 +2784,29 @@ let JupiterAddColumnDialog = class extends LitElement {
     return html`
       <div class="dialog" @click="${(e2) => e2.stopPropagation()}">
         <div class="dialog-header">
-          <h2 class="dialog-title">Add Column</h2>
+          <h2 class="dialog-title">${I18n.t("column.addColumn")}</h2>
 
         </div>
 
         <div class="dialog-content">
           ${this.periodType === "mixed" ? html`
             <div class="form-group">
-              <label class="form-label required">Column Type</label>
+              <label class="form-label required">${I18n.t("column.columnType")}</label>
               <select 
                 class="form-input"
                 .value="${this._selectedType}"
                 @change="${this._handleSelectedTypeChange}"
                 required
               >
-                <option value="instant">Instant (single date)</option>
-                <option value="duration">Duration (start and end dates)</option>
+                <option value="instant">${I18n.t("column.instantSingleDate")}</option>
+                <option value="duration">${I18n.t("column.durationDates")}</option>
               </select>
             </div>
           ` : ""}
 
           ${this.periodType === "instant" || this.periodType === "mixed" && this._selectedType === "instant" ? html`
             <div class="form-group">
-              <label class="form-label required">Instant Date</label>
+              <label class="form-label required">${I18n.t("column.instantDate")}</label>
               <input 
                 type="date" 
                 class="form-input"
@@ -2585,7 +2818,7 @@ let JupiterAddColumnDialog = class extends LitElement {
           ` : html`
             <div class="form-group date-row">
               <div class="date-field">
-                <label class="form-label required">Start Period Date</label>
+                <label class="form-label required">${I18n.t("column.startPeriodDate")}</label>
                 <input 
                   type="date" 
                   class="form-input"
@@ -2595,7 +2828,7 @@ let JupiterAddColumnDialog = class extends LitElement {
                 />
               </div>
               <div class="date-field">
-                <label class="form-label required">End Period Date</label>
+                <label class="form-label required">${I18n.t("column.endPeriodDate")}</label>
                 <input 
                   type="date" 
                   class="form-input"
@@ -2610,8 +2843,8 @@ let JupiterAddColumnDialog = class extends LitElement {
           <!-- 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. Domain members can be selected here, while typed dimension values will be entered directly in the column header.</p>
+              <h3>${I18n.t("column.availableDimensions")}</h3>
+              <p class="form-description">${I18n.t("column.dimensionsDescription")}</p>
               
               ${this.availableDimensions.map((dimension) => {
       const isSelected = this._selectedDimensions.has(dimension.id);
@@ -2637,20 +2870,20 @@ let JupiterAddColumnDialog = class extends LitElement {
                         ${isTypedDimension ? html`
                           <!-- Typed Dimension Input -->
                           <div class="member-selection">
-                            <label>Enter value for ${dimension.conceptName}:</label>
+                            <label>${I18n.t("column.enterValue")} ${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..."
+                              placeholder="${I18n.t("column.enterValuePlaceholder")}"
                             />
                           </div>
                         ` : html`
                           <!-- Domain Members Selection -->
                           ${dimension.members && dimension.members.length > 0 ? html`
                             <div class="member-selection">
-                              <label>Select member:</label>
+                              <label>${I18n.t("column.selectMember")}</label>
                               <div class="member-list">
                                 ${dimension.members.map((member) => html`
                                   <div class="member-option">
@@ -2669,7 +2902,7 @@ let JupiterAddColumnDialog = class extends LitElement {
                               </div>
                             </div>
                           ` : html`
-                            <p class="form-description">No members available for this dimension</p>
+                            <p class="form-description">${I18n.t("column.noMembersAvailable")}</p>
                           `}
                         `}
                       </div>
@@ -2683,14 +2916,14 @@ let JupiterAddColumnDialog = class extends LitElement {
 
         <div class="dialog-actions">
           <button class="btn btn-cancel" @click="${this._handleCancel}">
-            Cancel
+            ${I18n.t("column.cancel")}
           </button>
           <button 
             class="btn btn-primary" 
             ?disabled="${!isValid}"
             @click="${this._handleConfirm}"
           >
-            Add Column
+            ${I18n.t("column.addColumn")}
           </button>
         </div>
       </div>
@@ -3254,41 +3487,41 @@ let JupiterFormSection = class extends LitElement {
             <thead class="table-header">
               <tr class="header-row">
                 <th class="header-cell concept-column"></th>
-                ${this.columns.map((column) => {
+                ${this.columns.map((column2) => {
       var _a, _b, _c;
       return html`
-                  <th class="header-cell ${column.removable ? "removable" : ""}">
+                  <th class="header-cell ${column2.removable ? "removable" : ""}">
                     <div class="column-header-content">
                       <div class="column-title">
-                        ${column.title}
-                        ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
+                        ${column2.title}
+                        ${column2.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column2.description}</div>` : ""}
                       </div>
                       
                       <!-- Typed member input fields in column header -->
-                      ${((_a = column.dimensionData) == null ? void 0 : _a.hasTypedMembers) ? html`
+                      ${((_a = column2.dimensionData) == null ? void 0 : _a.hasTypedMembers) ? html`
                         <div class="typed-members-header">
-                          ${(_c = (_b = column.dimensionData) == null ? void 0 : _b.typedMembers) == null ? void 0 : _c.map((typedMember) => html`
+                          ${(_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="Enter ${typedMember.axisLabel}"
-                                .value="${this._getTypedMemberHeaderValue(column.id, typedMember.axisId)}"
-                                @input="${(e2) => this._handleTypedMemberHeaderChange(e2, column.id, typedMember.axisId)}"
+                                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>
                       ` : ""}
                       
-                      ${column.removable ? html`
+                      ${column2.removable ? html`
                         <button 
                           class="remove-column-btn"
                           @click="${(e2) => {
         e2.stopPropagation();
-        this._handleRemoveColumn(column.id);
+        this._handleRemoveColumn(column2.id);
       }}"
-                          title="Remove column"
+                          title="${I18n.t("column.removeColumn")}"
                         >×</button>
                       ` : ""}
                     </div>
@@ -3299,8 +3532,8 @@ let JupiterFormSection = class extends LitElement {
                   <button class="add-column-btn" @click="${(e2) => {
       e2.stopPropagation();
       this._handleAddColumn();
-    }}" title="Add Column">
-                    + Add Column
+    }}" title="${I18n.t("column.addColumn")}">
+                    + ${I18n.t("column.addColumn")}
                   </button>
                 </th>
               </tr>
@@ -3850,15 +4083,14 @@ let JupiterFilterRolesDialog = class extends LitElement {
           <svg class="filter-icon" viewBox="0 0 24 24">
             <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
           </svg>
-          <h2 class="dialog-title">Filter Roles</h2>
+          <h2 class="dialog-title">${I18n.t("filter.title")}</h2>
           <button class="close-button" @click="${this._handleCancel}">×</button>
         </div>
 
         <!-- Dialog Content -->
         <div class="dialog-content">
           <p class="description">
-            Select the roles you want to display in the form. You can search and choose specific roles 
-            to focus on or manage all ${totalCount} available roles.
+            ${I18n.t("filter.description")}
           </p>
 
           <!-- Search Input -->
@@ -3866,12 +4098,12 @@ let JupiterFilterRolesDialog = class extends LitElement {
             <input
               type="text"
               class="search-input"
-              placeholder="Search roles by name, ID, or URI..."
+              placeholder="${I18n.t("filter.searchPlaceholder")}"
               .value="${this._searchQuery}"
               @input="${this._handleSearchInput}"
             />
             ${this._searchQuery ? html`
-              <button class="clear-search" @click="${this._clearSearch}" title="Clear search">
+              <button class="clear-search" @click="${this._clearSearch}" title="${I18n.t("filter.clearSearch")}">
                 ×
               </button>
             ` : html`
@@ -3884,8 +4116,8 @@ let JupiterFilterRolesDialog = class extends LitElement {
           <!-- Search Results Info -->
           ${hasSearchQuery ? html`
             <div class="search-results-info">
-              Showing ${filteredCount} of ${totalCount} roles
-              ${filteredCount !== totalCount ? html`matching "${this._searchQuery}"` : ""}
+              ${I18n.t("filter.showingResults")} ${filteredCount} ${I18n.t("filter.of")} ${totalCount} ${I18n.t("filter.roles")}
+              ${filteredCount !== totalCount ? html`${I18n.t("filter.matching")} "${this._searchQuery}"` : ""}
             </div>
           ` : ""}
 
@@ -3893,27 +4125,27 @@ let JupiterFilterRolesDialog = class extends LitElement {
           <div class="selection-controls">
             ${hasSearchQuery ? html`
               <button class="selection-control" @click="${this._selectAll}">
-                Select Filtered (${filteredCount})
+                ${I18n.t("filter.selectFiltered")} (${filteredCount})
               </button>
               <button class="selection-control" @click="${this._selectNone}">
-                Deselect Filtered
+                ${I18n.t("filter.deselectFiltered")}
               </button>
               <button class="selection-control" @click="${this._selectAllGlobal}">
-                Select All (${totalCount})
+                ${I18n.t("filter.selectAll")} (${totalCount})
               </button>
               <button class="selection-control" @click="${this._selectNoneGlobal}">
-                Deselect All
+                ${I18n.t("filter.deselectAll")}
               </button>
             ` : html`
               <button class="selection-control" @click="${this._selectAll}">
-                Select All
+                ${I18n.t("filter.selectAll")}
               </button>
               <button class="selection-control" @click="${this._selectNone}">
-                Select None
+                ${I18n.t("filter.selectNone")}
               </button>
             `}
             <button class="selection-control" @click="${this._resetToOriginal}">
-              Reset
+              ${I18n.t("filter.reset")}
             </button>
           </div>
 
@@ -3922,10 +4154,10 @@ let JupiterFilterRolesDialog = class extends LitElement {
             ${this._filteredRoles.length === 0 ? html`
               <div class="no-results">
                 ${hasSearchQuery ? html`
-                  No roles found matching "${this._searchQuery}".<br>
-                  Try a different search term or clear the search.
+                  ${I18n.t("filter.noRolesFound")} "${this._searchQuery}".<br>
+                  ${I18n.t("filter.tryDifferentSearch")}
                 ` : html`
-                  No roles available.
+                  ${I18n.t("filter.noRolesAvailable")}
                 `}
               </div>
             ` : html`
@@ -3945,12 +4177,12 @@ let JupiterFilterRolesDialog = class extends LitElement {
                     <div class="role-info">
                       <h4 class="role-title">${role.title}</h4>
                       ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
-                        <p class="role-description">URI: ${role.metadata.roleURI}</p>
+                        <p class="role-description">${I18n.t("filter.uri")}: ${role.metadata.roleURI}</p>
                       ` : ""}
                       
                       ${showPeriodControls ? html`
                         <div class="period-controls">
-                          <p class="period-controls-label">Show Period Column:</p>
+                          <p class="period-controls-label">${I18n.t("filter.showPeriodColumn")}</p>
                           <div class="period-checkboxes">
                             <label class="period-checkbox-item">
                               <input
@@ -3959,7 +4191,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
                                 .checked="${preferences.showDuration}"
                                 @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "duration")}"
                               />
-                              <span class="period-checkbox-label">Duration</span>
+                              <span class="period-checkbox-label">${I18n.t("filter.duration")}</span>
                             </label>
                             <label class="period-checkbox-item">
                               <input
@@ -3968,14 +4200,14 @@ let JupiterFilterRolesDialog = class extends LitElement {
                                 .checked="${preferences.showInstant}"
                                 @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "instant")}"
                               />
-                              <span class="period-checkbox-label">Instant</span>
+                              <span class="period-checkbox-label">${I18n.t("filter.instant")}</span>
                             </label>
                           </div>
                         </div>
                       ` : ""}
                       
                       <div class="period-controls">
-                        <p class="period-controls-label">Additional Options:</p>
+                        <p class="period-controls-label">${I18n.t("filter.additionalOptions")}</p>
                         <div class="period-checkboxes">
                           <label class="period-checkbox-item">
                             <input
@@ -3984,7 +4216,7 @@ let JupiterFilterRolesDialog = class extends LitElement {
                               .checked="${preferences.showPreviousYear}"
                               @change="${(e2) => this._handlePeriodCheckboxChange(e2, role.id, "previousYear")}"
                             />
-                            <span class="period-checkbox-label">Show previous year</span>
+                            <span class="period-checkbox-label">${I18n.t("filter.showPreviousYear")}</span>
                           </label>
                         </div>
                       </div>
@@ -4001,14 +4233,14 @@ let JupiterFilterRolesDialog = class extends LitElement {
         <!-- Dialog Actions -->
         <div class="dialog-actions">
           <button class="btn-secondary" @click="${this._handleCancel}">
-            Cancel
+            ${I18n.t("filter.cancel")}
           </button>
           <button 
             class="btn-primary" 
             @click="${this._handleApply}"
             ?disabled="${selectedCount === 0}"
           >
-            Apply Filter (${selectedCount})
+            ${I18n.t("filter.applyFilter")} (${selectedCount})
           </button>
         </div>
       </div>
@@ -4414,6 +4646,9 @@ let JupiterDynamicForm = class extends LitElement {
     this._initializeForm();
   }
   updated(changedProperties) {
+    if (changedProperties.has("language")) {
+      I18n.setLanguage(this.language);
+    }
     if (changedProperties.has("financialStatementsTypeAxis")) {
       console.log("🔄 financialStatementsTypeAxis changed:", this.financialStatementsTypeAxis);
     }
@@ -4446,7 +4681,7 @@ let JupiterDynamicForm = class extends LitElement {
           console.log("📊 Sections after filter:", this._allSections.length);
         }
         if (this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = this._allSections.map((section) => section.id);
+          this._selectedRoleIds = this._allSections.map((section2) => section2.id);
           console.log("✅ Auto-selected all roles:", this._selectedRoleIds.length);
         }
         this._applyRoleFilter();
@@ -4470,7 +4705,7 @@ let JupiterDynamicForm = class extends LitElement {
     } else if (this.schema) {
       this._currentSchema = this.schema;
       this._allSections = [...this.schema.sections];
-      this._selectedRoleIds = this._allSections.map((section) => section.id);
+      this._selectedRoleIds = this._allSections.map((section2) => section2.id);
       this._columns = this._getDefaultColumns();
     } else {
       this._currentSchema = this._getDefaultSchema();
@@ -4545,7 +4780,7 @@ let JupiterDynamicForm = class extends LitElement {
     }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
-      (section) => this._selectedRoleIds.includes(section.id)
+      (section2) => this._selectedRoleIds.includes(section2.id)
     );
     console.log(`📊 Filtered sections: ${filteredSections.length} (IDs: ${filteredSections.map((s2) => s2.id).join(", ")})`);
     this._restoreDataForVisibleSections(filteredSections);
@@ -4574,11 +4809,11 @@ let JupiterDynamicForm = class extends LitElement {
     const hypercubeData = this.xbrlInput.hypercubes[0];
     const financialStatementsAxisId = "bw2-titel9_FinancialStatementsTypeAxis";
     console.log("🔍 Filter values:", this.financialStatementsTypeAxis);
-    return sections.filter((section) => {
+    return sections.filter((section2) => {
       var _a2;
-      const hypercubeRole = (_a2 = hypercubeData.roles) == null ? void 0 : _a2.find((r2) => r2.roleId === section.id);
+      const hypercubeRole = (_a2 = hypercubeData.roles) == null ? void 0 : _a2.find((r2) => r2.roleId === section2.id);
       if (!hypercubeRole || !hypercubeRole.items || hypercubeRole.items.length === 0) {
-        console.log(`✅ ${section.title}: No hypercube entry - INCLUDED`);
+        console.log(`✅ ${section2.title}: No hypercube entry - INCLUDED`);
         return true;
       }
       let hasFinancialStatementsAxis = false;
@@ -4630,20 +4865,20 @@ let JupiterDynamicForm = class extends LitElement {
       (sectionId) => !this._selectedRoleIds.includes(sectionId)
     );
     sectionsThatWillBeHidden.forEach((sectionId) => {
-      const section = this._allSections.find((s2) => s2.id === sectionId);
-      if (section) {
-        this._preserveSectionData(section);
+      const section2 = this._allSections.find((s2) => s2.id === sectionId);
+      if (section2) {
+        this._preserveSectionData(section2);
       }
     });
   }
   _restoreDataForVisibleSections(visibleSections) {
-    visibleSections.forEach((section) => {
-      this._restoreSectionData(section);
+    visibleSections.forEach((section2) => {
+      this._restoreSectionData(section2);
     });
     console.log(`🔄 Restored data for ${visibleSections.length} visible sections`);
   }
-  _preserveSectionData(section) {
-    section.concepts.forEach((concept) => {
+  _preserveSectionData(section2) {
+    section2.concepts.forEach((concept) => {
       this._preserveConceptData(concept);
     });
   }
@@ -4662,8 +4897,8 @@ let JupiterDynamicForm = class extends LitElement {
       });
     }
   }
-  _restoreSectionData(section) {
-    section.concepts.forEach((concept) => {
+  _restoreSectionData(section2) {
+    section2.concepts.forEach((concept) => {
       this._restoreConceptData(concept);
     });
   }
@@ -4721,8 +4956,8 @@ let JupiterDynamicForm = class extends LitElement {
     const schema = this._currentSchema;
     if (!schema)
       return;
-    for (const section of schema.sections) {
-      for (const concept of section.concepts) {
+    for (const section2 of schema.sections) {
+      for (const concept of section2.concepts) {
         for (const field of concept.fields) {
           const value = (_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId];
           const fieldErrors = FormValidator.validateField(
@@ -4802,16 +5037,16 @@ let JupiterDynamicForm = class extends LitElement {
   _handleColumnRemove(event) {
     const { columnId, sectionId } = event.detail;
     if (this._currentSchema && sectionId) {
-      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      const targetSection = this._currentSchema.sections.find((section2) => section2.id === sectionId);
       if (targetSection && targetSection.columns) {
         targetSection.columns = targetSection.columns.filter((col) => col.id !== columnId);
       }
     } else {
       this._columns = this._columns.filter((col) => col.id !== columnId);
       if (this._currentSchema) {
-        this._currentSchema.sections.forEach((section) => {
-          if (section.columns) {
-            section.columns = section.columns.filter((col) => col.id !== columnId);
+        this._currentSchema.sections.forEach((section2) => {
+          if (section2.columns) {
+            section2.columns = section2.columns.filter((col) => col.id !== columnId);
           }
         });
       }
@@ -4981,7 +5216,7 @@ let JupiterDynamicForm = class extends LitElement {
       }
     }
     if (this._currentSchema) {
-      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      const targetSection = this._currentSchema.sections.find((section2) => section2.id === sectionId);
       if (targetSection) {
         if (!targetSection.columns) {
           targetSection.columns = [...this._columns];
@@ -5001,7 +5236,7 @@ let JupiterDynamicForm = class extends LitElement {
     if (!this._currentSchema)
       return;
     if (sectionId) {
-      const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+      const targetSection = this._currentSchema.sections.find((section2) => section2.id === sectionId);
       if (targetSection) {
         this._removeColumnDataFromConcepts(targetSection.concepts, columnId);
       }
@@ -5044,7 +5279,7 @@ let JupiterDynamicForm = class extends LitElement {
     if (!this._currentSchema)
       return;
     const formBuilder = new XBRLFormBuilder();
-    const targetSection = this._currentSchema.sections.find((section) => section.id === sectionId);
+    const targetSection = this._currentSchema.sections.find((section2) => section2.id === sectionId);
     if (targetSection) {
       this._replicateFieldsForSection(targetSection.concepts, columnId, request, formBuilder);
     }
@@ -5158,8 +5393,8 @@ let JupiterDynamicForm = class extends LitElement {
     if (!this._currentSchema) {
       return submissionData;
     }
-    this._currentSchema.sections.forEach((section) => {
-      this._processConceptsForSubmission(section.concepts, submissionData, section);
+    this._currentSchema.sections.forEach((section2) => {
+      this._processConceptsForSubmission(section2.concepts, submissionData, section2);
     });
     this._includePreservedDataInSubmission(submissionData);
     const uniqueSubmissionData = this._removeDuplicateSubmissions(submissionData);
@@ -5184,8 +5419,8 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`📤 Included preserved data in submission. Total entries: ${submissionData.length}`);
   }
   _findConceptInAllSections(conceptId) {
-    for (const section of this._allSections) {
-      const concept = this._findConceptInSection(section.concepts, conceptId);
+    for (const section2 of this._allSections) {
+      const concept = this._findConceptInSection(section2.concepts, conceptId);
       if (concept) {
         return concept;
       }
@@ -5207,45 +5442,45 @@ let JupiterDynamicForm = class extends LitElement {
     return null;
   }
   _findSectionForConcept(conceptId) {
-    for (const section of this._allSections) {
-      const concept = this._findConceptInSection(section.concepts, conceptId);
+    for (const section2 of this._allSections) {
+      const concept = this._findConceptInSection(section2.concepts, conceptId);
       if (concept) {
-        return section;
+        return section2;
       }
     }
     return null;
   }
-  _addConceptDataToSubmission(concept, columnId, value, submissionData, section) {
+  _addConceptDataToSubmission(concept, columnId, value, submissionData, section2) {
     var _a;
     const field = concept.fields.find((f2) => f2.columnId === columnId);
     if (!field)
       return;
     const isInstant = concept.periodType === "instant";
-    const column = this._findColumnByIdInAllSections(columnId);
+    const column2 = this._findColumnByIdInAllSections(columnId);
     alert("hi");
-    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Column Period: ${(column == null ? void 0 : column.periodStartDate) || "none"} - ${(column == null ? void 0 : column.periodEndDate) || "none"}`);
+    console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${columnId}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}`);
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
       value,
       period: {
         type: concept.periodType || "duration",
-        ...isInstant ? { date: (column == null ? void 0 : column.periodEndDate) || field.periodStartDate || this.periodStartDate } : {
-          startDate: (column == null ? void 0 : column.periodStartDate) || field.periodStartDate || this.periodStartDate,
-          endDate: (column == null ? void 0 : column.periodEndDate) || field.periodEndDate || this.periodEndDate
+        ...isInstant ? { date: (column2 == null ? void 0 : column2.periodEndDate) || field.periodStartDate || this.periodStartDate } : {
+          startDate: (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate,
+          endDate: (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate
         }
       }
     };
-    if ((_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.memberLabel) {
-      entry.dimension = column.dimensionData.memberLabel;
+    if ((_a = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _a.memberLabel) {
+      entry.dimension = column2.dimensionData.memberLabel;
     }
     submissionData.push(entry);
   }
   _findColumnByIdInAllSections(columnId) {
-    for (const section of this._allSections) {
-      if (section.columns) {
-        const column = section.columns.find((col) => col.id === columnId);
-        if (column) {
-          return column;
+    for (const section2 of this._allSections) {
+      if (section2.columns) {
+        const column2 = section2.columns.find((col) => col.id === columnId);
+        if (column2) {
+          return column2;
         }
       }
     }
@@ -5266,28 +5501,28 @@ let JupiterDynamicForm = class extends LitElement {
     if (!this._currentSchema) {
       return void 0;
     }
-    for (const section of this._currentSchema.sections) {
-      if (section.columns) {
-        const column = section.columns.find((col) => col.id === columnId);
-        if (column) {
-          return column;
+    for (const section2 of this._currentSchema.sections) {
+      if (section2.columns) {
+        const column2 = section2.columns.find((col) => col.id === columnId);
+        if (column2) {
+          return column2;
         }
       }
     }
     return void 0;
   }
-  _findColumnByIdInSection(columnId, section) {
-    if (!(section == null ? void 0 : section.columns)) {
+  _findColumnByIdInSection(columnId, section2) {
+    if (!(section2 == null ? void 0 : section2.columns)) {
       return void 0;
     }
-    return section.columns.find((col) => col.id === columnId);
+    return section2.columns.find((col) => col.id === columnId);
   }
-  _getTypedMemberNameForAxis(axisId, section) {
+  _getTypedMemberNameForAxis(axisId, section2) {
     var _a, _b, _c, _d;
     if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
       return null;
     }
-    const sectionRoleId = section == null ? void 0 : section.id;
+    const sectionRoleId = section2 == null ? void 0 : section2.id;
     if (!sectionRoleId) {
       return null;
     }
@@ -5306,12 +5541,12 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return null;
   }
-  _doesConceptApplyToTypedDimension(concept, section, columnId) {
+  _doesConceptApplyToTypedDimension(concept, section2, columnId) {
     var _a, _b, _c;
     if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
       return false;
     }
-    const sectionRoleId = section == null ? void 0 : section.id;
+    const sectionRoleId = section2 == null ? void 0 : section2.id;
     if (!sectionRoleId) {
       return false;
     }
@@ -5333,12 +5568,12 @@ let JupiterDynamicForm = class extends LitElement {
   /**
    * Get the specific typed dimensions that apply to a concept in its role
    */
-  _getApplicableTypedDimensions(concept, section) {
+  _getApplicableTypedDimensions(concept, section2) {
     var _a, _b, _c;
-    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) || !(section == null ? void 0 : section.id)) {
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) || !(section2 == null ? void 0 : section2.id)) {
       return [];
     }
-    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === section.id);
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === section2.id);
     if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
       return [];
     }
@@ -5352,9 +5587,9 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return [];
   }
-  _processConceptsForSubmission(concepts, submissionData, section) {
+  _processConceptsForSubmission(concepts, submissionData, section2) {
     const targetRole = "Toelichting op de geconsolideerde jaarrekening - Financiële vaste activa: Deelnemingen: Volledig geconsolideerd: Specificatie";
-    const sectionTitle = (section == null ? void 0 : section.title) || "Unknown";
+    const sectionTitle = (section2 == null ? void 0 : section2.title) || "Unknown";
     concepts.forEach((concept) => {
       if (sectionTitle === targetRole) {
         console.warn(`[DUPLICATE DEBUG] Processing concept ${concept.originalConceptId || concept.id} in target role`);
@@ -5376,7 +5611,7 @@ let JupiterDynamicForm = class extends LitElement {
           const conceptData = this._formData[concept.id];
           const fieldValue = conceptData == null ? void 0 : conceptData[field.columnId];
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
-            const column = this._findColumnByIdInSection(field.columnId, section);
+            const column2 = this._findColumnByIdInSection(field.columnId, section2);
             const submissionEntry = {
               conceptId: concept.id,
               value: fieldValue,
@@ -5385,27 +5620,27 @@ let JupiterDynamicForm = class extends LitElement {
               }
             };
             if (concept.periodType === "instant") {
-              submissionEntry.period.date = (column == null ? void 0 : column.periodEndDate) || field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.date = (column2 == null ? void 0 : column2.periodEndDate) || field.periodStartDate || this.periodStartDate;
             } else {
-              submissionEntry.period.startDate = (column == null ? void 0 : column.periodStartDate) || field.periodStartDate || this.periodStartDate;
-              submissionEntry.period.endDate = (column == null ? void 0 : column.periodEndDate) || field.periodEndDate || this.periodEndDate;
+              submissionEntry.period.startDate = (column2 == null ? void 0 : column2.periodStartDate) || field.periodStartDate || this.periodStartDate;
+              submissionEntry.period.endDate = (column2 == null ? void 0 : column2.periodEndDate) || field.periodEndDate || this.periodEndDate;
             }
-            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Column Period: ${(column == null ? void 0 : column.periodStartDate) || "none"} - ${(column == null ? void 0 : column.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
-            if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
-              submissionEntry.dimension = column.dimensionData.dimensionIdKey;
-              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column.dimensionData.dimensionIdKey);
+            console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field.columnId}, Column Period: ${(column2 == null ? void 0 : column2.periodStartDate) || "none"} - ${(column2 == null ? void 0 : column2.periodEndDate) || "none"}, Used Period: ${submissionEntry.period.type === "instant" ? submissionEntry.period.date : `${submissionEntry.period.startDate} - ${submissionEntry.period.endDate}`}`);
+            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_a = column2.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
+              submissionEntry.dimension = column2.dimensionData.dimensionIdKey;
+              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column2.dimensionData.dimensionIdKey);
             } else {
-              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field.columnId}. Column type: ${column == null ? void 0 : column.type}, has dimensionData: ${!!(column == null ? void 0 : column.dimensionData)}`);
+              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field.columnId}. Column type: ${column2 == null ? void 0 : column2.type}, has dimensionData: ${!!(column2 == null ? void 0 : column2.dimensionData)}`);
             }
             if (this._typedMemberData[field.columnId]) {
-              const applicableTypedDimensions = this._getApplicableTypedDimensions(concept, section);
+              const applicableTypedDimensions = this._getApplicableTypedDimensions(concept, section2);
               console.log(`🔍 [DynamicForm] Concept ${concept.id} applicable typed dimensions:`, applicableTypedDimensions);
               if (applicableTypedDimensions.length > 0) {
                 const filteredTypedMembers = {};
                 const allTypedMemberData = this._typedMemberData[field.columnId];
                 applicableTypedDimensions.forEach((dimensionId) => {
                   if (allTypedMemberData[dimensionId]) {
-                    const memberName = this._getTypedMemberNameForAxis(dimensionId, section);
+                    const memberName = this._getTypedMemberNameForAxis(dimensionId, section2);
                     filteredTypedMembers[dimensionId] = {
                       value: allTypedMemberData[dimensionId],
                       memberName: memberName || "Unknown"
@@ -5423,12 +5658,12 @@ let JupiterDynamicForm = class extends LitElement {
               }
             } else {
               console.log(`🔍 [DynamicForm] No typed member data found for column ${field.columnId}. Available columns:`, Object.keys(this._typedMemberData));
-              if (column) {
+              if (column2) {
                 console.log(`🔍 [DynamicForm] Column details:`, {
-                  id: column.id,
-                  type: column.type,
-                  hasTypedMembers: (_b = column.dimensionData) == null ? void 0 : _b.hasTypedMembers,
-                  dimensionData: column.dimensionData
+                  id: column2.id,
+                  type: column2.type,
+                  hasTypedMembers: (_b = column2.dimensionData) == null ? void 0 : _b.hasTypedMembers,
+                  dimensionData: column2.dimensionData
                 });
               }
             }
@@ -5440,7 +5675,7 @@ let JupiterDynamicForm = class extends LitElement {
         });
       }
       if (concept.children) {
-        this._processConceptsForSubmission(concept.children, submissionData, section);
+        this._processConceptsForSubmission(concept.children, submissionData, section2);
       }
     });
   }
@@ -5472,32 +5707,32 @@ let JupiterDynamicForm = class extends LitElement {
   _handleSidePanelRoleClick(roleId) {
     this._activeSidePanelRoleId = roleId;
   }
-  _renderAdminModeContent(section) {
+  _renderAdminModeContent(section2) {
     var _a, _b, _c;
-    if (!section) {
+    if (!section2) {
       return html`
         <div class="admin-mode-container">
           <p>No role selected</p>
         </div>
       `;
     }
-    const showPreviousYearChecked = ((_a = this._adminRoleConfigs[section.id]) == null ? void 0 : _a.showPreviousYear) ?? section.showPreviousYear ?? false;
-    const instantChecked = ((_b = this._adminRoleConfigs[section.id]) == null ? void 0 : _b.instant) ?? section.instant ?? false;
-    const durationChecked = ((_c = this._adminRoleConfigs[section.id]) == null ? void 0 : _c.duration) ?? section.duration ?? false;
-    const hasMixedPeriodTypes = section.showPeriodControl === true;
+    const showPreviousYearChecked = ((_a = this._adminRoleConfigs[section2.id]) == null ? void 0 : _a.showPreviousYear) ?? section2.showPreviousYear ?? false;
+    const instantChecked = ((_b = this._adminRoleConfigs[section2.id]) == null ? void 0 : _b.instant) ?? section2.instant ?? false;
+    const durationChecked = ((_c = this._adminRoleConfigs[section2.id]) == null ? void 0 : _c.duration) ?? section2.duration ?? false;
+    const hasMixedPeriodTypes = section2.showPeriodControl === true;
     return html`
       <div class="admin-mode-container">
-        <h2 class="admin-mode-title">Role Configuration: ${section.title}</h2>
+        <h2 class="admin-mode-title">Role Configuration: ${section2.title}</h2>
         <div class="admin-roles-list">
           <div class="admin-role-item">
             <div class="admin-role-checkbox">
               <input
                 type="checkbox"
-                id="admin-prev-year-${section.id}"
+                id="admin-prev-year-${section2.id}"
                 .checked="${showPreviousYearChecked}"
-                @change="${(e2) => this._handleAdminCheckboxChange(section.id, "showPreviousYear", e2.target.checked)}"
+                @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "showPreviousYear", e2.target.checked)}"
               />
-              <label for="admin-prev-year-${section.id}">Show Previous Year Column</label>
+              <label for="admin-prev-year-${section2.id}">Show Previous Year Column</label>
             </div>
           </div>
           
@@ -5506,11 +5741,11 @@ let JupiterDynamicForm = class extends LitElement {
               <div class="admin-role-checkbox">
                 <input
                   type="checkbox"
-                  id="admin-instant-${section.id}"
+                  id="admin-instant-${section2.id}"
                   .checked="${instantChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section.id, "instant", e2.target.checked)}"
+                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "instant", e2.target.checked)}"
                 />
-                <label for="admin-instant-${section.id}">Show Instant Column</label>
+                <label for="admin-instant-${section2.id}">Show Instant Column</label>
               </div>
             </div>
             
@@ -5518,11 +5753,11 @@ let JupiterDynamicForm = class extends LitElement {
               <div class="admin-role-checkbox">
                 <input
                   type="checkbox"
-                  id="admin-duration-${section.id}"
+                  id="admin-duration-${section2.id}"
                   .checked="${durationChecked}"
-                  @change="${(e2) => this._handleAdminCheckboxChange(section.id, "duration", e2.target.checked)}"
+                  @change="${(e2) => this._handleAdminCheckboxChange(section2.id, "duration", e2.target.checked)}"
                 />
-                <label for="admin-duration-${section.id}">Show Duration Column</label>
+                <label for="admin-duration-${section2.id}">Show Duration Column</label>
               </div>
             </div>
           ` : ""}
@@ -5584,7 +5819,7 @@ let JupiterDynamicForm = class extends LitElement {
         <!-- Validation Summary -->
         ${showValidationSummary ? html`
           <div class="validation-summary">
-            <h4 class="validation-summary-title">Please fix the following errors:</h4>
+            <h4 class="validation-summary-title">${I18n.t("validation.summary")}</h4>
             <ul class="validation-summary-list">
               ${this._errors.filter((e2) => e2.severity === "error").map((error) => html`
                   <li class="validation-summary-item">${error.message}</li>
@@ -5594,27 +5829,27 @@ let JupiterDynamicForm = class extends LitElement {
         ` : ""}
 
         <!-- Form Sections or No Selection Message (hidden in admin mode) -->
-        ${this.mode === "admin" ? schema.sections.map((section, index) => html`
+        ${this.mode === "admin" ? schema.sections.map((section2, index) => html`
           <div class="admin-mode-placeholder">
-            ${this._renderAdminModeContent(section)}
+            ${this._renderAdminModeContent(section2)}
           </div>
         `) : schema.sections.length === 0 ? html`
           <div class="no-roles-message">
-            <h3>No Roles Selected</h3>
-            <p>Please use the "Filter Roles" button below to select which sections you want to work with.</p>
-            <p>Available roles: ${this._allSections.length}</p>
+            <h3>${I18n.t("form.noRoleSelected")}</h3>
+            <p>${I18n.t("filter.selectRoles")}</p>
+            <p>${I18n.t("filter.roles")}: ${this._allSections.length}</p>
           </div>
-        ` : schema.sections.map((section, index) => html`
+        ` : schema.sections.map((section2, index) => html`
           <jupiter-form-section
-            .section="${section}"
-            .columns="${section.columns || this._columns}"
+            .section="${section2}"
+            .columns="${section2.columns || this._columns}"
             .formData="${this._formData}"
             .typedMemberData="${this._typedMemberData}"
             .disabled="${this.disabled || this.readonly}"
             .collapsible="${config.collapsibleSections !== false}"
             .locale="${config.locale || "en-US"}"
             .isFirstSection="${index === 0}"
-            .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
+            .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
             @field-change="${this._handleFieldChange}"
             @typed-member-change="${this._handleTypedMemberChange}"
             @section-expand="${this._handleSectionExpand}"
@@ -5636,12 +5871,12 @@ let JupiterDynamicForm = class extends LitElement {
       <div class="side-panel-layout">
         <!-- Left: Roles List (filtered) -->
         <div class="side-panel-roles-list">
-          ${visibleSections.map((section) => html`
+          ${visibleSections.map((section2) => html`
             <div 
-              class="side-panel-role-item ${section.id === this._activeSidePanelRoleId ? "active" : ""}"
-              @click="${() => this._handleSidePanelRoleClick(section.id)}"
+              class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""}"
+              @click="${() => this._handleSidePanelRoleClick(section2.id)}"
             >
-              ${section.title}
+              ${section2.title}
             </div>
           `)}
         </div>
@@ -5687,8 +5922,8 @@ let JupiterDynamicForm = class extends LitElement {
               ></jupiter-form-section>
             ` : html`
               <div class="no-roles-message">
-                <h3>No Role Selected</h3>
-                <p>Please select a role from the list on the left.</p>
+                <h3>${I18n.t("form.noRoleSelected")}</h3>
+                <p>${I18n.t("form.pleaseSelectRole")}</p>
               </div>
             `}
           </div>
@@ -5722,7 +5957,7 @@ let JupiterDynamicForm = class extends LitElement {
     const showValidationSummary = config.showValidationSummary !== false && errorCount > 0 && this._submitted;
     const schema = this._currentSchema;
     if (!schema) {
-      return html`<div>Loading form...</div>`;
+      return html`<div>${I18n.t("form.loading")}</div>`;
     }
     return html`
       <div class="form-container">
@@ -5751,7 +5986,7 @@ let JupiterDynamicForm = class extends LitElement {
               <svg class="filter-icon" viewBox="0 0 24 24">
                 <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
               </svg>
-              ${this._selectedRoleIds.length === 0 ? "Select Roles" : "Filter Roles"}
+              ${this._selectedRoleIds.length === 0 ? I18n.t("filter.selectRoles") : I18n.t("filter.filterRoles")}
               <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
             </button>
           ` : ""}
@@ -5761,7 +5996,7 @@ let JupiterDynamicForm = class extends LitElement {
             @click="${this._handleSaveDraft}"
             ?disabled="${this.disabled || this.readonly}"
           >
-            Save Draft
+            ${I18n.t("form.saveDraft")}
           </button>
           
           <button 
@@ -5769,13 +6004,13 @@ let JupiterDynamicForm = class extends LitElement {
             @click="${this._handleSubmit}"
             ?disabled="${this.disabled || this.readonly}"
           >
-            Submit
+            ${I18n.t("form.submit")}
           </button>
 
           <div class="form-meta">
-            <span>Errors: ${errorCount}</span>
-            <span>Modified: ${this._dirty ? "Yes" : "No"}</span>
-            <span>Valid: ${this._valid ? "Yes" : "No"}</span>
+            <span>${I18n.t("form.errors")}: ${errorCount}</span>
+            <span>${I18n.t("form.modified")}: ${this._dirty ? I18n.t("form.yes") : I18n.t("form.no")}</span>
+            <span>${I18n.t("form.valid")}: ${this._valid ? I18n.t("form.yes") : I18n.t("form.no")}</span>
           </div>
         </div>