vviinn-widgets 2.70.0 → 2.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/cjs/{package-06742275.js → package-b881276e.js} +1 -1
  2. package/dist/cjs/search-filters_18.cjs.entry.js +1 -1
  3. package/dist/cjs/vviinn-carousel_7.cjs.entry.js +10 -11
  4. package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
  5. package/dist/cjs/vviinn-vps-button.cjs.entry.js +1 -1
  6. package/dist/cjs/vviinn-vps-widget.cjs.entry.js +1 -1
  7. package/dist/collection/components/image-search/search-filters/search-filters.js +1 -1
  8. package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +1 -1
  9. package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js +4 -4
  10. package/dist/collection/components/vviinn-filters/vviinn-filters.css +9 -3
  11. package/dist/collection/components/vviinn-filters/vviinn-filters.js +5 -6
  12. package/dist/collection/components/vviinn-price-range/vviinn-price-range.js +1 -1
  13. package/dist/esm/{package-25e28732.js → package-8304cd0d.js} +1 -1
  14. package/dist/esm/search-filters_18.entry.js +1 -1
  15. package/dist/esm/vviinn-carousel_7.entry.js +10 -11
  16. package/dist/esm/vviinn-vpr-button.entry.js +1 -1
  17. package/dist/esm/vviinn-vps-button.entry.js +1 -1
  18. package/dist/esm/vviinn-vps-widget.entry.js +1 -1
  19. package/dist/types/campaign/CampaignService.d.ts +46 -18
  20. package/dist/types/campaign/VCSCampaignService.d.ts +16 -8
  21. package/dist/types/campaign/VPRCampaignService.d.ts +16 -8
  22. package/dist/types/interfaces/generated.d.ts +71 -26
  23. package/dist/types/store/search.store.d.ts +29 -16
  24. package/dist/vviinn-widgets/{p-8f7cfb31.entry.js → p-01d0830c.entry.js} +1 -1
  25. package/dist/vviinn-widgets/{p-38670bfa.entry.js → p-0331fcec.entry.js} +1 -1
  26. package/dist/vviinn-widgets/{p-ec459b83.entry.js → p-5a076ce7.entry.js} +1 -1
  27. package/dist/vviinn-widgets/p-7e9841a3.js +1 -0
  28. package/{www/build/p-2843b0fd.entry.js → dist/vviinn-widgets/p-8c2077b7.entry.js} +1 -1
  29. package/dist/vviinn-widgets/p-ceadd3ea.entry.js +1 -0
  30. package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
  31. package/package.json +1 -1
  32. package/www/build/{p-8f7cfb31.entry.js → p-01d0830c.entry.js} +1 -1
  33. package/www/build/{p-38670bfa.entry.js → p-0331fcec.entry.js} +1 -1
  34. package/www/build/{p-ec459b83.entry.js → p-5a076ce7.entry.js} +1 -1
  35. package/www/build/p-7e9841a3.js +1 -0
  36. package/{dist/vviinn-widgets/p-2843b0fd.entry.js → www/build/p-8c2077b7.entry.js} +1 -1
  37. package/www/build/p-ceadd3ea.entry.js +1 -0
  38. package/www/build/vviinn-widgets.esm.js +1 -1
  39. package/dist/vviinn-widgets/p-2fccde3f.entry.js +0 -1
  40. package/dist/vviinn-widgets/p-9b0fa6cf.js +0 -1
  41. package/www/build/p-2fccde3f.entry.js +0 -1
  42. package/www/build/p-9b0fa6cf.js +0 -1
