vviinn-widgets 2.74.2 → 2.76.0

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

@@ -246,26 +246,28 @@ export class VviinnExtendedFilters {
           }
         }
       }, {
-        "method": "globalSlotsChanged",
-        "name": "globalSlotsChanged",
+        "method": "vviinnFilters",
+        "name": "vviinnFilters",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The filters received"
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "DynamicFiltersEventData",
+          "resolved": "({ column: string; label: string; isPrimary: boolean; values: ({ value: string | number | { value: string; name: string; } | ({ value: string; name: string; } & { hexCode?: string; rgb?: { red?: number; green?: number; blue?: number; }; family?: string; } & { value: unknown; name: unknown; hexCode: unknown; rgb: unknown; family: unknown; }); label: string; } & { active: boolean; selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; isPrimary: boolean; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; histogram: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; })[]",
+          "references": {
+            "DynamicFiltersEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
         }
       }, {
-        "method": "vviinnFilters",
-        "name": "vviinnFilters",
+        "method": "globalSlotsChanged",
+        "name": "globalSlotsChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -277,14 +279,9 @@ export class VviinnExtendedFilters {
           "text": ""
         },
         "complexType": {
-          "original": "DynamicFiltersEventData",
-          "resolved": "({ column: string; label: string; isPrimary: boolean; values: ({ value: string | number | { value: string; name: string; } | ({ value: string; name: string; } & { hexCode?: string; rgb?: { red?: number; green?: number; blue?: number; }; family?: string; } & { value: unknown; name: unknown; hexCode: unknown; rgb: unknown; family: unknown; }); label: string; } & { active: boolean; selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; isPrimary: boolean; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; histogram: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; })[]",
-          "references": {
-            "DynamicFiltersEventData": {
-              "location": "import",
-              "path": "../../recommendation/events"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }];
   }

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

@@ -234,6 +234,7 @@
 
 
 :host {
+  display: block;
 }
 
 .filters-footer {

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

@@ -180,26 +180,28 @@ export class VviinnFilters {
           }
         }
       }, {
-        "method": "globalSlotsChanged",
-        "name": "globalSlotsChanged",
+        "method": "vviinnFilters",
+        "name": "vviinnFilters",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
+          "tags": [],
+          "text": "The filters received"
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "DynamicFiltersEventData",
+          "resolved": "({ column: string; label: string; isPrimary: boolean; values: ({ value: string | number | { value: string; name: string; } | ({ value: string; name: string; } & { hexCode?: string; rgb?: { red?: number; green?: number; blue?: number; }; family?: string; } & { value: unknown; name: unknown; hexCode: unknown; rgb: unknown; family: unknown; }); label: string; } & { active: boolean; selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; isPrimary: boolean; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; histogram: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; })[]",
+          "references": {
+            "DynamicFiltersEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
         }
       }, {
-        "method": "vviinnFilters",
-        "name": "vviinnFilters",
+        "method": "globalSlotsChanged",
+        "name": "globalSlotsChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -211,14 +213,9 @@ export class VviinnFilters {
           "text": ""
         },
         "complexType": {
-          "original": "DynamicFiltersEventData",
-          "resolved": "({ column: string; label: string; isPrimary: boolean; values: ({ value: string | number | { value: string; name: string; } | ({ value: string; name: string; } & { hexCode?: string; rgb?: { red?: number; green?: number; blue?: number; }; family?: string; } & { value: unknown; name: unknown; hexCode: unknown; rgb: unknown; family: unknown; }); label: string; } & { active: boolean; selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; isPrimary: boolean; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; histogram: { value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]; })[]",
-          "references": {
-            "DynamicFiltersEventData": {
-              "location": "import",
-              "path": "../../recommendation/events"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }];
   }

package/dist/collection/components/vviinn-results/stories/ResultsTemplate.js

