vviinn-widgets 2.18.21 → 2.19.0

package/dist/esm/vviinn-vps-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"vviinn-vps-button.entry.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,sBAAsB;;MCsDpC,eAAe;;;;;;;;;;;;;;;IAyC1B,sBAAiB,GAAG;MAClB,OAAO;QACL,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAAC;QAC1C,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;OACrB,CAAC;KACH,CAAC;;wBA3C6B,GAAG;kBAET,OAAO;;oBAIJ,KAAK;gBAEE,OAAO;;yBAKR,KAAK;;EAiCvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;GAC5B;EAED,gBAAgB;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjD;EAEO,WAAW;IACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;GAC3B;EAEO,WAAW;IACjB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,IAC9B,qBACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,eAAe,IAEpB,gBACE,EAAC,UAAU,OAAG,CACT,CACO,EAEhB,EAAC,YAAY,OAAG,EAChB,yBACE,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,YAAY,EAChC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAC,6NAA6N,EACzO,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,eAAe,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,GAC3B,CACG,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/vviinn-vps-button/vviinn-vps-button.css?tag=vviinn-vps-button&encapsulation=shadow","./src/components/vviinn-vps-button/vviinn-vps-button.tsx"],"sourcesContent":[":host {\n  /**\n    * @prop --color-primary: set color of search button and bullets in onboarding block\n    * @prop --color-primary-hover: set color of search button and bullets in onboarding block on mouse hover\n    * @prop --color-icons: set fill color of svg icons in onboarding block \n    */\n\n  display: block;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { CameraIcon } from \"../vviinn-icons\";\nimport { SlotSkeleton } from \"../customized-slots\";\nimport { BasicEventData } from \"../../recommendation/events\";\nimport { campaignTypeNames } from \"../../campaign/Campaign\";\n\n/**\n * @slot vviinn-onboarding-title - Title of onboarding section\n * @slot onboarding-card-1-icon - Icon (or other graphics) on first onboarding slide\n * @slot onboarding-card-1-text - Text content of first onboarding slide\n * @slot onboarding-card-2-icon - Icon (or other graphics) on second onboarding slide\n * @slot onboarding-card-2-text - Text content of second onboarding slide\n * @slot onboarding-card-3-icon - Icon (or other graphics) on third onboarding slide\n * @slot onboarding-card-3-text - Text content of third onboarding slide\n * @slot vviinn-example-images-title - Header of example images block\n * @slot vviinn-example-images-1 - First image in example images block\n * @slot vviinn-example-images-2 - Second image in example images block\n * @slot vviinn-example-images-3 - Third image in example images block\n * @slot vviinn-example-images-4 - Fourth image in example images block\n * @slot vviinn-teaser-text - Text on widget's main screen\n * @slot vviinn-image-upload-button-text - Title of upload button\n * @slot vviinn-privacy-badge-text - Text content of privacy notification block\n * @slot vviinn-image-search-modal-title - Image search modal title\n *\n * @part brand - product brand.\n * @part deeplink - anchor element for title. Rendered only if \"deeplink\" property filled.\n * @part image - product image.\n * @part image-link - anchor element for image. Rendered only if \"deeplink\" property filled.\n * @part price-amount-sale - numeric part of price.\n * @part price-amount-outdated - numeric part of price.\n * @part price-amount-regular - numeric part of price.\n * @part price-container - block contains all prices.\n * @part price-outdated - renders inside price-container when \"sale-price\" property filled. Contains regular price.\n * @part price-regular - renders inside price-container when \"sale-price\" property is empty.\n * @part price-sale - renders inside price-container when \"sale-price\" property filled. Contains sale price.\n * @part title - product title\n * @part example-images - example images block\n * @part button - button\n */\n@Component({\n  tag: \"vviinn-vps-button\",\n  styleUrl: \"vviinn-vps-button.css\",\n  shadow: true,\n})\nexport class VviinnVpsButton {\n  @Element() el: HTMLElement;\n  /** vviinn customer token */\n  @Prop() token: string;\n  /** Currency sign will shown after price */\n  @Prop() currencySign: string = \"€\";\n  /** Locale for currency formatting */\n  @Prop() locale: string = \"de-DE\";\n  /** Campaign using for visual search */\n  @Prop() campaignId?: string;\n  /** Add style to the button */\n  @Prop() addStyle: boolean = false;\n  /** Add style to the button */\n  @Prop() mode: \"modal\" | \"upload\" = \"modal\";\n\n  /** @internal */\n  @Prop() apiPath: string | undefined;\n\n  @State() buttonPressed: boolean = false;\n\n  /** @internal */\n  @Event({ bubbles: true, composed: true })\n  globalSlotsChanged: EventEmitter<any>;\n\n  /** Event emitted when vps-button clicked */\n  @Event() vviinnWidgetOpen: EventEmitter<BasicEventData>;\n  /** Event fires when user select file */\n  @Event() vviinnImageUpload: EventEmitter<BasicEventData>;\n  /** Event fires when user select file that no .jpg, .jpeg or png */\n  @Event() vviinnNoResult: EventEmitter<BasicEventData>;\n\n  // List to show in the Storybook:\n  @Event() vviinnWidgetLoad: EventEmitter;\n  @Event() vviinnWidgetClose: EventEmitter;\n  @Event() vviinnProductClick: EventEmitter;\n  @Event() vviinnProductView: EventEmitter;\n  @Event() vviinnProductLoad: EventEmitter;\n  @Event() vviinnImageCrop: EventEmitter;\n  @Event() vviinnSelectObject: EventEmitter;\n  @Event() vviinnSelectFilter: EventEmitter;\n\n  getBasicEventData = (): BasicEventData => {\n    return {\n      widgetType: \"VPS\",\n      campaignTypeId: \"VPS\",\n      campaignTypeName: campaignTypeNames[\"VPS\"],\n      widgetId: this.el.id,\n    };\n  };\n\n  @Listen(\"vviinnWidgetClose\")\n  handleModalClosed() {\n    this.buttonPressed = false;\n  }\n\n  componentDidLoad() {\n    const slots = this.el.querySelectorAll(\"[slot]\");\n    this.globalSlotsChanged.emit(Array.from(slots));\n  }\n\n  private handleClick() {\n    this.buttonPressed = true;\n  }\n\n  private resetButton() {\n    this.buttonPressed = false;\n  }\n\n  render() {\n    return (\n      <Host tabindex=\"0\" role=\"button\">\n        <vviinn-button\n          onClick={() => {\n            this.handleClick();\n          }}\n          addStyle={this.addStyle}\n          part=\"vviinn-button\"\n        >\n          <slot>\n            <CameraIcon />\n          </slot>\n        </vviinn-button>\n\n        <SlotSkeleton />\n        <vviinn-vps-widget\n          mode={this.mode}\n          currency-sign={this.currencySign}\n          token={this.token}\n          locale={this.locale}\n          apiPath={this.apiPath}\n          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\"\n          campaignId={this.campaignId}\n          showingInButton={true}\n          buttonPressed={this.buttonPressed}\n          resetVpsButton={this.resetButton.bind(this)}\n          buttonElementId={this.el.id}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/vviinn-vps-widget.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-590cb67e.js';
-import { i as imageSearchState, s as state, a as _function, O as Option, n as isEmpty } from './imageSearch.store-9dde5360.js';
-import { s as slotChangeListener, S as SlotSkeleton } from './customized-slots-00afe247.js';
-import { e as createProductViewVpsEvent, f as createProductClickVpsEvent, g as createSearchEvent, h as createFilterEvent, v as v4, b as createTrackingApi, i as createWidgetVpsEvent } from './index-4d5b52ba.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-48ef9564.js';
+import { i as imageSearchState, s as state, a as _function, O as Option, l as isEmpty } from './imageSearch.store-cccd9b24.js';
+import { s as slotChangeListener, S as SlotSkeleton } from './customized-slots-b372eaed.js';
+import { e as createProductViewVpsEvent, f as createProductClickVpsEvent, g as createSearchEvent, h as createFilterEvent, v as v4, b as createTrackingApi, i as createWidgetVpsEvent } from './index-fdc32fbc.js';
 import { c as campaignTypeNames } from './Campaign-90ba7e06.js';
-import './Handler-f9b8735c.js';
+import './Handler-7bfee84f.js';
 
-const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #f4f4f4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:-webkit-max-content auto;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #f4f4f4;display:grid;grid-template-rows:-webkit-min-content 170px;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:4px;border:1px solid #f4f4f4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter):hover{background:#eaeaea}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:-webkit-min-content;grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
+const vviinnVpsWidgetCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);min-height:580px}.start-page_block{align-content:start;border-right:1px solid #f4f4f4;display:grid;padding:48px}.start-page_block.error{align-content:center}#onboarding-block{border-right:unset;box-sizing:border-box;grid-gap:24px;overflow-y:auto;position:relative;width:100%}vviinn-teaser{margin-bottom:32px;margin-top:-24px}vviinn-image-selector{align-items:center;background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));border-radius:2px;color:white;display:grid;font-size:16px;font-weight:600;height:56px;justify-items:center;margin-bottom:16px;transition:background 0.1s ease-in-out}vviinn-image-selector:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}vviinn-image-selector:active{border-color:black}.upload-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:16px}.results-page{display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.products{align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));justify-items:center;padding:24px;padding-right:0;position:absolute;width:calc(100% - 16px)}.products.hidden{display:none}vviinn-empty-results{width:280px;align-self:center;justify-self:center}.products-wrapper{display:grid;overflow-y:auto;overflow-x:hidden;padding:unset;position:relative;width:100%}.image-wrapper{border-right:1px solid #f4f4f4;display:grid;grid-template-rows:min-content 170px;grid-gap:24px;min-width:100%}.onboarding-wrapper{position:absolute;width:100%;padding:48px;box-sizing:border-box;display:grid;grid-gap:64px;padding-bottom:24px}vviinn-product-card{gap:0;width:100%}vviinn-product-card::part(image){border:1px solid #eaeaea;margin-bottom:8px}vviinn-product-card::part(price-container),vviinn-product-card::part(deeplink),vviinn-product-card::part(title){align-self:start}search-filters span{display:none}search-filters::part(filter){background:#f4f4f4;border-radius:4px;border:1px solid #f4f4f4;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px}search-filters::part(show-more-filters){border:1px solid #f4f4f4;border-radius:4px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:600;line-height:20px;padding:6px 16px}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter):hover{background:#eaeaea}search-filters::part(filter):focus{outline:none;border:1px solid var(--color-primary, var(--color-primary-system))}search-filters::part(filter active){background:rgba(15, 98, 254, 0.15);color:var(--color-primary, var(--color-primary-system))}.filters-wrapper{overflow:auto}.results-page:not(.active){display:none}.nothing-found{display:grid;grid-gap:64px;justify-self:center;padding-top:64px;padding-bottom:16px;position:absolute;width:60%}@media (max-width: 768px){.start-page_block{padding:24px}.onboarding-wrapper{padding:24px}}@media (max-width: 640px){.start-page{grid-template-rows:min-content;grid-template-columns:unset;grid-gap:48px;padding:24px 0 48px 0}}@media (max-width: 640px) and (min-width: 415px){.onboarding-wrapper{position:unset}#onboarding-block{overflow:unset}.start-page.active{height:1px;overflow:auto}}@media (max-width: 415px){.results-page>*{box-sizing:border-box;padding:24px}vviinn-slide{padding-bottom:48px}.start-page_block:last-of-type{border-right:unset;overflow-y:unset;position:static;box-sizing:border-box;width:unset}.start-page_block{padding:0 24px}vviinn-teaser{margin-top:24px}.onboarding-wrapper{position:static;width:unset;padding:unset;box-sizing:border-box}.results-page{grid-template-columns:unset;grid-template-rows:min-content auto}.image{margin-bottom:8px}.image-wrapper{grid-template-rows:min-content auto;width:100%}.products-wrapper{align-content:start;position:static;overflow-y:unset;width:100%;padding-top:0}.products{position:static;padding:0;width:unset;grid-gap:32px 16px;justify-content:center}.nothing-found{position:static;grid-gap:64px;padding:unset;align-content:start;width:unset}}@media (max-width: 320px){.products{grid-template-columns:unset}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -22,11 +22,12 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
 const notEmptyString = (s) => !isEmpty(s);
 const notNan = (n) => !isNaN(n);
-let VviinnVpsWidget = class {
+const VviinnVpsWidget = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.globalSlotsChanged = createEvent(this, "globalSlotsChanged", 7);
     this.vviinnWidgetLoad = createEvent(this, "vviinnWidgetLoad", 7);
+    this.vviinnWidgetOpen = createEvent(this, "vviinnWidgetOpen", 7);
     this.vviinnWidgetClose = createEvent(this, "vviinnWidgetClose", 7);
     this.vviinnProductClick = createEvent(this, "vviinnProductClick", 7);
     this.vviinnProductView = createEvent(this, "vviinnProductView", 7);
@@ -36,20 +37,6 @@ let VviinnVpsWidget = class {
     this.vviinnSelectObject = createEvent(this, "vviinnSelectObject", 7);
     this.vviinnSelectFilter = createEvent(this, "vviinnSelectFilter", 7);
     this.vviinnNoResult = createEvent(this, "vviinnNoResult", 7);
-    /** @internal */
-    this.apiPath = "https://api.vviinn.com";
-    /** When true modal window with widget will be shown */
-    this.active = false;
-    /** Currency sign will shown after price */
-    this.currencySign = "€";
-    /** Locale for currency formatting */
-    this.locale = "de-DE";
-    /** Set true when showing the widget in button */
-    this.showingInButton = false;
-    this.slidePosition = 0;
-    this.width = 0;
-    this.wrongImageFormat = false;
-    this.trackingDeactivated = false;
     this.imageSource = null;
     this.setTrackingDeactivated = (result) => {
       if (result.status === "rejected") {
@@ -65,6 +52,21 @@ let VviinnVpsWidget = class {
         widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
       };
     };
+    this.token = undefined;
+    this.apiPath = "https://api.vviinn.com";
+    this.active = false;
+    this.currencySign = "€";
+    this.locale = "de-DE";
+    this.campaignId = undefined;
+    this.showingInButton = false;
+    this.buttonElementId = undefined;
+    this.buttonPressed = undefined;
+    this.mode = "modal";
+    this.resetVpsButton = undefined;
+    this.slidePosition = 0;
+    this.width = 0;
+    this.wrongImageFormat = false;
+    this.trackingDeactivated = false;
   }
   componentDidLoad() {
     const slots = this.el.querySelectorAll("[slot]");
@@ -80,6 +82,14 @@ let VviinnVpsWidget = class {
       document.body.style.overflow = this.overflow;
     }
   }
+  buttonPressedWatcher(pressed) {
+    if (!pressed)
+      return;
+    if (this.mode === "modal") {
+      this.active = true;
+      this.vviinnWidgetOpen.emit(this.getBasicEventData());
+    }
+  }
   trackProductView({ detail }) {
     if (this.trackingDeactivated)
       return;
@@ -144,14 +154,8 @@ let VviinnVpsWidget = class {
     this.id = this.el.id;
   }
   componentWillLoad() {
-    var _a;
     slotChangeListener(this, this.el);
-    this.vviinnWidgetLoad.emit({
-      widgetType: "VPS",
-      campaignTypeId: "VPS",
-      campaignTypeName: campaignTypeNames["VPS"],
-      widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
-    });
+    this.vviinnWidgetLoad.emit(this.getBasicEventData());
   }
   trackOpenEvent() {
     if (this.trackingDeactivated)
@@ -223,10 +227,18 @@ let VviinnVpsWidget = class {
   }
   render() {
     var _a;
-    return (h(Host, null, !this.showingInButton && h(SlotSkeleton, null), h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, exportparts: "secondary-action, title, close-button, example-images" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
+    return (h(Host, null, !this.showingInButton && h(SlotSkeleton, null), h("vviinn-overlayed-modal", { class: { "first-screen": this.slidePosition === 0 }, active: this.active, resetState: this.resetState.bind(this), onVviinnWidgetClose: () => this.handleModalClose(), buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id, hideBackButton: this.mode === "upload", exportparts: "secondary-action, title, close-button, example-images" }, h("vviinn-slider", { showBullets: false, position: this.slidePosition }, h("vviinn-slide", { class: { "start-page": true } }, h("div", { class: {
         error: this.haveErrors(),
         "start-page_block": true,
-      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, handler: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => this.handleImageSelection("upload"), onVviinnNoResult: () => (this.wrongImageFormat = true), basicEventData: this.getBasicEventData(), part: "select-image_button" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.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.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.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: "#fff", "fill-rule": "evenodd", d: "M14.5 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" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
+      } }, h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), h("vviinn-server-error", { class: { hidden: !imageSearchState.serverError }, handler: () => (imageSearchState.serverError = false) }), h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => {
+        this.active = true;
+        this.handleImageSelection("upload");
+        if (this.mode === "upload") {
+          this.vviinnWidgetOpen.emit(this.getBasicEventData());
+        }
+      }, onVviinnNoResult: () => (this.wrongImageFormat = true), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "select-image_button", startUpload: this.buttonPressed &&
+        this.showingInButton &&
+        this.mode === "upload" }, h("span", { slot: "upload-button-text", class: "upload-button-content" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, h("defs", null), h("path", { fill: "#fff", "fill-rule": "evenodd", d: "M10.271 3.89A.875.875 0 0111 3.5h7c.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.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.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: "#fff", "fill-rule": "evenodd", d: "M14.5 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" })), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), h("div", { id: "onboarding-block", class: "start-page_block" }, h("div", { class: "onboarding-wrapper" }, h("vviinn-onboarding", null), h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, h("div", { class: "image-wrapper" }, h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), h("div", { class: "filters-wrapper" }, h("div", { class: "filters" }, imageSearchState.filters.map((filter) => (h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), h("div", { id: "results-block", class: "products-wrapper" }, h("div", { class: {
         "nothing-found": true,
         hidden: imageSearchState.results.length > 0,
       } }, h("vviinn-empty-results", null), h("vviinn-onboarding", null)), h("div", { class: {
@@ -239,9 +251,12 @@ let VviinnVpsWidget = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "active": ["activeWatcher"]
+    "active": ["activeWatcher"],
+    "buttonPressed": ["buttonPressedWatcher"]
   }; }
 };
 VviinnVpsWidget.style = vviinnVpsWidgetCss;
 
 export { VviinnVpsWidget as vviinn_vps_widget };
+
+//# sourceMappingURL=vviinn-vps-widget.entry.js.map

package/dist/esm/vviinn-vps-widget.entry.js.map

@@ -0,0 +1 @@
+{"file":"vviinn-vps-widget.entry.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,+rJAA+rJ;;;;;;;;;;;;;;AC2C1tJ,MAAM,SAAS,GAAG,CAAC,KAAa,KAC9B,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AAE5D,MAAM,cAAc,GAAG,CAAC,CAAS,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClD,MAAM,MAAM,GAAG,CAAC,CAAS,KAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;MAmDpC,eAAe;;;;;;;;;;;;;;;IAuDlB,gBAAW,GAA6B,IAAI,CAAC;IAQrD,2BAAsB,GAAG,CAAC,MAAyB;MACjD,IAAI,MAAM,CAAC,MAAM,KAAK,UAAU,EAAE;QAChC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;OACjC;KACF,CAAC;IAEF,sBAAiB,GAAG;;MAClB,OAAO;QACL,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAAC;QAC1C,QAAQ,EAAE,MAAA,IAAI,CAAC,eAAe,mCAAI,IAAI,CAAC,EAAE;OAC1C,CAAC;KACH,CAAC;;mBAtEwB,wBAAwB;kBAEP,KAAK;wBAEjB,GAAG;kBAET,OAAO;;2BAII,KAAK;;;gBAON,OAAO;;yBAIT,CAAC;iBACT,CAAC;4BACW,KAAK;+BACF,KAAK;;EA4B7C,gBAAgB;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjD;EAkBD,aAAa,CAAC,KAAc;IAC1B,IAAI,KAAK,EAAE;MACT,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;MAC7C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;MACxC,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;SAAM;MACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;KAC9C;GACF;EAGD,oBAAoB,CAAC,OAAgB;IACnC,IAAI,CAAC,OAAO;MAAE,OAAO;IACrB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;KACtD;GACF;EAGD,gBAAgB,CAAC,EAAE,MAAM,EAAoB;IAC3C,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,EACJ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,EACR,cAAc,EACd,gBAAgB,KAEd,MAAM,EADL,IAAI,UACL,MAAM,EATJ,2GASL,CAAS,CAAC;IAEX,MAAM,gBAAgB,GAAqB,yBAAyB,iBAClE,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,SAAS,IACf,IAAI,EACP,CAAC;IAEH,IAAI,CAAC,WAAW;OACb,UAAU,CAAC,gBAAgB,CAAC;OAC5B,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACtC;EAGD,MAAM,iBAAiB,CAAC,EAAE,MAAM,EAAoB;IAClD,MAAM,EACJ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,EACR,cAAc,EACd,gBAAgB,KAEd,MAAM,EADL,IAAI,UACL,MAAM,EATJ,2GASL,CAAS,CAAC;IAEX,MAAM,iBAAiB,GAAsB,0BAA0B,iBACrE,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,SAAS,IACf,IAAI,EACP,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;MAC7B,MAAM,IAAI,CAAC,WAAW;SACnB,UAAU,CAAC,IAAI,CAAC,mBAAmB,GAAG,IAAI,GAAG,iBAAiB,CAAC;SAC/D,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;KACtC;IAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAC3C,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,SAAS,CACxC,CAAC;IACF,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ;MAAE,OAAO;IAC1C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC;GACzC;EAGD,sBAAsB;IACpB,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,WAAW,GAAgB,iBAAiB,CAAC;MACjD,UAAU,EAAE,IAAI,CAAC,WAAW;MAC5B,MAAM,EAAE,IAAI,CAAC,WAAW;MACxB,WAAW,EAAE,kBAAkB;KAChC,CAAC,CAAC;IACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GAC5E;EAGD,mBAAmB;IACjB,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,WAAW,GAAgB,iBAAiB,CAAC;MACjD,UAAU,EAAE,IAAI,CAAC,WAAW;MAC5B,MAAM,EAAE,IAAI,CAAC,WAAW;MACxB,WAAW,EAAE,iBAAiB;KAC/B,CAAC,CAAC;IACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GAC5E;EAGD,WAAW,CAAC,EAAE,MAAM,EAAsC;IACxD,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,WAAW,GAAgB,iBAAiB,CAAC;MACjD,UAAU,EAAE,IAAI,CAAC,WAAW;MAC5B,MAAM,EAAE,IAAI,CAAC,WAAW;MACxB,IAAI,EAAE,UAAU;MAChB,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB,CAAC,CAAC;IACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GAC5E;EAED,iBAAiB;IACf,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;IACvC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IAC3B,gBAAgB,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACpC,gBAAgB,CAAC,UAAU,GAAGA,cAAI,CAChC,IAAI,CAAC,UAAU,EACfC,mBAAc,EACdC,YAAO,CAACC,oBAAe,CAAC,cAAc,CAAC,CAAC,EACxCC,UAAK,CAAC,SAAS,CAAC,EAChBF,YAAO,CAACC,oBAAe,CAAC,MAAM,CAAC,CAAC,EAChCC,UAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CACrB,CAAC;IAEF,IAAI,CAAC,WAAW,GAAGC,EAAM,EAAE,CAAC;IAC5B,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;GACtB;EAED,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;GACtD;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,eAAe,GAAgB,oBAAoB,CAAC;MACxD,MAAM,EAAE,MAAM;MACd,UAAU,EAAE,IAAI,CAAC,WAAW;KAC7B,CAAC,CAAC;IACH,IAAI,CAAC,WAAW;OACb,UAAU,CAAC,eAAe,CAAC;OAC3B,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACtC;EAEO,oBAAoB,CAAC,MAAyB;IACpD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACvB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1D,SAAS,CAAC,SAAS,GAAG,CAAC,CAAC;IAExB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAEO,kBAAkB;IACxB,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,WAAW,GAAgB,iBAAiB,CAAC;MACjD,UAAU,EAAE,IAAI,CAAC,WAAW;MAC5B,MAAM,EAAE,IAAI,CAAC,WAAW;MACxB,WAAW,EAAE,MAAM;KACpB,CAAC,CAAC;IACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GAC5E;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAErC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACvB,gBAAgB,CAAC,KAAK,GAAGC,WAAM,CAAC;IAChC,gBAAgB,CAAC,QAAQ,GAAGA,WAAM,CAAC;IACnC,gBAAgB,CAAC,WAAW,GAAGA,WAAM,CAAC;IACtC,gBAAgB,CAAC,UAAU,GAAGA,WAAM,CAAC;IACrC,gBAAgB,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9B,gBAAgB,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9B,gBAAgB,CAAC,eAAe,GAAG,EAAE,CAAC;IACtC,gBAAgB,CAAC,aAAa,GAAG,SAAS,CAAC;IAC3C,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACjD,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;GACnC;EAEO,UAAU;IAChB,OAAO,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,WAAW,CAAC;GAC9D;EAEO,WAAW,CAAC,SAAiB,EAAE,WAA2B,MAAM;IACtE,MAAM,OAAO,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;GAC/C;EAEO,gBAAgB;IACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,MAAM,eAAe,GAAG,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;IAC9D,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,IAAI,IAAI,CAAC,mBAAmB;MAAE,OAAO;IAErC,MAAM,gBAAgB,GAAgB,oBAAoB,CAAC;MACzD,MAAM,EAAE,OAAO;MACf,UAAU,EAAE,IAAI,CAAC,WAAW;KAC7B,CAAC,CAAC;IACH,IAAI,CAAC,WAAW;OACb,UAAU,CAAC,gBAAgB,CAAC;OAC5B,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACtC;EAED,MAAM;;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,eAAe,IAAI,EAAC,YAAY,OAAG,EAE1C,8BACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,aAAa,KAAK,CAAC,EAAE,EACnD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,mBAAmB,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAClD,eAAe,EAAE,MAAA,IAAI,CAAC,eAAe,mCAAI,IAAI,CAAC,EAAE,EAChD,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EACtC,WAAW,EAAC,uDAAuD,IAEnE,qBAAe,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,IAC7D,oBAAc,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IACzC,WACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QACxB,kBAAkB,EAAE,IAAI;OACzB,IAED,2BACE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACzC,OAAO,EAAE,OAAO,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,GAC9C,EACF,2BACE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,EAChD,OAAO,EAAE,OAAO,gBAAgB,CAAC,WAAW,GAAG,KAAK,CAAC,GACrD,EACF,qBAAe,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,GAAI,EACvD,6BACE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EACpC,mBAAmB,EAAE;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;UAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;SACtD;OACF,EACD,gBAAgB,EAAE,OAAO,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EACtD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,EACxC,IAAI,EAAC,qBAAqB,EAC1B,WAAW,EACT,IAAI,CAAC,aAAa;QAClB,IAAI,CAAC,eAAe;QACpB,IAAI,CAAC,IAAI,KAAK,QAAQ,IAGxB,YAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,uBAAuB,IAC3D,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,IAEX,eAAQ,EACR,YACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,maAAma,eAC3Z,SAAS,GACnB,EACF,YACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,8HAA8H,eACtH,SAAS,GACnB,CACE,EACN,YAAM,IAAI,EAAC,iCAAiC,IAC1C,kDAAuC,CAClC,CACF,CACe,EACxB,4BAAsB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,GAAI,CAC1D,EACN,WAAK,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,kBAAkB,IACjD,WAAK,KAAK,EAAC,oBAAoB,IAC7B,4BAAqB,EACrB,6BACE,IAAI,EAAC,gBAAgB,EACrB,mBAAmB,EAAE,MACnB,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAEtC,gBAAgB,EAAE,MAChB,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,QAAQ,CAAC,EAEhD,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,GACxC,CACE,CACF,CACO,EACf,oBACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,CAAC,EAAE,IAEhE,WAAK,KAAK,EAAC,eAAe,IACxB,yBAAmB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAI,EAC/D,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,SAAS,IACjB,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACnC,sBACE,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,GACxC,CACH,CAAC,CACE,CACF,CACF,EACN,WAAK,EAAE,EAAC,eAAe,EAAC,KAAK,EAAC,kBAAkB,IAC9C,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;OAC5C,IAED,+BAAwB,EACxB,4BAAqB,CACjB,EACN,WACE,KAAK,EAAE;QACL,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC;QAC5C,QAAQ,EAAE,IAAI;OACf,IAEA,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;;MAAK,QACtC,2BACE,GAAG,EAAE,CAAC,CAAC,SAAS,EAChB,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,CAAC,CAAC,KAAK,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,EACvB,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,MAAA,CAAC,CAAC,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAC5C,IAAI,EAAC,cAAc,EACnB,cAAc,EAAC,KAAK,EACpB,KAAK,EAAE,CAAC,EACR,eAAe,EAAE,IAAI,CAAC,EAAE,EACxB,eAAe,EAAE,IAAI,CAAC,eAAe,GACrC,EACH;KAAA,CAAC,CACE,CACF,CACO,CACD,CACO,CACpB,EACP;GACH;;;;;;;;;;;","names":["pipe","O.fromNullable","O.chain","O.fromPredicate","O.map","uuidv4","O.none"],"sources":["./src/components/vviinn-vps-widget/vviinn-vps-widget.css?tag=vviinn-vps-widget&encapsulation=shadow","./src/components/vviinn-vps-widget/vviinn-vps-widget.tsx"],"sourcesContent":["@import \"../../variables.css\";\n\n:host {\n  /**\n   * @prop --color-primary: set color of search button and bullets in onboarding block\n   * @prop --color-primary-hover: set color of search button and bullets in onboarding block on mouse hover\n   * @prop --color-icons: set fill color of svg icons in onboarding block \n   */\n\n  display: block;\n}\n\n.hidden {\n  visibility: hidden;\n  height: 1px;\n}\n\nvviinn-overlayed-modal.first-screen::part(title),\nvviinn-overlayed-modal.first-screen::part(secondary-action) {\n  visibility: hidden;\n}\n\n.start-page {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  min-height: 580px;\n}\n\n.start-page_block {\n  align-content: start;\n  border-right: 1px solid #f4f4f4;\n  display: grid;\n  padding: 48px;\n}\n\n.start-page_block.error {\n  align-content: center;\n}\n\n#onboarding-block {\n  border-right: unset;\n  box-sizing: border-box;\n  grid-gap: 24px;\n  overflow-y: auto;\n  position: relative;\n  width: 100%;\n}\n\nvviinn-teaser {\n  margin-bottom: 32px;\n  margin-top: -24px;\n}\n\nvviinn-image-selector {\n  align-items: center;\n  background: var(--color-primary, var(--color-primary-system));\n  border-color: var(--color-primary, var(--color-primary-system));\n  border-radius: 2px;\n  color: white;\n  display: grid;\n  font-size: 16px;\n  font-weight: 600;\n  height: 56px;\n  justify-items: center;\n  margin-bottom: 16px;\n  transition: background 0.1s ease-in-out;\n}\n\nvviinn-image-selector:hover {\n  background: var(--color-primary-hover, var(--color-primary-hover-system));\n  border-color: var(--color-primary-hover, var(--color-primary-hover-system));\n}\n\nvviinn-image-selector:active {\n  border-color: black;\n}\n\n.upload-button-content {\n  display: grid;\n  align-items: center;\n  justify-items: start;\n  justify-content: center;\n  grid-template-columns: max-content auto;\n  grid-gap: 16px;\n}\n\n.results-page {\n  display: grid;\n  grid-template-columns: 336px auto;\n  box-sizing: border-box;\n}\n\n.results-page > * {\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n.products {\n  align-content: center;\n  align-items: start;\n  box-sizing: border-box;\n  display: grid;\n  grid-gap: 32px 16px;\n  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));\n  justify-items: center;\n  padding: 24px;\n  padding-right: 0;\n  position: absolute;\n  width: calc(100% - 16px);\n}\n\n.products.hidden {\n  display: none;\n}\n\nvviinn-empty-results {\n  width: 280px;\n  align-self: center;\n  justify-self: center;\n}\n\n.products-wrapper {\n  display: grid;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: unset;\n  position: relative;\n  width: 100%;\n}\n\n.image-wrapper {\n  border-right: 1px solid #f4f4f4;\n  display: grid;\n  grid-template-rows: min-content 170px;\n  grid-gap: 24px;\n  min-width: 100%;\n}\n\n.onboarding-wrapper {\n  position: absolute;\n  width: 100%;\n  padding: 48px;\n  box-sizing: border-box;\n  display: grid;\n  grid-gap: 64px;\n  padding-bottom: 24px;\n}\n\nvviinn-product-card {\n  gap: 0;\n  width: 100%;\n}\n\nvviinn-product-card::part(image) {\n  border: 1px solid #eaeaea;\n  margin-bottom: 8px;\n}\n\nvviinn-product-card::part(price-container),\nvviinn-product-card::part(deeplink),\nvviinn-product-card::part(title) {\n  align-self: start;\n}\n\nsearch-filters span {\n  display: none;\n}\n\nsearch-filters::part(filter) {\n  background: #f4f4f4;\n  border-radius: 4px;\n  border: 1px solid #f4f4f4;\n  box-sizing: border-box;\n  color: #161616;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\nsearch-filters::part(show-more-filters) {\n  border: 1px solid #f4f4f4;\n  border-radius: 4px;\n  box-sizing: border-box;\n  color: #161616;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  padding: 6px 16px;\n}\n\nsearch-filters::part(show-more-filters):hover {\n  background: #eaeaea;\n}\n\nsearch-filters::part(filter):hover {\n  background: #eaeaea;\n}\n\nsearch-filters::part(filter):focus {\n  outline: none;\n  border: 1px solid var(--color-primary, var(--color-primary-system));\n}\n\nsearch-filters::part(filter active) {\n  background: rgba(15, 98, 254, 0.15);\n  color: var(--color-primary, var(--color-primary-system));\n}\n\n.filters-wrapper {\n  overflow: auto;\n}\n\n.results-page:not(.active) {\n  display: none;\n}\n\n.nothing-found {\n  display: grid;\n  grid-gap: 64px;\n  justify-self: center;\n  padding-top: 64px;\n  padding-bottom: 16px;\n  position: absolute;\n  width: 60%;\n}\n\n@media (max-width: 768px) {\n  .start-page_block {\n    padding: 24px;\n  }\n\n  .onboarding-wrapper {\n    padding: 24px;\n  }\n}\n\n@media (max-width: 640px) {\n  .start-page {\n    grid-template-rows: min-content;\n    grid-template-columns: unset;\n    grid-gap: 48px;\n    padding: 24px 0 48px 0;\n  }\n}\n\n@media (max-width: 640px) and (min-width: 415px) {\n  .onboarding-wrapper {\n    position: unset;\n  }\n\n  #onboarding-block {\n    overflow: unset;\n  }\n\n  .start-page.active {\n    height: 1px;\n    overflow: auto;\n  }\n}\n\n@media (max-width: 415px) {\n  .results-page > * {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  vviinn-slide {\n    padding-bottom: 48px;\n  }\n\n  .start-page_block:last-of-type {\n    border-right: unset;\n    overflow-y: unset;\n    position: static;\n    box-sizing: border-box;\n    width: unset;\n  }\n\n  .start-page_block {\n    padding: 0 24px;\n  }\n\n  vviinn-teaser {\n    margin-top: 24px;\n  }\n\n  .onboarding-wrapper {\n    position: static;\n    width: unset;\n    padding: unset;\n    box-sizing: border-box;\n  }\n\n  .results-page {\n    grid-template-columns: unset;\n    grid-template-rows: min-content auto;\n  }\n\n  .image {\n    margin-bottom: 8px;\n  }\n\n  .image-wrapper {\n    grid-template-rows: min-content auto;\n    width: 100%;\n  }\n\n  .products-wrapper {\n    align-content: start;\n    position: static;\n    overflow-y: unset;\n    width: 100%;\n    padding-top: 0;\n  }\n\n  .products {\n    position: static;\n    padding: 0;\n    width: unset;\n    grid-gap: 32px 16px;\n    justify-content: center;\n  }\n\n  .nothing-found {\n    position: static;\n    grid-gap: 64px;\n    padding: unset;\n    align-content: start;\n    width: unset;\n  }\n}\n\n@media (max-width: 320px) {\n  .products {\n    grid-template-columns: unset;\n  }\n}\n\nvviinn-wrong-format,\nvviinn-server-error {\n  width: 280px;\n  align-self: center;\n  justify-self: center;\n}\n","import {\n  Component,\n  Host,\n  h,\n  State,\n  Prop,\n  Element,\n  Watch,\n  Listen,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { state } from \"../../store/store\";\nimport { imageSearchState } from \"../../store/imageSearch.store\";\nimport * as O from \"fp-ts/lib/Option\";\nimport { isEmpty } from \"fp-ts/string\";\nimport { slotChangeListener } from \"../customized-slots\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { createTrackingApi } from \"../../openApi\";\nimport {\n  DefaultApi,\n  EventConfirmation,\n  ProductClickEvent,\n  ProductViewEvent,\n  SearchImageSource,\n  WidgetEvent,\n} from \"vviinn-tracking-client-ts\";\nimport {\n  createFilterEvent,\n  createProductClickVpsEvent,\n  createProductViewVpsEvent,\n  createSearchEvent,\n  createWidgetVpsEvent,\n} from \"../../tracking\";\nimport {\n  ProductCardEvent,\n  BasicEventData,\n  SelectFilterEventData,\n} from \"../../recommendation/events\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport { SlotSkeleton } from \"../customized-slots\";\nimport { campaignTypeNames } from \"../../campaign/Campaign\";\n\nconst filterInt = (value: string) =>\n  /^[-+]?(\\d+|Infinity)$/.test(value) ? Number(value) : NaN;\n\nconst notEmptyString = (s: string) => !isEmpty(s);\nconst notNan = (n: number): boolean => !isNaN(n);\n\n/**\n * @prop --color-primary: color used for action button, slider bullets and selected detected object;\n *\n * @part close-button - close button on modal header.\n * @part secondary-action - back button on modal header.\n * @part title - modal window title.\n *\n * @part select-image_button\n *\n * @part product-card - product card.\n * @part brand - product card brand.\n * @part currency - currency sign. Renders after price-amount inside product card.\n * @part deeplink - anchor element for title. Rendered only if \"deeplink\" property filled.\n * @part image - product image inside product card.\n * @part image-link - anchor element for image. Rendered only if \"deeplink\" property filled.\n * @part price-amount-sale - numeric part of price inside product card.\n * @part price-amount-outdated - numeric part of price inside product card.\n * @part price-amount-regular - numeric part of price inside product card.\n * @part price-container - block contains all prices inside product card.\n * @part price-outdated - renders inside price-container when \"sale-price\" property filled. Contains regular price.\n * @part price-regular - renders inside price-container when \"sale-price\" property is empty.\n * @part price-sale - renders inside price-container when \"sale-price\" property filled. Contains sale price.\n * @part price-prefix - renders before price-amount. Can be set with \"price-prefix\" property or inherited from parent component.\n * @part title - product title\n * @part example-images - example images block\n\n * @slot vviinn-onboarding-title - Title of onboarding section\n * @slot onboarding-card-1-icon - Icon (or other graphics) on first onboarding slide\n * @slot onboarding-card-1-text - Text content of first onboarding slide\n * @slot onboarding-card-2-icon - Icon (or other graphics) on second onboarding slide\n * @slot onboarding-card-2-text - Text content of second onboarding slide\n * @slot onboarding-card-3-icon - Icon (or other graphics) on third onboarding slide\n * @slot onboarding-card-3-text - Text content of third onboarding slide\n * @slot vviinn-example-images-title - Header of example images block\n * @slot vviinn-example-images-1 - First image in example images block\n * @slot vviinn-example-images-2 - Second image in example images block\n * @slot vviinn-example-images-3 - Third image in example images block\n * @slot vviinn-example-images-4 - Fourth image in example images block\n * @slot vviinn-teaser-text - Text on widget's main screen\n * @slot vviinn-image-upload-button-text - Title of upload button\n * @slot vviinn-privacy-badge-text - Text content of privacy notification block\n * @slot vviinn-image-search-modal-title - Image search title\n *\n */\n@Component({\n  tag: \"vviinn-vps-widget\",\n  styleUrl: \"vviinn-vps-widget.css\",\n  shadow: true,\n})\nexport class VviinnVpsWidget {\n  @Element() el: HTMLElement;\n\n  /** vviinn customer token */\n  @Prop() token: string | undefined;\n  /** @internal */\n  @Prop() apiPath: string = \"https://api.vviinn.com\";\n  /** When true modal window with widget will be shown */\n  @Prop({ mutable: true }) active: boolean = false;\n  /** Currency sign will shown after price */\n  @Prop() currencySign: string = \"€\";\n  /** Locale for currency formatting */\n  @Prop() locale: string = \"de-DE\";\n  /** Campaign using for visual search */\n  @Prop() campaignId?: string;\n  /** Set true when showing the widget in button */\n  @Prop() showingInButton?: boolean = false;\n  /** Element Id, passed from vps-button */\n  /** @internal */\n  @Prop() buttonElementId?: string;\n  /** @internal */\n  @Prop() buttonPressed?: boolean;\n  /** @internal */\n  @Prop() mode: \"modal\" | \"upload\" = \"modal\";\n  /** @internal */\n  @Prop() resetVpsButton: () => void;\n\n  @State() slidePosition: number = 0;\n  @State() width: number = 0;\n  @State() wrongImageFormat: boolean = false;\n  @State() trackingDeactivated: boolean = false;\n\n  /** @internal */\n  @Event({ bubbles: true, composed: true })\n  globalSlotsChanged: EventEmitter<any>;\n\n  @Event({ bubbles: true })\n  vviinnWidgetLoad: EventEmitter<BasicEventData>;\n  @Event({ bubbles: true })\n  vviinnWidgetOpen: EventEmitter<BasicEventData>;\n\n  // List to show in the Storybook:\n  @Event() vviinnWidgetClose: EventEmitter;\n  @Event() vviinnProductClick: EventEmitter;\n  @Event() vviinnProductView: EventEmitter;\n  @Event() vviinnProductLoad: EventEmitter;\n  @Event() vviinnImageUpload: EventEmitter;\n  @Event() vviinnImageCrop: EventEmitter;\n  @Event() vviinnSelectObject: EventEmitter;\n  @Event() vviinnSelectFilter: EventEmitter;\n  @Event() vviinnNoResult: EventEmitter;\n\n  private overflow: string;\n  private uiSessionId: string;\n  private trackingApi: DefaultApi;\n  private imageSource: SearchImageSource | null = null;\n  private id?: string;\n\n  componentDidLoad() {\n    const slots = this.el.querySelectorAll(\"[slot]\");\n    this.globalSlotsChanged.emit(Array.from(slots));\n  }\n\n  setTrackingDeactivated = (result: EventConfirmation) => {\n    if (result.status === \"rejected\") {\n      this.trackingDeactivated = true;\n    }\n  };\n\n  getBasicEventData = (): BasicEventData => {\n    return {\n      widgetType: \"VPS\",\n      campaignTypeId: \"VPS\",\n      campaignTypeName: campaignTypeNames[\"VPS\"],\n      widgetId: this.buttonElementId ?? this.id,\n    };\n  };\n\n  @Watch(\"active\")\n  activeWatcher(value: boolean) {\n    if (value) {\n      this.overflow = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      this.trackOpenEvent();\n    } else {\n      document.body.style.overflow = this.overflow;\n    }\n  }\n\n  @Watch(\"buttonPressed\")\n  buttonPressedWatcher(pressed: boolean) {\n    if (!pressed) return;\n    if (this.mode === \"modal\") {\n      this.active = true;\n      this.vviinnWidgetOpen.emit(this.getBasicEventData());\n    }\n  }\n\n  @Listen(\"vviinnProductView\")\n  trackProductView({ detail }: ProductCardEvent) {\n    if (this.trackingDeactivated) return;\n\n    const {\n      productRank,\n      productId,\n      productName,\n      widgetType,\n      widgetId,\n      campaignTypeId,\n      campaignTypeName,\n      ...rest\n    } = detail;\n\n    const productViewEvent: ProductViewEvent = createProductViewVpsEvent({\n      session_id: this.uiSessionId,\n      rank: productRank,\n      product: productId,\n      ...rest,\n    });\n\n    this.trackingApi\n      .trackEvent(productViewEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  @Listen(\"vviinnProductClick\")\n  async trackProductClick({ detail }: ProductCardEvent) {\n    const {\n      productRank,\n      productId,\n      productName,\n      widgetType,\n      widgetId,\n      campaignTypeId,\n      campaignTypeName,\n      ...rest\n    } = detail;\n\n    const productClickEvent: ProductClickEvent = createProductClickVpsEvent({\n      session_id: this.uiSessionId,\n      rank: productRank,\n      product: productId,\n      ...rest,\n    });\n\n    if (!this.trackingDeactivated) {\n      await this.trackingApi\n        .trackEvent(this.trackingDeactivated ? null : productClickEvent)\n        .then(this.setTrackingDeactivated);\n    }\n\n    const product = imageSearchState.results.find(\n      (r) => r.productId === detail.productId\n    );\n    if (!product || !product.deeplink) return;\n    window.location.href = product.deeplink;\n  }\n\n  @Listen(\"vviinnImageCrop\")\n  trachSearchAreaChanges() {\n    if (this.trackingDeactivated) return;\n\n    const searchEvent: WidgetEvent = createSearchEvent({\n      session_id: this.uiSessionId,\n      source: this.imageSource,\n      search_area: \"manual-selection\",\n    });\n    this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);\n  }\n\n  @Listen(\"vviinnSelectObject\")\n  trackDetectedObject() {\n    if (this.trackingDeactivated) return;\n\n    const searchEvent: WidgetEvent = createSearchEvent({\n      session_id: this.uiSessionId,\n      source: this.imageSource,\n      search_area: \"attention-point\",\n    });\n    this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);\n  }\n\n  @Listen(\"vviinnSelectFilter\")\n  trackFilter({ detail }: CustomEvent<SelectFilterEventData>) {\n    if (this.trackingDeactivated) return;\n\n    const searchEvent: WidgetEvent = createFilterEvent({\n      session_id: this.uiSessionId,\n      source: this.imageSource,\n      kind: \"category\",\n      action: detail.action,\n    });\n    this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);\n  }\n\n  connectedCallback() {\n    state.apiPath = this.apiPath;\n    state.currencySign = this.currencySign;\n    state.locale = this.locale;\n    imageSearchState.token = this.token;\n    imageSearchState.campaignId = pipe(\n      this.campaignId,\n      O.fromNullable,\n      O.chain(O.fromPredicate(notEmptyString)),\n      O.map(filterInt),\n      O.chain(O.fromPredicate(notNan)),\n      O.map((s) => `${s}`)\n    );\n\n    this.uiSessionId = uuidv4();\n    this.trackingApi = createTrackingApi(this.apiPath, this.token);\n    this.id = this.el.id;\n  }\n\n  componentWillLoad() {\n    slotChangeListener(this, this.el);\n    this.vviinnWidgetLoad.emit(this.getBasicEventData());\n  }\n\n  private trackOpenEvent() {\n    if (this.trackingDeactivated) return;\n\n    const widgetOpenEvent: WidgetEvent = createWidgetVpsEvent({\n      action: \"open\",\n      session_id: this.uiSessionId,\n    });\n    this.trackingApi\n      .trackEvent(widgetOpenEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  private handleImageSelection(source: SearchImageSource) {\n    this.imageSource = source;\n    this.slidePosition = 1;\n    const root = this.el.shadowRoot.querySelector(\"vviinn-overlayed-modal\");\n    const overlay = root.shadowRoot.querySelector(\"vviinn-overlay\");\n    const modal = overlay.querySelector(\"vviinn-modal\");\n    const modalBody = modal.shadowRoot.querySelector(\".body\");\n    modalBody.scrollTop = 0;\n\n    this.trackInitialSearch();\n  }\n\n  private trackInitialSearch() {\n    if (this.trackingDeactivated) return;\n\n    const searchEvent: WidgetEvent = createSearchEvent({\n      session_id: this.uiSessionId,\n      source: this.imageSource,\n      search_area: \"full\",\n    });\n    this.trackingApi.trackEvent(searchEvent).then(this.setTrackingDeactivated);\n  }\n\n  private resetState() {\n    this.resetScroll(\"onboarding-block\");\n\n    this.slidePosition = 0;\n    imageSearchState.image = O.none;\n    imageSearchState.imageUrl = O.none;\n    imageSearchState.imageBounds = O.none;\n    imageSearchState.searchArea = O.none;\n    imageSearchState.results = [];\n    imageSearchState.filters = [];\n    imageSearchState.detectedObjects = [];\n    imageSearchState.activeIonLink = undefined;\n    imageSearchState.rectangleSearchForm = undefined;\n    imageSearchState.loading = false;\n    this.resetScroll(\"results-block\");\n  }\n\n  private haveErrors(): boolean {\n    return this.wrongImageFormat || imageSearchState.serverError;\n  }\n\n  private resetScroll(elementId: string, behavior: ScrollBehavior = \"auto\") {\n    const element: HTMLElement = this.el.shadowRoot.getElementById(elementId);\n    element.scroll({ top: 0, left: 0, behavior });\n  }\n\n  private handleModalClose() {\n    this.active = false;\n    this.resetState();\n\n    const elementsToReset = [\"onboarding-block\", \"results-block\"];\n    elementsToReset.forEach((name) => this.resetScroll(name));\n\n    if (this.trackingDeactivated) return;\n\n    const widgetCloseEvent: WidgetEvent = createWidgetVpsEvent({\n      action: \"close\",\n      session_id: this.uiSessionId,\n    });\n    this.trackingApi\n      .trackEvent(widgetCloseEvent)\n      .then(this.setTrackingDeactivated);\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.showingInButton && <SlotSkeleton />}\n\n        <vviinn-overlayed-modal\n          class={{ \"first-screen\": this.slidePosition === 0 }}\n          active={this.active}\n          resetState={this.resetState.bind(this)}\n          onVviinnWidgetClose={() => this.handleModalClose()}\n          buttonElementId={this.buttonElementId ?? this.id}\n          hideBackButton={this.mode === \"upload\"}\n          exportparts=\"secondary-action, title, close-button, example-images\"\n        >\n          <vviinn-slider showBullets={false} position={this.slidePosition}>\n            <vviinn-slide class={{ \"start-page\": true }}>\n              <div\n                class={{\n                  error: this.haveErrors(),\n                  \"start-page_block\": true,\n                }}\n              >\n                <vviinn-wrong-format\n                  class={{ hidden: !this.wrongImageFormat }}\n                  handler={() => (this.wrongImageFormat = false)}\n                />\n                <vviinn-server-error\n                  class={{ hidden: !imageSearchState.serverError }}\n                  handler={() => (imageSearchState.serverError = false)}\n                />\n                <vviinn-teaser class={{ hidden: this.haveErrors() }} />\n                <vviinn-image-selector\n                  class={{ hidden: this.haveErrors() }}\n                  onVviinnImageUpload={() => {\n                    this.active = true;\n                    this.handleImageSelection(\"upload\");\n                    if (this.mode === \"upload\") {\n                      this.vviinnWidgetOpen.emit(this.getBasicEventData());\n                    }\n                  }}\n                  onVviinnNoResult={() => (this.wrongImageFormat = true)}\n                  resetVpsButton={this.resetVpsButton}\n                  basicEventData={this.getBasicEventData()}\n                  part=\"select-image_button\"\n                  startUpload={\n                    this.buttonPressed &&\n                    this.showingInButton &&\n                    this.mode === \"upload\"\n                  }\n                >\n                  <span slot=\"upload-button-text\" class=\"upload-button-content\">\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"29\"\n                      height=\"28\"\n                      fill=\"none\"\n                    >\n                      <defs />\n                      <path\n                        fill=\"#fff\"\n                        fill-rule=\"evenodd\"\n                        d=\"M10.271 3.89A.875.875 0 0111 3.5h7c.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.75A2.625 2.625 0 013.125 21V8.75A2.625 2.625 0 015.75 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.75a.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\"\n                        clip-rule=\"evenodd\"\n                      />\n                      <path\n                        fill=\"#fff\"\n                        fill-rule=\"evenodd\"\n                        d=\"M14.5 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\"\n                        clip-rule=\"evenodd\"\n                      />\n                    </svg>\n                    <slot name=\"vviinn-image-upload-button-text\">\n                      <span>Kamera oder Bild auswählen</span>\n                    </slot>\n                  </span>\n                </vviinn-image-selector>\n                <vviinn-privacy-badge class={{ hidden: this.haveErrors() }} />\n              </div>\n              <div id=\"onboarding-block\" class=\"start-page_block\">\n                <div class=\"onboarding-wrapper\">\n                  <vviinn-onboarding />\n                  <vviinn-example-images\n                    part=\"example-images\"\n                    onVviinnImageUpload={() =>\n                      this.handleImageSelection(\"example\")\n                    }\n                    onVviinnNoResult={() =>\n                      this.resetScroll(\"onboarding-block\", \"smooth\")\n                    }\n                    basicEventData={this.getBasicEventData()}\n                  />\n                </div>\n              </div>\n            </vviinn-slide>\n            <vviinn-slide\n              class={{ \"results-page\": true, active: this.slidePosition == 1 }}\n            >\n              <div class=\"image-wrapper\">\n                <vviinn-image-view basicEventData={this.getBasicEventData()} />\n                <div class=\"filters-wrapper\">\n                  <div class=\"filters\">\n                    {imageSearchState.filters.map((filter) => (\n                      <search-filters\n                        filter={filter}\n                        basicEventData={this.getBasicEventData()}\n                      />\n                    ))}\n                  </div>\n                </div>\n              </div>\n              <div id=\"results-block\" class=\"products-wrapper\">\n                <div\n                  class={{\n                    \"nothing-found\": true,\n                    hidden: imageSearchState.results.length > 0,\n                  }}\n                >\n                  <vviinn-empty-results />\n                  <vviinn-onboarding />\n                </div>\n                <div\n                  class={{\n                    hidden: imageSearchState.results.length <= 0,\n                    products: true,\n                  }}\n                >\n                  {imageSearchState.results.map((p, i) => (\n                    <vviinn-product-card\n                      key={p.productId}\n                      hidden={true}\n                      productTitle={p.title}\n                      productId={p.productId}\n                      brand={p.brand}\n                      deeplink={p.deeplink}\n                      price={p.price.actual}\n                      salePrice={p.price.sale}\n                      imageWidth={160}\n                      image={p.image.thumbnail ?? p.image.original}\n                      part=\"product-card\"\n                      campaignTypeId=\"VPS\"\n                      index={i}\n                      widgetElementId={this.id}\n                      buttonElementId={this.buttonElementId}\n                    />\n                  ))}\n                </div>\n              </div>\n            </vviinn-slide>\n          </vviinn-slider>\n        </vviinn-overlayed-modal>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/vviinn-widgets.js

@@ -1,17 +1,23 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-590cb67e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-48ef9564.js';
+export { s as setNonce } from './index-48ef9564.js';
 
 /*
- Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
     const opts = {};
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
+        // TODO(STENCIL-661): Remove code related to the dynamic import shim
+        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["vviinn-button",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["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],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"buttonElementId":[1,"button-element-id"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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],"campaignTypeId":[1,"campaign-type-id"],"dimmedBackground":[4,"dimmed-background"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16]}],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"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],"isRTL":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"vviinnWidgetClose","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"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"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"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"]}]]]], options);
+  return bootstrapLazy([["vviinn-button",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["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],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"buttonElementId":[1,"button-element-id"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[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],"campaignTypeId":[1,"campaign-type-id"],"dimmedBackground":[4,"dimmed-background"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16]}],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"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],"isRTL":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","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"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"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"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"]}]]]], options);
 });
+
+//# sourceMappingURL=vviinn-widgets.js.map

package/dist/esm/vviinn-widgets.js.map

@@ -0,0 +1 @@
+{"file":"vviinn-widgets.js","mappings":";;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/dist/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vviinn-widgets-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/dist/types/Image/sizing.d.ts

@@ -1,10 +1,10 @@
-declare type ImageWidth = "width";
-declare type ImageHeight = "height";
-export declare type ImageDimension = {
+type ImageWidth = "width";
+type ImageHeight = "height";
+export type ImageDimension = {
   readonly kind: ImageWidth | ImageHeight;
   readonly size: number;
 };
-declare type ImageDimensions = ImageDimension[];
+type ImageDimensions = ImageDimension[];
 export declare const scaleByLargestSide: (toSize: number) => (dimensions: ImageDimensions) => ImageDimensions;
 export declare const dimensionsFromImage: (image: HTMLImageElement) => ImageDimensions;
 export {};

package/dist/types/campaign/Campaign.d.ts

@@ -1,7 +1,7 @@
-export declare type CampaignName = "VPR" | "VCS";
-export declare type WidgetType = "VPR" | "VPS";
-export declare type CampaignTypeId = "VPR" | "VPS" | "VCS";
-export declare type CampaignTypeTitle = "Similar Products" | "Visual Search" | "Products Cross-Selling";
+export type CampaignName = "VPR" | "VCS";
+export type WidgetType = "VPR" | "VPS";
+export type CampaignTypeId = "VPR" | "VPS" | "VCS";
+export type CampaignTypeTitle = "Similar Products" | "Visual Search" | "Products Cross-Selling";
 export declare const campaignTypeNames: Record<CampaignTypeId, CampaignTypeTitle>;
 export interface VPR {
   readonly _tag: "VPR";
@@ -11,6 +11,6 @@ export interface VCS {
 }
 export declare const isVPR: (c: Campaign) => c is VPR;
 export declare const isVCS: (c: Campaign) => c is VCS;
-export declare type Campaign = VPR | VCS;
+export type Campaign = VPR | VCS;
 export declare function fold<A, B>(onVPR: () => A, onVCS: () => B): (c: Campaign) => A | B;
 export declare function fromString(s: CampaignName): Campaign;

package/dist/types/campaign/VCSCampaignResponse.d.ts

@@ -1,2 +1,2 @@
 import { Recommendation } from "../recommendation/recommendation";
-export declare type VCSCampaignResponse = Recommendation[];
+export type VCSCampaignResponse = Recommendation[];

package/dist/types/components/vviinn-carousel/vviinn-carousel.d.ts

@@ -1,7 +1,7 @@
 import { Recommendation } from "../../recommendation/recommendation";
 import { CampaignTypeId } from "../../campaign/Campaign";
-declare type MoveDirection = "left" | "right";
-export declare type CarouselMode = "grid" | "continuity";
+type MoveDirection = "left" | "right";
+export type CarouselMode = "grid" | "continuity";
 /**
  * @part carousel-button
  **/

package/dist/types/components/vviinn-image-selector/vviinn-image-selector.d.ts

@@ -9,7 +9,11 @@ export declare class VviinnImageSelector {
   /** Event fires when user select file that no .jpg, .jpeg or png */
   vviinnNoResult: EventEmitter<BasicEventData>;
   basicEventData: BasicEventData;
+  startUpload: boolean;
+  resetVpsButton: () => void;
+  private fileInput;
   private handleInputChange;
   private isLoading;
+  startUploadWatcher(upload: boolean): void;
   render(): any;
 }

package/dist/types/components/vviinn-modal/vviinn-modal.d.ts

@@ -6,6 +6,8 @@ export declare class VviinnModal {
   resetState: () => void;
   /** @internal */
   buttonElementId?: string;
+  /** @internal */
+  hideBackButton: boolean;
   slider: boolean;
   /** Event emitted when close button clicked and close animation ends */
   vviinnWidgetClose: EventEmitter<BasicEventData>;

package/dist/types/components/vviinn-overlayed-modal/vviinn-overlayed-modal.d.ts

@@ -4,6 +4,8 @@ export declare class VviinnOverlayedModal {
   resetState: () => void;
   /** @internal */
   buttonElementId?: string;
+  /** @internal */
+  hideBackButton: boolean;
   vviinnWidgetClose: EventEmitter<void>;
   render(): any;
 }

package/dist/types/components/vviinn-product-card/render-helpers.d.ts

@@ -3,18 +3,18 @@ import { FunctionalComponent } from "../../stencil-public-runtime";
 export declare const containsFit: (url: string) => E.Either<string, string>;
 export declare const processWidth: (url: string, size: number) => string;
 export declare const Linked: (props: any, child: any) => any;
-declare type PriceElementProps = {
+type PriceElementProps = {
   readonly locale: string;
   readonly price: number;
   readonly prefix: string;
   readonly currency: string;
   readonly priceType?: "sale" | "outdated" | "regular";
 };
-declare type PriceProps = PriceElementProps & {
+type PriceProps = PriceElementProps & {
   salePrice: number;
 };
 export declare const Price: FunctionalComponent<PriceProps>;
-export declare type ImageProps = {
+export type ImageProps = {
   width: number;
   height: number;
   title: string;

package/dist/types/components/vviinn-slider/arrow.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from "../../stencil-public-runtime";
-export declare type ArrowKind = "prev" | "next";
-declare type ArrowProp = {
+export type ArrowKind = "prev" | "next";
+type ArrowProp = {
   kind: ArrowKind;
   tabindex: number;
   disabled: boolean;

package/dist/types/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from "../../../stencil-public-runtime";
 import { CarouselMode } from "../../vviinn-carousel/vviinn-carousel";
 import { BasicEventData } from "../../../recommendation/events";
 import { CampaignTypeId } from "../../../campaign/Campaign";
-declare type SidebarState = "idle" | "open" | "closed";
-declare type ClickEvent = Event & {
+type SidebarState = "idle" | "open" | "closed";
+type ClickEvent = Event & {
   clientX: number;
   clientY: number;
 };

package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts

@@ -45,26 +45,31 @@ export declare class VviinnVpsButton {
   campaignId?: string;
   /** Add style to the button */
   addStyle: boolean;
+  /** Add style to the button */
+  mode: "modal" | "upload";
   /** @internal */
   apiPath: string | undefined;
-  pressed: boolean;
+  buttonPressed: boolean;
   /** @internal */
   globalSlotsChanged: EventEmitter<any>;
   /** Event emitted when vps-button clicked */
   vviinnWidgetOpen: EventEmitter<BasicEventData>;
+  /** Event fires when user select file */
+  vviinnImageUpload: EventEmitter<BasicEventData>;
+  /** Event fires when user select file that no .jpg, .jpeg or png */
+  vviinnNoResult: EventEmitter<BasicEventData>;
   vviinnWidgetLoad: EventEmitter;
   vviinnWidgetClose: EventEmitter;
   vviinnProductClick: EventEmitter;
   vviinnProductView: EventEmitter;
   vviinnProductLoad: EventEmitter;
-  vviinnImageUpload: EventEmitter;
   vviinnImageCrop: EventEmitter;
   vviinnSelectObject: EventEmitter;
   vviinnSelectFilter: EventEmitter;
-  vviinnNoResult: EventEmitter;
+  getBasicEventData: () => BasicEventData;
   handleModalClosed(): void;
   componentDidLoad(): void;
-  private handleKeyDown;
   private handleClick;
+  private resetButton;
   render(): any;
 }

package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts

@@ -64,6 +64,12 @@ export declare class VviinnVpsWidget {
   /** Element Id, passed from vps-button */
   /** @internal */
   buttonElementId?: string;
+  /** @internal */
+  buttonPressed?: boolean;
+  /** @internal */
+  mode: "modal" | "upload";
+  /** @internal */
+  resetVpsButton: () => void;
   slidePosition: number;
   width: number;
   wrongImageFormat: boolean;
@@ -71,6 +77,7 @@ export declare class VviinnVpsWidget {
   /** @internal */
   globalSlotsChanged: EventEmitter<any>;
   vviinnWidgetLoad: EventEmitter<BasicEventData>;
+  vviinnWidgetOpen: EventEmitter<BasicEventData>;
   vviinnWidgetClose: EventEmitter;
   vviinnProductClick: EventEmitter;
   vviinnProductView: EventEmitter;
@@ -89,6 +96,7 @@ export declare class VviinnVpsWidget {
   setTrackingDeactivated: (result: EventConfirmation) => void;
   getBasicEventData: () => BasicEventData;
   activeWatcher(value: boolean): void;
+  buttonPressedWatcher(pressed: boolean): void;
   trackProductView({ detail }: ProductCardEvent): void;
   trackProductClick({ detail }: ProductCardEvent): Promise<void>;
   trachSearchAreaChanges(): void;