package/dist/cjs/{package-06742275.js → package-b881276e.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const version = "2.70.0";
3
+ const version = "2.71.0";
4
4
 
5
5
  exports.version = version;
package/dist/cjs/search-filters_18.cjs.entry.js CHANGED
@@ -7,7 +7,7 @@ const search_store = require('./search.store-f50e5eb2.js');
7
7
  const index$1 = require('./index-527baa9b.js');
8
8
  const customizedSlots = require('./customized-slots-dacb282b.js');
9
9
  const PlusIcon = require('./PlusIcon-835a5dcc.js');
10
- const _package = require('./package-06742275.js');
10
+ const _package = require('./package-b881276e.js');
11
11
  const CameraIcon = require('./CameraIcon-5b8efacb.js');
12
12
 
13
13
  const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
package/dist/cjs/vviinn-carousel_7.cjs.entry.js CHANGED
@@ -7,7 +7,7 @@ const search_store = require('./search.store-f50e5eb2.js');
7
7
  const customizedSlots = require('./customized-slots-dacb282b.js');
8
8
  const index$1 = require('./index-527baa9b.js');
9
9
  const PlusIcon = require('./PlusIcon-835a5dcc.js');
10
- const _package = require('./package-06742275.js');
10
+ const _package = require('./package-b881276e.js');
11
11
 
12
12
  const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
13
13
  index.h("path", { d: "M7.5 22C6.95 22 6.47917 21.8042 6.0875 21.4125C5.69583 21.0208 5.5 20.55 5.5 20C5.5 19.45 5.69583 18.9792 6.0875 18.5875C6.47917 18.1958 6.95 18 7.5 18C8.05 18 8.52083 18.1958 8.9125 18.5875C9.30417 18.9792 9.5 19.45 9.5 20C9.5 20.55 9.30417 21.0208 8.9125 21.4125C8.52083 21.8042 8.05 22 7.5 22ZM17.5 22C16.95 22 16.4792 21.8042 16.0875 21.4125C15.6958 21.0208 15.5 20.55 15.5 20C15.5 19.45 15.6958 18.9792 16.0875 18.5875C16.4792 18.1958 16.95 18 17.5 18C18.05 18 18.5208 18.1958 18.9125 18.5875C19.3042 18.9792 19.5 19.45 19.5 20C19.5 20.55 19.3042 21.0208 18.9125 21.4125C18.5208 21.8042 18.05 22 17.5 22ZM6.65 6L9.05 11H16.05L18.8 6H6.65ZM5.7 4H20.45C20.8333 4 21.125 4.17083 21.325 4.5125C21.525 4.85417 21.5333 5.2 21.35 5.55L17.8 11.95C17.6167 12.2833 17.3708 12.5417 17.0625 12.725C16.7542 12.9083 16.4167 13 16.05 13H8.6L7.5 15H18.5C18.7833 15 19.0208 15.0958 19.2125 15.2875C19.4042 15.4792 19.5 15.7167 19.5 16C19.5 16.2833 19.4042 16.5208 19.2125 16.7125C19.0208 16.9042 18.7833 17 18.5 17H7.5C6.75 17 6.18333 16.6708 5.8 16.0125C5.41667 15.3542 5.4 14.7 5.75 14.05L7.1 11.6L3.5 4H2.5C2.21667 4 1.97917 3.90417 1.7875 3.7125C1.59583 3.52083 1.5 3.28333 1.5 3C1.5 2.71667 1.59583 2.47917 1.7875 2.2875C1.97917 2.09583 2.21667 2 2.5 2H4.125C4.30833 2 4.48333 2.05 4.65 2.15C4.81667 2.25 4.94167 2.39167 5.025 2.575L5.7 4Z", fill: "#525252" })));
@@ -476,7 +476,7 @@ const subFilterSelection = (filters, { column: selectedColumn }, filterValue) =>
476
476
  return filters;
477
477
  };
478
478
 
479
- const vviinnFiltersCss$1 = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.filters-sub-button.active{border-color:#000}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
479
+ const vviinnFiltersCss$1 = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.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))}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-more-modal-button:disabled{cursor:not-allowed;color:var(--text-color-text-disabled, rgba(22, 22, 22, 0.25))}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
480
480
 
