jupiter-dynamic-forms 1.18.5 → 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",
@@ -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;
   }
@@ -12711,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}"
             >
@@ -12722,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`
@@ -13052,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;