@@ -0,0 +1,24 @@
+export const ResultsTemplate = (args) => {
+  const { token, apiPath, searchId, imageResolutionWidth, currencySign, locale, productDetailsRedirect, productDetailsNewTab, showInWidget, uiSessionId, resultsCount, filterColumn, filterValue, textSearchQuery, } = args;
+  const filterAttributes = filterColumn && filterValue
+    ? `filter-column="${filterColumn}" filter-value="${filterValue}"`
+    : "";
+  const searchQueryAttribute = textSearchQuery
+    ? `text-search-query="${textSearchQuery}"`
+    : "";
+  return `<vviinn-results
+    token="${token}"
+    api-path="${apiPath}"
+    search-id="${searchId}"
+    image-resolution-width="${imageResolutionWidth}"
+    currency-sign="${currencySign}"
+    locale="${locale}"
+    product-details-redirect="${productDetailsRedirect}"
+    product-details-new-tab="${productDetailsNewTab}"
+    show-in-widget="${showInWidget}"
+    ${searchQueryAttribute}
+    ${filterAttributes}
+    ui-session-id="${uiSessionId}"
+    results-count="${resultsCount}"
+  ></vviinn-results>`;
+};

package/dist/collection/components/vviinn-results/stories/generalArgs.js

@@ -0,0 +1,13 @@
+export const generalArgs = {
+  token: process.env.STORYBOOK_TOKEN,
+  apiPath: process.env.STORYBOOK_API_PATH,
+  resultsCount: 12,
+  imageResolutionWidth: 250,
+  currencySign: "€",
+  locale: "en-US",
+  productDetailsRedirect: true,
+  productDetailsNewTab: false,
+  showInWidget: false,
+  uiSessionId: "",
+  searchId: "",
+};

package/dist/collection/components/vviinn-results/stories/vviinn-results.stories.js

@@ -0,0 +1,25 @@
+import { generalArgs } from "./generalArgs";
+import { ResultsTemplate } from "./ResultsTemplate";
+export default {
+  title: "Elements/Product Listing",
+  component: "vviinn-results",
+};
+export const StaticFilters = ResultsTemplate.bind({});
+StaticFilters.storyName = "Static Filters";
+StaticFilters.argTypes = {
+  textSearchQuery: {
+    control: false,
+  },
+};
+StaticFilters.args = Object.assign({ filterColumn: "product_type", filterValue: "Möbel > Schränke & Regale" }, generalArgs);
+export const TextSearch = ResultsTemplate.bind({});
+TextSearch.storyName = "Text Search";
+TextSearch.argTypes = {
+  filterValue: {
+    control: false,
+  },
+  filterColumn: {
+    control: false,
+  },
+};
+TextSearch.args = Object.assign({ textSearchQuery: "Chair" }, generalArgs);

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

@@ -74,6 +74,7 @@ export class VviinnResults {
     };
     this.token = undefined;
     this.searchId = undefined;
+    this.uiSessionId = undefined;
     this.imageResolutionWidth = 250;
     this.currencySign = "€";
     this.locale = "de-DE";
