vviinn-widgets 2.2.1 → 2.3.1

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

@@ -0,0 +1,190 @@
+export const apiPath = {
+  name: "Api Path",
+  control: {
+    type: "text",
+  },
+  table: {
+    defaultValue: { summary: "https://api.vviinn.com" },
+  },
+};
+const token = {
+  name: "Token",
+  control: {
+    type: "text",
+  },
+};
+const productId = {
+  name: "Product ID",
+  control: {
+    type: "text",
+  },
+};
+const cssUrl = {
+  name: "CSS URL",
+  description: "Optional for custom CSS.  It will overwrite all other settings.",
+  control: {
+    type: "text",
+  },
+  required: false,
+};
+const analyticsId = {
+  name: "Google tracking account ID",
+  description: "Optional. Goolge Analytics account id or tag manager id and click events will be send for analytics product lists",
+  control: {
+    type: "text",
+  },
+  required: false,
+};
+export const campaignType = {
+  name: "Campaign type",
+  control: {
+    type: "select",
+    labels: {
+      VPR: "Visually similar products (VPR)",
+      VCS: "Visually cross-selling (VCS)",
+    },
+  },
+  required: false,
+};
+const showTitle = {
+  name: "Section title",
+  control: {
+    type: "boolean",
+  },
+  table: {
+    defaultValue: { summary: true },
+  },
+  required: false,
+};
+const titleName = {
+  name: "Section title name",
+  control: {
+    type: "text",
+  },
+  table: {
+    defaultValue: { summary: "Recommended products" },
+  },
+  required: false,
+};
+const titleFontSize = {
+  name: "Section title name font size (px)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const showScrollbars = {
+  name: "Use default scrollbar / pagination",
+  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 (px)",
+  control: {
+    type: "number",
+  },
+};
+const contentAlignment = {
+  name: "Content alignment",
+  options: ["Left", "Centered", "Right"],
+  mapping: {
+    Left: 0,
+    Centered: 1,
+    Right: 2,
+  },
+  control: {
+    type: "select",
+    default: 0,
+  },
+};
+const primaryTextColor = {
+  name: "Primary text color",
+  control: {
+    type: "color",
+  },
+  description: "Used where the most user attention is needed: product brand, product title, and price.",
+};
+const secondaryTextColor = {
+  name: "Secondary text color",
+  description: "Used in Old Price",
+  control: {
+    type: "color",
+  },
+};
+export const argTypes = {
+  analyticsId,
+  apiPath,
+  campaignType,
+  contentAlignment,
+  cssUrl,
+  imageWidth,
+  primaryTextColor,
+  productId,
+  secondaryTextColor,
+  showScrollbars,
+  showTitle,
+  titleFontSize,
+  titleName,
+  token,
+};
+const recommendationsGridProductsDesktop = {
+  name: "Product cards shown on desktop",
+  description: "Desktop mode is bigger than 1024px. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsGridProductsTablet = {
+  name: "Product cards shown on tablet",
+  description: "How many product cards users will see inside one grid in a screen 768px-1024px. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsGridProductsMobile = {
+  name: "Product cards shown on mobile",
+  description: "How many product cards users will see inside one grid in a screen <768. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+export const gridLayoutArgs = {
+  recommendationsGridProductsDesktop,
+  recommendationsGridProductsTablet,
+  recommendationsGridProductsMobile,
+};
+const recommendationsContinuityProductsDesktop = {
+  name: "Product cards width in a L screen [px]",
+  description: "How wide product cards will be on a screen bigger than 1024px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsContinuityProductsTablet = {
+  name: "Product cards width in a M screen [px]",
+  description: "How wide product cards will be on a screen from 768px-1024px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsContinuityProductsMobile = {
+  name: "Product cards width in a S screen [px]",
+  description: "How wide product cards will be on a screen smaller than 768px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+export const continuityLayoutArgs = {
+  recommendationsContinuityProductsDesktop,
+  recommendationsContinuityProductsTablet,
+  recommendationsContinuityProductsMobile,
+};

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

