vviinn-widgets 2.48.5 → 2.48.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/{package-d6dae17b.js → package-f0a67b4d.js} +1 -1
- package/dist/cjs/vviinn-carousel_4.cjs.entry.js +15 -9
- 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 +4 -4
- package/dist/collection/components/vviinn-carousel/vviinn-carousel.css +1 -2
- package/dist/collection/components/vviinn-carousel/vviinn-carousel.js +3 -1
- package/dist/collection/components/vviinn-product-card/render-helpers.js +1 -1
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.css +14 -3
- package/dist/collection/components/vviinn-product-card/vviinn-product-card.js +7 -4
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +3 -3
- package/dist/esm/{index-ff13425d.js → index-76fe67d1.js} +1 -1
- package/dist/esm/{package-3c563a3a.js → package-c2ef7fb6.js} +1 -1
- package/dist/esm/search-filters_17.entry.js +1 -1
- package/dist/esm/{search.store-eaa5f165.js → search.store-44630818.js} +1 -1
- package/dist/esm/vviinn-carousel_4.entry.js +17 -11
- package/dist/esm/vviinn-preloader.entry.js +1 -1
- 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 +6 -6
- package/dist/types/components/vviinn-product-card/vviinn-product-card.d.ts +2 -1
- package/dist/vviinn-widgets/{p-ad25945b.entry.js → p-00838c02.entry.js} +1 -1
- package/{www/build/p-150f1108.js → dist/vviinn-widgets/p-1c1be428.js} +1 -1
- package/dist/vviinn-widgets/{p-08ef6197.entry.js → p-3aef433a.entry.js} +2 -2
- package/dist/vviinn-widgets/{p-c99391f1.entry.js → p-709108d4.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-dc4d6669.entry.js → p-7701e147.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-8589dbde.entry.js → p-8bb007fb.entry.js} +1 -1
- package/dist/vviinn-widgets/p-9d6c5d3b.entry.js +1 -0
- package/dist/vviinn-widgets/p-da88d6e5.js +1 -0
- package/dist/vviinn-widgets/{p-ec4782a6.js → p-dbcc6488.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-ad25945b.entry.js → p-00838c02.entry.js} +1 -1
- package/{dist/vviinn-widgets/p-150f1108.js → www/build/p-1c1be428.js} +1 -1
- package/www/build/{p-08ef6197.entry.js → p-3aef433a.entry.js} +2 -2
- package/www/build/{p-c99391f1.entry.js → p-709108d4.entry.js} +1 -1
- package/www/build/{p-dc4d6669.entry.js → p-7701e147.entry.js} +1 -1
- package/www/build/{p-8589dbde.entry.js → p-8bb007fb.entry.js} +1 -1
- package/www/build/p-9d6c5d3b.entry.js +1 -0
- package/www/build/p-da88d6e5.js +1 -0
- package/www/build/{p-ec4782a6.js → p-dbcc6488.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-554d2c34.entry.js +0 -1
- package/dist/vviinn-widgets/p-909e2781.js +0 -1
- package/www/build/p-554d2c34.entry.js +0 -1
- package/www/build/p-909e2781.js +0 -1
|
@@ -7,7 +7,7 @@ const search_store = require('./search.store-7605f369.js');
|
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
8
|
const PlusIcon = require('./PlusIcon-5e585127.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-67b24737.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-f0a67b4d.js');
|
|
11
11
|
const index$1 = require('./index-4445cb70.js');
|
|
12
12
|
|
|
13
13
|
const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -43,7 +43,7 @@ const generateRandomNumber = (min, max) => {
|
|
|
43
43
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
-
const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.bullets{
|
|
46
|
+
const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.bullets{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;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}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
|
|
47
47
|
|
|
48
48
|
const VviinnCarousel = class {
|
|
49
49
|
constructor(hostRef) {
|
|
@@ -185,7 +185,8 @@ const VviinnCarousel = class {
|
|
|
185
185
|
calculateMoveStep() {
|
|
186
186
|
const contentWidths = this.getContent().map((el) => el.getBoundingClientRect().width);
|
|
187
187
|
const sum = contentWidths.reduce((acc, val) => acc + val, 0);
|
|
188
|
-
|
|
188
|
+
const contentGap = search_store._function.pipe(window.getComputedStyle(this.getContentNode()), (computedStyle) => computedStyle.getPropertyValue("gap"), (contentGapString) => parseInt(contentGapString.split("px")[0]), (contentGap) => (isNaN(contentGap) ? 0 : contentGap));
|
|
189
|
+
return sum / contentWidths.length + contentGap;
|
|
189
190
|
}
|
|
190
191
|
getHostParent() {
|
|
191
192
|
const parent = this.el.parentNode;
|
|
@@ -509,7 +510,9 @@ const FormattedPrice = (props) => {
|
|
|
509
510
|
minimumFractionDigits: 2,
|
|
510
511
|
}).format(props.price);
|
|
511
512
|
const prefixElement = props.prefix ? (index.h("span", { part: "price-prefix" }, props.prefix + " ")) : null;
|
|
512
|
-
const currencyElement = props.currency ? (index.h("span", { part: "currency" },
|
|
513
|
+
const currencyElement = props.currency ? (index.h("span", { part: "currency" },
|
|
514
|
+
"\u00A0",
|
|
515
|
+
props.currency)) : null;
|
|
513
516
|
return (index.h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` },
|
|
514
517
|
prefixElement,
|
|
515
518
|
formattedPrice,
|
|
@@ -530,7 +533,7 @@ const Image = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
|
|
|
530
533
|
const ResponsiveImage = (props, onLoadEnd = () => undefined) => (index.h("picture", null,
|
|
531
534
|
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 })));
|
|
532
535
|
|
|
533
|
-
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;padding:6px;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 svg{width:20px;height:20px}.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{
|
|
536
|
+
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;overflow-wrap:anywhere;text-overflow:ellipsis;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;padding:6px;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 svg{width:20px;height:20px}.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{font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:unset;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(.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){line-height:20px;align-items:flex-start;height:auto}: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:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .basket-button:hover{background-color:rgb(234, 234, 234)}:host(.set-mode) .title{font-weight:400}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;border:none;aspect-ratio:1;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode) picture .plus-icon{background-color:white;position:absolute;z-index:1;padding:16px;top:calc(50% - 32px);color:#a8a8a8;right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode) picture .plus-icon{padding:8px;top:calc(50% - 24px);right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap}:host(.set-mode) .price-amount{margin-right:12px}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:8px}}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}.discount-label{position:absolute;left:0;top:13px;line-height:20px;padding:2px 4px;border-radius:0px 4px 4px 0px;color:white;background-color:#ff3944;letter-spacing:0.5px}";
|
|
534
537
|
|
|
535
538
|
const VviinnProductCard = class {
|
|
536
539
|
constructor(hostRef) {
|
|
@@ -589,6 +592,12 @@ const VviinnProductCard = class {
|
|
|
589
592
|
componentWillLoad() {
|
|
590
593
|
customizedSlots.slotChangeListener(this, this.el);
|
|
591
594
|
}
|
|
595
|
+
componentDidLoad() {
|
|
596
|
+
this.vviinnProductLoad.emit(this.productData);
|
|
597
|
+
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
598
|
+
this.intersectionObserver.observe(this.imageElement);
|
|
599
|
+
this.addLinksEventListeners();
|
|
600
|
+
}
|
|
592
601
|
crossSellingClickListener({ detail }) {
|
|
593
602
|
const { animationInterval } = detail;
|
|
594
603
|
this.isTransitioning = true;
|
|
@@ -629,10 +638,7 @@ const VviinnProductCard = class {
|
|
|
629
638
|
widgetVersion: this.widgetVersion,
|
|
630
639
|
};
|
|
631
640
|
}
|
|
632
|
-
|
|
633
|
-
this.vviinnProductLoad.emit(this.productData);
|
|
634
|
-
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
635
|
-
this.intersectionObserver.observe(this.imageElement);
|
|
641
|
+
addLinksEventListeners() {
|
|
636
642
|
const links = this.el.shadowRoot.querySelectorAll("a");
|
|
637
643
|
links.forEach((link) => {
|
|
638
644
|
link.addEventListener("click", (event) => {
|
|
@@ -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-f0a67b4d.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-f0a67b4d.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-67b24737.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-7605f369.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
|
-
const _package = require('./package-
|
|
8
|
+
const _package = require('./package-f0a67b4d.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-67b24737.js');
|
|
10
10
|
const index$1 = require('./index-4445cb70.js');
|
|
11
11
|
const constants = require('./constants-7684cbfc.js');
|
|
@@ -469,7 +469,7 @@ const VviinnVpsWidget = class {
|
|
|
469
469
|
return this.isDesktop ? buttons.reverse() : buttons;
|
|
470
470
|
}
|
|
471
471
|
renderResults() {
|
|
472
|
-
if (search_store.searchState.results.length === 0)
|
|
472
|
+
if (search_store.searchState.results.length === 0 || !this.isResultSlide())
|
|
473
473
|
return null;
|
|
474
474
|
if (!this.resultLoaded) {
|
|
475
475
|
this.vviinnResultLoad.emit(this.getBasicEventData());
|
|
@@ -548,10 +548,10 @@ const VviinnVpsWidget = class {
|
|
|
548
548
|
"nothing-found": true,
|
|
549
549
|
hidden: !this.showAspectRatioError,
|
|
550
550
|
} }, index.h("vviinn-wrong-aspect-ratio", { handler: () => this.resetState() })), index.h("div", { class: {
|
|
551
|
-
hidden: search_store.searchState.results.length
|
|
551
|
+
hidden: search_store.searchState.results.length === 0 ||
|
|
552
552
|
this.showAspectRatioError,
|
|
553
553
|
products: true,
|
|
554
|
-
} }, this.
|
|
554
|
+
} }, this.renderResults())))))));
|
|
555
555
|
}
|
|
556
556
|
get el() { return index.getElement(this); }
|
|
557
557
|
static get watchers() { return {
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.bullets {
|
|
14
|
-
margin-top: 16px;
|
|
15
14
|
display: flex;
|
|
16
15
|
flex-direction: row;
|
|
17
16
|
grid-gap: 24px;
|
|
@@ -43,7 +42,7 @@
|
|
|
43
42
|
.content {
|
|
44
43
|
display: flex;
|
|
45
44
|
flex-direction: row;
|
|
46
|
-
|
|
45
|
+
gap: 8px;
|
|
47
46
|
overflow-y: hidden;
|
|
48
47
|
overflow-x: auto;
|
|
49
48
|
flex-grow: 1;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Host, h, } from "@stencil/core";
|
|
2
2
|
import { chunksOf } from "fp-ts/lib/Array";
|
|
3
|
+
import { pipe } from "fp-ts/lib/function";
|
|
3
4
|
import { ChevronIcon } from "../vviinn-icons";
|
|
4
5
|
import { CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_WIDTH_CSS_VAR, COLUMNS_NUMBER_CSS_VAR, CONTENT_GROUP_CSS_CLASS, SET_MODE_DISCOUNT_STEP, SET_MODE_IMAGE_WIDTH, SET_MODE_INITIAL_DISCOUNT, SET_MODE_MAX_DISCOUNT, } from "./constants";
|
|
5
6
|
import { calculateDiscount } from "../../utils/number";
|
|
@@ -145,7 +146,8 @@ export class VviinnCarousel {
|
|
|
145
146
|
calculateMoveStep() {
|
|
146
147
|
const contentWidths = this.getContent().map((el) => el.getBoundingClientRect().width);
|
|
147
148
|
const sum = contentWidths.reduce((acc, val) => acc + val, 0);
|
|
148
|
-
|
|
149
|
+
const contentGap = pipe(window.getComputedStyle(this.getContentNode()), (computedStyle) => computedStyle.getPropertyValue("gap"), (contentGapString) => parseInt(contentGapString.split("px")[0]), (contentGap) => (isNaN(contentGap) ? 0 : contentGap));
|
|
150
|
+
return sum / contentWidths.length + contentGap;
|
|
149
151
|
}
|
|
150
152
|
getHostParent() {
|
|
151
153
|
const parent = this.el.parentNode;
|
|
@@ -17,7 +17,7 @@ const FormattedPrice = (props) => {
|
|
|
17
17
|
minimumFractionDigits: 2,
|
|
18
18
|
}).format(props.price);
|
|
19
19
|
const prefixElement = props.prefix ? (h("span", { part: "price-prefix" }, props.prefix + " ")) : null;
|
|
20
|
-
const currencyElement = props.currency ? (h("span", { part: "currency" }, "
|
|
20
|
+
const currencyElement = props.currency ? (h("span", { part: "currency" }, "\u00A0", props.currency)) : null;
|
|
21
21
|
return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` }, prefixElement, formattedPrice, currencyElement));
|
|
22
22
|
};
|
|
23
23
|
export const Price = (props) => {
|
|
@@ -61,6 +61,8 @@
|
|
|
61
61
|
.title {
|
|
62
62
|
-webkit-box-orient: vertical;
|
|
63
63
|
-webkit-line-clamp: 2;
|
|
64
|
+
overflow-wrap: anywhere;
|
|
65
|
+
text-overflow: ellipsis;
|
|
64
66
|
color: #161616;
|
|
65
67
|
display: -webkit-box;
|
|
66
68
|
font-size: 16px;
|
|
@@ -135,7 +137,6 @@ picture::before {
|
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
.basket-button {
|
|
138
|
-
height: 44px;
|
|
139
140
|
font-size: 16px;
|
|
140
141
|
padding: 10px 12px;
|
|
141
142
|
box-sizing: border-box;
|
|
@@ -145,7 +146,7 @@ picture::before {
|
|
|
145
146
|
|
|
146
147
|
.basket-button.basket-button-grid {
|
|
147
148
|
width: 100%;
|
|
148
|
-
background-color:
|
|
149
|
+
background-color: unset;
|
|
149
150
|
border: 1px solid #dddddd;
|
|
150
151
|
}
|
|
151
152
|
|
|
@@ -278,7 +279,17 @@ picture::before {
|
|
|
278
279
|
|
|
279
280
|
:host(.set-mode) .price-container {
|
|
280
281
|
flex-direction: row;
|
|
281
|
-
|
|
282
|
+
flex-wrap: wrap;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
:host(.set-mode) .price-amount {
|
|
286
|
+
margin-right: 12px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
@media (max-width: 1080px) {
|
|
290
|
+
:host(.set-mode) .price-amount {
|
|
291
|
+
margin-right: 8px;
|
|
292
|
+
}
|
|
282
293
|
}
|
|
283
294
|
|
|
284
295
|
@keyframes pulse {
|
|
@@ -81,6 +81,12 @@ export class VviinnProductCard {
|
|
|
81
81
|
componentWillLoad() {
|
|
82
82
|
slotChangeListener(this, this.el);
|
|
83
83
|
}
|
|
84
|
+
componentDidLoad() {
|
|
85
|
+
this.vviinnProductLoad.emit(this.productData);
|
|
86
|
+
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
87
|
+
this.intersectionObserver.observe(this.imageElement);
|
|
88
|
+
this.addLinksEventListeners();
|
|
89
|
+
}
|
|
84
90
|
crossSellingClickListener({ detail }) {
|
|
85
91
|
const { animationInterval } = detail;
|
|
86
92
|
this.isTransitioning = true;
|
|
@@ -121,10 +127,7 @@ export class VviinnProductCard {
|
|
|
121
127
|
widgetVersion: this.widgetVersion,
|
|
122
128
|
};
|
|
123
129
|
}
|
|
124
|
-
|
|
125
|
-
this.vviinnProductLoad.emit(this.productData);
|
|
126
|
-
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
127
|
-
this.intersectionObserver.observe(this.imageElement);
|
|
130
|
+
addLinksEventListeners() {
|
|
128
131
|
const links = this.el.shadowRoot.querySelectorAll("a");
|
|
129
132
|
links.forEach((link) => {
|
|
130
133
|
link.addEventListener("click", (event) => {
|
|
@@ -419,7 +419,7 @@ export class VviinnVpsWidget {
|
|
|
419
419
|
return this.isDesktop ? buttons.reverse() : buttons;
|
|
420
420
|
}
|
|
421
421
|
renderResults() {
|
|
422
|
-
if (searchState.results.length === 0)
|
|
422
|
+
if (searchState.results.length === 0 || !this.isResultSlide())
|
|
423
423
|
return null;
|
|
424
424
|
if (!this.resultLoaded) {
|
|
425
425
|
this.vviinnResultLoad.emit(this.getBasicEventData());
|
|
@@ -498,10 +498,10 @@ export class VviinnVpsWidget {
|
|
|
498
498
|
"nothing-found": true,
|
|
499
499
|
hidden: !this.showAspectRatioError,
|
|
500
500
|
} }, h("vviinn-wrong-aspect-ratio", { handler: () => this.resetState() })), h("div", { class: {
|
|
501
|
-
hidden: searchState.results.length
|
|
501
|
+
hidden: searchState.results.length === 0 ||
|
|
502
502
|
this.showAspectRatioError,
|
|
503
503
|
products: true,
|
|
504
|
-
} }, this.
|
|
504
|
+
} }, this.renderResults())))))));
|
|
505
505
|
}
|
|
506
506
|
static get is() { return "vviinn-vps-widget"; }
|
|
507
507
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as commonjsGlobal, o as createCommonjsModule } from './search.store-
|
|
1
|
+
import { n as commonjsGlobal, o as createCommonjsModule } from './search.store-44630818.js';
|
|
2
2
|
|
|
3
3
|
// Unique ID creation requires a high quality random # generator. In the browser we therefore
|
|
4
4
|
// require the crypto API and do not support built-in fallback to lower quality random number
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { s as searchState,
|
|
2
|
+
import { s as searchState, _ as _function, O as Option, q as fromAlt, r as foldValueObject, u as scaleWithSized, v as center, w as makeRectangularSearchRequest, x as detectedObjectEq, y as toFile, z as processSelectedFile, E as Either, B as match, o as createCommonjsModule, n as commonjsGlobal, C as sequenceToOption, D as fromImage, F as dimensionsFromImage, G as scaleByLargestSide, N as NonEmptyArray, H as processSelectedText } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
4
|
import { P as PlusIcon } from './PlusIcon-af795e23.js';
|
|
5
5
|
import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-e56251a2.js';
|
|
@@ -17388,4 +17388,4 @@ const processSelectedFile = async (file) => {
|
|
|
17388
17388
|
return session;
|
|
17389
17389
|
};
|
|
17390
17390
|
|
|
17391
|
-
export { Apply as A, match$1 as B, sequenceToOption as C, fromImage as D, Either as E, dimensionsFromImage as F, scaleByLargestSide as G, processSelectedText as H, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T,
|
|
17391
|
+
export { Apply as A, match$1 as B, sequenceToOption as C, fromImage as D, Either as E, dimensionsFromImage as F, scaleByLargestSide as G, processSelectedText as H, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T, _function as _, _Array as a, state$1 as b, chainW as c, createInitGetRequest as d, map$3 as e, fromEither as f, getApiPath as g, has as h, match as i, arrayToQueryString as j, parseExcluded as k, checkEmpryString as l, makeRequest as m, commonjsGlobal as n, createCommonjsModule as o, pipe as p, fromAlt as q, foldValueObject as r, searchState as s, tuple as t, scaleWithSized as u, center as v, makeRectangularSearchRequest as w, detectedObjectEq as x, toFile as y, processSelectedFile as z };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { h, r as registerInstance, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-1f3eaf12.js';
|
|
2
|
-
import { _ as _Array, O as Option, S as Semigroup,
|
|
2
|
+
import { _ as _function, a as _Array, O as Option, S as Semigroup, h as has, t as tuple, E as Either, s as searchState, b as state, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, d as createInitGetRequest, A as Apply, e as map, i as match, j as arrayToQueryString, k as parseExcluded, T as TaskEither, l as checkEmpryString } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
4
|
import { P as PlusIcon } from './PlusIcon-af795e23.js';
|
|
5
5
|
import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-e56251a2.js';
|
|
6
|
-
import { v as version } from './package-
|
|
7
|
-
import { v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './index-
|
|
6
|
+
import { v as version } from './package-c2ef7fb6.js';
|
|
7
|
+
import { v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './index-76fe67d1.js';
|
|
8
8
|
|
|
9
9
|
const BasketIcon = () => (h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
10
10
|
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" })));
|
|
@@ -39,7 +39,7 @@ const generateRandomNumber = (min, max) => {
|
|
|
39
39
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.bullets{
|
|
42
|
+
const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.bullets{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;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}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
|
|
43
43
|
|
|
44
44
|
const VviinnCarousel = class {
|
|
45
45
|
constructor(hostRef) {
|
|
@@ -181,7 +181,8 @@ const VviinnCarousel = class {
|
|
|
181
181
|
calculateMoveStep() {
|
|
182
182
|
const contentWidths = this.getContent().map((el) => el.getBoundingClientRect().width);
|
|
183
183
|
const sum = contentWidths.reduce((acc, val) => acc + val, 0);
|
|
184
|
-
|
|
184
|
+
const contentGap = _function.pipe(window.getComputedStyle(this.getContentNode()), (computedStyle) => computedStyle.getPropertyValue("gap"), (contentGapString) => parseInt(contentGapString.split("px")[0]), (contentGap) => (isNaN(contentGap) ? 0 : contentGap));
|
|
185
|
+
return sum / contentWidths.length + contentGap;
|
|
185
186
|
}
|
|
186
187
|
getHostParent() {
|
|
187
188
|
const parent = this.el.parentNode;
|
|
@@ -505,7 +506,9 @@ const FormattedPrice = (props) => {
|
|
|
505
506
|
minimumFractionDigits: 2,
|
|
506
507
|
}).format(props.price);
|
|
507
508
|
const prefixElement = props.prefix ? (h("span", { part: "price-prefix" }, props.prefix + " ")) : null;
|
|
508
|
-
const currencyElement = props.currency ? (h("span", { part: "currency" },
|
|
509
|
+
const currencyElement = props.currency ? (h("span", { part: "currency" },
|
|
510
|
+
"\u00A0",
|
|
511
|
+
props.currency)) : null;
|
|
509
512
|
return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` },
|
|
510
513
|
prefixElement,
|
|
511
514
|
formattedPrice,
|
|
@@ -526,7 +529,7 @@ const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
|
|
|
526
529
|
const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
|
|
527
530
|
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 })));
|
|
528
531
|
|
|
529
|
-
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;padding:6px;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 svg{width:20px;height:20px}.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{
|
|
532
|
+
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;overflow-wrap:anywhere;text-overflow:ellipsis;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;padding:6px;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 svg{width:20px;height:20px}.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{font-size:16px;padding:10px 12px;box-sizing:border-box;border:none;cursor:pointer}.basket-button.basket-button-grid{width:100%;background-color:unset;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(.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){line-height:20px;align-items:flex-start;height:auto}: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:not(.animated)) .basket-button{margin-top:auto}:host(.set-mode) .basket-button:hover{background-color:rgb(234, 234, 234)}:host(.set-mode) .title{font-weight:400}:host(.set-mode) .image{width:var(--vviinn-set-mode-image-width, 100%);height:auto;border:none;aspect-ratio:1;min-width:var(--min-image-size-set-mode);min-height:var(--min-image-size-set-mode)}:host(.set-mode.product-card--source){height:-moz-fit-content;height:fit-content;flex-grow:1}:host(.set-mode.product-card--source) .image{aspect-ratio:1;width:100%;height:100%}:host(.set-mode) picture .plus-icon{background-color:white;position:absolute;z-index:1;padding:16px;top:calc(50% - 32px);color:#a8a8a8;right:-88px;outline:1px solid #f4f4f4;border-radius:50%;width:32px;height:32px}@media (max-width: 768px){:host(.set-mode) picture .plus-icon{padding:8px;top:calc(50% - 24px);right:-24px}}:host(.set-mode) .basket-button.applied-discount{background:transparent;border:1px solid #e0e0e0}:host(.set-mode) .price-container{flex-direction:row;flex-wrap:wrap}:host(.set-mode) .price-amount{margin-right:12px}@media (max-width: 1080px){:host(.set-mode) .price-amount{margin-right:8px}}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}.discount-label{position:absolute;left:0;top:13px;line-height:20px;padding:2px 4px;border-radius:0px 4px 4px 0px;color:white;background-color:#ff3944;letter-spacing:0.5px}";
|
|
530
533
|
|
|
531
534
|
const VviinnProductCard = class {
|
|
532
535
|
constructor(hostRef) {
|
|
@@ -585,6 +588,12 @@ const VviinnProductCard = class {
|
|
|
585
588
|
componentWillLoad() {
|
|
586
589
|
slotChangeListener(this, this.el);
|
|
587
590
|
}
|
|
591
|
+
componentDidLoad() {
|
|
592
|
+
this.vviinnProductLoad.emit(this.productData);
|
|
593
|
+
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
594
|
+
this.intersectionObserver.observe(this.imageElement);
|
|
595
|
+
this.addLinksEventListeners();
|
|
596
|
+
}
|
|
588
597
|
crossSellingClickListener({ detail }) {
|
|
589
598
|
const { animationInterval } = detail;
|
|
590
599
|
this.isTransitioning = true;
|
|
@@ -625,10 +634,7 @@ const VviinnProductCard = class {
|
|
|
625
634
|
widgetVersion: this.widgetVersion,
|
|
626
635
|
};
|
|
627
636
|
}
|
|
628
|
-
|
|
629
|
-
this.vviinnProductLoad.emit(this.productData);
|
|
630
|
-
this.intersectionObserver = new IntersectionObserver(this.intersectionCallback.bind(this.imageElement), { threshold: 1.0 });
|
|
631
|
-
this.intersectionObserver.observe(this.imageElement);
|
|
637
|
+
addLinksEventListeners() {
|
|
632
638
|
const links = this.el.shadowRoot.querySelectorAll("a");
|
|
633
639
|
links.forEach((link) => {
|
|
634
640
|
link.addEventListener("click", (event) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-1f3eaf12.js';
|
|
2
|
-
import { s as searchState } from './search.store-
|
|
2
|
+
import { s as searchState } from './search.store-44630818.js';
|
|
3
3
|
|
|
4
4
|
const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid currentColor;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
|
|
5
5
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-c2ef7fb6.js';
|
|
3
3
|
import { V as VisualSearchIcon } from './VisualSearchIcon-13f7da6a.js';
|
|
4
4
|
|
|
5
5
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-c2ef7fb6.js';
|
|
3
3
|
import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-e56251a2.js';
|
|
4
4
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
5
5
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { s as searchState, b as state, k as parseExcluded, O as Option } from './search.store-
|
|
2
|
+
import { s as searchState, b as state, k as parseExcluded, O as Option } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
|
-
import { v as version } from './package-
|
|
4
|
+
import { v as version } from './package-c2ef7fb6.js';
|
|
5
5
|
import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-e56251a2.js';
|
|
6
|
-
import { j as createSearchEvent, k as createFilterEvent, v as v4, c as createTrackingApi, l as createWidgetVpsEvent, m as createProductVpsEventByType, n as createResultVpsEventByType } from './index-
|
|
6
|
+
import { j as createSearchEvent, k as createFilterEvent, v as v4, c as createTrackingApi, l as createWidgetVpsEvent, m as createProductVpsEventByType, n as createResultVpsEventByType } from './index-76fe67d1.js';
|
|
7
7
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
8
8
|
|
|
9
9
|
const CameraActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
@@ -465,7 +465,7 @@ const VviinnVpsWidget = class {
|
|
|
465
465
|
return this.isDesktop ? buttons.reverse() : buttons;
|
|
466
466
|
}
|
|
467
467
|
renderResults() {
|
|
468
|
-
if (searchState.results.length === 0)
|
|
468
|
+
if (searchState.results.length === 0 || !this.isResultSlide())
|
|
469
469
|
return null;
|
|
470
470
|
if (!this.resultLoaded) {
|
|
471
471
|
this.vviinnResultLoad.emit(this.getBasicEventData());
|
|
@@ -544,10 +544,10 @@ const VviinnVpsWidget = class {
|
|
|
544
544
|
"nothing-found": true,
|
|
545
545
|
hidden: !this.showAspectRatioError,
|
|
546
546
|
} }, h("vviinn-wrong-aspect-ratio", { handler: () => this.resetState() })), h("div", { class: {
|
|
547
|
-
hidden: searchState.results.length
|
|
547
|
+
hidden: searchState.results.length === 0 ||
|
|
548
548
|
this.showAspectRatioError,
|
|
549
549
|
products: true,
|
|
550
|
-
} }, this.
|
|
550
|
+
} }, this.renderResults())))))));
|
|
551
551
|
}
|
|
552
552
|
get el() { return getElement(this); }
|
|
553
553
|
static get watchers() { return {
|
|
@@ -84,13 +84,14 @@ export declare class VviinnProductCard {
|
|
|
84
84
|
private isContinuityMode;
|
|
85
85
|
connectedCallback(): void;
|
|
86
86
|
componentWillLoad(): void;
|
|
87
|
+
componentDidLoad(): void;
|
|
87
88
|
crossSellingClickListener({ detail }: CrossSellingClickEvent): void;
|
|
88
89
|
updatingAllCardsWatcher(): void;
|
|
89
90
|
productIdWatcher(): void;
|
|
90
91
|
private getWidgetType;
|
|
91
92
|
private getProductData;
|
|
92
93
|
private intersectionCallback;
|
|
93
|
-
|
|
94
|
+
private addLinksEventListeners;
|
|
94
95
|
private getProduct;
|
|
95
96
|
private renderImage;
|
|
96
97
|
render(): any;
|