vviinn-widgets 2.145.11 → 2.145.13
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-7189c39b.js → package-0598a72d.js} +1 -1
- package/dist/cjs/search-filters_13.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-carousel_9.cjs.entry.js +4 -4
- package/dist/cjs/vviinn-detected-object_7.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-selected-filters.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-text-search.cjs.entry.js +1 -1
- package/dist/collection/components/image-search/search-filters/search-filters.css +0 -1
- package/dist/collection/components/vviinn-button/vviinn-button.css +0 -1
- package/dist/collection/components/vviinn-cropper/vviinn-detected-object/vviinn-detected-object.css +0 -1
- package/dist/collection/components/vviinn-error/vviinn-error.css +0 -1
- package/dist/collection/components/vviinn-filters/vviinn-filters.css +3 -2
- package/dist/collection/components/vviinn-modal/vviinn-modal.css +0 -1
- package/dist/collection/components/vviinn-overlay/vviinn-overlay.js +1 -1
- package/dist/collection/components/vviinn-price-range/vviinn-price-range.css +0 -1
- package/dist/collection/components/vviinn-price-range/vviinn-price-range.js +1 -1
- package/dist/collection/components/vviinn-privacy-badge/vviinn-privacy-badge.css +0 -1
- package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.css +0 -1
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +0 -1
- package/dist/collection/components/vviinn-results/vviinn-results.css +0 -1
- package/dist/collection/components/vviinn-slider/vviinn-slider.css +0 -1
- package/dist/collection/components/vviinn-teaser/vviinn-teaser.css +0 -1
- package/dist/collection/components/vviinn-text-search/vviinn-text-search.css +0 -1
- package/dist/collection/components/vviinn-text-search/vviinn-text-search.js +1 -1
- package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css +0 -1
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.css +0 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css +0 -1
- package/dist/collection/index.js +1 -1
- package/dist/esm/{package-e7df49f1.js → package-578728c8.js} +1 -1
- package/dist/esm/search-filters_13.entry.js +1 -1
- package/dist/esm/vviinn-carousel_9.entry.js +4 -4
- package/dist/esm/vviinn-detected-object_7.entry.js +1 -1
- package/dist/esm/vviinn-selected-filters.entry.js +1 -1
- package/dist/esm/vviinn-text-search.entry.js +1 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/vviinn-widgets/{p-60068f93.entry.js → p-27943563.entry.js} +1 -1
- package/dist/vviinn-widgets/p-5b49585c.entry.js +1 -0
- package/dist/vviinn-widgets/{p-537d8d5b.entry.js → p-78e70ca6.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-8a0f67c6.js → p-800ea3cc.js} +1 -1
- package/{www/build/p-2c14dd34.entry.js → dist/vviinn-widgets/p-c79f3aa6.entry.js} +1 -1
- package/dist/vviinn-widgets/p-e720457a.entry.js +1 -0
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +4 -3
- package/readme.md +2 -1
- package/www/build/{p-60068f93.entry.js → p-27943563.entry.js} +1 -1
- package/www/build/p-5b49585c.entry.js +1 -0
- package/www/build/{p-537d8d5b.entry.js → p-78e70ca6.entry.js} +1 -1
- package/www/build/{p-8a0f67c6.js → p-800ea3cc.js} +1 -1
- package/{dist/vviinn-widgets/p-2c14dd34.entry.js → www/build/p-c79f3aa6.entry.js} +1 -1
- package/www/build/p-e720457a.entry.js +1 -0
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-4c8fad0c.entry.js +0 -1
- package/dist/vviinn-widgets/p-794a0bc1.entry.js +0 -1
- package/www/build/p-4c8fad0c.entry.js +0 -1
- package/www/build/p-794a0bc1.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-8e1dd483.js';
|
|
2
2
|
import { _ as _function, a as _Array, h as has, t as tuple, s as searchState, c as componentsState, O as Option, S as Semigroup, E as Either, p as pipe, b as chainW, m as makeRequest, f as fromEither, g as getApiPath, d as createInitPostRequest, A as Apply, e as state, T as TaskEither } from './search.store-c897e270.js';
|
|
3
|
-
import { c as campaignTypeNames, f as fromString, a as fold, v as version } from './package-
|
|
3
|
+
import { c as campaignTypeNames, f as fromString, a as fold, v as version } from './package-578728c8.js';
|
|
4
4
|
import { g as getCustomLabels, P as PlusIcon, v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, h as createResultVprEventByType, i as createProductVpcEventByType, j as createProductVprEventByType, k as getRecommendationsBody } from './index-4bb33163.js';
|
|
5
5
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
6
6
|
import { s as slotChangeListener, S as SlotSkeleton } from './customized-slots-790b647b.js';
|
|
@@ -497,7 +497,7 @@ function sequenceT(F) {
|
|
|
497
497
|
};
|
|
498
498
|
}
|
|
499
499
|
|
|
500
|
-
const vviinnFiltersCss$2 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s, color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
500
|
+
const vviinnFiltersCss$2 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s,\n color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
501
501
|
|
|
502
502
|
/**
|
|
503
503
|
* @slot vviinn-extended-filters-title - Text on widget's header.
|
|
@@ -733,7 +733,7 @@ const VviinnExtendedFilters = class {
|
|
|
733
733
|
};
|
|
734
734
|
VviinnExtendedFilters.style = vviinnFiltersCss$2;
|
|
735
735
|
|
|
736
|
-
const vviinnFiltersCss$1 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s, color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
736
|
+
const vviinnFiltersCss$1 = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s,\n color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
737
737
|
|
|
738
738
|
const VviinnExtendedFiltersButton = class {
|
|
739
739
|
constructor(hostRef) {
|
|
@@ -752,7 +752,7 @@ const VviinnExtendedFiltersButton = class {
|
|
|
752
752
|
};
|
|
753
753
|
VviinnExtendedFiltersButton.style = vviinnFiltersCss$1;
|
|
754
754
|
|
|
755
|
-
const vviinnFiltersCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s, color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
755
|
+
const vviinnFiltersCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s,\n color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
756
756
|
|
|
757
757
|
const VviinnFilters = class {
|
|
758
758
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ import { a as fromAlt, s as scaleWithSized, c as center } from './Rectangle-6e69
|
|
|
4
4
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
5
5
|
import { W as WarningIcon } from './WarningIcon-f5ee2147.js';
|
|
6
6
|
import { s as slotChangeListener } from './customized-slots-790b647b.js';
|
|
7
|
-
import { c as campaignTypeNames, v as version } from './package-
|
|
7
|
+
import { c as campaignTypeNames, v as version } from './package-578728c8.js';
|
|
8
8
|
import { m as modalParts } from './index-f39001f9.js';
|
|
9
9
|
|
|
10
10
|
const SecondaryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
@@ -3,7 +3,7 @@ import { t as triggerFilter, s as showActiveOnSubButton, R as RenderButton } fro
|
|
|
3
3
|
import { s as searchState, c as componentsState } from './search.store-c897e270.js';
|
|
4
4
|
import './Rectangle-6e69b807.js';
|
|
5
5
|
|
|
6
|
-
const vviinnFiltersCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s, color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
6
|
+
const vviinnFiltersCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{display:block;font-family:var(--font-family, var(--font-family-base));font-style:normal;}:host(.show-in-widget.preview-filters){padding-left:24px}.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-list{padding:var(--spacing-25);gap:var(--spacing-25);border-radius:8px;background:var(--surface-bg-color-01);display:inline-flex}vviinn-price-range{max-width:400px;padding-bottom:var(--spacing-150)}:host(.show-in-widget) vviinn-price-range{max-width:unset}.filters-modal-main-button,.filters-sub-button,.filters-main-button,.filters-modal-close,.filters-sub-button-selected{font-family:var(--font-family, var(--font-family-base));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);color:var(--color-text-helper);background:none;transition:background 0.15s,\n color 0.15s}.filters-main-button.active,.filters-main-button:hover{background:var(--surface-bg-color-02);color:var(--color-text-primary)}.sub-filters-wrapper,.selected-filters-wrapper{gap:var(--spacing-100);display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}.sub-filters-wrapper{align-items:center;gap:var(--spacing-100);margin-top:16px;margin:16px -2px 0}.sub-filters-wrapper>li{padding:2px}.selected-filters-wrapper{margin-top:var(--spacing-125);gap:var(--spacing-100);flex-wrap:wrap}:host(.show-in-widget.preview-filters) .selected-filters-wrapper{flex-wrap:unset;overflow-x:auto}:host(.show-in-widget.preview-filters) .sub-filters-wrapper,:host(.show-in-widget.preview-filters) .selected-filters-wrapper{transform:translateX(-24px);padding-left:var(--spacing-300);padding-right:var(--spacing-300);width:100%}.filters-sub-button{color:var(--color-text-primary);background:var(--surface-bg-color-01);padding:var(--spacing-100);gap:var(--spacing-25);height:100%}.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>span>span,.filters-sub-button-selected>span>span{padding:var(--spacing-25)}.filters-sub-button:hover{background:var(--surface-bg-color-01-hover)}.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-color:var(--button-bg-color-secondary);transition:background-color 0.1s;border:none;cursor:pointer}.filters-more-button:hover{background-color:var(--button-bg-color-secondary-hover)}.filters-modal-wrapper{display:flex;flex-direction:column;background:#ffffff}.filters-modal.button,.filters-modal.modal{display:none;position:fixed;top:0;bottom:0;right:0;left:0;z-index:99999;background-color:rgba(0, 0, 0, 0.5)}.filters-modal.button .filters-modal-wrapper{position:fixed;top:0;bottom:0;right:0;width:420px;z-index:99999;border-radius:var(--border-radius-400) var(--border-radius-none)\n var(--border-radius-none) var(--border-radius-400)}.filters-modal.preview{display:block}.filters-modal.open{display:block}.filters-modal-header{position:relative;padding:var(--spacing-200) 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-main{overflow-y:auto;scrolbar-width:thin}.filters-modal-list{margin:var(--spacing-50) 0 0 var(--spacing-300)}.filters-modal-list>li{padding-right:var(--spacing-300)}.filters-modal-list>li:not(:last-child) .filters-modal-main-button-wrapper{border-bottom:1px solid var(--color-border-01)}.filters-modal-main-button{width:100%;background:none;text-align:left;padding:var(--spacing-200) 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}.filters-modal-sub-list.open{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-bottom:var(--spacing-150)}.filters-modal-sub-list>li{display:contents}.filters-modal-close{position:absolute;color:#6f6f6f;right:var(--spacing-100);top:var(--spacing-200);cursor:pointer;background:none}.filters-modal-close:hover{color:#000}.filters-modal.preview .filters-modal-close{display: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-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.filters-more-modal-button:hover{background-color:var(--surface-bg-color-01-hover)}.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{white-space:nowrap;padding:var(--spacing-25)}.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-125);z-index:10;border-radius:0px 0px 0px 32px}.filters-modal-apply,.filters-modal-reset{font-family:var(--font-family, var(--font-family-base))}.filters-modal-apply{cursor:pointer;width:100%;border:none;margin-bottom:20px;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%;padding:var(--spacing-125) 0;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)}.filters-modal-reset:hover{color:var(--color-text-primary)}.selected-filters-wrapper>li .filters-sub-button-selected{border-radius:var(--border-radius-100);background:var(--surface-bg-color-inverse);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:var(--spacing-100)}.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);padding:var(--spacing-100)}.filters-sub-button-color{width:40px;height:40px;border:var(--stroke-width-50) solid var(--color-border-01);border-radius:var(--border-radius-full);display:inline-block;box-sizing:border-box;position:relative}.filters-sub-button-color-dot{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--border-radius-full)}.filters-sub-button-color:disabled{opacity:0.25}.selected-filters-wrapper .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:var(--stroke-width-75) solid var(--color-border-inverse-00);background-color:white}.filters-sub-button-color.active .filters-sub-button-color-dot{transform:scale(0.75)}.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:\"\"}@media (max-width: 768px){:host(.show-in-widget.preview-filters){padding-right:var(--spacing-300)}.sub-filters-wrapper,.selected-filters-wrapper{flex-wrap:unset;overflow-x:auto;padding-bottom:0}.sub-filters-wrapper,.selected-filters-wrapper{margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.sub-filters-wrapper::-webkit-scrollbar,.selected-filters-wrapper::-webkit-scrollbar{display:none}.filters-modal.button .filters-modal-wrapper,.filters-modal.modal .filters-modal-wrapper{width:100%;border-radius:24px 24px 0px 0px}.filters-modal.button .filters-modal-wrapper{top:10%}.filters-modal.modal .filters-modal-wrapper{position:fixed;width:100%;height:calc(100% - 64px);bottom:0;transform:translateY(-64px)}.filters-modal.modal .filters-modal-header{font-size:var(--font-size-body-large)}.filters-modal.modal .filters-modal-main{padding-bottom:120px}}";
|
|
7
7
|
|
|
8
8
|
const VviinnSelectedFilters = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -217,7 +217,7 @@ const VviinnTextSearch = class {
|
|
|
217
217
|
render() {
|
|
218
218
|
return (h(Host, { exportparts: searchBarParts }, h("div", { class: "text-search-container", part: "text-search-container" }, h("input", { class: "text-search-input", part: "text-search-input", type: "text", placeholder: instance.t(this.isShowRecording()
|
|
219
219
|
? "speechRecognition.placeholder"
|
|
220
|
-
: "textSearchPlaceholder"), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), this.mode === "extended" && (h("vviinn-vps-button", { token: this.token, locale: this.locale, addStyle: false, useComponentsStore: true })), this.mode === "basic" && (h("slot", { name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
|
|
220
|
+
: "textSearchPlaceholder"), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), this.mode === "extended" && (h("vviinn-vps-button", { token: this.token, locale: this.locale, addStyle: false, useComponentsStore: true, apiPath: this.apiPath })), this.mode === "basic" && (h("slot", { name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
|
|
221
221
|
this.recognition && (h("button", { class: "speech-button", part: "speech-button", onClick: () => this.handleSpeech() }, h(MicIcon, null), this.isShowRecording() && (h("span", { class: "recording-indicator" })))), h("button", { class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), disabled: this.state.loading }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))), this.showTooltip && (h("p", { class: "text-search-tooltip", part: "text-search-tooltip" }, instance.t(this.tooltipText)))));
|
|
222
222
|
}
|
|
223
223
|
get el() { return getElement(this); }
|
|
@@ -180,7 +180,7 @@ export namespace Components {
|
|
|
180
180
|
"currencySign": string;
|
|
181
181
|
"histogram": Histogram;
|
|
182
182
|
"priceChangeHandler": (
|
|
183
|
-
filterValue: components["schemas"]["interval-filter-value-item"]
|
|
183
|
+
filterValue: components["schemas"]["interval-filter-value-item"],
|
|
184
184
|
) => void;
|
|
185
185
|
"selectedInterval"?: components["schemas"]["interval"];
|
|
186
186
|
}
|
|
@@ -1310,7 +1310,7 @@ declare namespace LocalJSX {
|
|
|
1310
1310
|
"currencySign"?: string;
|
|
1311
1311
|
"histogram"?: Histogram;
|
|
1312
1312
|
"priceChangeHandler"?: (
|
|
1313
|
-
filterValue: components["schemas"]["interval-filter-value-item"]
|
|
1313
|
+
filterValue: components["schemas"]["interval-filter-value-item"],
|
|
1314
1314
|
) => void;
|
|
1315
1315
|
"selectedInterval"?: components["schemas"]["interval"];
|
|
1316
1316
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from "./components";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as t,r as e,c as o,H as i,g as r}from"./p-c3953cbf.js";import{_ as s,O as n,B as a,n as l,C as c,s as h,o as d}from"./p-f601d5c0.js";import{a as p,s as f,c as b}from"./p-f2d58f7d.js";import{i as g}from"./p-2e76a5c3.js";import{W as u}from"./p-b2aa3af6.js";import{s as x}from"./p-43e147d6.js";import{c as v,v as m}from"./p-8a0f67c6.js";import{m as w}from"./p-1f0dc75e.js";const C=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z",fill:"currentColor"})),y=({width:e=24,height:o=24})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:o,viewBox:"0 0 24 24",fill:"currentColor"},t("path",{d:"M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z"}),t("path",{d:"M4 8C4 5.79 5.79 4 8 4H9V2H8C4.69 2 2 4.69 2 8V9H4V8Z"}),t("path",{d:"M20 8C20 5.79 18.21 4 16 4H15V2H16C19.31 2 22 4.69 22 8V9H20V8Z"}),t("path",{d:"M20 16C20 18.21 18.21 20 16 20H15V22H16C19.31 22 22 19.31 22 16V15H20V16Z"}),t("path",{d:"M9 8H7C6.45 8 6 8.45 6 9C6 9.55 6.45 10 7 10H9V11C9 11.55 9.45 12 10 12C10.55 12 11 11.55 11 11V7C11 6.45 10.55 6 10 6C9.45 6 9 6.45 9 7V8Z"}),t("path",{d:"M15 16H17C17.55 16 18 15.55 18 15C18 14.45 17.55 14 17 14H15V13C15 12.45 14.55 12 14 12C13.45 12 13 12.45 13 13V17C13 17.55 13.45 18 14 18C14.55 18 15 17.55 15 17V16Z"}),t("path",{d:"M16 9C16 8.45 15.55 8 15 8H12V10H15C15.55 10 16 9.55 16 9Z"}),t("path",{d:"M6 15C6 15.55 6.45 16 7 16H12V14H7C6.45 14 6 14.45 6 15Z"})),k=({width:e=24,height:o=24})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:o,viewBox:"0 0 24 24",fill:"currentColor"},t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M20 13C20 13.55 20.45 14 21 14C21.55 14 22 13.55 22 13V5C22 3.35 20.65 2 19 2H11C10.45 2 10 2.45 10 3C10 3.55 10.45 4 11 4H19C19.55 4 20 4.45 20 5V13ZM2 19C2 20.65 3.35 22 5 22H13C13.55 22 14 21.55 14 21C14 20.45 13.55 20 13 20H5C4.45 20 4 19.55 4 19V11C4 10.45 3.55 10 3 10C2.45 10 2 10.45 2 11V19ZM12 16C11.45 16 11 15.55 11 15V13H9C8.45 13 8 12.55 8 12C8 11.45 8.45 11 9 11H11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11H15C15.55 11 16 11.45 16 12C16 12.55 15.55 13 15 13H13V15C13 15.55 12.55 16 12 16Z"})),z=class{constructor(t){e(this,t),this.vviinnSelectObject=o(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.selectedDetectedObject=void 0,this.basicEventData=void 0,this.imageBounds=void 0,this.showInWidget=void 0,this.position=["0","0"]}connectedCallback(){this.storeName=this.showInWidget?"widget":"components"}getObjectPosition(){return s.pipe(n.fromNullable(this.imageBounds),n.map((t=>{const e=p(a(this.detectedObject).rectangle),{x:o,y:i}=s.pipe(e,f(t),b);return[`${o}px`,`${i}px`]})),n.getOrElse((()=>["0","0"])))}selectDetectedObject(){const t=s.pipe(n.fromNullable(this.imageBounds),n.map((t=>{const e=a(this.detectedObject).rectangle,o=p(e);return f(t)(o)})),n.toNullable);l(this.storeName,t,this.imageBounds),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject,searchArea:t}))}isActive(){if(!this.detectedObject||!this.selectedDetectedObject)return!1;const t=a(this.detectedObject),e=a(this.selectedDetectedObject);return c.equals(t,e)}render(){return t(i,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};z.style=':host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}: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)}}';const V=class{constructor(t){e(this,t),this.handler=void 0}render(){return t(i,null,t("vviinn-error",null,t(u,null),t("h4",{slot:"title"},g.t("emptyResultsBlock.title")),"image"===h.searchType&&t("button",{slot:"action",onClick:this.handler},g.t("emptyResultsBlock.button"))))}},H=class{constructor(t){e(this,t),this.vviinnWidgetClose=o(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.hideBackButton=!1,this.isFirstScreen=void 0,this.slider=!1}componentWillLoad(){x(this,this.el)}resetTopScroll(){const t=this.el.shadowRoot.querySelector(".body");null==t||t.scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit({widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:v.VPS,widgetId:this.buttonElementId,widgetVersion:this.widgetVersion})}),this.slider?500:0)}handleAnimationEnd(t){"fade-in"===t.animationName&&(this.slider=!0)}renderImage(){return s.pipe(d(h.image),n.map((([e])=>t("img",{width:"28",height:"28",src:e.src,class:"title-image"}))),n.getOrElse((()=>null)))}render(){return t(i,{exportparts:w,class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:t=>this.handleAnimationEnd(t)},t("div",{class:"head"},!this.hideBackButton&&t("button",{part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()}},t(C,null)),t("div",{class:"title",part:"results-title"},this.renderImage(),t("slot",{name:"vviinn-image-search-modal-title"},g.t("imageSearchModalTitle"))),t("button",{onClick:()=>this.close(),class:"close-button",part:"close-button"},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z",fill:"currentColor"})))),t("div",{class:"body"},t("slot",null)))}get el(){return r(this)}};H.style=":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{background:white;border-radius:var(--modal-border-radius, var(--border-radius-300));box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{font-family:var(--font-family, var(--font-family-base));position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:var(--font-weight-600);font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:160px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";const j=class{constructor(t){e(this,t)}render(){return t(i,null,t("slot",null))}};j.style=":host{animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";const L=class{constructor(t){e(this,t)}render(){return t(i,null)}};L.style=":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid currentColor;border-radius:50%;border-top-color:transparent;display:flex;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";const M=class{constructor(t){e(this,t),this.vviinnWidgetLoad=o(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=o(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=o(this,"vviinnWidgetClose",7),this.vviinnProductLoad=o(this,"vviinnProductLoad",7),this.vviinnProductClick=o(this,"vviinnProductClick",7),this.vviinnProductView=o(this,"vviinnProductView",7),this.vviinnResultLoad=o(this,"vviinnResultLoad",7),this.vviinnResultView=o(this,"vviinnResultView",7),this.vviinnNoResult=o(this,"vviinnNoResult",7),this.vviinnAddToBasket=o(this,"vviinnAddToBasket",7),this.sidebar=null,this.sidebarCloseListener=()=>{this.targetAppendSidebarTo?this.targetAppendSidebarTo.removeChild(this.sidebar):document.body.removeChild(this.sidebar)},this.token=void 0,this.productId=void 0,this.mode="continuity",this.campaigns="",this.excluded="",this.campaignType="set"===this.mode?"VCS":"VPR",this.locale="de-DE",this.color="",this.imageWidth=300,this.imageRatio=1,this.setItemsAmount=4,this.cssUrl=null,this.currencySign="€",this.pricePrefix="",this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.addToBasketShow=!1,this.showFilters=!1,this.addPriceContainer=!1,this.setModeDiscounts="set"===this.mode?"5, 10, 15":"",this.updateButtonLocation="topAndItem",this.sidebarTitle="set"===this.mode?"":"Similar products",this.modalScrollbar=!1,this.position="bottom",this.addStyle=!0,this.appendSidebarTo=void 0,this.favoriteShow=!1,this.appendSidebarToElement=void 0,this.oneClickDiscoveryMode="standalone",this.apiPath="https://api.vviinn.com",this.showInWidget=!1,this.targetAppendSidebarTo=void 0}connectedCallback(){this.iconSideSize="standalone"===this.oneClickDiscoveryMode?24:14}componentWillLoad(){this.appendSidebarToElement?this.targetAppendSidebarTo=this.appendSidebarToElement:this.appendSidebarTo&&(this.targetAppendSidebarTo=document.getElementById(this.appendSidebarTo))}appendSidebarToElementWatcher(){this.appendSidebarToElement&&(this.targetAppendSidebarTo=this.appendSidebarToElement)}render(){return t(i,{onClick:()=>{this.appendSidebarTo&&!this.targetAppendSidebarTo?setTimeout((()=>{this.handleClick()}),250):this.handleClick()},role:"button",tabindex:"0"},t("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},t("slot",null,t("VCS"===this.campaignType?k:y,{width:this.iconSideSize,height:this.iconSideSize}))))}handleClick(){const t=document.createElement("vviinn-recommendations-sidebar");if(t.sidebarTitle=this.sidebarTitle,t.productId=this.productId,t.token=this.token,t.position=this.position,t.widgetScrollbar=this.modalScrollbar,t.campaigns=this.campaigns,t.campaignType=this.campaignType,t.color=this.color,t.locale=this.locale,t.imageWidth=this.imageWidth,t.currencySign=this.currencySign,t.pricePrefix=this.pricePrefix,t.apiPath=this.apiPath,t.buttonElementId=this.el.id,t.noResultText=this.noResultText,t.noResultShow=this.noResultShow,t.gridArrowsDynamic=this.gridArrowsDynamic,t.productDetailsNewTab=this.productDetailsNewTab,t.productDetailsRedirect=this.productDetailsRedirect,t.widgetVersion=m,t.showingInButton=!0,t.excluded=this.excluded,t.addToBasketShow=this.addToBasketShow,t.buttonChildren=this.el.children,t.showFilters=this.showFilters,t.cssUrl=this.cssUrl,t.imageRatio=this.imageRatio,t.setItemsAmount=this.setItemsAmount,t.setModeDiscounts=this.setModeDiscounts,t.updateButtonLocation=this.updateButtonLocation,t.addPriceContainer=this.addPriceContainer,t.favoriteShow=this.favoriteShow,t.showInModal="modal"===this.oneClickDiscoveryMode,this.targetAppendSidebarTo?(t.mode="grid",t.useCarousel="append-slider"===this.oneClickDiscoveryMode):(t.mode="right"===this.position?"grid":this.mode,t.useCarousel="bottom"===this.position),this.sidebar=t,t.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),this.targetAppendSidebarTo)return this.sidebar.showInCustomContainer=!0,this.targetAppendSidebarTo.innerHTML="",void this.targetAppendSidebarTo.append(this.sidebar);document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener)}get el(){return r(this)}static get watchers(){return{appendSidebarToElement:["appendSidebarToElementWatcher"]}}};M.style=":host{display:block}";const Z=class{constructor(t){e(this,t),this.handler=void 0}render(){return t(i,null,t("vviinn-error",null,t(u,null),t("h4",{slot:"title"},g.t("wrongAspectRatioBlock.title")),t("button",{slot:"action",onClick:this.handler},g.t("wrongAspectRatioBlock.button"))))}};export{z as vviinn_detected_object,V as vviinn_empty_results,H as vviinn_modal,j as vviinn_overlay,L as vviinn_preloader,M as vviinn_vpr_button,Z as vviinn_wrong_aspect_ratio}
|
|
1
|
+
import{h as t,r as e,c as o,H as i,g as r}from"./p-c3953cbf.js";import{_ as s,O as n,B as a,n as l,C as c,s as h,o as d}from"./p-f601d5c0.js";import{a as p,s as f,c as b}from"./p-f2d58f7d.js";import{i as g}from"./p-2e76a5c3.js";import{W as u}from"./p-b2aa3af6.js";import{s as x}from"./p-43e147d6.js";import{c as v,v as m}from"./p-800ea3cc.js";import{m as w}from"./p-1f0dc75e.js";const C=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z",fill:"currentColor"})),y=({width:e=24,height:o=24})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:o,viewBox:"0 0 24 24",fill:"currentColor"},t("path",{d:"M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z"}),t("path",{d:"M4 8C4 5.79 5.79 4 8 4H9V2H8C4.69 2 2 4.69 2 8V9H4V8Z"}),t("path",{d:"M20 8C20 5.79 18.21 4 16 4H15V2H16C19.31 2 22 4.69 22 8V9H20V8Z"}),t("path",{d:"M20 16C20 18.21 18.21 20 16 20H15V22H16C19.31 22 22 19.31 22 16V15H20V16Z"}),t("path",{d:"M9 8H7C6.45 8 6 8.45 6 9C6 9.55 6.45 10 7 10H9V11C9 11.55 9.45 12 10 12C10.55 12 11 11.55 11 11V7C11 6.45 10.55 6 10 6C9.45 6 9 6.45 9 7V8Z"}),t("path",{d:"M15 16H17C17.55 16 18 15.55 18 15C18 14.45 17.55 14 17 14H15V13C15 12.45 14.55 12 14 12C13.45 12 13 12.45 13 13V17C13 17.55 13.45 18 14 18C14.55 18 15 17.55 15 17V16Z"}),t("path",{d:"M16 9C16 8.45 15.55 8 15 8H12V10H15C15.55 10 16 9.55 16 9Z"}),t("path",{d:"M6 15C6 15.55 6.45 16 7 16H12V14H7C6.45 14 6 14.45 6 15Z"})),k=({width:e=24,height:o=24})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:o,viewBox:"0 0 24 24",fill:"currentColor"},t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M20 13C20 13.55 20.45 14 21 14C21.55 14 22 13.55 22 13V5C22 3.35 20.65 2 19 2H11C10.45 2 10 2.45 10 3C10 3.55 10.45 4 11 4H19C19.55 4 20 4.45 20 5V13ZM2 19C2 20.65 3.35 22 5 22H13C13.55 22 14 21.55 14 21C14 20.45 13.55 20 13 20H5C4.45 20 4 19.55 4 19V11C4 10.45 3.55 10 3 10C2.45 10 2 10.45 2 11V19ZM12 16C11.45 16 11 15.55 11 15V13H9C8.45 13 8 12.55 8 12C8 11.45 8.45 11 9 11H11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11H15C15.55 11 16 11.45 16 12C16 12.55 15.55 13 15 13H13V15C13 15.55 12.55 16 12 16Z"})),z=class{constructor(t){e(this,t),this.vviinnSelectObject=o(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.selectedDetectedObject=void 0,this.basicEventData=void 0,this.imageBounds=void 0,this.showInWidget=void 0,this.position=["0","0"]}connectedCallback(){this.storeName=this.showInWidget?"widget":"components"}getObjectPosition(){return s.pipe(n.fromNullable(this.imageBounds),n.map((t=>{const e=p(a(this.detectedObject).rectangle),{x:o,y:i}=s.pipe(e,f(t),b);return[`${o}px`,`${i}px`]})),n.getOrElse((()=>["0","0"])))}selectDetectedObject(){const t=s.pipe(n.fromNullable(this.imageBounds),n.map((t=>{const e=a(this.detectedObject).rectangle,o=p(e);return f(t)(o)})),n.toNullable);l(this.storeName,t,this.imageBounds),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject,searchArea:t}))}isActive(){if(!this.detectedObject||!this.selectedDetectedObject)return!1;const t=a(this.detectedObject),e=a(this.selectedDetectedObject);return c.equals(t,e)}render(){return t(i,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};z.style=':host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}: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)}}';const V=class{constructor(t){e(this,t),this.handler=void 0}render(){return t(i,null,t("vviinn-error",null,t(u,null),t("h4",{slot:"title"},g.t("emptyResultsBlock.title")),"image"===h.searchType&&t("button",{slot:"action",onClick:this.handler},g.t("emptyResultsBlock.button"))))}},H=class{constructor(t){e(this,t),this.vviinnWidgetClose=o(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.hideBackButton=!1,this.isFirstScreen=void 0,this.slider=!1}componentWillLoad(){x(this,this.el)}resetTopScroll(){const t=this.el.shadowRoot.querySelector(".body");null==t||t.scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit({widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:v.VPS,widgetId:this.buttonElementId,widgetVersion:this.widgetVersion})}),this.slider?500:0)}handleAnimationEnd(t){"fade-in"===t.animationName&&(this.slider=!0)}renderImage(){return s.pipe(d(h.image),n.map((([e])=>t("img",{width:"28",height:"28",src:e.src,class:"title-image"}))),n.getOrElse((()=>null)))}render(){return t(i,{exportparts:w,class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:t=>this.handleAnimationEnd(t)},t("div",{class:"head"},!this.hideBackButton&&t("button",{part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()}},t(C,null)),t("div",{class:"title",part:"results-title"},this.renderImage(),t("slot",{name:"vviinn-image-search-modal-title"},g.t("imageSearchModalTitle"))),t("button",{onClick:()=>this.close(),class:"close-button",part:"close-button"},t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z",fill:"currentColor"})))),t("div",{class:"body"},t("slot",null)))}get el(){return r(this)}};H.style=":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--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;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--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;--button-bg-color-positive:#dcfce7;--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;--label-bg-color-accent:#ff3944;}:host{background:white;border-radius:var(--modal-border-radius, var(--border-radius-300));box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{font-family:var(--font-family, var(--font-family-base));position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:var(--font-weight-600);font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:160px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";const j=class{constructor(t){e(this,t)}render(){return t(i,null,t("slot",null))}};j.style=":host{animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";const L=class{constructor(t){e(this,t)}render(){return t(i,null)}};L.style=":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid currentColor;border-radius:50%;border-top-color:transparent;display:flex;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";const M=class{constructor(t){e(this,t),this.vviinnWidgetLoad=o(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=o(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=o(this,"vviinnWidgetClose",7),this.vviinnProductLoad=o(this,"vviinnProductLoad",7),this.vviinnProductClick=o(this,"vviinnProductClick",7),this.vviinnProductView=o(this,"vviinnProductView",7),this.vviinnResultLoad=o(this,"vviinnResultLoad",7),this.vviinnResultView=o(this,"vviinnResultView",7),this.vviinnNoResult=o(this,"vviinnNoResult",7),this.vviinnAddToBasket=o(this,"vviinnAddToBasket",7),this.sidebar=null,this.sidebarCloseListener=()=>{this.targetAppendSidebarTo?this.targetAppendSidebarTo.removeChild(this.sidebar):document.body.removeChild(this.sidebar)},this.token=void 0,this.productId=void 0,this.mode="continuity",this.campaigns="",this.excluded="",this.campaignType="set"===this.mode?"VCS":"VPR",this.locale="de-DE",this.color="",this.imageWidth=300,this.imageRatio=1,this.setItemsAmount=4,this.cssUrl=null,this.currencySign="€",this.pricePrefix="",this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.addToBasketShow=!1,this.showFilters=!1,this.addPriceContainer=!1,this.setModeDiscounts="set"===this.mode?"5, 10, 15":"",this.updateButtonLocation="topAndItem",this.sidebarTitle="set"===this.mode?"":"Similar products",this.modalScrollbar=!1,this.position="bottom",this.addStyle=!0,this.appendSidebarTo=void 0,this.favoriteShow=!1,this.appendSidebarToElement=void 0,this.oneClickDiscoveryMode="standalone",this.apiPath="https://api.vviinn.com",this.showInWidget=!1,this.targetAppendSidebarTo=void 0}connectedCallback(){this.iconSideSize="standalone"===this.oneClickDiscoveryMode?24:14}componentWillLoad(){this.appendSidebarToElement?this.targetAppendSidebarTo=this.appendSidebarToElement:this.appendSidebarTo&&(this.targetAppendSidebarTo=document.getElementById(this.appendSidebarTo))}appendSidebarToElementWatcher(){this.appendSidebarToElement&&(this.targetAppendSidebarTo=this.appendSidebarToElement)}render(){return t(i,{onClick:()=>{this.appendSidebarTo&&!this.targetAppendSidebarTo?setTimeout((()=>{this.handleClick()}),250):this.handleClick()},role:"button",tabindex:"0"},t("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},t("slot",null,t("VCS"===this.campaignType?k:y,{width:this.iconSideSize,height:this.iconSideSize}))))}handleClick(){const t=document.createElement("vviinn-recommendations-sidebar");if(t.sidebarTitle=this.sidebarTitle,t.productId=this.productId,t.token=this.token,t.position=this.position,t.widgetScrollbar=this.modalScrollbar,t.campaigns=this.campaigns,t.campaignType=this.campaignType,t.color=this.color,t.locale=this.locale,t.imageWidth=this.imageWidth,t.currencySign=this.currencySign,t.pricePrefix=this.pricePrefix,t.apiPath=this.apiPath,t.buttonElementId=this.el.id,t.noResultText=this.noResultText,t.noResultShow=this.noResultShow,t.gridArrowsDynamic=this.gridArrowsDynamic,t.productDetailsNewTab=this.productDetailsNewTab,t.productDetailsRedirect=this.productDetailsRedirect,t.widgetVersion=m,t.showingInButton=!0,t.excluded=this.excluded,t.addToBasketShow=this.addToBasketShow,t.buttonChildren=this.el.children,t.showFilters=this.showFilters,t.cssUrl=this.cssUrl,t.imageRatio=this.imageRatio,t.setItemsAmount=this.setItemsAmount,t.setModeDiscounts=this.setModeDiscounts,t.updateButtonLocation=this.updateButtonLocation,t.addPriceContainer=this.addPriceContainer,t.favoriteShow=this.favoriteShow,t.showInModal="modal"===this.oneClickDiscoveryMode,this.targetAppendSidebarTo?(t.mode="grid",t.useCarousel="append-slider"===this.oneClickDiscoveryMode):(t.mode="right"===this.position?"grid":this.mode,t.useCarousel="bottom"===this.position),this.sidebar=t,t.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),this.targetAppendSidebarTo)return this.sidebar.showInCustomContainer=!0,this.targetAppendSidebarTo.innerHTML="",void this.targetAppendSidebarTo.append(this.sidebar);document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener)}get el(){return r(this)}static get watchers(){return{appendSidebarToElement:["appendSidebarToElementWatcher"]}}};M.style=":host{display:block}";const Z=class{constructor(t){e(this,t),this.handler=void 0}render(){return t(i,null,t("vviinn-error",null,t(u,null),t("h4",{slot:"title"},g.t("wrongAspectRatioBlock.title")),t("button",{slot:"action",onClick:this.handler},g.t("wrongAspectRatioBlock.button"))))}};export{z as vviinn_detected_object,V as vviinn_empty_results,H as vviinn_modal,j as vviinn_overlay,L as vviinn_preloader,M as vviinn_vpr_button,Z as vviinn_wrong_aspect_ratio}
|