From a415adc3c59216daae093720062b9e1c9f488166 Mon Sep 17 00:00:00 2001
From: Ahmed Behairi <behairiahmed@gmail.com>
Date: Wed, 29 Nov 2023 12:00:10 +0100
Subject: [PATCH] feat: add reset for individual filters (#413)

* feat: introduce reset filterObject

* feat: change reset-btn to slot + style btn as icon

* fix: icon size

* fix: reset search results

* fix: reset icon size

* chore: replace icon

* fix(style): harmonize individual reset & reset all buttons

---------

Co-authored-by: silvester-pari <silvester.pari@eox.at>
---
 .../src/filters/_expandcontainer.ts           |  8 ++++++
 elements/itemfilter/src/main.ts               | 26 +++++++++++++++++--
 elements/itemfilter/src/style.eox.ts          | 21 +++++++++------
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/elements/itemfilter/src/filters/_expandcontainer.ts b/elements/itemfilter/src/filters/_expandcontainer.ts
index a4d94198f..4e6500fbb 100644
--- a/elements/itemfilter/src/filters/_expandcontainer.ts
+++ b/elements/itemfilter/src/filters/_expandcontainer.ts
@@ -21,6 +21,13 @@ export class EOxItemFilterExpandContainer extends LitElement {
     );
   }
 
+  _resetFilter() {
+    const filterEl = this.querySelector(`[slot='filter']`) as Element & {
+      reset: () => void;
+    };
+    filterEl.reset();
+  }
+
   render() {
     return html`
       <style>
@@ -39,6 +46,7 @@ export class EOxItemFilterExpandContainer extends LitElement {
             style="${!this.filterObject.title && "text-transform: capitalize"}"
           >
             ${this.filterObject.title || this.filterObject.key || "Filter"}
+            <slot name="reset-button"></slot>
           </span>
         </summary>
         <div class="scroll">
diff --git a/elements/itemfilter/src/main.ts b/elements/itemfilter/src/main.ts
index aa16fad79..d81db8055 100644
--- a/elements/itemfilter/src/main.ts
+++ b/elements/itemfilter/src/main.ts
@@ -422,6 +422,28 @@ export class EOxItemFilter extends TemplateElement {
                               .unstyled=${this.unstyled}
                               @details-toggled=${this.toggleAccordion}
                             >
+                            ${when(
+                              filterObject.dirty,
+                              () => html`
+                                <button
+                                  slot="reset-button"
+                                  class="reset-icon icon"
+                                  @click=${(e: MouseEvent) => {
+                                    (<Element & { reset: () => void }>(
+                                      (<HTMLButtonElement>(
+                                        e.target
+                                      )).parentElement.querySelector(
+                                        "[slot=filter]"
+                                      )
+                                    )).reset();
+                                    this.search();
+                                    this.requestUpdate();
+                                  }}
+                                >
+                                  ${this.unstyled ? "Reset" : nothing}
+                                </button>
+                              `
+                            )}
                               <eox-itemfilter-${unsafeStatic(filterObject.type)}
                                 slot="filter"
                                 data-type="filter"
@@ -447,11 +469,11 @@ export class EOxItemFilter extends TemplateElement {
                     () => html`
                     <button
                       id="filter-reset"
-                      class="outline small"
+                      class="outline small icon-text reset-icon"
                       data-cy="filter-reset"
                       @click=${() => this.resetFilters()}
                     >
-                      Reset filters
+                      Reset all
                     </a>
                   `
                   )}
diff --git a/elements/itemfilter/src/style.eox.ts b/elements/itemfilter/src/style.eox.ts
index 9bf43e0fa..e4878d5df 100644
--- a/elements/itemfilter/src/style.eox.ts
+++ b/elements/itemfilter/src/style.eox.ts
@@ -122,13 +122,6 @@ button#filter-reset {
   position: absolute;
   top: 4px;
   right: 0;
-  text-indent: -9999px;
-  line-height: 0;
-}
-button#filter-reset:after {
-  content: "Reset";
-  text-indent: 0px;
-  line-height: initial;
 }
 .scroll {
   max-height: calc(100% - 30px);
@@ -162,4 +155,16 @@ eox-itemfilter-range {
 .range-after {
   margin-left: .5rem;
 }
-`;
+
+button.reset-icon:before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004170' viewBox='0 0 24 24'%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /%3E%3C/svg%3E");
+}
+eox-itemfilter-expandcontainer button.reset-icon {
+  margin-left: 4px;
+  margin-top: 1px;
+}
+eox-itemfilter-expandcontainer button.reset-icon:before {
+  height: 16px;
+  width: 16px;
+}
+  `;