@@ -83,11 +84,10 @@ export class VviinnResults {
     this.filterColumn = "product_type";
     this.filterValue = undefined;
     this.resultsCount = undefined;
-    this.showingInWidget = false;
-    this.uiSessionId = undefined;
+    this.showInWidget = false;
+    this.apiPath = "https://api.vviinn.com";
     this.buttonElementId = undefined;
     this.widgetElementId = undefined;
-    this.apiPath = "https://api.vviinn.com";
     this.showAspectRatioError = undefined;
     this.trackingDeactivated = false;
     this.resetState = undefined;
@@ -166,13 +166,13 @@ export class VviinnResults {
     }
   }
   async getResultsByTextQuery(query, filters) {
-    if (this.showingInWidget || query === undefined)
+    if (this.showInWidget || !query)
       return;
     state.apiPath = this.apiPath; //FIXME: #36877
     pipe(await makeSearchQueryRequest(this.token, query, this.resultsCount, filters), E.getOrElse(() => null), (response) => {
-      var _a, _b;
-      this.recommendations = (_a = response === null || response === void 0 ? void 0 : response.data.products) !== null && _a !== void 0 ? _a : [];
-      this.vviinnFilters.emit((_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.interactions.dynamicFilters);
+      var _a, _b, _c;
+      this.recommendations = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.products) !== null && _b !== void 0 ? _b : [];
+      this.vviinnFilters.emit((_c = response === null || response === void 0 ? void 0 : response.data) === null || _c === void 0 ? void 0 : _c.interactions.dynamicFilters);
     });
   }
   async getResultsByCategory() {
@@ -180,8 +180,8 @@ export class VviinnResults {
       return;
     state.apiPath = this.apiPath; //FIXME: #36877
     pipe(await makeProductListingPageRequest(this.token, this.filterColumn, this.filterValue, this.resultsCount), E.getOrElse(() => null), (response) => {
-      var _a;
-      this.recommendations = (_a = response === null || response === void 0 ? void 0 : response.data.products) !== null && _a !== void 0 ? _a : [];
+      var _a, _b;
+      this.recommendations = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.products) !== null && _b !== void 0 ? _b : [];
     });
   }
   trackResultEvent(type) {
@@ -233,21 +233,21 @@ export class VviinnResults {
   }
   render() {
     return (h(Host, { id: "results-block", class: {
-        "widget-results": this.showingInWidget,
+        "widget-results": this.showInWidget,
       }, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card" }, h("div", { class: {
         "nothing-found": true,
         hidden: this.recommendations.length > 0 ||
           searchState.results.length > 0 ||
-          !this.showingInWidget,
+          !this.showInWidget,
       } }, h("vviinn-empty-results", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), h("div", { class: {
         "nothing-found": true,
-        hidden: !this.showAspectRatioError || !this.showingInWidget,
+        hidden: !this.showAspectRatioError || !this.showInWidget,
       } }, h("vviinn-wrong-aspect-ratio", { handler: () => this === null || this === void 0 ? void 0 : this.resetState() })), h("div", { class: {
         hidden: this.showAspectRatioError ||
           (this.recommendations.length === 0 &&
             searchState.results.length === 0),
         products: true,
-      } }, this.renderResults(this.showingInWidget ? searchState.results : this.recommendations))));
+      } }, this.renderResults(this.showInWidget ? searchState.results : this.recommendations))));
   }
   static get is() { return "vviinn-results"; }
   static get encapsulation() { return "shadow"; }
@@ -297,6 +297,23 @@ export class VviinnResults {
         "attribute": "search-id",
         "reflect": false
       },
+      "uiSessionId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "uiSessionId from vps-widget"
+        },
+        "attribute": "ui-session-id",
+        "reflect": false
+      },
       "imageResolutionWidth": {
         "type": "number",
         "mutable": false,
@@ -418,7 +435,7 @@ export class VviinnResults {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Column for performing Product Listing Page request"
@@ -436,7 +453,7 @@ export class VviinnResults {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Value for performing Product Listing Page request"
@@ -461,7 +478,7 @@ export class VviinnResults {
         "attribute": "results-count",
         "reflect": false
       },
-      "showingInWidget": {
+      "showInWidget": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -472,19 +489,16 @@ export class VviinnResults {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
+          "tags": [],
+          "text": "True when we use vviinn-results inside the widget"
         },
-        "attribute": "showing-in-widget",
+        "attribute": "show-in-widget",
         "reflect": false,
         "defaultValue": "false"
       },
-      "uiSessionId": {
+      "apiPath": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -499,8 +513,9 @@ export class VviinnResults {
             }],
           "text": ""
         },
-        "attribute": "ui-session-id",
-        "reflect": false
+        "attribute": "api-path",
+        "reflect": false,
+        "defaultValue": "\"https://api.vviinn.com\""
       },
       "buttonElementId": {
         "type": "string",
@@ -542,27 +557,6 @@ export class VviinnResults {
         "attribute": "widget-element-id",
         "reflect": false
       },
-      "apiPath": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "attribute": "api-path",
-        "reflect": false,
-        "defaultValue": "\"https://api.vviinn.com\""
-      },
       "showAspectRatioError": {
         "type": "boolean",
         "mutable": false,
@@ -731,6 +725,29 @@ export class VviinnResults {
             }
           }
         }