@@ -0,0 +1,29 @@
+export const gridDecorator = (story) => `
+<style>
+  @media (min-width: 836px) {
+    #root-inner {
+      padding: 0 10%;
+    }
+  }
+
+  @media (max-width: 860px) {
+    vviinn-product-card::part(title),
+    vviinn-product-card::part(brand),
+    vviinn-product-card::part(type),
+    vviinn-product-card::part(price-container) {
+      font-size: 14px;
+    }
+  }
+</style>
+${story()}
+`;
+export const continuityDecorator = (story) => `
+<style>
+  @media (min-width: 836px) {
+    #root-inner {
+      padding-left: 10%;
+    }
+  }
+</style>
+${story()}
+`;

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

@@ -0,0 +1,212 @@
+import { argTypes, continuityLayoutArgs, gridLayoutArgs } from "./args";
+import { gridDecorator, continuityDecorator } from "./decorators";
+const excludeControls = [
+  "blockTitle",
+  "currencySign",
+  "imageRatio",
+  "imageWidth",
+  "locale",
+  "pricePrefix",
+  "showScroll",
+];
+export default {
+  title: "Widgets/Visual Recommendations/Widget",
+  component: "vviinn-vpr-widget",
+  argTypes: Object.assign(Object.assign({}, argTypes), { mode: {
+      table: {
+        disable: true
+      }
+    } }),
+  parameters: {
+    controls: {
+      exclude: excludeControls
+    }
+  }
+};
+const allignementLeft = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: start;
+    text-align: left;
+  }`;
+const allignementCenter = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: center;
+    text-align: center;
+  }`;
+const allignementRight = `
+  vviinn-vpr-widget::part(title),
+  vviinn-vpr-widget::part(brand),
+  vviinn-vpr-widget::part(type),
+  vviinn-vpr-widget::part(deeplink),
+  vviinn-vpr-widget::part(price-container) {
+    align-self: end;
+    text-align: right;
+  }`;
+const allignement = new Map([
+  [0, allignementLeft],
+  [1, allignementCenter],
+  [2, allignementRight],
+]);
+const Template = (args) => `
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "${args.analyticsId}");
+      gtag("require", "ec");
+    </script>
+    <style>
+      ${allignement.get(args.contentAlignment)}
+      vviinn-vpr-widget::part(title),
+      vviinn-vpr-widget::part(brand),
+      vviinn-vpr-widget::part(type),
+      vviinn-vpr-widget::part(price-sale),
+      vviinn-vpr-widget::part(price-regular) {
+        color: ${args.primaryTextColor};
+      }
+
+      vviinn-vpr-widget::part(price-outdated) {
+        color: ${args.secondaryTextColor};
+      }
+
+      vviinn-vpr-widget::part(recommendations-title) {
+        display: ${args.showTitle ? "flex" : "none"};
+        font-size: ${args.titleFontSize}px;
+      }
+
+      @media(min-width: 1024px) {
+        * {
+          --vviinn-carousel-columns: ${args.recommendationsGridProductsDesktop};
+        }
+      }
+
+      @media(max-width: 1024px) and (min-width: 768px) {
+        * {
+        --vviinn-carousel-columns: ${args.recommendationsGridProductsTablet};
+        }
+      }
+ 
+      @media(max-width: 768px) and (min-width: 460px) {
+        * {
+          --vviinn-carousel-columns: ${args.recommendationsGridProductsMobile};
+        }
+
+        vviinn-product-card::part(title) {
+          font-size: 14px; 
+        }
+      }
+
+      @media(min-width: 1024px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsDesktop}px;
+          max-width: ${args.recommendationsContinuityProductsDesktop}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+      }
+
+      @media(max-width: 1024px) and (min-width: 768px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsTablet}px;
+          max-width: ${args.recommendationsContinuityProductsTablet}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+      }
+
+      @media(max-width: 768px) and (min-width: 460px) {
+        vviinn-product-card,
+        vviinn-vpr-widget::part(image) {
+          width: ${args.recommendationsContinuityProductsMobile}px;
+          max-width: ${args.recommendationsContinuityProductsMobile}px;
+        }
+
+        vviinn-vpr-widget::part(image) {
+          height: 100%;
+          aspect-ratio: 1;
+        }
+
+        vviinn-vpr-widget::part(title) {
+          font-size: 14px; 
+        }
+      }
+    </style>
+    <vviinn-vpr-widget
+      block-title="${args.titleName}"
+      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}"
+    >
+    </vviinn-vpr-widget>
+`;
+export const Grid = Template.bind({});
+Grid.args = {
+  analyticsId: "UA-34442043-5",
+  apiPath: "https://api.vviinn.com",
+  campaignType: "VPR",
+  contentAlignment: "Centered",
+  imageWidth: 420,
+  mode: "grid",
+  primaryTextColor: "#161616",
+  productId: "4114460310",
+  recommendationsGridProductsDesktop: 4,
+  recommendationsGridProductsMobile: 4,
+  recommendationsGridProductsTablet: 4,
+  secondaryTextColor: "#757575",
+  showScrollbars: true,
+  showTitle: true,
+  titleFontSize: 28,
+  titleName: "Recommended products",
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+};
+Grid.argTypes = Object.assign({}, gridLayoutArgs);
+Grid.decorators = [
+  gridDecorator
+];
+export const Continuity = Template.bind({});
+Continuity.args = {
+  analyticsId: "UA-34442043-5",
+  apiPath: "https://api.vviinn.com",
+  campaignType: "VPR",
+  contentAlignment: "Left",
+  imageWidth: 300,
+  mode: "continuity",
+  primaryTextColor: "#161616",
+  productId: "4114460310",
+  recommendationsContinuityProductsDesktop: 200,
+  recommendationsContinuityProductsMobile: 160,
+  recommendationsContinuityProductsTablet: 150,
+  secondaryTextColor: "#757575",
+  showScrollbars: false,
+  showTitle: true,
+  titleFontSize: 28,
+  titleName: "Recommended products",
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4"
+};
+Continuity.decorators = [
+  continuityDecorator
+];
+Continuity.argTypes = Object.assign({}, continuityLayoutArgs);

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

