vviinn-widgets 2.217.1 → 2.219.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/cssUrlHelper-BX9kngtZ.js +7 -0
- package/dist/cjs/{index-KB8ruJQe.js → index-DdCwxNyl.js} +1 -1
- package/dist/cjs/{openProductLink-BwHUGXtr.js → openProductLink-B3cy6uw_.js} +0 -5
- package/dist/cjs/{search.store-C82VhK1A.js → search.store-DiomZf0i.js} +3 -1
- package/dist/cjs/vviinn-button_6.cjs.entry.js +3 -2
- package/dist/cjs/vviinn-camera_12.cjs.entry.js +26 -18
- package/dist/cjs/vviinn-carousel_10.cjs.entry.js +7 -6
- package/dist/cjs/vviinn-shop-the-look.cjs.entry.js +4 -3
- package/dist/cjs/vviinn-text-search.cjs.entry.js +6 -6
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +2 -1
- package/dist/collection/components/vviinn-text-search/vviinn-text-search.js +5 -5
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +2 -1
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +2 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +20 -13
- package/dist/collection/store/search.store.js +2 -0
- package/dist/esm/cssUrlHelper-DsQD_dY6.js +5 -0
- package/dist/esm/{index-CMX-QEzm.js → index-DHNImAac.js} +1 -1
- package/dist/esm/{openProductLink-CJ9Wo3Ye.js → openProductLink-C7_qzUNW.js} +1 -5
- package/dist/esm/{search.store-Bof_HKxz.js → search.store-DUkS1MAq.js} +3 -1
- package/dist/esm/vviinn-button_6.entry.js +3 -2
- package/dist/esm/vviinn-camera_12.entry.js +24 -16
- package/dist/esm/vviinn-carousel_10.entry.js +4 -3
- package/dist/esm/vviinn-shop-the-look.entry.js +3 -2
- package/dist/esm/vviinn-text-search.entry.js +6 -6
- package/dist/esm/vviinn-vps-button.entry.js +2 -1
- package/dist/types/store/search.store.d.ts +1 -0
- package/dist/vviinn-widgets/{p-dcaf6f35.entry.js → p-315db5a2.entry.js} +1 -1
- package/dist/vviinn-widgets/p-5e186249.entry.js +1 -0
- package/dist/vviinn-widgets/p-91768e9c.entry.js +1 -0
- package/dist/vviinn-widgets/{p-elxMiKkD.js → p-C063BS9s.js} +1 -1
- package/dist/vviinn-widgets/p-C7_qzUNW.js +1 -0
- package/dist/vviinn-widgets/p-D3wRLf2J.js +1 -0
- package/{www/build/p-DM6fTGU7.js → dist/vviinn-widgets/p-DXT8Rt8G.js} +1 -1
- package/dist/vviinn-widgets/p-ab6447df.entry.js +1 -0
- package/dist/vviinn-widgets/p-fa907040.entry.js +1 -0
- package/dist/vviinn-widgets/p-fcbaa790.entry.js +1 -0
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-dcaf6f35.entry.js → p-315db5a2.entry.js} +1 -1
- package/www/build/p-5e186249.entry.js +1 -0
- package/www/build/p-91768e9c.entry.js +1 -0
- package/www/build/{p-elxMiKkD.js → p-C063BS9s.js} +1 -1
- package/www/build/p-C7_qzUNW.js +1 -0
- package/www/build/p-D3wRLf2J.js +1 -0
- package/{dist/vviinn-widgets/p-DM6fTGU7.js → www/build/p-DXT8Rt8G.js} +1 -1
- package/www/build/p-ab6447df.entry.js +1 -0
- package/www/build/{p-fff4758a.js → p-ed15ff33.js} +1 -1
- package/www/build/p-fa907040.entry.js +1 -0
- package/www/build/p-fcbaa790.entry.js +1 -0
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/vviinn-widgets/p-5ee404fb.entry.js +0 -1
- package/dist/vviinn-widgets/p-756d201c.entry.js +0 -1
- package/dist/vviinn-widgets/p-97099d69.entry.js +0 -1
- package/dist/vviinn-widgets/p-CtSr754V.js +0 -1
- package/dist/vviinn-widgets/p-e4c19fc9.entry.js +0 -1
- package/dist/vviinn-widgets/p-fbbf34ba.entry.js +0 -1
- package/www/build/p-5ee404fb.entry.js +0 -1
- package/www/build/p-756d201c.entry.js +0 -1
- package/www/build/p-97099d69.entry.js +0 -1
- package/www/build/p-CtSr754V.js +0 -1
- package/www/build/p-e4c19fc9.entry.js +0 -1
- package/www/build/p-fbbf34ba.entry.js +0 -1
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import { h } from './index-RkvPN2Rk.js';
|
|
2
|
-
|
|
3
|
-
const renderExternalCSS = (cssUrl) => (cssUrl === null || cssUrl === void 0 ? void 0 : cssUrl.length) ? h("link", { href: cssUrl, rel: "stylesheet" }) : null;
|
|
4
|
-
|
|
5
1
|
const openProductLink = (deeplink, event, productDetailsRedirect = true, productDetailsNewTab = false) => {
|
|
6
2
|
if (!productDetailsRedirect)
|
|
7
3
|
return;
|
|
@@ -14,4 +10,4 @@ const openProductLink = (deeplink, event, productDetailsRedirect = true, product
|
|
|
14
10
|
}
|
|
15
11
|
};
|
|
16
12
|
|
|
17
|
-
export { openProductLink as o
|
|
13
|
+
export { openProductLink as o };
|
|
@@ -8591,7 +8591,7 @@ const encodeToBase64UTF8 = (str) => {
|
|
|
8591
8591
|
return btoa(String.fromCharCode.apply(null, utf8Array));
|
|
8592
8592
|
};
|
|
8593
8593
|
|
|
8594
|
-
const version = "2.
|
|
8594
|
+
const version = "2.219.0";
|
|
8595
8595
|
|
|
8596
8596
|
const appStateGlobalDefaults = {
|
|
8597
8597
|
excluded: null,
|
|
@@ -8698,6 +8698,8 @@ const updateVisualSearchState = (store, isHiResUpdate = false) => async (respons
|
|
|
8698
8698
|
state.visualSearchId = response.requestId;
|
|
8699
8699
|
state.results = response.data.products;
|
|
8700
8700
|
state.dynamicFilters = dynamicFilters;
|
|
8701
|
+
state.redirect = response.interactions.redirect
|
|
8702
|
+
? Object.assign(Object.assign({}, response.interactions.redirect), { searchId: response.requestId }) : null;
|
|
8701
8703
|
const extractedFilters = extractSelectedFilters(dynamicFilters);
|
|
8702
8704
|
if (state.requestFilters.length === 0 && extractedFilters.length > 0) {
|
|
8703
8705
|
state.requestFilters = extractedFilters;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { h, r as registerInstance, H as Host, c as createEvent, g as getElement, F as Fragment } from './index-RkvPN2Rk.js';
|
|
2
2
|
import { i as instance } from './store-BJxQCbNV.js';
|
|
3
|
-
import { l as getAcceptableFileFormatsForDisplay, h as campaignTypeNames, j as addIfNotEmpty, n as searchState, u as useSearchStore, v as version } from './search.store-
|
|
3
|
+
import { l as getAcceptableFileFormatsForDisplay, h as campaignTypeNames, j as addIfNotEmpty, n as searchState, u as useSearchStore, v as version } from './search.store-DUkS1MAq.js';
|
|
4
4
|
import { s as slotChangeListener, a as addEventListenersWithSignal } from './index-OsoUj2Au.js';
|
|
5
5
|
import { S as SecondaryActionIcon } from './SecondaryActionIcon-FWFzrhba.js';
|
|
6
6
|
import { m as modalParts, c as carouselParts, p as productCardParts, r as recommendationsParts, i as initializeLocale } from './index-BtnjaTty.js';
|
|
7
7
|
import { a as SIDEBAR_ANIMATION_DURATION, P as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH, L as LOADING_CLASS_DELAY } from './constants-rqiiCPBX.js';
|
|
8
8
|
import { i as isClickedInRectBound } from './Rectangle-dmgo4KMB.js';
|
|
9
|
+
import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
|
|
9
10
|
|
|
10
11
|
const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11
12
|
h("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" })));
|
|
@@ -524,7 +525,7 @@ const VviinnVprButton = class {
|
|
|
524
525
|
}
|
|
525
526
|
}
|
|
526
527
|
render() {
|
|
527
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '2d6cd8ecdeadf7205ad1b9b7170dc5ad28d43c3b', role: "button", tabindex: "0", "aria-label": this.getAriaLabel(), onClick: this.handleButtonClick, onKeyDown: this.handleKeyDown }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: 'f6852f2eb943f40d692bf5e0609a5ac1628f598f', addStyle: this.addStyle, part: "vviinn-button" }, h("slot", { key: '5f934ba1ef44cb5133dcf2a843429c5f92858514' }, this.campaignType === "VCS" ? (h(CrossSellingIcon, { width: this.iconSideSize, height: this.iconSideSize })) : (h(SimilarProductsIcon, { width: this.iconSideSize, height: this.iconSideSize }))))));
|
|
528
529
|
}
|
|
529
530
|
handleClick() {
|
|
530
531
|
const sidebar = document.createElement("vviinn-recommendations-sidebar");
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-RkvPN2Rk.js';
|
|
2
2
|
import { _ as _functionExports, E as EitherExports, f as fold, b as fromImage, a as divideOnSized, e as isLeft, m as match, O as OptionExports } from './Rectangle-dmgo4KMB.js';
|
|
3
|
-
import { w as toFile, c as makeUploadFileRequest, x as getImageSizes, v as version, h as campaignTypeNames, j as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, y as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, z as resetStore, k as makeTextSearchRequest, A as makeProductListingPageRequest, B as checkDeviceType, p as parseStringToExcluded } from './search.store-
|
|
3
|
+
import { w as toFile, c as makeUploadFileRequest, x as getImageSizes, v as version, h as campaignTypeNames, j as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, y as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, z as resetStore, k as makeTextSearchRequest, A as makeProductListingPageRequest, B as checkDeviceType, p as parseStringToExcluded } from './search.store-DUkS1MAq.js';
|
|
4
4
|
import { s as slotChangeListener, a as addEventListenersWithSignal, p as productCardSlotNames, v as vprIconSlotName, f as findSlotElements, g as getSlotNames, b as setElementInteractivity, S as SlotSkeleton } from './index-OsoUj2Au.js';
|
|
5
|
-
import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, c as createWidgetEvent, a as createFilterEvent, v as v4, b as createAddToBasketEvent, d as createAddToWishlistEvent, e as createResultEventByType, f as createProductEventByType, h as getCustomLabels, t as triggerFilter, i as triggerRemoveIntervalFilter, j as announceToScreenReader, s as syncRequestFilters, k as isSubFilterActive, l as RenderFilterButton, m as getIntervalLabel, n as createImageSearchEvent } from './index-
|
|
5
|
+
import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, c as createWidgetEvent, a as createFilterEvent, v as v4, b as createAddToBasketEvent, d as createAddToWishlistEvent, e as createResultEventByType, f as createProductEventByType, h as getCustomLabels, t as triggerFilter, i as triggerRemoveIntervalFilter, j as announceToScreenReader, s as syncRequestFilters, k as isSubFilterActive, l as RenderFilterButton, m as getIntervalLabel, n as createImageSearchEvent } from './index-DHNImAac.js';
|
|
6
6
|
import { i as instance, t as trackEvent, a as isTrackingEnabled, d as defaultConfig } from './store-BJxQCbNV.js';
|
|
7
7
|
import { M as MIN_SEARCH_AREA_SIZE, S as SUPPORTED_ASPECT_RATIO, a as MIN_IMAGE_SIDE_FOR_CROPPER, C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal, D as DEFAULT_IMAGE_SIZE } from './cropperUtils-CkB6bG3L.js';
|
|
8
|
-
import { r as renderExternalCSS
|
|
8
|
+
import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
|
|
9
9
|
import { i as initializeLocale, d as productCardsGridPart, p as productCardParts, l as listCardParts, e as contentCardParts, f as selectedFiltersParts, g as suggestionsParts, h as filtersParts, j as extendedFiltersParts, m as modalParts, b as searchBarParts, k as searchWidgetFilterParts, n as searchWidgetButtonParts } from './index-BtnjaTty.js';
|
|
10
10
|
import { i as isOnResultsPage, a as parseResultsPageParams, p as parseResultsPageParamNames, c as buildImageSearchRedirectUrl } from './resultsPageUrl-DbOxfJSz.js';
|
|
11
11
|
import { R as RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH, b as SCROLL_TO_DISCOVERY_DELAY, S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from './constants-rqiiCPBX.js';
|
|
12
|
+
import { o as openProductLink } from './openProductLink-C7_qzUNW.js';
|
|
12
13
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-DOMXsA9W.js';
|
|
13
14
|
|
|
14
15
|
const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
@@ -1800,11 +1801,19 @@ const VviinnVpsWidget = class {
|
|
|
1800
1801
|
this.uploadSource = uploadSource;
|
|
1801
1802
|
};
|
|
1802
1803
|
this.handleVviinnImageUploadFinished = (detail) => {
|
|
1804
|
+
const visualSearchRedirect = this.state.redirect;
|
|
1805
|
+
const hasVisualSearchRedirect = !!(visualSearchRedirect === null || visualSearchRedirect === void 0 ? void 0 : visualSearchRedirect.url) &&
|
|
1806
|
+
visualSearchRedirect.searchId === detail.searchId;
|
|
1807
|
+
if (hasVisualSearchRedirect) {
|
|
1808
|
+
this.handleImageSearchRedirect(visualSearchRedirect.url, detail.searchId);
|
|
1809
|
+
return;
|
|
1810
|
+
}
|
|
1803
1811
|
const shouldRedirectToResultsPage = this.resultsPageUrl &&
|
|
1804
1812
|
!this.showInWidget &&
|
|
1805
1813
|
!isOnResultsPage(this.resultsPageUrl);
|
|
1806
1814
|
if (shouldRedirectToResultsPage) {
|
|
1807
|
-
this.
|
|
1815
|
+
const url = buildImageSearchRedirectUrl(this.resultsPageUrl, detail.searchId, parseResultsPageParamNames(this.resultsPageParams).searchId);
|
|
1816
|
+
this.handleImageSearchRedirect(url, detail.searchId);
|
|
1808
1817
|
return;
|
|
1809
1818
|
}
|
|
1810
1819
|
this.handleImageSelection();
|
|
@@ -1955,8 +1964,7 @@ const VviinnVpsWidget = class {
|
|
|
1955
1964
|
isResultSlide() {
|
|
1956
1965
|
return this.slidePosition === 1;
|
|
1957
1966
|
}
|
|
1958
|
-
handleImageSearchRedirect(searchId) {
|
|
1959
|
-
const url = buildImageSearchRedirectUrl(this.resultsPageUrl, searchId, parseResultsPageParamNames(this.resultsPageParams).searchId);
|
|
1967
|
+
handleImageSearchRedirect(url, searchId) {
|
|
1960
1968
|
const redirectData = Object.assign(Object.assign({}, this.getBasicEventData()), { url, source: "visual-search", searchId });
|
|
1961
1969
|
const event = this.vviinnRedirect.emit(redirectData);
|
|
1962
1970
|
if (!event.defaultPrevented) {
|
|
@@ -2138,31 +2146,31 @@ const VviinnVpsWidget = class {
|
|
|
2138
2146
|
}
|
|
2139
2147
|
render() {
|
|
2140
2148
|
var _a, _b, _c;
|
|
2141
|
-
return (h(Host, { key: '
|
|
2149
|
+
return (h(Host, { key: '0985a289b00fca5286466be2d4f33ef7d32c49cb', exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}, ${productCardsGridPart}, ${suggestionsParts}` }, renderExternalCSS(this.cssUrl), !this.showingInButton && SlotSkeleton("search"), h("vviinn-overlayed-modal", { key: '42c48cf9f6414ccd23705ad4a1ca2dcccf6aa65f', class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState, onVviinnWidgetClose: ({ detail }) => {
|
|
2142
2150
|
if (detail.campaignTypeId !== "VPR")
|
|
2143
2151
|
this.handleModalClose();
|
|
2144
2152
|
}, buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: this.mode === "upload" ||
|
|
2145
|
-
(!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '
|
|
2153
|
+
(!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '399dac9c2c005efad3c3506dd84f7bcf9c550eaf', position: this.slidePosition }, h("vviinn-slide", { key: '832f2287e46f4edaeade004325106fecbdb3e618', class: {
|
|
2146
2154
|
"start-page": true,
|
|
2147
2155
|
"camera-enabled": this.isCameraEnabled,
|
|
2148
|
-
} }, h("vviinn-camera", { key: '
|
|
2156
|
+
} }, h("vviinn-camera", { key: 'fee0491b5660c7f4c61796bfc647edf6c1121ed6', token: this.token, onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
|
|
2149
2157
|
this.handleVviinnImageUpload("startCamera");
|
|
2150
|
-
}, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: '
|
|
2158
|
+
}, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: 'f5e463f64ac999e3b7bded376a0f12406ad3869d', class: {
|
|
2151
2159
|
error: this.haveErrors(),
|
|
2152
|
-
}, id: "start-page_block" }, h("div", { key: '
|
|
2153
|
-
this.state.searchStatus === "error") && (h("div", { key: '
|
|
2160
|
+
}, id: "start-page_block" }, h("div", { key: '155a80658288afe387d77f1140819fa72134a42e', class: "start-page_main-content" }, (this.wrongImageFormat ||
|
|
2161
|
+
this.state.searchStatus === "error") && (h("div", { key: '3c948759b2b3b264008d814d8c711cba759f0042', class: "start-page_errors-block" }, this.getCurrentErrorType() && (h("vviinn-error", { key: '6ded7b63230680c53893a571100ad63787db36e8', errorType: this.getCurrentErrorType(), handler: this.resetState, hasBackground: true, searchType: this.state.searchType })))), !this.haveErrors() && (h(Fragment, { key: '14c56d10d2df3af3f32b37aa10bc687bc4a52617' }, h("vviinn-teaser", { key: '99092cc741e26cb2f1101fa4bb5ff219017c7be9' }), h("div", { key: '77cf9e9e82a38e9fc9de074c3d02dda473d604ac', class: "buttons-group" }, this.renderButtons()), this.textSearchShow && !this.isResultSlide() && (h("vviinn-text-search", { key: '9393d8afb3ae1bbc3ed1d6f4f6461356dd3be912', token: this.token, apiPath: this.apiPath, locale: this.locale, showInWidget: this.showInWidget, showOnFirstScreen: true, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" }))))), h("vviinn-privacy-badge", { key: '4c381e57c33d18a5736af7ad54a3512ba1ace512', privacyBadgeText: instance.t("privacyBadgeText", {
|
|
2154
2162
|
interpolation: { escapeValue: false },
|
|
2155
|
-
}), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: '
|
|
2163
|
+
}), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: 'c3f7ea7984ce33f702153878f378be802adb8258', class: {
|
|
2156
2164
|
"results-page": true,
|
|
2157
2165
|
active: this.isResultSlide(),
|
|
2158
|
-
} }, this.isResultSlide() && (h("div", { key: '
|
|
2166
|
+
} }, this.isResultSlide() && (h("div", { key: 'cd8ec6519b09395d2b4926301bfeec3dc91d2ac6', class: "source-wrapper" }, this.isTextSearch() && (h("vviinn-text-search", { key: '96e71f8fb6f1c682f872e76f2b9dd5616d767934', token: this.token, showInWidget: this.showInWidget, apiPath: this.apiPath, locale: this.locale, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" })), !this.isTextSearch() && (h("vviinn-cropper", { key: '4aabf6d68425e50b277c15c881c40bea2e4d38b1', token: this.token, basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: this.showInWidget, "save-image-mode": "never" })), h("vviinn-suggestions", { key: 'ca8f970dbd2f3b1824f80feb7477b3d34b8b5ed1', showInWidget: this.showInWidget, token: this.token, apiPath: this.apiPath, locale: this.locale }), h("vviinn-selected-filters", { key: '44ff0a2c8dea93a3b5c2cd593b34dc20a4b115b4', locale: this.locale, currencySign: this.currencySign, showInWidget: this.showInWidget, exportparts: filtersParts }), ((_b = this.state.dynamicFilters) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { key: 'dbf0b1c1a240f60931b1b75d8b76806e071f359f', class: {
|
|
2159
2167
|
"filters-wrapper": true,
|
|
2160
2168
|
hidden: this.showAspectRatioError,
|
|
2161
|
-
} }, h("vviinn-filters", { key: '
|
|
2169
|
+
} }, h("vviinn-filters", { key: '801f6aab643da44e564f062fddeb14811eca70bd', showInWidget: this.showInWidget, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters", { key: '36a32875a0532cbf7148720df7a743bb0159e51e', mode: "preview", showHeader: false, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters-button", { key: '148bf202a89af93e8cd88a612d585d0849a3d7de', class: {
|
|
2162
2170
|
"extended-filters-button": true,
|
|
2163
2171
|
"has-primary-filters": this.state.dynamicFilters.filter((f) => f.isPrimary)
|
|
2164
2172
|
.length > 0,
|
|
2165
|
-
}, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: '
|
|
2173
|
+
}, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: '263743fba6b324f47a1fae12648995bdef73aa25' }, h("vviinn-results", { key: '977140130b3b8dafaac6ae428c2b9f013de37d00', token: this.token, locale: this.locale, numberLocale: this.numberLocale, pricePrefix: this.pricePrefix, "currency-sign": this.currencySign, apiPath: this.apiPath, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, uiSessionId: this.uiSessionId, widgetElementId: (_c = this.buttonElementId) !== null && _c !== void 0 ? _c : this.widgetElementId, showInWidget: this.showInWidget, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, showAspectRatioError: this.showAspectRatioError, resetWidgetState: this.resetState, replaceSlotsContentInWidget: this.replaceSlotsContent.bind(this), replaceSlotsContentInButton: this.replaceSlotsContentInButton, addPriceContainer: this.addPriceContainer, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, parentSlots: [...this.parentSlots, ...this.slots], scrollableModalBody: this.modalBody }))))), h("vviinn-extended-filters", { key: '24d12faff2641fd61a4d13d7303734f1770120b2', class: "modal-extended-filters", mode: "modal", exportparts: extendedFiltersParts, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }))));
|
|
2166
2174
|
}
|
|
2167
2175
|
get el() { return getElement(this); }
|
|
2168
2176
|
static get watchers() { return {
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, f as forceUpdate, F as Fragment, H as Host, g as getElement } from './index-RkvPN2Rk.js';
|
|
2
|
-
import { h as campaignTypeNames, j as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, C as isMobile, D as fromString, E as fold, v as version } from './search.store-
|
|
2
|
+
import { h as campaignTypeNames, j as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, C as isMobile, D as fromString, E as fold, v as version } from './search.store-DUkS1MAq.js';
|
|
3
3
|
import { X as has, Y as tuple, _ as _functionExports, g as requireSemigroup, O as OptionExports, v as pipe$1, N as chainW, Z as makeRequest, L as fromEither, $ as resolveApiPath, a0 as createInitPostRequest, a1 as Apply, a2 as TaskEitherExports, E as EitherExports } from './Rectangle-dmgo4KMB.js';
|
|
4
4
|
import { i as instance, d as defaultConfig, t as trackEvent, a as isTrackingEnabled } from './store-BJxQCbNV.js';
|
|
5
|
-
import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, o as CAROUSEL_IMAGE_WIDTH_CSS_VAR, p as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, q as CAROUSEL_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, h as getCustomLabels, r as SCROLL_POSITION_TOLERANCE, u as triggerResetFilters, t as triggerFilter, j as announceToScreenReader, m as getIntervalLabel, w as isPriceFilter, k as isSubFilterActive, l as RenderFilterButton, s as syncRequestFilters, P as PlusIcon, x as CUSTOM_LABELS_DELIMITER, v as v4, c as createWidgetEvent, e as createResultEventByType, b as createAddToBasketEvent, d as createAddToWishlistEvent, f as createProductEventByType, y as getRecommendationsBody } from './index-
|
|
5
|
+
import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, o as CAROUSEL_IMAGE_WIDTH_CSS_VAR, p as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, q as CAROUSEL_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, h as getCustomLabels, r as SCROLL_POSITION_TOLERANCE, u as triggerResetFilters, t as triggerFilter, j as announceToScreenReader, m as getIntervalLabel, w as isPriceFilter, k as isSubFilterActive, l as RenderFilterButton, s as syncRequestFilters, P as PlusIcon, x as CUSTOM_LABELS_DELIMITER, v as v4, c as createWidgetEvent, e as createResultEventByType, b as createAddToBasketEvent, d as createAddToWishlistEvent, f as createProductEventByType, y as getRecommendationsBody } from './index-DHNImAac.js';
|
|
6
6
|
import { P as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH, c as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH } from './constants-rqiiCPBX.js';
|
|
7
7
|
import { s as slotChangeListener, a as addEventListenersWithSignal, i as isElementInSelector, S as SlotSkeleton } from './index-OsoUj2Au.js';
|
|
8
8
|
import { o as energyLabelParts, i as initializeLocale, j as extendedFiltersParts, h as filtersParts, q as imageParts, e as contentCardParts, l as listCardParts, p as productCardParts, t as priceRangeParts } from './index-BtnjaTty.js';
|
|
9
9
|
import { r as register, c as configureSwiperElement, s as setupIntersectionObserver } from './swiper-element-Er2KrWw1.js';
|
|
10
|
-
import { r as renderExternalCSS
|
|
10
|
+
import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
|
|
11
|
+
import { o as openProductLink } from './openProductLink-C7_qzUNW.js';
|
|
11
12
|
|
|
12
13
|
const BasketIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
14
|
h("g", { id: "shopping-bag" },
|
|
@@ -2,11 +2,12 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
|
|
|
2
2
|
import { a as divideOnSized, E as EitherExports } from './Rectangle-dmgo4KMB.js';
|
|
3
3
|
import { C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal } from './cropperUtils-CkB6bG3L.js';
|
|
4
4
|
import { g as getSwiperStyles, c as configureSwiperElement, r as register, e as extractSlideIndex, s as setupIntersectionObserver } from './swiper-element-Er2KrWw1.js';
|
|
5
|
-
import { i as isDesktop$1, s as shopTheLookState, m as makeVisualSearchRequest, a as makeVisualSearchByUrlRequest, b as imageFromFileTask, c as makeUploadFileRequest, g as getAcceptableFileFormats } from './search.store-
|
|
5
|
+
import { i as isDesktop$1, s as shopTheLookState, m as makeVisualSearchRequest, a as makeVisualSearchByUrlRequest, b as imageFromFileTask, c as makeUploadFileRequest, g as getAcceptableFileFormats } from './search.store-DUkS1MAq.js';
|
|
6
6
|
import { S as SecondaryActionIcon } from './SecondaryActionIcon-FWFzrhba.js';
|
|
7
7
|
import { i as initializeLocale, a as shopTheLookParts } from './index-BtnjaTty.js';
|
|
8
8
|
import { d as defaultConfig } from './store-BJxQCbNV.js';
|
|
9
|
-
import {
|
|
9
|
+
import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
|
|
10
|
+
import { o as openProductLink } from './openProductLink-C7_qzUNW.js';
|
|
10
11
|
|
|
11
12
|
const UploadActionIconVariant = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
12
13
|
h("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" })));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-RkvPN2Rk.js';
|
|
2
2
|
import { _ as _functionExports, f as fold } from './Rectangle-dmgo4KMB.js';
|
|
3
|
-
import { d as setTextSearchQuery, e as clearAutoSuggestCompletions, f as makeAutoSuggestRequest, v as version, h as campaignTypeNames, j as addIfNotEmpty, k as makeTextSearchRequest, u as useSearchStore } from './search.store-
|
|
3
|
+
import { d as setTextSearchQuery, e as clearAutoSuggestCompletions, f as makeAutoSuggestRequest, v as version, h as campaignTypeNames, j as addIfNotEmpty, k as makeTextSearchRequest, u as useSearchStore } from './search.store-DUkS1MAq.js';
|
|
4
4
|
import { s as slotChangeListener, f as findSlotElements } from './index-OsoUj2Au.js';
|
|
5
5
|
import { i as instance, d as defaultConfig } from './store-BJxQCbNV.js';
|
|
6
6
|
import { i as initializeLocale, b as searchBarParts, s as searchModalFirstScreenParts } from './index-BtnjaTty.js';
|
|
@@ -403,7 +403,7 @@ const VviinnTextSearch = class {
|
|
|
403
403
|
}
|
|
404
404
|
}
|
|
405
405
|
render() {
|
|
406
|
-
return (h(Host, { key: '
|
|
406
|
+
return (h(Host, { key: 'a97f9685f46a30ca9ab12396ee1aa01482731370', exportparts: `${searchBarParts}, ${searchModalFirstScreenParts}` }, h("div", { key: '384e2cc006c0c66b2e50d56631beb538cbaa4f07', class: "text-search-container", part: "text-search-container" }, h("input", Object.assign({ key: '5e571ee58eab698531946a19c5e92fb970340d33', class: "text-search-input", part: "text-search-input", type: "text", placeholder: this.getPlaceholderText(), value: this.state.textSearchQuery || "", onInput: (event) => this.handleInputChange(event), onKeyDown: this.handleKeyDown, onBlur: this.autoSuggestShow ? this.hideSuggestions : undefined }, (this.autoSuggestShow && {
|
|
407
407
|
role: "combobox",
|
|
408
408
|
"aria-autocomplete": "list",
|
|
409
409
|
"aria-expanded": this.autoSuggestCompletions.length > 0 &&
|
|
@@ -414,11 +414,11 @@ const VviinnTextSearch = class {
|
|
|
414
414
|
"aria-activedescendant": this.activeSuggestionIndex >= 0
|
|
415
415
|
? `suggestion-${this.activeSuggestionIndex}`
|
|
416
416
|
: undefined,
|
|
417
|
-
}))), this.mode === "extended" && (h("vviinn-vps-button", Object.assign({ key: '
|
|
417
|
+
}))), this.mode === "extended" && (h("vviinn-vps-button", Object.assign({ key: 'a92908b647b3f07546bfa3e3a15f7306374cd59d', token: this.token, locale: this.locale, apiPath: this.apiPath, addStyle: false, showResultsInModal: false, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams }, (this.exampleImageSource && {
|
|
418
418
|
exampleImageSource: this.exampleImageSource,
|
|
419
|
-
}), (this.cssUrl != null && { cssUrl: this.cssUrl }), (this.visualSearchMode && { mode: this.visualSearchMode }), { parentSlots: this.slots }))), this.mode === "basic" && (h("slot", { key: '
|
|
420
|
-
this.recognition && (h("button", { key: '
|
|
421
|
-
renderSuggestions(this.autoSuggestCompletions, this.state.textSearchQuery, this.activeSuggestionIndex, this.selectSuggestion), this.showTooltip && (h("p", { key: '
|
|
419
|
+
}), (this.cssUrl != null && { cssUrl: this.cssUrl }), (this.visualSearchMode && { mode: this.visualSearchMode }), { parentSlots: this.slots }))), this.mode === "basic" && (h("slot", { key: '06e20a8744dea22ee8bd51d5a1e37b5e29b0b7f4', name: "vviinn-text-search-actions" })), (this.mode === "extended" || this.showInWidget) &&
|
|
420
|
+
this.recognition && (h("button", { key: '1ab2f0acb7137c36231a542234a717e34430474f', class: "speech-button", part: "speech-button", "aria-label": instance.t("a11y.speechButton"), onClick: this.handleSpeech, onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleSpeech) }, h(MicIcon, { key: 'eb97b29086e9e5ad18b1ff6ac9637b760ae2c83a' }), this.isShowRecording() && (h("span", { key: 'dc8cecbb91eaa4a5195727b50919022898630a23', class: "recording-indicator" })))), h("button", { key: 'ebd39b8d86ab47cd4fadda6a5ad30c8001bd8c5a', class: "text-search-button", part: "text-search-button", onClick: () => this.handleTextSearch(), onKeyDown: (event) => this.handleButtonKeyDown(event, this.handleTextSearch), disabled: this.state.searchStatus === "loading", "aria-label": instance.t("a11y.textSearchButton") }, this.isShowPreloader() ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))), this.autoSuggestShow &&
|
|
421
|
+
renderSuggestions(this.autoSuggestCompletions, this.state.textSearchQuery, this.activeSuggestionIndex, this.selectSuggestion), this.showTooltip && (h("p", { key: 'd59b3a49c6bda6b2992e3b0aa7bffb4ef674d3b6', class: "text-search-tooltip", part: "text-search-tooltip" }, instance.t(this.tooltipText)))));
|
|
422
422
|
}
|
|
423
423
|
get el() { return getElement(this); }
|
|
424
424
|
};
|
|
@@ -3,6 +3,7 @@ import { f as findSlotElements, S as SlotSkeleton } from './index-OsoUj2Au.js';
|
|
|
3
3
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-DOMXsA9W.js';
|
|
4
4
|
import { S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from './constants-rqiiCPBX.js';
|
|
5
5
|
import { i as initializeLocale, s as searchModalFirstScreenParts } from './index-BtnjaTty.js';
|
|
6
|
+
import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
|
|
6
7
|
import { i as instance } from './store-BJxQCbNV.js';
|
|
7
8
|
|
|
8
9
|
const SearchModalCameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" },
|
|
@@ -152,7 +153,7 @@ const VviinnVpsButton = class {
|
|
|
152
153
|
}
|
|
153
154
|
render() {
|
|
154
155
|
const { ariaLabel, buttonIcon } = this.getButtonConfig();
|
|
155
|
-
return (h(Host, { key: '
|
|
156
|
+
return (h(Host, { key: '9d0e319edac342158caa501aae1756ade2b92242', role: this.buttonPressed ? undefined : "button", "aria-label": this.buttonPressed ? undefined : ariaLabel, exportparts: `vviinn-button, ${searchModalFirstScreenParts}` }, renderExternalCSS(this.cssUrl), h("vviinn-button", { key: 'f30a55f9bbb705f5a17c925b655fa9210695b18d', addStyle: this.addStyle, part: "vviinn-button", tabindex: this.buttonPressed ? undefined : "0", onClick: this.buttonPressed ? undefined : this.handleActivation, onKeyDown: this.buttonPressed ? undefined : this.handleKeyDown }, h("slot", { key: 'e4fe7e8fe94fde3111836c7d0ae227a9a35fd1f4' }, buttonIcon)), SlotSkeleton("search"), h("vviinn-vps-widget", { key: '981a1866d06c8e35d7a9b211bf9f87ad06b85e42', mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, numberLocale: this.numberLocale, apiPath: this.apiPath, pricePrefix: this.pricePrefix, campaignId: this.campaignId, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton, buttonElementId: this.el.id, active: this.buttonPressed &&
|
|
156
157
|
(this.mode === "modal" || this.mode === "camera"), excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow, autoSuggestShow: this.autoSuggestShow, addToBasketShow: this.addToBasketShow, addPriceContainer: this.addPriceContainer, showIntervalInputs: this.showIntervalInputs, replaceSlotsContentInButton: this.replaceSlotsContent.bind(this), oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, favoriteShow: this.favoriteShow, showResultsInModal: this.showResultsInModal, resultsPageUrl: this.resultsPageUrl, resultsPageParams: this.resultsPageParams, parentSlots: [...this.parentSlots, ...this.slots], cssUrl: this.cssUrl })));
|
|
157
158
|
}
|
|
158
159
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as t,r as e,c as i,H as s,g as o}from"./p-RkvPN2Rk.js";import{_ as r,f as a}from"./p-CrEgr0jU.js";import{d as n,e as h,f as c,v as l,h as d,j as p,k as f,u as g}from"./p-DM6fTGU7.js";import{s as u,f as b}from"./p-DKHkeCw7.js";import{i as x,d as v}from"./p-BJxQCbNV.js";import{i as m,b as y,s as w}from"./p-CPTOq59a.js";import{i as C,b as k,p as S}from"./p-DbOxfJSz.js";const T=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z",fill:"#525252"}),t("path",{d:"M14 12C14 9.24 11.76 7 9 7C6.24 7 4 9.24 4 12C4 14.76 6.24 17 9 17C10.02 17 10.96 16.69 11.75 16.17L16.29 20.71L17.7 19.3L13.16 14.76C13.68 13.97 13.99 13.02 13.99 12.01L14 12ZM9 15C7.35 15 6 13.65 6 12C6 10.35 7.35 9 9 9C10.65 9 12 10.35 12 12C12 13.65 10.65 15 9 15Z",fill:"#525252"})),z=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",width:"24",height:"24","aria-hidden":"true"},t("path",{d:"M12 14C11.1667 14 10.4583 13.7083 9.87501 13.125C9.29168 12.5417 9.00001 11.8333 9.00001 11V5C9.00001 4.16667 9.29168 3.45833 9.87501 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM11 20V17.925C9.46668 17.7083 8.15418 17.0583 7.06251 15.975C5.97085 14.8917 5.30835 13.575 5.07501 12.025C5.04168 11.7417 5.11668 11.5 5.30001 11.3C5.48335 11.1 5.71668 11 6.00001 11C6.28335 11 6.52085 11.0958 6.71251 11.2875C6.90418 11.4792 7.03335 11.7167 7.10001 12C7.33335 13.1667 7.91251 14.125 8.83751 14.875C9.76251 15.625 10.8167 16 12 16C13.2 16 14.2583 15.6208 15.175 14.8625C16.0917 14.1042 16.6667 13.15 16.9 12C16.9667 11.7167 17.0958 11.4792 17.2875 11.2875C17.4792 11.0958 17.7167 11 18 11C18.2833 11 18.5167 11.1 18.7 11.3C18.8833 11.5 18.9583 11.7417 18.925 12.025C18.6917 13.5417 18.0333 14.85 16.95 15.95C15.8667 17.05 14.55 17.7083 13 17.925V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20Z",fill:"#161616"})),j=()=>{var t;const e=window,i=window.navigator,s=i.vendor,o=[void 0!==e.opr,i.userAgent.indexOf("Firefox")>-1,i.userAgent.indexOf("Edg")>-1].some((t=>!0===t)),r=void 0!==i.userAgentData?"Google Chrome"===(null===(t=i.userAgentData.brands[0])||void 0===t?void 0:t.brand):"Google Inc."===s;return{forbiddenBrowser:o,isChrome:r,isSafari:i.userAgent.indexOf("Safari")>-1&&!r}},I=class{constructor(t){e(this,t),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished"),this.vviinnFilterTriggered=i(this,"vviinnFilterTriggered"),this.vviinnTextSearchStarted=i(this,"vviinnTextSearchStarted"),this.widgetTextSearchFinished=i(this,"widgetTextSearchFinished"),this.vviinnSelectedFiltersReset=i(this,"vviinnSelectedFiltersReset"),this.vviinnNoResult=i(this,"vviinnNoResult"),this.vviinnRedirect=i(this,"vviinnRedirect"),this.mode="basic",this.placeholder="",this.autoSuggestShow=!1,this.showInWidget=!1,this.showOnFirstScreen=!1,this.isRecording=!1,this.showTooltip=!1,this.autoSuggestCompletions=[],this.activeSuggestionIndex=-1,this.originalQuery="",this.searchSubmitted=!1,this.slots=[],this.isShowPreloader=()=>"loading"===this.state.searchStatus&&"text"===this.state.searchType,this.isShowRecording=()=>this.isRecording,this.showRecording=()=>this.isRecording=!0,this.hideRecording=()=>this.isRecording=!1,this.setShowTooltip=t=>{this.showTooltip=t},this.tooltipText=(()=>{const{isSafari:t}=j();return t?"speechRecognition.tooltip.siri":"speechRecognition.tooltip.general"})(),this.getPlaceholderText=()=>this.isShowRecording()?x.t("speechRecognition.placeholder"):this.placeholder.length?this.placeholder:x.t("textSearchPlaceholder"),this.recognition=null,this.trackTextSearch=()=>this.vviinnFilterTriggered.emit({kind:this.state.textSearchQuery,action:"select",customTrigger:"TPS",isTriggeredByVpsWidget:this.showInWidget}),this.getBasicEventData=()=>this.showInWidget&&this.basicEventData?this.basicEventData:Object.assign({campaignTypeId:"TPS",campaignTypeName:d.TPS,widgetVersion:l},p("widgetId",this.el.id)),this.handleSpeech=async()=>{this.recognition&&(this.isRecording?(this.recognition.stop(),this.hideRecording(),this.setShowTooltip(!1)):(this.recognition.start(),n(this.storeName,null),this.triggerTooltipStart=setTimeout((()=>{this.isRecording||(this.setShowTooltip(!0),this.triggerTooltipEnd=setTimeout((()=>{this.setShowTooltip(!1)}),5e3))}),1e3)))},this.hideSuggestions=()=>{h(this.storeName)},this.selectSuggestion=t=>{if(n(this.storeName,t.suggestion),this.hideSuggestions(),t.url)return this.trackTextSearch(),void this.handleTextSearchRedirect(t.url,"auto-suggest",t.suggestion);this.handleTextSearch(!0)},this.handleTextSearch=async(t=!1)=>{var e;const i=this.state.textSearchQuery;if(!i)return;this.searchSubmitted=!0,null===(e=this.autoSuggestHandler)||void 0===e||e.cancelPending(),this.hideSuggestions(),t||(await this.checkAutoSuggest(i),this.hideSuggestions()),this.trackTextSearch();const s=this.state.redirect;if((null==s?void 0:s.url)&&s.query===i)this.handleTextSearchRedirect(s.url,"auto-suggest",i);else if(!this.resultsPageUrl||this.showInWidget||C(this.resultsPageUrl))this.vviinnTextSearchStarted.emit({query:i,isTriggeredByVpsWidget:this.showInWidget}),this.showInWidget&&this.showOnFirstScreen&&r.pipe(await f(this.storeName,i,this.token,this.apiPath),a((()=>{this.vviinnNoResult.emit(this.getBasicEventData())}),(t=>{this.widgetTextSearchFinished.emit({query:i,requestId:t.requestId}),this.vviinnSelectedFiltersReset.emit({isTriggeredByVpsWidget:this.showInWidget})})));else{const t=k(this.resultsPageUrl,i,S(this.resultsPageParams).query);this.handleTextSearchRedirect(t,"text-search",i)}},this.checkAutoSuggest=async t=>{r.pipe(await c(this.storeName,t,this.token,this.apiPath),a((()=>{}),(()=>{})))},this.handleKeyDown=t=>{this.autoSuggestShow?((t,e)=>{const{completions:i,activeSuggestionIndex:s,originalQuery:o,storeName:r,textSearchQuery:a,onActiveIndexChange:h,onOriginalQueryChange:c,onSelectSuggestion:l,onHideSuggestions:d,onSearch:p}=e,f=i.length>0;switch(t.key){case"ArrowDown":if(f){t.preventDefault(),-1===s&&c(a);const e=Math.min(s+1,i.length-1);h(e),n(r,i[e].suggestion)}break;case"ArrowUp":if(f&&s>-1){t.preventDefault();const e=s-1;h(e),n(r,-1===e?o:i[e].suggestion)}break;case"Escape":d();break;case"Enter":f&&s>=0?(t.preventDefault(),l(i[s])):p()}})(t,{completions:this.autoSuggestCompletions,activeSuggestionIndex:this.activeSuggestionIndex,originalQuery:this.originalQuery,storeName:this.storeName,textSearchQuery:this.state.textSearchQuery,onActiveIndexChange:t=>this.activeSuggestionIndex=t,onOriginalQueryChange:t=>this.originalQuery=t,onSelectSuggestion:this.selectSuggestion,onHideSuggestions:this.hideSuggestions,onSearch:this.handleTextSearch}):"Enter"===t.key&&this.handleTextSearch()},this.handleButtonKeyDown=(t,e)=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e())}}connectedCallback(){const{state:t,storeName:e,onChange:i}=g(this.showInWidget);this.state=t,this.storeName=e,this.autoSuggestShow&&(this.disposeOnChange=i("autoSuggestCompletions",(t=>{this.searchSubmitted&&t.length>0||(this.autoSuggestCompletions=t,this.activeSuggestionIndex=-1)})))}disconnectedCallback(){var t,e;clearTimeout(this.triggerTooltipStart),clearTimeout(this.triggerTooltipEnd),null===(t=this.autoSuggestHandler)||void 0===t||t.cleanup(),null===(e=this.disposeOnChange)||void 0===e||e.call(this)}async componentWillLoad(){var t,e,i;await m(this.locale),u(this,this.el),this.slots=b(this.el),this.autoSuggestShow&&(this.autoSuggestHandler=((t,e,i)=>{let s;const o=()=>clearTimeout(s);return{handleInputChange:o=>{n(t,o),clearTimeout(s),o?s=setTimeout((()=>{c(t,o,e,i)}),300):h(t)},cancelPending:o,cleanup:o}})(this.storeName,this.token,this.apiPath)),this.recognition=((t,e,i,s)=>{const o=(()=>{const t=window,e=t.webkitSpeechRecognition||t.SpeechRecognition;if(!e)return;const{forbiddenBrowser:i,isChrome:s,isSafari:o}=j();return i?void 0:s||o?e:void 0})();if(!o)return;const r=new o;let a;return r.interimResults=!1,r.maxAlternatives=1,r.continuous=!1,r.lang=t,r.onstart=()=>{e(),a=setTimeout((()=>{r.stop()}),1e4)},r.onspeechend=()=>{r.stop(),i(),clearTimeout(a)},r.onend=i,r.onresult=t=>{s(t.results[0][0].transcript)},r})(null!==(t=this.locale)&&void 0!==t?t:v.locale,(()=>{this.showRecording(),this.setShowTooltip(!1),clearTimeout(this.triggerTooltipStart)}),this.hideRecording,(t=>{n(this.storeName,t),this.handleTextSearch()})),(null===(e=this.searchQuery)||void 0===e?void 0:e.length)>0&&n(this.storeName,this.searchQuery),!this.showInWidget&&(null===(i=this.searchQuery)||void 0===i?void 0:i.length)>0&&(this.vviinnTextSearchStarted.emit({query:this.searchQuery,isTriggeredByVpsWidget:this.showInWidget}),this.trackTextSearch())}handleInputChange(t){this.searchSubmitted=!1;const e=t.target.value;this.autoSuggestShow?this.autoSuggestHandler.handleInputChange(e):n(this.storeName,e)}handleTextSearchRedirect(t,e,i){const s=Object.assign(Object.assign({},this.getBasicEventData()),{url:t,source:e,query:i});this.vviinnRedirect.emit(s).defaultPrevented?this.state.redirect=null:window.location.href=t}render(){return t(s,{key:"34d054620af49581af6c5038ccb24fc983394d84",exportparts:`${y}, ${w}`},t("div",{key:"b63cd15fffa92ce9f2783107702b293c087350b3",class:"text-search-container",part:"text-search-container"},t("input",Object.assign({key:"dcb2a15f10e3ce65c5e154472179943a8a2732ea",class:"text-search-input",part:"text-search-input",type:"text",placeholder:this.getPlaceholderText(),value:this.state.textSearchQuery||"",onInput:t=>this.handleInputChange(t),onKeyDown:this.handleKeyDown,onBlur:this.autoSuggestShow?this.hideSuggestions:void 0},this.autoSuggestShow&&{role:"combobox","aria-autocomplete":"list","aria-expanded":this.autoSuggestCompletions.length>0&&this.state.textSearchQuery?"true":"false","aria-controls":"suggestions-listbox","aria-activedescendant":this.activeSuggestionIndex>=0?`suggestion-${this.activeSuggestionIndex}`:void 0})),"extended"===this.mode&&t("vviinn-vps-button",Object.assign({key:"0102857f6f6f800687f17ace2d90aee1d14cb3eb",token:this.token,locale:this.locale,apiPath:this.apiPath,addStyle:!1,showResultsInModal:!1,resultsPageUrl:this.resultsPageUrl,resultsPageParams:this.resultsPageParams},this.exampleImageSource&&{exampleImageSource:this.exampleImageSource},null!=this.cssUrl&&{cssUrl:this.cssUrl},this.visualSearchMode&&{mode:this.visualSearchMode},{parentSlots:this.slots})),"basic"===this.mode&&t("slot",{key:"2be782a7f2ec3ec21809c9075f495ca4ed3167e8",name:"vviinn-text-search-actions"}),("extended"===this.mode||this.showInWidget)&&this.recognition&&t("button",{key:"8711e6f5dd1412cef9d9e655f2f9b0e5bebd3272",class:"speech-button",part:"speech-button","aria-label":x.t("a11y.speechButton"),onClick:this.handleSpeech,onKeyDown:t=>this.handleButtonKeyDown(t,this.handleSpeech)},t(z,{key:"66f8b01114ed126495208d6db96050d39a6924f9"}),this.isShowRecording()&&t("span",{key:"afa850af213c41a356aa09dc712e91cf425a4f79",class:"recording-indicator"})),t("button",{key:"8ce59d9f6214e8db235910359069c005066d4a83",class:"text-search-button",part:"text-search-button",onClick:()=>this.handleTextSearch(),onKeyDown:t=>this.handleButtonKeyDown(t,this.handleTextSearch),disabled:"loading"===this.state.searchStatus,"aria-label":x.t("a11y.textSearchButton")},this.isShowPreloader()?t("vviinn-preloader",null):t("slot",{name:"vviinn-text-search-icon"},t(T,null)))),this.autoSuggestShow&&(i=this.state.textSearchQuery,o=this.activeSuggestionIndex,r=this.selectSuggestion,(e=this.autoSuggestCompletions).length&&i?t("ul",{class:"suggestions-container",part:"suggestions-container",role:"listbox",id:"suggestions-listbox"},e.map(((e,s)=>t("li",{id:`suggestion-${s}`,class:{"suggestion-item":!0,"suggestion-item--active":s===o},part:"suggestion-item",role:"option","aria-selected":s===o?"true":"false",onMouseDown:t=>{t.preventDefault(),r(e)}},((e,i)=>{const s=e.toLowerCase(),o=i.toLowerCase(),r=s.indexOf(o);if(-1===r)return e;const a=e.slice(0,r),n=e.slice(r,r+i.length),h=e.slice(r+i.length);return[a,t("span",{class:"suggestion-highlight"},n),h]})(e.suggestion,i))))):null),this.showTooltip&&t("p",{key:"f82df73e88ba1dbf4c86bb1aa56c9a921ab76ee0",class:"text-search-tooltip",part:"text-search-tooltip"},x.t(this.tooltipText)));var e,i,o,r}get el(){return o(this)}};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;position:relative;width:100%;}.text-search-container{display:flex;align-items:center;gap:var(--spacing-50);width:100%;height:46px;border:1px solid var(--color-border-02);border-radius:8px;transition:border-color 0.2s;overflow:hidden;box-sizing:border-box}.text-search-container:focus-within{border-color:#8d8d8d}.text-search-input,.text-search-tooltip{font-size:16px;font-style:normal;font-weight:400;font-family:var(--font-family, var(--font-family-base))}.text-search-input{height:100%;padding-left:16px;box-sizing:border-box;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;flex-grow:2;width:150px}.text-search-input::-moz-placeholder{color:#a8a8a8}.text-search-input::placeholder{color:#a8a8a8}.text-search-input:focus,.text-search-input:active{border-color:#8d8d8d}vviinn-vps-button{height:100%}.text-search-button,.speech-button,vviinn-vps-button::part(vviinn-button){border:none;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer}.speech-button,vviinn-vps-button::part(vviinn-button){padding:0 8px}.upload-button-text{display:contents}.text-search-button{background-color:#f4f4f4;transition:background-color 0.2s;aspect-ratio:1 / 1;border-radius:0 7px 7px 0}.speech-button{background-color:transparent;position:relative}@keyframes recordingSpeech{0%{background-color:#ff0000;scale:1}100%{background-color:#ff8888;scale:1.5}}.recording-indicator{border-radius:50%;width:8px;height:8px;left:24px;top:24px;background-color:#ff0000;position:absolute;animation:recordingSpeech 1s infinite alternate ease-in-out}@keyframes fade-out{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;display:none}}.text-search-tooltip{position:absolute;right:0;top:80%;background:#f4f4f4;animation:fade-out 5s forwards;width:-moz-fit-content;width:fit-content;padding:24px;border-radius:8px;border:1px solid #8d8d8d;box-sizing:border-box}.text-search-button:not(:disabled):hover{background-color:#e0e0e0}.text-search-button:disabled{cursor:unset}vviinn-image-selector,::slotted([slot="vviinn-text-search-actions"]){margin:auto 8px}vviinn-preloader{--preloader-size:16px;display:flex;color:#525252}.suggestions-container{position:absolute;top:100%;left:0;right:0;margin:var(--spacing-50) 0 0;padding:4px;list-style:none;background:#ffffff;border:1px solid #fafafa;border-radius:8px;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.08);box-sizing:border-box;z-index:10}.suggestion-item{padding:4px 8px;border-radius:4px;font-size:16px;line-height:normal;font-weight:400;font-family:var(--font-family, var(--font-family-base));cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-item:hover,.suggestion-item--active{background-color:#f4f4f4}.suggestion-highlight{font-weight:500}';export{I as vviinn_text_search}
|
|
1
|
+
import{h as t,r as e,c as i,H as s,g as o}from"./p-RkvPN2Rk.js";import{_ as r,f as a}from"./p-CrEgr0jU.js";import{d as n,e as h,f as c,v as l,h as d,j as p,k as f,u as g}from"./p-DXT8Rt8G.js";import{s as b,f as u}from"./p-DKHkeCw7.js";import{i as x,d as v}from"./p-BJxQCbNV.js";import{i as m,b as y,s as w}from"./p-CPTOq59a.js";import{i as C,b as k,p as S}from"./p-DbOxfJSz.js";const T=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z",fill:"#525252"}),t("path",{d:"M14 12C14 9.24 11.76 7 9 7C6.24 7 4 9.24 4 12C4 14.76 6.24 17 9 17C10.02 17 10.96 16.69 11.75 16.17L16.29 20.71L17.7 19.3L13.16 14.76C13.68 13.97 13.99 13.02 13.99 12.01L14 12ZM9 15C7.35 15 6 13.65 6 12C6 10.35 7.35 9 9 9C10.65 9 12 10.35 12 12C12 13.65 10.65 15 9 15Z",fill:"#525252"})),z=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",width:"24",height:"24","aria-hidden":"true"},t("path",{d:"M12 14C11.1667 14 10.4583 13.7083 9.87501 13.125C9.29168 12.5417 9.00001 11.8333 9.00001 11V5C9.00001 4.16667 9.29168 3.45833 9.87501 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5V11C15 11.8333 14.7083 12.5417 14.125 13.125C13.5417 13.7083 12.8333 14 12 14ZM11 20V17.925C9.46668 17.7083 8.15418 17.0583 7.06251 15.975C5.97085 14.8917 5.30835 13.575 5.07501 12.025C5.04168 11.7417 5.11668 11.5 5.30001 11.3C5.48335 11.1 5.71668 11 6.00001 11C6.28335 11 6.52085 11.0958 6.71251 11.2875C6.90418 11.4792 7.03335 11.7167 7.10001 12C7.33335 13.1667 7.91251 14.125 8.83751 14.875C9.76251 15.625 10.8167 16 12 16C13.2 16 14.2583 15.6208 15.175 14.8625C16.0917 14.1042 16.6667 13.15 16.9 12C16.9667 11.7167 17.0958 11.4792 17.2875 11.2875C17.4792 11.0958 17.7167 11 18 11C18.2833 11 18.5167 11.1 18.7 11.3C18.8833 11.5 18.9583 11.7417 18.925 12.025C18.6917 13.5417 18.0333 14.85 16.95 15.95C15.8667 17.05 14.55 17.7083 13 17.925V20C13 20.2833 12.9042 20.5208 12.7125 20.7125C12.5208 20.9042 12.2833 21 12 21C11.7167 21 11.4792 20.9042 11.2875 20.7125C11.0958 20.5208 11 20.2833 11 20Z",fill:"#161616"})),j=()=>{var t;const e=window,i=window.navigator,s=i.vendor,o=[void 0!==e.opr,i.userAgent.indexOf("Firefox")>-1,i.userAgent.indexOf("Edg")>-1].some((t=>!0===t)),r=void 0!==i.userAgentData?"Google Chrome"===(null===(t=i.userAgentData.brands[0])||void 0===t?void 0:t.brand):"Google Inc."===s;return{forbiddenBrowser:o,isChrome:r,isSafari:i.userAgent.indexOf("Safari")>-1&&!r}},I=class{constructor(t){e(this,t),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished"),this.vviinnFilterTriggered=i(this,"vviinnFilterTriggered"),this.vviinnTextSearchStarted=i(this,"vviinnTextSearchStarted"),this.widgetTextSearchFinished=i(this,"widgetTextSearchFinished"),this.vviinnSelectedFiltersReset=i(this,"vviinnSelectedFiltersReset"),this.vviinnNoResult=i(this,"vviinnNoResult"),this.vviinnRedirect=i(this,"vviinnRedirect"),this.mode="basic",this.placeholder="",this.autoSuggestShow=!1,this.showInWidget=!1,this.showOnFirstScreen=!1,this.isRecording=!1,this.showTooltip=!1,this.autoSuggestCompletions=[],this.activeSuggestionIndex=-1,this.originalQuery="",this.searchSubmitted=!1,this.slots=[],this.isShowPreloader=()=>"loading"===this.state.searchStatus&&"text"===this.state.searchType,this.isShowRecording=()=>this.isRecording,this.showRecording=()=>this.isRecording=!0,this.hideRecording=()=>this.isRecording=!1,this.setShowTooltip=t=>{this.showTooltip=t},this.tooltipText=(()=>{const{isSafari:t}=j();return t?"speechRecognition.tooltip.siri":"speechRecognition.tooltip.general"})(),this.getPlaceholderText=()=>this.isShowRecording()?x.t("speechRecognition.placeholder"):this.placeholder.length?this.placeholder:x.t("textSearchPlaceholder"),this.recognition=null,this.trackTextSearch=()=>this.vviinnFilterTriggered.emit({kind:this.state.textSearchQuery,action:"select",customTrigger:"TPS",isTriggeredByVpsWidget:this.showInWidget}),this.getBasicEventData=()=>this.showInWidget&&this.basicEventData?this.basicEventData:Object.assign({campaignTypeId:"TPS",campaignTypeName:d.TPS,widgetVersion:l},p("widgetId",this.el.id)),this.handleSpeech=async()=>{this.recognition&&(this.isRecording?(this.recognition.stop(),this.hideRecording(),this.setShowTooltip(!1)):(this.recognition.start(),n(this.storeName,null),this.triggerTooltipStart=setTimeout((()=>{this.isRecording||(this.setShowTooltip(!0),this.triggerTooltipEnd=setTimeout((()=>{this.setShowTooltip(!1)}),5e3))}),1e3)))},this.hideSuggestions=()=>{h(this.storeName)},this.selectSuggestion=t=>{if(n(this.storeName,t.suggestion),this.hideSuggestions(),t.url)return this.trackTextSearch(),void this.handleTextSearchRedirect(t.url,"auto-suggest",t.suggestion);this.handleTextSearch(!0)},this.handleTextSearch=async(t=!1)=>{var e;const i=this.state.textSearchQuery;if(!i)return;this.searchSubmitted=!0,null===(e=this.autoSuggestHandler)||void 0===e||e.cancelPending(),this.hideSuggestions(),t||(await this.checkAutoSuggest(i),this.hideSuggestions()),this.trackTextSearch();const s=this.state.redirect;if((null==s?void 0:s.url)&&s.query===i)this.handleTextSearchRedirect(s.url,"auto-suggest",i);else if(!this.resultsPageUrl||this.showInWidget||C(this.resultsPageUrl))this.vviinnTextSearchStarted.emit({query:i,isTriggeredByVpsWidget:this.showInWidget}),this.showInWidget&&this.showOnFirstScreen&&r.pipe(await f(this.storeName,i,this.token,this.apiPath),a((()=>{this.vviinnNoResult.emit(this.getBasicEventData())}),(t=>{this.widgetTextSearchFinished.emit({query:i,requestId:t.requestId}),this.vviinnSelectedFiltersReset.emit({isTriggeredByVpsWidget:this.showInWidget})})));else{const t=k(this.resultsPageUrl,i,S(this.resultsPageParams).query);this.handleTextSearchRedirect(t,"text-search",i)}},this.checkAutoSuggest=async t=>{r.pipe(await c(this.storeName,t,this.token,this.apiPath),a((()=>{}),(()=>{})))},this.handleKeyDown=t=>{this.autoSuggestShow?((t,e)=>{const{completions:i,activeSuggestionIndex:s,originalQuery:o,storeName:r,textSearchQuery:a,onActiveIndexChange:h,onOriginalQueryChange:c,onSelectSuggestion:l,onHideSuggestions:d,onSearch:p}=e,f=i.length>0;switch(t.key){case"ArrowDown":if(f){t.preventDefault(),-1===s&&c(a);const e=Math.min(s+1,i.length-1);h(e),n(r,i[e].suggestion)}break;case"ArrowUp":if(f&&s>-1){t.preventDefault();const e=s-1;h(e),n(r,-1===e?o:i[e].suggestion)}break;case"Escape":d();break;case"Enter":f&&s>=0?(t.preventDefault(),l(i[s])):p()}})(t,{completions:this.autoSuggestCompletions,activeSuggestionIndex:this.activeSuggestionIndex,originalQuery:this.originalQuery,storeName:this.storeName,textSearchQuery:this.state.textSearchQuery,onActiveIndexChange:t=>this.activeSuggestionIndex=t,onOriginalQueryChange:t=>this.originalQuery=t,onSelectSuggestion:this.selectSuggestion,onHideSuggestions:this.hideSuggestions,onSearch:this.handleTextSearch}):"Enter"===t.key&&this.handleTextSearch()},this.handleButtonKeyDown=(t,e)=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e())}}connectedCallback(){const{state:t,storeName:e,onChange:i}=g(this.showInWidget);this.state=t,this.storeName=e,this.autoSuggestShow&&(this.disposeOnChange=i("autoSuggestCompletions",(t=>{this.searchSubmitted&&t.length>0||(this.autoSuggestCompletions=t,this.activeSuggestionIndex=-1)})))}disconnectedCallback(){var t,e;clearTimeout(this.triggerTooltipStart),clearTimeout(this.triggerTooltipEnd),null===(t=this.autoSuggestHandler)||void 0===t||t.cleanup(),null===(e=this.disposeOnChange)||void 0===e||e.call(this)}async componentWillLoad(){var t,e,i;await m(this.locale),b(this,this.el),this.slots=u(this.el),this.autoSuggestShow&&(this.autoSuggestHandler=((t,e,i)=>{let s;const o=()=>clearTimeout(s);return{handleInputChange:o=>{n(t,o),clearTimeout(s),o?s=setTimeout((()=>{c(t,o,e,i)}),300):h(t)},cancelPending:o,cleanup:o}})(this.storeName,this.token,this.apiPath)),this.recognition=((t,e,i,s)=>{const o=(()=>{const t=window,e=t.webkitSpeechRecognition||t.SpeechRecognition;if(!e)return;const{forbiddenBrowser:i,isChrome:s,isSafari:o}=j();return i?void 0:s||o?e:void 0})();if(!o)return;const r=new o;let a;return r.interimResults=!1,r.maxAlternatives=1,r.continuous=!1,r.lang=t,r.onstart=()=>{e(),a=setTimeout((()=>{r.stop()}),1e4)},r.onspeechend=()=>{r.stop(),i(),clearTimeout(a)},r.onend=i,r.onresult=t=>{s(t.results[0][0].transcript)},r})(null!==(t=this.locale)&&void 0!==t?t:v.locale,(()=>{this.showRecording(),this.setShowTooltip(!1),clearTimeout(this.triggerTooltipStart)}),this.hideRecording,(t=>{n(this.storeName,t),this.handleTextSearch()})),(null===(e=this.searchQuery)||void 0===e?void 0:e.length)>0&&n(this.storeName,this.searchQuery),!this.showInWidget&&(null===(i=this.searchQuery)||void 0===i?void 0:i.length)>0&&(this.vviinnTextSearchStarted.emit({query:this.searchQuery,isTriggeredByVpsWidget:this.showInWidget}),this.trackTextSearch())}handleInputChange(t){this.searchSubmitted=!1;const e=t.target.value;this.autoSuggestShow?this.autoSuggestHandler.handleInputChange(e):n(this.storeName,e)}handleTextSearchRedirect(t,e,i){const s=Object.assign(Object.assign({},this.getBasicEventData()),{url:t,source:e,query:i});this.vviinnRedirect.emit(s).defaultPrevented?this.state.redirect=null:window.location.href=t}render(){return t(s,{key:"a97f9685f46a30ca9ab12396ee1aa01482731370",exportparts:`${y}, ${w}`},t("div",{key:"384e2cc006c0c66b2e50d56631beb538cbaa4f07",class:"text-search-container",part:"text-search-container"},t("input",Object.assign({key:"5e571ee58eab698531946a19c5e92fb970340d33",class:"text-search-input",part:"text-search-input",type:"text",placeholder:this.getPlaceholderText(),value:this.state.textSearchQuery||"",onInput:t=>this.handleInputChange(t),onKeyDown:this.handleKeyDown,onBlur:this.autoSuggestShow?this.hideSuggestions:void 0},this.autoSuggestShow&&{role:"combobox","aria-autocomplete":"list","aria-expanded":this.autoSuggestCompletions.length>0&&this.state.textSearchQuery?"true":"false","aria-controls":"suggestions-listbox","aria-activedescendant":this.activeSuggestionIndex>=0?`suggestion-${this.activeSuggestionIndex}`:void 0})),"extended"===this.mode&&t("vviinn-vps-button",Object.assign({key:"a92908b647b3f07546bfa3e3a15f7306374cd59d",token:this.token,locale:this.locale,apiPath:this.apiPath,addStyle:!1,showResultsInModal:!1,resultsPageUrl:this.resultsPageUrl,resultsPageParams:this.resultsPageParams},this.exampleImageSource&&{exampleImageSource:this.exampleImageSource},null!=this.cssUrl&&{cssUrl:this.cssUrl},this.visualSearchMode&&{mode:this.visualSearchMode},{parentSlots:this.slots})),"basic"===this.mode&&t("slot",{key:"06e20a8744dea22ee8bd51d5a1e37b5e29b0b7f4",name:"vviinn-text-search-actions"}),("extended"===this.mode||this.showInWidget)&&this.recognition&&t("button",{key:"1ab2f0acb7137c36231a542234a717e34430474f",class:"speech-button",part:"speech-button","aria-label":x.t("a11y.speechButton"),onClick:this.handleSpeech,onKeyDown:t=>this.handleButtonKeyDown(t,this.handleSpeech)},t(z,{key:"eb97b29086e9e5ad18b1ff6ac9637b760ae2c83a"}),this.isShowRecording()&&t("span",{key:"dc8cecbb91eaa4a5195727b50919022898630a23",class:"recording-indicator"})),t("button",{key:"ebd39b8d86ab47cd4fadda6a5ad30c8001bd8c5a",class:"text-search-button",part:"text-search-button",onClick:()=>this.handleTextSearch(),onKeyDown:t=>this.handleButtonKeyDown(t,this.handleTextSearch),disabled:"loading"===this.state.searchStatus,"aria-label":x.t("a11y.textSearchButton")},this.isShowPreloader()?t("vviinn-preloader",null):t("slot",{name:"vviinn-text-search-icon"},t(T,null)))),this.autoSuggestShow&&(i=this.state.textSearchQuery,o=this.activeSuggestionIndex,r=this.selectSuggestion,(e=this.autoSuggestCompletions).length&&i?t("ul",{class:"suggestions-container",part:"suggestions-container",role:"listbox",id:"suggestions-listbox"},e.map(((e,s)=>t("li",{id:`suggestion-${s}`,class:{"suggestion-item":!0,"suggestion-item--active":s===o},part:"suggestion-item",role:"option","aria-selected":s===o?"true":"false",onMouseDown:t=>{t.preventDefault(),r(e)}},((e,i)=>{const s=e.toLowerCase(),o=i.toLowerCase(),r=s.indexOf(o);if(-1===r)return e;const a=e.slice(0,r),n=e.slice(r,r+i.length),h=e.slice(r+i.length);return[a,t("span",{class:"suggestion-highlight"},n),h]})(e.suggestion,i))))):null),this.showTooltip&&t("p",{key:"d59b3a49c6bda6b2992e3b0aa7bffb4ef674d3b6",class:"text-search-tooltip",part:"text-search-tooltip"},x.t(this.tooltipText)));var e,i,o,r}get el(){return o(this)}};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;position:relative;width:100%;}.text-search-container{display:flex;align-items:center;gap:var(--spacing-50);width:100%;height:46px;border:1px solid var(--color-border-02);border-radius:8px;transition:border-color 0.2s;overflow:hidden;box-sizing:border-box}.text-search-container:focus-within{border-color:#8d8d8d}.text-search-input,.text-search-tooltip{font-size:16px;font-style:normal;font-weight:400;font-family:var(--font-family, var(--font-family-base))}.text-search-input{height:100%;padding-left:16px;box-sizing:border-box;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;flex-grow:2;width:150px}.text-search-input::-moz-placeholder{color:#a8a8a8}.text-search-input::placeholder{color:#a8a8a8}.text-search-input:focus,.text-search-input:active{border-color:#8d8d8d}vviinn-vps-button{height:100%}.text-search-button,.speech-button,vviinn-vps-button::part(vviinn-button){border:none;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer}.speech-button,vviinn-vps-button::part(vviinn-button){padding:0 8px}.upload-button-text{display:contents}.text-search-button{background-color:#f4f4f4;transition:background-color 0.2s;aspect-ratio:1 / 1;border-radius:0 7px 7px 0}.speech-button{background-color:transparent;position:relative}@keyframes recordingSpeech{0%{background-color:#ff0000;scale:1}100%{background-color:#ff8888;scale:1.5}}.recording-indicator{border-radius:50%;width:8px;height:8px;left:24px;top:24px;background-color:#ff0000;position:absolute;animation:recordingSpeech 1s infinite alternate ease-in-out}@keyframes fade-out{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;display:none}}.text-search-tooltip{position:absolute;right:0;top:80%;background:#f4f4f4;animation:fade-out 5s forwards;width:-moz-fit-content;width:fit-content;padding:24px;border-radius:8px;border:1px solid #8d8d8d;box-sizing:border-box}.text-search-button:not(:disabled):hover{background-color:#e0e0e0}.text-search-button:disabled{cursor:unset}vviinn-image-selector,::slotted([slot="vviinn-text-search-actions"]){margin:auto 8px}vviinn-preloader{--preloader-size:16px;display:flex;color:#525252}.suggestions-container{position:absolute;top:100%;left:0;right:0;margin:var(--spacing-50) 0 0;padding:4px;list-style:none;background:#ffffff;border:1px solid #fafafa;border-radius:8px;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.08);box-sizing:border-box;z-index:10}.suggestion-item{padding:4px 8px;border-radius:4px;font-size:16px;line-height:normal;font-weight:400;font-family:var(--font-family, var(--font-family-base));cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-item:hover,.suggestion-item--active{background-color:#f4f4f4}.suggestion-highlight{font-weight:500}';export{I as vviinn_text_search}
|
|
@@ -0,0 +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-DXT8Rt8G.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{r as O}from"./p-D3wRLf2J.js";import{o as T}from"./p-C7_qzUNW.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 z{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 V=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||V(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}},R=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}`)}},$=(t,e)=>[...t,...e&&e.trim()?e.split(",").map((t=>t.trim())).filter((t=>t.length>0)):[]],A=t=>({detectedObjects:[],searchCompleted:!1,searchResults:[],isVisible:!1,imageElement:t||null,imageBounds:null,visualSearchId:null,searchTriggered:!1,observerSetup:!1,refProcessed:!1});class E{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,A()),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=V(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 L=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 R(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=A(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 R(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=$(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:L(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:L(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)&&T(a.deeplink,s,this.productDetailsRedirect,this.productDetailsNewTab)}async componentWillLoad(){await S(this.locale),this.imageUrlsList=$(this.uploadedImageUrls,this.imageUrls),this.totalImages=this.imageUrlsList.length,this.currentViewMode=M()?"desktop":"mobile",this.updateNavigationVisibility();M();this.imageStore=new E({threshold:.01,token:this.token,isWidgetVisible:this.isWidgetVisible,totalImages:this.totalImages,isModalOpen:this.showModal,onVisualSearchTrigger:this.handleVisualSearchTrigger.bind(this)}),this.showCropper&&(this.cropperManager=new z({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 V(t)}return null}getStoreBounds(t){const e=this.imageStore.getImageElement(t);return e&&e.offsetWidth>0?V(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]?V(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},O(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}
|