jupiter-dynamic-forms 1.18.4 → 1.18.6

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",
@@ -4560,7 +4564,7 @@ JupiterFormField.styles = css`
       100% { box-shadow: 0 0 0 0px transparent; background-color: transparent; }
     }
     :host(.concept-highlight) {
-      animation: concept-highlight-pulse 1.5s ease-out forwards;
+      animation: concept-highlight-pulse 5s ease-out forwards;
     }
   `;
 __decorateClass$6([
@@ -6886,8 +6890,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 +7639,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 +8128,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 +9536,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;
   }
@@ -12557,9 +12584,13 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _findConceptByName(concepts, name) {
     var _a;
+    const localName = name.includes(":") ? name.split(":").pop() : name;
     for (const c2 of concepts) {
       if (c2.name === name)
         return c2;
+      const cLocal = c2.name.includes(":") ? c2.name.split(":").pop() : c2.name;
+      if (cLocal === localName)
+        return c2;
       if ((_a = c2.children) == null ? void 0 : _a.length) {
         const hit = this._findConceptByName(c2.children, name);
         if (hit)
@@ -12584,8 +12615,8 @@ let JupiterDynamicForm = class extends LitElement {
       return dims.length === 1 && this._normalizeAxisId(col.dimensionData.axisId ?? "") === this._normalizeAxisId(dims[0].axis) && this._normalizeMemberId(col.dimensionData.memberId ?? "") === this._normalizeMemberId(dims[0].member);
     })) == null ? void 0 : _a.id;
   }
-  async scrollToConcept(conceptName, dimensions) {
-    var _a, _b, _c, _d;
+  async scrollToConcept(conceptName, dimensions, match) {
+    var _a, _b, _c, _d, _e, _f;
     let targetSection = null;
     let targetConcept = null;
     const sectionsToSearch = [
@@ -12613,10 +12644,11 @@ let JupiterDynamicForm = class extends LitElement {
     }
     const columns = targetSection.columns ?? this._columns;
     let targetColumnId = null;
+    const hasValueMatch = (match == null ? void 0 : match.value) !== void 0 && (match == null ? void 0 : match.value) !== null;
+    const targetValue = hasValueMatch ? String(match.value) : null;
     if (dimensions == null ? void 0 : dimensions.length) {
       targetColumnId = this._findColumnByDimensions(columns, dimensions) ?? null;
-    }
-    if (!targetColumnId) {
+    } else if (!hasValueMatch) {
       targetColumnId = ((_b = columns[0]) == null ? void 0 : _b.id) ?? null;
     }
     this.requestUpdate();
@@ -12646,17 +12678,36 @@ let JupiterDynamicForm = class extends LitElement {
         if (targetFieldEl)
           return;
         const columnMatch = targetColumnId ? fieldEl.conceptId === conceptId && fieldEl.columnId === targetColumnId : fieldEl.conceptId === conceptId;
-        if (columnMatch)
+        const valueMatch = !hasValueMatch || String(fieldEl.value ?? "") === targetValue;
+        if (columnMatch && valueMatch)
           targetFieldEl = fieldEl;
       });
     });
+    if (!targetFieldEl && hasValueMatch && !targetColumnId) {
+      for (const ct of Array.from(conceptTrees ?? [])) {
+        if (targetFieldEl)
+          break;
+        const fields = (_e = ct.shadowRoot) == null ? void 0 : _e.querySelectorAll("jupiter-form-field");
+        fields == null ? void 0 : fields.forEach((fieldEl) => {
+          if (targetFieldEl)
+            return;
+          const columnMatch = targetColumnId ? fieldEl.conceptId === conceptId && fieldEl.columnId === targetColumnId : fieldEl.conceptId === conceptId;
+          if (columnMatch)
+            targetFieldEl = fieldEl;
+        });
+      }
+    }
     if (!targetFieldEl) {
       console.warn(`[scrollToConcept] Field element not found for concept: ${conceptName}`);
       return;
     }
     targetFieldEl.scrollIntoView({ behavior: "smooth", block: "center" });
     targetFieldEl.classList.add("concept-highlight");
-    setTimeout(() => targetFieldEl.classList.remove("concept-highlight"), 1500);
+    const focusTarget = (_f = targetFieldEl.shadowRoot) == null ? void 0 : _f.querySelector(
+      'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])'
+    );
+    focusTarget == null ? void 0 : focusTarget.focus({ preventScroll: true });
+    setTimeout(() => targetFieldEl.classList.remove("concept-highlight"), 5e3);
   }
   render() {
     var _a;
@@ -12687,8 +12738,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}"
             >
@@ -12698,6 +12749,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`
@@ -13028,12 +13088,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;