vviinn-widgets 2.95.2 → 2.95.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{package-ddca40d7.js → package-f89ab7be.js} +1 -1
- package/dist/cjs/search-filters_19.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-carousel_8.cjs.entry.js +3 -3
- package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js +1 -1
- 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/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.css +1 -1
- package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.js +1 -1
- package/dist/collection/components/vviinn-results/vviinn-results.js +5 -1
- package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js +1 -1
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +4 -0
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js +4 -0
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +4 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +5 -2
- package/dist/esm/{package-63e182dc.js → package-ef4daa6e.js} +1 -1
- package/dist/esm/search-filters_19.entry.js +2 -2
- package/dist/esm/vviinn-carousel_8.entry.js +3 -3
- package/dist/esm/vviinn-recommendations-sidebar.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 +2 -2
- package/dist/types/components/vviinn-results/vviinn-results.d.ts +4 -0
- package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +4 -0
- package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-widget.d.ts +4 -0
- package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +4 -1
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +4 -1
- package/{www/build/p-2d96b041.entry.js → dist/vviinn-widgets/p-0fe05289.entry.js} +1 -1
- package/dist/vviinn-widgets/p-355874d5.entry.js +1 -0
- package/dist/vviinn-widgets/p-44ab34d0.js +1 -0
- package/dist/vviinn-widgets/{p-4432fd8e.entry.js → p-73b4a223.entry.js} +2 -2
- package/dist/vviinn-widgets/p-84995f53.entry.js +1 -0
- package/dist/vviinn-widgets/{p-4f2ba200.entry.js → p-cbd8b7e6.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-9401e8ef.entry.js → p-fe6932a5.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/{dist/vviinn-widgets/p-2d96b041.entry.js → www/build/p-0fe05289.entry.js} +1 -1
- package/www/build/p-355874d5.entry.js +1 -0
- package/www/build/p-44ab34d0.js +1 -0
- package/www/build/{p-4432fd8e.entry.js → p-73b4a223.entry.js} +2 -2
- package/www/build/p-84995f53.entry.js +1 -0
- package/www/build/{p-4f2ba200.entry.js → p-cbd8b7e6.entry.js} +1 -1
- package/www/build/{p-9401e8ef.entry.js → p-fe6932a5.entry.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-11a523db.entry.js +0 -1
- package/dist/vviinn-widgets/p-c63ce47d.entry.js +0 -1
- package/dist/vviinn-widgets/p-d1fb7e12.js +0 -1
- package/www/build/p-11a523db.entry.js +0 -1
- package/www/build/p-c63ce47d.entry.js +0 -1
- package/www/build/p-d1fb7e12.js +0 -1
|
@@ -7,7 +7,7 @@ const search_store = require('./search.store-d2b420fd.js');
|
|
|
7
7
|
const index$1 = require('./index-105aee62.js');
|
|
8
8
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
9
9
|
const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-f89ab7be.js');
|
|
11
11
|
|
|
12
12
|
const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
13
|
index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
|
|
@@ -4174,7 +4174,7 @@ const VviinnResults = class {
|
|
|
4174
4174
|
render() {
|
|
4175
4175
|
return (index.h(index.Host, { id: "results-block", class: {
|
|
4176
4176
|
"show-in-widget": this.showInWidget,
|
|
4177
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix,
|
|
4177
|
+
}, exportparts: "title, product-card, brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: {
|
|
4178
4178
|
"nothing-found": true,
|
|
4179
4179
|
hidden: this.recommendations.length > 0 ||
|
|
4180
4180
|
search_store.searchState.results.length > 0 ||
|
|
@@ -7,7 +7,7 @@ const search_store = require('./search.store-d2b420fd.js');
|
|
|
7
7
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
8
8
|
const emitRequestFiltersMore = require('./emitRequestFiltersMore-233f4997.js');
|
|
9
9
|
const index$1 = require('./index-105aee62.js');
|
|
10
|
-
const _package = require('./package-
|
|
10
|
+
const _package = require('./package-f89ab7be.js');
|
|
11
11
|
|
|
12
12
|
const BasketIcon = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
13
13
|
index.h("g", { id: "shopping-bag" },
|
|
@@ -443,7 +443,7 @@ const VviinnCarousel = class {
|
|
|
443
443
|
};
|
|
444
444
|
VviinnCarousel.style = vviinnCarouselCss;
|
|
445
445
|
|
|
446
|
-
const vviinnEnergyLabelCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:
|
|
446
|
+
const vviinnEnergyLabelCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:contents;line-height:0px}:host(.hidden){display:none}.container{display:flex;flex-direction:row;max-width:100%;gap:var(--spacing-75)}.info-container{width:100%;height:100%;display:flex;justify-content:center;text-align:left;flex-direction:column;font-size:var(--font-size-caption);font-weight:var(--font-weight-400);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-style:normal}.class-label-link{cursor:pointer}.class-label-icon{display:inline-block;height:32px;width:auto;flex-shrink:0}.product-type,.data-sheet-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--color-text-primary)}.product-type{color:var(--color-text-helper)}.data-sheet-link{cursor:pointer;text-decoration:none;color:var(--color-text-primary)}";
|
|
447
447
|
|
|
448
448
|
const VviinnEnergyLabel = class {
|
|
449
449
|
constructor(hostRef) {
|
|
@@ -469,7 +469,7 @@ const VviinnEnergyLabel = class {
|
|
|
469
469
|
render() {
|
|
470
470
|
return (index.h(index.Host, { class: {
|
|
471
471
|
hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
|
|
472
|
-
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (index.h("a", { class: "class-label-link", onClick: this.labelClickHandler }, index.h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), index.h("div", { class: "info-container" }, this.productType && (index.h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (index.h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, index.h("slot", { name: "vviinn-energy-label-data-sheet-text" }, index$1.instance.t("energyLabel.dataSheetText"))))))));
|
|
472
|
+
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, index.h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (index.h("a", { class: "class-label-link", onClick: this.labelClickHandler }, index.h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), (this.productType || this.classDataSheetUrl) && (index.h("div", { class: "info-container" }, this.productType && (index.h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (index.h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, index.h("slot", { name: "vviinn-energy-label-data-sheet-text" }, index$1.instance.t("energyLabel.dataSheetText")))))))));
|
|
473
473
|
}
|
|
474
474
|
get el() { return index.getElement(this); }
|
|
475
475
|
};
|
|
@@ -97,7 +97,7 @@ const RecommendationsSidebar = class {
|
|
|
97
97
|
});
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
|
-
return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group,
|
|
100
|
+
return (index.h(index.Host, { class: this.getClassMap() }, index.h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, index.h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(CrossIcon, null))), index.h("main", { part: "sidebar-content" }, index.h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
101
101
|
}
|
|
102
102
|
renderSourceImage() {
|
|
103
103
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-f89ab7be.js');
|
|
7
7
|
|
|
8
8
|
const SimilarProductsIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
9
9
|
index.h("path", { d: "M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z", fill: "#161616" }),
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4474431a.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-f89ab7be.js');
|
|
7
7
|
const customizedSlots = require('./customized-slots-ee9418c1.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-4474431a.js');
|
|
6
6
|
const search_store = require('./search.store-d2b420fd.js');
|
|
7
7
|
const index$1 = require('./index-105aee62.js');
|
|
8
|
-
const _package = require('./package-
|
|
8
|
+
const _package = require('./package-f89ab7be.js');
|
|
9
9
|
const customizedSlots = require('./customized-slots-ee9418c1.js');
|
|
10
10
|
const constants = require('./constants-7684cbfc.js');
|
|
11
11
|
|
|
@@ -385,7 +385,7 @@ const VviinnVpsWidget = class {
|
|
|
385
385
|
}
|
|
386
386
|
render() {
|
|
387
387
|
var _a, _b;
|
|
388
|
-
return (index.h(index.Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, !this.showingInButton && customizedSlots.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
388
|
+
return (index.h(index.Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && customizedSlots.SlotSkeleton("vps"), index.h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: _package.version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
389
389
|
(!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: {
|
|
390
390
|
"start-page": true,
|
|
391
391
|
"camera-enabled": this.cameraEnabled,
|
package/dist/collection/components/vviinn-product-card/vviinn-energy-label/vviinn-energy-label.js
CHANGED
|
@@ -32,7 +32,7 @@ export class VviinnEnergyLabel {
|
|
|
32
32
|
render() {
|
|
33
33
|
return (h(Host, { class: {
|
|
34
34
|
hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
|
|
35
|
-
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText"))))))));
|
|
35
|
+
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), (this.productType || this.classDataSheetUrl) && (h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, i18next.t("energyLabel.dataSheetText")))))))));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "vviinn-energy-label"; }
|
|
38
38
|
static get encapsulation() { return "shadow"; }
|
|
@@ -40,6 +40,10 @@ import { slotChangeListener } from "../customized-slots";
|
|
|
40
40
|
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
41
41
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
42
42
|
* @part title - Title inside Product Card.
|
|
43
|
+
* @part energy-label-container - Energy label container.
|
|
44
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
45
|
+
* @part energy-label-product-type - Product type.
|
|
46
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
43
47
|
*
|
|
44
48
|
* @part price-label - string part of price.
|
|
45
49
|
* @part price-label-0 - string part of price with index 0.
|
|
@@ -286,7 +290,7 @@ export class VviinnResults {
|
|
|
286
290
|
render() {
|
|
287
291
|
return (h(Host, { id: "results-block", class: {
|
|
288
292
|
"show-in-widget": this.showInWidget,
|
|
289
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix,
|
|
293
|
+
}, exportparts: "title, product-card, brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
|
|
290
294
|
"nothing-found": true,
|
|
291
295
|
hidden: this.recommendations.length > 0 ||
|
|
292
296
|
searchState.results.length > 0 ||
|
|
@@ -86,7 +86,7 @@ export class RecommendationsSidebar {
|
|
|
86
86
|
});
|
|
87
87
|
}
|
|
88
88
|
render() {
|
|
89
|
-
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group,
|
|
89
|
+
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
90
90
|
}
|
|
91
91
|
renderSourceImage() {
|
|
92
92
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -25,6 +25,10 @@ import { SimilarProductsIcon, CrossSellingIcon } from "../vviinn-icons";
|
|
|
25
25
|
* @part recommendations-title - Title of the recommendations grid.
|
|
26
26
|
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
27
27
|
* @part basket-button - Add to Basket button.
|
|
28
|
+
* @part energy-label-container - Energy label container.
|
|
29
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
30
|
+
* @part energy-label-product-type - Product type.
|
|
31
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
28
32
|
* @part update-button-top - Update Button on the top (Set mode).
|
|
29
33
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
30
34
|
*
|
|
@@ -52,6 +52,10 @@ import { calculatePriceLabel } from "../vviinn-product-card/render-helpers";
|
|
|
52
52
|
* @part recommendations-title - Title of the recommendations grid.
|
|
53
53
|
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
54
54
|
* @part basket-button - Add to Basket button.
|
|
55
|
+
* @part energy-label-container - Energy label container.
|
|
56
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
57
|
+
* @part energy-label-product-type - Product type.
|
|
58
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
55
59
|
* @part update-button-top - Update Button on the top (Set mode).
|
|
56
60
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
57
61
|
* @part discount-label - Discount label in Product Card (Set mode).
|
|
@@ -40,13 +40,16 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
|
|
|
40
40
|
* @part text-search-input - Text search input.
|
|
41
41
|
* @part button - Clickable button element.
|
|
42
42
|
* @part vviinn-button - Button element container.
|
|
43
|
-
*
|
|
44
43
|
* @part price-label - string part of price.
|
|
45
44
|
* @part price-label-0 - string part of price with index 0.
|
|
46
45
|
* @part price-label-1 - string part of price with index 1.
|
|
47
46
|
* @part price-label-2 - string part of price with index 2.
|
|
48
47
|
* @part price-label-3 - string part of price with index 3.
|
|
49
48
|
* @part price-label-4 - string part of price with index 4.
|
|
49
|
+
* @part energy-label-container - Energy label container.
|
|
50
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
51
|
+
* @part energy-label-product-type - Product type.
|
|
52
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
50
53
|
*/
|
|
51
54
|
export class VviinnVpsButton {
|
|
52
55
|
constructor() {
|
|
@@ -64,13 +64,16 @@ const CAMERA_START_DELAY = 500;
|
|
|
64
64
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
65
65
|
* @part title - Title inside Product Card.
|
|
66
66
|
* @part text-search-input - Text search input.
|
|
67
|
-
*
|
|
68
67
|
* @part price-label - string part of price.
|
|
69
68
|
* @part price-label-0 - string part of price with index 0.
|
|
70
69
|
* @part price-label-1 - string part of price with index 1.
|
|
71
70
|
* @part price-label-2 - string part of price with index 2.
|
|
72
71
|
* @part price-label-3 - string part of price with index 3.
|
|
73
72
|
* @part price-label-4 - string part of price with index 4.
|
|
73
|
+
* @part energy-label-container - Energy label container.
|
|
74
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
75
|
+
* @part energy-label-product-type - Product type.
|
|
76
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
74
77
|
*/
|
|
75
78
|
export class VviinnVpsWidget {
|
|
76
79
|
constructor() {
|
|
@@ -399,7 +402,7 @@ export class VviinnVpsWidget {
|
|
|
399
402
|
}
|
|
400
403
|
render() {
|
|
401
404
|
var _a, _b;
|
|
402
|
-
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
405
|
+
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
403
406
|
(!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
|
|
404
407
|
"start-page": true,
|
|
405
408
|
"camera-enabled": this.cameraEnabled,
|
|
@@ -3,7 +3,7 @@ import { s as searchState, _ as _function, O as Option, k as fromAlt, l as foldV
|
|
|
3
3
|
import { i as instance, r as resources, c as createTrackingApi, v as v4, n as createResultVpsEventByType, o as createProductVpsEventByType } from './index-279b5fe1.js';
|
|
4
4
|
import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-7fa3856f.js';
|
|
5
5
|
import { d as PlusIcon, c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, a as showActiveOnSubButton, R as RenderButton } from './emitRequestFiltersMore-2bda46cb.js';
|
|
6
|
-
import { v as version } from './package-
|
|
6
|
+
import { v as version } from './package-ef4daa6e.js';
|
|
7
7
|
|
|
8
8
|
const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
9
9
|
h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
|
|
@@ -4170,7 +4170,7 @@ const VviinnResults = class {
|
|
|
4170
4170
|
render() {
|
|
4171
4171
|
return (h(Host, { id: "results-block", class: {
|
|
4172
4172
|
"show-in-widget": this.showInWidget,
|
|
4173
|
-
}, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix,
|
|
4173
|
+
}, exportparts: "title, product-card, brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: {
|
|
4174
4174
|
"nothing-found": true,
|
|
4175
4175
|
hidden: this.recommendations.length > 0 ||
|
|
4176
4176
|
searchState.results.length > 0 ||
|
|
@@ -3,7 +3,7 @@ import { h as has, t as tuple, s as searchState, _ as _function, a as _Array, O
|
|
|
3
3
|
import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton, f as fromString, a as fold } from './customized-slots-7fa3856f.js';
|
|
4
4
|
import { c as calculatePriceLabel, s as subFilterSelection, e as emitRequestFiltersMore, C as CheckFilterIcon, S as SquareFilterIcon, a as showActiveOnSubButton, R as RenderButton, b as ResponsiveImage, I as Image, L as Linked, P as Price } from './emitRequestFiltersMore-2bda46cb.js';
|
|
5
5
|
import { i as instance, r as resources, 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, j as createProductVprEventByType } from './index-279b5fe1.js';
|
|
6
|
-
import { v as version } from './package-
|
|
6
|
+
import { v as version } from './package-ef4daa6e.js';
|
|
7
7
|
|
|
8
8
|
const BasketIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
9
9
|
h("g", { id: "shopping-bag" },
|
|
@@ -439,7 +439,7 @@ const VviinnCarousel = class {
|
|
|
439
439
|
};
|
|
440
440
|
VviinnCarousel.style = vviinnCarouselCss;
|
|
441
441
|
|
|
442
|
-
const vviinnEnergyLabelCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:
|
|
442
|
+
const vviinnEnergyLabelCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{display:contents;line-height:0px}:host(.hidden){display:none}.container{display:flex;flex-direction:row;max-width:100%;gap:var(--spacing-75)}.info-container{width:100%;height:100%;display:flex;justify-content:center;text-align:left;flex-direction:column;font-size:var(--font-size-caption);font-weight:var(--font-weight-400);line-height:var(--line-height-caption);letter-spacing:var(--letter-spacing-caption);font-style:normal}.class-label-link{cursor:pointer}.class-label-icon{display:inline-block;height:32px;width:auto;flex-shrink:0}.product-type,.data-sheet-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow-wrap:anywhere;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--color-text-primary)}.product-type{color:var(--color-text-helper)}.data-sheet-link{cursor:pointer;text-decoration:none;color:var(--color-text-primary)}";
|
|
443
443
|
|
|
444
444
|
const VviinnEnergyLabel = class {
|
|
445
445
|
constructor(hostRef) {
|
|
@@ -465,7 +465,7 @@ const VviinnEnergyLabel = class {
|
|
|
465
465
|
render() {
|
|
466
466
|
return (h(Host, { class: {
|
|
467
467
|
hidden: !this.classIconUrls && !this.productType && !this.classDataSheetUrl,
|
|
468
|
-
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, instance.t("energyLabel.dataSheetText"))))))));
|
|
468
|
+
}, exportparts: "energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, h("div", { class: "container", part: "energy-label-container" }, !!this.classIconUrls && (h("a", { class: "class-label-link", onClick: this.labelClickHandler }, h("img", { class: "class-label-icon", part: "energy-label-icon", src: this.classIconUrls[this.iconDirection] }))), (this.productType || this.classDataSheetUrl) && (h("div", { class: "info-container" }, this.productType && (h("span", { class: "product-type", part: "energy-label-product-type" }, this.productType)), this.classDataSheetUrl && (h("a", { class: "data-sheet-link", part: "energy-label-data-sheet-link", href: this.classDataSheetUrl, target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "vviinn-energy-label-data-sheet-text" }, instance.t("energyLabel.dataSheetText")))))))));
|
|
469
469
|
}
|
|
470
470
|
get el() { return getElement(this); }
|
|
471
471
|
};
|
|
@@ -93,7 +93,7 @@ const RecommendationsSidebar = class {
|
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group,
|
|
96
|
+
return (h(Host, { class: this.getClassMap() }, h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) }, h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" }, this.renderSourceImage(), h("span", { class: "title", part: "title" }, this.sidebarTitle), h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, h(CrossIcon, null))), h("main", { part: "sidebar-content" }, h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link", token: this.token, productId: this.productId, imageWidth: this.imageWidth, imageRatio: this.imageRatio, blockTitle: "", mode: this.mode, "campaign-type": this.campaignType, useCarousel: this.position === "bottom", onVviinnRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color, currencySign: this.currencySign, pricePrefix: this.pricePrefix, apiPath: this.apiPath, locale: this.locale, buttonElementId: this.buttonElementId, noResultText: this.noResultText, noResultShow: this.noResultShow, gridArrowsDynamic: this.gridArrowsDynamic, showingInButton: this.showingInButton, excluded: this.excluded, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, closed: this.state === "closed", opened: this.state === "open", addToBasketShow: this.addToBasketShow, cssUrl: this.cssUrl, showFilters: this.showFilters, setModeDiscounts: this.setModeDiscounts, updateButtonLocation: this.updateButtonLocation })))));
|
|
97
97
|
}
|
|
98
98
|
renderSourceImage() {
|
|
99
99
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-abf408d8.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-ef4daa6e.js';
|
|
3
3
|
|
|
4
4
|
const SimilarProductsIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
|
|
5
5
|
h("path", { d: "M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z", fill: "#161616" }),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-abf408d8.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-ef4daa6e.js';
|
|
3
3
|
import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-7fa3856f.js';
|
|
4
4
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
5
5
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, F as Fragment, H as Host, g as getElement } from './index-abf408d8.js';
|
|
2
2
|
import { s as searchState, d as state, j as parseExcludedToParams, O as Option } from './search.store-24896fcf.js';
|
|
3
3
|
import { i as instance, r as resources, k as createSearchEvent, l as createFilterEvent, v as v4, c as createTrackingApi, m as createWidgetVpsEvent } from './index-279b5fe1.js';
|
|
4
|
-
import { v as version } from './package-
|
|
4
|
+
import { v as version } from './package-ef4daa6e.js';
|
|
5
5
|
import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-7fa3856f.js';
|
|
6
6
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
7
7
|
|
|
@@ -381,7 +381,7 @@ const VviinnVpsWidget = class {
|
|
|
381
381
|
}
|
|
382
382
|
render() {
|
|
383
383
|
var _a, _b;
|
|
384
|
-
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
384
|
+
return (h(Host, { exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button, text-search-input, close-button, secondary-action, close-button, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link" }, !this.showingInButton && SlotSkeleton("vps"), h("vviinn-overlayed-modal", { class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: (this.mode === "upload" && this.showingInButton) ||
|
|
385
385
|
(!this.cameraEnabled && this.isOnboardingSlide()), exportparts: "secondary-action, title, close-button" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: {
|
|
386
386
|
"start-page": true,
|
|
387
387
|
"camera-enabled": this.cameraEnabled,
|
|
@@ -17,6 +17,10 @@ import { ChangedFiltersEventData, DynamicFiltersEventData, ProductCardEvent, Pro
|
|
|
17
17
|
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
18
18
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
19
19
|
* @part title - Title inside Product Card.
|
|
20
|
+
* @part energy-label-container - Energy label container.
|
|
21
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
22
|
+
* @part energy-label-product-type - Product type.
|
|
23
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
20
24
|
*
|
|
21
25
|
* @part price-label - string part of price.
|
|
22
26
|
* @part price-label-0 - string part of price with index 0.
|
|
@@ -28,6 +28,10 @@ import { UpdateButtonLocation } from "../vviinn-vpr-widget/vviinn-vpr-widget";
|
|
|
28
28
|
* @part recommendations-title - Title of the recommendations grid.
|
|
29
29
|
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
30
30
|
* @part basket-button - Add to Basket button.
|
|
31
|
+
* @part energy-label-container - Energy label container.
|
|
32
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
33
|
+
* @part energy-label-product-type - Product type.
|
|
34
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
31
35
|
* @part update-button-top - Update Button on the top (Set mode).
|
|
32
36
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
33
37
|
*
|
|
@@ -29,6 +29,10 @@ export type UpdateButtonLocation = "onTop" | "onItem" | "topAndItem";
|
|
|
29
29
|
* @part recommendations-title - Title of the recommendations grid.
|
|
30
30
|
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
31
31
|
* @part basket-button - Add to Basket button.
|
|
32
|
+
* @part energy-label-container - Energy label container.
|
|
33
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
34
|
+
* @part energy-label-product-type - Product type.
|
|
35
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
32
36
|
* @part update-button-top - Update Button on the top (Set mode).
|
|
33
37
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
34
38
|
* @part discount-label - Discount label in Product Card (Set mode).
|
|
@@ -38,13 +38,16 @@ import { VisualSearchMode } from "../../widget/types";
|
|
|
38
38
|
* @part text-search-input - Text search input.
|
|
39
39
|
* @part button - Clickable button element.
|
|
40
40
|
* @part vviinn-button - Button element container.
|
|
41
|
-
*
|
|
42
41
|
* @part price-label - string part of price.
|
|
43
42
|
* @part price-label-0 - string part of price with index 0.
|
|
44
43
|
* @part price-label-1 - string part of price with index 1.
|
|
45
44
|
* @part price-label-2 - string part of price with index 2.
|
|
46
45
|
* @part price-label-3 - string part of price with index 3.
|
|
47
46
|
* @part price-label-4 - string part of price with index 4.
|
|
47
|
+
* @part energy-label-container - Energy label container.
|
|
48
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
49
|
+
* @part energy-label-product-type - Product type.
|
|
50
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
48
51
|
*/
|
|
49
52
|
export declare class VviinnVpsButton {
|
|
50
53
|
el: HTMLElement;
|
|
@@ -39,13 +39,16 @@ import { UploadSource, VisualSearchMode } from "../../widget/types";
|
|
|
39
39
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
40
40
|
* @part title - Title inside Product Card.
|
|
41
41
|
* @part text-search-input - Text search input.
|
|
42
|
-
*
|
|
43
42
|
* @part price-label - string part of price.
|
|
44
43
|
* @part price-label-0 - string part of price with index 0.
|
|
45
44
|
* @part price-label-1 - string part of price with index 1.
|
|
46
45
|
* @part price-label-2 - string part of price with index 2.
|
|
47
46
|
* @part price-label-3 - string part of price with index 3.
|
|
48
47
|
* @part price-label-4 - string part of price with index 4.
|
|
48
|
+
* @part energy-label-container - Energy label container.
|
|
49
|
+
* @part energy-label-icon - Icon with an energy class.
|
|
50
|
+
* @part energy-label-product-type - Product type.
|
|
51
|
+
* @part energy-label-data-sheet-link - Data sheet link.
|
|
49
52
|
*/
|
|
50
53
|
export declare class VviinnVpsWidget {
|
|
51
54
|
el: HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as i,r as t,c as s,H as h,g as n}from"./p-1c863deb.js";import{v as l}from"./p-
|
|
1
|
+
import{h as i,r as t,c as s,H as h,g as n}from"./p-1c863deb.js";import{v as l}from"./p-44ab34d0.js";const C=()=>i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},i("path",{d:"M4 16V15H2V16C2 19.31 4.69 22 8 22H9V20H8C5.79 20 4 18.21 4 16Z",fill:"#161616"}),i("path",{d:"M4 8C4 5.79 5.79 4 8 4H9V2H8C4.69 2 2 4.69 2 8V9H4V8Z",fill:"#161616"}),i("path",{d:"M20 8C20 5.79 18.21 4 16 4H15V2H16C19.31 2 22 4.69 22 8V9H20V8Z",fill:"#161616"}),i("path",{d:"M20 16C20 18.21 18.21 20 16 20H15V22H16C19.31 22 22 19.31 22 16V15H20V16Z",fill:"#161616"}),i("path",{d:"M9 8H7C6.45 8 6 8.45 6 9C6 9.55 6.45 10 7 10H9V11C9 11.55 9.45 12 10 12C10.55 12 11 11.55 11 11V7C11 6.45 10.55 6 10 6C9.45 6 9 6.45 9 7V8Z",fill:"#161616"}),i("path",{d:"M15 16H17C17.55 16 18 15.55 18 15C18 14.45 17.55 14 17 14H15V13C15 12.45 14.55 12 14 12C13.45 12 13 12.45 13 13V17C13 17.55 13.45 18 14 18C14.55 18 15 17.55 15 17V16Z",fill:"#161616"}),i("path",{d:"M16 9C16 8.45 15.55 8 15 8H12V10H15C15.55 10 16 9.55 16 9Z",fill:"#161616"}),i("path",{d:"M6 15C6 15.55 6.45 16 7 16H12V14H7C6.45 14 6 14.45 6 15Z",fill:"#161616"})),e=()=>i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},i("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M20 13C20 13.55 20.45 14 21 14C21.55 14 22 13.55 22 13V5C22 3.35 20.65 2 19 2H11C10.45 2 10 2.45 10 3C10 3.55 10.45 4 11 4H19C19.55 4 20 4.45 20 5V13ZM2 19C2 20.65 3.35 22 5 22H13C13.55 22 14 21.55 14 21C14 20.45 13.55 20 13 20H5C4.45 20 4 19.55 4 19V11C4 10.45 3.55 10 3 10C2.45 10 2 10.45 2 11V19ZM12 16C11.45 16 11 15.55 11 15V13H9C8.45 13 8 12.55 8 12C8 11.45 8.45 11 9 11H11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11H15C15.55 11 16 11.45 16 12C16 12.55 15.55 13 15 13H13V15C13 15.55 12.55 16 12 16Z",fill:"#161616"})),o=class{constructor(i){t(this,i),this.vviinnWidgetLoad=s(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=s(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=s(this,"vviinnWidgetClose",7),this.vviinnProductLoad=s(this,"vviinnProductLoad",7),this.vviinnProductClick=s(this,"vviinnProductClick",7),this.vviinnProductView=s(this,"vviinnProductView",7),this.vviinnResultLoad=s(this,"vviinnResultLoad",7),this.vviinnResultView=s(this,"vviinnResultView",7),this.vviinnNoResult=s(this,"vviinnNoResult",7),this.vviinnAddToBasket=s(this,"vviinnAddToBasket",7),this.sidebar=null,this.sidebarCloseListener=()=>{document.body.removeChild(this.sidebar)},this.token=void 0,this.productId=void 0,this.mode="continuity",this.campaigns="",this.excluded="",this.campaignType="VPR",this.locale="de-DE",this.color="",this.imageWidth=300,this.imageRatio=1,this.cssUrl=null,this.currencySign="€",this.pricePrefix="",this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.productDetailsNewTab=!1,this.productDetailsRedirect=!0,this.addToBasketShow=!1,this.showFilters=!1,this.setModeDiscounts="set"===this.mode?"5, 10, 15":"",this.updateButtonLocation="topAndItem",this.sidebarTitle="set"===this.mode?"":"Visually similar products",this.modalScrollbar=!1,this.position="bottom",this.addStyle=!0,this.apiPath="https://api.vviinn.com"}render(){return i(h,{onClick:()=>{this.handleClick()},role:"button",tabindex:"0"},i("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},i("slot",null,i("VCS"===this.campaignType?e:C,null))))}handleClick(){const i=document.createElement("vviinn-recommendations-sidebar");i.sidebarTitle=this.sidebarTitle,i.productId=this.productId,i.token=this.token,i.position=this.position,i.widgetScrollbar=this.modalScrollbar,i.campaigns=this.campaigns,i.campaignType=this.campaignType,i.color=this.color,i.locale=this.locale,i.mode="right"===this.position?"grid":this.mode,i.imageWidth=this.imageWidth,i.currencySign=this.currencySign,i.pricePrefix=this.pricePrefix,i.apiPath=this.apiPath,i.buttonElementId=this.el.id,i.noResultText=this.noResultText,i.noResultShow=this.noResultShow,i.gridArrowsDynamic=this.gridArrowsDynamic,i.productDetailsNewTab=this.productDetailsNewTab,i.productDetailsRedirect=this.productDetailsRedirect,i.widgetVersion=l,i.showingInButton=!0,i.excluded=this.excluded,i.addToBasketShow=this.addToBasketShow,i.buttonChildren=this.el.children,i.showFilters=this.showFilters,i.cssUrl=this.cssUrl,i.imageRatio=this.imageRatio,i.setModeDiscounts=this.setModeDiscounts,i.updateButtonLocation=this.updateButtonLocation,this.sidebar=i,i.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener)}get el(){return n(this)}};o.style=":host{display:block}";export{o as vviinn_vpr_button}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{h as i,r as t,c as o,H as e,g as r}from"./p-1c863deb.js";import{s}from"./p-042b091b.js";const a=()=>i("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z",fill:"#161616"})),n=class{constructor(i){t(this,i),this.vviinnWidgetClose=o(this,"vviinnWidgetClose",7),this.isSourceImageValid=()=>{var i;return!!(null===(i=null==s?void 0:s.sourceProduct)||void 0===i?void 0:i.image)},this.sidebarTitle=void 0,this.token=void 0,this.productId=void 0,this.position="bottom",this.widgetScrollbar=!1,this.mode="continuity",this.campaigns="",this.campaignType=void 0,this.color=void 0,this.locale=void 0,this.imageWidth=300,this.imageRatio=void 0,this.cssUrl=void 0,this.currencySign="€",this.pricePrefix=void 0,this.noResultText=void 0,this.noResultShow=void 0,this.gridArrowsDynamic=void 0,this.excluded=void 0,this.productDetailsNewTab=void 0,this.productDetailsRedirect=void 0,this.addToBasketShow=!1,this.showFilters=!1,this.setModeDiscounts=void 0,this.updateButtonLocation=void 0,this.buttonChildren=void 0,this.apiPath="https://api.vviinn.com",this.buttonElementId=void 0,this.widgetVersion=void 0,this.showingInButton=void 0,this.state="idle"}updatingAllCardsStarted(){const{height:i}=this.getSidebarRectangle(),t=this.getAsideElement();t.style.height!==`${i}px`&&(t.style.height=`${i}px`)}updatingAllCardsFinished(){const i=this.getAsideElement();"auto"!==i.style.height&&(i.style.height="auto")}bodyClickListener(i){const{clientX:t,clientY:o}=i,e=this.getSidebarRectangle();e&&(t>=e.left&&t<=e.right&&o>=e.top&&o<=e.bottom||(this.state="closed"))}getClassMap(){return{[this.position]:!0,[this.state]:!0}}getAsideElement(){return this.el.shadowRoot.querySelector("aside")}getSidebarRectangle(){var i;return null===(i=this.getAsideElement())||void 0===i?void 0:i.getBoundingClientRect()}componentDidLoad(){const i=this.el.shadowRoot.querySelector("vviinn-vpr-widget");Array.from(this.buttonChildren).forEach((t=>{const o=t.cloneNode(!0);t.hasAttribute("slot")&&i.appendChild(o)}))}render(){return i(e,{class:this.getClassMap()},i("aside",{class:"sidebar",part:"body",onAnimationEnd:i=>this.handleAnimationEnd(i)},i("header",{class:{"contains-source-img":this.isSourceImageValid()},part:"sidebar-header"},this.renderSourceImage(),i("span",{class:"title",part:"title"},this.sidebarTitle),i("button",{class:"close-sidebar",onClick:()=>this.state="closed"},i(a,null))),i("main",{part:"sidebar-content"},i("vviinn-vpr-widget",{exportparts:"brand, currency, deeplink, image, image-link, price-amount, price-container, price-prefix, price-outdated, price-regular, price-sale, price-label, price-label-0, price-label-1, price-label-2, price-label-3, price-label-4, title: product-title, carousel-button, product-card, items-group, energy-label-container, energy-label-icon, energy-label-product-type, energy-label-data-sheet-link",token:this.token,productId:this.productId,imageWidth:this.imageWidth,imageRatio:this.imageRatio,blockTitle:"",mode:this.mode,"campaign-type":this.campaignType,useCarousel:"bottom"===this.position,onVviinnRecommendationsLoaded:()=>this.state="open",showScroll:this.widgetScrollbar,campaigns:this.campaigns,color:this.color,currencySign:this.currencySign,pricePrefix:this.pricePrefix,apiPath:this.apiPath,locale:this.locale,buttonElementId:this.buttonElementId,noResultText:this.noResultText,noResultShow:this.noResultShow,gridArrowsDynamic:this.gridArrowsDynamic,showingInButton:this.showingInButton,excluded:this.excluded,productDetailsNewTab:this.productDetailsNewTab,productDetailsRedirect:this.productDetailsRedirect,closed:"closed"===this.state,opened:"open"===this.state,addToBasketShow:this.addToBasketShow,cssUrl:this.cssUrl,showFilters:this.showFilters,setModeDiscounts:this.setModeDiscounts,updateButtonLocation:this.updateButtonLocation}))))}renderSourceImage(){var t,o,e,r,a,n;const l=null!==(n=null!==(e=null===(o=null===(t=null==s?void 0:s.sourceProduct)||void 0===t?void 0:t.image)||void 0===o?void 0:o.thumbnail)&&void 0!==e?e:null===(a=null===(r=null==s?void 0:s.sourceProduct)||void 0===r?void 0:r.image)||void 0===a?void 0:a.original)&&void 0!==n?n:null;return l?i("img",{class:"source-image",part:"source-image",src:l}):null}handleAnimationEnd({animationName:i}){i.includes("slideOut")}get el(){return r(this)}};n.style=":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:130px;--product-card-results-min-width:250px;--image-set-mode-min-size:155px;--product-card-set-mode-max-width:300px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#525252;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;}:host{--vviinn-carousel-columns:4;box-sizing:border-box;position:fixed;z-index:2;display:block;display:flex;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}header{position:relative;text-align:center;padding:32px;padding-top:48px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02)}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";export{n as vviinn_recommendations_sidebar}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const o="2.95.3";export{o as v}
|