feat: add reset for individual filters

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">

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>
                   `
                   )}

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;
+}
+  `;