vviinn-widgets 2.17.4 → 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

@@ -855,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/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,
 };

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

@@ -1,13 +1,5 @@
 import { argTypes, continuityLayoutArgs, gridLayoutArgs } from "./args";
 import { gridDecorator, continuityDecorator } from "./decorators";
-const excludeControls = [
-  "blockTitle",
-  "currencySign",
-  "imageRatio",
-  "imageWidth",
-  "pricePrefix",
-  "showScroll",
-];
 export default {
   title: "Widgets/Visual Recommendations/Widget",
   component: "vviinn-vpr-widget",
@@ -16,13 +8,8 @@ export default {
         disable: true,
       },
     } }),
-  parameters: {
-    controls: {
-      exclude: excludeControls,
-    },
-  },
 };
-const allignementLeft = `
+const alignmentLeft = `
   vviinn-vpr-widget::part(title),
   vviinn-vpr-widget::part(brand),
   vviinn-vpr-widget::part(type),
@@ -31,7 +18,7 @@ const allignementLeft = `
     align-self: start;
     text-align: left;
   }`;
-const allignementCenter = `
+const alignmentCenter = `
   vviinn-vpr-widget::part(title),
   vviinn-vpr-widget::part(brand),
   vviinn-vpr-widget::part(type),
@@ -40,7 +27,7 @@ const allignementCenter = `
     align-self: center;
     text-align: center;
   }`;
-const allignementRight = `
+const alignmentRight = `
   vviinn-vpr-widget::part(title),
   vviinn-vpr-widget::part(brand),
   vviinn-vpr-widget::part(type),
@@ -49,10 +36,10 @@ 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) => `
     <script>
@@ -66,7 +53,7 @@ const Template = (args) => `
       gtag("require", "ec");
     </script>
     <style>
-      ${allignement.get(args.contentAlignment)}
+      ${alignment.get(args.contentAlignment)}
       vviinn-vpr-widget::part(title),
       vviinn-vpr-widget::part(brand),
       vviinn-vpr-widget::part(type),
@@ -151,12 +138,17 @@ const Template = (args) => `
     </style>
 
     <vviinn-vpr-widget
-      block-title="${args.titleName}"
+      block-title="${args.blockTitle}"
+      css-url="${args.cssUrl}"
+      currency-sign="${args.currencySign}"
+      show-scroll="${args.showScroll}"
+      image-ratio="${args.imageRatio}"
+      locale="${args.locale}"
+      price-prefix="${args.pricePrefix}"
       api-path="${args.apiPath}"
       product-id="${args.productId}"
       token="${args.token}"
       mode="${args.mode}"
-      show-scroll="${args.showScrollbars}"
       image-width="${args.imageWidth}"
       campaign-type="${args.campaignType}"
       campaigns="${args.campaigns}"
@@ -180,10 +172,15 @@ Grid.args = {
   recommendationsGridProductsMobile: 4,
   recommendationsGridProductsTablet: 4,
   secondaryTextColor: "#757575",
-  showScrollbars: true,
+  showScroll: true,
   showTitle: true,
   titleFontSize: 28,
-  titleName: "Recommended products",
+  blockTitle: "Recommended products",
+  cssUrl: "",
+  locale: "en-US",
+  currencySign: "€",
+  pricePrefix: "",
+  imageRatio: 1,
   token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
 };
 Grid.argTypes = Object.assign({}, gridLayoutArgs);
@@ -204,10 +201,15 @@ Continuity.args = {
   recommendationsContinuityProductsMobile: 160,
   recommendationsContinuityProductsTablet: 150,
   secondaryTextColor: "#757575",
-  showScrollbars: false,
+  showScroll: false,
   showTitle: true,
   titleFontSize: 28,
-  titleName: "Recommended products",
+  blockTitle: "Recommended products",
+  cssUrl: "",
+  locale: "en-US",
+  currencySign: "€",
+  pricePrefix: "",
+  imageRatio: 1,
   token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
 };
 Continuity.decorators = [continuityDecorator];

package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-vidget.js

@@ -18,14 +18,15 @@ import { checkEmpryString } from "../../utils/option/option";
  * @part currency - brand inside product card
  * @part image - product card image
  * @part image-link - anchor element around product image
+ * @part deeplink - anchor element around product title
  * @part price-amount-sale - numeric part of price.
  * @part price-amount-outdated - numeric part of price.
  * @part price-amount-regular - numeric part of price.
  * @part price-container - block of prices
  * @part price-outdated - block for outdated price. rendered when product contains sale price
- * @part price-prefix - block rendered before each price element (for ex. "from")
  * @part price-regular - block for price if no sale price presented
  * @part price-sale -  block for sale price. rendered only if sale price presented
+ * @part price-prefix - block rendered before each price element (for ex. "from")
  * @part carousel-button
  */
 export class VviinnVprWidget {