vviinn-widgets 2.76.0 → 2.76.2

package/dist/collection/components/vviinn-filters/helpers/subFilterSelection.js

@@ -10,8 +10,11 @@ export const subFilterSelection = (filters, { column: selectedColumn }, filterVa
     pushObject.values.splice(valueIndex, 1);
   else
     pushObject.values.push(value);
-  if (index === -1)
+  if (index === -1) {
     filters = [...filters, pushObject];
+    if (document.getElementById("filters-footer"))
+      document.getElementById("filters-footer").scrollLeft = 0;
+  }
   else {
     filters[index] = pushObject;
     if (filters[index].values.length === 0) {

package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { FiltersIcon, NewCloseIcon } from "../vviinn-icons";
+import { FiltersIcon, NewCloseIcon, SquareFilterIcon, CheckFilterIcon, } from "../vviinn-icons";
 import { getFilterOptions, subFilterSelection } from "./helpers";
 import i18next from "i18next";
 import { resources } from "../../locale";
@@ -66,12 +66,12 @@ export class VviinnExtendedFilters {
     this.emitRequestFiltersMore([...this.requestFilters]);
   }
   showActiveOnModalSubButton(requestFilters, filterValue) {
-    let className = "";
+    let className = false;
     requestFilters.forEach((filter) => {
       if (filter.values.some((value) => value === filterValue ||
         value === filterValue.interval ||
         value === filterValue.value)) {
-        className = "active";
+        className = true;
       }
     });
     return className;
@@ -109,30 +109,31 @@ export class VviinnExtendedFilters {
     this.showMore = false;
   }
   render() {
-    let moreFiltersOptionCount = 0;
-    this.filters.forEach((filter) => {
-      moreFiltersOptionCount += getFilterOptions(filter).length;
-    });
-    return (h(Host, { part: "filters" }, SlotSkeleton("filters"), this.filters.length > 0 && (h("button", { class: "filters-more-button", onClick: () => (this.showMore = true) }, h(FiltersIcon, null))), h("div", { class: `filters-modal ${this.showMore ? "open" : ""}` }, h("div", { class: "filters-modal-wrapper" }, h("div", { class: "filters-modal-header" }, h("slot", { name: "vviinn-extended-filters-title" }, h("span", null, i18next.t("filters.modal.title"))), moreFiltersOptionCount > 0 ? `(${moreFiltersOptionCount})` : "", h("button", { class: "filters-modal-close", onClick: () => {
+    return (h(Host, { part: "filters" }, SlotSkeleton("filters"), this.filters.length > 0 && (h("button", { class: "filters-more-button", onClick: () => (this.showMore = true) }, h(FiltersIcon, null))), h("div", { class: `filters-modal ${this.showMore ? "open" : ""}` }, h("div", { class: "filters-modal-wrapper" }, h("div", { class: "filters-modal-header" }, h("slot", { name: "vviinn-extended-filters-title" }, h("span", null, i18next.t("filters.modal.title"))), h("button", { class: "filters-modal-close", onClick: () => {
         this.showMore = false;
         this.requestFilters = [];
-      } }, h(NewCloseIcon, null))), h("ul", { class: "filters-modal-list" }, this.filters
-      .filter((filter) => filter.column !== "color")
-      .map((mainFilter) => {
-      var _a, _b;
+      } }, h(NewCloseIcon, null))), h("ul", { class: "filters-modal-list" }, this.filters.map((mainFilter) => {
+      var _a, _b, _c;
       const column = mainFilter.column;
       const filterOptions = getFilterOptions(mainFilter);
-      return (h("li", null, h("button", { onClick: () => this.handleMoreOptionsMainClick(mainFilter.column), class: "filters-modal-main-button" }, mainFilter.label, filterOptions.length > 0
-        ? ` (${filterOptions.length})`
-        : ""), column === "price" &&
-        this.selectedMoreOptions.includes(mainFilter.column) ? (h("vviinn-price-range", { histogram: filterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_b = (_a = this.requestFilters.find((f) => f.column === "price")) === null || _a === void 0 ? void 0 : _a.values[0]) !== null && _b !== void 0 ? _b : {}) })) : (h("ul", { class: `filters-modal-sub-list ${column === "color_confirmed"
+      const requestFilter = this.requestFilters.find(({ column }) => column === column);
+      const addedOptions = [];
+      (_a = requestFilter === null || requestFilter === void 0 ? void 0 : requestFilter.values) === null || _a === void 0 ? void 0 : _a.forEach((value) => {
+        const index = filterOptions.findIndex((f) => f.value.value === value || f.value === value);
+        if (index > -1) {
+          addedOptions.push(h("span", null, filterOptions[index].label));
+        }
+      });
+      return (h("li", null, h("div", { class: "filters-modal-main-button-wrapper" }, h("button", { onClick: () => this.handleMoreOptionsMainClick(mainFilter.column), class: "filters-modal-main-button" }, mainFilter.label), addedOptions.length > 0 && (h("div", { class: "filters-modal-main-button-added-options" }, addedOptions))), column === "price" &&
+        this.selectedMoreOptions.includes(mainFilter.column) ? (h("vviinn-price-range", { histogram: filterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find(({ column }) => column === "price")) === null || _b === void 0 ? void 0 : _b.values[0]) !== null && _c !== void 0 ? _c : {}) })) : (h("ul", { class: `filters-modal-sub-list ${column === "color_confirmed"
           ? "filters-modal-sub-list-inline"
           : ""} ${this.selectedMoreOptions.includes(mainFilter.column)
           ? "open"
           : ""}` }, filterOptions &&
         filterOptions.map(({ value, label, active }) => {
           const hexCode = value.hexCode;
-          return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnModalSubButton(this.requestFilters, value)}`, style: { backgroundColor: hexCode }, disabled: !active }, h("span", null, label))));
+          const selected = this.showActiveOnModalSubButton(this.requestFilters, value);
+          return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${selected ? "active" : ""}`, style: { backgroundColor: hexCode }, disabled: !active }, h("span", null, h("span", null, label), selected ? (h(CheckFilterIcon, null)) : (h(SquareFilterIcon, null))))));
         })))));
     })), h("div", { class: "filters-modal-actions" }, h("button", { class: "filters-modal-apply", onClick: () => (this.showMore = false), disabled: this.requestFilters.length === 0 }, h("slot", { name: "vviinn-extended-filters-apply" }, i18next.t("filters.modal.apply"))), h("button", { class: "filters-modal-reset", onClick: () => this.resetModal() }, h("slot", { name: "vviinn-extended-filters-reset" }, i18next.t("filters.modal.resetFilters"))))))));
   }

package/dist/collection/components/vviinn-filters/vviinn-filters.css

@@ -5,32 +5,9 @@
   --color-icons-system: #2f8edf;
   --product-card-width-system: 130px;
   --spacer: 8px;
-
-  /*FIXME-36773: Majid should remove these variable and use the new names*/
-  --surface-color-surface-01: #f4f4f4;
-  --text-color-text-primary: #161616;
-  --font-family: Inter, system-ui, sans-serif;
-  --font-size-body: 14px;
   --font-weight-regular: 400;
-  --line-height-body: 20px;
   --letter-spacing-default: 0px;
-  --background-color-background: #fff;
-  --border-color-border-01: #f4f4f4;
-  --gray-100: #161616;
-  --gray-10: #f4f4f4;
-  --gray-70: #525252;
   --radius-radius-md: 8px;
-  --button-color-button-primary: #000;
-  --text-color-text-inverse: #fff;
-  --text-color-text-secondary: #525252;
-  --button-color-button-disabled: #e0e0e0;
-  --text-color-text-disabled: rgba(22, 22, 22, 0.25);
-  --surface-color-surface-accent: #e0e0e0;
-  --border-color-border-02: #c6c6c6;
-  --surface-color-surface-active: #161616;
-  --surface-color-surface-inactive: #e0e0e0;
-  --stroke-color-stroke-01: #f4f4f4;
-  --chip-color-badge-primary: #161616;
 
   /* New Styles */
   --font-family-base: Inter, system-ui, sans-serif;
@@ -235,6 +212,9 @@
 
 :host {
   display: block;
+
+  font-family: var(--font-family-base);
+  font-style: normal;
 }
 
 .filters-footer {
@@ -244,7 +224,8 @@
 .filters-modal-list,
 .sub-filters-wrapper,
 .main-filters-list,
-.filters-modal-sub-list {
+.filters-modal-sub-list,
+.selected-filters-wrapper {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -255,89 +236,104 @@
 }
 
 .main-filters-list {
-  padding: 2px;
-  gap: 10px;
+  padding: var(--spacing-25);
+  gap: var(--spacing-25);
   border-radius: 8px;
-  background: var(--surface-color-surface-01);
+  background: var(--surface-bg-color-01);
   display: inline-flex;
 }
 
 .filters-modal-main-button,
 .filters-sub-button,
 .filters-main-button,
-.filters-modal-close {
+.filters-modal-close,
+.filters-sub-button-selected {
   cursor: pointer;
   border: none;
 }
 
 .filters-sub-button,
 .filters-main-button {
-  font-family: var(--font-family);
   font-size: var(--font-size-body);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
+
+  font-weight: var(--font-weight-400);
   line-height: var(--line-height-body);
-  letter-spacing: var(--letter-spacing-default);
+  letter-spacing: var(--letter-spacing-body);
 
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
 
   border-radius: 6px;
 }
 
 .filters-main-button {
-  color: var(--text-color-text-primary);
-
-  padding: 10px 16px;
-  flex: 1 0 0;
-
-  background: var(--surface-color-surface-01);
-}
-.filters-main-button:hover {
-  color: var(--text-color-text-secondary);
+  padding: var(--spacing-100) 18px;
+  color: var(--color-text-helper);
+  background: none;
 }
 
-.filters-main-button.active {
-  background: var(--background-color-background);
+.filters-main-button.active,
+.filters-main-button:hover {
+  background: var(--surface-bg-color-02);
+  color: var(--color-text-primary);
 }
 
 .filters-footer {
-  margin: 16px 0;
+  padding: 16px 0;
 }
+
 .sub-filters-wrapper {
-  gap: 12px;
+  gap: var(--spacing-100);
+  display: flex;
+}
+.selected-filters-wrapper {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--surface-bg-color-01);
+  gap: var(--spacing-100);
   display: flex;
 }
+
 .filters-sub-button {
-  color: #000;
+  color: var(--color-text-primary);
+  background: var(--surface-bg-color-01);
+  padding: var(--spacing-100);
+  gap: var(--spacing-25);
+}
 
-  padding: 10px;
+.filters-sub-button > span,
+.filters-sub-button-selected > span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-25);
+  white-space: nowrap;
+}
 
-  border: 1px solid var(--border-color-border-01);
-  background: var(--background-color-background);
+.filters-sub-button-selected > span > span {
+  padding: 2px;
 }
+
 .filters-sub-button:hover {
-  color: var(--text-color-text-secondary);
+  background: var(--surface-bg-color-01);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
-.filters-sub-button.active {
-  border-color: #000;
-}
 .filters-sub-button:disabled {
   cursor: not-allowed;
-  background: var(--button-color-button-disabled);
-  color: var(--text-color-text-disabled, rgba(22, 22, 22, 0.25));
+  background: var(--surface-bg-color-disabled);
+  color: var(--color-text-disabled);
 }
+
 .filters-more-button {
   display: flex;
-  padding: 10px;
-  align-items: flex-start;
-  gap: 10px;
+  padding: var(--spacing-100);
+  gap: var(--spacing-50);
+  border-radius: var(--border-radius-100);
 
-  border-radius: 8px;
-  background: var(--surface-color-surface-01);
+  align-items: flex-start;
+  background: var(--button-bg-color-secondary);
   border: none;
   cursor: pointer;
 }
@@ -384,15 +380,15 @@
   position: relative;
   padding: 20px 0;
 
-  color: var(--gray-100);
+  color: var(--color-text-primary);
   text-align: center;
-  font-family: var(--font-family);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
 
-  border-bottom: 1px solid var(--gray-10);
+  font-size: var(--font-size-headline);
+  font-weight: var(--font-weight-500);
+  line-height: var(--line-height-headline);
+  letter-spacing: var(--letter-spacing-headline);
+
+  border-bottom: 1px solid var(--color-border-01);
 
   display: flex;
   justify-content: center;
@@ -408,29 +404,36 @@
 .filters-modal-list > li {
   padding-right: 24px;
 }
+.filters-modal-main-button-wrapper {
+  border-bottom: 1px solid var(--color-border-01);
+  padding: 20px 0;
+}
 .filters-modal-main-button {
-  border-bottom: 1px solid var(--gray-10);
   width: 100%;
   background: none;
   text-align: left;
-  padding: 20px 0;
+  padding: 0;
 
-  color: var(--gray-70);
-  font-family: var(--font-family);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
+  color: var(--color-text-primary);
+
+  font-size: var(--font-size-label-large);
+  font-weight: var(--font-weight-500);
+  line-height: var(--line-height-label-large);
+  letter-spacing: var(--letter-spacing-label-large);
 }
 
 .filters-modal-sub-list {
   display: none;
+  margin: 0 -4px;
+}
+.filters-modal-sub-list > li {
+  display: inline-block;
+  margin: 0 4px;
 }
 .filters-modal-sub-list-inline {
   margin: 0 -6px;
 }
 .filters-modal-sub-list-inline > li {
-  display: inline-block;
   margin: 0 6px;
 }
 
@@ -452,53 +455,72 @@
 
 .filters-more-modal-button {
   background: none;
-  display: block;
   border: none;
   cursor: pointer;
-}
 
+  display: flex;
+  padding: var(--spacing-100);
+  align-items: center;
+  gap: var(--spacing-25);
+
+  border-radius: var(--border-radius-100);
+  background: var(--surface-bg-color-01);
+
+  color: var(--color-text-primary);
+}
 .filters-more-modal-button.active {
-  color: var(--color-primary-system);
+  background: var(--surface-bg-color-inverse);
+  color: var(--color-text-inverse);
+}
+.filters-more-modal-button > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-25);
+}
+.filters-more-modal-button > span > span {
+  padding: 2px;
 }
 .filters-more-modal-button:disabled {
   cursor: not-allowed;
-  color: var(--text-color-text-disabled, rgba(22, 22, 22, 0.25));
+  opacity: 0.5;
 }
 
 .filters-modal-actions {
-  border-top: 1px solid var(--gray-10);
-  padding: 24px;
+  border-top: 1px solid var(--color-border-01);
+  padding: var(--spacing-250);
   z-index: 10;
   background: #ffffff;
   border-radius: 0px 0px 0px 32px;
 }
 
 .filters-modal-apply {
-  color: var(--text-color-text-inverse);
-  text-align: center;
-  font-family: var(--font-family);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
+  cursor: pointer;
+  width: 100%;
+  border: none;
 
   display: flex;
-  width: 100%;
-  padding: 12px;
+  padding: var(--spacing-150);
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-50);
+  align-self: stretch;
 
-  border-radius: var(--radius-radius-md);
-  background: var(--button-color-button-primary);
+  color: var(--color-text-inverse);
+  text-align: center;
 
-  cursor: pointer;
-  border: none;
+  border-radius: var(--border-radius-150);
+  background: var(--button-bg-color-primary);
+
+  font-size: var(--font-size-label-large);
+  font-weight: var(--font-weight-500);
+  line-height: var(--line-height-label-large);
+  letter-spacing: var(--letter-spacing-label-large);
 }
 
 .filters-modal-apply:disabled {
-  background: var(--button-color-button-disabled);
-  color: var(--text-color-text-disabled);
+  background: var(--button-bg-color-disabled);
+  color: var(--color-text-disabled);
 }
 
 .filters-modal-reset {
@@ -510,21 +532,55 @@
   width: 100%;
   margin-top: 20px;
 
-  color: var(--text-color-text-secondary);
+  color: var(--color-text-secondary);
   text-align: center;
-  font-family: var(--font-family);
+
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-500);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.selected-filters-wrapper > li {
+  border-radius: var(--border-radius-100);
+  background: var(--surface-bg-color-inverse);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-100);
+  cursor: pointer;
+}
+.filters-sub-button-selected {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-25);
+  background: var(--surface-bg-color-inverse);
+  border-radius: var(--border-radius-100);
+
+  color: var(--color-text-inverse);
+  text-overflow: ellipsis;
+
   font-size: var(--font-size-body);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-400);
   line-height: var(--line-height-body);
-  letter-spacing: var(--letter-spacing-default);
+  letter-spacing: var(--letter-spacing-body);
 }
+
 .filters-sub-button-color {
   width: 40px;
   height: 40px;
-  border: 2px solid var(--border-color-border-01);
+  border: 2px solid var(--color-border-01);
   border-radius: 20px;
 }
+.filters-sub-button-color:disabled {
+  opacity: 0.25;
+}
+.filters-sub-button-selected.filters-sub-button-color {
+  width: 24px;
+  height: 24px;
+  border: none;
+}
+
 .filters-sub-button-color > span {
   display: none;
 }
@@ -536,3 +592,21 @@
 .filters-sub-button-color:first-child.active {
   margin-left: 2px;
 }
+
+.filters-modal-main-button-added-options {
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-400);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+.filters-modal-main-button-added-options > span::after {
+  content: ", ";
+}
+
+.filters-modal-main-button-added-options > span:last-child::after {
+  content: "";
+}

package/dist/collection/components/vviinn-filters/vviinn-filters.js

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { getFilterOptions, subFilterSelection } from "./helpers";
+import { getFilterOptions, subFilterSelection, } from "./helpers";
+import { StarsIcon, CheckFilterIcon, CloseFilterIcon } from "../vviinn-icons";
 /**
  * @part filters - Wrapper itself.
  */
@@ -15,6 +16,9 @@ export class VviinnFilters {
     };
     this.handleSetFilters = ({ detail, }) => {
       this.filters = detail;
+      if (this.selectedFilter) {
+        this.selectedFilter = this.filters.find((f) => f.column === this.selectedFilter.column);
+      }
       if (!detail.some(({ column }) => { var _a; return column === ((_a = this.selectedFilter) === null || _a === void 0 ? void 0 : _a.column); })) {
         this.selectedFilter = undefined;
       }
@@ -40,6 +44,7 @@ export class VviinnFilters {
     this.vviinnFiltersChanged.emit({ filters: requestFilters, el: this.el });
   }
   handleSubFilterSelection(filterValue, seletedFilter) {
+    this.filtersFooter.scrollLeft = 0;
     this.requestFilters = subFilterSelection(this.requestFilters, seletedFilter, filterValue);
     this.emitRequestFiltersMore([...this.requestFilters]);
   }
@@ -48,17 +53,17 @@ export class VviinnFilters {
       return "";
     return this.selectedFilter.column === column ? "active" : "";
   }
-  showActiveOnSubButton(requestFilters, filterValue) {
-    if (!this.selectedFilter || !requestFilters)
-      return "";
-    const mainFilter = requestFilters.find((filter) => filter.column === this.selectedFilter.column);
+  showActiveOnSubButton(requestFilters, filterValue, selectedFilter) {
+    if (!selectedFilter || !requestFilters)
+      return false;
+    const mainFilter = requestFilters.find(({ column }) => column === selectedFilter.column);
     if (!mainFilter)
       return "";
     return mainFilter.values.some((value) => value === filterValue ||
       value === filterValue.interval ||
       value === filterValue.value)
-      ? "active"
-      : "";
+      ? true
+      : false;
   }
   filtersStringWatcher() {
     if (this.filtersString === "")
@@ -83,16 +88,33 @@ export class VviinnFilters {
     var _a, _b, _c;
     const { column } = (_a = this.selectedFilter) !== null && _a !== void 0 ? _a : {};
     const selectedFilterOptions = getFilterOptions(this.selectedFilter);
-    const filters = this.filters.filter((filter) => filter.isPrimary && filter.column !== "color");
+    const filters = this.filters.filter((filter) => filter.isPrimary);
     if (filters.length === 0)
       return h(Host, null);
+    const RenderButton = (value, label, active, selectedFilter, isSelected = false) => {
+      const hexCode = value.hexCode;
+      return (h("li", { onClick: () => active ? this.handleSubFilterSelection(value, selectedFilter) : null }, h("button", { class: `filters-sub-button${isSelected ? "-selected" : ""} ${hexCode ? "filters-sub-button-color" : ""}`, style: { backgroundColor: hexCode }, disabled: !active }, h("span", null, !isSelected ? label : h("span", null, label), " ", !isSelected ? h(StarsIcon, null) : h(CheckFilterIcon, null))), isSelected && hexCode && h(CloseFilterIcon, null)));
+    };
+    let selectedButtons = [];
+    this.filters.forEach((filter) => {
+      if (!("values" in filter))
+        return;
+      filter.values.forEach(({ value, label, active }) => {
+        if (this.showActiveOnSubButton(this.requestFilters, value, filter) &&
+          active) {
+          selectedButtons.push(RenderButton(value, label, active, filter, true));
+        }
+      });
+    });
     return (h(Host, { part: "filters" }, h("div", { class: "main-filters-wrapper" }, h("ul", { class: "main-filters-list" }, filters.map((filter) => {
       return (h("li", null, h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.label)));
-    }))), this.selectedFilter !== undefined && (h("div", { class: "filters-footer" }, column === "price" ? (h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find((f) => f.column === "price")) === null || _b === void 0 ? void 0 : _b.values[0]) !== null && _c !== void 0 ? _c : {}) })) : (h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
+    }))), this.selectedFilter !== undefined && (h("div", { class: "filters-footer", ref: (el) => (this.filtersFooter = el) }, column === "price" ? (h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find(({ column }) => column === "price")) === null || _b === void 0 ? void 0 : _b.values[0]) !== null && _c !== void 0 ? _c : {}) })) : (h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
       selectedFilterOptions.map(({ value, label, active }) => {
-        const hexCode = value.hexCode;
-        return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(value, this.selectedFilter), class: `filters-sub-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnSubButton(this.requestFilters, value)}`, style: { backgroundColor: hexCode }, disabled: !active }, h("span", null, label))));
-      })))))));
+        if (this.showActiveOnSubButton(this.requestFilters, value, this.selectedFilter)) {
+          return null;
+        }
+        return RenderButton(value, label, active, this.selectedFilter);
+      }))), selectedButtons.length > 0 && (h("ul", { class: "selected-filters-wrapper" }, selectedButtons))))));
   }
   static get is() { return "vviinn-filters"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-icons/icons/CheckFilterIcon.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const CheckFilterIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: "white" }), h("path", { d: "M10.8765 13.5061L16.1943 8.30769C16.4041 8.10256 16.6526 8 16.9398 8C17.2269 8 17.4754 8.10256 17.6852 8.30769C17.8951 8.51282 18 8.75574 18 9.03644C18 9.31714 17.8951 9.56005 17.6852 9.76518L11.622 15.6923C11.4121 15.8974 11.1637 16 10.8765 16C10.5894 16 10.3409 15.8974 10.131 15.6923L7.31476 12.9393C7.10492 12.7341 7 12.4912 7 12.2105C7 11.9298 7.10492 11.6869 7.31476 11.4818C7.5246 11.2767 7.77309 11.1741 8.06024 11.1741C8.34739 11.1741 8.59588 11.2767 8.80572 11.4818L10.8765 13.5061Z", fill: "#161616" })));

package/dist/collection/components/vviinn-icons/icons/CloseFilterIcon.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const CloseFilterIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M12 13.4L7.09999 18.3C6.91665 18.4834 6.68332 18.575 6.39999 18.575C6.11665 18.575 5.88332 18.4834 5.69999 18.3C5.51665 18.1167 5.42499 17.8834 5.42499 17.6C5.42499 17.3167 5.51665 17.0834 5.69999 16.9L10.6 12L5.69999 7.10005C5.51665 6.91672 5.42499 6.68338 5.42499 6.40005C5.42499 6.11672 5.51665 5.88338 5.69999 5.70005C5.88332 5.51672 6.11665 5.42505 6.39999 5.42505C6.68332 5.42505 6.91665 5.51672 7.09999 5.70005L12 10.6L16.9 5.70005C17.0833 5.51672 17.3167 5.42505 17.6 5.42505C17.8833 5.42505 18.1167 5.51672 18.3 5.70005C18.4833 5.88338 18.575 6.11672 18.575 6.40005C18.575 6.68338 18.4833 6.91672 18.3 7.10005L13.4 12L18.3 16.9C18.4833 17.0834 18.575 17.3167 18.575 17.6C18.575 17.8834 18.4833 18.1167 18.3 18.3C18.1167 18.4834 17.8833 18.575 17.6 18.575C17.3167 18.575 17.0833 18.4834 16.9 18.3L12 13.4Z", fill: "#8D8D8D" })));

package/dist/collection/components/vviinn-icons/icons/FiltersIcon.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const FiltersIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M3.66522 19.275C3.40867 19.275 3.19362 19.1862 3.02007 19.0086C2.84653 18.8311 2.75977 18.6142 2.75977 18.358C2.75977 18.1017 2.84653 17.8863 3.02007 17.7118C3.19362 17.5372 3.40867 17.45 3.66522 17.45H8.34022C8.59322 17.45 8.80972 17.5378 8.98974 17.7135C9.16976 17.8892 9.25977 18.107 9.25977 18.3667C9.25977 18.6229 9.16976 18.8384 8.98974 19.013C8.80972 19.1877 8.59322 19.275 8.34022 19.275H3.66522ZM3.66522 6.54995C3.40867 6.54995 3.19362 6.46209 3.02007 6.28638C2.84653 6.11066 2.75977 5.89293 2.75977 5.63318C2.75977 5.37696 2.84653 5.16154 3.02007 4.9869C3.19362 4.81225 3.40867 4.72493 3.66522 4.72493H12.4902C12.7432 4.72493 12.9597 4.81371 13.1397 4.99128C13.3198 5.16884 13.4098 5.38573 13.4098 5.64195C13.4098 5.89817 13.3198 6.11356 13.1397 6.28813C12.9597 6.46268 12.7432 6.54995 12.4902 6.54995H3.66522ZM11.5084 21.325C11.2549 21.325 11.0386 21.2366 10.8592 21.0599C10.6799 20.8832 10.5902 20.665 10.5902 20.4054V16.2804C10.5902 16.0239 10.6804 15.8088 10.8606 15.6353C11.0409 15.4617 11.2578 15.375 11.5112 15.375C11.7646 15.375 11.9786 15.4617 12.1533 15.6353C12.3279 15.8088 12.4152 16.0239 12.4152 16.2804V17.45H20.3348C20.5913 17.45 20.8064 17.5378 20.9799 17.7135C21.1535 17.8892 21.2402 18.107 21.2402 18.3667C21.2402 18.6229 21.1535 18.8384 20.9799 19.013C20.8064 19.1877 20.5913 19.275 20.3348 19.275H12.4152V20.4054C12.4152 20.665 12.3283 20.8832 12.1545 21.0599C11.9807 21.2366 11.7653 21.325 11.5084 21.325ZM8.33879 14.9554C8.08539 14.9554 7.87137 14.8686 7.69672 14.6951C7.52208 14.5215 7.43477 14.3065 7.43477 14.05V12.9054H3.66522C3.40867 12.9054 3.19362 12.8185 3.02007 12.6447C2.84653 12.4709 2.75977 12.2555 2.75977 11.9986C2.75977 11.7416 2.84653 11.5267 3.02007 11.3538C3.19362 11.1809 3.40867 11.0945 3.66522 11.0945H7.43477V9.89995C7.43477 9.6434 7.52167 9.42836 7.69549 9.25483C7.86929 9.08128 8.08467 8.9945 8.34162 8.9945C8.59503 8.9945 8.81141 9.08128 8.99074 9.25483C9.17009 9.42836 9.25977 9.6434 9.25977 9.89995V14.05C9.25977 14.3065 9.16962 14.5215 8.98934 14.6951C8.80906 14.8686 8.59221 14.9554 8.33879 14.9554ZM11.5098 12.9054C11.2568 12.9054 11.0403 12.8185 10.8602 12.6447C10.6802 12.4709 10.5902 12.2555 10.5902 11.9986C10.5902 11.7416 10.6802 11.5267 10.8602 11.3538C11.0403 11.1809 11.2568 11.0945 11.5098 11.0945H20.3348C20.5913 11.0945 20.8064 11.1814 20.9799 11.3552C21.1535 11.529 21.2402 11.7444 21.2402 12.0014C21.2402 12.2583 21.1535 12.4732 20.9799 12.6461C20.8064 12.819 20.5913 12.9054 20.3348 12.9054H11.5098ZM15.6584 8.62495C15.405 8.62495 15.1886 8.53818 15.0092 8.36463C14.8299 8.19109 14.7402 7.97605 14.7402 7.7195V3.5945C14.7402 3.3349 14.8304 3.11674 15.0106 2.94003C15.1909 2.76329 15.4078 2.67493 15.6612 2.67493C15.9146 2.67493 16.1286 2.76329 16.3033 2.94003C16.4779 3.11674 16.5652 3.3349 16.5652 3.5945V4.72493H20.3348C20.5913 4.72493 20.8064 4.81371 20.9799 4.99128C21.1535 5.16884 21.2402 5.38573 21.2402 5.64195C21.2402 5.89817 21.1535 6.11356 20.9799 6.28813C20.8064 6.46268 20.5913 6.54995 20.3348 6.54995H16.5652V7.7195C16.5652 7.97605 16.4783 8.19109 16.3045 8.36463C16.1307 8.53818 15.9153 8.62495 15.6584 8.62495Z", fill: "#525252" })));
+export const FiltersIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V16C11 15.7167 11.0958 15.4792 11.2875 15.2875C11.4792 15.0958 11.7167 15 12 15C12.2833 15 12.5208 15.0958 12.7125 15.2875C12.9042 15.4792 13 15.7167 13 16V17H20C20.2833 17 20.5208 17.0958 20.7125 17.2875C20.9042 17.4792 21 17.7167 21 18C21 18.2833 20.9042 18.5208 20.7125 18.7125C20.5208 18.9042 20.2833 19 20 19H13V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21ZM4 19C3.71667 19 3.47917 18.9042 3.2875 18.7125C3.09583 18.5208 3 18.2833 3 18C3 17.7167 3.09583 17.4792 3.2875 17.2875C3.47917 17.0958 3.71667 17 4 17H8C8.28333 17 8.52083 17.0958 8.7125 17.2875C8.90417 17.4792 9 17.7167 9 18C9 18.2833 8.90417 18.5208 8.7125 18.7125C8.52083 18.9042 8.28333 19 8 19H4ZM8 15C7.71667 15 7.47917 14.9042 7.2875 14.7125C7.09583 14.5208 7 14.2833 7 14V13H4C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H7V10C7 9.71667 7.09583 9.47917 7.2875 9.2875C7.47917 9.09583 7.71667 9 8 9C8.28333 9 8.52083 9.09583 8.7125 9.2875C8.90417 9.47917 9 9.71667 9 10V14C9 14.2833 8.90417 14.5208 8.7125 14.7125C8.52083 14.9042 8.28333 15 8 15ZM12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H12ZM16 9C15.7167 9 15.4792 8.90417 15.2875 8.7125C15.0958 8.52083 15 8.28333 15 8V4C15 3.71667 15.0958 3.47917 15.2875 3.2875C15.4792 3.09583 15.7167 3 16 3C16.2833 3 16.5208 3.09583 16.7125 3.2875C16.9042 3.47917 17 3.71667 17 4V5H20C20.2833 5 20.5208 5.09583 20.7125 5.2875C20.9042 5.47917 21 5.71667 21 6C21 6.28333 20.9042 6.52083 20.7125 6.7125C20.5208 6.90417 20.2833 7 20 7H17V8C17 8.28333 16.9042 8.52083 16.7125 8.7125C16.5208 8.90417 16.2833 9 16 9ZM4 7C3.71667 7 3.47917 6.90417 3.2875 6.7125C3.09583 6.52083 3 6.28333 3 6C3 5.71667 3.09583 5.47917 3.2875 5.2875C3.47917 5.09583 3.71667 5 4 5H12C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6C13 6.28333 12.9042 6.52083 12.7125 6.7125C12.5208 6.90417 12.2833 7 12 7H4Z", fill: "#161616" })));

package/dist/collection/components/vviinn-icons/icons/SquareFilterIcon.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const SquareFilterIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3", fill: "white", stroke: "#E0E0E0", "stroke-width": "2" })));