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

EOX-A · Nov 9, 2023 · ab87c53 · ab87c53
1 parent 1bbcc9f
commit ab87c53
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/elements/itemfilter/src/filters/_expandcontainer.ts b/elements/itemfilter/src/filters/_expandcontainer.ts
@@ -46,15 +46,7 @@ export class EOxItemFilterExpandContainer extends LitElement {
             style="${!this.filterObject.title && "text-transform: capitalize"}"
           >
             ${this.filterObject.title || this.filterObject.key || "Filter"}
-            <button
-              id="filter-reset-type"
-              class="outline small"
-              @click=${() => {
-                this._resetFilter();
-              }}
-            >
-              Reset
-            </button>
+            <slot name="reset-button"></slot>
           </span>
         </summary>
         <div class="scroll">

diff --git a/elements/itemfilter/src/main.ts b/elements/itemfilter/src/main.ts
@@ -363,6 +363,7 @@ export class EOxItemFilter extends TemplateElement {
       <style>
         ${style}
         ${!this.unstyled && styleEOX}
+        ${!this.unstyled && this._resetIconStyle}
         ${this.styleOverride}
       </style>
       <form
@@ -403,6 +404,27 @@ 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.requestUpdate();
+                                }}
+                              >
+                                ${this.unstyled ? "Reset" : nothing}
+                              </button>
+                            `
+                          )}
                             <eox-itemfilter-${unsafeStatic(filterObject.type)}
                               slot="filter"
                               data-type="filter"
@@ -576,4 +598,11 @@ export class EOxItemFilter extends TemplateElement {
       </form>
     `;
   }
+
+  private _resetIconStyle = `
+  eox-itemfilter-expandcontainer button.reset-icon{
+  content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23004170" d="M12 4c2.1 0 4.1.8 5.6 2.3c3.1 3.1 3.1 8.2 0 11.3c-1.8 1.9-4.3 2.6-6.7 2.3l.5-2c1.7.2 3.5-.4 4.8-1.7c2.3-2.3 2.3-6.1 0-8.5C15.1 6.6 13.5 6 12 6v4.6l-5-5l5-5V4M6.3 17.6C3.7 15 3.3 11 5.1 7.9l1.5 1.5c-1.1 2.2-.7 5 1.2 6.8c.5.5 1.1.9 1.8 1.2l-.6 2c-1-.4-1.9-1-2.7-1.8Z"%2F%3E%3C%2Fsvg%3E');
+  margin-left: 4px;
+  }
+  `;
 }
diff --git a/elements/itemfilter/src/style.eox.ts b/elements/itemfilter/src/style.eox.ts
@@ -166,9 +166,4 @@ eox-itemfilter-range {
 .range-after {
   margin-left: .5rem;
 }
-button#filter-reset-type {
-  font-size:9px;
-  padding: 0px 8px;
-  margin-left:10px
-}
 `;