vviinn-widgets 2.4.2 → 2.4.3
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/Handler-d1a8a86a.js +329 -0
- package/dist/cjs/{app-globals-d999d944.js → app-globals-474864e0.js} +1 -1
- package/dist/cjs/cropper-handler.cjs.entry.js +27 -0
- package/dist/cjs/{customized-slots-90e8e849.js → customized-slots-0aa6c3d6.js} +1 -1
- package/dist/cjs/{cropper-handler_27.cjs.entry.js → highlight-box_22.cjs.entry.js} +85 -469
- package/dist/cjs/{index-c0d08aca.js → imageSearch.store-076370bf.js} +10575 -14822
- package/dist/cjs/index-34d20028.js +3222 -0
- package/dist/cjs/{index-e8cf5dc5.js → index-61403ab1.js} +1 -1
- package/dist/cjs/{index-53400160.js → index-a87f1a44.js} +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{vviinn-carousel_2.cjs.entry.js → vviinn-carousel_3.cjs.entry.js} +212 -25
- package/dist/cjs/vviinn-error.cjs.entry.js +19 -0
- package/dist/cjs/vviinn-preloader.cjs.entry.js +26 -0
- package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +162 -0
- package/dist/cjs/vviinn-widgets.cjs.js +3 -3
- package/dist/collection/components/image-search/search-filters/search-filters.js +1 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +3 -0
- package/dist/collection/openApi/index.js +1 -1
- package/dist/esm/Handler-639a4cb3.js +308 -0
- package/dist/esm/{app-globals-f91c6f94.js → app-globals-3888cd41.js} +1 -1
- package/dist/esm/cropper-handler.entry.js +23 -0
- package/dist/esm/{customized-slots-7be7f3b8.js → customized-slots-863113e2.js} +1 -1
- package/dist/esm/{cropper-handler_27.entry.js → highlight-box_22.entry.js} +21 -400
- package/dist/esm/{index-840ec915.js → imageSearch.store-b516d12e.js} +10749 -14986
- package/dist/esm/index-2f8fb0fe.js +3213 -0
- package/dist/esm/{index-00c7b7c2.js → index-36978848.js} +2 -2
- package/dist/esm/{index-d7147986.js → index-56c062df.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{vviinn-carousel_2.entry.js → vviinn-carousel_3.entry.js} +190 -4
- package/dist/esm/vviinn-error.entry.js +15 -0
- package/dist/esm/vviinn-preloader.entry.js +22 -0
- package/dist/esm/vviinn-recommendations-sidebar.entry.js +2 -2
- package/dist/esm/vviinn-vpr-button.entry.js +2 -2
- package/dist/esm/vviinn-vps-button.entry.js +3 -3
- package/dist/esm/vviinn-vps-widget.entry.js +158 -0
- package/dist/esm/vviinn-widgets.js +3 -3
- package/dist/types/components/image-search/search-filters/search-filters.d.ts +1 -1
- package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-vidget.d.ts +1 -1
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +2 -1
- package/dist/types/components.d.ts +1 -1
- package/dist/types/openApi/index.d.ts +2 -2
- package/dist/types/tracking/event.d.ts +1 -1
- package/dist/types/tracking/index.d.ts +8 -8
- package/dist/types/tracking/models.d.ts +1 -1
- package/dist/vviinn-widgets/{p-2d4cb17f.entry.js → p-0a9cee09.entry.js} +1 -1
- package/dist/vviinn-widgets/p-28678772.js +1 -0
- package/dist/vviinn-widgets/{p-07d8ba79.entry.js → p-2e6ecda7.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-dc2da207.js → p-47183c9a.js} +1 -1
- package/dist/vviinn-widgets/p-535611cd.entry.js +1 -0
- package/dist/vviinn-widgets/p-606ff863.js +1 -0
- package/dist/vviinn-widgets/p-9cc6f0dd.entry.js +1 -0
- package/{www/build/p-ce96f232.js → dist/vviinn-widgets/p-ac0a2989.js} +1 -1
- package/dist/vviinn-widgets/p-ad29e9c5.entry.js +1 -0
- package/{www/build/p-a66512b2.js → dist/vviinn-widgets/p-b4caf042.js} +1 -1
- package/dist/vviinn-widgets/p-b547a6d0.entry.js +1 -0
- package/dist/vviinn-widgets/{p-7d5af04d.js → p-c853cba8.js} +1 -1
- package/dist/vviinn-widgets/p-d2097302.entry.js +1 -0
- package/dist/vviinn-widgets/p-d8d49616.entry.js +1 -0
- package/dist/vviinn-widgets/p-f582db5c.js +1 -0
- package/dist/vviinn-widgets/{p-9c7297c8.entry.js → p-f9410382.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +3 -3
- package/www/build/{p-2d4cb17f.entry.js → p-0a9cee09.entry.js} +1 -1
- package/www/build/p-28678772.js +1 -0
- package/www/build/{p-07d8ba79.entry.js → p-2e6ecda7.entry.js} +1 -1
- package/www/build/{p-dc2da207.js → p-47183c9a.js} +1 -1
- package/www/build/p-535611cd.entry.js +1 -0
- package/www/build/p-606ff863.js +1 -0
- package/www/build/p-7c313f33.js +125 -0
- package/www/build/p-9cc6f0dd.entry.js +1 -0
- package/{dist/vviinn-widgets/p-ce96f232.js → www/build/p-ac0a2989.js} +1 -1
- package/www/build/p-ad29e9c5.entry.js +1 -0
- package/{dist/vviinn-widgets/p-a66512b2.js → www/build/p-b4caf042.js} +1 -1
- package/www/build/p-b547a6d0.entry.js +1 -0
- package/www/build/{p-7d5af04d.js → p-c853cba8.js} +1 -1
- package/www/build/p-d2097302.entry.js +1 -0
- package/www/build/p-d8d49616.entry.js +1 -0
- package/www/build/p-e0153ae2.css +6 -0
- package/www/build/p-f582db5c.js +1 -0
- package/www/build/{p-9c7297c8.entry.js → p-f9410382.entry.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/vviinn-widgets/p-196479f9.js +0 -1
- package/dist/vviinn-widgets/p-ae524f97.entry.js +0 -1
- package/dist/vviinn-widgets/p-fce4183d.entry.js +0 -1
- package/www/build/p-196479f9.js +0 -1
- package/www/build/p-32bb0615.js +0 -1
- package/www/build/p-a67898be.css +0 -1
- package/www/build/p-ae524f97.entry.js +0 -1
- package/www/build/p-fce4183d.entry.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h } from './index-
|
|
1
|
+
import { h } from './index-56c062df.js';
|
|
2
2
|
|
|
3
3
|
const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
4
4
|
h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
|
|
@@ -26,4 +26,4 @@ const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "non
|
|
|
26
26
|
const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
27
27
|
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: "#161616" })));
|
|
28
28
|
|
|
29
|
-
export { ArrowIcon as A,
|
|
29
|
+
export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CameraIcon as a, CrossIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const NAMESPACE = 'vviinn-widgets';
|
|
2
|
-
const Env = /* vviinn-widgets */ {"packageVersion":"2.4.
|
|
2
|
+
const Env = /* vviinn-widgets */ {"packageVersion":"2.4.2","packageName":"vviinn-widgets","environment":"local"};
|
|
3
3
|
|
|
4
4
|
let scopeId;
|
|
5
5
|
let hostTagName;
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
import { g as globalScripts } from './app-globals-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-56c062df.js';
|
|
2
|
+
import { g as globalScripts } from './app-globals-3888cd41.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -12,7 +12,7 @@ const defineCustomElements = (win, options) => {
|
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
14
|
globalScripts();
|
|
15
|
-
return bootstrapLazy([["cropper-
|
|
15
|
+
return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_3",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}]]]], options);
|
|
16
16
|
});
|
|
17
17
|
};
|
|
18
18
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-56c062df.js';
|
|
2
|
+
import { _ as _Array, O as Option, S as Semigroup, a as _function, E as Either, i as imageSearchState, s as state, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitGetRequest, d as sequenceT, A as Apply, T as TaskEither } from './imageSearch.store-b516d12e.js';
|
|
3
|
+
import { C as ChevronIcon } from './index-36978848.js';
|
|
4
|
+
import { p as pipe } from './Handler-639a4cb3.js';
|
|
5
|
+
import { c as createProductViewVprEvent, v as v4, a as createTrackingApi, b as createWidgetVprEvent } from './index-2f8fb0fe.js';
|
|
4
6
|
|
|
5
7
|
const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
|
|
6
8
|
|
|
@@ -206,6 +208,190 @@ let VviinnCarousel = class {
|
|
|
206
208
|
};
|
|
207
209
|
VviinnCarousel.style = vviinnCarouselCss;
|
|
208
210
|
|
|
211
|
+
class GtagAnalytics {
|
|
212
|
+
sendImpression(product) {
|
|
213
|
+
var _a, _b, _c;
|
|
214
|
+
gtag('event', 'view_item_list', {
|
|
215
|
+
items: [
|
|
216
|
+
{
|
|
217
|
+
id: product.productId,
|
|
218
|
+
name: product.title,
|
|
219
|
+
brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
|
|
220
|
+
category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
|
|
221
|
+
list_name: 'VI VPR View',
|
|
222
|
+
price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
|
|
223
|
+
}
|
|
224
|
+
]
|
|
225
|
+
});
|
|
226
|
+
return undefined;
|
|
227
|
+
}
|
|
228
|
+
sendClick(product) {
|
|
229
|
+
var _a, _b, _c;
|
|
230
|
+
gtag('event', 'select_content', {
|
|
231
|
+
content_type: 'product',
|
|
232
|
+
items: [
|
|
233
|
+
{
|
|
234
|
+
id: product.productId,
|
|
235
|
+
name: product.title,
|
|
236
|
+
brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
|
|
237
|
+
category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
|
|
238
|
+
list_name: 'VI VPR View',
|
|
239
|
+
price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
|
|
240
|
+
}
|
|
241
|
+
]
|
|
242
|
+
});
|
|
243
|
+
return undefined;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
class GAnalytics {
|
|
248
|
+
constructor() {
|
|
249
|
+
ga('require', 'ec');
|
|
250
|
+
}
|
|
251
|
+
convertProduct(product) {
|
|
252
|
+
var _a, _b, _c;
|
|
253
|
+
return {
|
|
254
|
+
id: product.productId,
|
|
255
|
+
name: product.title,
|
|
256
|
+
brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
|
|
257
|
+
category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
|
|
258
|
+
list: 'VI VPR View',
|
|
259
|
+
price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
|
|
260
|
+
};
|
|
261
|
+
}
|
|
262
|
+
sendImpression(product) {
|
|
263
|
+
ga('ec:addImpression', this.convertProduct(product));
|
|
264
|
+
return undefined;
|
|
265
|
+
}
|
|
266
|
+
sendClick(product) {
|
|
267
|
+
var _a, _b, _c;
|
|
268
|
+
ga('ec:addProduct', {
|
|
269
|
+
id: product.productId,
|
|
270
|
+
name: product.title,
|
|
271
|
+
brand: (_a = product.brand) !== null && _a !== void 0 ? _a : '',
|
|
272
|
+
category: (_b = product.productType) !== null && _b !== void 0 ? _b : '',
|
|
273
|
+
price: Math.min(...[product.price.actual, (_c = product.price.sale) !== null && _c !== void 0 ? _c : Infinity])
|
|
274
|
+
});
|
|
275
|
+
ga('ec:setAction', 'click', { list: 'VI VPR View' });
|
|
276
|
+
return undefined;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
const getGtagAnalytics = () => _function.pipe(Option.fromNullable(window.gtag), Option.map(() => new GtagAnalytics()));
|
|
281
|
+
const getCommonAnalytics = () => _function.pipe(Option.fromNullable(window.ga), Option.map(() => new GAnalytics()));
|
|
282
|
+
const analyticsMonoid = Option.getMonoid(Semigroup.first());
|
|
283
|
+
const getAnalyticsModule = analyticsMonoid.concat(getGtagAnalytics(), getCommonAnalytics());
|
|
284
|
+
|
|
285
|
+
const FIT_EXPR = /fit\/\d+\//;
|
|
286
|
+
const containsFit = (url) => {
|
|
287
|
+
return _function.pipe(url.match(FIT_EXPR), Either.fromNullable(url), Either.map(() => url));
|
|
288
|
+
};
|
|
289
|
+
const processWidth = (url, size) => {
|
|
290
|
+
return _function.pipe(containsFit(url), Either.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), Either.getOrElse(() => url));
|
|
291
|
+
};
|
|
292
|
+
const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
|
|
293
|
+
const FormattedPrice = (props) => {
|
|
294
|
+
var _a;
|
|
295
|
+
const locale = props.locale;
|
|
296
|
+
const formattedPrice = new Intl.NumberFormat(locale, {
|
|
297
|
+
minimumFractionDigits: 2,
|
|
298
|
+
}).format(props.price);
|
|
299
|
+
const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
|
|
300
|
+
return (h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
|
|
301
|
+
};
|
|
302
|
+
const Price = (props) => {
|
|
303
|
+
const priceEl = (h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
|
|
304
|
+
return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
|
|
305
|
+
h("span", { class: "price-sale", part: "price-sale" },
|
|
306
|
+
h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
|
|
307
|
+
h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
|
|
308
|
+
]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
|
|
309
|
+
};
|
|
310
|
+
const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
|
|
311
|
+
h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
|
|
312
|
+
const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
|
|
313
|
+
h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
|
|
314
|
+
|
|
315
|
+
const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;margin-bottom:8px;overflow:hidden}.deeplink{text-decoration:none}.image-link{display:contents}picture{position:relative;width:100%}:host(.dimmed) picture::before{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}";
|
|
316
|
+
|
|
317
|
+
let VviinnProductCard = class {
|
|
318
|
+
constructor(hostRef) {
|
|
319
|
+
registerInstance(this, hostRef);
|
|
320
|
+
this.recommendationLoad = createEvent(this, "recommendationLoad", 7);
|
|
321
|
+
this.recommendationView = createEvent(this, "recommendationView", 7);
|
|
322
|
+
this.recommendationClick = createEvent(this, "recommendationClick", 7);
|
|
323
|
+
this.productImageLoaded = createEvent(this, "productImageLoaded", 7);
|
|
324
|
+
this.currency = undefined;
|
|
325
|
+
this.imageRatio = 1;
|
|
326
|
+
this.imageWidth = 200;
|
|
327
|
+
this.locale = undefined;
|
|
328
|
+
this.pricePrefix = undefined;
|
|
329
|
+
this.responsive = false;
|
|
330
|
+
this.dimmedBackground = false;
|
|
331
|
+
/** @internal */
|
|
332
|
+
this.index = 0;
|
|
333
|
+
this.imageLoaded = false;
|
|
334
|
+
this.productData = null;
|
|
335
|
+
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this), { threshold: 1.0 });
|
|
336
|
+
}
|
|
337
|
+
connectedCallback() {
|
|
338
|
+
this.productData = {
|
|
339
|
+
product: this.productId,
|
|
340
|
+
rank: this.index
|
|
341
|
+
};
|
|
342
|
+
}
|
|
343
|
+
intersectionCallback(data) {
|
|
344
|
+
if (data.some((entry) => entry.isIntersecting)) {
|
|
345
|
+
_function.pipe(getAnalyticsModule, Option.map((analytics) => analytics.sendImpression(this.getProduct())));
|
|
346
|
+
this.recommendationView.emit(this.productData);
|
|
347
|
+
this.intersectionObserver.disconnect();
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
componentDidLoad() {
|
|
351
|
+
this.recommendationLoad.emit(this.productData);
|
|
352
|
+
this.intersectionObserver.observe(this.el);
|
|
353
|
+
const links = this.el.shadowRoot.querySelectorAll("a");
|
|
354
|
+
links.forEach((link) => link.addEventListener("mousedown", (event) => {
|
|
355
|
+
this.recommendationClick.emit(this.productData);
|
|
356
|
+
if (window.ga) {
|
|
357
|
+
event.preventDefault();
|
|
358
|
+
}
|
|
359
|
+
_function.pipe(getAnalyticsModule, Option.match(() => null, (analytics) => analytics.sendClick(this.getProduct())));
|
|
360
|
+
if (window.ga) {
|
|
361
|
+
ga("send", "event", "UX", "click", "Results", {
|
|
362
|
+
hitCallback: function () {
|
|
363
|
+
document.location.href = this.deeplink;
|
|
364
|
+
},
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
}));
|
|
368
|
+
}
|
|
369
|
+
getProduct() {
|
|
370
|
+
return imageSearchState.results.find((r) => r.productId === this.productId);
|
|
371
|
+
}
|
|
372
|
+
renderImage() {
|
|
373
|
+
const props = {
|
|
374
|
+
width: this.imageWidth,
|
|
375
|
+
height: this.imageWidth * this.imageRatio,
|
|
376
|
+
src: this.image,
|
|
377
|
+
title: this.productTitle,
|
|
378
|
+
lazy: false,
|
|
379
|
+
};
|
|
380
|
+
return this.responsive
|
|
381
|
+
? ResponsiveImage(props, () => this.kek())
|
|
382
|
+
: Image(props, () => this.kek());
|
|
383
|
+
}
|
|
384
|
+
kek() {
|
|
385
|
+
this.productImageLoaded.emit(this.productId);
|
|
386
|
+
}
|
|
387
|
+
render() {
|
|
388
|
+
var _a, _b, _c;
|
|
389
|
+
return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title" }, h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), h(Linked, { deeplink: this.deeplink, part: "deeplink" }, h("span", { class: "title", part: "title" }, this.productTitle)), h("span", { class: "brand", part: "brand" }, this.brand), h("span", { class: "type", part: "type" }, this.productType), h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : state.locale })));
|
|
390
|
+
}
|
|
391
|
+
get el() { return getElement(this); }
|
|
392
|
+
};
|
|
393
|
+
VviinnProductCard.style = vviinnProductCardCss;
|
|
394
|
+
|
|
209
395
|
const createBearerString = (x) => `Bearer ${x}`;
|
|
210
396
|
const createAuthedHeader = (x) => new Headers({
|
|
211
397
|
Authorization: x,
|
|
@@ -982,4 +1168,4 @@ let VviinnVprWidget = class {
|
|
|
982
1168
|
};
|
|
983
1169
|
VviinnVprWidget.style = vviinnVprWidgetCss;
|
|
984
1170
|
|
|
985
|
-
export { VviinnCarousel as vviinn_carousel, VviinnVprWidget as vviinn_vpr_widget };
|
|
1171
|
+
export { VviinnCarousel as vviinn_carousel, VviinnProductCard as vviinn_product_card, VviinnVprWidget as vviinn_vpr_widget };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-56c062df.js';
|
|
2
|
+
|
|
3
|
+
const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
|
|
4
|
+
|
|
5
|
+
let VviinnError = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
return (h(Host, null, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("slot", { name: "action" })));
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
VviinnError.style = vviinnErrorCss;
|
|
14
|
+
|
|
15
|
+
export { VviinnError as vviinn_error };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-56c062df.js';
|
|
2
|
+
import { i as imageSearchState } from './imageSearch.store-b516d12e.js';
|
|
3
|
+
import './Handler-639a4cb3.js';
|
|
4
|
+
|
|
5
|
+
const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;-webkit-animation:rotate 3s linear infinite;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@-webkit-keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
|
|
6
|
+
|
|
7
|
+
let VviinnPreloader = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
isActive() {
|
|
12
|
+
return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
return (h(Host, { class: {
|
|
16
|
+
active: this.isActive(),
|
|
17
|
+
} }));
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
VviinnPreloader.style = vviinnPreloaderCss;
|
|
21
|
+
|
|
22
|
+
export { VviinnPreloader as vviinn_preloader };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
2
|
-
import {
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-56c062df.js';
|
|
2
|
+
import { b as CrossIcon } from './index-36978848.js';
|
|
3
3
|
|
|
4
4
|
const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:0;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{-webkit-animation-name:slideOutFromBottom;animation-name:slideOutFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{-webkit-animation-name:slideInFromBottom;animation-name:slideInFromBottom;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{-webkit-animation-name:slideOutFromRight;animation-name:slideOutFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right.open) .sidebar{-webkit-animation-name:slideInFromRight;animation-name:slideInFromRight;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@-webkit-keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}";
|
|
5
5
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
2
|
-
import { V as VisualSearchIcon } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-56c062df.js';
|
|
2
|
+
import { V as VisualSearchIcon } from './index-36978848.js';
|
|
3
3
|
|
|
4
4
|
const vviinnVprButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#F4F4F4;outline:none}";
|
|
5
5
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
2
|
-
import {
|
|
3
|
-
import { S as SlotSkeleton } from './customized-slots-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-56c062df.js';
|
|
2
|
+
import { a as CameraIcon } from './index-36978848.js';
|
|
3
|
+
import { S as SlotSkeleton } from './customized-slots-863113e2.js';
|
|
4
4
|
|
|
5
5
|
const vviinnVpsButtonCss = ":host{cursor:pointer}";
|
|
6
6
|
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-56c062df.js';
|
|
2
|
+
import { s as state, i as imageSearchState, O as Option } from './imageSearch.store-b516d12e.js';
|
|
3
|
+
import { s as slotChangeListener } from './customized-slots-863113e2.js';
|
|
4
|
+
import { d as createProductViewVpsEvent, e as createSearchEvent, f as createFilterEvent, v as v4, a as createTrackingApi, g as createWidgetVpsEvent } from './index-2f8fb0fe.js';
|
|
5
|
+
import './Handler-639a4cb3.js';
|
|
6
|
+
|
|
7
|
+
const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #F4F4F4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #F4F4F4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#F4F4F4;border-radius:4px;border:1px solid #F4F4F4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#EAEAEA}search-filters::part(filter):hover{background:#EAEAEA}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
|
|
8
|
+
|
|
9
|
+
let VviinnVpsWidget = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
registerInstance(this, hostRef);
|
|
12
|
+
/** @internal */
|
|
13
|
+
this.apiPath = "https://api.vviinn.com";
|
|
14
|
+
/** When true modal window with widget will be shown */
|
|
15
|
+
this.active = false;
|
|
16
|
+
/** Currency sign will shown after price */
|
|
17
|
+
this.currencySign = "€";
|
|
18
|
+
/** Locale for currency formatting */
|
|
19
|
+
this.locale = "de-DE";
|
|
20
|
+
this.slidePosition = 0;
|
|
21
|
+
this.width = 0;
|
|
22
|
+
this.wrongImageFormat = false;
|
|
23
|
+
this.imageSource = null;
|
|
24
|
+
}
|
|
25
|
+
activeWatcher(value) {
|
|
26
|
+
if (value) {
|
|
27
|
+
this.overflow = document.body.style.overflow;
|
|
28
|
+
document.body.style.overflow = "hidden";
|
|
29
|
+
this.trackOpenEvent();
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
document.body.style.overflow = this.overflow;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
trackRecommendationView({ detail }) {
|
|
36
|
+
const recommendationViewEvent = createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId }, detail));
|
|
37
|
+
this.trackingApi.trackEvent(recommendationViewEvent);
|
|
38
|
+
}
|
|
39
|
+
trackRecommendationClick({ detail }) {
|
|
40
|
+
const recommendationClickEvent = createProductViewVpsEvent(Object.assign({ sessionId: this.uiSessionId }, detail));
|
|
41
|
+
this.trackingApi.trackEvent(recommendationClickEvent);
|
|
42
|
+
}
|
|
43
|
+
trachSearchAreaChanges() {
|
|
44
|
+
const searchEvent = createSearchEvent({
|
|
45
|
+
session_id: this.uiSessionId,
|
|
46
|
+
source: this.imageSource,
|
|
47
|
+
search_area: "manual-selection",
|
|
48
|
+
});
|
|
49
|
+
this.trackingApi.trackEvent(searchEvent);
|
|
50
|
+
}
|
|
51
|
+
trackDetectedObject() {
|
|
52
|
+
const searchEvent = createSearchEvent({
|
|
53
|
+
session_id: this.uiSessionId,
|
|
54
|
+
source: this.imageSource,
|
|
55
|
+
search_area: "attention-point",
|
|
56
|
+
});
|
|
57
|
+
this.trackingApi.trackEvent(searchEvent);
|
|
58
|
+
}
|
|
59
|
+
trackFilter({ detail }) {
|
|
60
|
+
const searchEvent = createFilterEvent({
|
|
61
|
+
session_id: this.uiSessionId,
|
|
62
|
+
source: this.imageSource,
|
|
63
|
+
kind: "category",
|
|
64
|
+
action: detail,
|
|
65
|
+
});
|
|
66
|
+
this.trackingApi.trackEvent(searchEvent);
|
|
67
|
+
}
|
|
68
|
+
componentWillLoad() {
|
|
69
|
+
slotChangeListener(this, this.el);
|
|
70
|
+
}
|
|
71
|
+
connectedCallback() {
|
|
72
|
+
state.apiPath = this.apiPath;
|
|
73
|
+
state.currencySign = this.currencySign;
|
|
74
|
+
state.locale = this.locale;
|
|
75
|
+
imageSearchState.token = this.token;
|
|
76
|
+
this.uiSessionId = v4();
|
|
77
|
+
}
|
|
78
|
+
trackOpenEvent() {
|
|
79
|
+
this.trackingApi = createTrackingApi(this.apiPath, this.token);
|
|
80
|
+
const widgetOpenEvent = createWidgetVpsEvent({
|
|
81
|
+
action: "open",
|
|
82
|
+
session_id: this.uiSessionId,
|
|
83
|
+
});
|
|
84
|
+
this.trackingApi.trackEvent(widgetOpenEvent);
|
|
85
|
+
}
|
|
86
|
+
handleImageSelection(source) {
|
|
87
|
+
this.imageSource = source;
|
|
88
|
+
this.slidePosition = 1;
|
|
89
|
+
const root = this.el.shadowRoot.querySelector("vviinn-overlayed-modal");
|
|
90
|
+
const overlay = root.shadowRoot.querySelector("vviinn-overlay");
|
|
91
|
+
const modal = overlay.querySelector("vviinn-modal");
|
|
92
|
+
const modalBody = modal.shadowRoot.querySelector(".body");
|
|
93
|
+
modalBody.scrollTop = 0;
|
|
94
|
+
this.trackInitialSearch();
|
|
95
|
+
}
|
|
96
|
+
trackInitialSearch() {
|
|
97
|
+
const searchEvent = createSearchEvent({
|
|
98
|
+
session_id: this.uiSessionId,
|
|
99
|
+
source: this.imageSource,
|
|
100
|
+
search_area: "full",
|
|
101
|
+
});
|
|
102
|
+
this.trackingApi.trackEvent(searchEvent);
|
|
103
|
+
}
|
|
104
|
+
resetState() {
|
|
105
|
+
this.resetScroll("onboarding-block");
|
|
106
|
+
this.slidePosition = 0;
|
|
107
|
+
imageSearchState.image = Option.none;
|
|
108
|
+
imageSearchState.imageUrl = Option.none;
|
|
109
|
+
imageSearchState.imageBounds = Option.none;
|
|
110
|
+
imageSearchState.searchArea = Option.none;
|
|
111
|
+
imageSearchState.results = [];
|
|
112
|
+
imageSearchState.filters = [];
|
|
113
|
+
imageSearchState.detectedObjects = [];
|
|
114
|
+
imageSearchState.activeIonLink = undefined;
|
|
115
|
+
imageSearchState.rectangleSearchForm = undefined;
|
|
116
|
+
this.resetScroll("results-block");
|
|
117
|
+
}
|
|
118
|
+
haveErrors() {
|
|
119
|
+
return this.wrongImageFormat || imageSearchState.serverError;
|
|
120
|
+
}
|
|
121
|
+
resetScroll(elementId, behavior = "auto") {
|
|
122
|
+
const element = this.el.shadowRoot.getElementById(elementId);
|
|
123
|
+
element.scroll({ top: 0, left: 0, behavior });
|
|
124
|
+
}
|
|
125
|
+
handleModalClose() {
|
|
126
|
+
this.active = false;
|
|
127
|
+
this.resetState();
|
|
128
|
+
const elementsToReset = ["onboarding-block", "results-block"];
|
|
129
|
+
elementsToReset.forEach((name) => this.resetScroll(name));
|
|
130
|
+
const widgetOpenEvent = createWidgetVpsEvent({
|
|
131
|
+
action: "close",
|
|
132
|
+
session_id: this.uiSessionId,
|
|
133
|
+
});
|
|
134
|
+
this.trackingApi.trackEvent(widgetOpenEvent);
|
|
135
|
+
}
|
|
136
|
+
render() {
|
|
137
|
+
return (h(Host, null, h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, onSecondaryActionClicked: () => this.resetState(), onModalClosed: () => this.handleModalClose(), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
|
|
138
|
+
error: this.haveErrors(),
|
|
139
|
+
"start-page_block": true,
|
|
140
|
+
} }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, onActionClick: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, onActionClick: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onImageSelected: () => this.handleImageSelection("upload"), onImageSelectedError: () => (this.wrongImageFormat = true), part: "select-image_button" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M14.5 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { onImageSelected: () => this.handleImageSelection("example"), onImageSelectedError: () => this.resetScroll("onboarding-block", "smooth") })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", null), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
|
|
141
|
+
"nothing-found": true,
|
|
142
|
+
hidden: imageSearchState.results.length > 0,
|
|
143
|
+
} }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
|
|
144
|
+
hidden: imageSearchState.results.length <= 0,
|
|
145
|
+
products: true,
|
|
146
|
+
} }, imageSearchState.results.map((p, i) => {
|
|
147
|
+
var _a;
|
|
148
|
+
return (h("vviinn-product-card", { hidden: true, productTitle: p.title, productId: p.productId, brand: p.brand, deeplink: p.deeplink, price: p.price.actual, salePrice: p.price.sale, imageWidth: 160, image: (_a = p.image.thumbnail) !== null && _a !== void 0 ? _a : p.image.original, part: "product-card", index: i }));
|
|
149
|
+
}))))))));
|
|
150
|
+
}
|
|
151
|
+
get el() { return getElement(this); }
|
|
152
|
+
static get watchers() { return {
|
|
153
|
+
"active": ["activeWatcher"]
|
|
154
|
+
}; }
|
|
155
|
+
};
|
|
156
|
+
VviinnVpsWidget.style = vviinnVpsWidgetCss;
|
|
157
|
+
|
|
158
|
+
export { VviinnVpsWidget as vviinn_vps_widget };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
import { g as globalScripts } from './app-globals-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-56c062df.js';
|
|
2
|
+
import { g as globalScripts } from './app-globals-3888cd41.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
|
|
16
16
|
patchBrowser().then(options => {
|
|
17
17
|
globalScripts();
|
|
18
|
-
return bootstrapLazy([["cropper-
|
|
18
|
+
return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_3",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","handleImageLoading"],[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]},[[0,"recommendationView","trackRecommendationView"],[0,"recommendationClick","trackRecommendationClick"],[0,"cropperChanged","trachSearchAreaChanges"],[0,"detectedObjectClicked","trackDetectedObject"],[0,"filterSelected","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}]]]], options);
|
|
19
19
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EventEmitter } from "../../../stencil-public-runtime";
|
|
2
|
-
import { FilterAction } from "
|
|
2
|
+
import { FilterAction } from "vviinn-tracking-client-ts";
|
|
3
3
|
import { SearchSessionFilter } from "../../../searchSession/searchSession";
|
|
4
4
|
export declare class SearchFilters {
|
|
5
5
|
el: HTMLElement;
|
|
@@ -2,7 +2,7 @@ import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
|
|
|
2
2
|
import { CampaignName } from "../../campaign/Campaign";
|
|
3
3
|
import { CarouselMode } from "../vviinn-carousel/vviinn-carousel";
|
|
4
4
|
import { Recommendation } from "../../recommendation/recommendation";
|
|
5
|
-
import { DefaultApi } from "
|
|
5
|
+
import { DefaultApi } from "vviinn-tracking-client-ts";
|
|
6
6
|
import { ProductCardEvent } from "../../recommendation/events";
|
|
7
7
|
/**
|
|
8
8
|
* @part product-card - product card itself
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FilterAction } from "
|
|
1
|
+
import { FilterAction } from "vviinn-tracking-client-ts";
|
|
2
2
|
import { ProductCardEvent } from "../../recommendation/events";
|
|
3
3
|
/**
|
|
4
4
|
* @prop --color-primary: color used for action button, slider bullets and selected detected object;
|
|
@@ -50,6 +50,7 @@ export declare class VviinnVpsWidget {
|
|
|
50
50
|
trackFilter({ detail }: CustomEvent<FilterAction>): void;
|
|
51
51
|
componentWillLoad(): void;
|
|
52
52
|
connectedCallback(): void;
|
|
53
|
+
private trackOpenEvent;
|
|
53
54
|
private handleImageSelection;
|
|
54
55
|
private trackInitialSearch;
|
|
55
56
|
private resetState;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
8
|
import { Handler } from "./cropper/Handler";
|
|
9
9
|
import { DetectedObject, SearchSessionFilter } from "./searchSession/searchSession";
|
|
10
|
-
import { FilterAction } from "
|
|
10
|
+
import { FilterAction } from "vviinn-tracking-client-ts";
|
|
11
11
|
import { CarouselMode } from "./components/vviinn-carousel/vviinn-carousel";
|
|
12
12
|
import { Recommendation } from "./recommendation/recommendation";
|
|
13
13
|
import { ValueObject } from "./network/ion/ValueObject";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AuthMethodsConfiguration, DefaultApi } from "
|
|
2
|
-
export declare const getTrackingServerByApiPath: (apiPath: string) => import("
|
|
1
|
+
import { AuthMethodsConfiguration, DefaultApi } from "vviinn-tracking-client-ts";
|
|
2
|
+
export declare const getTrackingServerByApiPath: (apiPath: string) => import("vviinn-tracking-client-ts").ServerConfiguration<{}>;
|
|
3
3
|
export declare const isProductionPath: (apiPath: string) => boolean;
|
|
4
4
|
export declare const createBearerAuth: (token: string | PromiseLike<string>) => AuthMethodsConfiguration;
|
|
5
5
|
export declare const createTrackingApi: (apiPath: string, token: string | PromiseLike<string>) => DefaultApi;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Event } from "
|
|
1
|
+
import { Event } from "vviinn-tracking-client-ts";
|
|
2
2
|
import { WidgetEventType } from "./models";
|
|
3
3
|
export declare const createTrackingEvent: (widget: WidgetEventType) => <T extends Event>(eventData: any) => T;
|
|
4
4
|
//# sourceMappingURL=event.d.ts.map
|