vviinn-widgets 2.18.5 → 2.18.7
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/{Campaign-68ba044c.js → Campaign-13258569.js} +2 -2
- package/dist/cjs/highlight-box_22.cjs.entry.js +3 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/vviinn-carousel_3.cjs.entry.js +29 -11
- package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +9 -3
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +13 -3
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +35 -11
- package/dist/cjs/vviinn-widgets.cjs.js +1 -1
- package/dist/collection/campaign/Campaign.js +1 -1
- package/dist/collection/components/image-search/image-view/image-cropper/image-cropper.js +2 -2
- package/dist/collection/components/image-search/search-filters/search-filters.js +1 -1
- package/dist/collection/components/vviinn-example-images/vviinn-example-image/vviinn-example-image.js +3 -3
- package/dist/collection/components/vviinn-example-images/vviinn-example-images.js +3 -3
- package/dist/collection/components/vviinn-image-selector/vviinn-image-selector.js +3 -3
- package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.js +1 -1
- package/dist/collection/components/vviinn-image-view/vviinn-image-view.js +1 -1
- package/dist/collection/components/vviinn-modal/vviinn-modal.js +8 -5
- package/dist/collection/components/vviinn-overlayed-modal/vviinn-overlayed-modal.js +4 -1
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +17 -10
- package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +25 -22
- package/dist/collection/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.js +2 -0
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +94 -4
- package/dist/collection/components/vviinn-vpr-widget/stories/vviinn-vpr-widget.stories.js +3 -0
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js +77 -21
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +154 -4
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +166 -14
- package/dist/esm/{Campaign-7e6c7187.js → Campaign-90ba7e06.js} +2 -2
- package/dist/esm/highlight-box_22.entry.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/vviinn-carousel_3.entry.js +29 -11
- package/dist/esm/vviinn-recommendations-sidebar.entry.js +3 -3
- package/dist/esm/vviinn-vpr-button.entry.js +9 -3
- package/dist/esm/vviinn-vps-button.entry.js +13 -3
- package/dist/esm/vviinn-vps-widget.entry.js +35 -11
- package/dist/esm/vviinn-widgets.js +1 -1
- package/dist/types/campaign/Campaign.d.ts +1 -1
- package/dist/types/components/vviinn-modal/vviinn-modal.d.ts +1 -0
- package/dist/types/components/vviinn-overlayed-modal/vviinn-overlayed-modal.d.ts +1 -0
- package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +2 -0
- package/dist/types/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.d.ts +2 -1
- package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +6 -0
- package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-vidget.d.ts +6 -2
- package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +10 -0
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +10 -0
- package/dist/types/components.d.ts +29 -14
- package/dist/types/recommendation/events.d.ts +5 -4
- package/dist/vviinn-widgets/p-7d7f2f6d.entry.js +1 -0
- package/dist/vviinn-widgets/{p-cd9c46b6.entry.js → p-931f139c.entry.js} +1 -1
- package/dist/vviinn-widgets/p-9632e751.entry.js +1 -0
- package/dist/vviinn-widgets/p-c0b7bb0d.entry.js +1 -0
- package/dist/vviinn-widgets/p-ec088ca3.entry.js +1 -0
- package/dist/vviinn-widgets/p-f1cefbf0.entry.js +1 -0
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-2cccb434.js +1 -0
- package/www/build/p-7d7f2f6d.entry.js +1 -0
- package/www/build/{p-cd9c46b6.entry.js → p-931f139c.entry.js} +1 -1
- package/www/build/p-9632e751.entry.js +1 -0
- package/www/build/p-c0b7bb0d.entry.js +1 -0
- package/www/build/p-ec088ca3.entry.js +1 -0
- package/www/build/p-f1cefbf0.entry.js +1 -0
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/vviinn-widgets/p-13ffa5ec.entry.js +0 -1
- package/dist/vviinn-widgets/p-211a619f.entry.js +0 -1
- package/dist/vviinn-widgets/p-90e3704e.entry.js +0 -1
- package/dist/vviinn-widgets/p-be76c0a8.entry.js +0 -1
- package/dist/vviinn-widgets/p-d56c2807.entry.js +0 -1
- package/www/build/p-13ffa5ec.entry.js +0 -1
- package/www/build/p-211a619f.entry.js +0 -1
- package/www/build/p-90e3704e.entry.js +0 -1
- package/www/build/p-be76c0a8.entry.js +0 -1
- package/www/build/p-ccc72e18.js +0 -1
- package/www/build/p-d56c2807.entry.js +0 -1
- /package/dist/vviinn-widgets/{p-5fdc4a7f.js → p-18fd769b.js} +0 -0
- /package/www/build/{p-5fdc4a7f.js → p-18fd769b.js} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const campaignTypeNames = {
|
|
4
4
|
VPR: "Similar Products",
|
|
5
5
|
VPS: "Visual Search",
|
|
6
6
|
VCS: "Products Cross-Selling",
|
|
@@ -13,6 +13,6 @@ function fromString(s) {
|
|
|
13
13
|
return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
exports.
|
|
16
|
+
exports.campaignTypeNames = campaignTypeNames;
|
|
17
17
|
exports.fold = fold;
|
|
18
18
|
exports.fromString = fromString;
|
|
@@ -7,7 +7,7 @@ const imageSearch_store = require('./imageSearch.store-8bbadb9d.js');
|
|
|
7
7
|
const Handler = require('./Handler-176539c8.js');
|
|
8
8
|
const index$1 = require('./index-5ce4918b.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-8a1a9aed.js');
|
|
10
|
-
const Campaign = require('./Campaign-
|
|
10
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
11
11
|
|
|
12
12
|
// -------------------------------------------------------------------------------------
|
|
13
13
|
// -------------------------------------------------------------------------------------
|
|
@@ -449,8 +449,8 @@ let VviinnModal = class {
|
|
|
449
449
|
this.vviinnWidgetClose.emit({
|
|
450
450
|
widgetType: "VPS",
|
|
451
451
|
campaignTypeId: "VPS",
|
|
452
|
-
|
|
453
|
-
|
|
452
|
+
campaignTypeName: Campaign.campaignTypeNames["VPS"],
|
|
453
|
+
widgetId: this.buttonElementId,
|
|
454
454
|
});
|
|
455
455
|
}, this.slider ? 500 : 0);
|
|
456
456
|
}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"
|
|
17
|
+
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"noResultText":[1,"no-result-text"],"buttonElementId":[1,"button-element-id"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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],"campaignTypeId":[1,"campaign-type-id"],"dimmedBackground":[4,"dimmed-background"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16]}],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"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],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"apiPath":[1,"api-path"]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-0bda22ec.js');
|
|
6
6
|
const imageSearch_store = require('./imageSearch.store-8bbadb9d.js');
|
|
7
7
|
const index$1 = require('./index-5ce4918b.js');
|
|
8
|
-
const Campaign = require('./Campaign-
|
|
8
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
9
9
|
const Handler = require('./Handler-176539c8.js');
|
|
10
10
|
const index$2 = require('./index-1b894f1d.js');
|
|
11
11
|
|
|
@@ -365,12 +365,13 @@ let VviinnProductCard = class {
|
|
|
365
365
|
getProductData() {
|
|
366
366
|
var _a;
|
|
367
367
|
return {
|
|
368
|
-
|
|
369
|
-
|
|
368
|
+
productId: this.productId,
|
|
369
|
+
productRank: this.index,
|
|
370
|
+
productName: this.productTitle,
|
|
370
371
|
widgetType: this.getWidgetType(),
|
|
371
372
|
campaignTypeId: this.campaignTypeId,
|
|
372
|
-
|
|
373
|
-
|
|
373
|
+
campaignTypeName: Campaign.campaignTypeNames[this.campaignTypeId],
|
|
374
|
+
widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId,
|
|
374
375
|
};
|
|
375
376
|
}
|
|
376
377
|
intersectionCallback(data) {
|
|
@@ -1048,10 +1049,25 @@ class AnonymousSubject extends Subject {
|
|
|
1048
1049
|
|
|
1049
1050
|
const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
|
|
1050
1051
|
|
|
1052
|
+
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
1053
|
+
var t = {};
|
|
1054
|
+
for (var p in s)
|
|
1055
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
1056
|
+
t[p] = s[p];
|
|
1057
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
1058
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
1059
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
1060
|
+
t[p[i]] = s[p[i]];
|
|
1061
|
+
}
|
|
1062
|
+
return t;
|
|
1063
|
+
};
|
|
1051
1064
|
let VviinnVprWidget = class {
|
|
1052
1065
|
constructor(hostRef) {
|
|
1053
1066
|
index.registerInstance(this, hostRef);
|
|
1054
1067
|
this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
|
|
1068
|
+
this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
|
|
1069
|
+
this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
|
|
1070
|
+
this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
|
|
1055
1071
|
this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
|
|
1056
1072
|
this.vviinnRecommendationsLoaded = index.createEvent(this, "vviinnRecommendationsLoaded", 7);
|
|
1057
1073
|
/** Title for recommendations widget */
|
|
@@ -1090,8 +1106,8 @@ let VviinnVprWidget = class {
|
|
|
1090
1106
|
return {
|
|
1091
1107
|
widgetType: "VPR",
|
|
1092
1108
|
campaignTypeId: this.campaignType,
|
|
1093
|
-
|
|
1094
|
-
|
|
1109
|
+
campaignTypeName: Campaign.campaignTypeNames[this.campaignType],
|
|
1110
|
+
widgetId: this.id,
|
|
1095
1111
|
};
|
|
1096
1112
|
}
|
|
1097
1113
|
handleProductIdChange() {
|
|
@@ -1108,24 +1124,26 @@ let VviinnVprWidget = class {
|
|
|
1108
1124
|
this.getRecommendations();
|
|
1109
1125
|
}
|
|
1110
1126
|
handleProductLoading({ detail }) {
|
|
1111
|
-
this.productImageLoadedSubject.next(detail.
|
|
1127
|
+
this.productImageLoadedSubject.next(detail.productId);
|
|
1112
1128
|
}
|
|
1113
1129
|
trackProductView({ detail }) {
|
|
1114
1130
|
if (this.trackingDeactivated)
|
|
1115
1131
|
return;
|
|
1116
|
-
const
|
|
1132
|
+
const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
|
|
1133
|
+
const productViewEvent = index$2.createProductViewVprEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
|
|
1117
1134
|
this.trackingApi
|
|
1118
1135
|
.trackEvent(productViewEvent)
|
|
1119
1136
|
.then(this.setTrackingDeactivated);
|
|
1120
1137
|
}
|
|
1121
1138
|
async trackProductClick({ detail }) {
|
|
1122
|
-
const
|
|
1139
|
+
const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
|
|
1140
|
+
const productClickEvent = index$2.createProductClickVprEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
|
|
1123
1141
|
if (!this.trackingDeactivated) {
|
|
1124
1142
|
await this.trackingApi
|
|
1125
1143
|
.trackEvent(productClickEvent)
|
|
1126
1144
|
.then(this.setTrackingDeactivated);
|
|
1127
1145
|
}
|
|
1128
|
-
const product = this.recommendations.find((r) => r.productId === detail.
|
|
1146
|
+
const product = this.recommendations.find((r) => r.productId === detail.productId);
|
|
1129
1147
|
if (!product || !product.deeplink)
|
|
1130
1148
|
return;
|
|
1131
1149
|
window.location.href = product.deeplink;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-0bda22ec.js');
|
|
6
6
|
const index$1 = require('./index-5ce4918b.js');
|
|
7
|
-
const Campaign = require('./Campaign-
|
|
7
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
8
8
|
|
|
9
9
|
const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;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;min-height:100px}: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%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
|
|
10
10
|
|
|
@@ -65,8 +65,8 @@ let RecommendationsSidebar = class {
|
|
|
65
65
|
this.vviinnWidgetClose.emit({
|
|
66
66
|
widgetType: "VPR",
|
|
67
67
|
campaignTypeId: this.campaignType,
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
campaignTypeName: Campaign.campaignTypeNames[this.campaignType],
|
|
69
|
+
widgetId: this.buttonElementId,
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
get el() { return index.getElement(this); }
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-0bda22ec.js');
|
|
6
6
|
const index$1 = require('./index-5ce4918b.js');
|
|
7
|
-
const Campaign = require('./Campaign-
|
|
7
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
8
8
|
|
|
9
9
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
10
10
|
|
|
@@ -12,6 +12,12 @@ let VviinnVprButton = class {
|
|
|
12
12
|
constructor(hostRef) {
|
|
13
13
|
index.registerInstance(this, hostRef);
|
|
14
14
|
this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
|
|
15
|
+
this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
|
|
16
|
+
this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
|
|
17
|
+
this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
|
|
18
|
+
this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
|
|
19
|
+
this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
|
|
20
|
+
this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
|
|
15
21
|
this.position = "bottom";
|
|
16
22
|
this.sourceImage = null;
|
|
17
23
|
this.sidebarTitle = "Visually similar products";
|
|
@@ -37,8 +43,8 @@ let VviinnVprButton = class {
|
|
|
37
43
|
this.vviinnWidgetOpen.emit({
|
|
38
44
|
widgetType: "VPR",
|
|
39
45
|
campaignTypeId: this.campaignType,
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
campaignTypeName: Campaign.campaignTypeNames[this.campaignType],
|
|
47
|
+
widgetId: this.el.id,
|
|
42
48
|
});
|
|
43
49
|
}, role: "button", tabindex: "0" }, index.h("vviinn-button", { addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
|
|
44
50
|
}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-0bda22ec.js');
|
|
6
6
|
const index$1 = require('./index-5ce4918b.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-8a1a9aed.js');
|
|
8
|
-
const Campaign = require('./Campaign-
|
|
8
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
9
9
|
|
|
10
10
|
const vviinnVpsButtonCss = ":host{display:block}";
|
|
11
11
|
|
|
@@ -14,6 +14,16 @@ let VviinnVpsButton = class {
|
|
|
14
14
|
index.registerInstance(this, hostRef);
|
|
15
15
|
this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
|
|
16
16
|
this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
|
|
17
|
+
this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
|
|
18
|
+
this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
|
|
19
|
+
this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
|
|
20
|
+
this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
|
|
21
|
+
this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
|
|
22
|
+
this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
|
|
23
|
+
this.vviinnImageCrop = index.createEvent(this, "vviinnImageCrop", 7);
|
|
24
|
+
this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
|
|
25
|
+
this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
|
|
26
|
+
this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
|
|
17
27
|
/** Currency sign will shown after price */
|
|
18
28
|
this.currencySign = "€";
|
|
19
29
|
/** Locale for currency formatting */
|
|
@@ -43,8 +53,8 @@ let VviinnVpsButton = class {
|
|
|
43
53
|
this.vviinnWidgetOpen.emit({
|
|
44
54
|
widgetType: "VPS",
|
|
45
55
|
campaignTypeId: "VPS",
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
campaignTypeName: Campaign.campaignTypeNames["VPS"],
|
|
57
|
+
widgetId: this.el.id,
|
|
48
58
|
});
|
|
49
59
|
}, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonElementId: this.el.id })));
|
|
50
60
|
}
|
|
@@ -6,11 +6,23 @@ const index = require('./index-0bda22ec.js');
|
|
|
6
6
|
const imageSearch_store = require('./imageSearch.store-8bbadb9d.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-8a1a9aed.js');
|
|
8
8
|
const index$1 = require('./index-1b894f1d.js');
|
|
9
|
-
const Campaign = require('./Campaign-
|
|
9
|
+
const Campaign = require('./Campaign-13258569.js');
|
|
10
10
|
require('./Handler-176539c8.js');
|
|
11
11
|
|
|
12
12
|
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}";
|
|
13
13
|
|
|
14
|
+
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
15
|
+
var t = {};
|
|
16
|
+
for (var p in s)
|
|
17
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
18
|
+
t[p] = s[p];
|
|
19
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
20
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
21
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
22
|
+
t[p[i]] = s[p[i]];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
14
26
|
const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
|
|
15
27
|
const notEmptyString = (s) => !imageSearch_store.isEmpty(s);
|
|
16
28
|
const notNan = (n) => !isNaN(n);
|
|
@@ -19,6 +31,15 @@ let VviinnVpsWidget = class {
|
|
|
19
31
|
index.registerInstance(this, hostRef);
|
|
20
32
|
this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
|
|
21
33
|
this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
|
|
34
|
+
this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
|
|
35
|
+
this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
|
|
36
|
+
this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
|
|
37
|
+
this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
|
|
38
|
+
this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
|
|
39
|
+
this.vviinnImageCrop = index.createEvent(this, "vviinnImageCrop", 7);
|
|
40
|
+
this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
|
|
41
|
+
this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
|
|
42
|
+
this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
|
|
22
43
|
/** @internal */
|
|
23
44
|
this.apiPath = "https://api.vviinn.com";
|
|
24
45
|
/** When true modal window with widget will be shown */
|
|
@@ -44,8 +65,8 @@ let VviinnVpsWidget = class {
|
|
|
44
65
|
return {
|
|
45
66
|
widgetType: "VPS",
|
|
46
67
|
campaignTypeId: "VPS",
|
|
47
|
-
|
|
48
|
-
|
|
68
|
+
campaignTypeName: Campaign.campaignTypeNames["VPS"],
|
|
69
|
+
widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
|
|
49
70
|
};
|
|
50
71
|
};
|
|
51
72
|
}
|
|
@@ -66,19 +87,21 @@ let VviinnVpsWidget = class {
|
|
|
66
87
|
trackProductView({ detail }) {
|
|
67
88
|
if (this.trackingDeactivated)
|
|
68
89
|
return;
|
|
69
|
-
const
|
|
90
|
+
const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
|
|
91
|
+
const productViewEvent = index$1.createProductViewVpsEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
|
|
70
92
|
this.trackingApi
|
|
71
93
|
.trackEvent(productViewEvent)
|
|
72
94
|
.then(this.setTrackingDeactivated);
|
|
73
95
|
}
|
|
74
96
|
async trackProductClick({ detail }) {
|
|
75
|
-
const
|
|
97
|
+
const { productRank, productId, productName, widgetType, widgetId, campaignTypeId, campaignTypeName } = detail, rest = __rest(detail, ["productRank", "productId", "productName", "widgetType", "widgetId", "campaignTypeId", "campaignTypeName"]);
|
|
98
|
+
const productClickEvent = index$1.createProductClickVpsEvent(Object.assign({ session_id: this.uiSessionId, rank: productRank, product: productId }, rest));
|
|
76
99
|
if (!this.trackingDeactivated) {
|
|
77
100
|
await this.trackingApi
|
|
78
101
|
.trackEvent(this.trackingDeactivated ? null : productClickEvent)
|
|
79
102
|
.then(this.setTrackingDeactivated);
|
|
80
103
|
}
|
|
81
|
-
const product = imageSearch_store.imageSearchState.results.find((r) => r.productId === detail.
|
|
104
|
+
const product = imageSearch_store.imageSearchState.results.find((r) => r.productId === detail.productId);
|
|
82
105
|
if (!product || !product.deeplink)
|
|
83
106
|
return;
|
|
84
107
|
window.location.href = product.deeplink;
|
|
@@ -130,8 +153,8 @@ let VviinnVpsWidget = class {
|
|
|
130
153
|
this.vviinnWidgetLoad.emit({
|
|
131
154
|
widgetType: "VPS",
|
|
132
155
|
campaignTypeId: "VPS",
|
|
133
|
-
|
|
134
|
-
|
|
156
|
+
campaignTypeName: Campaign.campaignTypeNames["VPS"],
|
|
157
|
+
widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
|
|
135
158
|
});
|
|
136
159
|
}
|
|
137
160
|
trackOpenEvent() {
|
|
@@ -194,16 +217,17 @@ let VviinnVpsWidget = class {
|
|
|
194
217
|
elementsToReset.forEach((name) => this.resetScroll(name));
|
|
195
218
|
if (this.trackingDeactivated)
|
|
196
219
|
return;
|
|
197
|
-
const
|
|
220
|
+
const widgetCloseEvent = index$1.createWidgetVpsEvent({
|
|
198
221
|
action: "close",
|
|
199
222
|
session_id: this.uiSessionId,
|
|
200
223
|
});
|
|
201
224
|
this.trackingApi
|
|
202
|
-
.trackEvent(
|
|
225
|
+
.trackEvent(widgetCloseEvent)
|
|
203
226
|
.then(this.setTrackingDeactivated);
|
|
204
227
|
}
|
|
205
228
|
render() {
|
|
206
|
-
|
|
229
|
+
var _a;
|
|
230
|
+
return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, exportparts: "secondary-action, title, close-button, example-images" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
|
|
207
231
|
error: this.haveErrors(),
|
|
208
232
|
"start-page_block": true,
|
|
209
233
|
} }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => this.handleImageSelection("upload"), onVviinnNoResult: () => (this.wrongImageFormat = true), basicEventData: this.getBasicEventData(), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"
|
|
18
|
+
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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],"campaigns":[1],"color":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"noResultText":[1,"no-result-text"],"buttonElementId":[1,"button-element-id"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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],"campaignTypeId":[1,"campaign-type-id"],"dimmedBackground":[4,"dimmed-background"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22.cjs",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16]}],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"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],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"apiPath":[1,"api-path"]}]]]], options);
|
|
19
19
|
});
|
|
@@ -138,7 +138,7 @@ export class ImageCropper {
|
|
|
138
138
|
"mutable": false,
|
|
139
139
|
"complexType": {
|
|
140
140
|
"original": "BasicEventData",
|
|
141
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
141
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
142
142
|
"references": {
|
|
143
143
|
"BasicEventData": {
|
|
144
144
|
"location": "import",
|
|
@@ -169,7 +169,7 @@ export class ImageCropper {
|
|
|
169
169
|
},
|
|
170
170
|
"complexType": {
|
|
171
171
|
"original": "BasicEventData",
|
|
172
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
172
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
173
173
|
"references": {
|
|
174
174
|
"BasicEventData": {
|
|
175
175
|
"location": "import",
|
|
@@ -100,7 +100,7 @@ export class SearchFilters {
|
|
|
100
100
|
"mutable": false,
|
|
101
101
|
"complexType": {
|
|
102
102
|
"original": "BasicEventData",
|
|
103
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
103
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
104
104
|
"references": {
|
|
105
105
|
"BasicEventData": {
|
|
106
106
|
"location": "import",
|
|
@@ -101,7 +101,7 @@ export class VviinnExampleImage {
|
|
|
101
101
|
"mutable": false,
|
|
102
102
|
"complexType": {
|
|
103
103
|
"original": "BasicEventData",
|
|
104
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
104
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
105
105
|
"references": {
|
|
106
106
|
"BasicEventData": {
|
|
107
107
|
"location": "import",
|
|
@@ -132,7 +132,7 @@ export class VviinnExampleImage {
|
|
|
132
132
|
},
|
|
133
133
|
"complexType": {
|
|
134
134
|
"original": "BasicEventData",
|
|
135
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
135
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
136
136
|
"references": {
|
|
137
137
|
"BasicEventData": {
|
|
138
138
|
"location": "import",
|
|
@@ -152,7 +152,7 @@ export class VviinnExampleImage {
|
|
|
152
152
|
},
|
|
153
153
|
"complexType": {
|
|
154
154
|
"original": "BasicEventData",
|
|
155
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
155
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
156
156
|
"references": {
|
|
157
157
|
"BasicEventData": {
|
|
158
158
|
"location": "import",
|
|
@@ -37,7 +37,7 @@ export class VviinnExampleImages {
|
|
|
37
37
|
"mutable": false,
|
|
38
38
|
"complexType": {
|
|
39
39
|
"original": "BasicEventData",
|
|
40
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
40
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
41
41
|
"references": {
|
|
42
42
|
"BasicEventData": {
|
|
43
43
|
"location": "import",
|
|
@@ -65,7 +65,7 @@ export class VviinnExampleImages {
|
|
|
65
65
|
},
|
|
66
66
|
"complexType": {
|
|
67
67
|
"original": "BasicEventData",
|
|
68
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
68
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
69
69
|
"references": {
|
|
70
70
|
"BasicEventData": {
|
|
71
71
|
"location": "import",
|
|
@@ -85,7 +85,7 @@ export class VviinnExampleImages {
|
|
|
85
85
|
},
|
|
86
86
|
"complexType": {
|
|
87
87
|
"original": "BasicEventData",
|
|
88
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
88
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
89
89
|
"references": {
|
|
90
90
|
"BasicEventData": {
|
|
91
91
|
"location": "import",
|
|
@@ -36,7 +36,7 @@ export class VviinnImageSelector {
|
|
|
36
36
|
"mutable": false,
|
|
37
37
|
"complexType": {
|
|
38
38
|
"original": "BasicEventData",
|
|
39
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
39
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
40
40
|
"references": {
|
|
41
41
|
"BasicEventData": {
|
|
42
42
|
"location": "import",
|
|
@@ -64,7 +64,7 @@ export class VviinnImageSelector {
|
|
|
64
64
|
},
|
|
65
65
|
"complexType": {
|
|
66
66
|
"original": "BasicEventData",
|
|
67
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
67
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
68
68
|
"references": {
|
|
69
69
|
"BasicEventData": {
|
|
70
70
|
"location": "import",
|
|
@@ -84,7 +84,7 @@ export class VviinnImageSelector {
|
|
|
84
84
|
},
|
|
85
85
|
"complexType": {
|
|
86
86
|
"original": "BasicEventData",
|
|
87
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
87
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
88
88
|
"references": {
|
|
89
89
|
"BasicEventData": {
|
|
90
90
|
"location": "import",
|
|
@@ -82,7 +82,7 @@ export class VviinnDetectedObject {
|
|
|
82
82
|
"mutable": false,
|
|
83
83
|
"complexType": {
|
|
84
84
|
"original": "BasicEventData",
|
|
85
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
85
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
86
86
|
"references": {
|
|
87
87
|
"BasicEventData": {
|
|
88
88
|
"location": "import",
|
|
@@ -60,7 +60,7 @@ export class VviinnImageView {
|
|
|
60
60
|
"mutable": false,
|
|
61
61
|
"complexType": {
|
|
62
62
|
"original": "BasicEventData",
|
|
63
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
63
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
64
64
|
"references": {
|
|
65
65
|
"BasicEventData": {
|
|
66
66
|
"location": "import",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, Host, h, State, Event, Prop, Element, } from "@stencil/core";
|
|
2
2
|
import { slotChangeListener } from "../customized-slots";
|
|
3
|
-
import {
|
|
3
|
+
import { campaignTypeNames } from "../../campaign/Campaign";
|
|
4
4
|
export class VviinnModal {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.active = false;
|
|
@@ -15,8 +15,8 @@ export class VviinnModal {
|
|
|
15
15
|
this.vviinnWidgetClose.emit({
|
|
16
16
|
widgetType: "VPS",
|
|
17
17
|
campaignTypeId: "VPS",
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
campaignTypeName: campaignTypeNames["VPS"],
|
|
19
|
+
widgetId: this.buttonElementId,
|
|
20
20
|
});
|
|
21
21
|
}, this.slider ? 500 : 0);
|
|
22
22
|
}
|
|
@@ -93,7 +93,10 @@ export class VviinnModal {
|
|
|
93
93
|
"required": false,
|
|
94
94
|
"optional": true,
|
|
95
95
|
"docs": {
|
|
96
|
-
"tags": [
|
|
96
|
+
"tags": [{
|
|
97
|
+
"text": undefined,
|
|
98
|
+
"name": "internal"
|
|
99
|
+
}],
|
|
97
100
|
"text": ""
|
|
98
101
|
},
|
|
99
102
|
"attribute": "button-element-id",
|
|
@@ -115,7 +118,7 @@ export class VviinnModal {
|
|
|
115
118
|
},
|
|
116
119
|
"complexType": {
|
|
117
120
|
"original": "BasicEventData",
|
|
118
|
-
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId;
|
|
121
|
+
"resolved": "{ widgetType: WidgetType; campaignTypeId: CampaignTypeId; campaignTypeName: CampaignTypeTitle; widgetId?: string; }",
|
|
119
122
|
"references": {
|
|
120
123
|
"BasicEventData": {
|
|
121
124
|
"location": "import",
|