vviinn-widgets 2.216.2 → 2.217.1
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/{index-BM7VfZ_J.js → index-KB8ruJQe.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/resultsPageUrl-Cki7CFQz.js +45 -0
- package/dist/cjs/{search.store-DX5IRC4l.js → search.store-C82VhK1A.js} +13 -7
- package/dist/cjs/vviinn-button_6.cjs.entry.js +4 -4
- package/dist/cjs/vviinn-camera_12.cjs.entry.js +23 -21
- package/dist/cjs/vviinn-carousel_10.cjs.entry.js +15 -11
- package/dist/cjs/vviinn-shop-the-look.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-text-search.cjs.entry.js +21 -15
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-widgets.cjs.js +1 -1
- package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +3 -5
- package/dist/collection/components/vviinn-results/stories/ResultsTemplate.js +3 -1
- package/dist/collection/components/vviinn-results/vviinn-results.js +24 -5
- package/dist/collection/components/vviinn-shop-the-look/vviinn-shop-the-look.js +1 -1
- package/dist/collection/components/vviinn-suggestions/render-helpers.js +4 -2
- package/dist/collection/components/vviinn-text-search/helpers/handleSuggestionsKeyDown.js +1 -1
- package/dist/collection/components/vviinn-text-search/helpers/renderSuggestions.js +5 -6
- package/dist/collection/components/vviinn-text-search/vviinn-text-search.js +34 -8
- package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +4 -4
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js +10 -4
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +23 -4
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +33 -14
- package/dist/collection/helpers/url/resultsPageUrl.js +24 -7
- package/dist/collection/helpers/url/resultsPageUrl.test.js +63 -1
- package/dist/collection/store/search.store.js +13 -6
- package/dist/esm/{index-CmCUlnFh.js → index-CMX-QEzm.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/resultsPageUrl-DbOxfJSz.js +39 -0
- package/dist/esm/{search.store-B0ZhYtWV.js → search.store-Bof_HKxz.js} +13 -7
- package/dist/esm/vviinn-button_6.entry.js +4 -4
- package/dist/esm/vviinn-camera_12.entry.js +23 -21
- package/dist/esm/vviinn-carousel_10.entry.js +15 -11
- package/dist/esm/vviinn-shop-the-look.entry.js +2 -2
- package/dist/esm/vviinn-text-search.entry.js +21 -15
- package/dist/esm/vviinn-vps-button.entry.js +3 -3
- package/dist/esm/vviinn-widgets.js +1 -1
- package/dist/types/components/vviinn-filters/helpers/syncRequestFilters.d.ts +3 -1
- package/dist/types/components/vviinn-results/vviinn-results.d.ts +2 -0
- package/dist/types/components/vviinn-text-search/vviinn-text-search.d.ts +2 -0
- package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +3 -1
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +3 -1
- package/dist/types/components.d.ts +36 -4
- package/dist/types/helpers/url/resultsPageUrl.d.ts +9 -3
- package/dist/types/store/search.store.d.ts +8 -4
- package/{www/build/p-a3829a7f.entry.js → dist/vviinn-widgets/p-5ee404fb.entry.js} +1 -1
- package/{www/build/p-c64a4923.entry.js → dist/vviinn-widgets/p-756d201c.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-1e7d7fc8.entry.js → p-97099d69.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-DIMfQtwJ.js → p-DM6fTGU7.js} +1 -1
- package/dist/vviinn-widgets/p-DbOxfJSz.js +1 -0
- package/dist/vviinn-widgets/p-dcaf6f35.entry.js +1 -0
- package/dist/vviinn-widgets/p-e4c19fc9.entry.js +1 -0
- package/dist/vviinn-widgets/{p-B--7xBdV.js → p-elxMiKkD.js} +1 -1
- package/dist/vviinn-widgets/{p-df67781e.entry.js → p-fbbf34ba.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/{dist/vviinn-widgets/p-a3829a7f.entry.js → www/build/p-5ee404fb.entry.js} +1 -1
- package/{dist/vviinn-widgets/p-c64a4923.entry.js → www/build/p-756d201c.entry.js} +1 -1
- package/www/build/{p-1e7d7fc8.entry.js → p-97099d69.entry.js} +1 -1
- package/www/build/{p-DIMfQtwJ.js → p-DM6fTGU7.js} +1 -1
- package/www/build/p-DbOxfJSz.js +1 -0
- package/www/build/p-dcaf6f35.entry.js +1 -0
- package/www/build/p-e4c19fc9.entry.js +1 -0
- package/www/build/{p-B--7xBdV.js → p-elxMiKkD.js} +1 -1
- package/www/build/{p-df67781e.entry.js → p-fbbf34ba.entry.js} +1 -1
- package/www/build/{p-64d1f5a3.js → p-fff4758a.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/cjs/resultsPageUrl-BMlvrFCW.js +0 -27
- package/dist/esm/resultsPageUrl-niHq9WT6.js +0 -22
- package/dist/vviinn-widgets/p-137944e9.entry.js +0 -1
- package/dist/vviinn-widgets/p-2b96382d.entry.js +0 -1
- package/dist/vviinn-widgets/p-niHq9WT6.js +0 -1
- package/www/build/p-137944e9.entry.js +0 -1
- package/www/build/p-2b96382d.entry.js +0 -1
- package/www/build/p-niHq9WT6.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as e,r as t,H as o,c as i,g as r,F as a}from"./p-RkvPN2Rk.js";import{i as n}from"./p-BJxQCbNV.js";import{l as s,h as d,j as l,n as c,u as h,v as f}from"./p-DIMfQtwJ.js";import{s as p,a as b}from"./p-DKHkeCw7.js";import{S as g}from"./p-6vxKTHCE.js";import{m as u,c as m,p as x,r as v,i as y}from"./p-CPTOq59a.js";import{a as w,P as k,D as C,L as z}from"./p-rqiiCPBX.js";import{i as L}from"./p-CrEgr0jU.js";const V=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z",fill:"currentColor"})),S=()=>e("svg",{width:"20",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z",fill:"#161616"})),j=()=>e("svg",{width:"48",height:"48",slot:"icon",class:"icon",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M24 34C24.5667 34 25.0417 33.8083 25.425 33.425C25.8083 33.0417 26 32.5667 26 32C26 31.4333 25.8083 30.9583 25.425 30.575C25.0417 30.1917 24.5667 30 24 30C23.4333 30 22.9583 30.1917 22.575 30.575C22.1917 30.9583 22 31.4333 22 32C22 32.5667 22.1917 33.0417 22.575 33.425C22.9583 33.8083 23.4333 34 24 34ZM24 26C24.5667 26 25.0417 25.8083 25.425 25.425C25.8083 25.0417 26 24.5667 26 24V16C26 15.4333 25.8083 14.9583 25.425 14.575C25.0417 14.1917 24.5667 14 24 14C23.4333 14 22.9583 14.1917 22.575 14.575C22.1917 14.9583 22 15.4333 22 16V24C22 24.5667 22.1917 25.0417 22.575 25.425C22.9583 25.8083 23.4333 26 24 26ZM24 44C21.2333 44 18.6333 43.475 16.2 42.425C13.7667 41.375 11.65 39.95 9.85 38.15C8.05 36.35 6.625 34.2333 5.575 31.8C4.525 29.3667 4 26.7667 4 24C4 21.2333 4.525 18.6333 5.575 16.2C6.625 13.7667 8.05 11.65 9.85 9.85C11.65 8.05 13.7667 6.625 16.2 5.575C18.6333 4.525 21.2333 4 24 4C26.7667 4 29.3667 4.525 31.8 5.575C34.2333 6.625 36.35 8.05 38.15 9.85C39.95 11.65 41.375 13.7667 42.425 16.2C43.475 18.6333 44 21.2333 44 24C44 26.7667 43.475 29.3667 42.425 31.8C41.375 34.2333 39.95 36.35 38.15 38.15C36.35 39.95 34.2333 41.375 31.8 42.425C29.3667 43.475 26.7667 44 24 44Z",fill:"#161616"})),H=({width:t=24,height:o=24})=>e("svg",{width:t,height:o,viewBox:"0 0 24 24",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M18 2H11C8.79 2 7 3.79 7 6V7H6C3.79 7 2 8.79 2 11V18C2 20.21 3.79 22 6 22H13C14.86 22 16.41 20.72 16.86 19H14.72C14.37 19.59 13.74 20 13 20H6C4.9 20 4 19.1 4 18V11C4 9.9 4.9 9 6 9H7V13C7 15.21 8.79 17 11 17H18C20.21 17 22 15.21 22 13V6C22 3.79 20.21 2 18 2ZM15 15H11C9.9 15 9 14.1 9 13V9H13C14.1 9 15 9.9 15 11V15ZM20 13C20 14.1 19.1 15 18 15H17V11C17 8.79 15.21 7 13 7H9V6C9 4.9 9.9 4 11 4H18C19.1 4 20 4.9 20 6V13Z",fill:"currentColor"})),B=({width:t=24,height:o=24})=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:o,viewBox:"0 0 24 24",fill:"currentColor"},e("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"})),T=class{constructor(e){t(this,e),this.addStyle=!0}render(){return e(o,{key:"8aa5c9b9a1443967360070b7c3ebc6bb6882e99d",exportparts:"button"},e("div",{key:"0fe27ed1210a83004a8d23918fdaf8b4cefea1dd",class:this.addStyle?"open-button":"raw-open-button",part:"button"},e("slot",{key:"be4ae4abc0ed26c59d45155375d6d5ca4be1b93f"},e(S,{key:"ebf649e150c4e3e291038ac6299fab988bb7b586"}))))}};T.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:block}:host div{border:none;cursor:pointer;color:inherit}.open-button{background-color:var(--button-bg-color-secondary);align-items:center;border-radius:50%;box-sizing:border-box;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:background-color 0.2s ease-in-out}.open-button:hover{background-color:var(--button-bg-color-secondary-hover)}.open-button:active{background-color:var(--button-bg-color-secondary-active)}.raw-open-button{display:contents;background:none}";const A={"empty-results":{i18nKey:"emptyResultsBlock"},"server-error":{i18nKey:"serverErrorBlock"},"wrong-aspect-ratio":{i18nKey:"wrongAspectRatioBlock"},"wrong-format":{i18nKey:"wrongFormatBlock"},"heic-not-supported":{i18nKey:"heicNotSupportedBlock"}},I=class{constructor(e){t(this,e),this.hasBackground=!0}getErrorContent(){if(!this.errorType)return null;const e=A[this.errorType],t="wrong-format"===this.errorType?{formats:s()}:void 0,o=`${e.i18nKey}.text`,i=`${e.i18nKey}.button`;return{title:n.t(`${e.i18nKey}.title`),text:n.exists(o)?n.t(o,t):null,buttonText:this.hasButton()?n.t(i):null}}hasButton(){return!!this.errorType&&(!!n.exists(`${A[this.errorType].i18nKey}.button`)&&!!this.handler)}render(){const t=this.getErrorContent(),i={"error-content":!0,"add-background":this.hasBackground},r=this.errorType?[e(j,null),e("h4",null,null==t?void 0:t.title),(null==t?void 0:t.text)&&e("span",null,t.text),(null==t?void 0:t.buttonText)&&e("button",{onClick:this.handler},t.buttonText)]:[e("slot",{name:"icon"}),e("slot",{name:"title"}),e("slot",{name:"text"}),e("slot",{name:"action"})];return e(o,{key:"9fd42173973878d8d2229b800dc912a74d78b343"},e("div",{key:"f285cdf4bad4dc393cfb798639753fdd3a9da5e7",class:i},r))}};I.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:block;width:100%;font-family:var(--font-family, var(--font-family-base))}:host(.add-background){background:var(--surface-bg-color-01)}:host(.add-top-margin){margin-top:var(--spacing-400)}.error-content{display:grid;grid-gap:var(--spacing-150);text-align:center;justify-items:center;width:100%;max-width:356px;padding:var(--spacing-200);border-radius:var(--border-radius-200);box-sizing:border-box;margin:0 auto}.error-content.add-background{background:var(--surface-bg-color-01)}svg,::slotted(svg){display:grid;align-self:center}h4,::slotted(h4){margin:unset;font-weight:var(--font-weight-600);font-size:var(--font-size-headline);line-height:var(--line-height-headline)}span,::slotted(span){font-size:14px;line-height:20px}button,::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-size:var(--font-size-label);font-weight:var(--font-weight-500);background:var(--color-primary, var(--button-bg-color-primary));border-radius:var(--border-radius-100);padding:var(--spacing-100);font-size:var(--font-size-body);color:var(--color-text-inverse);font-family:var(--font-family, var(--font-family-base))}button:hover,::slotted(button:hover){background:var(--button-bg-color-primary-hover)}";const M=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose"),this.active=!1,this.hideBackButton=!1,this.slider=!1,this.handleEscapeKey=e=>{"Escape"===e.key&&this.active&&(e.preventDefault(),this.close())},this.handleCloseButtonKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.close())},this.handleAnimationEnd=e=>{"fade-in"===e.animationName&&(this.slider=!0)}}handleActiveChange(e){e?document.addEventListener("keydown",this.handleEscapeKey):document.removeEventListener("keydown",this.handleEscapeKey)}componentWillLoad(){p(this,this.el)}disconnectedCallback(){document.removeEventListener("keydown",this.handleEscapeKey)}resetTopScroll(){const e=this.el.shadowRoot.querySelector(".body");null==e||e.scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit(Object.assign({campaignTypeId:"VPS",campaignTypeName:d.VPS,widgetVersion:this.widgetVersion},l("widgetId",this.buttonElementId)))}),this.slider?w:0)}render(){return e(o,{key:"2a16919fe88ccbb72795311fb6b8af471f043700",exportparts:u,class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:this.handleAnimationEnd,role:"dialog","aria-modal":this.active?"true":"false","aria-label":n.t("imageSearchModalTitle"),inert:!this.active||void 0},e("div",{key:"c4fcf804eda5eb693d99af7feb00e3225ec7487e",class:"head"},!this.hideBackButton&&e("button",{key:"4e9fd4c897201550c12718dda82b230381023b69",part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()},"aria-label":n.t("a11y.backButton")},e(g,{key:"9c2669a30956cf13c3907c08cffc4f96b4ac9ab6"})),e("div",{key:"6a035cd0270f40739e17290b6c71559e2edc88ee",class:"title",part:"results-title"},(t=c.image)?e("img",{width:"28",height:"28",src:t.src,class:"title-image",alt:n.t("a11y.uploadedImage")}):null,e("slot",{key:"f346c0bd895c16a4a6f1655977bfe59383968c74",name:"vviinn-image-search-modal-title"},n.t("imageSearchModalTitle"))),e("button",{key:"eee9e1c6721a87ca543d9d4167a41a2ce4b895b3",onClick:()=>this.close(),onKeyDown:this.handleCloseButtonKeyDown,class:"close-button",part:"close-button","aria-label":n.t("a11y.closeButton")},e("svg",{key:"62b14679a4830b11c616a4a1ef3be8cb102a476e",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true"},e("path",{key:"239b466c878e112d8b47f23982f856718fe1150c",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"})))),e("div",{key:"d9d9be37267bf710b9b02ba54a8970cc7a3dae44",class:"body"},e("slot",{key:"21d2d31cdc4350c170898f9572cf64b1de06d795"})));var t}get el(){return r(this)}static get watchers(){return{active:["handleActiveChange"]}}};M.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}: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{height:64px;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:slide-up;animation-duration:var(\n --search-modal-animation-duration-mobile,\n var(--search-modal-animation-duration-mobile-default)\n );animation-fill-mode:forwards;animation-timing-function:ease-out;border-radius:var(--modal-border-radius, var(--border-radius-300))\n var(--modal-border-radius, var(--border-radius-300)) 0 0;height:calc(100vh - 64px);width:100vw;max-width:100vw}:host(.closed){animation-name:slide-down;animation-duration:var(\n --search-modal-animation-duration-mobile,\n var(--search-modal-animation-duration-mobile-default)\n );animation-fill-mode:forwards;animation-timing-function:ease-in}.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 slide-up{from{transform:translateY(calc(100% - 64px))}to{transform:translateY(-64px)}}@keyframes slide-down{from{transform:translateY(-64px)}to{transform:translateY(100%)}}";const R=class{constructor(e){t(this,e),this.active=!1,this.isClosing=!1,this.handleAnimationEnd=e=>{var t;"fade-out"===e.animationName&&this.isClosing&&(this.isClosing=!1,null===(t=this.dialogRef)||void 0===t||t.close())}}handleActiveChange(e){requestAnimationFrame((()=>{this.dialogRef&&(e&&!this.dialogRef.open?(this.isClosing=!1,this.dialogRef.classList.remove("closing"),this.dialogRef.showModal()):e||!this.dialogRef.open||this.isClosing||(this.isClosing=!0,this.dialogRef.classList.add("closing")))}))}componentDidLoad(){this.active&&this.dialogRef&&this.dialogRef.showModal()}render(){return e("dialog",{key:"1e0947052fc6b1df54cc1cc00207cdce30c1d5f0",ref:e=>this.dialogRef=e,onAnimationEnd:this.handleAnimationEnd},e("slot",{key:"5cdb99e46c89612c113559aedb7b73328f0b6810"}))}static get watchers(){return{active:["handleActiveChange"]}}};R.style="dialog{border:none;padding:0;margin:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:transparent;overflow:hidden;cursor:default}dialog:not([open]){display:none}dialog[open]{display:grid;align-items:center;justify-items:center;animation:fade-in\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}dialog[open]::backdrop{background:rgba(0, 0, 0, 0.5);animation:fade-in\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}@media (max-width: 768px){dialog[open]{align-items:end;padding-top:64px}}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0.1}}dialog.closing{animation:fade-out\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}dialog.closing::backdrop{animation:fade-out\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}";const E=class{constructor(e){t(this,e),this.position="bottom",this.widgetScrollbar=!1,this.mode="continuity",this.campaigns="",this.imageWidth=k,this.showMultipleImages=!1,this.addToBasketShow=!1,this.addPriceContainer=!1,this.showFilters=!1,this.setItemsAmount=4,this.favoriteShow=!1,this.useCarousel=!0,this.showInWidget=!1,this.imageResolutionWidth=C,this.showInCustomContainer=!1,this.showInModal=!1,this.isAppended=!1,this.sidebarState="idle",this.showLoadingClass=!1,this.recommendationsLoading=!1,this.hidden=!1,this.setRecommendationsLoading=e=>{this.recommendationsLoading=e},this.isSourceImageValid=()=>{var e;return!!(null===(e=this.sourceProduct)||void 0===e?void 0:e.image)}}updatingAllCardsStarted(){const{height:e}=this.getSidebarRectangle(),t=this.getAsideElement();t.style.height!==`${e}px`&&(t.style.height=`${e}px`)}updatingAllCardsFinished(){const e=this.getAsideElement();"auto"!==e.style.height&&(e.style.height="auto")}bodyClickListener(e){const t=this.getSidebarRectangle();t&&this.showInModal&&!L(e,t)&&(this.sidebarState="closed")}sourceProductReceived(e){this.sourceProduct=e.detail}handleEscape(e){"Escape"!==e.key||"open"!==this.sidebarState||this.isAppended||(this.sidebarState="closed")}handleLoadingChange(e){e?(this.showLoadingClass=!0,clearTimeout(this.loadingClassTimeout)):this.loadingClassTimeout=setTimeout((()=>{this.showLoadingClass=!1}),z)}handleSidebarStateChange(e,t){"open"===e&&"open"!==t?setTimeout((()=>{const e=this.el.shadowRoot.querySelector(".close-sidebar");null==e||e.focus()}),0):"closed"===e&&"open"===t&&this.triggerElement&&this.triggerElement.focus()}getClassMap(){return{[this.position]:!0,[this.sidebarState]:!0,"no-carousel":!this.useCarousel,"no-fixed":this.showInCustomContainer,appended:this.isAppended,loading:this.showLoadingClass}}getAsideElement(){return this.el.shadowRoot.querySelector(".sidebar")}getSidebarRectangle(){var e;return null===(e=this.getAsideElement())||void 0===e?void 0:e.getBoundingClientRect()}componentDidLoad(){const e=this.el.shadowRoot.querySelector("vviinn-vpr-widget");Array.from(this.buttonChildren).forEach((t=>{const o=t.cloneNode(!0);t.hasAttribute("slot")&&e.appendChild(o)}))}disconnectedCallback(){clearTimeout(this.loadingClassTimeout)}render(){var t;return e(o,{key:"fa22d68e16838a5453bd0de3df7e287469badb5d",class:this.getClassMap(),style:{display:this.hidden?"none":void 0},exportparts:`body, close-sidebar, ${m}, ${x}, ${v}`},e("div",{key:"6a6a949b44787b562eeb93d15f836f2861b37bf4",class:"sidebar",part:"body",onAnimationEnd:e=>this.handleAnimationEnd(e),role:this.showInModal?"dialog":"region","aria-modal":this.showInModal?"true":void 0,"aria-label":n.t("a11y.recommendations")},e("div",{key:"9a789c39fcbeabaddcd74821c087082e31027097",class:{"sidebar-header":!0,"contains-source-img":this.isSourceImageValid()},part:"sidebar-header"},"set"!==this.mode&&e(a,{key:"1567f0dc6dd89dc24f1856d19841b835e147fdbd"},this.renderSourceImage(),0!==(null===(t=this.sidebarTitle)||void 0===t?void 0:t.length)&&e("span",{key:"8b15728814f88c18c472cad3cbe53bd564a1e9d2",class:"title",part:"recommendations-title"},this.sidebarTitle||n.t("discoveryWidgetTitle")),!!this.sidebarSubtitle&&e("span",{key:"bae0890e349463309352336bc190c6688c03bd92",class:"subtitle",part:"recommendations-subtitle"},this.sidebarSubtitle)),e("button",{key:"4b68bed07f7021a18d89c8e974470c6654d64cf2",class:"close-sidebar",onClick:()=>{this.sidebarState="closed"},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.sidebarState="closed")},part:"close-sidebar","aria-label":n.t("a11y.closeButton")},e(V,{key:"47a915a15394f7c76edda5268858dc797d3edad3"}))),e("div",{key:"56d7f788b1537b351c9502d790b4425cce11fa6b",class:"sidebar-content",part:"sidebar-content"},e("vviinn-vpr-widget",{key:"8fc47c60c4235a83a8dc949659b356d32839e462",token:this.token,currencySign:this.currencySign,pricePrefix:this.pricePrefix,apiPath:this.apiPath,locale:this.locale,numberLocale:this.numberLocale,productId:this.productId,exportparts:`${m}, ${x}, ${v}`,imageWidth:this.imageWidth,showMultipleImages:this.showMultipleImages,setItemsAmount:this.setItemsAmount,blockTitle:"set"!==this.mode?"":this.sidebarTitle,blockSubtitle:"set"===this.mode?this.sidebarSubtitle:void 0,mode:this.mode,"campaign-type":this.campaignType,useCarousel:this.useCarousel,onVviinnRecommendationsLoaded:()=>{this.hidden=!1,this.sidebarState="open"},showScroll:this.widgetScrollbar,campaigns:this.campaigns,color:this.color,buttonElementId:this.buttonElementId,noResultText:this.noResultText,noResultShow:this.noResultShow,gridArrowsDynamic:this.gridArrowsDynamic,showingInButton:this.showingInButton,excluded:this.excluded,productDetailsNewTab:this.productDetailsNewTab,productDetailsRedirect:this.productDetailsRedirect,closed:"closed"===this.sidebarState,opened:"open"===this.sidebarState,addToBasketShow:this.addToBasketShow,cssUrl:this.cssUrl,showFilters:this.showFilters,setModeDiscounts:this.setModeDiscounts,updateButtonLocation:this.updateButtonLocation,addPriceContainer:this.addPriceContainer,favoriteShow:this.favoriteShow,isAppended:this.isAppended,showInWidget:this.showInWidget,recommendationsLoading:this.recommendationsLoading,setRecommendationsLoading:this.setRecommendationsLoading,imageResolutionWidth:this.imageResolutionWidth,uiSessionId:this.uiSessionId}))))}renderSourceImage(){var t,o,i,r;const a=(null===(o=null===(t=this.sourceProduct)||void 0===t?void 0:t.image)||void 0===o?void 0:o.thumbnail)||(null===(r=null===(i=this.sourceProduct)||void 0===i?void 0:i.image)||void 0===r?void 0:r.original)||null;return a?e("img",{class:"source-image",part:"source-image",src:a,alt:n.t("a11y.sourceProductImage")}):null}handleAnimationEnd({animationName:e}){e.includes("slideOut")&&(this.hidden=!0)}get el(){return r(this)}static get watchers(){return{recommendationsLoading:["handleLoadingChange"],sidebarState:["handleSidebarStateChange"]}}};E.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";const Z=class{constructor(e){t(this,e),this.vviinnWidgetLoad=i(this,"vviinnWidgetLoad"),this.vviinnWidgetOpen=i(this,"vviinnWidgetOpen"),this.vviinnWidgetClose=i(this,"vviinnWidgetClose"),this.vviinnProductLoad=i(this,"vviinnProductLoad"),this.vviinnProductClick=i(this,"vviinnProductClick"),this.vviinnProductView=i(this,"vviinnProductView"),this.vviinnResultLoad=i(this,"vviinnResultLoad"),this.vviinnResultView=i(this,"vviinnResultView"),this.vviinnNoResult=i(this,"vviinnNoResult"),this.vviinnAddToBasket=i(this,"vviinnAddToBasket"),this.vviinnVprButtonActivated=i(this,"vviinnVprButtonActivated"),this.mode="continuity",this.campaigns="",this.excluded="",this.campaignType="set"===this.mode?"VCS":"VPR",this.color="",this.imageWidth=k,this.imageResolutionWidth=C,this.showMultipleImages=!1,this.setItemsAmount=4,this.cssUrl=null,this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.addToBasketShow=!1,this.showFilters=!1,this.addPriceContainer=!1,this.oneClickDiscoveryMode="modal",this.setModeDiscounts="set"===this.mode?"5, 10, 15":"",this.updateButtonLocation="topAndItem",this.modalScrollbar=!1,this.position="bottom",this.addStyle=!0,this.favoriteShow=!1,this.isStandalone=!0,this.showInWidget=!1,this.sidebar=null,this.removeSidebarFromDOM=()=>{var e;this.sidebar&&((null===(e=this.targetAppendSidebarTo)||void 0===e?void 0:e.contains(this.sidebar))?this.targetAppendSidebarTo.removeChild(this.sidebar):document.body.contains(this.sidebar)&&document.body.removeChild(this.sidebar),this.sidebar=null)},this.sidebarCloseListener=(e=!1)=>{this.sidebar&&(e?this.removeSidebarFromDOM():(this.sidebar.sidebarState="closed",setTimeout((()=>this.removeSidebarFromDOM()),w)))},this.handleButtonClick=()=>{this.vviinnVprButtonActivated.emit(),this.appendSidebarToId&&!this.targetAppendSidebarTo?setTimeout((()=>{this.handleClick()}),250):this.handleClick()},this.handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleButtonClick())}}connectedCallback(){this.iconSideSize=this.isStandalone?24:14;const{onChange:e}=h(this.showInWidget);this.disposeStoreListener=e("searchStatus",(e=>{"loading"===e&&this.sidebarCloseListener()}))}async componentWillLoad(){await y(this.locale),this.appendSidebarToElement?this.targetAppendSidebarTo=this.appendSidebarToElement:this.appendSidebarToId&&(this.targetAppendSidebarTo=document.getElementById(this.appendSidebarToId))}appendSidebarToElementWatcher(){this.appendSidebarToElement&&(this.targetAppendSidebarTo=this.appendSidebarToElement)}getAriaLabel(){try{return n.t("a11y.findSimilarProducts")||"Find similar products"}catch(e){return"Find similar products"}}render(){return e(o,{key:"e1d8ff31a915dc5aef78838bd4f84e2e416b0953",role:"button",tabindex:"0","aria-label":this.getAriaLabel(),onClick:this.handleButtonClick,onKeyDown:this.handleKeyDown},e("vviinn-button",{key:"b5178a6135d508c7b1f04ab159e7c8117ee986af",addStyle:this.addStyle,part:"vviinn-button"},e("slot",{key:"882bd8cfa3a809e99bb4a1162e8988d49b327113"},e("VCS"===this.campaignType?B:H,{width:this.iconSideSize,height:this.iconSideSize}))))}handleClick(){const e=document.createElement("vviinn-recommendations-sidebar");e.token=this.token,e.locale=this.locale,e.numberLocale=this.numberLocale,e.currencySign=this.currencySign,e.pricePrefix=this.pricePrefix,e.apiPath=this.apiPath,e.sidebarTitle=this.sidebarTitle,e.sidebarSubtitle=this.sidebarSubtitle,e.productId=this.productId,e.position=this.position,e.widgetScrollbar=this.modalScrollbar,e.campaigns=this.campaigns,e.campaignType=this.campaignType,e.color=this.color,e.imageWidth=this.imageWidth,e.showMultipleImages=this.showMultipleImages,e.buttonElementId=this.el.id,e.noResultText=this.noResultText,e.noResultShow=this.noResultShow,e.gridArrowsDynamic=this.gridArrowsDynamic,e.productDetailsNewTab=this.productDetailsNewTab,e.productDetailsRedirect=this.productDetailsRedirect,e.widgetVersion=f,e.showingInButton=!0,e.excluded=this.excluded,e.addToBasketShow=this.addToBasketShow,e.buttonChildren=this.el.children,e.showFilters=this.showFilters,e.cssUrl=this.cssUrl,e.setItemsAmount=this.setItemsAmount,e.setModeDiscounts=this.setModeDiscounts,e.updateButtonLocation=this.updateButtonLocation,e.addPriceContainer=this.addPriceContainer,e.favoriteShow=this.favoriteShow,e.showInModal="modal"===this.oneClickDiscoveryMode,e.isAppended=!!this.targetAppendSidebarTo||!!this.appendSidebarToElement,e.showInWidget=this.showInWidget,e.uiSessionId=this.uiSessionId,e.triggerElement=this.el,this.targetAppendSidebarTo?(e.mode="grid",e.useCarousel="append-slider"===this.oneClickDiscoveryMode):(e.mode="right"===this.position?"grid":this.mode,e.useCarousel="bottom"===this.position),this.sidebar=e,this.eventAbortController=new AbortController;const{signal:t}=this.eventAbortController;if(b(document,[["vviinnWidgetClose",()=>this.sidebarCloseListener(!1)],["vviinnStorybookStoryChanged",()=>this.sidebarCloseListener(!0)]],t),this.targetAppendSidebarTo)return this.sidebar.showInCustomContainer=!0,this.targetAppendSidebarTo.innerHTML="",void this.targetAppendSidebarTo.append(this.sidebar);document.body.append(this.sidebar)}disconnectedCallback(){var e,t;null===(e=this.eventAbortController)||void 0===e||e.abort(),null===(t=this.disposeStoreListener)||void 0===t||t.call(this)}get el(){return r(this)}static get watchers(){return{appendSidebarToElement:["appendSidebarToElementWatcher"]}}};Z.style=":host{display:inline-block}";export{T as vviinn_button,I as vviinn_error,M as vviinn_modal,R as vviinn_overlay,E as vviinn_recommendations_sidebar,Z as vviinn_vpr_button}
|
|
1
|
+
import{h as e,r as t,H as o,c as i,g as r,F as a}from"./p-RkvPN2Rk.js";import{i as n}from"./p-BJxQCbNV.js";import{l as s,h as l,j as d,n as c,u as h,v as f}from"./p-DM6fTGU7.js";import{s as p,a as b}from"./p-DKHkeCw7.js";import{S as g}from"./p-6vxKTHCE.js";import{m as u,c as m,p as x,r as v,i as y}from"./p-CPTOq59a.js";import{a as w,P as k,D as C,L as z}from"./p-rqiiCPBX.js";import{i as L}from"./p-CrEgr0jU.js";const V=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z",fill:"currentColor"})),S=()=>e("svg",{width:"20",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z",fill:"#161616"})),j=()=>e("svg",{width:"48",height:"48",slot:"icon",class:"icon",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M24 34C24.5667 34 25.0417 33.8083 25.425 33.425C25.8083 33.0417 26 32.5667 26 32C26 31.4333 25.8083 30.9583 25.425 30.575C25.0417 30.1917 24.5667 30 24 30C23.4333 30 22.9583 30.1917 22.575 30.575C22.1917 30.9583 22 31.4333 22 32C22 32.5667 22.1917 33.0417 22.575 33.425C22.9583 33.8083 23.4333 34 24 34ZM24 26C24.5667 26 25.0417 25.8083 25.425 25.425C25.8083 25.0417 26 24.5667 26 24V16C26 15.4333 25.8083 14.9583 25.425 14.575C25.0417 14.1917 24.5667 14 24 14C23.4333 14 22.9583 14.1917 22.575 14.575C22.1917 14.9583 22 15.4333 22 16V24C22 24.5667 22.1917 25.0417 22.575 25.425C22.9583 25.8083 23.4333 26 24 26ZM24 44C21.2333 44 18.6333 43.475 16.2 42.425C13.7667 41.375 11.65 39.95 9.85 38.15C8.05 36.35 6.625 34.2333 5.575 31.8C4.525 29.3667 4 26.7667 4 24C4 21.2333 4.525 18.6333 5.575 16.2C6.625 13.7667 8.05 11.65 9.85 9.85C11.65 8.05 13.7667 6.625 16.2 5.575C18.6333 4.525 21.2333 4 24 4C26.7667 4 29.3667 4.525 31.8 5.575C34.2333 6.625 36.35 8.05 38.15 9.85C39.95 11.65 41.375 13.7667 42.425 16.2C43.475 18.6333 44 21.2333 44 24C44 26.7667 43.475 29.3667 42.425 31.8C41.375 34.2333 39.95 36.35 38.15 38.15C36.35 39.95 34.2333 41.375 31.8 42.425C29.3667 43.475 26.7667 44 24 44Z",fill:"#161616"})),H=({width:t=24,height:o=24})=>e("svg",{width:t,height:o,viewBox:"0 0 24 24",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M18 2H11C8.79 2 7 3.79 7 6V7H6C3.79 7 2 8.79 2 11V18C2 20.21 3.79 22 6 22H13C14.86 22 16.41 20.72 16.86 19H14.72C14.37 19.59 13.74 20 13 20H6C4.9 20 4 19.1 4 18V11C4 9.9 4.9 9 6 9H7V13C7 15.21 8.79 17 11 17H18C20.21 17 22 15.21 22 13V6C22 3.79 20.21 2 18 2ZM15 15H11C9.9 15 9 14.1 9 13V9H13C14.1 9 15 9.9 15 11V15ZM20 13C20 14.1 19.1 15 18 15H17V11C17 8.79 15.21 7 13 7H9V6C9 4.9 9.9 4 11 4H18C19.1 4 20 4.9 20 6V13Z",fill:"currentColor"})),B=({width:t=24,height:o=24})=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:o,viewBox:"0 0 24 24",fill:"currentColor"},e("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"})),T=class{constructor(e){t(this,e),this.addStyle=!0}render(){return e(o,{key:"8aa5c9b9a1443967360070b7c3ebc6bb6882e99d",exportparts:"button"},e("div",{key:"0fe27ed1210a83004a8d23918fdaf8b4cefea1dd",class:this.addStyle?"open-button":"raw-open-button",part:"button"},e("slot",{key:"be4ae4abc0ed26c59d45155375d6d5ca4be1b93f"},e(S,{key:"ebf649e150c4e3e291038ac6299fab988bb7b586"}))))}};T.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:block}:host div{border:none;cursor:pointer;color:inherit}.open-button{background-color:var(--button-bg-color-secondary);align-items:center;border-radius:50%;box-sizing:border-box;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:background-color 0.2s ease-in-out}.open-button:hover{background-color:var(--button-bg-color-secondary-hover)}.open-button:active{background-color:var(--button-bg-color-secondary-active)}.raw-open-button{display:contents;background:none}";const A={"empty-results":{i18nKey:"emptyResultsBlock"},"server-error":{i18nKey:"serverErrorBlock"},"wrong-aspect-ratio":{i18nKey:"wrongAspectRatioBlock"},"wrong-format":{i18nKey:"wrongFormatBlock"},"heic-not-supported":{i18nKey:"heicNotSupportedBlock"}},I=class{constructor(e){t(this,e),this.hasBackground=!0}getErrorContent(){if(!this.errorType)return null;const e=A[this.errorType],t="wrong-format"===this.errorType?{formats:s()}:void 0,o=`${e.i18nKey}.text`,i=`${e.i18nKey}.button`;return{title:n.t(`${e.i18nKey}.title`),text:n.exists(o)?n.t(o,t):null,buttonText:this.hasButton()?n.t(i):null}}hasButton(){return!!this.errorType&&(!!n.exists(`${A[this.errorType].i18nKey}.button`)&&!!this.handler)}render(){const t=this.getErrorContent(),i={"error-content":!0,"add-background":this.hasBackground},r=this.errorType?[e(j,null),e("h4",null,null==t?void 0:t.title),(null==t?void 0:t.text)&&e("span",null,t.text),(null==t?void 0:t.buttonText)&&e("button",{onClick:this.handler},t.buttonText)]:[e("slot",{name:"icon"}),e("slot",{name:"title"}),e("slot",{name:"text"}),e("slot",{name:"action"})];return e(o,{key:"9fd42173973878d8d2229b800dc912a74d78b343"},e("div",{key:"f285cdf4bad4dc393cfb798639753fdd3a9da5e7",class:i},r))}};I.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:block;width:100%;font-family:var(--font-family, var(--font-family-base))}:host(.add-background){background:var(--surface-bg-color-01)}:host(.add-top-margin){margin-top:var(--spacing-400)}.error-content{display:grid;grid-gap:var(--spacing-150);text-align:center;justify-items:center;width:100%;max-width:356px;padding:var(--spacing-200);border-radius:var(--border-radius-200);box-sizing:border-box;margin:0 auto}.error-content.add-background{background:var(--surface-bg-color-01)}svg,::slotted(svg){display:grid;align-self:center}h4,::slotted(h4){margin:unset;font-weight:var(--font-weight-600);font-size:var(--font-size-headline);line-height:var(--line-height-headline)}span,::slotted(span){font-size:14px;line-height:20px}button,::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-size:var(--font-size-label);font-weight:var(--font-weight-500);background:var(--color-primary, var(--button-bg-color-primary));border-radius:var(--border-radius-100);padding:var(--spacing-100);font-size:var(--font-size-body);color:var(--color-text-inverse);font-family:var(--font-family, var(--font-family-base))}button:hover,::slotted(button:hover){background:var(--button-bg-color-primary-hover)}";const M=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose"),this.active=!1,this.hideBackButton=!1,this.slider=!1,this.handleEscapeKey=e=>{"Escape"===e.key&&this.active&&(e.preventDefault(),this.close())},this.handleCloseButtonKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.close())},this.handleAnimationEnd=e=>{"fade-in"===e.animationName&&(this.slider=!0)}}handleActiveChange(e){e?document.addEventListener("keydown",this.handleEscapeKey):document.removeEventListener("keydown",this.handleEscapeKey)}componentWillLoad(){p(this,this.el)}disconnectedCallback(){document.removeEventListener("keydown",this.handleEscapeKey)}resetTopScroll(){const e=this.el.shadowRoot.querySelector(".body");null==e||e.scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit(Object.assign({campaignTypeId:"VPS",campaignTypeName:l.VPS,widgetVersion:this.widgetVersion},d("widgetId",this.buttonElementId)))}),this.slider?w:0)}render(){return e(o,{key:"2a16919fe88ccbb72795311fb6b8af471f043700",exportparts:u,class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:this.handleAnimationEnd,role:"dialog","aria-modal":this.active?"true":"false","aria-label":n.t("imageSearchModalTitle"),inert:!this.active||void 0},e("div",{key:"c4fcf804eda5eb693d99af7feb00e3225ec7487e",class:"head"},!this.hideBackButton&&e("button",{key:"4e9fd4c897201550c12718dda82b230381023b69",part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()},"aria-label":n.t("a11y.backButton")},e(g,{key:"9c2669a30956cf13c3907c08cffc4f96b4ac9ab6"})),e("div",{key:"6a035cd0270f40739e17290b6c71559e2edc88ee",class:"title",part:"results-title"},(t=c.image)?e("img",{width:"28",height:"28",src:t.src,class:"title-image",alt:n.t("a11y.uploadedImage")}):null,e("slot",{key:"f346c0bd895c16a4a6f1655977bfe59383968c74",name:"vviinn-image-search-modal-title"},n.t("imageSearchModalTitle"))),e("button",{key:"eee9e1c6721a87ca543d9d4167a41a2ce4b895b3",onClick:()=>this.close(),onKeyDown:this.handleCloseButtonKeyDown,class:"close-button",part:"close-button","aria-label":n.t("a11y.closeButton")},e("svg",{key:"62b14679a4830b11c616a4a1ef3be8cb102a476e",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true"},e("path",{key:"239b466c878e112d8b47f23982f856718fe1150c",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"})))),e("div",{key:"d9d9be37267bf710b9b02ba54a8970cc7a3dae44",class:"body"},e("slot",{key:"21d2d31cdc4350c170898f9572cf64b1de06d795"})));var t}get el(){return r(this)}static get watchers(){return{active:["handleActiveChange"]}}};M.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}: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{height:64px;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:slide-up;animation-duration:var(\n --search-modal-animation-duration-mobile,\n var(--search-modal-animation-duration-mobile-default)\n );animation-fill-mode:forwards;animation-timing-function:ease-out;border-radius:var(--modal-border-radius, var(--border-radius-300))\n var(--modal-border-radius, var(--border-radius-300)) 0 0;height:calc(100vh - 64px);width:100vw;max-width:100vw}:host(.closed){animation-name:slide-down;animation-duration:var(\n --search-modal-animation-duration-mobile,\n var(--search-modal-animation-duration-mobile-default)\n );animation-fill-mode:forwards;animation-timing-function:ease-in}.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 slide-up{from{transform:translateY(calc(100% - 64px))}to{transform:translateY(-64px)}}@keyframes slide-down{from{transform:translateY(-64px)}to{transform:translateY(100%)}}";const R=class{constructor(e){t(this,e),this.active=!1,this.isClosing=!1,this.handleAnimationEnd=e=>{var t;"fade-out"===e.animationName&&this.isClosing&&(this.isClosing=!1,null===(t=this.dialogRef)||void 0===t||t.close())}}handleActiveChange(e){requestAnimationFrame((()=>{this.dialogRef&&(e&&!this.dialogRef.open?(this.isClosing=!1,this.dialogRef.classList.remove("closing"),this.dialogRef.showModal()):e||!this.dialogRef.open||this.isClosing||(this.isClosing=!0,this.dialogRef.classList.add("closing")))}))}componentDidLoad(){this.active&&this.dialogRef&&this.dialogRef.showModal()}render(){return e("dialog",{key:"1e0947052fc6b1df54cc1cc00207cdce30c1d5f0",ref:e=>this.dialogRef=e,onAnimationEnd:this.handleAnimationEnd},e("slot",{key:"5cdb99e46c89612c113559aedb7b73328f0b6810"}))}static get watchers(){return{active:["handleActiveChange"]}}};R.style="dialog{border:none;padding:0;margin:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:transparent;overflow:hidden;cursor:default}dialog:not([open]){display:none}dialog[open]{display:grid;align-items:center;justify-items:center;animation:fade-in\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}dialog[open]::backdrop{background:rgba(0, 0, 0, 0.5);animation:fade-in\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}@media (max-width: 768px){dialog[open]{align-items:end;padding-top:64px}}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0.1}}dialog.closing{animation:fade-out\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}dialog.closing::backdrop{animation:fade-out\n var(\n --search-modal-animation-duration,\n var(--search-modal-animation-duration-default)\n )\n ease-in-out}";const E=class{constructor(e){t(this,e),this.position="bottom",this.widgetScrollbar=!1,this.mode="continuity",this.campaigns="",this.imageWidth=k,this.showMultipleImages=!1,this.addToBasketShow=!1,this.addPriceContainer=!1,this.showFilters=!1,this.setItemsAmount=4,this.favoriteShow=!1,this.useCarousel=!0,this.showInWidget=!1,this.imageResolutionWidth=C,this.showInCustomContainer=!1,this.showInModal=!1,this.isAppended=!1,this.sidebarState="idle",this.showLoadingClass=!1,this.recommendationsLoading=!1,this.hidden=!1,this.setRecommendationsLoading=e=>{this.recommendationsLoading=e},this.isSourceImageValid=()=>{var e;return!!(null===(e=this.sourceProduct)||void 0===e?void 0:e.image)}}updatingAllCardsStarted(){const{height:e}=this.getSidebarRectangle(),t=this.getAsideElement();t.style.height!==`${e}px`&&(t.style.height=`${e}px`)}updatingAllCardsFinished(){const e=this.getAsideElement();"auto"!==e.style.height&&(e.style.height="auto")}bodyClickListener(e){const t=this.getSidebarRectangle();t&&this.showInModal&&!L(e,t)&&(this.sidebarState="closed")}sourceProductReceived(e){this.sourceProduct=e.detail}handleEscape(e){"Escape"!==e.key||"open"!==this.sidebarState||this.isAppended||(this.sidebarState="closed")}handleLoadingChange(e){e?(this.showLoadingClass=!0,clearTimeout(this.loadingClassTimeout)):this.loadingClassTimeout=setTimeout((()=>{this.showLoadingClass=!1}),z)}handleSidebarStateChange(e,t){"open"===e&&"open"!==t?setTimeout((()=>{const e=this.el.shadowRoot.querySelector(".close-sidebar");null==e||e.focus()}),0):"closed"===e&&"open"===t&&this.triggerElement&&this.triggerElement.focus()}getClassMap(){return{[this.position]:!0,[this.sidebarState]:!0,"no-carousel":!this.useCarousel,"no-fixed":this.showInCustomContainer,appended:this.isAppended,loading:this.showLoadingClass}}getAsideElement(){return this.el.shadowRoot.querySelector(".sidebar")}getSidebarRectangle(){var e;return null===(e=this.getAsideElement())||void 0===e?void 0:e.getBoundingClientRect()}componentDidLoad(){const e=this.el.shadowRoot.querySelector("vviinn-vpr-widget");Array.from(this.buttonChildren).forEach((t=>{const o=t.cloneNode(!0);t.hasAttribute("slot")&&e.appendChild(o)}))}disconnectedCallback(){clearTimeout(this.loadingClassTimeout)}render(){var t;return e(o,{key:"1da9acded2d47540c3a92ef4bfe6c1dfad7ba39b",class:this.getClassMap(),style:{display:this.hidden?"none":void 0},exportparts:`body, close-sidebar, ${m}, ${x}, ${v}`},e("div",{key:"df6276e5001060d9a5b6507b351997eb8f3aab22",class:"sidebar",part:"body",onAnimationEnd:e=>this.handleAnimationEnd(e),role:this.showInModal?"dialog":"region","aria-modal":this.showInModal?"true":void 0,"aria-label":n.t("a11y.recommendations")},e("div",{key:"81f8cb97127186a5ae51d69e6c9d815791f7c7c3",class:{"sidebar-header":!0,"contains-source-img":this.isSourceImageValid()},part:"sidebar-header"},"set"!==this.mode&&e(a,{key:"65f2c04676e8e75895030d117483a55cfe8431cd"},this.renderSourceImage(),0!==(null===(t=this.sidebarTitle)||void 0===t?void 0:t.length)&&e("span",{key:"1a5949d7ef73e7d8fd54da8852b9f6ac3fb24b67",class:"title",part:"recommendations-title"},this.sidebarTitle||n.t("discoveryWidgetTitle")),!!this.sidebarSubtitle&&e("span",{key:"b373c3999803fc4b53a40f0f31fb17488dfa7e31",class:"subtitle",part:"recommendations-subtitle"},this.sidebarSubtitle)),e("button",{key:"a11032fd9b99cfecb9be506967714620e100cfd7",class:"close-sidebar",onClick:()=>{this.sidebarState="closed"},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.sidebarState="closed")},part:"close-sidebar","aria-label":n.t("a11y.closeButton")},e(V,{key:"94a609c658ca36192380ee232d956cfc9e77da15"}))),e("div",{key:"4f62b4e918a084cb7b02141df2bba3d612c382cd",class:"sidebar-content",part:"sidebar-content"},e("vviinn-vpr-widget",{key:"2ca2caa3da08a59eb7e8d724369f2a8343fe1119",token:this.token,currencySign:this.currencySign,pricePrefix:this.pricePrefix,apiPath:this.apiPath,locale:this.locale,numberLocale:this.numberLocale,productId:this.productId,exportparts:`${m}, ${x}, ${v}`,imageWidth:this.imageWidth,showMultipleImages:this.showMultipleImages,setItemsAmount:this.setItemsAmount,blockTitle:"set"!==this.mode?"":this.sidebarTitle,blockSubtitle:"set"===this.mode?this.sidebarSubtitle:void 0,mode:this.mode,"campaign-type":this.campaignType,useCarousel:this.useCarousel,onVviinnRecommendationsLoaded:()=>{this.hidden=!1,this.sidebarState="open"},showScroll:this.widgetScrollbar,campaigns:this.campaigns,color:this.color,buttonElementId:this.buttonElementId,noResultText:this.noResultText,noResultShow:this.noResultShow,gridArrowsDynamic:this.gridArrowsDynamic,showingInButton:this.showingInButton,excluded:this.excluded,productDetailsNewTab:this.productDetailsNewTab,productDetailsRedirect:this.productDetailsRedirect,closed:"closed"===this.sidebarState,opened:"open"===this.sidebarState,addToBasketShow:this.addToBasketShow,cssUrl:this.cssUrl,showFilters:this.showFilters,setModeDiscounts:this.setModeDiscounts,updateButtonLocation:this.updateButtonLocation,addPriceContainer:this.addPriceContainer,favoriteShow:this.favoriteShow,isAppended:this.isAppended,showInWidget:this.showInWidget,recommendationsLoading:this.recommendationsLoading,setRecommendationsLoading:this.setRecommendationsLoading,imageResolutionWidth:this.imageResolutionWidth,uiSessionId:this.uiSessionId}))))}renderSourceImage(){var t,o,i,r;const a=(null===(o=null===(t=this.sourceProduct)||void 0===t?void 0:t.image)||void 0===o?void 0:o.thumbnail)||(null===(r=null===(i=this.sourceProduct)||void 0===i?void 0:i.image)||void 0===r?void 0:r.original)||null;return a?e("img",{class:"source-image",part:"source-image",src:a,alt:n.t("a11y.sourceProductImage")}):null}handleAnimationEnd({animationName:e}){e.includes("slideOut")&&(this.hidden=!0)}get el(){return r(this)}static get watchers(){return{recommendationsLoading:["handleLoadingChange"],sidebarState:["handleSidebarStateChange"]}}};E.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n --sidebar-animation-duration,\n var(--sidebar-animation-duration-default)\n );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";const Z=class{constructor(e){t(this,e),this.vviinnWidgetLoad=i(this,"vviinnWidgetLoad"),this.vviinnWidgetOpen=i(this,"vviinnWidgetOpen"),this.vviinnWidgetClose=i(this,"vviinnWidgetClose"),this.vviinnProductLoad=i(this,"vviinnProductLoad"),this.vviinnProductClick=i(this,"vviinnProductClick"),this.vviinnProductView=i(this,"vviinnProductView"),this.vviinnResultLoad=i(this,"vviinnResultLoad"),this.vviinnResultView=i(this,"vviinnResultView"),this.vviinnNoResult=i(this,"vviinnNoResult"),this.vviinnAddToBasket=i(this,"vviinnAddToBasket"),this.vviinnVprButtonActivated=i(this,"vviinnVprButtonActivated"),this.mode="continuity",this.campaigns="",this.excluded="",this.campaignType="set"===this.mode?"VCS":"VPR",this.color="",this.imageWidth=k,this.imageResolutionWidth=C,this.showMultipleImages=!1,this.setItemsAmount=4,this.cssUrl=null,this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.addToBasketShow=!1,this.showFilters=!1,this.addPriceContainer=!1,this.oneClickDiscoveryMode="modal",this.setModeDiscounts="set"===this.mode?"5, 10, 15":"",this.updateButtonLocation="topAndItem",this.modalScrollbar=!1,this.position="bottom",this.addStyle=!0,this.favoriteShow=!1,this.isStandalone=!0,this.showInWidget=!1,this.sidebar=null,this.removeSidebarFromDOM=()=>{var e;this.sidebar&&((null===(e=this.targetAppendSidebarTo)||void 0===e?void 0:e.contains(this.sidebar))?this.targetAppendSidebarTo.removeChild(this.sidebar):document.body.contains(this.sidebar)&&document.body.removeChild(this.sidebar),this.sidebar=null)},this.sidebarCloseListener=(e=!1)=>{this.sidebar&&(e?this.removeSidebarFromDOM():(this.sidebar.sidebarState="closed",setTimeout((()=>this.removeSidebarFromDOM()),w)))},this.handleButtonClick=()=>{this.vviinnVprButtonActivated.emit(),this.appendSidebarToId&&!this.targetAppendSidebarTo?setTimeout((()=>{this.handleClick()}),250):this.handleClick()},this.handleKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleButtonClick())}}connectedCallback(){this.iconSideSize=this.isStandalone?24:14;const{onChange:e}=h(this.showInWidget);this.disposeStoreListener=e("searchStatus",(e=>{"loading"===e&&this.sidebarCloseListener()}))}async componentWillLoad(){await y(this.locale),this.appendSidebarToElement?this.targetAppendSidebarTo=this.appendSidebarToElement:this.appendSidebarToId&&(this.targetAppendSidebarTo=document.getElementById(this.appendSidebarToId))}appendSidebarToElementWatcher(){this.appendSidebarToElement&&(this.targetAppendSidebarTo=this.appendSidebarToElement)}getAriaLabel(){try{return n.t("a11y.findSimilarProducts")||"Find similar products"}catch(e){return"Find similar products"}}render(){return e(o,{key:"e1d8ff31a915dc5aef78838bd4f84e2e416b0953",role:"button",tabindex:"0","aria-label":this.getAriaLabel(),onClick:this.handleButtonClick,onKeyDown:this.handleKeyDown},e("vviinn-button",{key:"b5178a6135d508c7b1f04ab159e7c8117ee986af",addStyle:this.addStyle,part:"vviinn-button"},e("slot",{key:"882bd8cfa3a809e99bb4a1162e8988d49b327113"},e("VCS"===this.campaignType?B:H,{width:this.iconSideSize,height:this.iconSideSize}))))}handleClick(){const e=document.createElement("vviinn-recommendations-sidebar");e.token=this.token,e.locale=this.locale,e.numberLocale=this.numberLocale,e.currencySign=this.currencySign,e.pricePrefix=this.pricePrefix,e.apiPath=this.apiPath,e.sidebarTitle=this.sidebarTitle,e.sidebarSubtitle=this.sidebarSubtitle,e.productId=this.productId,e.position=this.position,e.widgetScrollbar=this.modalScrollbar,e.campaigns=this.campaigns,e.campaignType=this.campaignType,e.color=this.color,e.imageWidth=this.imageWidth,e.showMultipleImages=this.showMultipleImages,e.buttonElementId=this.el.id,e.noResultText=this.noResultText,e.noResultShow=this.noResultShow,e.gridArrowsDynamic=this.gridArrowsDynamic,e.productDetailsNewTab=this.productDetailsNewTab,e.productDetailsRedirect=this.productDetailsRedirect,e.widgetVersion=f,e.showingInButton=!0,e.excluded=this.excluded,e.addToBasketShow=this.addToBasketShow,e.buttonChildren=this.el.children,e.showFilters=this.showFilters,e.cssUrl=this.cssUrl,e.setItemsAmount=this.setItemsAmount,e.setModeDiscounts=this.setModeDiscounts,e.updateButtonLocation=this.updateButtonLocation,e.addPriceContainer=this.addPriceContainer,e.favoriteShow=this.favoriteShow,e.showInModal="modal"===this.oneClickDiscoveryMode,e.isAppended=!!this.targetAppendSidebarTo||!!this.appendSidebarToElement,e.showInWidget=this.showInWidget,e.uiSessionId=this.uiSessionId,e.triggerElement=this.el,this.targetAppendSidebarTo?(e.mode="grid",e.useCarousel="append-slider"===this.oneClickDiscoveryMode):(e.mode="right"===this.position?"grid":this.mode,e.useCarousel="bottom"===this.position),this.sidebar=e,this.eventAbortController=new AbortController;const{signal:t}=this.eventAbortController;if(b(document,[["vviinnWidgetClose",()=>this.sidebarCloseListener(!1)],["vviinnStorybookStoryChanged",()=>this.sidebarCloseListener(!0)]],t),this.targetAppendSidebarTo)return this.sidebar.showInCustomContainer=!0,this.targetAppendSidebarTo.innerHTML="",void this.targetAppendSidebarTo.append(this.sidebar);document.body.append(this.sidebar)}disconnectedCallback(){var e,t;null===(e=this.eventAbortController)||void 0===e||e.abort(),null===(t=this.disposeStoreListener)||void 0===t||t.call(this)}get el(){return r(this)}static get watchers(){return{appendSidebarToElement:["appendSidebarToElementWatcher"]}}};Z.style=":host{display:inline-block}";export{T as vviinn_button,I as vviinn_error,M as vviinn_modal,R as vviinn_overlay,E as vviinn_recommendations_sidebar,Z as vviinn_vpr_button}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as t,r as e,c as i,H as o,g as s}from"./p-RkvPN2Rk.js";import{a as r,E as a}from"./p-CrEgr0jU.js";import{C as n,c,g as l,i as d}from"./p-Bc_yqCDQ.js";import{g as h,c as p,r as u,e as g,s as b}from"./p-Er2KrWw1.js";import{i as v,s as f,m,a as w,b as x,c as y,g as k}from"./p-DIMfQtwJ.js";import{S as C}from"./p-6vxKTHCE.js";import{i as S,a as j}from"./p-CPTOq59a.js";import{d as I}from"./p-BJxQCbNV.js";import{o as O,r as T}from"./p-CtSr754V.js";const P=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H13C13.2833 3 13.5208 3.09583 13.7125 3.2875C13.9042 3.47917 14 3.71667 14 4C14 4.28333 13.9042 4.52083 13.7125 4.7125C13.5208 4.90417 13.2833 5 13 5H5V19H19V11C19 10.7167 19.0958 10.4792 19.2875 10.2875C19.4792 10.0958 19.7167 10 20 10C20.2833 10 20.5208 10.0958 20.7125 10.2875C20.9042 10.4792 21 10.7167 21 11V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM17 7H16C15.7167 7 15.4792 6.90417 15.2875 6.7125C15.0958 6.52083 15 6.28333 15 6C15 5.71667 15.0958 5.47917 15.2875 5.2875C15.4792 5.09583 15.7167 5 16 5H17V4C17 3.71667 17.0958 3.47917 17.2875 3.2875C17.4792 3.09583 17.7167 3 18 3C18.2833 3 18.5208 3.09583 18.7125 3.2875C18.9042 3.47917 19 3.71667 19 4V5H20C20.2833 5 20.5208 5.09583 20.7125 5.2875C20.9042 5.47917 21 5.71667 21 6C21 6.28333 20.9042 6.52083 20.7125 6.7125C20.5208 6.90417 20.2833 7 20 7H19V8C19 8.28333 18.9042 8.52083 18.7125 8.7125C18.5208 8.90417 18.2833 9 18 9C17.7167 9 17.4792 8.90417 17.2875 8.7125C17.0958 8.52083 17 8.28333 17 8V7ZM11.25 16L9.4 13.525C9.3 13.3917 9.16667 13.325 9 13.325C8.83333 13.325 8.7 13.3917 8.6 13.525L6.6 16.2C6.46667 16.3667 6.45 16.5417 6.55 16.725C6.65 16.9083 6.8 17 7 17H17C17.2 17 17.35 16.9083 17.45 16.725C17.55 16.5417 17.5333 16.3667 17.4 16.2L14.65 12.525C14.55 12.3917 14.4167 12.325 14.25 12.325C14.0833 12.325 13.95 12.3917 13.85 12.525L11.25 16Z",fill:"white"}));class V{constructor(t){this.cropperInstances=new Map,this.startCropBoxData=new Map,this.pendingImageLoads=new Map,this.config=t}destroyCropper(t){const e=this.cropperInstances.get(t);e&&(e.destroy(),this.cropperInstances.delete(t),this.startCropBoxData.delete(t));const i=this.pendingImageLoads.get(t);i&&(i.element.removeEventListener("load",i.handlers.load),i.element.removeEventListener("error",i.handlers.error),this.pendingImageLoads.delete(t))}initializeCropper(t,e,i){if(e!==i)return;this.cropperInstances.has(e)&&this.destroyCropper(e);const o=new n(t,Object.assign(Object.assign({},c),{cropstart:()=>this.handleCropStart(o,e),cropend:()=>this.handleCropEnd(o,e)}));this.cropperInstances.set(e,o)}handleCropStart(t,e){this.startCropBoxData.set(e,l(t))}handleCropEnd(t,e){const i=l(t),o=this.startCropBoxData.get(e);if(o&&d(o,i))return;const s=t.getImageData(),a={left:i.left-s.left,top:i.top-s.top,width:i.width,height:i.height},n=r({width:s.width,height:s.height})(a);this.config.onCropEnd(n,e)}activateCropperForSlide(t,e){if(this.cropperInstances.forEach(((e,i)=>{i!==t&&this.destroyCropper(i)})),!this.cropperInstances.has(t)){const i=e(t);if(!i)return;const o=()=>{this.pendingImageLoads.delete(t),i.offsetWidth>0&&this.initializeCropper(i,t,t)},s=()=>{this.pendingImageLoads.delete(t),console.warn(`Failed to load image for cropper at index ${t}`)};if(i.complete&&i.offsetWidth>0)o();else{const e={load:o,error:s};this.pendingImageLoads.set(t,{element:i,handlers:e}),i.addEventListener("load",e.load,{once:!0}),i.addEventListener("error",e.error,{once:!0})}}}destroyAll(){Array.from(this.cropperInstances.keys()).forEach((t=>this.destroyCropper(t)))}hasCropper(t){return this.cropperInstances.has(t)}updateCropperDimensions(t,e){if(this.cropperInstances.has(t)){this.destroyCropper(t);const i=e(t);i&&i.complete&&i.offsetWidth>0&&this.initializeCropper(i,t,t)}}}const z=t=>{if(!t)return null;const e=t.getBoundingClientRect();return{left:e.left,top:e.top,width:e.width,height:e.height}},M=v,D=(t,e,i,o)=>{const s=o||z(t);if(!s)return{x:0,y:0};const r=(e.left+e.width/2)*s.width,a=(e.top+e.height/2)*s.height,n=[a>s.height/2?"bottom":"top",r>s.width/2?"right":"left"].join("-"),c=M()?24:16,l=!M();let d=0,h=0;switch(n){case"top-left":d=l?c-32:c,h=l?c+6:c;break;case"top-right":d=l?32-c:-c,h=l?c+6:c;break;case"bottom-left":d=l?c-32:c,h=l?-c-6:-c;break;case"bottom-right":d=l?32-c:-c,h=l?-c-6:-c}const p=s.left+r+d,u=s.top+a+h;if(i){const t=i.getBoundingClientRect();return{x:p-t.left,y:u-t.top,anchor:n}}return{x:p,y:u,anchor:n}},$=async t=>{try{const e=await w("shopTheLook",t.imageUrl,t.token,t.apiPath,t.campaignId);return a.fold((t=>a.left(`Visual search failed: ${t.inner}`)),(t=>{var e,i;const o=(null===(i=null===(e=t.interactions)||void 0===e?void 0:e.suggestedSearchAreas)||void 0===i?void 0:i.map((t=>t.rectangle)))||[];return a.right({detectedObjects:o,searchResults:[],visualSearchId:t.requestId||null})}))(e)}catch(t){return a.left(`Visual search initialization failed: ${t}`)}},A=(t,e)=>[...t,...e&&e.trim()?e.split(",").map((t=>t.trim())).filter((t=>t.length>0)):[]],E=t=>({detectedObjects:[],searchCompleted:!1,searchResults:[],isVisible:!1,imageElement:t||null,imageBounds:null,visualSearchId:null,searchTriggered:!1,observerSetup:!1,refProcessed:!1});class L{constructor(t){this.imageStates=new Map,this.config=t}updateConfig(t){this.config=Object.assign(Object.assign({},this.config),t)}getImageState(t){return this.imageStates.has(t)||this.imageStates.set(t,E()),this.imageStates.get(t)}updateImageState(t,e){const i=this.getImageState(t);Object.assign(i,e),this.imageStates.set(t,i)}setupImageIntersectionObserver(t,e){if(this.getImageState(e).observerSetup)return;const i=new IntersectionObserver((t=>{t.forEach((t=>{this.updateImageVisibility(e,t.intersectionRatio>=this.config.threshold)}))}),{threshold:this.config.threshold,root:null,rootMargin:"0px"});i.observe(t),this.updateImageState(e,{observer:i,observerSetup:!0})}updateImageVisibility(t,e){var i;const o=this.getImageState(t),s=o.isVisible;if(s===e)return;e&&o.imageElement&&!o.imageBounds&&(o.imageBounds=z(o.imageElement)),this.updateImageState(t,{isVisible:e});const r=null!==(i=this.config.isModalOpen)&&void 0!==i&&i;this.shouldTriggerSearch(t,e,s,o,r)&&(this.updateImageState(t,{searchTriggered:!0}),this.config.onVisualSearchTrigger(t))}shouldTriggerSearch(t,e,i,o,s=!1){if(s)return!1;const r=e&&!1===i,a=!!this.config.token,n=!o.searchCompleted&&!o.searchTriggered,c=this.getTriggeredSearchCount()<this.config.totalImages;return r&&a&&n&&c}getTriggeredSearchCount(){return Array.from(this.imageStates.values()).filter((t=>t.searchTriggered)).length}setImageElement(t,e){this.updateImageState(t,{imageElement:e})}getImageElement(t){return this.getImageState(t).imageElement}setImageState(t,e){this.imageStates.set(t,e)}updateImageStateData(t,e,i,o,s){const r={detectedObjects:e,searchCompleted:i,searchResults:o};void 0!==s&&(r.visualSearchId=s),this.updateImageState(t,r)}disconnectAll(){this.imageStates.forEach((t=>{t.observer&&t.observer.disconnect()})),this.imageStates.clear()}getAllImageStates(){return new Map(this.imageStates)}hasImageState(t){return this.imageStates.has(t)}hasActiveSearches(){return Array.from(this.imageStates.values()).some((t=>t.searchTriggered&&!t.searchCompleted))}shiftIndicesForward(t=0){Array.from(this.imageStates.entries()).filter((([e])=>e>=t)).sort((([t],[e])=>e-t)).forEach((([t,e])=>{this.imageStates.delete(t),this.imageStates.set(t+1,e)}))}}const R=t=>({maxWidth:"100%",maxHeight:`${t}px`,width:"auto",height:v()?`${t}px`:"auto",objectFit:"contain"}),B={campaignTypeId:"VPR",campaignTypeName:"Similar Products",widgetVersion:"1.0.0"};"undefined"!=typeof window&&u();const F=class{constructor(o){e(this,o),this.vviinnShopTheLookDetectedObjectClick=i(this,"vviinnShopTheLookDetectedObjectClick"),this.vviinnShopTheLookProductClick=i(this,"vviinnShopTheLookProductClick"),this.vviinnShopTheLookModalClose=i(this,"vviinnShopTheLookModalClose"),this.imageUrls="",this.height=500,this.campaignId="",this.widgetStyle="rounded",this.showCropper=!1,this.uploadMode=!1,this.showMultipleImages=!1,this.cssUrl=null,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.selectedDetectedObject=null,this.showModal=!1,this.modalPosition=null,this.showDetailedView=!1,this.selectedProductIndex=0,this.modalImageIndex=0,this.swiperActiveIndex=0,this.totalImages=1,this.imageUrlsList=[],this.swiperKey="swiper-0",this.needNavigation=!1,this.showLoadingSpinner=!1,this.isSearchInProgress=!1,this.currentViewMode=null,this.isWidgetVisible=!1,this.uploadedImageUrls=[],this.isManualObjectSelection=!1,this.isNavigatingToSlide=!1,this.resetDetailedView=()=>{this.showDetailedView=!1,this.selectedProductIndex=0},this.handleResize=()=>{this.checkViewModeChange(),this.updateNavigationVisibility(),this.showCropper&&this.cropperManager&&requestAnimationFrame((()=>{this.cropperManager.updateCropperDimensions(this.swiperActiveIndex,(t=>this.imageStore.getImageElement(t)))}))},this.handleDocumentClick=t=>{if(!this.showModal||this.showLoadingSpinner)return;const e=t.target;e&&(this.modalContentRef&&this.modalContentRef.contains(e)||e.closest("vviinn-detected-object")||this.handleModalClose())},this.checkViewModeChange=()=>{const t=M()?"desktop":"mobile";t!==this.currentViewMode&&(this.currentViewMode=t,this.showModal&&this.handleModalClose(),this.swiperKey=`swiper-${Date.now()}`)},this.updateNavigationVisibility=()=>{if(this.imageElement&&this.imageElement.offsetWidth>0){const t=window.innerWidth-100,e=Math.floor(t/(this.imageElement.offsetWidth+20));this.needNavigation=this.totalImages>e}else this.needNavigation=this.totalImages>1},this.handleSwiperPointerDown=t=>{var e;const i=(t=>t.target.closest("swiper-slide"))(t);if(!i)return;const o=((t,e)=>e?Array.from(e.querySelectorAll("swiper-slide")||[]).indexOf(t):-1)(i,this.el.shadowRoot);if(-1===o)return;const s=null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper(o);this.updateSwiperAllowTouchMove(!s)},this.handleSwiperScroll=()=>{this.showModal&&this.handleModalClose()},this.handleVisualSearchTrigger=t=>{this.showModal||(this.performVisualSearchForImage(t),this.updateSearchingState())},this.handleDetectedObjectClick=async(t,e,i=this.swiperActiveIndex)=>{var o,s;if(!this.token)return;M()&&!this.isCurrentSlide(i)?(this.isManualObjectSelection=!0,this.isNavigatingToSlide=!0,this.swiperActiveIndex=i,this.navigateToSlide(i),this.selectedDetectedObject=t,this.modalImageIndex=i,await new Promise((t=>setTimeout((()=>{this.isNavigatingToSlide=!1,requestAnimationFrame((()=>requestAnimationFrame(t)))}),300)))):(this.selectedDetectedObject=t,this.modalImageIndex=i),this.showCropper&&((null===(s=null===(o=this.cropperManager)||void 0===o?void 0:o.hasCropper)||void 0===s?void 0:s.call(o,i))||this.activateCropperForSlide(i)),this.isManualObjectSelection=!1,this.showLoadingSpinner=!0,this.showModal=!1,this.resetDetailedView();const r=this.getImageBounds(i),n=this.imageStore.getImageElement(i)||this.imageElement;r&&n&&(this.modalPosition=D(n,t,this.el,r));const c=this.imageStore.getImageState(i),l={detectedObject:t,imageElement:n,containerElement:this.el,token:this.token,visualSearchId:(null==c?void 0:c.visualSearchId)||f.visualSearchId||null,campaignId:this.campaignId,apiPath:this.apiPath,imageBounds:r,isSearchInProgress:this.isSearchInProgress,setSearchInProgress:t=>{this.isSearchInProgress=t}},d=await(async t=>{const{imageElement:e,detectedObject:i,containerElement:o,visualSearchId:s,token:r,imageBounds:n,campaignId:c,apiPath:l,isSearchInProgress:d,setSearchInProgress:h}=t;if(d)return a.left("Search already in progress");h(!0);try{if(!e)return a.left("Image element is missing");f.searchArea=i;const t=await m("shopTheLook",s||null,r,l,c);return a.fold((t=>a.left(`Visual search failed: ${t.inner}`)),(t=>{var s;const r=(null===(s=t.data)||void 0===s?void 0:s.products)||[],c=D(e,i,o,n);return a.right({searchResults:r,modalPosition:c})}))(t)}catch(t){return a.left(`Visual search failed: ${t}`)}finally{h(!1)}})(l);a.fold((t=>{t.includes("Search already in progress")||(console.error("Visual search failed:",t),this.showLoadingSpinner=!1)}),(t=>{t.searchResults&&t.searchResults.length>0&&this.imageStore.updateImageState(i,{searchResults:t.searchResults}),this.showLoadingSpinner=!1,t.searchResults&&t.searchResults.length>0&&this.isCurrentSlide(i)&&(this.showModal=!0),this.vviinnShopTheLookDetectedObjectClick.emit(Object.assign(Object.assign({},B),{detectedObjectId:`detected-${i}-${e}`,product:t.searchResults[0]||null}))}))(d)},this.performVisualSearch=async(t=this.swiperActiveIndex)=>{const e=this.imageUrlsList[t];if(!this.token||!e)return;const i=this.isCurrentSlide(t);i&&(this.showLoadingSpinner=!0);const o={imageUrl:e,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},s=await $(o);a.fold((e=>{console.error(`Visual search failed for image ${t}:`,e),this.imageStore.updateImageState(t,{searchCompleted:!0}),i&&(this.showLoadingSpinner=!1)}),(e=>{this.imageStore.updateImageStateData(t,e.detectedObjects,!0,e.searchResults,e.visualSearchId||null);const o=this.imageStore.getImageState(t);i&&(this.showLoadingSpinner=!1),o.detectedObjects.length>0&&i&&this.isCurrentSlide(t)&&!this.showModal&&this.scheduleAutoSelectFirstObject(t,o.detectedObjects),this.imageStore.updateImageState(t,{searchCompleted:!0})}))(s)},this.handleProductClick=t=>{this.vviinnShopTheLookProductClick.emit(Object.assign(Object.assign({},B),{detectedObjectId:this.selectedDetectedObject?`detected-${Date.now()}`:"",product:t}))},this.activateCropperForSlide=t=>{var e;null===(e=this.cropperManager)||void 0===e||e.activateCropperForSlide(t,(t=>this.imageStore.getImageElement(t)))},this.debouncedCropSearch=(t,e)=>{this.cropDebounceTimeout&&clearTimeout(this.cropDebounceTimeout),this.cropDebounceTimeout=window.setTimeout((()=>{this.cropDebounceTimeout=void 0,this.handleDetectedObjectClick(t,0,e)}),500)},this.handleModalClose=t=>{this.showLoadingSpinner||t&&t.target!==t.currentTarget||(this.clearModalAndSlideState(),this.vviinnShopTheLookModalClose.emit(B))},this.handleProductDetailsClick=(t,e)=>{this.selectedProductIndex=e,this.showDetailedView=!0},this.handleNavigateProduct=t=>{const e=this.imageStore.getImageState(this.modalImageIndex);"prev"===t&&this.selectedProductIndex>0?this.selectedProductIndex--:"next"===t&&this.selectedProductIndex<e.searchResults.length-1&&this.selectedProductIndex++},this.renderDetectedObjectsWrapper=e=>{const i=this.imageStore.getImageState(e);return((t,e)=>{var i;return!!t&&(M()?t.searchCompleted&&!!(null===(i=t.detectedObjects)||void 0===i?void 0:i.length):e)})(i,this.isCurrentSlide(e))?(e=>{const{imageBounds:i,detectedObjects:o,initialSearchCompleted:s,selectedDetectedObject:r,basicEventData:a,onSelectObject:n}=e;return i&&o.length&&s?o.map(((e,o)=>t("vviinn-detected-object",{key:`detected-${o}`,detectedObject:e,selectedDetectedObject:r,basicEventData:a,imageBounds:i,showInWidget:!1,style:{zIndex:"10"},onVviinnSelectObject:t=>{t.stopPropagation(),n(t.detail.detectedObject,o)}}))):null})({imageBounds:this.getImageBounds(e),detectedObjects:i.detectedObjects,initialSearchCompleted:i.searchCompleted,selectedDetectedObject:this.selectedDetectedObject,basicEventData:B,onSelectObject:(t,i)=>this.handleDetectedObjectClick(t,i,e)}):null},this.handleSlideChange=t=>{var e;const i=g(t);if(void 0!==i){if(i!==this.swiperActiveIndex&&(this.swiperActiveIndex=i),this.clearModalAndSlideState(),this.shouldManageDragging){const t=null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper(i);this.updateSwiperAllowTouchMove(!t)}setTimeout((()=>{this.isNavigatingToSlide=!1,this.ensureSlideSearchTriggered(this.swiperActiveIndex)}),100)}},this.handleImageRef=(t,e)=>{const i=this.imageStore.getImageState(e);if((!(null==i?void 0:i.refProcessed)||this.imageStore.getImageElement(e)!==t)&&(this.imageStore.updateImageState(e,{refProcessed:!0}),(this.isCurrentSlide(e)||this.totalImages<=1)&&(this.imageElement=t),t)){if(this.imageStore.setImageElement(e,t),this.imageStore.hasImageState(e)){const i=this.imageStore.getImageState(e);i.imageElement=t,this.imageStore.setImageState(e,i)}else{const i=E(t);this.imageStore.setImageState(e,i),this.imageStore.setImageState(e,i)}M()&&this.setupObserverAfterSwiper(t,e);const i=()=>{this.initializeImageForCropper(t,e),this.pendingUploadData&&0===e&&(this.imageStore.updateImageStateData(0,this.pendingUploadData.detectedObjects,!0,[],this.pendingUploadData.visualSearchId),this.pendingUploadData.detectedObjects.length>0&&this.scheduleAutoSelectFirstObject(0,this.pendingUploadData.detectedObjects),this.pendingUploadData=null)};t.complete&&t.offsetWidth>0?i():t.addEventListener("load",i,{once:!0})}},this.updateImageBoundsForElement=(t,e)=>{requestAnimationFrame((()=>{(this.isCurrentSlide(e)||this.totalImages<=1)&&this.updateNavigationVisibility()}))},this.initializeImageForCropper=(t,e)=>{var i;this.updateImageBoundsForElement(t,e),this.isCurrentSlide(e)&&(null===(i=this.cropperManager)||void 0===i||i.initializeCropper(t,e,this.swiperActiveIndex))},this.performVisualSearchForImage=async t=>{const e=this.imageUrlsList[t];if(!this.token||!e)return;const i=this.isCurrentSlide(t);i&&(this.showLoadingSpinner=!0);const o={imageUrl:e,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},s=await $(o);a.fold((e=>{console.error(`Visual search failed for image ${t}:`,e),this.imageStore.updateImageStateData(t,[],!0,[],null),this.updateSearchingState(i)}),(e=>{this.imageStore.updateImageStateData(t,e.detectedObjects,!0,e.searchResults,e.visualSearchId||null),this.updateSearchingState(i),e.detectedObjects.length>0&&this.isCurrentSlide(t)&&!this.showModal&&!this.isManualObjectSelection&&this.scheduleAutoSelectFirstObject(t,e.detectedObjects)}))(s)},this.pendingUploadData=null,this.handleFileUpload=async t=>{var e;const i=t.target,o=null===(e=i.files)||void 0===e?void 0:e[0];if(!o)return;this.showLoadingSpinner=!0;const s={file:o,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},r=await(async t=>{const{file:e,token:i,campaignId:o,apiPath:s}=t;try{const t=(await x(e)()).src,r=await y("shopTheLook",i,s,o)(e);return a.fold((t=>a.left(`Upload failed: ${t.inner}`)),(e=>{var i,o;const s=(null===(o=null===(i=e.interactions)||void 0===i?void 0:i.suggestedSearchAreas)||void 0===o?void 0:o.map((t=>t.rectangle)))||[];return a.right({imageUrl:t,detectedObjects:s,visualSearchId:e.requestId||null})}))(r)}catch(t){return a.left(`Failed to process image: ${t}`)}})(s);a.fold((t=>{console.error(t),this.showLoadingSpinner=!1}),(t=>{var e;this.clearModalAndSlideState(),this.showCropper&&(null===(e=this.cropperManager)||void 0===e||e.destroyAll()),this.imageStore.shiftIndicesForward(0),this.pendingUploadData={detectedObjects:t.detectedObjects,visualSearchId:t.visualSearchId},this.uploadedImageUrls=[t.imageUrl,...this.uploadedImageUrls],this.imageUrlsList=A(this.uploadedImageUrls,this.imageUrls),this.totalImages=this.imageUrlsList.length,this.swiperActiveIndex=0,this.showLoadingSpinner=!1,requestAnimationFrame((()=>{this.navigateToSlide(0)}))}))(r),i.value=""},this.handleNavigatePrev=()=>{this.swiperActiveIndex>0&&this.updateSlideIndex(this.swiperActiveIndex-1)},this.handleNavigateNext=()=>{this.swiperActiveIndex<this.totalImages-1&&this.updateSlideIndex(this.swiperActiveIndex+1)},this.updateSlideIndex=t=>{this.isNavigatingToSlide=!0,this.swiperActiveIndex=t,this.navigateToSlide(t),this.clearModalAndSlideState(),setTimeout((()=>{this.isNavigatingToSlide=!1;const e=this.imageStore.getImageState(t);e.searchCompleted||e.searchTriggered?this.performVisualSearchIfReady():this.forceSearchForSlide(t),this.showCropper&&this.activateCropperForSlide(t)}),100)},this.showNavigation=()=>this.needNavigation&&M()||this.showCropper,this.renderSwiperWrapper=()=>{const e=!this.showCropper||M();return(e=>{const{imageUrls:i,swiperActiveIndex:o,height:s,onSlideChange:r,onImageRef:a,renderDetectedObjects:n,onSwiperRef:c,swiperKey:l,allowTouchMove:d=!0}=e;if(!i||i.length<=1)return t("div",{class:"image-container"},t("img",{ref:t=>a(t,0),src:(null==i?void 0:i[0])||"",alt:"Shop-the-Look",class:"main-image",style:R(s)}),n(0));const u=v(),g=h(u);return t("div",{class:"swiper-container-wrapper"},t("div",{class:"swiper-wrapper "+(u?"desktop-carousel":"mobile-slider")},t("swiper-container",{key:l,ref:t=>{t&&!t.swiper&&p(t,{isDesktop:u,initialSlide:o,pagination:!0,keyboard:!0,allowTouchMove:d}),c&&c(t)},onSlideChange:r,style:g,pagination:u?void 0:"true","pagination-clickable":u?void 0:"true"},i.map(((e,i)=>t("swiper-slide",{key:i},t("div",{class:"image-container"},t("img",{ref:t=>a(t,i),src:e,alt:`Shop-the-Look ${i+1}`,class:"main-image",style:R(s)}),n(i))))))))})({imageUrls:this.imageUrlsList,swiperActiveIndex:this.swiperActiveIndex,height:this.height,detectedObjects:this.getCurrentImageState().detectedObjects,onSlideChange:this.handleSlideChange,onImageRef:this.handleImageRef,renderDetectedObjects:this.renderDetectedObjectsWrapper,swiperKey:this.swiperKey,allowTouchMove:e})},this.renderModalWrapper=()=>(e=>{const{showModal:i,selectedDetectedObject:o,modalPosition:s,searchResults:r,onProductClick:a,showDetailedView:n=!1,selectedProductIndex:c=0,onProductDetailsClick:l,onBackToGrid:d,currencySign:h,locale:p,numberLocale:u,showMultipleImages:g=!1,modalContentRef:b}=e;if(!i||!o||!(null==r?void 0:r.length))return null;const f=!v();return t("div",{ref:b,class:"modal-content-wrapper "+(f?"mobile-modal":"desktop-modal"),style:s?{"--modal-x":`${s.x}px`,"--modal-y":`${s.y}px`,"--modal-anchor":s.anchor}:{},onClick:t=>t.stopPropagation()},t("div",{class:"modal-body"},t("div",{class:"product-grid-container "+(n?"hidden":"")},r.length>0&&(e=>{const{searchResults:i,onProductClick:o,onProductDetailsClick:s}=e;if(!i.length)return null;const r=i.slice(0,4);return t("div",{class:"search-results-grid"},r.map(((e,i)=>{var r,a;return t("div",{key:`${e.productId}-${i}`,class:"result-item",onClick:()=>{s?s(e,i):o(e)}},t("div",{class:"result-image"},t("vviinn-image",{width:120,alt:e.title||"",imageTitle:e.title||"",src:(null===(r=e.image)||void 0===r?void 0:r.thumbnail)||(null===(a=e.image)||void 0===a?void 0:a.original)||"",responsive:!0,imageResolutionWidth:300})))})))})({searchResults:r,onProductClick:a,onProductDetailsClick:l})),t("div",{class:"product-details-container "+(n?"":"hidden")},r.length>0&&(e=>{var i,o,s,r;const{searchResults:a,selectedProductIndex:n,onProductClick:c,onBackToGrid:l,currencySign:d,locale:h,numberLocale:p,showMultipleImages:u=!1}=e;if(!a.length)return null;const g=a[n];return g?t("div",{class:"product-details"},t("div",{class:"product-header"},t("button",{class:"back-to-grid-button",onClick:l},t(C,null))),t("div",{class:"product-content"},t("div",{class:"product-details-card-wrapper"},t("vviinn-product-card",{key:g.productId,product:g,class:"product-details-card",productId:g.productId||"",productTitle:g.title||"",brand:g.brand,price:g.price.actual,salePrice:g.price.sale,addPriceContainer:!0,image:null!==(r=null!==(o=null===(i=g.image)||void 0===i?void 0:i.thumbnail)&&void 0!==o?o:null===(s=g.image)||void 0===s?void 0:s.original)&&void 0!==r?r:"",images:g.images,showMultipleImages:u,imageResolutionWidth:300,imageWidth:v()?160:120,currencySign:d||"",locale:h,numberLocale:p,deeplink:g.deeplink,onVviinnProductClick:()=>c(g)})))):null})({searchResults:r,selectedProductIndex:c,onProductClick:a,currencySign:h,locale:p,numberLocale:u,showMultipleImages:g,onBackToGrid:d}))))})({showModal:this.showModal,selectedDetectedObject:this.selectedDetectedObject,modalPosition:this.modalPosition,searchResults:this.imageStore.getImageState(this.modalImageIndex).searchResults,onProductClick:this.handleProductClick,showDetailedView:this.showDetailedView,selectedProductIndex:this.selectedProductIndex,onProductDetailsClick:this.handleProductDetailsClick,onBackToGrid:this.resetDetailedView,currencySign:this.effectiveCurrencySign,locale:this.locale,numberLocale:this.effectiveNumberLocale,showMultipleImages:this.showMultipleImages,modalContentRef:t=>{this.modalContentRef=t}})}handleProductCardClick(t){var e,i;const{productId:o,clickEvent:s}=t.detail,r=null===(e=this.imageStore)||void 0===e?void 0:e.getImageState(this.modalImageIndex),a=null===(i=null==r?void 0:r.searchResults)||void 0===i?void 0:i.find((t=>t.productId===o));(null==a?void 0:a.deeplink)&&O(a.deeplink,s,this.productDetailsRedirect,this.productDetailsNewTab)}async componentWillLoad(){await S(this.locale),this.imageUrlsList=A(this.uploadedImageUrls,this.imageUrls),this.totalImages=this.imageUrlsList.length,this.currentViewMode=M()?"desktop":"mobile",this.updateNavigationVisibility();M();this.imageStore=new L({threshold:.01,token:this.token,isWidgetVisible:this.isWidgetVisible,totalImages:this.totalImages,isModalOpen:this.showModal,onVisualSearchTrigger:this.handleVisualSearchTrigger.bind(this)}),this.showCropper&&(this.cropperManager=new V({onCropEnd:(t,e)=>{this.debouncedCropSearch(t,e)}}))}componentDidLoad(){window.addEventListener("resize",this.handleResize),document.addEventListener("click",this.handleDocumentClick),this.initializeContainerVisibilityTracking(),this.setupSwiperEventListener(),this.setupSwiperDragEventListeners()}onViewModeChange(t){t&&requestAnimationFrame((()=>{this.setupSwiperEventListener(),this.setupSwiperDragEventListeners()}))}onShowModalChange(t){var e;null===(e=this.imageStore)||void 0===e||e.updateConfig({isModalOpen:t})}clearModalAndSlideState(){this.showModal=!1,this.selectedDetectedObject=null,this.modalPosition=null,this.resetDetailedView(),this.modalImageIndex=0,this.autoSelectTimeout&&(clearTimeout(this.autoSelectTimeout),this.autoSelectTimeout=void 0)}updateSearchingState(t=!1){var e,i;this.showLoadingSpinner=null!==(i=null===(e=this.imageStore)||void 0===e?void 0:e.hasActiveSearches())&&void 0!==i&&i,t&&(this.showLoadingSpinner=!1)}getCurrentImageState(){var t;return null===(t=this.imageStore)||void 0===t?void 0:t.getImageState(this.swiperActiveIndex)}isCurrentSlide(t){return t===this.swiperActiveIndex}get shouldManageDragging(){return this.showCropper&&M()}get effectiveCurrencySign(){var t;return null!==(t=this.currencySign)&&void 0!==t?t:I.currencySign}get effectiveNumberLocale(){return this.numberLocale||this.locale||I.locale}disconnectedCallback(){var t,e,i,o;window.removeEventListener("resize",this.handleResize),document.removeEventListener("click",this.handleDocumentClick),null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),null===(e=this.imageStore)||void 0===e||e.disconnectAll(),null===(i=this.cropperManager)||void 0===i||i.destroyAll(),this.autoSelectTimeout&&clearTimeout(this.autoSelectTimeout),this.cropDebounceTimeout&&clearTimeout(this.cropDebounceTimeout);const s=null===(o=this.el.shadowRoot)||void 0===o?void 0:o.querySelector("swiper-container");s&&(s.removeEventListener("swiperslidechange",this.handleSlideChange),s.removeEventListener("swipersliderfirstmove",this.handleSwiperScroll),this.shouldManageDragging&&s.removeEventListener("pointerdown",this.handleSwiperPointerDown))}initializeContainerVisibilityTracking(){M();this.intersectionObserver=b(this.el,{threshold:.01,onIntersectionChange:t=>{var e;const i=this.isWidgetVisible;this.isWidgetVisible=t,null===(e=this.imageStore)||void 0===e||e.updateConfig({isWidgetVisible:this.isWidgetVisible,isModalOpen:this.showModal}),!i&&this.isWidgetVisible&&this.performVisualSearchIfReady()}})}setupSwiperEventListener(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("swiper-container");e&&setTimeout((()=>{e.addEventListener("swiperslidechange",this.handleSlideChange)}),200)}setupSwiperDragEventListeners(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("swiper-container");e&&setTimeout((()=>{e.addEventListener("swipersliderfirstmove",this.handleSwiperScroll,{passive:!0}),this.shouldManageDragging&&e.addEventListener("pointerdown",this.handleSwiperPointerDown,{capture:!0})}),200)}updateSwiperAllowTouchMove(t){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("swiper-container"),o=null==i?void 0:i.swiper;void 0!==(null==o?void 0:o.allowTouchMove)&&(o.allowTouchMove=t)}setupObserverAfterSwiper(t,e){setTimeout((()=>{var i;const o=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("swiper-container");if(o){const i=()=>{this.imageStore.setupImageIntersectionObserver(t,e)};(null==o?void 0:o.swiper)?i():(o.addEventListener("swiperinit",i,{once:!0}),setTimeout((()=>{const i=this.imageStore.getImageState(e);(null==i?void 0:i.observerSetup)||this.imageStore.setupImageIntersectionObserver(t,e)}),1e3))}}),200)}performVisualSearchIfReady(){const t=M();if(this.imageStore.updateConfig({isWidgetVisible:this.isWidgetVisible,token:this.token,totalImages:this.totalImages,isModalOpen:this.showModal}),this.token&&this.isWidgetVisible){const e=this.imageStore.getImageState(this.swiperActiveIndex);if(null==e?void 0:e.searchCompleted)this.activateCurrentSlide();else if(1===this.totalImages||!t||this.showCropper){t&&1!==this.totalImages&&!this.showCropper||this.markCurrentImageAsVisible();const e=this.imageStore.getImageState(this.swiperActiveIndex);(null==e?void 0:e.searchTriggered)||(this.imageStore.updateImageState(this.swiperActiveIndex,{searchTriggered:!0}),this.performVisualSearch(this.swiperActiveIndex)),this.showCropper&&this.activateCropperForSlide(this.swiperActiveIndex)}}}markCurrentImageAsVisible(){const t=this.imageStore.getImageState(this.swiperActiveIndex);t&&(t.isVisible=!0,this.imageStore.setImageState(this.swiperActiveIndex,t))}navigateToSlide(t){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("swiper-container");(null==i?void 0:i.swiper)&&i.swiper.slideTo(t)}forceSearchForSlide(t){const e=this.imageStore.getImageState(t);e&&(e.isVisible=!0,this.imageStore.setImageState(t,e)),this.imageStore.updateImageState(t,{searchTriggered:!0}),this.performVisualSearch(t)}ensureSlideSearchTriggered(t){const e=this.imageStore.getImageState(t);e.searchCompleted||e.searchTriggered?e.searchCompleted?this.activateCurrentSlide():this.performVisualSearchIfReady():this.forceSearchForSlide(t)}activateCurrentSlide(){var t;this.markCurrentImageAsVisible();const e=this.imageStore.getImageState(this.swiperActiveIndex);(null===(t=null==e?void 0:e.detectedObjects)||void 0===t?void 0:t.length)>0&&!this.showModal&&this.scheduleAutoSelectFirstObject(this.swiperActiveIndex,e.detectedObjects)}getCropperBounds(t){var e,i;if(this.showCropper&&(null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper)&&this.cropperManager.hasCropper(t)){const t=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector(".cropper-container .cropper-canvas img");if(t&&t.offsetWidth>0)return z(t)}return null}getStoreBounds(t){const e=this.imageStore.getImageElement(t);return e&&e.offsetWidth>0?z(e):null}getVisibleSlideBounds(t){var e;const i=Array.from((null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelectorAll("swiper-slide img"))||[]).filter((t=>!t.closest(".cropper-container")&&t.offsetWidth>0));return i&&i[t]?z(i[t]):null}getImageBounds(t){return this.getCropperBounds(t)||this.getStoreBounds(t)||this.getVisibleSlideBounds(t)}scheduleAutoSelectFirstObject(t,e){const i=!(null==e?void 0:e.length),o=!this.isCurrentSlide(t);i||o||this.autoSelectTimeout||this.isManualObjectSelection||this.isNavigatingToSlide||(this.autoSelectTimeout=window.setTimeout((()=>{if(this.autoSelectTimeout=void 0,!this.isCurrentSlide(t)||this.showModal||this.isNavigatingToSlide)return;const i=e[0];i&&this.handleDetectedObjectClick(i,0,t)}),500))}render(){return t(o,{key:"4734dcdc0c1a7d206970c8baf08e257077e952f9",exportparts:j},T(this.cssUrl),t("div",{key:"129438fdcf114bd903ad6888287e060e5fdc3948",class:`shop-the-look-container ${this.showModal?"modal-open":""} ${this.showCropper?"with-cropper":""} widget-style-${this.widgetStyle}`},t("div",{key:"04e037ad029930bd366920ca79e0ae7becebaf2c",class:"main-content"},this.renderSwiperWrapper(),this.showLoadingSpinner&&t("div",{key:"18ca739ed4cf0b1167fd8976fdab0c5e6e0ee410",class:"search-loader"},t("vviinn-preloader",{key:"efd47991fa32bf315c4985f98f0c14ccbf6f5a72"}))),this.renderModalWrapper(),t("div",{key:"332adbe2912fb61f82f9cf0488a13f7c9a0a405c",class:"actions-container",part:"shop-the-look-actions-container"},this.uploadMode&&t("div",{key:"55c748ffeded24b97801683454f9a1b8675f6ed6",class:"upload-button-container"},t("button",{key:"7cfa399b98e254bd12bff706cf6c4bea42dce684",class:"upload-button",part:"shop-the-look-upload-button",onClick:()=>{var t;return null===(t=this.fileInput)||void 0===t?void 0:t.click()},disabled:this.showLoadingSpinner},t("span",{key:"a42f68c8d5e0347c7869990b78b13cc06a326542",class:"upload-button-icon",part:"shop-the-look-upload-button-icon"},t("slot",{key:"b6a1e877b52110f942892563322256450b17fbdc",name:"vviinn-image-upload-icon"},t(P,{key:"429d134552e802cf9991d26bd0c9cbfe169e7054"}))),t("span",{key:"4953c1120b4fdd3eec4401804b1eaddde1768bce",class:"upload-button-text",part:"shop-the-look-upload-button-text"},t("slot",{key:"6e090992822174af61f428d5ae164fe929d6bafe",name:"upload-button-text"}))),t("input",{key:"bde20d3f752c330277a5162e9662ff2d659db826",type:"file",class:"visually-hidden",accept:k(),onChange:this.handleFileUpload,ref:t=>this.fileInput=t})),this.showNavigation()&&(i=this.totalImages,s=this.handleNavigatePrev,r=this.handleNavigateNext,t("div",{class:"carousel-navigation"},t("button",{class:"swiper-button-prev "+(0===(e=this.swiperActiveIndex)?"disabled":""),onClick:()=>s()},t(C,null)),t("button",{class:"swiper-button-next "+(e===i-1?"disabled":""),onClick:()=>r()},t(C,null)))))));var e,i,s,r}get el(){return s(this)}static get watchers(){return{currentViewMode:["onViewModeChange"],showModal:["onShowModalChange"]}}};F.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none !important;max-width:none !important;min-height:0 !important;min-width:0 !important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:0.4}.cropper-view-box{display:block;height:100%;overflow:hidden;width:100%;border-radius:5px}.cropper-face,.cropper-point{display:block;height:100%;opacity:0.1;position:absolute;width:100%}.cropper-face{left:0;top:0;border-radius:5px}.cropper-point{--cropper-point-width:44px;height:var(--cropper-point-width);width:var(--cropper-point-width);opacity:1}.point-e,.point-s,.point-w,.point-n{display:none}.point-ne,.point-nw,.point-sw,.point-se{--delta:-9px}.point-ne{cursor:nesw-resize;right:var(--delta);top:var(--delta)}.point-nw{cursor:nwse-resize;left:var(--delta);top:var(--delta)}.point-sw{cursor:nesw-resize;bottom:var(--delta);left:var(--delta)}.point-se{cursor:nwse-resize;bottom:var(--delta);right:var(--delta)}.cropper-point::before{position:absolute;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");display:block;pointer-events:none}.point-ne::before{transform:rotate(-90deg);left:0px;top:6px}.point-nw::before{transform:rotate(180deg);left:6px;top:6px}.point-sw::before{transform:rotate(90deg);left:6px;top:0px}.point-se::before{left:0px;top:0px}.cropper-invisible{opacity:0}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none !important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}swiper-container::part(bullet){width:8px;height:8px;border-radius:var(--border-radius-full);background:var(--color-border-02);transition:width 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n height 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n background 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);margin:0;opacity:1;cursor:pointer;border:none;outline:none;transform:scale(1);position:relative}swiper-container::part(bullet)::after{content:\"\";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;cursor:pointer}swiper-container::part(bullet):hover{background:rgba(22, 22, 22, 0.5);transform:scale(1.2)}swiper-container::part(bullet-active){width:24px;height:8px;border-radius:var(--spacing-50);background:var(--color-icon-helper)}swiper-container::part(bullet-active):hover{background:var(--color-icon-secondary);transform:scale(1.1)}:host{--shop-the-look-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.25);display:block;font-family:var(--font-family-base);box-sizing:border-box;max-width:100%}.shop-the-look-container{position:relative;width:100%;background:var(--color-bg-base)}.main-content{position:relative;display:flex;flex-direction:column;gap:var(--spacing-200);align-items:center}.actions-container{width:100%;display:flex;align-items:center;gap:var(--spacing-300);margin-top:var(--spacing-250);justify-content:flex-end}.upload-button{display:inline-flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-100);background:var(--button-bg-color-primary);border:none;border-radius:var(--border-radius-100);color:var(--color-text-inverse);font-family:var(--font-family-base);font-size:16px;font-weight:500;cursor:pointer;transition:background 0.2s ease}.upload-button-icon{display:inline-flex;align-items:center}.upload-button-text{display:contents}.upload-button:hover{background:var(--button-bg-color-primary-hover)}.upload-button:disabled{cursor:not-allowed}.image-container{position:relative;border-radius:var(--border-radius-200);overflow:hidden;background:var(--color-field-02);display:flex;justify-content:center;align-items:center;box-sizing:border-box;max-width:100%}.main-image{display:block;-o-object-fit:contain;object-fit:contain}.swiper-container-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%}swiper-container{width:100%;height:100%;border-radius:var(--border-radius-200);overflow:hidden}swiper-slide{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-shrink:0}swiper-container::part(pagination){bottom:var(--spacing-250);display:flex;justify-content:center;align-items:center;gap:var(--spacing-100);padding:var(--spacing-100) 0}swiper-container::part(bullet-active):hover{background:var(--color-icon-secondary);transform:scale(1.1)}.carousel-navigation{display:flex;gap:var(--spacing-100)}.swiper-button-prev,.swiper-button-next{position:relative;width:48px;height:48px;background:var(--button-bg-color-secondary);border:none;border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s ease,\n opacity 0.3s ease;margin:0}.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--button-bg-color-secondary-hover)}.swiper-button-next svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-button-next{color:var(--color-text-secondary)}.swiper-button-prev.disabled,.swiper-button-next.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.desktop-carousel{position:relative;width:100%;max-width:none}.desktop-carousel swiper-container{width:100%;height:100%;justify-content:flex-start}.desktop-carousel .swiper-wrapper{justify-content:flex-start;align-items:flex-start}.desktop-carousel .main-image{overflow:hidden;border-radius:var(--border-radius-200)}.desktop-carousel vviinn-detected-object{position:absolute;z-index:15;overflow:visible}.shop-the-look-container .desktop-carousel swiper-slide{width:auto;flex-shrink:0}.shop-the-look-container .desktop-carousel swiper-container::part(pagination){display:none}.mobile-slider swiper-slide{width:auto;display:flex;justify-content:center}.mobile-slider swiper-container::part(pagination){display:flex}.shop-the-look-container .mobile-slider swiper-container::part(pagination){display:flex;justify-content:center;align-items:center;gap:var(--spacing-100);padding:var(--spacing-100) 0}.modal-content-wrapper{position:absolute;background:var(--color-bg-base);border-radius:var(--border-radius-150);overflow:hidden;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.25);z-index:10000;top:var(--modal-y, 50%);left:var(--modal-x, 50%)}.modal-content-wrapper.mobile-modal{max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);margin:0}.modal-content-wrapper[style*=\"--modal-anchor: top-left\"]{transform:translate(0, 0)}.modal-content-wrapper[style*=\"--modal-anchor: top-right\"]{transform:translate(-100%, 0)}.modal-content-wrapper[style*=\"--modal-anchor: bottom-left\"]{transform:translate(0, -100%)}.modal-content-wrapper[style*=\"--modal-anchor: bottom-right\"]{transform:translate(-100%, -100%)}.modal-content-wrapper:not([style*=\"--modal-anchor\"]){transform:translate(-50%, -50%)}.modal-body{padding:var(--spacing-100)}.search-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-50);width:140px}.result-item{cursor:pointer;border-radius:var(--spacing-75);overflow:hidden;aspect-ratio:var(--product-card-image-aspect-ratio, 1)}.result-image{width:100%;height:100%;position:relative}.result-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.product-grid-container.hidden,.product-details-container.hidden{display:none}.product-details{display:flex;flex-direction:column;height:100%;gap:var(--spacing-75);width:-moz-fit-content;width:fit-content}.product-header{display:flex;align-items:center}.product-content{flex:1;position:relative}.product-details-card-wrapper{height:100%;padding:0;width:160px;max-width:160px}.product-details-card{height:100%;background:var(--color-bg-base);border:none;width:100%;max-width:100%}.back-to-grid-button{display:contents;background:none;border:none;cursor:pointer;padding:0}.back-to-grid-button svg{width:24px;height:24px;color:var(--color-icon-helper);transition:color 0.2s ease}.back-to-grid-button:hover svg{color:var(--color-icon-secondary)}vviinn-product-card::part(price-container){flex-direction:row}vviinn-image::part(image),.product-details-card-wrapper vviinn-product-card::part(image),.product-details-card-wrapper vviinn-product-card::part(image-picture){border-radius:var(--border-radius-100);overflow:hidden}.search-loader{position:absolute;top:var(--spacing-200);right:var(--spacing-200);z-index:100;background:rgba(255, 255, 255, 0.9);border-radius:var(--border-radius-full);padding:var(--spacing-100);backdrop-filter:blur(4px)}.search-loader vviinn-preloader{width:24px;height:24px}.shop-the-look-container.modal-open vviinn-detected-object{z-index:10001}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.desktop-carousel vviinn-detected-object{position:absolute;z-index:15;overflow:visible}.desktop-carousel .main-image{overflow:hidden;border-radius:var(--border-radius-200)}.shop-the-look-container .desktop-carousel swiper-container::part(pagination){display:none}.desktop-carousel .swiper-button-prev,.desktop-carousel .swiper-button-next{display:flex}.desktop-carousel{max-width:none}.desktop-carousel .swiper-wrapper{justify-content:flex-start;align-items:flex-start}.shop-the-look-container .desktop-carousel swiper-slide{width:auto;flex-shrink:0}.mobile-slider swiper-slide{width:auto;display:flex;justify-content:center}@media (max-width: 768px){.shop-the-look-container:not(.with-cropper) .carousel-navigation{display:none}.mobile-slider{width:100%}.shop-the-look-container .mobile-slider swiper-slide{width:100%;flex-shrink:0}.shop-the-look-container{width:100%;max-width:100vw}.shop-the-look-container .image-container,.shop-the-look-container swiper-container,.shop-the-look-container swiper-slide{width:-moz-fit-content;width:fit-content;max-width:100%}swiper-container::part(wrapper){align-items:center}.shop-the-look-container .main-image{max-width:100%;height:auto;width:auto;-o-object-fit:contain;object-fit:contain}.modal-content-wrapper.desktop-modal{max-width:calc(100vw - 16px);max-height:calc(100vh - 48px)}.search-results-grid{width:min(140px, calc(100vw - 32px));gap:var(--spacing-50)}.carousel-navigation{bottom:var(--spacing-50);right:var(--spacing-50)}.product-details-card-wrapper{width:120px;max-width:120px}}.cropper-wrap-box{border-radius:var(--border-radius-200);overflow:hidden}.widget-style-cornered .image-container,.widget-style-cornered swiper-container,.widget-style-cornered .desktop-carousel .main-image,.widget-style-cornered .modal-content-wrapper,.widget-style-cornered .result-item,.widget-style-cornered .desktop-carousel .swiper-button-prev,.widget-style-cornered .desktop-carousel .swiper-button-next,.widget-style-cornered .cropper-wrap-box,.widget-style-cornered vviinn-image::part(image),.widget-style-cornered .product-details-card-wrapper vviinn-product-card::part(image),.widget-style-cornered .product-details-card-wrapper vviinn-product-card::part(image-picture),.widget-style-cornered .upload-button,.widget-style-cornered .carousel-navigation button{border-radius:0}";export{F as vviinn_shop_the_look}
|
|
1
|
+
import{h as t,r as e,c as i,H as o,g as s}from"./p-RkvPN2Rk.js";import{a as r,E as a}from"./p-CrEgr0jU.js";import{C as n,c,g as l,i as d}from"./p-Bc_yqCDQ.js";import{g as h,c as p,r as u,e as g,s as b}from"./p-Er2KrWw1.js";import{i as v,s as f,m,a as w,b as x,c as y,g as k}from"./p-DM6fTGU7.js";import{S as C}from"./p-6vxKTHCE.js";import{i as S,a as j}from"./p-CPTOq59a.js";import{d as I}from"./p-BJxQCbNV.js";import{o as O,r as T}from"./p-CtSr754V.js";const P=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H13C13.2833 3 13.5208 3.09583 13.7125 3.2875C13.9042 3.47917 14 3.71667 14 4C14 4.28333 13.9042 4.52083 13.7125 4.7125C13.5208 4.90417 13.2833 5 13 5H5V19H19V11C19 10.7167 19.0958 10.4792 19.2875 10.2875C19.4792 10.0958 19.7167 10 20 10C20.2833 10 20.5208 10.0958 20.7125 10.2875C20.9042 10.4792 21 10.7167 21 11V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM17 7H16C15.7167 7 15.4792 6.90417 15.2875 6.7125C15.0958 6.52083 15 6.28333 15 6C15 5.71667 15.0958 5.47917 15.2875 5.2875C15.4792 5.09583 15.7167 5 16 5H17V4C17 3.71667 17.0958 3.47917 17.2875 3.2875C17.4792 3.09583 17.7167 3 18 3C18.2833 3 18.5208 3.09583 18.7125 3.2875C18.9042 3.47917 19 3.71667 19 4V5H20C20.2833 5 20.5208 5.09583 20.7125 5.2875C20.9042 5.47917 21 5.71667 21 6C21 6.28333 20.9042 6.52083 20.7125 6.7125C20.5208 6.90417 20.2833 7 20 7H19V8C19 8.28333 18.9042 8.52083 18.7125 8.7125C18.5208 8.90417 18.2833 9 18 9C17.7167 9 17.4792 8.90417 17.2875 8.7125C17.0958 8.52083 17 8.28333 17 8V7ZM11.25 16L9.4 13.525C9.3 13.3917 9.16667 13.325 9 13.325C8.83333 13.325 8.7 13.3917 8.6 13.525L6.6 16.2C6.46667 16.3667 6.45 16.5417 6.55 16.725C6.65 16.9083 6.8 17 7 17H17C17.2 17 17.35 16.9083 17.45 16.725C17.55 16.5417 17.5333 16.3667 17.4 16.2L14.65 12.525C14.55 12.3917 14.4167 12.325 14.25 12.325C14.0833 12.325 13.95 12.3917 13.85 12.525L11.25 16Z",fill:"white"}));class V{constructor(t){this.cropperInstances=new Map,this.startCropBoxData=new Map,this.pendingImageLoads=new Map,this.config=t}destroyCropper(t){const e=this.cropperInstances.get(t);e&&(e.destroy(),this.cropperInstances.delete(t),this.startCropBoxData.delete(t));const i=this.pendingImageLoads.get(t);i&&(i.element.removeEventListener("load",i.handlers.load),i.element.removeEventListener("error",i.handlers.error),this.pendingImageLoads.delete(t))}initializeCropper(t,e,i){if(e!==i)return;this.cropperInstances.has(e)&&this.destroyCropper(e);const o=new n(t,Object.assign(Object.assign({},c),{cropstart:()=>this.handleCropStart(o,e),cropend:()=>this.handleCropEnd(o,e)}));this.cropperInstances.set(e,o)}handleCropStart(t,e){this.startCropBoxData.set(e,l(t))}handleCropEnd(t,e){const i=l(t),o=this.startCropBoxData.get(e);if(o&&d(o,i))return;const s=t.getImageData(),a={left:i.left-s.left,top:i.top-s.top,width:i.width,height:i.height},n=r({width:s.width,height:s.height})(a);this.config.onCropEnd(n,e)}activateCropperForSlide(t,e){if(this.cropperInstances.forEach(((e,i)=>{i!==t&&this.destroyCropper(i)})),!this.cropperInstances.has(t)){const i=e(t);if(!i)return;const o=()=>{this.pendingImageLoads.delete(t),i.offsetWidth>0&&this.initializeCropper(i,t,t)},s=()=>{this.pendingImageLoads.delete(t),console.warn(`Failed to load image for cropper at index ${t}`)};if(i.complete&&i.offsetWidth>0)o();else{const e={load:o,error:s};this.pendingImageLoads.set(t,{element:i,handlers:e}),i.addEventListener("load",e.load,{once:!0}),i.addEventListener("error",e.error,{once:!0})}}}destroyAll(){Array.from(this.cropperInstances.keys()).forEach((t=>this.destroyCropper(t)))}hasCropper(t){return this.cropperInstances.has(t)}updateCropperDimensions(t,e){if(this.cropperInstances.has(t)){this.destroyCropper(t);const i=e(t);i&&i.complete&&i.offsetWidth>0&&this.initializeCropper(i,t,t)}}}const z=t=>{if(!t)return null;const e=t.getBoundingClientRect();return{left:e.left,top:e.top,width:e.width,height:e.height}},M=v,D=(t,e,i,o)=>{const s=o||z(t);if(!s)return{x:0,y:0};const r=(e.left+e.width/2)*s.width,a=(e.top+e.height/2)*s.height,n=[a>s.height/2?"bottom":"top",r>s.width/2?"right":"left"].join("-"),c=M()?24:16,l=!M();let d=0,h=0;switch(n){case"top-left":d=l?c-32:c,h=l?c+6:c;break;case"top-right":d=l?32-c:-c,h=l?c+6:c;break;case"bottom-left":d=l?c-32:c,h=l?-c-6:-c;break;case"bottom-right":d=l?32-c:-c,h=l?-c-6:-c}const p=s.left+r+d,u=s.top+a+h;if(i){const t=i.getBoundingClientRect();return{x:p-t.left,y:u-t.top,anchor:n}}return{x:p,y:u,anchor:n}},$=async t=>{try{const e=await w("shopTheLook",t.imageUrl,t.token,t.apiPath,t.campaignId);return a.fold((t=>a.left(`Visual search failed: ${t.inner}`)),(t=>{var e,i;const o=(null===(i=null===(e=t.interactions)||void 0===e?void 0:e.suggestedSearchAreas)||void 0===i?void 0:i.map((t=>t.rectangle)))||[];return a.right({detectedObjects:o,searchResults:[],visualSearchId:t.requestId||null})}))(e)}catch(t){return a.left(`Visual search initialization failed: ${t}`)}},A=(t,e)=>[...t,...e&&e.trim()?e.split(",").map((t=>t.trim())).filter((t=>t.length>0)):[]],E=t=>({detectedObjects:[],searchCompleted:!1,searchResults:[],isVisible:!1,imageElement:t||null,imageBounds:null,visualSearchId:null,searchTriggered:!1,observerSetup:!1,refProcessed:!1});class L{constructor(t){this.imageStates=new Map,this.config=t}updateConfig(t){this.config=Object.assign(Object.assign({},this.config),t)}getImageState(t){return this.imageStates.has(t)||this.imageStates.set(t,E()),this.imageStates.get(t)}updateImageState(t,e){const i=this.getImageState(t);Object.assign(i,e),this.imageStates.set(t,i)}setupImageIntersectionObserver(t,e){if(this.getImageState(e).observerSetup)return;const i=new IntersectionObserver((t=>{t.forEach((t=>{this.updateImageVisibility(e,t.intersectionRatio>=this.config.threshold)}))}),{threshold:this.config.threshold,root:null,rootMargin:"0px"});i.observe(t),this.updateImageState(e,{observer:i,observerSetup:!0})}updateImageVisibility(t,e){var i;const o=this.getImageState(t),s=o.isVisible;if(s===e)return;e&&o.imageElement&&!o.imageBounds&&(o.imageBounds=z(o.imageElement)),this.updateImageState(t,{isVisible:e});const r=null!==(i=this.config.isModalOpen)&&void 0!==i&&i;this.shouldTriggerSearch(t,e,s,o,r)&&(this.updateImageState(t,{searchTriggered:!0}),this.config.onVisualSearchTrigger(t))}shouldTriggerSearch(t,e,i,o,s=!1){if(s)return!1;const r=e&&!1===i,a=!!this.config.token,n=!o.searchCompleted&&!o.searchTriggered,c=this.getTriggeredSearchCount()<this.config.totalImages;return r&&a&&n&&c}getTriggeredSearchCount(){return Array.from(this.imageStates.values()).filter((t=>t.searchTriggered)).length}setImageElement(t,e){this.updateImageState(t,{imageElement:e})}getImageElement(t){return this.getImageState(t).imageElement}setImageState(t,e){this.imageStates.set(t,e)}updateImageStateData(t,e,i,o,s){const r={detectedObjects:e,searchCompleted:i,searchResults:o};void 0!==s&&(r.visualSearchId=s),this.updateImageState(t,r)}disconnectAll(){this.imageStates.forEach((t=>{t.observer&&t.observer.disconnect()})),this.imageStates.clear()}getAllImageStates(){return new Map(this.imageStates)}hasImageState(t){return this.imageStates.has(t)}hasActiveSearches(){return Array.from(this.imageStates.values()).some((t=>t.searchTriggered&&!t.searchCompleted))}shiftIndicesForward(t=0){Array.from(this.imageStates.entries()).filter((([e])=>e>=t)).sort((([t],[e])=>e-t)).forEach((([t,e])=>{this.imageStates.delete(t),this.imageStates.set(t+1,e)}))}}const R=t=>({maxWidth:"100%",maxHeight:`${t}px`,width:"auto",height:v()?`${t}px`:"auto",objectFit:"contain"}),B={campaignTypeId:"VPR",campaignTypeName:"Similar Products",widgetVersion:"1.0.0"};"undefined"!=typeof window&&u();const F=class{constructor(o){e(this,o),this.vviinnShopTheLookDetectedObjectClick=i(this,"vviinnShopTheLookDetectedObjectClick"),this.vviinnShopTheLookProductClick=i(this,"vviinnShopTheLookProductClick"),this.vviinnShopTheLookModalClose=i(this,"vviinnShopTheLookModalClose"),this.imageUrls="",this.height=500,this.campaignId="",this.widgetStyle="rounded",this.showCropper=!1,this.uploadMode=!1,this.showMultipleImages=!1,this.cssUrl=null,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.selectedDetectedObject=null,this.showModal=!1,this.modalPosition=null,this.showDetailedView=!1,this.selectedProductIndex=0,this.modalImageIndex=0,this.swiperActiveIndex=0,this.totalImages=1,this.imageUrlsList=[],this.swiperKey="swiper-0",this.needNavigation=!1,this.showLoadingSpinner=!1,this.isSearchInProgress=!1,this.currentViewMode=null,this.isWidgetVisible=!1,this.uploadedImageUrls=[],this.isManualObjectSelection=!1,this.isNavigatingToSlide=!1,this.resetDetailedView=()=>{this.showDetailedView=!1,this.selectedProductIndex=0},this.handleResize=()=>{this.checkViewModeChange(),this.updateNavigationVisibility(),this.showCropper&&this.cropperManager&&requestAnimationFrame((()=>{this.cropperManager.updateCropperDimensions(this.swiperActiveIndex,(t=>this.imageStore.getImageElement(t)))}))},this.handleDocumentClick=t=>{if(!this.showModal||this.showLoadingSpinner)return;const e=t.target;e&&(this.modalContentRef&&this.modalContentRef.contains(e)||e.closest("vviinn-detected-object")||this.handleModalClose())},this.checkViewModeChange=()=>{const t=M()?"desktop":"mobile";t!==this.currentViewMode&&(this.currentViewMode=t,this.showModal&&this.handleModalClose(),this.swiperKey=`swiper-${Date.now()}`)},this.updateNavigationVisibility=()=>{if(this.imageElement&&this.imageElement.offsetWidth>0){const t=window.innerWidth-100,e=Math.floor(t/(this.imageElement.offsetWidth+20));this.needNavigation=this.totalImages>e}else this.needNavigation=this.totalImages>1},this.handleSwiperPointerDown=t=>{var e;const i=(t=>t.target.closest("swiper-slide"))(t);if(!i)return;const o=((t,e)=>e?Array.from(e.querySelectorAll("swiper-slide")||[]).indexOf(t):-1)(i,this.el.shadowRoot);if(-1===o)return;const s=null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper(o);this.updateSwiperAllowTouchMove(!s)},this.handleSwiperScroll=()=>{this.showModal&&this.handleModalClose()},this.handleVisualSearchTrigger=t=>{this.showModal||(this.performVisualSearchForImage(t),this.updateSearchingState())},this.handleDetectedObjectClick=async(t,e,i=this.swiperActiveIndex)=>{var o,s;if(!this.token)return;M()&&!this.isCurrentSlide(i)?(this.isManualObjectSelection=!0,this.isNavigatingToSlide=!0,this.swiperActiveIndex=i,this.navigateToSlide(i),this.selectedDetectedObject=t,this.modalImageIndex=i,await new Promise((t=>setTimeout((()=>{this.isNavigatingToSlide=!1,requestAnimationFrame((()=>requestAnimationFrame(t)))}),300)))):(this.selectedDetectedObject=t,this.modalImageIndex=i),this.showCropper&&((null===(s=null===(o=this.cropperManager)||void 0===o?void 0:o.hasCropper)||void 0===s?void 0:s.call(o,i))||this.activateCropperForSlide(i)),this.isManualObjectSelection=!1,this.showLoadingSpinner=!0,this.showModal=!1,this.resetDetailedView();const r=this.getImageBounds(i),n=this.imageStore.getImageElement(i)||this.imageElement;r&&n&&(this.modalPosition=D(n,t,this.el,r));const c=this.imageStore.getImageState(i),l={detectedObject:t,imageElement:n,containerElement:this.el,token:this.token,visualSearchId:(null==c?void 0:c.visualSearchId)||f.visualSearchId||null,campaignId:this.campaignId,apiPath:this.apiPath,imageBounds:r,isSearchInProgress:this.isSearchInProgress,setSearchInProgress:t=>{this.isSearchInProgress=t}},d=await(async t=>{const{imageElement:e,detectedObject:i,containerElement:o,visualSearchId:s,token:r,imageBounds:n,campaignId:c,apiPath:l,isSearchInProgress:d,setSearchInProgress:h}=t;if(d)return a.left("Search already in progress");h(!0);try{if(!e)return a.left("Image element is missing");f.searchArea=i;const t=await m("shopTheLook",s||null,r,l,c);return a.fold((t=>a.left(`Visual search failed: ${t.inner}`)),(t=>{var s;const r=(null===(s=t.data)||void 0===s?void 0:s.products)||[],c=D(e,i,o,n);return a.right({searchResults:r,modalPosition:c})}))(t)}catch(t){return a.left(`Visual search failed: ${t}`)}finally{h(!1)}})(l);a.fold((t=>{t.includes("Search already in progress")||(console.error("Visual search failed:",t),this.showLoadingSpinner=!1)}),(t=>{t.searchResults&&t.searchResults.length>0&&this.imageStore.updateImageState(i,{searchResults:t.searchResults}),this.showLoadingSpinner=!1,t.searchResults&&t.searchResults.length>0&&this.isCurrentSlide(i)&&(this.showModal=!0),this.vviinnShopTheLookDetectedObjectClick.emit(Object.assign(Object.assign({},B),{detectedObjectId:`detected-${i}-${e}`,product:t.searchResults[0]||null}))}))(d)},this.performVisualSearch=async(t=this.swiperActiveIndex)=>{const e=this.imageUrlsList[t];if(!this.token||!e)return;const i=this.isCurrentSlide(t);i&&(this.showLoadingSpinner=!0);const o={imageUrl:e,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},s=await $(o);a.fold((e=>{console.error(`Visual search failed for image ${t}:`,e),this.imageStore.updateImageState(t,{searchCompleted:!0}),i&&(this.showLoadingSpinner=!1)}),(e=>{this.imageStore.updateImageStateData(t,e.detectedObjects,!0,e.searchResults,e.visualSearchId||null);const o=this.imageStore.getImageState(t);i&&(this.showLoadingSpinner=!1),o.detectedObjects.length>0&&i&&this.isCurrentSlide(t)&&!this.showModal&&this.scheduleAutoSelectFirstObject(t,o.detectedObjects),this.imageStore.updateImageState(t,{searchCompleted:!0})}))(s)},this.handleProductClick=t=>{this.vviinnShopTheLookProductClick.emit(Object.assign(Object.assign({},B),{detectedObjectId:this.selectedDetectedObject?`detected-${Date.now()}`:"",product:t}))},this.activateCropperForSlide=t=>{var e;null===(e=this.cropperManager)||void 0===e||e.activateCropperForSlide(t,(t=>this.imageStore.getImageElement(t)))},this.debouncedCropSearch=(t,e)=>{this.cropDebounceTimeout&&clearTimeout(this.cropDebounceTimeout),this.cropDebounceTimeout=window.setTimeout((()=>{this.cropDebounceTimeout=void 0,this.handleDetectedObjectClick(t,0,e)}),500)},this.handleModalClose=t=>{this.showLoadingSpinner||t&&t.target!==t.currentTarget||(this.clearModalAndSlideState(),this.vviinnShopTheLookModalClose.emit(B))},this.handleProductDetailsClick=(t,e)=>{this.selectedProductIndex=e,this.showDetailedView=!0},this.handleNavigateProduct=t=>{const e=this.imageStore.getImageState(this.modalImageIndex);"prev"===t&&this.selectedProductIndex>0?this.selectedProductIndex--:"next"===t&&this.selectedProductIndex<e.searchResults.length-1&&this.selectedProductIndex++},this.renderDetectedObjectsWrapper=e=>{const i=this.imageStore.getImageState(e);return((t,e)=>{var i;return!!t&&(M()?t.searchCompleted&&!!(null===(i=t.detectedObjects)||void 0===i?void 0:i.length):e)})(i,this.isCurrentSlide(e))?(e=>{const{imageBounds:i,detectedObjects:o,initialSearchCompleted:s,selectedDetectedObject:r,basicEventData:a,onSelectObject:n}=e;return i&&o.length&&s?o.map(((e,o)=>t("vviinn-detected-object",{key:`detected-${o}`,detectedObject:e,selectedDetectedObject:r,basicEventData:a,imageBounds:i,showInWidget:!1,style:{zIndex:"10"},onVviinnSelectObject:t=>{t.stopPropagation(),n(t.detail.detectedObject,o)}}))):null})({imageBounds:this.getImageBounds(e),detectedObjects:i.detectedObjects,initialSearchCompleted:i.searchCompleted,selectedDetectedObject:this.selectedDetectedObject,basicEventData:B,onSelectObject:(t,i)=>this.handleDetectedObjectClick(t,i,e)}):null},this.handleSlideChange=t=>{var e;const i=g(t);if(void 0!==i){if(i!==this.swiperActiveIndex&&(this.swiperActiveIndex=i),this.clearModalAndSlideState(),this.shouldManageDragging){const t=null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper(i);this.updateSwiperAllowTouchMove(!t)}setTimeout((()=>{this.isNavigatingToSlide=!1,this.ensureSlideSearchTriggered(this.swiperActiveIndex)}),100)}},this.handleImageRef=(t,e)=>{const i=this.imageStore.getImageState(e);if((!(null==i?void 0:i.refProcessed)||this.imageStore.getImageElement(e)!==t)&&(this.imageStore.updateImageState(e,{refProcessed:!0}),(this.isCurrentSlide(e)||this.totalImages<=1)&&(this.imageElement=t),t)){if(this.imageStore.setImageElement(e,t),this.imageStore.hasImageState(e)){const i=this.imageStore.getImageState(e);i.imageElement=t,this.imageStore.setImageState(e,i)}else{const i=E(t);this.imageStore.setImageState(e,i),this.imageStore.setImageState(e,i)}M()&&this.setupObserverAfterSwiper(t,e);const i=()=>{this.initializeImageForCropper(t,e),this.pendingUploadData&&0===e&&(this.imageStore.updateImageStateData(0,this.pendingUploadData.detectedObjects,!0,[],this.pendingUploadData.visualSearchId),this.pendingUploadData.detectedObjects.length>0&&this.scheduleAutoSelectFirstObject(0,this.pendingUploadData.detectedObjects),this.pendingUploadData=null)};t.complete&&t.offsetWidth>0?i():t.addEventListener("load",i,{once:!0})}},this.updateImageBoundsForElement=(t,e)=>{requestAnimationFrame((()=>{(this.isCurrentSlide(e)||this.totalImages<=1)&&this.updateNavigationVisibility()}))},this.initializeImageForCropper=(t,e)=>{var i;this.updateImageBoundsForElement(t,e),this.isCurrentSlide(e)&&(null===(i=this.cropperManager)||void 0===i||i.initializeCropper(t,e,this.swiperActiveIndex))},this.performVisualSearchForImage=async t=>{const e=this.imageUrlsList[t];if(!this.token||!e)return;const i=this.isCurrentSlide(t);i&&(this.showLoadingSpinner=!0);const o={imageUrl:e,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},s=await $(o);a.fold((e=>{console.error(`Visual search failed for image ${t}:`,e),this.imageStore.updateImageStateData(t,[],!0,[],null),this.updateSearchingState(i)}),(e=>{this.imageStore.updateImageStateData(t,e.detectedObjects,!0,e.searchResults,e.visualSearchId||null),this.updateSearchingState(i),e.detectedObjects.length>0&&this.isCurrentSlide(t)&&!this.showModal&&!this.isManualObjectSelection&&this.scheduleAutoSelectFirstObject(t,e.detectedObjects)}))(s)},this.pendingUploadData=null,this.handleFileUpload=async t=>{var e;const i=t.target,o=null===(e=i.files)||void 0===e?void 0:e[0];if(!o)return;this.showLoadingSpinner=!0;const s={file:o,token:this.token,campaignId:this.campaignId,apiPath:this.apiPath},r=await(async t=>{const{file:e,token:i,campaignId:o,apiPath:s}=t;try{const t=(await x(e)()).src,r=await y("shopTheLook",i,s,o)(e);return a.fold((t=>a.left(`Upload failed: ${t.inner}`)),(e=>{var i,o;const s=(null===(o=null===(i=e.interactions)||void 0===i?void 0:i.suggestedSearchAreas)||void 0===o?void 0:o.map((t=>t.rectangle)))||[];return a.right({imageUrl:t,detectedObjects:s,visualSearchId:e.requestId||null})}))(r)}catch(t){return a.left(`Failed to process image: ${t}`)}})(s);a.fold((t=>{console.error(t),this.showLoadingSpinner=!1}),(t=>{var e;this.clearModalAndSlideState(),this.showCropper&&(null===(e=this.cropperManager)||void 0===e||e.destroyAll()),this.imageStore.shiftIndicesForward(0),this.pendingUploadData={detectedObjects:t.detectedObjects,visualSearchId:t.visualSearchId},this.uploadedImageUrls=[t.imageUrl,...this.uploadedImageUrls],this.imageUrlsList=A(this.uploadedImageUrls,this.imageUrls),this.totalImages=this.imageUrlsList.length,this.swiperActiveIndex=0,this.showLoadingSpinner=!1,requestAnimationFrame((()=>{this.navigateToSlide(0)}))}))(r),i.value=""},this.handleNavigatePrev=()=>{this.swiperActiveIndex>0&&this.updateSlideIndex(this.swiperActiveIndex-1)},this.handleNavigateNext=()=>{this.swiperActiveIndex<this.totalImages-1&&this.updateSlideIndex(this.swiperActiveIndex+1)},this.updateSlideIndex=t=>{this.isNavigatingToSlide=!0,this.swiperActiveIndex=t,this.navigateToSlide(t),this.clearModalAndSlideState(),setTimeout((()=>{this.isNavigatingToSlide=!1;const e=this.imageStore.getImageState(t);e.searchCompleted||e.searchTriggered?this.performVisualSearchIfReady():this.forceSearchForSlide(t),this.showCropper&&this.activateCropperForSlide(t)}),100)},this.showNavigation=()=>this.needNavigation&&M()||this.showCropper,this.renderSwiperWrapper=()=>{const e=!this.showCropper||M();return(e=>{const{imageUrls:i,swiperActiveIndex:o,height:s,onSlideChange:r,onImageRef:a,renderDetectedObjects:n,onSwiperRef:c,swiperKey:l,allowTouchMove:d=!0}=e;if(!i||i.length<=1)return t("div",{class:"image-container"},t("img",{ref:t=>a(t,0),src:(null==i?void 0:i[0])||"",alt:"Shop-the-Look",class:"main-image",style:R(s)}),n(0));const u=v(),g=h(u);return t("div",{class:"swiper-container-wrapper"},t("div",{class:"swiper-wrapper "+(u?"desktop-carousel":"mobile-slider")},t("swiper-container",{key:l,ref:t=>{t&&!t.swiper&&p(t,{isDesktop:u,initialSlide:o,pagination:!0,keyboard:!0,allowTouchMove:d}),c&&c(t)},onSlideChange:r,style:g,pagination:u?void 0:"true","pagination-clickable":u?void 0:"true"},i.map(((e,i)=>t("swiper-slide",{key:i},t("div",{class:"image-container"},t("img",{ref:t=>a(t,i),src:e,alt:`Shop-the-Look ${i+1}`,class:"main-image",style:R(s)}),n(i))))))))})({imageUrls:this.imageUrlsList,swiperActiveIndex:this.swiperActiveIndex,height:this.height,detectedObjects:this.getCurrentImageState().detectedObjects,onSlideChange:this.handleSlideChange,onImageRef:this.handleImageRef,renderDetectedObjects:this.renderDetectedObjectsWrapper,swiperKey:this.swiperKey,allowTouchMove:e})},this.renderModalWrapper=()=>(e=>{const{showModal:i,selectedDetectedObject:o,modalPosition:s,searchResults:r,onProductClick:a,showDetailedView:n=!1,selectedProductIndex:c=0,onProductDetailsClick:l,onBackToGrid:d,currencySign:h,locale:p,numberLocale:u,showMultipleImages:g=!1,modalContentRef:b}=e;if(!i||!o||!(null==r?void 0:r.length))return null;const f=!v();return t("div",{ref:b,class:"modal-content-wrapper "+(f?"mobile-modal":"desktop-modal"),style:s?{"--modal-x":`${s.x}px`,"--modal-y":`${s.y}px`,"--modal-anchor":s.anchor}:{},onClick:t=>t.stopPropagation()},t("div",{class:"modal-body"},t("div",{class:"product-grid-container "+(n?"hidden":"")},r.length>0&&(e=>{const{searchResults:i,onProductClick:o,onProductDetailsClick:s}=e;if(!i.length)return null;const r=i.slice(0,4);return t("div",{class:"search-results-grid"},r.map(((e,i)=>{var r,a;return t("div",{key:`${e.productId}-${i}`,class:"result-item",onClick:()=>{s?s(e,i):o(e)}},t("div",{class:"result-image"},t("vviinn-image",{width:120,alt:e.title||"",imageTitle:e.title||"",src:(null===(r=e.image)||void 0===r?void 0:r.thumbnail)||(null===(a=e.image)||void 0===a?void 0:a.original)||"",responsive:!0,imageResolutionWidth:300})))})))})({searchResults:r,onProductClick:a,onProductDetailsClick:l})),t("div",{class:"product-details-container "+(n?"":"hidden")},r.length>0&&(e=>{var i,o,s,r;const{searchResults:a,selectedProductIndex:n,onProductClick:c,onBackToGrid:l,currencySign:d,locale:h,numberLocale:p,showMultipleImages:u=!1}=e;if(!a.length)return null;const g=a[n];return g?t("div",{class:"product-details"},t("div",{class:"product-header"},t("button",{class:"back-to-grid-button",onClick:l},t(C,null))),t("div",{class:"product-content"},t("div",{class:"product-details-card-wrapper"},t("vviinn-product-card",{key:g.productId,product:g,class:"product-details-card",productId:g.productId||"",productTitle:g.title||"",brand:g.brand,price:g.price.actual,salePrice:g.price.sale,addPriceContainer:!0,image:null!==(r=null!==(o=null===(i=g.image)||void 0===i?void 0:i.thumbnail)&&void 0!==o?o:null===(s=g.image)||void 0===s?void 0:s.original)&&void 0!==r?r:"",images:g.images,showMultipleImages:u,imageResolutionWidth:300,imageWidth:v()?160:120,currencySign:d||"",locale:h,numberLocale:p,deeplink:g.deeplink,onVviinnProductClick:()=>c(g)})))):null})({searchResults:r,selectedProductIndex:c,onProductClick:a,currencySign:h,locale:p,numberLocale:u,showMultipleImages:g,onBackToGrid:d}))))})({showModal:this.showModal,selectedDetectedObject:this.selectedDetectedObject,modalPosition:this.modalPosition,searchResults:this.imageStore.getImageState(this.modalImageIndex).searchResults,onProductClick:this.handleProductClick,showDetailedView:this.showDetailedView,selectedProductIndex:this.selectedProductIndex,onProductDetailsClick:this.handleProductDetailsClick,onBackToGrid:this.resetDetailedView,currencySign:this.effectiveCurrencySign,locale:this.locale,numberLocale:this.effectiveNumberLocale,showMultipleImages:this.showMultipleImages,modalContentRef:t=>{this.modalContentRef=t}})}handleProductCardClick(t){var e,i;const{productId:o,clickEvent:s}=t.detail,r=null===(e=this.imageStore)||void 0===e?void 0:e.getImageState(this.modalImageIndex),a=null===(i=null==r?void 0:r.searchResults)||void 0===i?void 0:i.find((t=>t.productId===o));(null==a?void 0:a.deeplink)&&O(a.deeplink,s,this.productDetailsRedirect,this.productDetailsNewTab)}async componentWillLoad(){await S(this.locale),this.imageUrlsList=A(this.uploadedImageUrls,this.imageUrls),this.totalImages=this.imageUrlsList.length,this.currentViewMode=M()?"desktop":"mobile",this.updateNavigationVisibility();M();this.imageStore=new L({threshold:.01,token:this.token,isWidgetVisible:this.isWidgetVisible,totalImages:this.totalImages,isModalOpen:this.showModal,onVisualSearchTrigger:this.handleVisualSearchTrigger.bind(this)}),this.showCropper&&(this.cropperManager=new V({onCropEnd:(t,e)=>{this.debouncedCropSearch(t,e)}}))}componentDidLoad(){window.addEventListener("resize",this.handleResize),document.addEventListener("click",this.handleDocumentClick),this.initializeContainerVisibilityTracking(),this.setupSwiperEventListener(),this.setupSwiperDragEventListeners()}onViewModeChange(t){t&&requestAnimationFrame((()=>{this.setupSwiperEventListener(),this.setupSwiperDragEventListeners()}))}onShowModalChange(t){var e;null===(e=this.imageStore)||void 0===e||e.updateConfig({isModalOpen:t})}clearModalAndSlideState(){this.showModal=!1,this.selectedDetectedObject=null,this.modalPosition=null,this.resetDetailedView(),this.modalImageIndex=0,this.autoSelectTimeout&&(clearTimeout(this.autoSelectTimeout),this.autoSelectTimeout=void 0)}updateSearchingState(t=!1){var e,i;this.showLoadingSpinner=null!==(i=null===(e=this.imageStore)||void 0===e?void 0:e.hasActiveSearches())&&void 0!==i&&i,t&&(this.showLoadingSpinner=!1)}getCurrentImageState(){var t;return null===(t=this.imageStore)||void 0===t?void 0:t.getImageState(this.swiperActiveIndex)}isCurrentSlide(t){return t===this.swiperActiveIndex}get shouldManageDragging(){return this.showCropper&&M()}get effectiveCurrencySign(){var t;return null!==(t=this.currencySign)&&void 0!==t?t:I.currencySign}get effectiveNumberLocale(){return this.numberLocale||this.locale||I.locale}disconnectedCallback(){var t,e,i,o;window.removeEventListener("resize",this.handleResize),document.removeEventListener("click",this.handleDocumentClick),null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),null===(e=this.imageStore)||void 0===e||e.disconnectAll(),null===(i=this.cropperManager)||void 0===i||i.destroyAll(),this.autoSelectTimeout&&clearTimeout(this.autoSelectTimeout),this.cropDebounceTimeout&&clearTimeout(this.cropDebounceTimeout);const s=null===(o=this.el.shadowRoot)||void 0===o?void 0:o.querySelector("swiper-container");s&&(s.removeEventListener("swiperslidechange",this.handleSlideChange),s.removeEventListener("swipersliderfirstmove",this.handleSwiperScroll),this.shouldManageDragging&&s.removeEventListener("pointerdown",this.handleSwiperPointerDown))}initializeContainerVisibilityTracking(){M();this.intersectionObserver=b(this.el,{threshold:.01,onIntersectionChange:t=>{var e;const i=this.isWidgetVisible;this.isWidgetVisible=t,null===(e=this.imageStore)||void 0===e||e.updateConfig({isWidgetVisible:this.isWidgetVisible,isModalOpen:this.showModal}),!i&&this.isWidgetVisible&&this.performVisualSearchIfReady()}})}setupSwiperEventListener(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("swiper-container");e&&setTimeout((()=>{e.addEventListener("swiperslidechange",this.handleSlideChange)}),200)}setupSwiperDragEventListeners(){var t;const e=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector("swiper-container");e&&setTimeout((()=>{e.addEventListener("swipersliderfirstmove",this.handleSwiperScroll,{passive:!0}),this.shouldManageDragging&&e.addEventListener("pointerdown",this.handleSwiperPointerDown,{capture:!0})}),200)}updateSwiperAllowTouchMove(t){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("swiper-container"),o=null==i?void 0:i.swiper;void 0!==(null==o?void 0:o.allowTouchMove)&&(o.allowTouchMove=t)}setupObserverAfterSwiper(t,e){setTimeout((()=>{var i;const o=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("swiper-container");if(o){const i=()=>{this.imageStore.setupImageIntersectionObserver(t,e)};(null==o?void 0:o.swiper)?i():(o.addEventListener("swiperinit",i,{once:!0}),setTimeout((()=>{const i=this.imageStore.getImageState(e);(null==i?void 0:i.observerSetup)||this.imageStore.setupImageIntersectionObserver(t,e)}),1e3))}}),200)}performVisualSearchIfReady(){const t=M();if(this.imageStore.updateConfig({isWidgetVisible:this.isWidgetVisible,token:this.token,totalImages:this.totalImages,isModalOpen:this.showModal}),this.token&&this.isWidgetVisible){const e=this.imageStore.getImageState(this.swiperActiveIndex);if(null==e?void 0:e.searchCompleted)this.activateCurrentSlide();else if(1===this.totalImages||!t||this.showCropper){t&&1!==this.totalImages&&!this.showCropper||this.markCurrentImageAsVisible();const e=this.imageStore.getImageState(this.swiperActiveIndex);(null==e?void 0:e.searchTriggered)||(this.imageStore.updateImageState(this.swiperActiveIndex,{searchTriggered:!0}),this.performVisualSearch(this.swiperActiveIndex)),this.showCropper&&this.activateCropperForSlide(this.swiperActiveIndex)}}}markCurrentImageAsVisible(){const t=this.imageStore.getImageState(this.swiperActiveIndex);t&&(t.isVisible=!0,this.imageStore.setImageState(this.swiperActiveIndex,t))}navigateToSlide(t){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("swiper-container");(null==i?void 0:i.swiper)&&i.swiper.slideTo(t)}forceSearchForSlide(t){const e=this.imageStore.getImageState(t);e&&(e.isVisible=!0,this.imageStore.setImageState(t,e)),this.imageStore.updateImageState(t,{searchTriggered:!0}),this.performVisualSearch(t)}ensureSlideSearchTriggered(t){const e=this.imageStore.getImageState(t);e.searchCompleted||e.searchTriggered?e.searchCompleted?this.activateCurrentSlide():this.performVisualSearchIfReady():this.forceSearchForSlide(t)}activateCurrentSlide(){var t;this.markCurrentImageAsVisible();const e=this.imageStore.getImageState(this.swiperActiveIndex);(null===(t=null==e?void 0:e.detectedObjects)||void 0===t?void 0:t.length)>0&&!this.showModal&&this.scheduleAutoSelectFirstObject(this.swiperActiveIndex,e.detectedObjects)}getCropperBounds(t){var e,i;if(this.showCropper&&(null===(e=this.cropperManager)||void 0===e?void 0:e.hasCropper)&&this.cropperManager.hasCropper(t)){const t=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector(".cropper-container .cropper-canvas img");if(t&&t.offsetWidth>0)return z(t)}return null}getStoreBounds(t){const e=this.imageStore.getImageElement(t);return e&&e.offsetWidth>0?z(e):null}getVisibleSlideBounds(t){var e;const i=Array.from((null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelectorAll("swiper-slide img"))||[]).filter((t=>!t.closest(".cropper-container")&&t.offsetWidth>0));return i&&i[t]?z(i[t]):null}getImageBounds(t){return this.getCropperBounds(t)||this.getStoreBounds(t)||this.getVisibleSlideBounds(t)}scheduleAutoSelectFirstObject(t,e){const i=!(null==e?void 0:e.length),o=!this.isCurrentSlide(t);i||o||this.autoSelectTimeout||this.isManualObjectSelection||this.isNavigatingToSlide||(this.autoSelectTimeout=window.setTimeout((()=>{if(this.autoSelectTimeout=void 0,!this.isCurrentSlide(t)||this.showModal||this.isNavigatingToSlide)return;const i=e[0];i&&this.handleDetectedObjectClick(i,0,t)}),500))}render(){return t(o,{key:"4734dcdc0c1a7d206970c8baf08e257077e952f9",exportparts:j},T(this.cssUrl),t("div",{key:"129438fdcf114bd903ad6888287e060e5fdc3948",class:`shop-the-look-container ${this.showModal?"modal-open":""} ${this.showCropper?"with-cropper":""} widget-style-${this.widgetStyle}`},t("div",{key:"04e037ad029930bd366920ca79e0ae7becebaf2c",class:"main-content"},this.renderSwiperWrapper(),this.showLoadingSpinner&&t("div",{key:"18ca739ed4cf0b1167fd8976fdab0c5e6e0ee410",class:"search-loader"},t("vviinn-preloader",{key:"efd47991fa32bf315c4985f98f0c14ccbf6f5a72"}))),this.renderModalWrapper(),t("div",{key:"332adbe2912fb61f82f9cf0488a13f7c9a0a405c",class:"actions-container",part:"shop-the-look-actions-container"},this.uploadMode&&t("div",{key:"55c748ffeded24b97801683454f9a1b8675f6ed6",class:"upload-button-container"},t("button",{key:"7cfa399b98e254bd12bff706cf6c4bea42dce684",class:"upload-button",part:"shop-the-look-upload-button",onClick:()=>{var t;return null===(t=this.fileInput)||void 0===t?void 0:t.click()},disabled:this.showLoadingSpinner},t("span",{key:"48b59d82816a50b6f98bbf68c8a6849679437852",class:"upload-button-icon",part:"shop-the-look-upload-button-icon"},t("slot",{key:"14f12cf7f44a39ba4f1d9cbecb6fa3558ae5fd5d",name:"vviinn-image-upload-icon"},t(P,{key:"1937cea6010c0a21182e88f365f188a65b0f3a70"}))),t("span",{key:"d62a5ee1ac2c17a663dda26cb0debd83821510c0",class:"upload-button-text",part:"shop-the-look-upload-button-text"},t("slot",{key:"42a4910a590a2b258dccb2a3ace5da8f60099791",name:"upload-button-text"}))),t("input",{key:"242e2ed2e319428ebde6dff7df8c37b60d33a8f1",type:"file",class:"visually-hidden",accept:k(),onChange:this.handleFileUpload,ref:t=>this.fileInput=t})),this.showNavigation()&&(i=this.totalImages,s=this.handleNavigatePrev,r=this.handleNavigateNext,t("div",{class:"carousel-navigation"},t("button",{class:"swiper-button-prev "+(0===(e=this.swiperActiveIndex)?"disabled":""),onClick:()=>s()},t(C,null)),t("button",{class:"swiper-button-next "+(e===i-1?"disabled":""),onClick:()=>r()},t(C,null)))))));var e,i,s,r}get el(){return s(this)}static get watchers(){return{currentViewMode:["onViewModeChange"],showModal:["onShowModalChange"]}}};F.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-display:32px;--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-display:40px;--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-width:155px;--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:#707070;--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;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--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;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none !important;max-width:none !important;min-height:0 !important;min-width:0 !important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:0.4}.cropper-view-box{display:block;height:100%;overflow:hidden;width:100%;border-radius:5px}.cropper-face,.cropper-point{display:block;height:100%;opacity:0.1;position:absolute;width:100%}.cropper-face{left:0;top:0;border-radius:5px}.cropper-point{--cropper-point-width:44px;height:var(--cropper-point-width);width:var(--cropper-point-width);opacity:1}.point-e,.point-s,.point-w,.point-n{display:none}.point-ne,.point-nw,.point-sw,.point-se{--delta:-9px}.point-ne{cursor:nesw-resize;right:var(--delta);top:var(--delta)}.point-nw{cursor:nwse-resize;left:var(--delta);top:var(--delta)}.point-sw{cursor:nesw-resize;bottom:var(--delta);left:var(--delta)}.point-se{cursor:nwse-resize;bottom:var(--delta);right:var(--delta)}.cropper-point::before{position:absolute;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");display:block;pointer-events:none}.point-ne::before{transform:rotate(-90deg);left:0px;top:6px}.point-nw::before{transform:rotate(180deg);left:6px;top:6px}.point-sw::before{transform:rotate(90deg);left:6px;top:0px}.point-se::before{left:0px;top:0px}.cropper-invisible{opacity:0}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none !important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}swiper-container::part(bullet){width:8px;height:8px;border-radius:var(--border-radius-full);background:var(--color-border-02);transition:width 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n height 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n background 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);margin:0;opacity:1;cursor:pointer;border:none;outline:none;transform:scale(1);position:relative}swiper-container::part(bullet)::after{content:\"\";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;cursor:pointer}swiper-container::part(bullet):hover{background:rgba(22, 22, 22, 0.5);transform:scale(1.2)}swiper-container::part(bullet-active){width:24px;height:8px;border-radius:var(--spacing-50);background:var(--color-icon-helper)}swiper-container::part(bullet-active):hover{background:var(--color-icon-secondary);transform:scale(1.1)}:host{--shop-the-look-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.25);display:block;font-family:var(--font-family-base);box-sizing:border-box;max-width:100%}.shop-the-look-container{position:relative;width:100%;background:var(--color-bg-base)}.main-content{position:relative;display:flex;flex-direction:column;gap:var(--spacing-200);align-items:center}.actions-container{width:100%;display:flex;align-items:center;gap:var(--spacing-300);margin-top:var(--spacing-250);justify-content:flex-end}.upload-button{display:inline-flex;padding:var(--spacing-150);justify-content:center;align-items:center;gap:var(--spacing-100);background:var(--button-bg-color-primary);border:none;border-radius:var(--border-radius-100);color:var(--color-text-inverse);font-family:var(--font-family-base);font-size:16px;font-weight:500;cursor:pointer;transition:background 0.2s ease}.upload-button-icon{display:inline-flex;align-items:center}.upload-button-text{display:contents}.upload-button:hover{background:var(--button-bg-color-primary-hover)}.upload-button:disabled{cursor:not-allowed}.image-container{position:relative;border-radius:var(--border-radius-200);overflow:hidden;background:var(--color-field-02);display:flex;justify-content:center;align-items:center;box-sizing:border-box;max-width:100%}.main-image{display:block;-o-object-fit:contain;object-fit:contain}.swiper-container-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%}swiper-container{width:100%;height:100%;border-radius:var(--border-radius-200);overflow:hidden}swiper-slide{display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-shrink:0}swiper-container::part(pagination){bottom:var(--spacing-250);display:flex;justify-content:center;align-items:center;gap:var(--spacing-100);padding:var(--spacing-100) 0}swiper-container::part(bullet-active):hover{background:var(--color-icon-secondary);transform:scale(1.1)}.carousel-navigation{display:flex;gap:var(--spacing-100)}.swiper-button-prev,.swiper-button-next{position:relative;width:48px;height:48px;background:var(--button-bg-color-secondary);border:none;border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s ease,\n opacity 0.3s ease;margin:0}.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--button-bg-color-secondary-hover)}.swiper-button-next svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-button-next{color:var(--color-text-secondary)}.swiper-button-prev.disabled,.swiper-button-next.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.desktop-carousel{position:relative;width:100%;max-width:none}.desktop-carousel swiper-container{width:100%;height:100%;justify-content:flex-start}.desktop-carousel .swiper-wrapper{justify-content:flex-start;align-items:flex-start}.desktop-carousel .main-image{overflow:hidden;border-radius:var(--border-radius-200)}.desktop-carousel vviinn-detected-object{position:absolute;z-index:15;overflow:visible}.shop-the-look-container .desktop-carousel swiper-slide{width:auto;flex-shrink:0}.shop-the-look-container .desktop-carousel swiper-container::part(pagination){display:none}.mobile-slider swiper-slide{width:auto;display:flex;justify-content:center}.mobile-slider swiper-container::part(pagination){display:flex}.shop-the-look-container .mobile-slider swiper-container::part(pagination){display:flex;justify-content:center;align-items:center;gap:var(--spacing-100);padding:var(--spacing-100) 0}.modal-content-wrapper{position:absolute;background:var(--color-bg-base);border-radius:var(--border-radius-150);overflow:hidden;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.25);z-index:10000;top:var(--modal-y, 50%);left:var(--modal-x, 50%)}.modal-content-wrapper.mobile-modal{max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);margin:0}.modal-content-wrapper[style*=\"--modal-anchor: top-left\"]{transform:translate(0, 0)}.modal-content-wrapper[style*=\"--modal-anchor: top-right\"]{transform:translate(-100%, 0)}.modal-content-wrapper[style*=\"--modal-anchor: bottom-left\"]{transform:translate(0, -100%)}.modal-content-wrapper[style*=\"--modal-anchor: bottom-right\"]{transform:translate(-100%, -100%)}.modal-content-wrapper:not([style*=\"--modal-anchor\"]){transform:translate(-50%, -50%)}.modal-body{padding:var(--spacing-100)}.search-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-50);width:140px}.result-item{cursor:pointer;border-radius:var(--spacing-75);overflow:hidden;aspect-ratio:var(--product-card-image-aspect-ratio, 1)}.result-image{width:100%;height:100%;position:relative}.result-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.product-grid-container.hidden,.product-details-container.hidden{display:none}.product-details{display:flex;flex-direction:column;height:100%;gap:var(--spacing-75);width:-moz-fit-content;width:fit-content}.product-header{display:flex;align-items:center}.product-content{flex:1;position:relative}.product-details-card-wrapper{height:100%;padding:0;width:160px;max-width:160px}.product-details-card{height:100%;background:var(--color-bg-base);border:none;width:100%;max-width:100%}.back-to-grid-button{display:contents;background:none;border:none;cursor:pointer;padding:0}.back-to-grid-button svg{width:24px;height:24px;color:var(--color-icon-helper);transition:color 0.2s ease}.back-to-grid-button:hover svg{color:var(--color-icon-secondary)}vviinn-product-card::part(price-container){flex-direction:row}vviinn-image::part(image),.product-details-card-wrapper vviinn-product-card::part(image),.product-details-card-wrapper vviinn-product-card::part(image-picture){border-radius:var(--border-radius-100);overflow:hidden}.search-loader{position:absolute;top:var(--spacing-200);right:var(--spacing-200);z-index:100;background:rgba(255, 255, 255, 0.9);border-radius:var(--border-radius-full);padding:var(--spacing-100);backdrop-filter:blur(4px)}.search-loader vviinn-preloader{width:24px;height:24px}.shop-the-look-container.modal-open vviinn-detected-object{z-index:10001}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}.desktop-carousel vviinn-detected-object{position:absolute;z-index:15;overflow:visible}.desktop-carousel .main-image{overflow:hidden;border-radius:var(--border-radius-200)}.shop-the-look-container .desktop-carousel swiper-container::part(pagination){display:none}.desktop-carousel .swiper-button-prev,.desktop-carousel .swiper-button-next{display:flex}.desktop-carousel{max-width:none}.desktop-carousel .swiper-wrapper{justify-content:flex-start;align-items:flex-start}.shop-the-look-container .desktop-carousel swiper-slide{width:auto;flex-shrink:0}.mobile-slider swiper-slide{width:auto;display:flex;justify-content:center}@media (max-width: 768px){.shop-the-look-container:not(.with-cropper) .carousel-navigation{display:none}.mobile-slider{width:100%}.shop-the-look-container .mobile-slider swiper-slide{width:100%;flex-shrink:0}.shop-the-look-container{width:100%;max-width:100vw}.shop-the-look-container .image-container,.shop-the-look-container swiper-container,.shop-the-look-container swiper-slide{width:-moz-fit-content;width:fit-content;max-width:100%}swiper-container::part(wrapper){align-items:center}.shop-the-look-container .main-image{max-width:100%;height:auto;width:auto;-o-object-fit:contain;object-fit:contain}.modal-content-wrapper.desktop-modal{max-width:calc(100vw - 16px);max-height:calc(100vh - 48px)}.search-results-grid{width:min(140px, calc(100vw - 32px));gap:var(--spacing-50)}.carousel-navigation{bottom:var(--spacing-50);right:var(--spacing-50)}.product-details-card-wrapper{width:120px;max-width:120px}}.cropper-wrap-box{border-radius:var(--border-radius-200);overflow:hidden}.widget-style-cornered .image-container,.widget-style-cornered swiper-container,.widget-style-cornered .desktop-carousel .main-image,.widget-style-cornered .modal-content-wrapper,.widget-style-cornered .result-item,.widget-style-cornered .desktop-carousel .swiper-button-prev,.widget-style-cornered .desktop-carousel .swiper-button-next,.widget-style-cornered .cropper-wrap-box,.widget-style-cornered vviinn-image::part(image),.widget-style-cornered .product-details-card-wrapper vviinn-product-card::part(image),.widget-style-cornered .product-details-card-wrapper vviinn-product-card::part(image-picture),.widget-style-cornered .upload-button,.widget-style-cornered .carousel-navigation button{border-radius:0}";export{F as vviinn_shop_the_look}
|