vviinn-widgets 2.17.0 → 2.17.7

package/dist/cjs/cropper-handler_27.cjs.entry.js

@@ -701,14 +701,17 @@ const processWidth = (url, size) => {
 };
 const Linked = (props, child) => props.deeplink ? (index.h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
 const FormattedPrice = (props) => {
-  var _a;
   const locale = props.locale;
   const priceType = props.priceType;
   const formattedPrice = new Intl.NumberFormat(locale, {
     minimumFractionDigits: 2,
   }).format(props.price);
-  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
-  return (index.h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` }, fullPrice));
+  const prefixElement = props.prefix ? (index.h("span", { part: "price-prefix" }, props.prefix + " ")) : null;
+  const currencyElement = props.currency ? (index.h("span", { part: "currency" }, " " + props.currency)) : null;
+  return (index.h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` },
+    prefixElement,
+    formattedPrice,
+    currencyElement));
 };
 const Price = (props) => {
   return (index.h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
@@ -785,15 +788,15 @@ let VviinnProductCard = class {
       lazy: false,
     };
     return this.responsive
-      ? ResponsiveImage(props, () => this.kek())
-      : Image(props, () => this.kek());
+      ? ResponsiveImage(props, () => this.emitImageLoaded())
+      : Image(props, () => this.emitImageLoaded());
   }
-  kek() {
+  emitImageLoaded() {
     this.productImageLoaded.emit(this.productId);
   }
   render() {
     var _a, _b, _c;
-    return (index.h(index.Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-prefix, price-regular, price-sale, title" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : index$1.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : index$1.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : index$1.state.locale })));
+    return (index.h(index.Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title" }, index.h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()), index.h(Linked, { deeplink: this.deeplink, part: "deeplink" }, index.h("span", { class: "title", part: "title" }, this.productTitle)), index.h("span", { class: "brand", part: "brand" }, this.brand), index.h("span", { class: "type", part: "type" }, this.productType), index.h(Price, { prefix: (_a = this.pricePrefix) !== null && _a !== void 0 ? _a : index$1.state.pricePrefix, currency: (_b = this.currency) !== null && _b !== void 0 ? _b : index$1.state.currencySign, price: this.price, salePrice: this.salePrice, locale: (_c = this.locale) !== null && _c !== void 0 ? _c : index$1.state.locale })));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/vviinn-button.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0bda22ec.js');
 const index$1 = require('./index-5ce4918b.js');
 
-const vviinnButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#F4F4F4;outline:none}";
+const vviinnButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
 
 let VviinnButton = class {
   constructor(hostRef) {
@@ -13,7 +13,7 @@ let VviinnButton = class {
     this.addStyle = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
+    return (index.h(index.Host, { exportparts: "button" }, index.h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" }, index.h("slot", null, index.h(index$1.VisualSearchIcon, null)))));
   }
 };
 VviinnButton.style = vviinnButtonCss;

package/dist/cjs/vviinn-carousel_2.cjs.entry.js

@@ -231,23 +231,18 @@ function fold(onVPR, onVCS) {
 function fromString(s) {
   return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
 }
-function addColorToUrl(url, color) {
-  return (color === null || color === void 0 ? void 0 : color.length) > 0 ? `${url}?color=${color}` : url;
-}
 
 const sequenceToEither = index$1.sequenceT(index$1.Apply);
 const apiGet = (path, data = {}) => index$1.pipe(sequenceToEither(index$1.getApiPath(), index$1.createInitGetRequest), index$1.fromEither, index$1.chainW(index$1.makeRequest(path, data)));
 
 const getVPRRecommendations = (productId) => (color) => (campaigns) => (options) => {
-  const url = index$1._function.pipe(campaigns, index$1.map(encodeURIComponent), index$1.match$1(() => `product/${productId}/similar-products`, (encodedCampaignsIds) => `product/${productId}/similar-products?campaigns=${encodedCampaignsIds}`));
-  const urlWithParams = addColorToUrl(url, color);
-  return apiGet(urlWithParams, options);
+  const url = index$1._function.pipe(campaigns, index$1.map(encodeURIComponent), index$1.match$1(() => `product/${productId}/similar-products${color ? `?color=${color}` : ""}`, (encodedCampaignsIds) => `product/${productId}/similar-products?campaigns=${encodedCampaignsIds}${color ? `&color=${color}` : ""}`));
+  return apiGet(url, options);
 };
 
 const getVCSRecommendations = (productId) => (color) => (campaigns) => (options) => {
-  const url = index$1._function.pipe(campaigns, index$1.map(encodeURIComponent), index$1.match$1(() => `product/${productId}/cross-selling-products`, (encodedCampaignsIds) => `product/${productId}/cross-selling-products?campaigns=${encodedCampaignsIds}`));
-  const urlWithParams = addColorToUrl(url, color);
-  return apiGet(urlWithParams, options);
+  const url = index$1._function.pipe(campaigns, index$1.map(encodeURIComponent), index$1.match$1(() => `product/${productId}/cross-selling-products${color ? `?color=${color}` : ""}`, (encodedCampaignsIds) => `product/${productId}/cross-selling-products?campaigns=${encodedCampaignsIds}${color ? `&color=${color}` : ""}`));
+  return apiGet(url, options);
 };
 
 const getRecommendationsService = (campaignType) => index$1._function.pipe(fromString(campaignType), fold(() => getVPRRecommendations, () => getVCSRecommendations));
@@ -860,7 +855,7 @@ class AnonymousSubject extends Subject {
     }
 }
 
-const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #DDDDDD;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
+const vviinnVprWidgetCss = ":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";
 
 let VviinnVprWidget = class {
   constructor(hostRef) {

package/dist/cjs/vviinn-recommendations-sidebar.cjs.entry.js

@@ -45,7 +45,7 @@ let RecommendationsSidebar = class {
     return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
   }
   render() {
-    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.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.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-outdated, price-prefix, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
+    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.isSourceImageValid() ? this.renderSourceImage() : null, index.h("span", { class: "title", part: "title" }, this.sidebarTitle), index.h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") }, index.h(index$1.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", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
   }
   renderSourceImage() {
     return (index.h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));

package/dist/cjs/vviinn-vps-button.cjs.entry.js

@@ -36,7 +36,7 @@ let VviinnVpsButton = class {
     this.pressed = true;
   }
   render() {
-    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("vviinn-button", { onClick: () => this.handleClick(), addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images", campaignId: this.campaignId })));
+    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("vviinn-button", { onClick: () => this.handleClick(), addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId })));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/campaign/Campaign.js

@@ -6,6 +6,3 @@ export function fold(onVPR, onVCS) {
 export function fromString(s) {
   return s === "VPR" ? { _tag: "VPR" } : { _tag: "VCS" };
 }
-export function addColorToUrl(url, color) {
-  return (color === null || color === void 0 ? void 0 : color.length) > 0 ? `${url}?color=${color}` : url;
-}

package/dist/collection/campaign/VCSCampaignService.js

@@ -1,9 +1,7 @@
 import { apiGet } from "../network/apiClient";
 import * as O from "fp-ts/Option";
 import { pipe } from "fp-ts/lib/function";
-import { addColorToUrl } from "./Campaign";
 export const getVCSRecommendations = (productId) => (color) => (campaigns) => (options) => {
-  const url = pipe(campaigns, O.map(encodeURIComponent), O.match(() => `product/${productId}/cross-selling-products`, (encodedCampaignsIds) => `product/${productId}/cross-selling-products?campaigns=${encodedCampaignsIds}`));
-  const urlWithParams = addColorToUrl(url, color);
-  return apiGet(urlWithParams, options);
+  const url = pipe(campaigns, O.map(encodeURIComponent), O.match(() => `product/${productId}/cross-selling-products${color ? `?color=${color}` : ""}`, (encodedCampaignsIds) => `product/${productId}/cross-selling-products?campaigns=${encodedCampaignsIds}${color ? `&color=${color}` : ""}`));
+  return apiGet(url, options);
 };

package/dist/collection/campaign/VPRCampaignService.js

@@ -1,9 +1,7 @@
 import { apiGet } from "../network/apiClient";
 import * as O from "fp-ts/Option";
 import { pipe } from "fp-ts/lib/function";
-import { addColorToUrl } from "./Campaign";
 export const getVPRRecommendations = (productId) => (color) => (campaigns) => (options) => {
-  const url = pipe(campaigns, O.map(encodeURIComponent), O.match(() => `product/${productId}/similar-products`, (encodedCampaignsIds) => `product/${productId}/similar-products?campaigns=${encodedCampaignsIds}`));
-  const urlWithParams = addColorToUrl(url, color);
-  return apiGet(urlWithParams, options);
+  const url = pipe(campaigns, O.map(encodeURIComponent), O.match(() => `product/${productId}/similar-products${color ? `?color=${color}` : ""}`, (encodedCampaignsIds) => `product/${productId}/similar-products?campaigns=${encodedCampaignsIds}${color ? `&color=${color}` : ""}`));
+  return apiGet(url, options);
 };

package/dist/collection/components/vviinn-button/vviinn-button.css

@@ -1,9 +1,4 @@
 :host {
-  /**
-   * @prop --vviinn-carousel-columns: control number of items in grid mode
-   * @prop --vviinn-carousel-image-width: control image width in continuity mode
-   */
-
   display: block;
 }
 
@@ -39,6 +34,6 @@
 }
 
 .open-button:active {
-  background: #F4F4F4;
+  background: #f4f4f4;
   outline: none;
 }

package/dist/collection/components/vviinn-button/vviinn-button.js

@@ -9,7 +9,7 @@ export class VviinnButton {
     this.addStyle = true;
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { exportparts: "button" },
       h("button", { class: this.addStyle ? "open-button" : "raw-open-button", part: "button" },
         h("slot", null,
           h(VisualSearchIcon, null)))));

package/dist/collection/components/vviinn-product-card/render-helpers.js

@@ -10,14 +10,17 @@ export const processWidth = (url, size) => {
 };
 export const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
 const FormattedPrice = (props) => {
-  var _a;
   const locale = props.locale;
   const priceType = props.priceType;
   const formattedPrice = new Intl.NumberFormat(locale, {
     minimumFractionDigits: 2,
   }).format(props.price);
-  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
-  return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` }, fullPrice));
+  const prefixElement = props.prefix ? (h("span", { part: "price-prefix" }, props.prefix + " ")) : null;
+  const currencyElement = props.currency ? (h("span", { part: "currency" }, " " + props.currency)) : null;
+  return (h("span", { class: "price-amount", part: `price-amount${priceType ? "-" + priceType : ""}` },
+    prefixElement,
+    formattedPrice,
+    currencyElement));
 };
 export const Price = (props) => {
   return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([

package/dist/collection/components/vviinn-product-card/stories/args.js

@@ -1,22 +1,15 @@
 export const argTypes = {
-  imageWidth: {
-    name: "Card width (px)",
-  },
-  imageBorder: {
-    name: "Image border",
-  },
   imageBorderColor: {
     name: "Image border color",
     control: {
       type: "color",
     },
   },
-  imageBackground: {
-    name: "Image background",
+  dimmedBackground: {
+    name: "dimmed-background",
     description: "Adding a light-gray filter on top of the image to distinguish it from the rest of the product card content.",
   },
-  showBrand: {
-    name: "Show brand",
+  brand: {
     description: "Using the [title] attribute from product feed.",
   },
   titleLineCount: {
@@ -28,15 +21,13 @@ export const argTypes = {
     },
   },
   locale: {
-    name: "Locale",
     options: ["de-DE", "en-US"],
     control: {
       type: "select",
       default: 0,
     },
   },
-  currencyValue: {
-    name: "Currency",
+  currency: {
     options: ["$", "€", "£", "¥", "₽"],
     control: {
       type: "select",

package/dist/collection/components/vviinn-product-card/stories/vviinn-product-card.stories.js

@@ -3,10 +3,8 @@ import { productDecorator } from "./decorators";
 export default {
   title: "Elements/Product Card",
   component: "vviinn-product-card",
-  decorators: [
-    productDecorator
-  ],
-  argTypes
+  decorators: [productDecorator],
+  argTypes,
 };
 const showImageBorders = (x, color) => {
   const borderRule = x ? `1px solid ${color}` : "none";
@@ -26,7 +24,7 @@ const setupTitleLineCount = (count) => `
     -webkit-line-clamp: ${count};
   }
 `;
-const allignementLeft = `
+const alignmentLeft = `
   vviinn-product-card::part(title),
   vviinn-product-card::part(brand),
   vviinn-product-card::part(type),
@@ -35,7 +33,7 @@ const allignementLeft = `
     align-self: start;
     text-align: left;
   }`;
-const allignementCenter = `
+const alignmentCenter = `
   vviinn-product-card::part(title),
   vviinn-product-card::part(brand),
   vviinn-product-card::part(type),
@@ -44,7 +42,7 @@ const allignementCenter = `
     align-self: center;
     text-align: center;
   }`;
-const allignementRight = `
+const alignmentRight = `
   vviinn-product-card::part(title),
   vviinn-product-card::part(brand),
   vviinn-product-card::part(type),
@@ -53,16 +51,16 @@ const allignementRight = `
     align-self: end;
     text-align: right;
   }`;
-const allignement = new Map([
-  [0, allignementLeft],
-  [1, allignementCenter],
-  [2, allignementRight],
+const alignment = new Map([
+  [0, alignmentLeft],
+  [1, alignmentCenter],
+  [2, alignmentRight],
 ]);
 const Template = (args) => `
   <style>
-    ${allignement.get(args.contentAlignment)}
+    ${alignment.get(args.contentAlignment)}
     ${showImageBorders(args.imageBorder, args.imageBorderColor)}
-    ${setupBrandVisibility(args.showBrand)}
+    ${setupBrandVisibility(args.brand)}
     ${setupTitleLineCount(args.titleLineCount)}
 
     vviinn-product-card::part(title),
@@ -78,28 +76,44 @@ const Template = (args) => `
     }
   </style>
   <vviinn-product-card
-    product-title="Couchtisch Rolf Benz 8770 Ronald Schmitt"
-    brand="Ronald Schmitt"
-    product-type="Couchtische"
-    price="3629"
-    sale-price="1653"
-    image="https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
+    product-title="${args.productTitle}"
+    product-id="${args.productId}"
+    brand="${args.brand}"
+    product-type="${args.productType}"
+    price="${args.price}"
+    sale-price="${args.salePrice}"
+    price-prefix="${args.pricePrefix}"
+    image="${args.image}"
     image-width="${args.imageWidth}"
-    dimmed-background="${args.imageBackground}"
+    responsive="${args.responsive}"
+    image-ratio="${args.imageRatio}"
+    dimmed-background="${args.dimmedBackground}"
     locale="${args.locale}"
-    currency="${args.currencyValue}"
+    currency="${args.currency}"
+    deeplink="${args.deeplink}"
+    imageRatio="${args.imageRatio}"
   ></vviinn-product-card>`;
 export const Default = Template.bind({});
 Default.args = {
+  productTitle: "Couchtisch Rolf Benz 8770 Ronald Schmitt",
+  productType: "Couchtische",
+  productId: "",
   imageWidth: 240,
   contentAlignment: "Left",
   imageBorder: true,
   imageBorderColor: "#dddddd",
-  imageBackground: false,
+  dimmedBackground: false,
   primaryTextColor: "#161616",
   secondaryTextColor: "#757575",
-  showBrand: false,
+  brand: "Ronald Schmitt",
   titleLineCount: 2,
   locale: "en-US",
-  currencyValue: "€"
+  currency: "€",
+  deeplink: "",
+  image: "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg",
+  responsive: false,
+  imageRatio: 1,
+  price: 3629,
+  salePrice: 1653,
+  pricePrefix: "",
 };

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -17,9 +17,9 @@ import styles from "./vviinn-product-card.css";
  * @part price-amount-regular - numeric part of price.
  * @part price-container - block contains all prices.
  * @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
- * @part price-prefix - renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
  * @part price-regular - renders inside price-container when "sale-price" property is empty.
  * @part price-sale - renders inside price-container when "sale-price" property filled. Contains sale price.
+ * @part price-prefix - renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
  * @part title - product title
  */
 export class VviinnProductCard {
@@ -76,15 +76,15 @@ export class VviinnProductCard {
       lazy: false,
     };
     return this.responsive
-      ? ResponsiveImage(props, () => this.kek())
-      : Image(props, () => this.kek());
+      ? ResponsiveImage(props, () => this.emitImageLoaded())
+      : Image(props, () => this.emitImageLoaded());
   }
-  kek() {
+  emitImageLoaded() {
     this.productImageLoaded.emit(this.productId);
   }
   render() {
     var _a, _b, _c;
-    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-prefix, price-regular, price-sale, title" },
+    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title" },
       h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()),
       h(Linked, { deeplink: this.deeplink, part: "deeplink" },
         h("span", { class: "title", part: "title" }, this.productTitle)),

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js

@@ -44,7 +44,7 @@ export class RecommendationsSidebar {
           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-outdated, price-prefix, price-regular, price-sale, title: product-title, carousel-button, product-card, items-group", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
+          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", token: this.token, productId: this.productId, imageWidth: this.imageWidth, blockTitle: "", mode: this.mode, useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar, campaigns: this.campaigns, color: this.color })))));
   }
   renderSourceImage() {
     return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));

package/dist/collection/components/vviinn-vpr-button/stories/args.js

@@ -17,13 +17,6 @@ export const argTypes = {
     },
     defaultValue: "Default",
   },
-  iconColor: {
-    name: "Icon color",
-    control: {
-      type: "color",
-    },
-    defaultValue: "#000000",
-  },
   backgroundColor: {
     name: "Background color",
     control: {
@@ -77,13 +70,6 @@ export const argTypes = {
     },
     defaultValue: "bottom",
   },
-  backdropOpacity: {
-    name: "Backdrop opacity (%)",
-    control: {
-      type: "number",
-    },
-    defaultValue: 50,
-  },
   sidebarBorderRadius: {
     name: "Modal container round corners (px)",
     control: {
@@ -203,6 +189,32 @@ export const argTypes = {
       type: "text",
     },
   },
+  addStyle: {
+    name: "add-style",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: true,
+  },
+  imageWidth: {
+    name: "image-width",
+    control: {
+      type: "text",
+    },
+    defaultValue: "300",
+  },
+  mode: {
+    name: "mode",
+    options: ["continuity", "grid"],
+    control: {
+      type: "select",
+    },
+    defaultValue: "continuity",
+  },
+  sourceImage: {
+    name: "source-image",
+    defaultValue: "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg",
+  },
   color: {
     name: "color",
     control: {

package/dist/collection/components/vviinn-vpr-button/stories/vviinn-vpr-button.stories.js

@@ -25,7 +25,6 @@ const Template = (args) => `<style>
      vviinn-vpr-button::part(button) {
        width: ${args.buttonSize}px;
        height: ${args.buttonSize}px;
-       fill: ${args.iconColor};
        background: ${args.backgroundColor};
        opacity: ${args.backgroundOpacity}%;
        border-radius: ${args.radius}px;
@@ -60,6 +59,7 @@ const Template = (args) => `<style>
      }
 
      vviinn-recommendations-sidebar::part(source-image) {
+       display: ${args.sourceImage && args.showSourceImage ? "block" : "none"};
        width: ${args.sourceImageSize}px;
        height: ${args.sourceImageSize}px;
        border: ${args.sourceImageBorder ? "1px solid" : "none"};
@@ -70,9 +70,13 @@ const Template = (args) => `<style>
    <vviinn-vpr-button token="${args.token}"
                       product-id="${args.productId}"
                       position="${args.position}"
+                      add-style="${args.addStyle}"
                       sidebar-title="${args.sidebarTitle}"
                       modal-scrollbar="${args.modalScrollbar}"
+                      mode="${args.mode}"
                       campaigns="${args.campaigns}"
+                      image-width="${args.imageWidth}"
+                      source-image="${args.sourceImage}"
                       color="${args.color.toString().slice(1)}"
                       source-image="${args.showSourceImage
   ? "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.css

@@ -1,8 +1,3 @@
 :host {
-  /**
-   * @prop --vviinn-carousel-columns: control number of items in grid mode
-   * @prop --vviinn-carousel-image-width: control image width in continuity mode
-   */
-
   display: block;
 }

package/dist/collection/components/vviinn-vpr-widget/stories/args.js

@@ -68,16 +68,6 @@ const showTitle = {
   },
   required: false,
 };
-const titleName = {
-  name: "block-title",
-  control: {
-    type: "text",
-  },
-  table: {
-    defaultValue: { summary: "Recommended products" },
-  },
-  required: false,
-};
 const titleFontSize = {
   name: "Section title name font size (px)",
   control: {
@@ -85,14 +75,6 @@ const titleFontSize = {
   },
   required: false,
 };
-const showScrollbars = {
-  name: "show-scroll",
-  description: "Add browser default horizontal scroll bar (in continuity mode) or pagination bullets (in grid mode) to add extra cue for users ",
-  control: {
-    type: "boolean",
-  },
-  required: false,
-};
 const imageWidth = {
   name: "image-width",
   control: {
@@ -137,10 +119,8 @@ export const argTypes = {
   primaryTextColor,
   productId,
   secondaryTextColor,
-  showScrollbars,
   showTitle,
   titleFontSize,
-  titleName,
   token,
   color,
 };