@@ -20,6 +20,7 @@ import { Subject } from "rxjs";
  * @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 carousel-button
  */
 export class VviinnVprWidget {
   constructor() {

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

@@ -0,0 +1,31 @@
+export default {
+  title: "Widgets/Visual Search/Button",
+  component: "vviinn-vps-button",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  },
+  decorators: [(story) => `
+    <div style="display: grid;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                align-items: center;
+                justify-items: center;">
+      ${story()}
+    </div>
+  `],
+};
+const Template = (args) => `
+<vviinn-vps-button
+  api-path="${args.apiPath}"
+  token="${args.token}"
+></vviinn-vps-button>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};

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

@@ -0,0 +1,3 @@
+:host {
+  cursor: pointer;
+}

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

@@ -0,0 +1,33 @@
+export default {
+  title: "Widgets/Visual Search/Widget",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  }
+};
+const Template = ({ token, apiPath }) => `
+  <vviinn-vps-widget token="${token}"
+                     api-path="${apiPath}"
+                     active="true">
+  </vviinn-vps-widget>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};
+Default.storyName = "Modal Window";
+Default.decorators = [(Story) => `
+<style>
+.sb-show-main.sb-main-padded {
+  padding: unset;
+}
+
+#root {
+  align-content: center;
+  display: grid;
+  height: 100vh;
+  justify-items: center;
+}
+</style>
+${Story()}`];