+      }, {
+        "method": "vviinnFiltersChanged",
+        "name": "vviinnFiltersChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ChangedFiltersEventData",
+          "resolved": "{ filters: { column: string; values: string[] | { start?: number; end?: number; }[]; }[]; el: HTMLElement; }",
+          "references": {
+            "ChangedFiltersEventData": {
+              "location": "import",
+              "path": "../../recommendation/events"
+            }
+          }
+        }
       }, {
         "method": "vviinnSearchIdReceived",
         "name": "vviinnSearchIdReceived",
@@ -738,8 +755,11 @@ export class VviinnResults {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "The 'searchId' is received for performing a Visual Search"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "SearchIdEventData",
@@ -758,8 +778,11 @@ export class VviinnResults {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "The 'query' is received for performing a Text Search"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "TextSearchEventData",
@@ -778,8 +801,11 @@ export class VviinnResults {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Dynamic filters are received from the API."
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "DynamicFiltersEventData",
@@ -791,26 +817,6 @@ export class VviinnResults {
             }
           }
         }
-      }, {
-        "method": "vviinnFiltersChanged",
-        "name": "vviinnFiltersChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "The filter's state changes"
-        },
-        "complexType": {
-          "original": "ChangedFiltersEventData",
-          "resolved": "{ filters: { column: string; values: string[] | { start?: number; end?: number; }[]; }[]; el: HTMLElement; }",
-          "references": {
-            "ChangedFiltersEventData": {
-              "location": "import",
-              "path": "../../recommendation/events"
-            }
-          }
-        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/vviinn-text-search/stories/vviinn-text-search.stories.js

@@ -0,0 +1,40 @@
+const textSearchDecorator = (story) => `
+    <div>
+      ${story()}
+    </div>
+  `;
+export default {
+  title: "Widgets/Search",
+  component: "vviinn-text-search",
+  decorators: [textSearchDecorator],
+};
+const Template = (args) => `
+  <vviinn-text-search 
+    token="${args.token}"
+    api-path="${args.apiPath}"
+    search-query="${args.searchQuery}"
+    mode="${args.mode}"
+    locale="${args.locale}"
+    show-in-widget="${args.showInWidget}"
+  ></vviinn-text-search>
+  
+  <vviinn-results 
+    token="${args.token}"
+  ></vviinn-results>
+`;
+export const TextSearch = Template.bind({});
+TextSearch.storyName = "Text Search";
+TextSearch.args = {
+  token: process.env.STORYBOOK_TOKEN,
+  apiPath: process.env.STORYBOOK_API_PATH,
+  searchQuery: "",
+  mode: "textAndImage",
+  locale: "en-US",
+  showInWidget: false,
+};
+TextSearch.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/design/4xUlo6X4l7FHKcHkJRW4C4/Visual-Search-Widget?node-id=1370-226&t=iiWX4CdPIRXmBKQ3-0",
+  },
+};

package/dist/collection/components/vviinn-text-search/vviinn-text-search.js

@@ -16,9 +16,9 @@ export class VviinnTextSearch {
     this.token = undefined;
     this.locale = "de-DE";
     this.mode = "text";
-    this.apiPath = "https://api.vviinn.com";
     this.showInWidget = false;
     this.searchQuery = undefined;
+    this.apiPath = "https://api.vviinn.com";
   }
   async componentWillLoad() {
     await i18next.init({
@@ -136,24 +136,6 @@ export class VviinnTextSearch {
         "reflect": false,
         "defaultValue": "\"text\""
       },
-      "apiPath": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "API path passed from widget"
-        },
-        "attribute": "api-path",
-        "reflect": false,
-        "defaultValue": "\"https://api.vviinn.com\""
-      },
       "showInWidget": {
         "type": "boolean",
         "mutable": false,
@@ -188,6 +170,27 @@ export class VviinnTextSearch {
         },
         "attribute": "search-query",
         "reflect": false
+      },
+      "apiPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "api-path",
+        "reflect": false,
+        "defaultValue": "\"https://api.vviinn.com\""
       }
     };
   }