481
481
  const VviinnExtendedFilters = class {
482
482
  constructor(hostRef) {
@@ -597,9 +597,9 @@ const VviinnExtendedFilters = class {
597
597
  : ""} ${this.selectedMoreOptions.includes(mainFilter.column)
598
598
  ? "open"
599
599
  : ""}` }, filterOptions &&
600
- filterOptions.map((filter) => {
601
- const hexCode = filter.value.hexCode;
602
- return (index.h("li", null, index.h("button", { onClick: () => this.handleSubFilterSelection(filter.value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnModalSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, index.h("span", null, filter.label))));
600
+ filterOptions.map(({ value, label, active }) => {
601
+ const hexCode = value.hexCode;
602
+ return (index.h("li", null, index.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 }, index.h("span", null, label))));
603
603
  })))));
604
604
  })), index.h("div", { class: "filters-modal-actions" }, index.h("button", { class: "filters-modal-apply", onClick: () => (this.showMore = false), disabled: this.requestFilters.length === 0 }, index.h("slot", { name: "vviinn-extended-filters-apply" }, index$1.instance.t("filters.modal.apply"))), index.h("button", { class: "filters-modal-reset", onClick: () => this.resetModal() }, index.h("slot", { name: "vviinn-extended-filters-reset" }, index$1.instance.t("filters.modal.resetFilters"))))))));
605
605
  }
@@ -610,7 +610,7 @@ const VviinnExtendedFilters = class {
610
610
  };
611
611
  VviinnExtendedFilters.style = vviinnFiltersCss$1;
612
612
 
613
- const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.filters-sub-button.active{border-color:#000}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
613
+ const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.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))}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-more-modal-button:disabled{cursor:not-allowed;color:var(--text-color-text-disabled, rgba(22, 22, 22, 0.25))}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
614
614
 
615
615
  const VviinnFilters = class {
616
616
  constructor(hostRef) {
@@ -692,16 +692,15 @@ const VviinnFilters = class {
692
692
  var _a;
693
693
  const { column } = (_a = this.selectedFilter) !== null && _a !== void 0 ? _a : {};
694
694
  const selectedFilterOptions = getFilterOptions(this.selectedFilter);
695
- //TODO - #36707: Will remove this logic then we have the `Primary filters` feature
696
- const filters = this.filters.slice(0, 4);
695
+ const filters = this.filters.filter((filter) => filter.isPrimary);
697
696
  if (filters.length === 0)
698
697
  return index.h(index.Host, null);
699
698
  return (index.h(index.Host, { part: "filters" }, index.h("div", { class: "main-filters-wrapper" }, index.h("ul", { class: "main-filters-list" }, filters.map((filter) => {
700
699
  return (index.h("li", null, index.h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.label)));
701
700
  }))), this.selectedFilter !== undefined && (index.h("div", { class: "filters-footer" }, column === "price" ? (index.h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler })) : (index.h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
702
- selectedFilterOptions.map((filter) => {
703
- const hexCode = filter.value.hexCode;
704
- return (index.h("li", null, index.h("button", { onClick: () => this.handleSubFilterSelection(filter.value, this.selectedFilter), class: `filters-sub-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, index.h("span", null, filter.label))));
701
+ selectedFilterOptions.map(({ value, label, active }) => {
702
+ const hexCode = value.hexCode;
703
+ return (index.h("li", null, index.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 }, index.h("span", null, label))));
705
704
  })))))));
706
705
  }
707
706
  get el() { return index.getElement(this); }
package/dist/cjs/vviinn-vpr-button.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-4474431a.js');
6
- const _package = require('./package-06742275.js');
6
+ const _package = require('./package-b881276e.js');
7
7
  const VisualSearchIcon = require('./VisualSearchIcon-f435f5b0.js');
8
8
 
9
9
  const vviinnVprButtonCss = ":host{display:block}";