package/dist/esm/{app-globals-b6113170.js → app-globals-90d99f95.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-3e85e294.js';
+import { E as Env } from './index-d7c7df1c.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/esm/cropper-handler.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3e85e294.js';
+import { r as registerInstance, h, H as Host } from './index-d7c7df1c.js';
 import { q as getCursorValue } from './Handler-639a4cb3.js';
 
 const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";

package/dist/esm/{customized-slots-a952fb80.js → customized-slots-65b2467d.js}

@@ -1,4 +1,4 @@
-import { h } from './index-3e85e294.js';
+import { h } from './index-d7c7df1c.js';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/esm/highlight-box_22.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-3e85e294.js';
-import { O as Option, h as sequenceToOption, i as imageSearchState, a as _function, t as transform, j as move, k as makeRectangularSearchRequest, l as fromAlt, n as foldValueObject, o as scaleWithSized, p as center, q as detectedObjectEq, r as toFile, u as processSelectedFile, E as Either, v as match, w as fromImage, x as dimensionsFromImage, y as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-4ca31230.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d7c7df1c.js';
+import { O as Option, h as sequenceToOption, i as imageSearchState, a as _function, t as transform, j as move, k as makeRectangularSearchRequest, l as fromAlt, n as foldValueObject, o as scaleWithSized, p as center, q as detectedObjectEq, r as toFile, u as processSelectedFile, E as Either, v as match, w as fromImage, x as dimensionsFromImage, y as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-f35e14f8.js';
 import { p as pipe, m as pointDiffSemigroup, o as fromMouseEvent } from './Handler-639a4cb3.js';
-import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-017f18de.js';
-import { s as slotChangeListener } from './customized-slots-a952fb80.js';
+import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-ac2e3b9d.js';
+import { s as slotChangeListener } from './customized-slots-65b2467d.js';
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------

package/dist/esm/{imageSearch.store-4ca31230.js → imageSearch.store-f35e14f8.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-3e85e294.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-d7c7df1c.js';
 import { t as tuple, i as isNone$1, l as left$1, r as right$1, a as isLeft$1, b as identity, p as pipe, n as none$1, s as some$1, f as first, c as flow, d as struct, e as last, g as pointSumSemigroup, H as HandlerDirection, h as fromRectangle, j as isSome, k as fromRectangle$1 } from './Handler-639a4cb3.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

package/dist/esm/{index-017f18de.js → index-ac2e3b9d.js}

@@ -1,11 +1,9 @@
-import { h } from './index-3e85e294.js';
+import { h } from './index-d7c7df1c.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
-const CameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
-  h("defs", null),
-  h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M9.771 3.89a.875.875 0 01.728-.39h7c.293 0 .566.146.728.39l1.49 2.235h3.033a2.625 2.625 0 012.625 2.625V21a2.625 2.625 0 01-2.625 2.625H5.25A2.625 2.625 0 012.625 21V8.75A2.625 2.625 0 015.25 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.25a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
-  h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M14 11.375a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm-4.813 3.063a4.812 4.812 0 119.625 0 4.812 4.812 0 01-9.625 0z", "clip-rule": "evenodd" })));
+const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
 const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
   h("defs", null),
   h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
@@ -21,11 +19,11 @@ const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg
   h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
 const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
-const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
-const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
+const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
 const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("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" })));
 
-export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CrossIcon as a, CameraIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };
+export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CameraIcon as a, CrossIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };

package/dist/esm/{index-3e85e294.js → index-d7c7df1c.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.2.0","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.3.0","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3e85e294.js';
-import { g as globalScripts } from './app-globals-b6113170.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d7c7df1c.js';
+import { g as globalScripts } from './app-globals-90d99f95.js';
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -12,7 +12,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   globalScripts();
-  return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_5",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}],[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]],[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]]], options);
+  return bootstrapLazy([["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_3",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"recommendations":[32],"loaded":[32]},[[0,"productImageLoaded","lol"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view"],[1,"vviinn-onboarding"],[1,"vviinn-example-images",null,[[0,"exampleImageSelected","handleImageSelection"],[0,"exampleImageError","handleImageSelectionError"]]],[1,"vviinn-overlayed-modal",{"active":[4]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector"],[1,"vviinn-server-error"],[1,"vviinn-wrong-format"],[1,"search-filters",{"filter":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"slidePosition":[32],"width":[32],"wrongImageFormat":[32]}]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"modalClosed","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"]}]]]], options);
   });
 };