@@ -200,7 +203,7 @@ export class VviinnTextSearch {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "A text search was initiated (used by the vviinn-results component)"
+          "text": "A text search was initiated (used by vviinn-results component)"
         },
         "complexType": {
           "original": "TextSearchEventData",
@@ -213,28 +216,28 @@ export class VviinnTextSearch {
           }
         }
       }, {
-        "method": "vviinnTextSearchFinished",
-        "name": "vviinnTextSearchFinished",
+        "method": "vviinnSearchIdReceived",
+        "name": "vviinnSearchIdReceived",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "A text search API response was received (used internally by vviinn-vps-widget)"
+          "text": "An image search ID was received (used by vviinn-results component)"
         },
         "complexType": {
-          "original": "TextSearchEventData",
-          "resolved": "{ query: string; }",
+          "original": "SearchIdEventData",
+          "resolved": "{ searchId: string; }",
           "references": {
-            "TextSearchEventData": {
+            "SearchIdEventData": {
               "location": "import",
               "path": "../../recommendation/events"
             }
           }
         }
       }, {
-        "method": "vviinnSearchIdReceived",
-        "name": "vviinnSearchIdReceived",
+        "method": "vviinnTextSearchFinished",
+        "name": "vviinnTextSearchFinished",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -246,10 +249,10 @@ export class VviinnTextSearch {
           "text": ""
         },
         "complexType": {
-          "original": "SearchIdEventData",
-          "resolved": "{ searchId: string; }",
+          "original": "TextSearchEventData",
+          "resolved": "{ query: string; }",
           "references": {
-            "SearchIdEventData": {
+            "TextSearchEventData": {
               "location": "import",
               "path": "../../recommendation/events"
             }

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js

@@ -412,7 +412,7 @@ export class VviinnVpsWidget {
       } }, h("div", { class: "filters" }, searchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() }))))))), this.isResultSlide() && searchState.searchType === "text" && (h("div", { class: "source-wrapper text-search-wrapper" }, h("vviinn-text-search", { token: this.token, showInWidget: true, searchQuery: this.searchQuery, apiPath: this.apiPath }), h("div", { class: {
         "filters-wrapper": true,
         hidden: this.showAspectRatioError,
-      } }, h("div", { class: "filters" }, searchState.textSearchFilters.map((filter) => (h("search-filters", { textSearchFiltersGroup: filter, basicEventData: this.getBasicEventData() }))))))), this.isResultSlide() && (h("vviinn-results", { token: this.token, uiSessionId: this.uiSessionId, apiPath: this.apiPath, widgetElementId: (_b = this.buttonElementId) !== null && _b !== void 0 ? _b : this.widgetElementId, showingInWidget: true, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, "currency-sign": this.currencySign, locale: this.locale, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, showAspectRatioError: this.showAspectRatioError, trackingDeactivated: this.trackingDeactivated, resetState: this.resetState.bind(this), textSearchQuery: this.searchQuery })))))));
+      } }, h("div", { class: "filters" }, searchState.textSearchFilters.map((filter) => (h("search-filters", { textSearchFiltersGroup: filter, basicEventData: this.getBasicEventData() }))))))), this.isResultSlide() && (h("vviinn-results", { token: this.token, uiSessionId: this.uiSessionId, apiPath: this.apiPath, widgetElementId: (_b = this.buttonElementId) !== null && _b !== void 0 ? _b : this.widgetElementId, showInWidget: true, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, "currency-sign": this.currencySign, locale: this.locale, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, showAspectRatioError: this.showAspectRatioError, trackingDeactivated: this.trackingDeactivated, resetState: this.resetState.bind(this), textSearchQuery: this.searchQuery })))))));
   }
   static get is() { return "vviinn-vps-widget"; }
   static get encapsulation() { return "shadow"; }