vviinn-widgets 2.76.1 → 2.77.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.
- package/dist/cjs/{package-c3357b43.js → package-8e5eb559.js} +1 -1
- package/dist/cjs/search-filters_18.cjs.entry.js +5 -5
- package/dist/cjs/vviinn-carousel_8.cjs.entry.js +72 -34
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +2 -2
- package/dist/collection/components/vviinn-filters/helpers/subFilterSelection.js +4 -1
- package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js +18 -17
- package/dist/collection/components/vviinn-filters/vviinn-filters.css +179 -105
- package/dist/collection/components/vviinn-filters/vviinn-filters.js +34 -12
- package/dist/collection/components/vviinn-icons/icons/CheckFilterIcon.js +2 -0
- package/dist/collection/components/vviinn-icons/icons/CloseFilterIcon.js +2 -0
- package/dist/collection/components/vviinn-icons/icons/FiltersIcon.js +1 -1
- package/dist/collection/components/vviinn-icons/icons/SquareFilterIcon.js +2 -0
- package/dist/collection/components/vviinn-icons/icons/StarsIcon.js +2 -0
- package/dist/collection/components/vviinn-icons/index.js +4 -0
- package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.css +0 -23
- package/dist/collection/components/vviinn-price-range/vviinn-price-range.css +12 -33
- package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.css +0 -23
- package/dist/collection/components/vviinn-results/vviinn-results.css +0 -23
- package/dist/collection/components/vviinn-results/vviinn-results.js +2 -2
- package/dist/collection/components/vviinn-slider/vviinn-slider.css +0 -23
- package/dist/collection/components/vviinn-text-search/stories/vviinn-text-search.stories.js +12 -2
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css +0 -23
- package/dist/esm/{package-4c338b8e.js → package-05a9016e.js} +1 -1
- package/dist/esm/search-filters_18.entry.js +5 -5
- package/dist/esm/vviinn-carousel_8.entry.js +72 -34
- package/dist/esm/vviinn-vpr-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-widget.entry.js +2 -2
- package/dist/types/components/vviinn-filters/helpers/index.d.ts +1 -0
- package/dist/types/components/vviinn-filters/vviinn-filters.d.ts +1 -0
- package/dist/types/components/vviinn-icons/icons/CheckFilterIcon.d.ts +1 -0
- package/dist/types/components/vviinn-icons/icons/CloseFilterIcon.d.ts +1 -0
- package/dist/types/components/vviinn-icons/icons/SquareFilterIcon.d.ts +1 -0
- package/dist/types/components/vviinn-icons/icons/StarsIcon.d.ts +1 -0
- package/dist/types/components/vviinn-icons/index.d.ts +4 -0
- package/dist/vviinn-widgets/p-4c3429c9.entry.js +1 -0
- package/{www/build/p-2d72c3bf.entry.js → dist/vviinn-widgets/p-996a9921.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-c6163697.entry.js → p-9af72045.entry.js} +1 -1
- package/dist/vviinn-widgets/p-aa05f7a0.entry.js +11 -0
- package/dist/vviinn-widgets/{p-436ed8f8.entry.js → p-ae346f6c.entry.js} +1 -1
- package/dist/vviinn-widgets/p-fac8ec71.js +1 -0
- package/dist/vviinn-widgets/vviinn-widgets.css +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-4c3429c9.entry.js +1 -0
- package/{dist/vviinn-widgets/p-2d72c3bf.entry.js → www/build/p-996a9921.entry.js} +1 -1
- package/www/build/{p-c6163697.entry.js → p-9af72045.entry.js} +1 -1
- package/www/build/p-aa05f7a0.entry.js +11 -0
- package/www/build/{p-436ed8f8.entry.js → p-ae346f6c.entry.js} +1 -1
- package/www/build/p-fac8ec71.js +1 -0
- package/www/build/vviinn-widgets.css +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-01fcc491.js +0 -1
- package/dist/vviinn-widgets/p-3cc56ac8.entry.js +0 -1
- package/dist/vviinn-widgets/p-81e32ba9.entry.js +0 -11
- package/www/build/p-01fcc491.js +0 -1
- package/www/build/p-3cc56ac8.entry.js +0 -1
- package/www/build/p-81e32ba9.entry.js +0 -11
|
@@ -7,7 +7,7 @@ const search_store = require('./search.store-ba1e2ead.js');
|
|
|
7
7
|
const index$1 = require('./index-21cf53a2.js');
|
|
8
8
|
const customizedSlots = require('./customized-slots-dacb282b.js');
|
|
9
9
|
const PlusIcon = require('./PlusIcon-835a5dcc.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-8e5eb559.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" },
|
|
@@ -232,7 +232,7 @@ const SearchFilters = class {
|
|
|
232
232
|
};
|
|
233
233
|
SearchFilters.style = searchFiltersCss;
|
|
234
234
|
|
|
235
|
-
const vviinnDetectedObjectCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
235
|
+
const vviinnDetectedObjectCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:\"\";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}";
|
|
236
236
|
|
|
237
237
|
const VviinnDetectedObject = class {
|
|
238
238
|
constructor(hostRef) {
|
|
@@ -3975,7 +3975,7 @@ const VviinnPrivacyBadge = class {
|
|
|
3975
3975
|
};
|
|
3976
3976
|
VviinnPrivacyBadge.style = vviinnPrivacyBadgeCss;
|
|
3977
3977
|
|
|
3978
|
-
const vviinnResultsCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
3978
|
+
const vviinnResultsCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block}:host(.widget-results){display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(\n auto-fill,\n minmax(\n var(--vviinn-product-card-width, var(--product-card-width-system)),\n 1fr\n )\n );justify-items:center;padding:24px;position:absolute}:host(:not(.widget-results)) .products{position:static;padding:0}vviinn-product-card{gap:0;width:100%}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute}.hidden{visibility:hidden;height:1px}products.hidden{display:none}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title),vviinn-product-card::part(energy-label){align-self:start}@media (max-width: 768px){:host{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 380px){.products{grid-gap:24px 10px}}";
|
|
3979
3979
|
|
|
3980
3980
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
3981
3981
|
var t = {};
|
|
@@ -4040,7 +4040,7 @@ const VviinnResults = class {
|
|
|
4040
4040
|
this.imageResolutionWidth = 250;
|
|
4041
4041
|
this.currencySign = "€";
|
|
4042
4042
|
this.locale = "de-DE";
|
|
4043
|
-
this.productDetailsNewTab =
|
|
4043
|
+
this.productDetailsNewTab = false;
|
|
4044
4044
|
this.productDetailsRedirect = true;
|
|
4045
4045
|
this.textSearchQuery = undefined;
|
|
4046
4046
|
this.filterColumn = "product_type";
|
|
@@ -4250,7 +4250,7 @@ const getStyleMap = (data) => {
|
|
|
4250
4250
|
const Arrow = ({ kind, tabindex, disabled, onClick, onKeyDown, }) => (index.h("div", { class: getStyleMap({ kind, disabled }), onClick: onClick, tabindex: tabindex, onKeyDown: onKeyDown },
|
|
4251
4251
|
index.h(ArrowIcon, null)));
|
|
4252
4252
|
|
|
4253
|
-
const vviinnSliderCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
4253
|
+
const vviinnSliderCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";
|
|
4254
4254
|
|
|
4255
4255
|
const VviinnSlider = class {
|
|
4256
4256
|
constructor(hostRef) {
|
|
@@ -7,7 +7,7 @@ const search_store = require('./search.store-ba1e2ead.js');
|
|
|
7
7
|
const customizedSlots = require('./customized-slots-dacb282b.js');
|
|
8
8
|
const index$1 = require('./index-21cf53a2.js');
|
|
9
9
|
const PlusIcon = require('./PlusIcon-835a5dcc.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-8e5eb559.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" })));
|
|
@@ -23,7 +23,7 @@ const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg",
|
|
|
23
23
|
index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
|
|
24
24
|
|
|
25
25
|
const FiltersIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
26
|
-
index.h("path", { d: "
|
|
26
|
+
index.h("path", { d: "M12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20V16C11 15.7167 11.0958 15.4792 11.2875 15.2875C11.4792 15.0958 11.7167 15 12 15C12.2833 15 12.5208 15.0958 12.7125 15.2875C12.9042 15.4792 13 15.7167 13 16V17H20C20.2833 17 20.5208 17.0958 20.7125 17.2875C20.9042 17.4792 21 17.7167 21 18C21 18.2833 20.9042 18.5208 20.7125 18.7125C20.5208 18.9042 20.2833 19 20 19H13V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21ZM4 19C3.71667 19 3.47917 18.9042 3.2875 18.7125C3.09583 18.5208 3 18.2833 3 18C3 17.7167 3.09583 17.4792 3.2875 17.2875C3.47917 17.0958 3.71667 17 4 17H8C8.28333 17 8.52083 17.0958 8.7125 17.2875C8.90417 17.4792 9 17.7167 9 18C9 18.2833 8.90417 18.5208 8.7125 18.7125C8.52083 18.9042 8.28333 19 8 19H4ZM8 15C7.71667 15 7.47917 14.9042 7.2875 14.7125C7.09583 14.5208 7 14.2833 7 14V13H4C3.71667 13 3.47917 12.9042 3.2875 12.7125C3.09583 12.5208 3 12.2833 3 12C3 11.7167 3.09583 11.4792 3.2875 11.2875C3.47917 11.0958 3.71667 11 4 11H7V10C7 9.71667 7.09583 9.47917 7.2875 9.2875C7.47917 9.09583 7.71667 9 8 9C8.28333 9 8.52083 9.09583 8.7125 9.2875C8.90417 9.47917 9 9.71667 9 10V14C9 14.2833 8.90417 14.5208 8.7125 14.7125C8.52083 14.9042 8.28333 15 8 15ZM12 13C11.7167 13 11.4792 12.9042 11.2875 12.7125C11.0958 12.5208 11 12.2833 11 12C11 11.7167 11.0958 11.4792 11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11H20C20.2833 11 20.5208 11.0958 20.7125 11.2875C20.9042 11.4792 21 11.7167 21 12C21 12.2833 20.9042 12.5208 20.7125 12.7125C20.5208 12.9042 20.2833 13 20 13H12ZM16 9C15.7167 9 15.4792 8.90417 15.2875 8.7125C15.0958 8.52083 15 8.28333 15 8V4C15 3.71667 15.0958 3.47917 15.2875 3.2875C15.4792 3.09583 15.7167 3 16 3C16.2833 3 16.5208 3.09583 16.7125 3.2875C16.9042 3.47917 17 3.71667 17 4V5H20C20.2833 5 20.5208 5.09583 20.7125 5.2875C20.9042 5.47917 21 5.71667 21 6C21 6.28333 20.9042 6.52083 20.7125 6.7125C20.5208 6.90417 20.2833 7 20 7H17V8C17 8.28333 16.9042 8.52083 16.7125 8.7125C16.5208 8.90417 16.2833 9 16 9ZM4 7C3.71667 7 3.47917 6.90417 3.2875 6.7125C3.09583 6.52083 3 6.28333 3 6C3 5.71667 3.09583 5.47917 3.2875 5.2875C3.47917 5.09583 3.71667 5 4 5H12C12.2833 5 12.5208 5.09583 12.7125 5.2875C12.9042 5.47917 13 5.71667 13 6C13 6.28333 12.9042 6.52083 12.7125 6.7125C12.5208 6.90417 12.2833 7 12 7H4Z", fill: "#161616" })));
|
|
27
27
|
|
|
28
28
|
const NewCloseIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" },
|
|
29
29
|
index.h("g", { "clip-path": "url(#clip0_1696_811)" },
|
|
@@ -32,6 +32,19 @@ const NewCloseIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg"
|
|
|
32
32
|
index.h("clipPath", { id: "clip0_1696_811" },
|
|
33
33
|
index.h("rect", { width: "32", height: "32", fill: "white" })))));
|
|
34
34
|
|
|
35
|
+
const StarsIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
36
|
+
index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.42 1.37C18.88 4.68 19.39 5.19 22.6 5.57C22.83 5.6 23 5.78 23 6C23 6.22 22.84 6.38 22.6 6.42C19.39 6.81 18.89 7.31 18.42 10.62C18.39 10.84 18.22 11 18.01 11C17.8 11 17.63 10.84 17.59 10.62C17.14 7.31 16.63 6.81 13.41 6.42C13.17 6.39 13.01 6.23 13.01 6C13.01 5.77 13.17 5.61 13.41 5.57C16.63 5.13 17.12 4.66 17.59 1.37C17.63 1.15 17.8 1 18.01 1C18.22 1 18.38 1.15 18.42 1.37ZM10.57 22.47C10.51 22.78 10.3 23 10 23C9.7 23 9.49 22.78 9.44 22.47C8.58 16.21 7.73 15.37 1.55 14.56C1.22 14.53 1 14.29 1 13.99C1 13.69 1.22 13.46 1.55 13.43C7.74 12.74 8.63 11.78 9.44 5.51C9.49 5.21 9.7 5 10 5C10.3 5 10.51 5.2 10.57 5.51C11.38 11.78 12.26 12.74 18.46 13.43C18.78 13.46 19 13.68 19 13.99C19 14.3 18.78 14.53 18.46 14.56C12.26 15.25 11.38 16.21 10.57 22.47Z", fill: "#8D8D8D" })));
|
|
37
|
+
|
|
38
|
+
const CheckFilterIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
39
|
+
index.h("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: "white" }),
|
|
40
|
+
index.h("path", { d: "M10.8765 13.5061L16.1943 8.30769C16.4041 8.10256 16.6526 8 16.9398 8C17.2269 8 17.4754 8.10256 17.6852 8.30769C17.8951 8.51282 18 8.75574 18 9.03644C18 9.31714 17.8951 9.56005 17.6852 9.76518L11.622 15.6923C11.4121 15.8974 11.1637 16 10.8765 16C10.5894 16 10.3409 15.8974 10.131 15.6923L7.31476 12.9393C7.10492 12.7341 7 12.4912 7 12.2105C7 11.9298 7.10492 11.6869 7.31476 11.4818C7.5246 11.2767 7.77309 11.1741 8.06024 11.1741C8.34739 11.1741 8.59588 11.2767 8.80572 11.4818L10.8765 13.5061Z", fill: "#161616" })));
|
|
41
|
+
|
|
42
|
+
const CloseFilterIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
43
|
+
index.h("path", { d: "M12 13.4L7.09999 18.3C6.91665 18.4834 6.68332 18.575 6.39999 18.575C6.11665 18.575 5.88332 18.4834 5.69999 18.3C5.51665 18.1167 5.42499 17.8834 5.42499 17.6C5.42499 17.3167 5.51665 17.0834 5.69999 16.9L10.6 12L5.69999 7.10005C5.51665 6.91672 5.42499 6.68338 5.42499 6.40005C5.42499 6.11672 5.51665 5.88338 5.69999 5.70005C5.88332 5.51672 6.11665 5.42505 6.39999 5.42505C6.68332 5.42505 6.91665 5.51672 7.09999 5.70005L12 10.6L16.9 5.70005C17.0833 5.51672 17.3167 5.42505 17.6 5.42505C17.8833 5.42505 18.1167 5.51672 18.3 5.70005C18.4833 5.88338 18.575 6.11672 18.575 6.40005C18.575 6.68338 18.4833 6.91672 18.3 7.10005L13.4 12L18.3 16.9C18.4833 17.0834 18.575 17.3167 18.575 17.6C18.575 17.8834 18.4833 18.1167 18.3 18.3C18.1167 18.4834 17.8833 18.575 17.6 18.575C17.3167 18.575 17.0833 18.4834 16.9 18.3L12 13.4Z", fill: "#8D8D8D" })));
|
|
44
|
+
|
|
45
|
+
const SquareFilterIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
46
|
+
index.h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3", fill: "white", stroke: "#E0E0E0", "stroke-width": "2" })));
|
|
47
|
+
|
|
35
48
|
const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
|
|
36
49
|
const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
|
|
37
50
|
const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
|
|
@@ -649,7 +662,7 @@ const getEnergyLabel = (energyEfficiencyClass, minEnergyEfficiencyClass, maxEner
|
|
|
649
662
|
}
|
|
650
663
|
};
|
|
651
664
|
|
|
652
|
-
const vviinnEnergyLabelCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
665
|
+
const vviinnEnergyLabelCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block;line-height:0px}:host(.hidden){display:none}.container{display:flex;align-items:center;max-width:100%;gap:8px}svg{flex-shrink:0}.product-type{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;line-height:1.5;color:#8d8d8d;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)}";
|
|
653
666
|
|
|
654
667
|
const VviinnEnergyLabel = class {
|
|
655
668
|
constructor(hostRef) {
|
|
@@ -691,8 +704,11 @@ const subFilterSelection = (filters, { column: selectedColumn }, filterValue) =>
|
|
|
691
704
|
pushObject.values.splice(valueIndex, 1);
|
|
692
705
|
else
|
|
693
706
|
pushObject.values.push(value);
|
|
694
|
-
if (index === -1)
|
|
707
|
+
if (index === -1) {
|
|
695
708
|
filters = [...filters, pushObject];
|
|
709
|
+
if (document.getElementById("filters-footer"))
|
|
710
|
+
document.getElementById("filters-footer").scrollLeft = 0;
|
|
711
|
+
}
|
|
696
712
|
else {
|
|
697
713
|
filters[index] = pushObject;
|
|
698
714
|
if (filters[index].values.length === 0) {
|
|
@@ -705,7 +721,7 @@ const subFilterSelection = (filters, { column: selectedColumn }, filterValue) =>
|
|
|
705
721
|
return filters;
|
|
706
722
|
};
|
|
707
723
|
|
|
708
|
-
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;--chip-color-badge-primary:#161616;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block}.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}";
|
|
724
|
+
const vviinnFiltersCss$1 = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block;font-family:var(--font-family-base);font-style:normal}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list,.selected-filters-wrapper{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{cursor:pointer;border:none}.filters-sub-button,.filters-main-button{font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);display:flex;justify-content:center;align-items:center;border-radius:6px}.filters-main-button{padding:var(--spacing-100) 18px;color:var(--color-text-helper);background:none}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.filters-footer{padding:16px 0}.sub-filters-wrapper{gap:var(--spacing-100);display:flex}.selected-filters-wrapper{margin-top:16px;padding-top:16px;border-top:1px solid var(--surface-bg-color-01);gap:var(--spacing-100);display:flex}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25)}.filters-sub-button>span,.filters-sub-button-selected>span{display:inline-flex;justify-content:center;align-items:center;gap:var(--spacing-25);white-space:nowrap}.filters-sub-button-selected>span>span{padding:2px}.filters-sub-button:hover{background:var(--surface-bg-color-01);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25)}.filters-sub-button:disabled{cursor:not-allowed;background:var(--surface-bg-color-disabled);color:var(--color-text-disabled)}.filters-more-button{display:flex;padding:var(--spacing-100);gap:var(--spacing-50);border-radius:var(--border-radius-100);align-items:flex-start;background:var(--button-bg-color-secondary);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(--color-text-primary);text-align:center;font-size:var(--font-size-headline);font-weight:var(--font-weight-500);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline);border-bottom:1px solid var(--color-border-01);display:flex;justify-content:center;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-wrapper{border-bottom:1px solid var(--color-border-01);padding:20px 0}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:0;color:var(--color-text-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-sub-list{display:none;margin:0 -4px}.filters-modal-sub-list>li{display:inline-block;margin:0 4px}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{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;border:none;cursor:pointer;display:flex;padding:var(--spacing-100);align-items:center;gap:var(--spacing-25);border-radius:var(--border-radius-100);background:var(--surface-bg-color-01);color:var(--color-text-primary)}.filters-more-modal-button.active{background:var(--surface-bg-color-inverse);color:var(--color-text-inverse)}.filters-more-modal-button>span{display:flex;align-items:center;justify-content:center;gap:var(--spacing-25)}.filters-more-modal-button>span>span{padding:2px}.filters-more-modal-button:disabled{cursor:not-allowed;opacity:0.5}.filters-modal-actions{border-top:1px solid var(--color-border-01);padding:var(--spacing-250);z-index:10;background:#ffffff;border-radius:0px 0px 0px 32px}.filters-modal-apply{cursor:pointer;width:100%;border:none;display:flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-50);align-self:stretch;color:var(--color-text-inverse);text-align:center;border-radius:var(--border-radius-150);background:var(--button-bg-color-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-apply:disabled{background:var(--button-bg-color-disabled);color:var(--color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--color-text-secondary);text-align:center;font-size:var(--font-size-label);font-weight:var(--font-weight-500);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}.selected-filters-wrapper>li{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;padding:var(--spacing-100);cursor:pointer}.filters-sub-button-selected{display:flex;align-items:center;gap:var(--spacing-25);background:var(--surface-bg-color-inverse);border-radius:var(--border-radius-100);color:var(--color-text-inverse);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--color-border-01);border-radius:20px}.filters-sub-button-color:disabled{opacity:0.25}.filters-sub-button-selected.filters-sub-button-color{width:24px;height:24px;border:none}.filters-sub-button-color>span{display:none}.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}.filters-modal-main-button-added-options{color:var(--color-text-secondary);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-modal-main-button-added-options>span::after{content:\", \"}.filters-modal-main-button-added-options>span:last-child::after{content:\"\"}";
|
|
709
725
|
|
|
710
726
|
const VviinnExtendedFilters = class {
|
|
711
727
|
constructor(hostRef) {
|
|
@@ -766,12 +782,12 @@ const VviinnExtendedFilters = class {
|
|
|
766
782
|
this.emitRequestFiltersMore([...this.requestFilters]);
|
|
767
783
|
}
|
|
768
784
|
showActiveOnModalSubButton(requestFilters, filterValue) {
|
|
769
|
-
let className =
|
|
785
|
+
let className = false;
|
|
770
786
|
requestFilters.forEach((filter) => {
|
|
771
787
|
if (filter.values.some((value) => value === filterValue ||
|
|
772
788
|
value === filterValue.interval ||
|
|
773
789
|
value === filterValue.value)) {
|
|
774
|
-
className =
|
|
790
|
+
className = true;
|
|
775
791
|
}
|
|
776
792
|
});
|
|
777
793
|
return className;
|
|
@@ -809,30 +825,31 @@ const VviinnExtendedFilters = class {
|
|
|
809
825
|
this.showMore = false;
|
|
810
826
|
}
|
|
811
827
|
render() {
|
|
812
|
-
|
|
813
|
-
this.filters.forEach((filter) => {
|
|
814
|
-
moreFiltersOptionCount += getFilterOptions(filter).length;
|
|
815
|
-
});
|
|
816
|
-
return (index.h(index.Host, { part: "filters" }, customizedSlots.SlotSkeleton("filters"), this.filters.length > 0 && (index.h("button", { class: "filters-more-button", onClick: () => (this.showMore = true) }, index.h(FiltersIcon, null))), index.h("div", { class: `filters-modal ${this.showMore ? "open" : ""}` }, index.h("div", { class: "filters-modal-wrapper" }, index.h("div", { class: "filters-modal-header" }, index.h("slot", { name: "vviinn-extended-filters-title" }, index.h("span", null, index$1.instance.t("filters.modal.title"))), moreFiltersOptionCount > 0 ? `(${moreFiltersOptionCount})` : "", index.h("button", { class: "filters-modal-close", onClick: () => {
|
|
828
|
+
return (index.h(index.Host, { part: "filters" }, customizedSlots.SlotSkeleton("filters"), this.filters.length > 0 && (index.h("button", { class: "filters-more-button", onClick: () => (this.showMore = true) }, index.h(FiltersIcon, null))), index.h("div", { class: `filters-modal ${this.showMore ? "open" : ""}` }, index.h("div", { class: "filters-modal-wrapper" }, index.h("div", { class: "filters-modal-header" }, index.h("slot", { name: "vviinn-extended-filters-title" }, index.h("span", null, index$1.instance.t("filters.modal.title"))), index.h("button", { class: "filters-modal-close", onClick: () => {
|
|
817
829
|
this.showMore = false;
|
|
818
830
|
this.requestFilters = [];
|
|
819
|
-
} }, index.h(NewCloseIcon, null))), index.h("ul", { class: "filters-modal-list" }, this.filters
|
|
820
|
-
|
|
821
|
-
.map((mainFilter) => {
|
|
822
|
-
var _a, _b;
|
|
831
|
+
} }, index.h(NewCloseIcon, null))), index.h("ul", { class: "filters-modal-list" }, this.filters.map((mainFilter) => {
|
|
832
|
+
var _a, _b, _c;
|
|
823
833
|
const column = mainFilter.column;
|
|
824
834
|
const filterOptions = getFilterOptions(mainFilter);
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
835
|
+
const requestFilter = this.requestFilters.find(({ column }) => column === column);
|
|
836
|
+
const addedOptions = [];
|
|
837
|
+
(_a = requestFilter === null || requestFilter === void 0 ? void 0 : requestFilter.values) === null || _a === void 0 ? void 0 : _a.forEach((value) => {
|
|
838
|
+
const index$1 = filterOptions.findIndex((f) => f.value.value === value || f.value === value);
|
|
839
|
+
if (index$1 > -1) {
|
|
840
|
+
addedOptions.push(index.h("span", null, filterOptions[index$1].label));
|
|
841
|
+
}
|
|
842
|
+
});
|
|
843
|
+
return (index.h("li", null, index.h("div", { class: "filters-modal-main-button-wrapper" }, index.h("button", { onClick: () => this.handleMoreOptionsMainClick(mainFilter.column), class: "filters-modal-main-button" }, mainFilter.label), addedOptions.length > 0 && (index.h("div", { class: "filters-modal-main-button-added-options" }, addedOptions))), column === "price" &&
|
|
844
|
+
this.selectedMoreOptions.includes(mainFilter.column) ? (index.h("vviinn-price-range", { histogram: filterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find(({ column }) => column === "price")) === null || _b === void 0 ? void 0 : _b.values[0]) !== null && _c !== void 0 ? _c : {}) })) : (index.h("ul", { class: `filters-modal-sub-list ${column === "color_confirmed"
|
|
829
845
|
? "filters-modal-sub-list-inline"
|
|
830
846
|
: ""} ${this.selectedMoreOptions.includes(mainFilter.column)
|
|
831
847
|
? "open"
|
|
832
848
|
: ""}` }, filterOptions &&
|
|
833
849
|
filterOptions.map(({ value, label, active }) => {
|
|
834
850
|
const hexCode = value.hexCode;
|
|
835
|
-
|
|
851
|
+
const selected = this.showActiveOnModalSubButton(this.requestFilters, value);
|
|
852
|
+
return (index.h("li", null, index.h("button", { onClick: () => this.handleSubFilterSelection(value, mainFilter), class: `filters-more-modal-button ${hexCode ? "filters-sub-button-color" : ""} ${selected ? "active" : ""}`, style: { backgroundColor: hexCode }, disabled: !active }, index.h("span", null, index.h("span", null, label), selected ? (index.h(CheckFilterIcon, null)) : (index.h(SquareFilterIcon, null))))));
|
|
836
853
|
})))));
|
|
837
854
|
})), 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"))))))));
|
|
838
855
|
}
|
|
@@ -843,7 +860,7 @@ const VviinnExtendedFilters = class {
|
|
|
843
860
|
};
|
|
844
861
|
VviinnExtendedFilters.style = vviinnFiltersCss$1;
|
|
845
862
|
|
|
846
|
-
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;--chip-color-badge-primary:#161616;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block}.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}";
|
|
863
|
+
const vviinnFiltersCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block;font-family:var(--font-family-base);font-style:normal}.filters-footer{overflow-x:auto}.filters-modal-list,.sub-filters-wrapper,.main-filters-list,.filters-modal-sub-list,.selected-filters-wrapper{list-style:none;margin:0;padding:0}.main-filters-wrapper{overflow-x:auto}.main-filters-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{cursor:pointer;border:none}.filters-sub-button,.filters-main-button{font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);display:flex;justify-content:center;align-items:center;border-radius:6px}.filters-main-button{padding:var(--spacing-100) 18px;color:var(--color-text-helper);background:none}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.filters-footer{padding:16px 0}.sub-filters-wrapper{gap:var(--spacing-100);display:flex}.selected-filters-wrapper{margin-top:16px;padding-top:16px;border-top:1px solid var(--surface-bg-color-01);gap:var(--spacing-100);display:flex}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25)}.filters-sub-button>span,.filters-sub-button-selected>span{display:inline-flex;justify-content:center;align-items:center;gap:var(--spacing-25);white-space:nowrap}.filters-sub-button-selected>span>span{padding:2px}.filters-sub-button:hover{background:var(--surface-bg-color-01);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25)}.filters-sub-button:disabled{cursor:not-allowed;background:var(--surface-bg-color-disabled);color:var(--color-text-disabled)}.filters-more-button{display:flex;padding:var(--spacing-100);gap:var(--spacing-50);border-radius:var(--border-radius-100);align-items:flex-start;background:var(--button-bg-color-secondary);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(--color-text-primary);text-align:center;font-size:var(--font-size-headline);font-weight:var(--font-weight-500);line-height:var(--line-height-headline);letter-spacing:var(--letter-spacing-headline);border-bottom:1px solid var(--color-border-01);display:flex;justify-content:center;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-wrapper{border-bottom:1px solid var(--color-border-01);padding:20px 0}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:0;color:var(--color-text-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-sub-list{display:none;margin:0 -4px}.filters-modal-sub-list>li{display:inline-block;margin:0 4px}.filters-modal-sub-list-inline{margin:0 -6px}.filters-modal-sub-list-inline>li{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;border:none;cursor:pointer;display:flex;padding:var(--spacing-100);align-items:center;gap:var(--spacing-25);border-radius:var(--border-radius-100);background:var(--surface-bg-color-01);color:var(--color-text-primary)}.filters-more-modal-button.active{background:var(--surface-bg-color-inverse);color:var(--color-text-inverse)}.filters-more-modal-button>span{display:flex;align-items:center;justify-content:center;gap:var(--spacing-25)}.filters-more-modal-button>span>span{padding:2px}.filters-more-modal-button:disabled{cursor:not-allowed;opacity:0.5}.filters-modal-actions{border-top:1px solid var(--color-border-01);padding:var(--spacing-250);z-index:10;background:#ffffff;border-radius:0px 0px 0px 32px}.filters-modal-apply{cursor:pointer;width:100%;border:none;display:flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-50);align-self:stretch;color:var(--color-text-inverse);text-align:center;border-radius:var(--border-radius-150);background:var(--button-bg-color-primary);font-size:var(--font-size-label-large);font-weight:var(--font-weight-500);line-height:var(--line-height-label-large);letter-spacing:var(--letter-spacing-label-large)}.filters-modal-apply:disabled{background:var(--button-bg-color-disabled);color:var(--color-text-disabled)}.filters-modal-reset{background:none;border:none;cursor:pointer;display:block;text-align:center;width:100%;margin-top:20px;color:var(--color-text-secondary);text-align:center;font-size:var(--font-size-label);font-weight:var(--font-weight-500);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}.selected-filters-wrapper>li{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;padding:var(--spacing-100);cursor:pointer}.filters-sub-button-selected{display:flex;align-items:center;gap:var(--spacing-25);background:var(--surface-bg-color-inverse);border-radius:var(--border-radius-100);color:var(--color-text-inverse);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-sub-button-color{width:40px;height:40px;border:2px solid var(--color-border-01);border-radius:20px}.filters-sub-button-color:disabled{opacity:0.25}.filters-sub-button-selected.filters-sub-button-color{width:24px;height:24px;border:none}.filters-sub-button-color>span{display:none}.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}.filters-modal-main-button-added-options{color:var(--color-text-secondary);text-overflow:ellipsis;font-size:var(--font-size-body);font-weight:var(--font-weight-400);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body)}.filters-modal-main-button-added-options>span::after{content:\", \"}.filters-modal-main-button-added-options>span:last-child::after{content:\"\"}";
|
|
847
864
|
|
|
848
865
|
const VviinnFilters = class {
|
|
849
866
|
constructor(hostRef) {
|
|
@@ -861,6 +878,9 @@ const VviinnFilters = class {
|
|
|
861
878
|
};
|
|
862
879
|
this.handleSetFilters = ({ detail, }) => {
|
|
863
880
|
this.filters = detail;
|
|
881
|
+
if (this.selectedFilter) {
|
|
882
|
+
this.selectedFilter = this.filters.find((f) => f.column === this.selectedFilter.column);
|
|
883
|
+
}
|
|
864
884
|
if (!detail.some(({ column }) => { var _a; return column === ((_a = this.selectedFilter) === null || _a === void 0 ? void 0 : _a.column); })) {
|
|
865
885
|
this.selectedFilter = undefined;
|
|
866
886
|
}
|
|
@@ -886,6 +906,7 @@ const VviinnFilters = class {
|
|
|
886
906
|
this.vviinnFiltersChanged.emit({ filters: requestFilters, el: this.el });
|
|
887
907
|
}
|
|
888
908
|
handleSubFilterSelection(filterValue, seletedFilter) {
|
|
909
|
+
this.filtersFooter.scrollLeft = 0;
|
|
889
910
|
this.requestFilters = subFilterSelection(this.requestFilters, seletedFilter, filterValue);
|
|
890
911
|
this.emitRequestFiltersMore([...this.requestFilters]);
|
|
891
912
|
}
|
|
@@ -894,17 +915,17 @@ const VviinnFilters = class {
|
|
|
894
915
|
return "";
|
|
895
916
|
return this.selectedFilter.column === column ? "active" : "";
|
|
896
917
|
}
|
|
897
|
-
showActiveOnSubButton(requestFilters, filterValue) {
|
|
898
|
-
if (!
|
|
899
|
-
return
|
|
900
|
-
const mainFilter = requestFilters.find((
|
|
918
|
+
showActiveOnSubButton(requestFilters, filterValue, selectedFilter) {
|
|
919
|
+
if (!selectedFilter || !requestFilters)
|
|
920
|
+
return false;
|
|
921
|
+
const mainFilter = requestFilters.find(({ column }) => column === selectedFilter.column);
|
|
901
922
|
if (!mainFilter)
|
|
902
923
|
return "";
|
|
903
924
|
return mainFilter.values.some((value) => value === filterValue ||
|
|
904
925
|
value === filterValue.interval ||
|
|
905
926
|
value === filterValue.value)
|
|
906
|
-
?
|
|
907
|
-
:
|
|
927
|
+
? true
|
|
928
|
+
: false;
|
|
908
929
|
}
|
|
909
930
|
filtersStringWatcher() {
|
|
910
931
|
if (this.filtersString === "")
|
|
@@ -929,16 +950,33 @@ const VviinnFilters = class {
|
|
|
929
950
|
var _a, _b, _c;
|
|
930
951
|
const { column } = (_a = this.selectedFilter) !== null && _a !== void 0 ? _a : {};
|
|
931
952
|
const selectedFilterOptions = getFilterOptions(this.selectedFilter);
|
|
932
|
-
const filters = this.filters.filter((filter) => filter.isPrimary
|
|
953
|
+
const filters = this.filters.filter((filter) => filter.isPrimary);
|
|
933
954
|
if (filters.length === 0)
|
|
934
955
|
return index.h(index.Host, null);
|
|
956
|
+
const RenderButton = (value, label, active, selectedFilter, isSelected = false) => {
|
|
957
|
+
const hexCode = value.hexCode;
|
|
958
|
+
return (index.h("li", { onClick: () => active ? this.handleSubFilterSelection(value, selectedFilter) : null }, index.h("button", { class: `filters-sub-button${isSelected ? "-selected" : ""} ${hexCode ? "filters-sub-button-color" : ""}`, style: { backgroundColor: hexCode }, disabled: !active }, index.h("span", null, !isSelected ? label : index.h("span", null, label), " ", !isSelected ? index.h(StarsIcon, null) : index.h(CheckFilterIcon, null))), isSelected && hexCode && index.h(CloseFilterIcon, null)));
|
|
959
|
+
};
|
|
960
|
+
let selectedButtons = [];
|
|
961
|
+
this.filters.forEach((filter) => {
|
|
962
|
+
if (!("values" in filter))
|
|
963
|
+
return;
|
|
964
|
+
filter.values.forEach(({ value, label, active }) => {
|
|
965
|
+
if (this.showActiveOnSubButton(this.requestFilters, value, filter) &&
|
|
966
|
+
active) {
|
|
967
|
+
selectedButtons.push(RenderButton(value, label, active, filter, true));
|
|
968
|
+
}
|
|
969
|
+
});
|
|
970
|
+
});
|
|
935
971
|
return (index.h(index.Host, { part: "filters" }, index.h("div", { class: "main-filters-wrapper" }, index.h("ul", { class: "main-filters-list" }, filters.map((filter) => {
|
|
936
972
|
return (index.h("li", null, index.h("button", { class: `filters-main-button ${this.showActiveOnMainButton(filter)}`, onClick: () => this.handleMainFilterSelection(filter) }, filter.label)));
|
|
937
|
-
}))), this.selectedFilter !== undefined && (index.h("div", { class: "filters-footer" }, column === "price" ? (index.h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find((
|
|
973
|
+
}))), this.selectedFilter !== undefined && (index.h("div", { class: "filters-footer", ref: (el) => (this.filtersFooter = el) }, column === "price" ? (index.h("vviinn-price-range", { histogram: selectedFilterOptions, priceChangeHandler: this.priceChangeHandler, selectedInterval: ((_c = (_b = this.requestFilters.find(({ column }) => column === "price")) === null || _b === void 0 ? void 0 : _b.values[0]) !== null && _c !== void 0 ? _c : {}) })) : (index.h("ul", { class: "sub-filters-wrapper" }, selectedFilterOptions &&
|
|
938
974
|
selectedFilterOptions.map(({ value, label, active }) => {
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
975
|
+
if (this.showActiveOnSubButton(this.requestFilters, value, this.selectedFilter)) {
|
|
976
|
+
return null;
|
|
977
|
+
}
|
|
978
|
+
return RenderButton(value, label, active, this.selectedFilter);
|
|
979
|
+
}))), selectedButtons.length > 0 && (index.h("ul", { class: "selected-filters-wrapper" }, selectedButtons))))));
|
|
942
980
|
}
|
|
943
981
|
get el() { return index.getElement(this); }
|
|
944
982
|
static get watchers() { return {
|
|
@@ -947,7 +985,7 @@ const VviinnFilters = class {
|
|
|
947
985
|
};
|
|
948
986
|
VviinnFilters.style = vviinnFiltersCss;
|
|
949
987
|
|
|
950
|
-
const vviinnPriceRangeCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
988
|
+
const vviinnPriceRangeCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block;max-width:400px;font-family:var(--font-family-base)}.histogram{height:64px;display:flex;align-items:flex-end;gap:1px;margin:0 0.6%}.histogram-bar{background:var(--surface-inverse-bg-color, #262626);flex:1;border-radius:2px 2px 0px 0px}.histogram-bar.histogram-bar-inactive{background:var(--surface-bg-color-disabled)}.range_container{display:flex;flex-direction:column;width:99.4%;margin-top:-2px}.range_container .sliders_control{position:relative;min-height:25px}.range_container .form_control{position:relative;display:flex;justify-content:space-between;font-size:24px;color:#635a5a}.range_container input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:32px;height:32px;background-color:var(--color-bg-base);border-radius:50%;box-shadow:0 0 0 1px var(--color-border-02);cursor:pointer}.range_container input[type=\"range\"]::-moz-range-thumb{-webkit-appearance:none;pointer-events:all;width:32px;height:32px;background-color:var(--color-bg-base);border-radius:50%;box-shadow:0 0 0 1px var(--color-border-02);cursor:pointer}.range_container input[type=\"range\"]::-webkit-slider-thumb:hover{background:#f7f7f7}.range_container input[type=\"range\"]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px #387bbe, 0 0 9px #387bbe;-webkit-box-shadow:inset 0 0 3px #387bbe, 0 0 9px #387bbe}.range_container input[type=\"range\"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2px;width:99.4%;position:absolute;background:var(--color-border-01);pointer-events:none}.range_container #fromSlider{height:0;z-index:1}.label-wrapper{display:flex;justify-content:space-between;margin-top:6px}.label-wrapper .label{display:flex;padding:var(--spacing-25) var(--spacing-100);justify-content:center;align-items:center;border-radius:var(--border-radius-100);background:var(--chip-bg-color-primary);color:var(--color-text-inverse);text-align:center;font-size:var(--font-size-label);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--line-height-label);letter-spacing:var(--letter-spacing-label)}";
|
|
951
989
|
|
|
952
990
|
const VviinnButton = class {
|
|
953
991
|
constructor(hostRef) {
|
|
@@ -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-
|
|
6
|
+
const _package = require('./package-8e5eb559.js');
|
|
7
7
|
const VisualSearchIcon = require('./VisualSearchIcon-f435f5b0.js');
|
|
8
8
|
|
|
9
9
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
@@ -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-
|
|
6
|
+
const _package = require('./package-8e5eb559.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');
|
|
@@ -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-ba1e2ead.js');
|
|
7
7
|
const index$1 = require('./index-21cf53a2.js');
|
|
8
|
-
const _package = require('./package-
|
|
8
|
+
const _package = require('./package-8e5eb559.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-dacb282b.js');
|
|
10
10
|
const constants = require('./constants-7684cbfc.js');
|
|
11
11
|
|
|
@@ -33,7 +33,7 @@ const checkDeviceType = () => {
|
|
|
33
33
|
return "desktop";
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
-
const vviinnVpsWidgetCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--
|
|
36
|
+
const vviinnVpsWidgetCss = ":host{--color-primary-system:#0f62fe;--color-primary-hover-system:#014cda;--color-icons-system:#2f8edf;--product-card-width-system:130px;--spacer:8px;--font-weight-regular:400;--letter-spacing-default:0px;--radius-radius-md:8px;--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:\"JetBrains Mono\", monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:40px 62px}#start-page_block.error{align-content:center}#start-page_block vviinn-text-search{margin-top:12px}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.source-wrapper{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.results-page .source-wrapper.text-search-wrapper{padding:24px 24px 0 24px}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.results-page:not(.active){display:none}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.source-wrapper{grid-template-rows:min-content auto;width:100%;padding:0}.source-wrapper.image-wrapper .filters-wrapper{padding-left:24px;min-width:100%}.image{margin-bottom:8px}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
37
37
|
|
|
38
38
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
39
39
|
var t = {};
|
|
@@ -10,8 +10,11 @@ export const subFilterSelection = (filters, { column: selectedColumn }, filterVa
|
|
|
10
10
|
pushObject.values.splice(valueIndex, 1);
|
|
11
11
|
else
|
|
12
12
|
pushObject.values.push(value);
|
|
13
|
-
if (index === -1)
|
|
13
|
+
if (index === -1) {
|
|
14
14
|
filters = [...filters, pushObject];
|
|
15
|
+
if (document.getElementById("filters-footer"))
|
|
16
|
+
document.getElementById("filters-footer").scrollLeft = 0;
|
|
17
|
+
}
|
|
15
18
|
else {
|
|
16
19
|
filters[index] = pushObject;
|
|
17
20
|
if (filters[index].values.length === 0) {
|