package/dist/cjs/vviinn-vps-button.cjs.entry.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-4474431a.js');
6
- const _package = require('./package-06742275.js');
6
+ const _package = require('./package-b881276e.js');
7
7
  const CameraIcon = require('./CameraIcon-5b8efacb.js');
8
8
  const customizedSlots = require('./customized-slots-dacb282b.js');
9
9
  const constants = require('./constants-7684cbfc.js');
package/dist/cjs/vviinn-vps-widget.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-4474431a.js');
6
6
  const search_store = require('./search.store-f50e5eb2.js');
7
7
  const index$1 = require('./index-527baa9b.js');
8
- const _package = require('./package-06742275.js');
8
+ const _package = require('./package-b881276e.js');
9
9
  const customizedSlots = require('./customized-slots-dacb282b.js');
10
10
  const constants = require('./constants-7684cbfc.js');
11
11
 
package/dist/collection/components/image-search/search-filters/search-filters.js CHANGED
@@ -189,7 +189,7 @@ export class SearchFilters {
189
189
  "mutable": false,
190
190
  "complexType": {
191
191
  "original": "ResponseFilterItem | null",
192
- "resolved": "{ column: string; label: string; 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; } & { selected: boolean; } & { value: unknown; label: unknown; })[]; }",
192
+ "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; })[]; }",
193
193
  "references": {
194
194
  "ResponseFilterItem": {
195
195
  "location": "import",
package/dist/collection/components/vviinn-carousel/vviinn-carousel.js CHANGED
@@ -447,7 +447,7 @@ export class VviinnCarousel {
447
447
  "mutable": true,
448
448
  "complexType": {
449
449
  "original": "Recommendation[]",
450
- "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }[]",
450
+ "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; energyEfficiencyClass?: \"A+++\" | \"A++\" | \"A+\" | \"A\" | \"B\" | \"C\" | \"D\" | \"E\" | \"F\" | \"G\"; minEnergyEfficiencyClass?: \"A+++\" | \"A++\" | \"A+\" | \"A\" | \"B\" | \"C\" | \"D\" | \"E\" | \"F\" | \"G\"; maxEnergyEfficiencyClass?: \"A+++\" | \"A++\" | \"A+\" | \"A\" | \"B\" | \"C\" | \"D\" | \"E\" | \"F\" | \"G\"; }[]",
451
451
  "references": {
452
452
  "Recommendation": {
453
453
  "location": "import",
package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js CHANGED
@@ -123,9 +123,9 @@ export class VviinnExtendedFilters {
123
123
  : ""} ${this.selectedMoreOptions.includes(mainFilter.column)
124
124
  ? "open"
125
125
  : ""}` }, filterOptions &&
126
- filterOptions.map((filter) => {
127
- const hexCode = filter.value.hexCode;
128
- return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(filter.value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnModalSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, h("span", null, filter.label))));
126
+ filterOptions.map(({ value, label, active }) => {
127
+ const hexCode = value.hexCode;
128
+ 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))));
129
129
  })))));
130
130
  })), 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"))))))));
131
131
  }
@@ -148,7 +148,7 @@ export class VviinnExtendedFilters {
148
148
  "mutable": false,
149
149
  "complexType": {
150
150
  "original": "DynamicFilters",
151
- "resolved": "({ column: string; label: string; 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; } & { selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: ({ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; } & { selected: unknown; })[]; histogram: ({ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; } & { selected: unknown; })[]; })[]",
151
+ "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; }[]; })[]",
152
152
  "references": {
153
153
  "DynamicFilters": {
154
154
  "location": "import",
package/dist/collection/components/vviinn-filters/vviinn-filters.css CHANGED
@@ -106,12 +106,10 @@
106
106
  .filters-footer {
107
107
  margin: 16px 0;
108
108
  }
109
-
110
109
  .sub-filters-wrapper {
111
110
  gap: 12px;
112
111
  display: flex;
113
112
  }
114
-
115
113
  .filters-sub-button {
116
114
  color: #000;
117
115
 
@@ -127,7 +125,11 @@
127
125
  .filters-sub-button.active {
128
126
  border-color: #000;
129
127
  }
130
-
128
+ .filters-sub-button:disabled {
129
+ cursor: not-allowed;
130
+ background: var(--button-color-button-disabled);
131
+ color: var(--text-color-text-disabled, rgba(22, 22, 22, 0.25));
132
+ }
131
133
  .filters-more-button {
132
134
  display: flex;
133
135
  padding: 10px;
@@ -258,6 +260,10 @@
258
260
  .filters-more-modal-button.active {
259
261
  color: var(--color-primary-system);
260
262
  }
263
+ .filters-more-modal-button:disabled {
264
+ cursor: not-allowed;
265
+ color: var(--text-color-text-disabled, rgba(22, 22, 22, 0.25));
266
+ }
261
267
 
262
268
  .filters-modal-actions {
263
269
  border-top: 1px solid var(--gray-10);
package/dist/collection/components/vviinn-filters/vviinn-filters.js CHANGED
@@ -80,16 +80,15 @@ export class VviinnFilters {
80
80
  var _a;
81
81
  const { column } = (_a = this.selectedFilter) !== null && _a !== void 0 ? _a : {};
82
82
  const selectedFilterOptions = getFilterOptions(this.selectedFilter);
83
- //TODO - #36707: Will remove this logic then we have the `Primary filters` feature
84
- const filters = this.filters.slice(0, 4);
83
+ const filters = this.filters.filter((filter) => filter.isPrimary);
85
84
  if (filters.length === 0)
86
85
  return h(Host, null);
87
86
  return (h(Host, { part: "filters" }, h("div", { class: "main-filters-wrapper" }, h("ul", { class: "main-filters-list" }, filters.map((filter) => {
88
87
  return (h("li", null, h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.label)));
89
88
  }))), this.selectedFilter !== undefined && (h("div", { class: "filters-footer" }, column === "price" ? (h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler })) : (h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
90
- selectedFilterOptions.map((filter) => {
91
- const hexCode = filter.value.hexCode;
92
- return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(filter.value, this.selectedFilter), class: `filters-sub-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, h("span", null, filter.label))));
89
+ selectedFilterOptions.map(({ value, label, active }) => {
90
+ const hexCode = value.hexCode;
91
+ 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))));
93
92
  })))))));
