jupiter-dynamic-forms 1.17.9 → 1.18.1

package/dist/index.mjs

@@ -674,7 +674,7 @@ class XBRLFormBuilder {
    */
   static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo, sectionId, language = "en", conceptIdOccurrences, ancestorPeriodHint) {
     var _a, _b;
-    const label = this.getPreferredLabel(concept.labels, language);
+    const label = this.getPreferredLabel(concept.labels, language, concept.preferredLabel);
     const childPeriodHint = ((_a = concept.preferredLabel) == null ? void 0 : _a.includes("periodStartLabel")) ? "start" : ((_b = concept.preferredLabel) == null ? void 0 : _b.includes("periodEndLabel")) ? "end" : ancestorPeriodHint;
     const fields = [];
     if (!concept.elementAbstract) {
@@ -689,7 +689,7 @@ class XBRLFormBuilder {
         const column2 = (_a2 = roleInfo == null ? void 0 : roleInfo.availableColumns) == null ? void 0 : _a2.find((c2) => c2.id === columnId);
         const colStartDate = (column2 == null ? void 0 : column2.periodStartDate) || periodStartDate;
         const colEndDate = (column2 == null ? void 0 : column2.periodEndDate) || periodEndDate;
-        const field2 = this.createFieldFromConcept(concept, colStartDate, colEndDate, columnId, ancestorPeriodHint);
+        const field2 = this.createFieldFromConcept(concept, colStartDate, colEndDate, columnId, ancestorPeriodHint, language);
         if (field2)
           fields.push(field2);
       });
@@ -751,10 +751,10 @@ class XBRLFormBuilder {
   /**
    * Create form field from XBRL concept
    */
-  static createFieldFromConcept(concept, periodStartDate, periodEndDate, forcedColumnId, ancestorPeriodHint) {
+  static createFieldFromConcept(concept, periodStartDate, periodEndDate, forcedColumnId, ancestorPeriodHint, language = "en") {
     var _a;
     const fieldType = this.mapXBRLTypeToFieldType(concept.type);
-    const label = this.getPreferredLabel(concept.labels);
+    const label = this.getPreferredLabel(concept.labels, language, concept.preferredLabel);
     let columnId;
     if (forcedColumnId) {
       columnId = forcedColumnId;
@@ -806,11 +806,19 @@ class XBRLFormBuilder {
    * @param labels - Array of XBRL labels
    * @param language - ISO language code (e.g., 'en', 'nl', 'de')
    */
-  static getPreferredLabel(labels, language = "en") {
+  static getPreferredLabel(labels, language = "en", preferredRole) {
     if (!labels || labels.length === 0)
       return "Unnamed Concept";
     const languageLabels = labels.filter((l2) => l2.lang === language);
     const labelsToSearch = languageLabels.length > 0 ? languageLabels : labels;
+    if (preferredRole) {
+      const roleSpecificInLanguage = languageLabels.find((l2) => l2.role === preferredRole);
+      if (roleSpecificInLanguage)
+        return roleSpecificInLanguage.label;
+      const roleSpecificAnyLanguage = labels.find((l2) => l2.role === preferredRole);
+      if (roleSpecificAnyLanguage)
+        return roleSpecificAnyLanguage.label;
+    }
     const preferred = labelsToSearch.find((l2) => l2.preferredLabel);
     if (preferred)
       return preferred.label;
@@ -1635,6 +1643,7 @@ const conceptInfo$1 = {
   close: "Close"
 };
 const form$1 = {
+  markAsComplete: "Mark as Complete",
   loading: "Loading form...",
   submit: "Validate",
   save: "Save",
@@ -1807,6 +1816,7 @@ const conceptInfo = {
   close: "Sluiten"
 };
 const form = {
+  markAsComplete: "Markeren als volledig behandeld",
   loading: "Formulier laden...",
   submit: "Valideren",
   save: "Opslaan",
@@ -3090,6 +3100,7 @@ let JupiterFormField = class extends LitElement {
     this._touched = false;
     this._showPeriodPopup = false;
     this._availableUnits = [];
+    this._numericDraftValue = null;
   }
   willUpdate(changedProperties) {
     var _a;
@@ -3131,13 +3142,33 @@ let JupiterFormField = class extends LitElement {
   _isRoundingLevelConcept() {
     return !!this.conceptId && this.conceptId.includes("DocumentIntendedRoundingLevel");
   }
+  _isNumericField() {
+    var _a;
+    const typeConfig = getInputTypeForConceptType(this.conceptType, this.datatypes);
+    const effectiveFieldType = typeConfig.fieldType || ((_a = this.field) == null ? void 0 : _a.type) || "text";
+    return isNumericType(effectiveFieldType) || this._getInputType() === "number";
+  }
+  _isIntermediateNumericValue(raw) {
+    return raw === "-" || raw === "." || raw === "-.";
+  }
   _handleInput(event) {
     const target = event.target;
+    const oldValue = this.value;
     let value = target.value;
-    if (this.field.type === "number" || this.field.type === "decimal") {
-      value = value === "" ? null : Number(value);
+    if (this._isNumericField()) {
+      const rawValue = target.value;
+      this._numericDraftValue = rawValue;
+      if (rawValue === "" || this._isIntermediateNumericValue(rawValue)) {
+        value = null;
+      } else {
+        const parsed = Number(rawValue);
+        value = Number.isNaN(parsed) ? null : parsed;
+      }
     } else if (this.field.type === "boolean") {
       value = target.checked;
+      this._numericDraftValue = null;
+    } else {
+      this._numericDraftValue = null;
     }
     this.value = value;
     this._touched = true;
@@ -3147,7 +3178,7 @@ let JupiterFormField = class extends LitElement {
         conceptId: this.conceptId,
         columnId: this.columnId,
         value,
-        oldValue: this.value
+        oldValue
       },
       bubbles: true
     }));
@@ -3163,6 +3194,16 @@ let JupiterFormField = class extends LitElement {
     }));
   }
   _handleBlur() {
+    if (this._isNumericField() && this._numericDraftValue !== null) {
+      const raw = this._numericDraftValue;
+      if (raw === "" || this._isIntermediateNumericValue(raw)) {
+        this.value = null;
+      } else {
+        const parsed = Number(raw);
+        this.value = Number.isNaN(parsed) ? null : parsed;
+      }
+      this._numericDraftValue = null;
+    }
     this._touched = true;
     this._validateXBRLDatatype();
     this._validateUnitSelection();
@@ -3225,7 +3266,7 @@ let JupiterFormField = class extends LitElement {
     if (event.ctrlKey || event.metaKey) {
       return;
     }
-    if (event.key === "-" && target.selectionStart === 0 && !target.value.includes("-")) {
+    if (event.key === "-" && !target.value.includes("-") && (target.selectionStart === 0 || target.selectionStart === null || target.value.length === 0)) {
       return;
     }
     if (event.key === "." && !target.value.includes(".")) {
@@ -3495,7 +3536,8 @@ let JupiterFormField = class extends LitElement {
         <button class="jdf-text-dialog-save" type="button"></button>
       </div>
     `;
-    dialog.querySelector(".jdf-text-dialog-title").textContent = fieldLabel;
+    const cleanTitle = fieldLabel;
+    dialog.querySelector(".jdf-text-dialog-title").textContent = cleanTitle || 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");
@@ -3663,7 +3705,7 @@ let JupiterFormField = class extends LitElement {
           id="${fieldId}"
           name="${fieldName}"
           class="${cssClass}"
-          .value="${effectiveValue || ""}"
+          .value="${effectiveValue ?? ""}"
           ?disabled="${effectiveDisabled || this.field.disabled}"
           @change="${this._handleInput}"
           @focus="${this._handleFocus}"
@@ -3709,13 +3751,14 @@ let JupiterFormField = class extends LitElement {
     const step = typeConfig.step !== void 0 ? typeConfig.step : isNumericType(effectiveFieldType) ? "any" : void 0;
     const min = typeConfig.min;
     const max = typeConfig.max;
+    const renderedInputValue = this._isNumericField() && this._numericDraftValue !== null ? this._numericDraftValue : effectiveValue ?? "";
     return html`
       <input
         id="${fieldId}"
         name="${fieldName}"
         type="${inputType}"
         class="${cssClass}"
-        .value="${effectiveValue || ""}"
+        .value="${renderedInputValue}"
         ?disabled="${effectiveDisabled || this.field.disabled}"
         placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
         step="${step !== void 0 ? step : ""}"
@@ -4564,6 +4607,9 @@ __decorateClass$6([
 __decorateClass$6([
   r()
 ], JupiterFormField.prototype, "_availableUnits", 2);
+__decorateClass$6([
+  r()
+], JupiterFormField.prototype, "_numericDraftValue", 2);
 JupiterFormField = __decorateClass$6([
   t$1("jupiter-form-field")
 ], JupiterFormField);
@@ -5017,25 +5063,30 @@ JupiterConceptTree.styles = css`
 
     .concept-info-btn {
       flex-shrink: 0;
-      width: 18px;
-      height: 18px;
+      width: 22px;
+      height: 22px;
       border-radius: 50%;
-      border: 1px solid transparent;
-      background: transparent;
-      color: var(--jupiter-text-secondary, #888);
-      font-size: 12px;
+      border: 1px solid var(--jupiter-border-color, #cfd8dc);
+      background: var(--jupiter-card-background, #fff);
+      color: var(--jupiter-primary-color, #1976d2);
+      font-size: 13px;
+      font-weight: 700;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
-      transition: opacity 0.15s, background 0.15s, color 0.15s;
+      transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
       padding: 0;
       margin-left: 4px;
       line-height: 1;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+      pointer-events: auto;
     }
 
-    .concept-content:hover .concept-info-btn {
+    .concept-content:hover .concept-info-btn,
+    .concept-info-btn:hover,
+    .concept-info-btn:focus-visible {
       opacity: 1;
     }
 
@@ -5043,6 +5094,14 @@ JupiterConceptTree.styles = css`
       background: var(--jupiter-primary-color, #1976d2);
       color: #fff;
       border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);
+    }
+
+    .concept-info-btn:focus-visible {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.25);
+      opacity: 1;
     }
 
   `;
@@ -6639,6 +6698,7 @@ JupiterFormSection.styles = css`
       border-radius: 3px;
       font-size: 12px;
       background: var(--jupiter-input-background, #fff);
+      color:#000;
     }
 
     .typed-member-header-field:focus {
@@ -10912,7 +10972,7 @@ let JupiterDynamicForm = class extends LitElement {
             if (concept.abstract)
               return;
             const isCustomColumn = column2.id.startsWith("col-");
-            const isDimensionColumn = column2.id.startsWith("duration_") || column2.id.startsWith("instant_");
+            const isDimensionColumn = column2.id.startsWith("duration_") || column2.id.startsWith("instant_") || column2.id.startsWith("typed-");
             const isMixedSection = section2.showPeriodControl === true;
             const shouldSkipPeriodCheck = !columnPeriodType || column2.id === "duration" || column2.id === "default" || isCustomColumn && isMixedSection || isDimensionColumn;
             if (!shouldSkipPeriodCheck && conceptPeriodType && columnPeriodType) {
@@ -12327,7 +12387,7 @@ let JupiterDynamicForm = class extends LitElement {
                   .checked="${this._roleCompletedStates.get(activeSection.id) === true}"
                   @change="${(e2) => this._handleRoleCompletedChange(activeSection.id, e2.target.checked)}"
                 >
-                <label for="role-complete-${activeSection.id}">Mark as completed</label>
+                <label for="role-complete-${activeSection.id}">${I18n.t("form.markAsComplete")}</label>
               </div>
             ` : html`
               <div class="no-roles-message">
@@ -12947,35 +13007,35 @@ JupiterDynamicForm.styles = css`
     }
 
     .side-panel-role-item.has-errors {
-      border-left: 2px solid var(--jupiter-error-color, #d32f2f);
+      border-left: 4px solid var(--jupiter-error-color, #d32f2f);
     }
 
     .side-panel-role-item.has-errors.active {
-      border-left: 2px solid var(--jupiter-error-color, #d32f2f);
+      border-left: 4px solid var(--jupiter-error-color, #d32f2f);
     }
 
     .side-panel-role-item.has-no-data {
-      border-left: 2px solid var(--jupiter-untouched-color, #757575);
+      border-left: 4px solid var(--jupiter-untouched-color, #757575);
     }
 
     .side-panel-role-item.has-no-data.active {
-      border-left: 2px solid var(--jupiter-untouched-color, #757575);
+      border-left: 4px solid var(--jupiter-untouched-color, #757575);
     }
 
     .side-panel-role-item.has-empty-fields {
-      border-left: 2px solid var(--jupiter-warning-color, #ff9800);
+      border-left: 4px solid var(--jupiter-warning-color, #ff9800);
     }
 
     .side-panel-role-item.has-empty-fields.active {
-      border-left: 2px solid var(--jupiter-warning-color, #ff9800);
+      border-left: 4px solid var(--jupiter-warning-color, #ff9800);
     }
 
     .side-panel-role-item.has-complete-data {
-      border-left: 2px solid var(--jupiter-success-color, #4caf50);
+      border-left: 4px solid var(--jupiter-success-color, #4caf50);
     }
 
     .side-panel-role-item.has-complete-data.active {
-      border-left: 2px solid var(--jupiter-success-color, #4caf50);
+      border-left: 4px solid var(--jupiter-success-color, #4caf50);
     }
 
     .role-completion-row {