jupiter-dynamic-forms 1.18.5 → 1.18.7

package/dist/index.mjs

@@ -1711,7 +1711,9 @@ const filter$1 = {
   showFactsOnlyDescription: "Hide all blank rows and sections. Only roles and rows with at least one filled value will be shown.",
   searchByConcept: "Search by concept",
   searchByConceptDescription: "Type concept name or label to filter roles and rows. Press Apply Filter to apply.",
-  searchByConceptPlaceholder: "Type concept name or label and press Apply Filter..."
+  searchByConceptPlaceholder: "Type concept name or label and press Apply Filter...",
+  clearFilters: "Clear Filters",
+  resetFilter: "Reset"
 };
 const column$1 = {
   addColumn: "Add Column",
@@ -1884,7 +1886,9 @@ const filter = {
   showFactsOnlyDescription: "Verberg alle lege rijen en secties. Alleen rollen en rijen met minimaal één ingevulde waarde worden weergegeven.",
   searchByConcept: "Zoeken op concept",
   searchByConceptDescription: "Typ een conceptnaam of label om rollen en rijen te filteren. Druk op Filter toepassen om te activeren.",
-  searchByConceptPlaceholder: "Typ conceptnaam of label en druk op Filter toepassen..."
+  searchByConceptPlaceholder: "Typ conceptnaam of label en druk op Filter toepassen...",
+  clearFilters: "Filters wissen",
+  resetFilter: "Resetten"
 };
 const column = {
   addColumn: "Kolom toevoegen",
@@ -3052,6 +3056,16 @@ function determineInputTypeFromBaseChain(baseTypeChain, datatypes) {
       placeholder: I18n.t("field.enterWholeNumber")
     };
   }
+  if (chainLower.some((type) => type.includes("percent") || type.includes("pure"))) {
+    return {
+      fieldType: "percentage",
+      htmlInputType: "text",
+      inputMode: "decimal",
+      allowDecimals: true,
+      step: 0.01,
+      placeholder: I18n.t("field.enterPercentage")
+    };
+  }
   if (chainLower.some((type) => type.includes("decimal") || type === "decimal")) {
     if (chainString.includes("monetary") || chainString.includes("currency")) {
       if (chainString.includes("nodecimals") || chainString.includes("no-decimals") || chainString.includes("nodecimals20")) {
@@ -3226,6 +3240,17 @@ let JupiterFormField = class extends LitElement {
       }
       this._numericDraftValue = null;
     }
+    if (this._isPercentItemType() && this.value !== null && this.value !== void 0) {
+      const numVal = Number(this.value);
+      if (!isNaN(numVal) && Math.abs(numVal) >= 1) {
+        this.value = numVal / 100;
+        const oldValue = numVal;
+        this.dispatchEvent(new CustomEvent("field-change", {
+          detail: { fieldId: this.field.id, conceptId: this.conceptId, columnId: this.columnId, value: this.value, oldValue },
+          bubbles: true
+        }));
+      }
+    }
     this._touched = true;
     this._validateXBRLDatatype();
     this._validateUnitSelection();
@@ -3260,6 +3285,16 @@ let JupiterFormField = class extends LitElement {
       (type) => type.includes("monetary") || type.includes("Monetary")
     );
   }
+  _isPercentItemType() {
+    if (!this.conceptType)
+      return false;
+    if (this.conceptType.toLowerCase().includes("percent"))
+      return true;
+    if (!this.datatypes)
+      return false;
+    const baseTypeChain = resolveBaseTypeChain(this.conceptType, this.datatypes);
+    return baseTypeChain.some((type) => type.toLowerCase().includes("percent"));
+  }
   /**
    * Prevents non-numeric input in number fields for Firefox compatibility
    * Firefox allows typing any character in type="number" inputs
@@ -3775,7 +3810,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 ?? "";
+    let renderedInputValue;
+    if (this._isNumericField() && this._numericDraftValue !== null) {
+      renderedInputValue = this._numericDraftValue;
+    } else if (effectiveFieldType === "percentage" && effectiveValue !== null && effectiveValue !== void 0 && effectiveValue !== "") {
+      renderedInputValue = Number(effectiveValue).toFixed(4);
+    } else {
+      renderedInputValue = effectiveValue ?? "";
+    }
     return html`
       <input
         id="${fieldId}"
@@ -3969,7 +4011,7 @@ let JupiterFormField = class extends LitElement {
               </div>
             ` : ""}
 
-            ${this._isMonetaryType() ? html`
+            ${this._isMonetaryType() || this._isPercentItemType() ? html`
               <div class="period-controls">
                 <label>${I18n.t("field.scale")}:</label>
                 <input
@@ -3977,7 +4019,7 @@ let JupiterFormField = class extends LitElement {
                   min="0"
                   class="typed-member-input"
                   placeholder="Leave blank for INF"
-                  .value="${this.decimals !== void 0 && this.decimals !== null && this.decimals !== "" ? this.decimals : this.globalDecimals !== "INF" ? this.globalDecimals : ""}"
+                  .value="${this.decimals !== void 0 && this.decimals !== null && this.decimals !== "" ? this.decimals : this._isPercentItemType() ? "4" : this.globalDecimals !== "INF" ? this.globalDecimals : ""}"
                   @input="${this._handleDecimalsChange}"
                   ?disabled="${this.disabled}"
                 />
@@ -6886,8 +6928,11 @@ let JupiterAdvancedFilter = class extends LitElement {
       composed: true
     }));
   }
+  _sanitizeSearchText(text) {
+    return text.replace(/[''‚‛′‵]/g, "'").replace(/[""„‟″‶]/g, '"').replace(/[​‌‍­]/g, "").replace(/\s+/g, " ").trim();
+  }
   _handleConceptSearchInput(e2) {
-    this._localConceptSearchText = e2.target.value;
+    this._localConceptSearchText = this._sanitizeSearchText(e2.target.value);
     this.dispatchEvent(new CustomEvent("filter-change", {
       detail: { showFactsOnly: this.showFactsOnly, conceptSearchText: this._localConceptSearchText },
       bubbles: true,
@@ -7632,6 +7677,14 @@ let JupiterFilterRolesDialog = class extends LitElement {
       bubbles: true
     }));
   }
+  _handleAdvancedFilterReset() {
+    this._showFactsOnly = false;
+    this._conceptSearchText = "";
+    this.dispatchEvent(new CustomEvent("advanced-filter-apply", {
+      detail: { showFactsOnly: false, conceptSearchText: "" },
+      bubbles: true
+    }));
+  }
   _handleBackdropClick(event) {
     if (event.target === this) {
       this._handleCancel();
@@ -8113,6 +8166,11 @@ let JupiterFilterRolesDialog = class extends LitElement {
               <button class="btn-text" @click="${this._switchToFilterRoles}">
                 ${I18n.t("filter.backToFilterRoles")}
               </button>
+              ${this._showFactsOnly || this._conceptSearchText.trim().length > 0 ? html`
+                <button class="btn-text" @click="${this._handleAdvancedFilterReset}">
+                  ${I18n.t("filter.resetFilter")}
+                </button>
+              ` : ""}
             ` : html`
               <button class="btn-text" @click="${this._switchToAdvancedFilter}">
                 ${I18n.t("filter.advancedFilter")}
@@ -9516,6 +9574,13 @@ let JupiterDynamicForm = class extends LitElement {
   _shouldShowFilterButton() {
     return true;
   }
+  get _hasActiveAdvancedFilters() {
+    return this._showFactsOnly || this._conceptSearchText.trim().length > 0;
+  }
+  _handleClearAdvancedFilters() {
+    this._showFactsOnly = false;
+    this._conceptSearchText = "";
+  }
   _handleFilterRolesClick() {
     this._showFilterDialog = true;
   }
@@ -11241,7 +11306,7 @@ let JupiterDynamicForm = class extends LitElement {
     return null;
   }
   _addConceptDataToSubmission(concept, columnId, value, submissionData, section2) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const field2 = concept.fields.find((f2) => f2.columnId === columnId);
     if (!field2)
       return;
@@ -11253,6 +11318,12 @@ let JupiterDynamicForm = class extends LitElement {
     const periodStartDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.startDate) || (column2 == null ? void 0 : column2.periodStartDate) || field2.periodStartDate || this.periodStartDate;
     const periodEndDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.endDate) || (column2 == null ? void 0 : column2.periodEndDate) || field2.periodEndDate || this.periodEndDate;
     const periodInstantDate = (fieldPeriodData == null ? void 0 : fieldPeriodData.instantDate) || field2.periodInstantDate || periodEndDate || periodStartDate;
+    if ((_c = concept.type) == null ? void 0 : _c.toLowerCase().includes("percentitemtype")) {
+      const numericValue = Number(value);
+      if (!isNaN(numericValue) && Math.abs(numericValue) >= 1) {
+        value = numericValue / 100;
+      }
+    }
     const entry = {
       conceptId: concept.originalConceptId || concept.id,
       columnId,
@@ -11269,14 +11340,16 @@ let JupiterDynamicForm = class extends LitElement {
       entry.unit = fieldUnit;
       console.log(`✅ [Submission] Adding unit to entry: ${fieldUnit} for ${concept.id}/${columnId}`);
     }
-    const isMonetary = (_c = concept.type) == null ? void 0 : _c.toLowerCase().includes("monetary");
-    const fieldDecimals = (_d = this._decimalsData[concept.id]) == null ? void 0 : _d[columnId];
-    const decimalsValue = fieldDecimals || (this.decimals !== "INF" ? this.decimals : void 0);
-    if (isMonetary && decimalsValue) {
+    const isMonetary = (_d = concept.type) == null ? void 0 : _d.toLowerCase().includes("monetary");
+    const isPercent = (_e = concept.type) == null ? void 0 : _e.toLowerCase().includes("percentitemtype");
+    const fieldDecimals = (_f = this._decimalsData[concept.id]) == null ? void 0 : _f[columnId];
+    const globalFallback = isPercent ? "4" : this.decimals !== "INF" ? this.decimals : void 0;
+    const decimalsValue = fieldDecimals || globalFallback;
+    if ((isMonetary || isPercent) && decimalsValue) {
       const parsed = parseFloat(decimalsValue);
       entry.decimals = isNaN(parsed) ? decimalsValue : String(-Math.abs(parsed));
     }
-    if ((_e = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _e.memberLabel) {
+    if ((_g = column2 == null ? void 0 : column2.dimensionData) == null ? void 0 : _g.memberLabel) {
       entry.dimension = column2.dimensionData.memberLabel;
     }
     console.log(`📤 [Submission Entry] Created entry:`, JSON.stringify(entry, null, 2));
@@ -11414,7 +11487,7 @@ let JupiterDynamicForm = class extends LitElement {
       }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field2) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
           const conceptData = this._formData[concept.id];
           let fieldValue = conceptData == null ? void 0 : conceptData[field2.columnId];
           const baseConceptId = field2.conceptId || concept.id.split("__").slice(0, -1).join("__") || concept.id;
@@ -11432,8 +11505,14 @@ let JupiterDynamicForm = class extends LitElement {
             }
           }
           if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
+            if ((_b = concept.type) == null ? void 0 : _b.toLowerCase().includes("percentitemtype")) {
+              const numericFieldValue = Number(fieldValue);
+              if (!isNaN(numericFieldValue) && Math.abs(numericFieldValue) >= 1) {
+                fieldValue = numericFieldValue / 100;
+              }
+            }
             const column2 = this._findColumnByIdInSection(field2.columnId, section2);
-            const fieldPeriodData = (_b = this._periodData[concept.id]) == null ? void 0 : _b[field2.columnId];
+            const fieldPeriodData = (_c = this._periodData[concept.id]) == null ? void 0 : _c[field2.columnId];
             const submissionEntry = {
               conceptId: concept.id,
               draftInstanceId: concept.id,
@@ -11455,21 +11534,23 @@ let JupiterDynamicForm = class extends LitElement {
               submissionEntry.period.endDate = endDate;
             }
             console.log(`🔍 [Submission] Concept: ${concept.id}, Column: ${field2.columnId}, Field Period: ${fieldPeriodData ? JSON.stringify(fieldPeriodData) : "none"}, 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}`}`);
-            const fieldUnit = (_c = this._unitData[concept.id]) == null ? void 0 : _c[field2.columnId];
+            const fieldUnit = (_d = this._unitData[concept.id]) == null ? void 0 : _d[field2.columnId];
             if (fieldUnit) {
               submissionEntry.unit = fieldUnit;
               console.log(`✅ [Submission] Adding unit to entry: ${fieldUnit} for ${concept.id}/${field2.columnId}`);
             } else {
               console.log(`⚠️ [Submission] No unit found in _unitData for ${concept.id}/${field2.columnId}. _unitData state:`, JSON.stringify(this._unitData, null, 2));
             }
-            const isMonetary = (_d = concept.type) == null ? void 0 : _d.toLowerCase().includes("monetary");
-            const fieldDecimals = (_e = this._decimalsData[concept.id]) == null ? void 0 : _e[field2.columnId];
-            const decimalsValue = fieldDecimals || (this.decimals !== "INF" ? this.decimals : void 0);
-            if (isMonetary && decimalsValue) {
+            const isMonetary = (_e = concept.type) == null ? void 0 : _e.toLowerCase().includes("monetary");
+            const isPercent = (_f = concept.type) == null ? void 0 : _f.toLowerCase().includes("percentitemtype");
+            const fieldDecimals = (_g = this._decimalsData[concept.id]) == null ? void 0 : _g[field2.columnId];
+            const globalFallback = isPercent ? "4" : this.decimals !== "INF" ? this.decimals : void 0;
+            const decimalsValue = fieldDecimals || globalFallback;
+            if ((isMonetary || isPercent) && decimalsValue) {
               const parsed = parseFloat(decimalsValue);
               submissionEntry.decimals = isNaN(parsed) ? decimalsValue : String(-Math.abs(parsed));
             }
-            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_f = column2.dimensionData) == null ? void 0 : _f.dimensionIdKey)) {
+            if ((column2 == null ? void 0 : column2.type) === "dimension" && ((_h = column2.dimensionData) == null ? void 0 : _h.dimensionIdKey)) {
               submissionEntry.dimension = column2.dimensionData.dimensionIdKey;
               console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field2.columnId}):`, column2.dimensionData.dimensionIdKey);
             } else {
@@ -11505,12 +11586,12 @@ let JupiterDynamicForm = class extends LitElement {
                 console.log(`🔍 [DynamicForm] Column details:`, {
                   id: column2.id,
                   type: column2.type,
-                  hasTypedMembers: (_g = column2.dimensionData) == null ? void 0 : _g.hasTypedMembers,
+                  hasTypedMembers: (_i = column2.dimensionData) == null ? void 0 : _i.hasTypedMembers,
                   dimensionData: column2.dimensionData
                 });
               }
             }
-            if (!submissionEntry.typedMembers && ((_h = field2.crossRoleTypedMembers) == null ? void 0 : _h.length)) {
+            if (!submissionEntry.typedMembers && ((_j = field2.crossRoleTypedMembers) == null ? void 0 : _j.length)) {
               const crossRoleKey = `${concept.id}__${field2.columnId}`;
               const crossRoleValues = this._typedMemberData[crossRoleKey];
               if (crossRoleValues) {
@@ -11877,8 +11958,17 @@ let JupiterDynamicForm = class extends LitElement {
       return result;
     }
     const query = searchText.toLowerCase().trim();
+    const addAllDescendants = (concepts) => {
+      var _a2;
+      for (const concept of concepts) {
+        result.add(concept.id);
+        if ((_a2 = concept.children) == null ? void 0 : _a2.length) {
+          addAllDescendants(concept.children);
+        }
+      }
+    };
     const walkConcepts = (concepts) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d;
       for (const concept of concepts) {
         let matches = ((_a2 = concept.conceptName) == null ? void 0 : _a2.toLowerCase().includes(query)) || ((_b2 = concept.id) == null ? void 0 : _b2.toLowerCase().includes(query));
         if (!matches && Array.isArray(concept.labels)) {
@@ -11889,8 +11979,10 @@ let JupiterDynamicForm = class extends LitElement {
         }
         if (matches) {
           result.add(concept.id);
-        }
-        if ((_c2 = concept.children) == null ? void 0 : _c2.length) {
+          if ((_c2 = concept.children) == null ? void 0 : _c2.length) {
+            addAllDescendants(concept.children);
+          }
+        } else if ((_d = concept.children) == null ? void 0 : _d.length) {
           walkConcepts(concept.children);
         }
       }
@@ -12711,8 +12803,8 @@ let JupiterDynamicForm = class extends LitElement {
         <div class="form-actions">
           <!-- Filter Roles Button (shown when more than 10 roles) -->
           ${this._shouldShowFilterButton() ? html`
-            <button 
-              class="filter-roles-button"
+            <button
+              class="filter-roles-button ${this._hasActiveAdvancedFilters ? "has-active-filters" : ""}"
               @click="${this._handleFilterRolesClick}"
               ?disabled="${this.disabled || this.readonly}"
             >
@@ -12722,6 +12814,15 @@ let JupiterDynamicForm = class extends LitElement {
               ${this._selectedRoleIds.length === 0 ? I18n.t("filter.selectRoles") : I18n.t("filter.filterRoles")}
               <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
             </button>
+            ${this._hasActiveAdvancedFilters ? html`
+              <button
+                class="clear-filters-button"
+                @click="${this._handleClearAdvancedFilters}"
+                ?disabled="${this.disabled || this.readonly}"
+              >
+                × ${I18n.t("filter.clearFilters")}
+              </button>
+            ` : ""}
           ` : ""}
           
           ${this.mode !== "admin" ? html`
@@ -13052,12 +13153,37 @@ JupiterDynamicForm.styles = css`
       opacity: 0.9;
     }
 
+    .filter-roles-button.has-active-filters {
+      background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--buttonTextColor, white);
+    }
+
     .filter-roles-button .filter-icon {
       width: 16px;
       height: 16px;
       fill: currentColor;
     }
 
+    .clear-filters-button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: transparent;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      color: var(--primaryTextColor, var(--jupiter-text-secondary, #666));
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .clear-filters-button:hover {
+      border-color: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
+      color: var(--primaryTextColor, var(--jupiter-primary-color, #1976d2));
+    }
+
     .roles-count {
       display: inline-flex;
       align-items: center;