94
93
  }
95
94
  static get is() { return "vviinn-filters"; }
@@ -111,7 +110,7 @@ export class VviinnFilters {
111
110
  "mutable": false,
112
111
  "complexType": {
113
112
  "original": "DynamicFilters",
114
- "resolved": "({ column: string; label: string; 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; } & { selected: boolean; } & { value: unknown; label: unknown; })[]; } | { column: string; label: string; full: { start?: number; end?: number; }; selectedValues: { start?: number; end?: number; }[]; suggestions: ({ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; } & { selected: unknown; })[]; histogram: ({ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; } & { selected: unknown; })[]; })[]",
113
+ "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; }[]; })[]",
115
114
  "references": {
116
115
  "DynamicFilters": {
117
116
  "location": "import",
package/dist/collection/components/vviinn-price-range/vviinn-price-range.js CHANGED
@@ -96,7 +96,7 @@ export class VviinnButton {
96
96
  "mutable": false,
97
97
  "complexType": {
98
98
  "original": "Histogram",
99
- "resolved": "({ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; } & { selected: unknown; })[]",
99
+ "resolved": "{ value: { frequency?: number; interval?: { start?: number; end?: number; }; }; label: string; active: boolean; }[]",
100
100
  "references": {
101
101
  "Histogram": {
102
102
  "location": "local",
package/dist/esm/{package-25e28732.js → package-8304cd0d.js} RENAMED
@@ -1,3 +1,3 @@
1
- const version = "2.70.0";
1
+ const version = "2.71.0";
2
2
 
3
3
  export { version as v };
package/dist/esm/search-filters_18.entry.js CHANGED
@@ -3,7 +3,7 @@ import { s as searchState, _ as _function, O as Option, l as fromAlt, n as foldV
3
3
  import { i as instance, c as createTrackingApi, v as v4, n as createResultVpsEventByType, o as createProductVpsEventByType, r as resources } from './index-9ceefeab.js';
4
4
  import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-299054d1.js';
5
5
  import { P as PlusIcon } from './PlusIcon-8f8206c3.js';
6
- import { v as version } from './package-25e28732.js';
6
+ import { v as version } from './package-8304cd0d.js';
7
7
  import { C as CameraIcon } from './CameraIcon-785208d2.js';
8
8
 
9
9
  const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
package/dist/esm/vviinn-carousel_7.entry.js CHANGED
@@ -3,7 +3,7 @@ import { h as has, t as tuple, s as searchState, _ as _function, a as _Array, O
3
3
  import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton, f as fromString, a as fold } from './customized-slots-299054d1.js';
4
4
  import { i as instance, r as resources, v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, j as createProductVprEventByType } from './index-9ceefeab.js';
5
5
  import { P as PlusIcon } from './PlusIcon-8f8206c3.js';
6
- import { v as version } from './package-25e28732.js';
6
+ import { v as version } from './package-8304cd0d.js';
7
7
 
8
8
  const BasketIcon = () => (h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
9
9
  h("path", { d: "M7.5 22C6.95 22 6.47917 21.8042 6.0875 21.4125C5.69583 21.0208 5.5 20.55 5.5 20C5.5 19.45 5.69583 18.9792 6.0875 18.5875C6.47917 18.1958 6.95 18 7.5 18C8.05 18 8.52083 18.1958 8.9125 18.5875C9.30417 18.9792 9.5 19.45 9.5 20C9.5 20.55 9.30417 21.0208 8.9125 21.4125C8.52083 21.8042 8.05 22 7.5 22ZM17.5 22C16.95 22 16.4792 21.8042 16.0875 21.4125C15.6958 21.0208 15.5 20.55 15.5 20C15.5 19.45 15.6958 18.9792 16.0875 18.5875C16.4792 18.1958 16.95 18 17.5 18C18.05 18 18.5208 18.1958 18.9125 18.5875C19.3042 18.9792 19.5 19.45 19.5 20C19.5 20.55 19.3042 21.0208 18.9125 21.4125C18.5208 21.8042 18.05 22 17.5 22ZM6.65 6L9.05 11H16.05L18.8 6H6.65ZM5.7 4H20.45C20.8333 4 21.125 4.17083 21.325 4.5125C21.525 4.85417 21.5333 5.2 21.35 5.55L17.8 11.95C17.6167 12.2833 17.3708 12.5417 17.0625 12.725C16.7542 12.9083 16.4167 13 16.05 13H8.6L7.5 15H18.5C18.7833 15 19.0208 15.0958 19.2125 15.2875C19.4042 15.4792 19.5 15.7167 19.5 16C19.5 16.2833 19.4042 16.5208 19.2125 16.7125C19.0208 16.9042 18.7833 17 18.5 17H7.5C6.75 17 6.18333 16.6708 5.8 16.0125C5.41667 15.3542 5.4 14.7 5.75 14.05L7.1 11.6L3.5 4H2.5C2.21667 4 1.97917 3.90417 1.7875 3.7125C1.59583 3.52083 1.5 3.28333 1.5 3C1.5 2.71667 1.59583 2.47917 1.7875 2.2875C1.97917 2.09583 2.21667 2 2.5 2H4.125C4.30833 2 4.48333 2.05 4.65 2.15C4.81667 2.25 4.94167 2.39167 5.025 2.575L5.7 4Z", fill: "#525252" })));
@@ -472,7 +472,7 @@ const subFilterSelection = (filters, { column: selectedColumn }, filterValue) =>
472
472
  return filters;
473
473
  };
474
474
 
475
- const vviinnFiltersCss$1 = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.filters-sub-button.active{border-color:#000}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
475
+ const vviinnFiltersCss$1 = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.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))}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-more-modal-button:disabled{cursor:not-allowed;color:var(--text-color-text-disabled, rgba(22, 22, 22, 0.25))}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
476
476
 
477
477
  const VviinnExtendedFilters = class {
478
478
  constructor(hostRef) {
@@ -593,9 +593,9 @@ const VviinnExtendedFilters = class {
593
593
  : ""} ${this.selectedMoreOptions.includes(mainFilter.column)
594
594
  ? "open"
595
595
  : ""}` }, filterOptions &&
596
- filterOptions.map((filter) => {
597
- const hexCode = filter.value.hexCode;
598
- return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(filter.value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnModalSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, h("span", null, filter.label))));
596
+ filterOptions.map(({ value, label, active }) => {
597
+ const hexCode = value.hexCode;
598
+ 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))));
599
599
  })))));
600
600
  })), 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" }, instance.t("filters.modal.apply"))), h("button", { class: "filters-modal-reset", onClick: () => this.resetModal() }, h("slot", { name: "vviinn-extended-filters-reset" }, instance.t("filters.modal.resetFilters"))))))));
601
601
  }
@@ -606,7 +606,7 @@ const VviinnExtendedFilters = class {
606
606
  };
607
607
  VviinnExtendedFilters.style = vviinnFiltersCss$1;
608
608
 
609
- const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.filters-sub-button.active{border-color:#000}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
609
+ const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--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}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:2px;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close{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);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default);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)}.filters-main-button.active{background:var(--background-color-background)}.filters-footer{margin:16px 0}.sub-filters-wrapper{gap:12px;display:flex}.filters-sub-button{color:#000;padding:10px;border:1px solid var(--border-color-border-01);background:var(--background-color-background)}.filters-sub-button:hover{color:var(--text-color-text-secondary)}.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))}.filters-more-button{display:flex;padding:10px;align-items:flex-start;gap:10px;border-radius:8px;background:var(--surface-color-surface-01);border:none;cursor:pointer}.filters-modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0, 0, 0, 0.5);z-index:98}.filters-modal.open{display:block}.filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;background-color:#ffffff;z-index:99;border-radius:32px 0px 0px 32px;display:flex;flex-direction:column}@media (max-width: 768px){.filters-modal-wrapper{width:100%;top:20%;border-radius:32px 32px 0px 0px}}.filters-modal-header{position:relative;padding:20px 0;color:var(--gray-100);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);display:flex;justify-content:center;gap:5px}.filters-modal-list{margin:4px 0 0 24px;flex:1;overflow-y:auto;padding-bottom:20px}.filters-modal-list>li{padding-right:24px}.filters-modal-main-button{border-bottom:1px solid var(--gray-10);width:100%;background:none;text-align:left;padding:20px 0;color:var(--gray-70);font-family:var(--font-family);font-size:18px;font-style:normal;font-weight:500;line-height:24px}.filters-modal-sub-list{display:none}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{display:inline-block;margin:0 6px}.filters-modal-sub-list.open{display:block}.filters-modal-sub-list>li{margin-top:10px}.filters-modal-close{position:absolute;right:0;top:15px;cursor:pointer;background:none}.filters-more-modal-button{background:none;display:block;border:none;cursor:pointer}.filters-more-modal-button.active{color:var(--color-primary-system)}.filters-more-modal-button:disabled{cursor:not-allowed;color:var(--text-color-text-disabled, rgba(22, 22, 22, 0.25))}.filters-modal-actions{border-top:1px solid var(--gray-10);padding:24px;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;display:flex;width:100%;padding:12px;justify-content:center;align-items:center;gap:10px;border-radius:var(--radius-radius-md);background:var(--button-color-button-primary);cursor:pointer;border:none}.filters-modal-apply:disabled{background:var(--button-color-button-disabled);color:var(--text-color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--text-color-text-secondary);text-align:center;font-family:var(--font-family);font-size:var(--font-size-body);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-default)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--border-color-border-01);border-radius:20px}.filters-sub-button-color>span{display:none}.filters-sub-button-color.active{border:2px solid #fff;outline:2px solid #000;margin:2px 0}.filters-sub-button-color:first-child.active{margin-left:2px}";
610
610
 
611
611
  const VviinnFilters = class {
612
612
  constructor(hostRef) {
@@ -688,16 +688,15 @@ const VviinnFilters = class {
688
688
  var _a;
689
689
  const { column } = (_a = this.selectedFilter) !== null && _a !== void 0 ? _a : {};
690
690
  const selectedFilterOptions = getFilterOptions(this.selectedFilter);
691
- //TODO - #36707: Will remove this logic then we have the `Primary filters` feature
692
- const filters = this.filters.slice(0, 4);
691
+ const filters = this.filters.filter((filter) => filter.isPrimary);
693
692
  if (filters.length === 0)
694
693
  return h(Host, null);
695
694
  return (h(Host, { part: "filters" }, h("div", { class: "main-filters-wrapper" }, h("ul", { class: "main-filters-list" }, filters.map((filter) => {
696
695
  return (h("li", null, h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.label)));
697
696
  }))), this.selectedFilter !== undefined && (h("div", { class: "filters-footer" }, column === "price" ? (h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler })) : (h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
698
- selectedFilterOptions.map((filter) => {
699
- const hexCode = filter.value.hexCode;
700
- return (h("li", null, h("button", { onClick: () => this.handleSubFilterSelection(filter.value, this.selectedFilter), class: `filters-sub-button ${hexCode ? "filters-sub-button-color" : ""} ${this.showActiveOnSubButton(this.requestFilters, filter.value)}`, style: { backgroundColor: hexCode } }, h("span", null, filter.label))));
697
+ selectedFilterOptions.map(({ value, label, active }) => {
698
+ const hexCode = value.hexCode;
699
+ 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))));
701
700
  })))))));
702
701
  }
703
702
  get el() { return getElement(this); }
package/dist/esm/vviinn-vpr-button.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-abf408d8.js';
2
- import { v as version } from './package-25e28732.js';
2
+ import { v as version } from './package-8304cd0d.js';
3
3
  import { V as VisualSearchIcon } from './VisualSearchIcon-b301a1d4.js';
4
4
 
5
5
  const vviinnVprButtonCss = ":host{display:block}";
package/dist/esm/vviinn-vps-button.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-abf408d8.js';
2
- import { v as version } from './package-25e28732.js';
2
+ import { v as version } from './package-8304cd0d.js';
3
3
  import { C as CameraIcon } from './CameraIcon-785208d2.js';
4
4
  import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-299054d1.js';
5
5
  import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
package/dist/esm/vviinn-vps-widget.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { h, r as registerInstance, c as createEvent, F as Fragment, H as Host, g as getElement } from './index-abf408d8.js';
2
2
  import { s as searchState, j as makeTextSearchRequest, d as state, k as parseExcludedToParams, O as Option } from './search.store-441e464a.js';
3
3
  import { i as instance, r as resources, k as createSearchEvent, l as createFilterEvent, v as v4, c as createTrackingApi, m as createWidgetVpsEvent } from './index-9ceefeab.js';
4
- import { v as version } from './package-25e28732.js';
4
+ import { v as version } from './package-8304cd0d.js';
5
5
  import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-299054d1.js';
6
6
  import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
7
7