vviinn-widgets 2.46.0 → 2.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-3b910c03.js → package-7ecd61da.js} +1 -1
- package/dist/cjs/vviinn-carousel_4.cjs.entry.js +85 -30
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-widgets.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/vviinn-carousel/constants.js +7 -0
- package/dist/collection/components/vviinn-carousel/vviinn-carousel.css +25 -16
- package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +45 -16
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +99 -18
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +58 -19
- package/dist/collection/components/vviinn-skeleton/vviinn-skeleton.css +2 -0
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +3 -3
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.css +14 -4
- package/dist/collection/components/vviinn-vpr-widget/{vviinn-vpr-vidget.js → vviinn-vpr-widget.js} +11 -8
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +3 -3
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css +1 -0
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +3 -3
- package/dist/collection/locale/resources-vpr.js +3 -0
- package/dist/collection/utils/number/index.js +6 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{package-cae9f186.js → package-a6086fb5.js} +1 -1
- package/dist/esm/vviinn-carousel_4.entry.js +85 -30
- package/dist/esm/vviinn-vpr-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-widget.entry.js +2 -2
- package/dist/esm/vviinn-widgets.js +1 -1
- package/dist/types/components/vviinn-carousel/constants.d.ts +7 -0
- package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts +8 -3
- package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +6 -3
- package/dist/types/components/vviinn-vpr-widget/{vviinn-vpr-vidget.d.ts → vviinn-vpr-widget.d.ts} +3 -0
- package/dist/types/components.d.ts +8 -4
- package/dist/types/recommendation/events.d.ts +1 -0
- package/dist/types/utils/number/index.d.ts +2 -0
- package/dist/vviinn-widgets/{p-3d2759e3.entry.js → p-20868b49.entry.js} +1 -1
- package/dist/vviinn-widgets/p-46732250.js +1 -0
- package/dist/vviinn-widgets/{p-4c726a51.entry.js → p-751cd3ed.entry.js} +1 -1
- package/dist/vviinn-widgets/p-c52b052a.entry.js +1 -0
- package/dist/vviinn-widgets/{p-d1592ac5.entry.js → p-caae9751.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-3d2759e3.entry.js → p-20868b49.entry.js} +1 -1
- package/www/build/p-46732250.js +1 -0
- package/www/build/{p-4c726a51.entry.js → p-751cd3ed.entry.js} +1 -1
- package/www/build/p-c52b052a.entry.js +1 -0
- package/www/build/{p-d1592ac5.entry.js → p-caae9751.entry.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-1a1d85b7.js +0 -1
- package/dist/vviinn-widgets/p-d162fe72.entry.js +0 -1
- package/www/build/p-1a1d85b7.js +0 -1
- package/www/build/p-d162fe72.entry.js +0 -1
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"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.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],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[
|
|
17
|
+
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.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],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[1040],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32],"setModeDiscount":[32],"setModeAppliedDiscounts":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[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"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"appliedDiscountPercentage":[2,"applied-discount-percentage"],"currentDiscountPercentage":[2,"current-discount-percentage"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_17.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"setShowAspectRatioError":[16],"showAspectRatioError":[4,"show-aspect-ratio-error"],"cropper":[32],"hidePreloader":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16],"capture":[1]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-text-search",{"clearSearchQuery":[4,"clear-search-query"],"initialSearchQuery":[1,"initial-search-query"],"searchQuery":[32]}],[1,"vviinn-wrong-aspect-ratio",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"cameraButtonClicked":[4,"camera-button-clicked"],"selected":[32],"videoInitialized":[32],"zoomCapabilities":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraEnabled":[32],"cameraButtonClicked":[32],"uploadSource":[32],"showAspectRatioError":[32],"products":[32],"initialSearchQuery":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"vviinnTextSearchFinished","trackTextSearchFinished"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"buttonPressed":[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],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"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"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -6,9 +6,15 @@ const index = require('./index-5619b5ec.js');
|
|
|
6
6
|
const search_store = require('./search.store-0b319593.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
8
|
const customizedSlots = require('./customized-slots-1b59bd38.js');
|
|
9
|
-
const _package = require('./package-
|
|
9
|
+
const _package = require('./package-7ecd61da.js');
|
|
10
10
|
const index$1 = require('./index-279a6a0f.js');
|
|
11
11
|
|
|
12
|
+
const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
|
+
index.h("path", { d: "M7.5 22C6.95 22 6.47917 21.8042 6.0875 21.4125C5.69583 21.0208 5.5 20.55 5.5 20C5.5 19.45 5.69583 18.9792 6.0875 18.5875C6.47917 18.1958 6.95 18 7.5 18C8.05 18 8.52083 18.1958 8.9125 18.5875C9.30417 18.9792 9.5 19.45 9.5 20C9.5 20.55 9.30417 21.0208 8.9125 21.4125C8.52083 21.8042 8.05 22 7.5 22ZM17.5 22C16.95 22 16.4792 21.8042 16.0875 21.4125C15.6958 21.0208 15.5 20.55 15.5 20C15.5 19.45 15.6958 18.9792 16.0875 18.5875C16.4792 18.1958 16.95 18 17.5 18C18.05 18 18.5208 18.1958 18.9125 18.5875C19.3042 18.9792 19.5 19.45 19.5 20C19.5 20.55 19.3042 21.0208 18.9125 21.4125C18.5208 21.8042 18.05 22 17.5 22ZM6.65 6L9.05 11H16.05L18.8 6H6.65ZM5.7 4H20.45C20.8333 4 21.125 4.17083 21.325 4.5125C21.525 4.85417 21.5333 5.2 21.35 5.55L17.8 11.95C17.6167 12.2833 17.3708 12.5417 17.0625 12.725C16.7542 12.9083 16.4167 13 16.05 13H8.6L7.5 15H18.5C18.7833 15 19.0208 15.0958 19.2125 15.2875C19.4042 15.4792 19.5 15.7167 19.5 16C19.5 16.2833 19.4042 16.5208 19.2125 16.7125C19.0208 16.9042 18.7833 17 18.5 17H7.5C6.75 17 6.18333 16.6708 5.8 16.0125C5.41667 15.3542 5.4 14.7 5.75 14.05L7.1 11.6L3.5 4H2.5C2.21667 4 1.97917 3.90417 1.7875 3.7125C1.59583 3.52083 1.5 3.28333 1.5 3C1.5 2.71667 1.59583 2.47917 1.7875 2.2875C1.97917 2.09583 2.21667 2 2.5 2H4.125C4.30833 2 4.48333 2.05 4.65 2.15C4.81667 2.25 4.94167 2.39167 5.025 2.575L5.7 4Z", fill: "#525252" })));
|
|
14
|
+
|
|
15
|
+
const CheckCircleIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
16
|
+
index.h("path", { d: "M11.1 13.8L8.95 11.65C8.76667 11.4667 8.53333 11.375 8.25 11.375C7.96667 11.375 7.73333 11.4667 7.55 11.65C7.36667 11.8333 7.275 12.0667 7.275 12.35C7.275 12.6333 7.36667 12.8667 7.55 13.05L10.4 15.9C10.6 16.1 10.8333 16.2 11.1 16.2C11.3667 16.2 11.6 16.1 11.8 15.9L17.45 10.25C17.6333 10.0667 17.725 9.83333 17.725 9.55C17.725 9.26667 17.6333 9.03333 17.45 8.85C17.2667 8.66667 17.0333 8.575 16.75 8.575C16.4667 8.575 16.2333 8.66667 16.05 8.85L11.1 13.8ZM12.5 22C11.1167 22 9.81667 21.7375 8.6 21.2125C7.38333 20.6875 6.325 19.975 5.425 19.075C4.525 18.175 3.8125 17.1167 3.2875 15.9C2.7625 14.6833 2.5 13.3833 2.5 12C2.5 10.6167 2.7625 9.31667 3.2875 8.1C3.8125 6.88333 4.525 5.825 5.425 4.925C6.325 4.025 7.38333 3.3125 8.6 2.7875C9.81667 2.2625 11.1167 2 12.5 2C13.8833 2 15.1833 2.2625 16.4 2.7875C17.6167 3.3125 18.675 4.025 19.575 4.925C20.475 5.825 21.1875 6.88333 21.7125 8.1C22.2375 9.31667 22.5 10.6167 22.5 12C22.5 13.3833 22.2375 14.6833 21.7125 15.9C21.1875 17.1167 20.475 18.175 19.575 19.075C18.675 19.975 17.6167 20.6875 16.4 21.2125C15.1833 21.7375 13.8833 22 12.5 22ZM12.5 20C14.7333 20 16.625 19.225 18.175 17.675C19.725 16.125 20.5 14.2333 20.5 12C20.5 9.76667 19.725 7.875 18.175 6.325C16.625 4.775 14.7333 4 12.5 4C10.2667 4 8.375 4.775 6.825 6.325C5.275 7.875 4.5 9.76667 4.5 12C4.5 14.2333 5.275 16.125 6.825 17.675C8.375 19.225 10.2667 20 12.5 20Z", fill: "#0FC373" })));
|
|
17
|
+
|
|
12
18
|
const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
19
|
index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
|
|
14
20
|
|
|
@@ -16,12 +22,27 @@ const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg",
|
|
|
16
22
|
index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }),
|
|
17
23
|
index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
|
|
18
24
|
|
|
19
|
-
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;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) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.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)}}";
|
|
20
|
-
|
|
21
25
|
const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
|
|
22
26
|
const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
|
|
23
27
|
const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
|
|
24
28
|
const CONTENT_GROUP_CSS_CLASS = "items-group";
|
|
29
|
+
const SET_MODE_INITIAL_DISCOUNT = 5;
|
|
30
|
+
const SET_MODE_MAX_DISCOUNT = 15;
|
|
31
|
+
const SET_MODE_DISCOUNT_STEP = 5;
|
|
32
|
+
|
|
33
|
+
const numberUnderDivisionSemigroup = {
|
|
34
|
+
concat: (x, y) => x / y,
|
|
35
|
+
};
|
|
36
|
+
Object.assign(Object.assign({}, numberUnderDivisionSemigroup), { empty: 1 });
|
|
37
|
+
const calculateDiscount = (price, discount) => {
|
|
38
|
+
return Math.round(price * (1 - discount / 100) * 100) / 100;
|
|
39
|
+
};
|
|
40
|
+
const generateRandomNumber = (min, max) => {
|
|
41
|
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
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}.body.set{justify-content:space-between;overflow-x:auto;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}.body.set .content{max-width:-moz-fit-content;max-width:fit-content;overflow:unset}.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;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.set{grid-gap:20px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.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}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}";
|
|
45
|
+
|
|
25
46
|
const VviinnCarousel = class {
|
|
26
47
|
constructor(hostRef) {
|
|
27
48
|
index.registerInstance(this, hostRef);
|
|
@@ -42,11 +63,11 @@ const VviinnCarousel = class {
|
|
|
42
63
|
this.recommendations[recommendationIndex + step];
|
|
43
64
|
let element = this.el.querySelector(`[data-id="${productId}"]`);
|
|
44
65
|
const button = element.shadowRoot.querySelector(".update-button");
|
|
45
|
-
button.classList.add("hidden");
|
|
66
|
+
button === null || button === void 0 ? void 0 : button.classList.add("hidden");
|
|
46
67
|
this.crossSellingRecommendations = [...newCrossSellingRecommendations];
|
|
47
68
|
const animationTimer = setTimeout(() => {
|
|
48
69
|
if (recommendationIndex + step * 2 <= this.recommendations.length - 1) {
|
|
49
|
-
button.classList.remove("hidden");
|
|
70
|
+
button === null || button === void 0 ? void 0 : button.classList.remove("hidden");
|
|
50
71
|
}
|
|
51
72
|
clearTimeout(animationTimer);
|
|
52
73
|
}, animationInterval);
|
|
@@ -57,6 +78,8 @@ const VviinnCarousel = class {
|
|
|
57
78
|
this.activeContentGroup = 0;
|
|
58
79
|
this.isRTL = false;
|
|
59
80
|
this.crossSellingRecommendations = [];
|
|
81
|
+
this.setModeDiscount = SET_MODE_INITIAL_DISCOUNT;
|
|
82
|
+
this.setModeAppliedDiscounts = {};
|
|
60
83
|
this.mode = "continuity";
|
|
61
84
|
this.imageWidth = 140;
|
|
62
85
|
this.showScroll = true;
|
|
@@ -77,8 +100,11 @@ const VviinnCarousel = class {
|
|
|
77
100
|
this.isSetMode = this.mode === "set";
|
|
78
101
|
this.isGridMode = this.mode === "grid";
|
|
79
102
|
this.isContinuityMode = this.mode === "continuity";
|
|
80
|
-
this.isGridLike = this.isGridMode || this.isSetMode;
|
|
81
103
|
const columnsNumber = this.getColumnsNumber();
|
|
104
|
+
if (this.isSetMode) {
|
|
105
|
+
this.sourceProduct = this.recommendations[0];
|
|
106
|
+
this.recommendations = this.recommendations.slice(1);
|
|
107
|
+
}
|
|
82
108
|
if (this.isSetMode && this.recommendations.length >= columnsNumber) {
|
|
83
109
|
this.crossSellingRecommendations = this.recommendations.slice(0, columnsNumber);
|
|
84
110
|
}
|
|
@@ -110,6 +136,18 @@ const VviinnCarousel = class {
|
|
|
110
136
|
getItemWidthFromDocument() {
|
|
111
137
|
return parseInt(getComputedStyle(document.body).getPropertyValue(CAROUSEL_IMAGE_WIDTH_CSS_VAR));
|
|
112
138
|
}
|
|
139
|
+
async trackAddToBasket({ detail }) {
|
|
140
|
+
if (!this.isSetMode)
|
|
141
|
+
return;
|
|
142
|
+
const { productId } = detail;
|
|
143
|
+
if (this.setModeAppliedDiscounts.hasOwnProperty(productId))
|
|
144
|
+
return;
|
|
145
|
+
this.setModeAppliedDiscounts = Object.assign(Object.assign({}, this.setModeAppliedDiscounts), { [productId]: this.setModeDiscount });
|
|
146
|
+
const isMaxDiscount = this.setModeDiscount === SET_MODE_MAX_DISCOUNT;
|
|
147
|
+
if (!isMaxDiscount) {
|
|
148
|
+
this.setModeDiscount += SET_MODE_DISCOUNT_STEP;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
113
151
|
setItemWidth() {
|
|
114
152
|
const widthInDocument = this.getItemWidthFromDocument();
|
|
115
153
|
const itemWidth = isNaN(widthInDocument)
|
|
@@ -121,8 +159,8 @@ const VviinnCarousel = class {
|
|
|
121
159
|
return {
|
|
122
160
|
content: true,
|
|
123
161
|
[this.moveDirection]: true,
|
|
124
|
-
[this.
|
|
125
|
-
"show-scrollbar": this.showScroll,
|
|
162
|
+
[this.mode]: true,
|
|
163
|
+
"show-scrollbar": this.isSetMode ? false : this.showScroll,
|
|
126
164
|
};
|
|
127
165
|
}
|
|
128
166
|
handleResize() {
|
|
@@ -243,12 +281,18 @@ const VviinnCarousel = class {
|
|
|
243
281
|
}
|
|
244
282
|
getClassMap() {
|
|
245
283
|
return {
|
|
246
|
-
[this.
|
|
284
|
+
[this.mode]: true,
|
|
247
285
|
"show-scrollbar": this.showScrollbar(),
|
|
248
286
|
};
|
|
249
287
|
}
|
|
250
288
|
renderRecommendation(recommendation, rank) {
|
|
251
|
-
|
|
289
|
+
var _a;
|
|
290
|
+
const appliedDiscount = this.setModeAppliedDiscounts[recommendation.productId];
|
|
291
|
+
const setModeDiscount = calculateDiscount((_a = recommendation.price) === null || _a === void 0 ? void 0 : _a.actual, appliedDiscount !== null && appliedDiscount !== void 0 ? appliedDiscount : this.setModeDiscount);
|
|
292
|
+
const salePrice = this.isSetMode
|
|
293
|
+
? setModeDiscount
|
|
294
|
+
: recommendation.price.sale;
|
|
295
|
+
return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: salePrice, responsive: this.isGridMode || this.isSetMode, dimmedBackground: this.isContinuityMode || this.isSetMode, campaignTypeId: this.campaignTypeId, index: rank, widgetElementId: this.widgetElementId, widgetVersion: this.widgetVersion, addToBasketShow: this.addToBasketShow, mode: this.mode, "data-id": recommendation.productId, updatingAllCards: this.updatingAllCards, defaultAnimationInterval: this.defaultAnimationInterval, updateButtonLocation: this.updateButtonLocation, appliedDiscountPercentage: appliedDiscount, currentDiscountPercentage: this.setModeDiscount }));
|
|
252
296
|
}
|
|
253
297
|
renderRecommendationGroup(elements) {
|
|
254
298
|
return (index.h("div", { class: CONTENT_GROUP_CSS_CLASS, part: "items-group" }, ...elements));
|
|
@@ -257,7 +301,7 @@ const VviinnCarousel = class {
|
|
|
257
301
|
return elements.map((el) => this.renderRecommendationGroup(el));
|
|
258
302
|
}
|
|
259
303
|
renderRecommendations() {
|
|
260
|
-
return this.
|
|
304
|
+
return this.isGridMode
|
|
261
305
|
? this.renderGrid()
|
|
262
306
|
: this.renderRecommendationsElements();
|
|
263
307
|
}
|
|
@@ -281,7 +325,7 @@ const VviinnCarousel = class {
|
|
|
281
325
|
}, onClick: () => this.scroll(index$1) })));
|
|
282
326
|
}
|
|
283
327
|
render() {
|
|
284
|
-
return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(ChevronIcon, null))), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(ChevronIcon, null)))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
|
|
328
|
+
return (index.h(index.Host, { class: this.getClassMap() }, index.h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, !this.isSetMode && (index.h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isFirstGroup() }, index.h(ChevronIcon, null))), this.isSetMode && (index.h("vviinn-product-card", { part: "product-part", class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: this.sourceProduct.image.thumbnail, price: this.sourceProduct.price.actual, imageRatio: 1, imageWidth: 300, dimmedBackground: true })), index.h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), !this.isSetMode && (index.h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button", disabled: this.gridArrowsDynamic && this.isLastGroup() }, index.h(ChevronIcon, null)))), this.showBullets() && (index.h("div", { class: "bullets" }, this.renderBullets()))));
|
|
285
329
|
}
|
|
286
330
|
get el() { return index.getElement(this); }
|
|
287
331
|
static get watchers() { return {
|
|
@@ -475,7 +519,7 @@ const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
|
|
|
475
519
|
const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
|
|
476
520
|
index.h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, ref: props.ref, onLoad: onLoadEnd })));
|
|
477
521
|
|
|
478
|
-
const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100
|
|
522
|
+
const vviinnProductCardCss = ":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%;--min-image-size-set-mode:155px}.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}.image.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;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:1;background-color:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background-color:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button{height:44px;font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background-color:#f7f7f7}.basket-button-continuity:hover{background-color:#eaeaea}.basket-button-grid:hover{background-color:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background-color:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.set-mode){line-height:20px}:host(.animated) picture::after{mix-blend-mode:normal}:host(.animated) picture::before{opacity:1;animation:pulse 1.8s infinite}:host(.animated) picture::after{content:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\");background-color:transparent;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}:host(.animated) .update-button{display:none}:host(.set-mode) .basket-button{display:flex;gap:8px;align-items:center;box-sizing:border-box;justify-content:center;border:none;background-color:#f4f4f4;font-weight:500;color:#525252}:host(.set-mode) .title{font-weight:400;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.set-mode){align-items:flex-start}:host(.set-mode) .image{border:none;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){position:relative;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode.product-card--source)::after{content:url(\"data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6667 17.3334H8.00002C7.62224 17.3334 7.30558 17.2056 7.05002 16.95C6.79446 16.6945 6.66669 16.3778 6.66669 16C6.66669 15.6222 6.79446 15.3056 7.05002 15.05C7.30558 14.7945 7.62224 14.6667 8.00002 14.6667H14.6667V8.00002C14.6667 7.62224 14.7945 7.30558 15.05 7.05002C15.3056 6.79446 15.6222 6.66669 16 6.66669C16.3778 6.66669 16.6945 6.79446 16.95 7.05002C17.2056 7.30558 17.3334 7.62224 17.3334 8.00002V14.6667H24C24.3778 14.6667 24.6945 14.7945 24.95 15.05C25.2056 15.3056 25.3334 15.6222 25.3334 16C25.3334 16.3778 25.2056 16.6945 24.95 16.95C24.6945 17.2056 24.3778 17.3334 24 17.3334H17.3334V24C17.3334 24.3778 17.2056 24.6945 16.95 24.95C16.6945 25.2056 16.3778 25.3334 16 25.3334C15.6222 25.3334 15.3056 25.2056 15.05 24.95C14.7945 24.6945 14.6667 24.3778 14.6667 24V17.3334Z' fill='%23A8A8A8'/%3E%3C/svg%3E\");background-color:white;position:absolute;padding:16px;top:calc(50% - 48px);right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode.product-card--source)::after{padding:8px;right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .price-container{flex-direction:row;gap:12px}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
|
|
479
523
|
|
|
480
524
|
const VviinnProductCard = class {
|
|
481
525
|
constructor(hostRef) {
|
|
@@ -513,6 +557,8 @@ const VviinnProductCard = class {
|
|
|
513
557
|
this.mode = undefined;
|
|
514
558
|
this.addToBasketShow = undefined;
|
|
515
559
|
this.updateButtonLocation = undefined;
|
|
560
|
+
this.appliedDiscountPercentage = undefined;
|
|
561
|
+
this.currentDiscountPercentage = undefined;
|
|
516
562
|
this.campaignTypeId = undefined;
|
|
517
563
|
this.widgetElementId = undefined;
|
|
518
564
|
this.buttonElementId = undefined;
|
|
@@ -520,11 +566,13 @@ const VviinnProductCard = class {
|
|
|
520
566
|
this.index = 0;
|
|
521
567
|
this.updatingAllCards = undefined;
|
|
522
568
|
this.defaultAnimationInterval = undefined;
|
|
523
|
-
this.imageLoaded = false;
|
|
524
569
|
this.isTransitioning = false;
|
|
525
570
|
}
|
|
526
571
|
connectedCallback() {
|
|
527
572
|
this.productData = this.getProductData();
|
|
573
|
+
this.isSetMode = this.mode === "set";
|
|
574
|
+
this.isGridMode = this.mode === "grid";
|
|
575
|
+
this.isContinuityMode = this.mode === "continuity";
|
|
528
576
|
}
|
|
529
577
|
componentWillLoad() {
|
|
530
578
|
customizedSlots.slotChangeListener(this, this.el);
|
|
@@ -602,29 +650,30 @@ const VviinnProductCard = class {
|
|
|
602
650
|
};
|
|
603
651
|
return this.responsive ? ResponsiveImage(props) : Image(props);
|
|
604
652
|
}
|
|
605
|
-
generateRandomNumber(min, max) {
|
|
606
|
-
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
607
|
-
}
|
|
608
653
|
render() {
|
|
609
654
|
var _a, _b, _c;
|
|
610
655
|
return (index.h(index.Host, { part: "product-card", class: {
|
|
611
656
|
dimmed: this.dimmedBackground,
|
|
612
657
|
animated: this.isTransitioning,
|
|
613
|
-
|
|
658
|
+
"set-mode": this.isSetMode,
|
|
659
|
+
}, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), this.isTransitioning ? (index.h(index.Fragment, null, index.h("vviinn-skeleton", { height: 20 }), index.h("vviinn-skeleton", { height: 20, halfWidth: true }))) : (index.h(index.Fragment, null, index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : search_store.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : search_store.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : search_store.state.locale }))), (this.addToBasketShow || this.isSetMode) && (index.h(index.Fragment, null, this.isTransitioning ? (index.h("vviinn-skeleton", { height: 44 })) : (index.h("button", { class: {
|
|
614
660
|
"basket-button": true,
|
|
615
|
-
"basket-button-grid": this.
|
|
616
|
-
"basket-button-continuity ": this.
|
|
661
|
+
"basket-button-grid": this.isGridMode || this.isSetMode,
|
|
662
|
+
"basket-button-continuity ": this.isContinuityMode,
|
|
663
|
+
"applied-discount": !!this.appliedDiscountPercentage,
|
|
617
664
|
}, part: "basket-button", onClick: () => {
|
|
618
|
-
this.vviinnAddToBasket.emit(this.productData);
|
|
619
|
-
} }, index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null,
|
|
665
|
+
this.vviinnAddToBasket.emit(Object.assign(Object.assign({}, this.productData), { discount: this.currentDiscountPercentage }));
|
|
666
|
+
} }, this.isSetMode ? (index.h(index.Fragment, null, this.appliedDiscountPercentage ? (index.h(CheckCircleIcon, null)) : (index.h(BasketIcon, null)), index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null, this.appliedDiscountPercentage
|
|
667
|
+
? `${this.appliedDiscountPercentage}% saved`
|
|
668
|
+
: i18next.instance.t("setBasketButtonText"))))) : (index.h("slot", { name: "vviinn-basket-button-text" }, index.h("span", null, i18next.instance.t("basketButtonText")))))))), this.isSetMode && !this.appliedDiscountPercentage && (index.h("button", { class: {
|
|
620
669
|
"update-button": true,
|
|
621
670
|
hidden: this.updateButtonLocation === "onTop",
|
|
622
671
|
}, part: "update-button-item", onClick: () => {
|
|
623
672
|
this.vviinnCrossSellingClick.emit({
|
|
624
|
-
animationInterval:
|
|
673
|
+
animationInterval: generateRandomNumber(800, 1400),
|
|
625
674
|
productData: this.productData,
|
|
626
675
|
});
|
|
627
|
-
} }, index.h("slot", { name: "vviinn-update-icon-item" }, index.h(UpdateIcon, null))))
|
|
676
|
+
} }, index.h("slot", { name: "vviinn-update-icon-item" }, index.h(UpdateIcon, null))))));
|
|
628
677
|
}
|
|
629
678
|
get el() { return index.getElement(this); }
|
|
630
679
|
static get watchers() { return {
|
|
@@ -634,7 +683,7 @@ const VviinnProductCard = class {
|
|
|
634
683
|
};
|
|
635
684
|
VviinnProductCard.style = vviinnProductCardCss;
|
|
636
685
|
|
|
637
|
-
const vviinnSkeletonCss = ":host{display:block;width:100%;height:100%}.vviinn-skeleton{animation:pulse 1.2s infinite}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
|
|
686
|
+
const vviinnSkeletonCss = ":host{display:block;width:100%;height:100%}.vviinn-skeleton{display:inline-block;animation:pulse 1.2s infinite;line-height:20px}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";
|
|
638
687
|
|
|
639
688
|
const VviinnSkeleton = class {
|
|
640
689
|
constructor(hostRef) {
|
|
@@ -1329,17 +1378,20 @@ const resources = {
|
|
|
1329
1378
|
translation: {
|
|
1330
1379
|
noResultText: "Keine Ergebnisse! Versuche es bitte später erneut.",
|
|
1331
1380
|
basketButtonText: "In den Warenkorb",
|
|
1381
|
+
//TODO: Add translations
|
|
1382
|
+
setBasketButtonText: "Buy as set",
|
|
1332
1383
|
},
|
|
1333
1384
|
},
|
|
1334
1385
|
en: {
|
|
1335
1386
|
translation: {
|
|
1336
1387
|
noResultText: "No results! Please, try again later.",
|
|
1337
1388
|
basketButtonText: "Add to Basket",
|
|
1389
|
+
setBasketButtonText: "Buy as set",
|
|
1338
1390
|
},
|
|
1339
1391
|
},
|
|
1340
1392
|
};
|
|
1341
1393
|
|
|
1342
|
-
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%}.
|
|
1394
|
+
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%}.widget-header{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}.widget-header h3{margin-top:8px;margin-bottom:0;font-size:14px;font-weight:400;line-height:20px}.update-button{display:flex;align-items:center;justify-content:center;color:#525252;gap:8px;padding:8px 10px;background:rgb(244, 244, 244);border:none;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}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}";
|
|
1343
1395
|
|
|
1344
1396
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
1345
1397
|
var t = {};
|
|
@@ -1476,6 +1528,9 @@ const VviinnVprWidget = class {
|
|
|
1476
1528
|
this.getRecommendations();
|
|
1477
1529
|
this.vviinnWidgetLoad.emit(this.getBasicEventData());
|
|
1478
1530
|
this.trackWidgetEvent("load");
|
|
1531
|
+
this.isSetMode = this.mode === "set";
|
|
1532
|
+
this.isGridMode = this.mode === "grid";
|
|
1533
|
+
this.isContinuityMode = this.mode === "continuity";
|
|
1479
1534
|
}
|
|
1480
1535
|
async componentWillLoad() {
|
|
1481
1536
|
await i18next.instance.init({
|
|
@@ -1642,17 +1697,17 @@ const VviinnVprWidget = class {
|
|
|
1642
1697
|
return (index.h(index.Host, { class: {
|
|
1643
1698
|
loaded: true,
|
|
1644
1699
|
empty: this.recommendations.length == 0,
|
|
1645
|
-
[this.mode
|
|
1646
|
-
}, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "
|
|
1700
|
+
[this.mode]: true,
|
|
1701
|
+
}, "aria-hidden": "false" }, this.addToBasketShow && index.h(customizedSlots.SlotSkeleton, null), index.h(index.Fragment, null, this.renderExternalCSS(), index.h("style", null, search_store.state.fallbackStyles), index.h("div", { class: "widget-header" }, index.h("div", null, index.h("h2", { part: "recommendations-title" }, this.isSetMode ? "Buy a set to get discount" : this.blockTitle), this.isSetMode && (index.h("h3", null, "Save up to 15% for buying products from the list"))), this.isSetMode && this.updateButtonLocation !== "onItem" ? (index.h("button", { class: "update-button", part: "update-button-top", onClick: () => (this.updatingAllCards = true) }, index.h("slot", { name: "vviinn-update-icon-top" }, index.h(UpdateIcon, null)), index.h("span", null, "Suggest New Set"))) : null), this.recommendations.length > 0 &&
|
|
1647
1702
|
(this.useCarousel ? this.renderCarousel() : this.renderResults()), this.recommendations.length === 0 && this.hasErrorOnLoad && (index.h("p", { class: "no-result-text" }, this.noResultText.length
|
|
1648
1703
|
? this.noResultText
|
|
1649
1704
|
: i18next.instance.t("noResultText"))))));
|
|
1650
1705
|
}
|
|
1651
1706
|
renderRecommendation(recommendation, index$1) {
|
|
1652
|
-
return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.
|
|
1707
|
+
return (index.h("vviinn-product-card", { part: "product-part", productId: recommendation.productId, productTitle: recommendation.title, productType: recommendation.productType, deeplink: recommendation.deeplink, image: recommendation.image.thumbnail, brand: recommendation.brand, imageWidth: this.imageWidth, imageRatio: 1, price: recommendation.price.actual, salePrice: recommendation.price.sale, responsive: this.isGridMode, addToBasketShow: this.addToBasketShow, mode: this.mode, dimmedBackground: this.useDimmedBackgroundInCard(), campaignTypeId: this.campaignType, index: index$1, widgetElementId: this.id, widgetVersion: _package.version }));
|
|
1653
1708
|
}
|
|
1654
1709
|
useDimmedBackgroundInCard() {
|
|
1655
|
-
return this.
|
|
1710
|
+
return this.isContinuityMode || this.isSetMode || !this.useCarousel;
|
|
1656
1711
|
}
|
|
1657
1712
|
renderResults() {
|
|
1658
1713
|
return (index.h("div", { class: "recommendations-grid", part: "recommendations-grid" }, this.recommendations.map((r, i) => this.renderRecommendation(r, i))));
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-7ecd61da.js');
|
|
7
7
|
const VisualSearchIcon = require('./VisualSearchIcon-1180d079.js');
|
|
8
8
|
|
|
9
9
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-7ecd61da.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-1b59bd38.js');
|
|
8
8
|
const constants = require('./constants-7684cbfc.js');
|
|
9
9
|
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
6
|
const search_store = require('./search.store-0b319593.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
|
-
const _package = require('./package-
|
|
8
|
+
const _package = require('./package-7ecd61da.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-1b59bd38.js');
|
|
10
10
|
const index$1 = require('./index-279a6a0f.js');
|
|
11
11
|
const constants = require('./constants-7684cbfc.js');
|
|
@@ -84,7 +84,7 @@ const videoStreamSettings = {
|
|
|
84
84
|
frameRate: { ideal: 30 },
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.results-page .text-search-wrapper{width:100%;padding:24px}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.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{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.image-wrapper{padding:0}.filters-wrapper{padding-left:24px;min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.filters-wrapper{padding-left:24px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
87
|
+
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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.results-page .text-search-wrapper{width:100%;padding:24px}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.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{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.image-wrapper{padding:0}.filters-wrapper{padding-left:24px;min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.filters-wrapper{padding-left:24px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
88
88
|
|
|
89
89
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
|
90
90
|
var t = {};
|
|
@@ -20,7 +20,7 @@ const patchBrowser = () => {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
patchBrowser().then(options => {
|
|
23
|
-
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.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],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[
|
|
23
|
+
return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.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],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[1040],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32],"setModeDiscount":[32],"setModeAppliedDiscounts":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"],[0,"vviinnAddToBasket","trackAddToBasket"]]],[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"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"appliedDiscountPercentage":[2,"applied-discount-percentage"],"currentDiscountPercentage":[2,"current-discount-percentage"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_17.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"setShowAspectRatioError":[16],"showAspectRatioError":[4,"show-aspect-ratio-error"],"cropper":[32],"hidePreloader":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"loading":[4],"accept":[1],"resetVpsButton":[16],"capture":[1]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-text-search",{"clearSearchQuery":[4,"clear-search-query"],"initialSearchQuery":[1,"initial-search-query"],"searchQuery":[32]}],[1,"vviinn-wrong-aspect-ratio",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"cameraButtonClicked":[4,"camera-button-clicked"],"selected":[32],"videoInitialized":[32],"zoomCapabilities":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraEnabled":[32],"cameraButtonClicked":[32],"uploadSource":[32],"showAspectRatioError":[32],"products":[32],"initialSearchQuery":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"vviinnTextSearchFinished","trackTextSearchFinished"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"textSearchShow":[4,"text-search-show"],"apiPath":[1,"api-path"],"buttonPressed":[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],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"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"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"entries": [
|
|
3
3
|
"./components/image-search/search-filters/search-filters.js",
|
|
4
4
|
"./components/vviinn-button/vviinn-button.js",
|
|
5
|
-
"./components/vviinn-vpr-widget/vviinn-vpr-
|
|
5
|
+
"./components/vviinn-vpr-widget/vviinn-vpr-widget.js",
|
|
6
6
|
"./components/vviinn-carousel/vviinn-carousel.js",
|
|
7
7
|
"./components/vviinn-error/vviinn-error.js",
|
|
8
8
|
"./components/vviinn-error/vviinn-empty-results/vviinn-empty-results.js",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
|
|
2
|
+
export const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
|
|
3
|
+
export const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
|
|
4
|
+
export const CONTENT_GROUP_CSS_CLASS = "items-group";
|
|
5
|
+
export const SET_MODE_INITIAL_DISCOUNT = 5;
|
|
6
|
+
export const SET_MODE_MAX_DISCOUNT = 15;
|
|
7
|
+
export const SET_MODE_DISCOUNT_STEP = 5;
|
|
@@ -12,14 +12,29 @@
|
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
16
|
-
|
|
15
|
+
.body.set {
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
overflow-x: auto;
|
|
18
|
+
margin-left: auto;
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: row;
|
|
21
|
+
gap: 112px;
|
|
17
22
|
}
|
|
18
23
|
|
|
19
|
-
.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
24
|
+
.body.set::-webkit-scrollbar {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media (max-width: 768px) {
|
|
29
|
+
.body.set {
|
|
30
|
+
gap: 40px;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.body.set .content {
|
|
35
|
+
max-width: -moz-fit-content;
|
|
36
|
+
max-width: fit-content;
|
|
37
|
+
overflow: unset;
|
|
23
38
|
}
|
|
24
39
|
|
|
25
40
|
.bullets {
|
|
@@ -62,6 +77,10 @@
|
|
|
62
77
|
padding-bottom: 16px;
|
|
63
78
|
}
|
|
64
79
|
|
|
80
|
+
.content.set {
|
|
81
|
+
grid-gap: 20px;
|
|
82
|
+
}
|
|
83
|
+
|
|
65
84
|
.content.left > * {
|
|
66
85
|
scroll-snap-align: start;
|
|
67
86
|
}
|
|
@@ -128,17 +147,7 @@ vviinn-product-card::part(price-container) {
|
|
|
128
147
|
text-align: center;
|
|
129
148
|
}
|
|
130
149
|
|
|
131
|
-
:host(.classic) vviinn-product-card::part(title),
|
|
132
|
-
:host(.classic) vviinn-product-card::part(brand),
|
|
133
|
-
:host(.classic) vviinn-product-card::part(type) {
|
|
134
|
-
text-align: center;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
150
|
@media (max-width: 480px) {
|
|
138
|
-
:host(.modern) button {
|
|
139
|
-
display: none;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
151
|
.items-group {
|
|
143
152
|
grid-template-columns: repeat(2, 1fr);
|
|
144
153
|
}
|