vviinn-widgets 2.18.21 → 2.19.0

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

@@ -2,64 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7f1325a7.js');
-const index$1 = require('./index-cb410762.js');
-const customizedSlots = require('./customized-slots-6e56c354.js');
+const index = require('./index-a4becaff.js');
+const index$1 = require('./index-610c6c1f.js');
+const customizedSlots = require('./customized-slots-aee3f39d.js');
 const Campaign = require('./Campaign-13258569.js');
 
 const vviinnVpsButtonCss = ":host{display:block}";
 
-let VviinnVpsButton = class {
+const VviinnVpsButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
     this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
+    this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
+    this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
     this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
     this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
     this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
     this.vviinnProductLoad = index.createEvent(this, "vviinnProductLoad", 7);
-    this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
     this.vviinnImageCrop = index.createEvent(this, "vviinnImageCrop", 7);
     this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
     this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
-    this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
-    /** Currency sign will shown after price */
+    this.getBasicEventData = () => {
+      return {
+        widgetType: "VPS",
+        campaignTypeId: "VPS",
+        campaignTypeName: Campaign.campaignTypeNames["VPS"],
+        widgetId: this.el.id,
+      };
+    };
+    this.token = undefined;
     this.currencySign = "€";
-    /** Locale for currency formatting */
     this.locale = "de-DE";
-    /** Add style to the button */
+    this.campaignId = undefined;
     this.addStyle = false;
-    this.pressed = false;
+    this.mode = "modal";
+    this.apiPath = undefined;
+    this.buttonPressed = false;
   }
   handleModalClosed() {
-    this.pressed = false;
+    this.buttonPressed = false;
   }
   componentDidLoad() {
     const slots = this.el.querySelectorAll("[slot]");
     this.globalSlotsChanged.emit(Array.from(slots));
   }
-  handleKeyDown(ev) {
-    if (ev.code !== "Enter" && ev.code !== "Space")
-      return;
-    this.pressed = true;
-  }
   handleClick() {
-    this.pressed = true;
+    this.buttonPressed = true;
+  }
+  resetButton() {
+    this.buttonPressed = false;
   }
   render() {
-    return (index.h(index.Host, { tabindex: "0", role: "button", pressed: this.pressed, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("vviinn-button", { onClick: () => {
+    return (index.h(index.Host, { tabindex: "0", role: "button" }, index.h("vviinn-button", { onClick: () => {
         this.handleClick();
-        this.vviinnWidgetOpen.emit({
-          widgetType: "VPS",
-          campaignTypeId: "VPS",
-          campaignTypeName: Campaign.campaignTypeNames["VPS"],
-          widgetId: this.el.id,
-        });
-      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { active: this.pressed, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonElementId: this.el.id })));
+      }, addStyle: this.addStyle, part: "vviinn-button" }, index.h("slot", null, index.h(index$1.CameraIcon, null))), index.h(customizedSlots.SlotSkeleton, null), index.h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, example-images", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id })));
   }
   get el() { return index.getElement(this); }
 };
 VviinnVpsButton.style = vviinnVpsButtonCss;
 
 exports.vviinn_vps_button = VviinnVpsButton;
+
+//# sourceMappingURL=vviinn-vps-button.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"vviinn-vps-button.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,sBAAsB;;MCsDpC,eAAe;;;;;;;;;;;;;;;IAyC1B,sBAAiB,GAAG;MAClB,OAAO;QACL,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAEA,0BAAiB,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,QACEC,QAACC,UAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,IAC9BD,2BACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,eAAe,IAEpBA,sBACEA,QAACE,kBAAU,OAAG,CACT,CACO,EAEhBF,QAACG,4BAAY,OAAG,EAChBH,+BACE,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":["campaignTypeNames","h","Host","CameraIcon","SlotSkeleton"],"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/cjs/vviinn-vps-widget.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7f1325a7.js');
-const imageSearch_store = require('./imageSearch.store-98824653.js');
-const customizedSlots = require('./customized-slots-6e56c354.js');
-const index$1 = require('./index-a99edb90.js');
+const index = require('./index-a4becaff.js');
+const imageSearch_store = require('./imageSearch.store-fbe0600a.js');
+const customizedSlots = require('./customized-slots-aee3f39d.js');
+const index$1 = require('./index-c4851793.js');
 const Campaign = require('./Campaign-13258569.js');
-require('./Handler-176539c8.js');
+require('./Handler-de64afa5.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 = {};
@@ -26,11 +26,12 @@ var __rest = (undefined && undefined.__rest) || function (s, e) {
 const filterInt = (value) => /^[-+]?(\d+|Infinity)$/.test(value) ? Number(value) : NaN;
 const notEmptyString = (s) => !imageSearch_store.isEmpty(s);
 const notNan = (n) => !isNaN(n);
-let VviinnVpsWidget = class {
+const VviinnVpsWidget = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.globalSlotsChanged = index.createEvent(this, "globalSlotsChanged", 7);
     this.vviinnWidgetLoad = index.createEvent(this, "vviinnWidgetLoad", 7);
+    this.vviinnWidgetOpen = index.createEvent(this, "vviinnWidgetOpen", 7);
     this.vviinnWidgetClose = index.createEvent(this, "vviinnWidgetClose", 7);
     this.vviinnProductClick = index.createEvent(this, "vviinnProductClick", 7);
     this.vviinnProductView = index.createEvent(this, "vviinnProductView", 7);
@@ -40,20 +41,6 @@ let VviinnVpsWidget = class {
     this.vviinnSelectObject = index.createEvent(this, "vviinnSelectObject", 7);
     this.vviinnSelectFilter = index.createEvent(this, "vviinnSelectFilter", 7);
     this.vviinnNoResult = index.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") {
@@ -69,6 +56,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]");
@@ -84,6 +86,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;
@@ -148,14 +158,8 @@ let VviinnVpsWidget = class {
     this.id = this.el.id;
   }
   componentWillLoad() {
-    var _a;
     customizedSlots.slotChangeListener(this, this.el);
-    this.vviinnWidgetLoad.emit({
-      widgetType: "VPS",
-      campaignTypeId: "VPS",
-      campaignTypeName: Campaign.campaignTypeNames["VPS"],
-      widgetId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.id,
-    });
+    this.vviinnWidgetLoad.emit(this.getBasicEventData());
   }
   trackOpenEvent() {
     if (this.trackingDeactivated)
@@ -227,10 +231,18 @@ let VviinnVpsWidget = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.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" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
+    return (index.h(index.Host, null, !this.showingInButton && index.h(customizedSlots.SlotSkeleton, null), index.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" }, index.h("vviinn-slider", { showBullets: false, position: this.slidePosition }, index.h("vviinn-slide", { class: { "start-page": true } }, index.h("div", { class: {
         error: this.haveErrors(),
         "start-page_block": true,
-      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.h("vviinn-image-selector", { class: { hidden: this.haveErrors() }, onVviinnImageUpload: () => this.handleImageSelection("upload"), onVviinnNoResult: () => (this.wrongImageFormat = true), basicEventData: this.getBasicEventData(), part: "select-image_button" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
+      } }, index.h("vviinn-wrong-format", { class: { hidden: !this.wrongImageFormat }, handler: () => (this.wrongImageFormat = false) }), index.h("vviinn-server-error", { class: { hidden: !imageSearch_store.imageSearchState.serverError }, handler: () => (imageSearch_store.imageSearchState.serverError = false) }), index.h("vviinn-teaser", { class: { hidden: this.haveErrors() } }), index.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" }, index.h("span", { slot: "upload-button-text", class: "upload-button-content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "29", height: "28", fill: "none" }, index.h("defs", null), index.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" }), index.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" })), index.h("slot", { name: "vviinn-image-upload-button-text" }, index.h("span", null, "Kamera oder Bild ausw\u00E4hlen")))), index.h("vviinn-privacy-badge", { class: { hidden: this.haveErrors() } })), index.h("div", { id: "onboarding-block", class: "start-page_block" }, index.h("div", { class: "onboarding-wrapper" }, index.h("vviinn-onboarding", null), index.h("vviinn-example-images", { part: "example-images", onVviinnImageUpload: () => this.handleImageSelection("example"), onVviinnNoResult: () => this.resetScroll("onboarding-block", "smooth"), basicEventData: this.getBasicEventData() })))), index.h("vviinn-slide", { class: { "results-page": true, active: this.slidePosition == 1 } }, index.h("div", { class: "image-wrapper" }, index.h("vviinn-image-view", { basicEventData: this.getBasicEventData() }), index.h("div", { class: "filters-wrapper" }, index.h("div", { class: "filters" }, imageSearch_store.imageSearchState.filters.map((filter) => (index.h("search-filters", { filter: filter, basicEventData: this.getBasicEventData() })))))), index.h("div", { id: "results-block", class: "products-wrapper" }, index.h("div", { class: {
         "nothing-found": true,
         hidden: imageSearch_store.imageSearchState.results.length > 0,
       } }, index.h("vviinn-empty-results", null), index.h("vviinn-onboarding", null)), index.h("div", { class: {
@@ -243,9 +255,12 @@ let VviinnVpsWidget = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "active": ["activeWatcher"]
+    "active": ["activeWatcher"],
+    "buttonPressed": ["buttonPressedWatcher"]
   }; }
 };
 VviinnVpsWidget.style = vviinnVpsWidgetCss;
 
 exports.vviinn_vps_widget = VviinnVpsWidget;
+
+//# sourceMappingURL=vviinn-vps-widget.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"vviinn-vps-widget.entry.cjs.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,CAACA,yBAAO,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,EAAEC,0BAAiB,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,GAAqBC,iCAAyB,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,GAAsBC,kCAA0B,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,GAAGC,kCAAgB,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,GAAgBC,yBAAiB,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,GAAgBA,yBAAiB,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,GAAgBC,yBAAiB,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;IACfC,uBAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7BA,uBAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;IACvCA,uBAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IAC3BH,kCAAgB,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACpCA,kCAAgB,CAAC,UAAU,GAAGI,gCAAI,CAChC,IAAI,CAAC,UAAU,EACfC,qCAAc,EACdC,8BAAO,CAACC,sCAAe,CAAC,cAAc,CAAC,CAAC,EACxCC,4BAAK,CAAC,SAAS,CAAC,EAChBF,8BAAO,CAACC,sCAAe,CAAC,MAAM,CAAC,CAAC,EAChCC,4BAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CACrB,CAAC;IAEF,IAAI,CAAC,WAAW,GAAGC,UAAM,EAAE,CAAC;IAC5B,IAAI,CAAC,WAAW,GAAGC,yBAAiB,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;IACfC,kCAAkB,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,GAAgBC,4BAAoB,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,GAAgBX,yBAAiB,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;IACvBD,kCAAgB,CAAC,KAAK,GAAGa,6BAAM,CAAC;IAChCb,kCAAgB,CAAC,QAAQ,GAAGa,6BAAM,CAAC;IACnCb,kCAAgB,CAAC,WAAW,GAAGa,6BAAM,CAAC;IACtCb,kCAAgB,CAAC,UAAU,GAAGa,6BAAM,CAAC;IACrCb,kCAAgB,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9BA,kCAAgB,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9BA,kCAAgB,CAAC,eAAe,GAAG,EAAE,CAAC;IACtCA,kCAAgB,CAAC,aAAa,GAAG,SAAS,CAAC;IAC3CA,kCAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACjDA,kCAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;GACnC;EAEO,UAAU;IAChB,OAAO,IAAI,CAAC,gBAAgB,IAAIA,kCAAgB,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,GAAgBY,4BAAoB,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,QACEE,QAACC,UAAI,QACF,CAAC,IAAI,CAAC,eAAe,IAAID,QAACE,4BAAY,OAAG,EAE1CF,oCACE,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,IAEnEA,2BAAe,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,IAC7DA,0BAAc,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IACzCA,iBACE,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QACxB,kBAAkB,EAAE,IAAI;OACzB,IAEDA,iCACE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACzC,OAAO,EAAE,OAAO,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,GAC9C,EACFA,iCACE,KAAK,EAAE,EAAE,MAAM,EAAE,CAACd,kCAAgB,CAAC,WAAW,EAAE,EAChD,OAAO,EAAE,OAAOA,kCAAgB,CAAC,WAAW,GAAG,KAAK,CAAC,GACrD,EACFc,2BAAe,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,GAAI,EACvDA,mCACE,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,IAGxBA,kBAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,uBAAuB,IAC3DA,iBACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,MAAM,IAEXA,qBAAQ,EACRA,kBACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,maAAma,eAC3Z,SAAS,GACnB,EACFA,kBACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,8HAA8H,eACtH,SAAS,GACnB,CACE,EACNA,kBAAM,IAAI,EAAC,iCAAiC,IAC1CA,wDAAuC,CAClC,CACF,CACe,EACxBA,kCAAsB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,GAAI,CAC1D,EACNA,iBAAK,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,kBAAkB,IACjDA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kCAAqB,EACrBA,mCACE,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,EACfA,0BACE,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,CAAC,EAAE,IAEhEA,iBAAK,KAAK,EAAC,eAAe,IACxBA,+BAAmB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,GAAI,EAC/DA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,iBAAK,KAAK,EAAC,SAAS,IACjBd,kCAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACnCc,4BACE,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,GACxC,CACH,CAAC,CACE,CACF,CACF,EACNA,iBAAK,EAAE,EAAC,eAAe,EAAC,KAAK,EAAC,kBAAkB,IAC9CA,iBACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,MAAM,EAAEd,kCAAgB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;OAC5C,IAEDc,qCAAwB,EACxBA,kCAAqB,CACjB,EACNA,iBACE,KAAK,EAAE;QACL,MAAM,EAAEd,kCAAgB,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC;QAC5C,QAAQ,EAAE,IAAI;OACf,IAEAA,kCAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;;MAAK,QACtCc,iCACE,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":["isEmpty","campaignTypeNames","createProductViewVpsEvent","createProductClickVpsEvent","imageSearchState","createSearchEvent","createFilterEvent","state","pipe","O.fromNullable","O.chain","O.fromPredicate","O.map","uuidv4","createTrackingApi","slotChangeListener","createWidgetVpsEvent","O.none","h","Host","SlotSkeleton"],"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/cjs/vviinn-widgets.cjs.js

@@ -1,19 +1,28 @@
 'use strict';
 
-const index = require('./index-7f1325a7.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a4becaff.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 = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('vviinn-widgets.cjs.js', document.baseURI).href));
     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 index.promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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 index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler.cjs",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_3.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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);
 });
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=vviinn-widgets.cjs.js.map

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

@@ -0,0 +1 @@
+{"file":"vviinn-widgets.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,gNAAe,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,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"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/collection/Image/error.js

@@ -12,3 +12,4 @@ export const checkImageType = (file) => {
   const supportedFileType = findFirstMap((supportedType) => supportedType === fileType ? some(file) : none)(SUPPORTED_FILE_TYPES);
   return pipe(supportedFileType, fromOption(() => unsupportedFileTypeError));
 };
+//# sourceMappingURL=error.js.map

package/dist/collection/Image/error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../src/Image/error.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE5D,MAAM,wBAAwB,GAAuB;EACnD,IAAI,EAAE,QAAQ;EACd,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAU,EACwB,EAAE;EACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;EACzC,MAAM,iBAAiB,GAAG,YAAY,CAAC,CAAC,aAAqB,EAAE,EAAE,CAC/D,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/C,CAAC,oBAAoB,CAAC,CAAC;EAExB,OAAO,IAAI,CACT,iBAAiB,EACjB,UAAU,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAC3C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Either, fromOption } from \"fp-ts/lib/Either\";\nimport { BasicError } from \"../error\";\nimport { findFirstMap } from \"fp-ts/Array\";\nimport { pipe } from \"fp-ts/lib/function\";\nimport { none, some } from \"fp-ts/lib/Option\";\n\nconst SUPPORTED_FILE_TYPES = [\"jpg\", \"jpeg\", \"png\", \"webp\"];\n\nconst unsupportedFileTypeError: BasicError<string> = {\n  kind: \"client\",\n  inner: \"File format not supported\",\n};\n\nexport const checkImageType = (\n  file: File\n): Either<BasicError<string>, File> => {\n  const fileType = file.type.split(\"/\")[1];\n  const supportedFileType = findFirstMap((supportedType: string) =>\n    supportedType === fileType ? some(file) : none\n  )(SUPPORTED_FILE_TYPES);\n\n  return pipe(\n    supportedFileType,\n    fromOption(() => unsupportedFileTypeError)\n  );\n};\n"]}

package/dist/collection/Image/form.js

@@ -3,3 +3,4 @@ export const imageFormFromFile = (file) => {
   body.append("image", file);
   return body;
 };
+//# sourceMappingURL=form.js.map

package/dist/collection/Image/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/Image/form.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAY,EAAE;EACxD,MAAM,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;EAC5B,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;EAC3B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["export const imageFormFromFile = (file: File): FormData => {\n  const body = new FormData();\n  body.append(\"image\", file);\n  return body;\n};\n"]}

package/dist/collection/Image/fromFile.js

@@ -18,3 +18,4 @@ export const imageFromFileTask = (f) => () => new Promise((resolve, _) => {
   image.onload = () => resolve(image);
   reader.readAsDataURL(f);
 });
+//# sourceMappingURL=fromFile.js.map

package/dist/collection/Image/fromFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fromFile.js","sourceRoot":"","sources":["../../src/Image/fromFile.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAO,EAA6B,EAAE,CAC7D,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;EACzB,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;EAChC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;EAE1B,MAAM,CAAC,MAAM,GAAG,CAAC,CAA4B,EAAE,EAAE;IAC/C,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,MAAgB,CAAC;IACtC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;MAClB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,CAAO,EAA0B,EAAE,CACpC,GAAG,EAAE,CACH,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;EACzB,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;EAChC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;EAE1B,MAAM,CAAC,MAAM,GAAG,CAAC,CAA4B,EAAE,EAAE;IAC/C,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,MAAgB,CAAC;EACxC,CAAC,CAAC;EAEF,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAEpC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC","sourcesContent":["import { Task } from \"fp-ts/Task\";\n\nexport const fromFile = (f: File): Promise<HTMLImageElement> =>\n  new Promise((resolve, _) => {\n    const reader = new FileReader();\n    const image = new Image();\n\n    reader.onload = (e: ProgressEvent<FileReader>) => {\n      image.src = e.target.result as string;\n      image.onload = () => {\n        resolve(image);\n      };\n    };\n\n    reader.readAsDataURL(f);\n  });\n\nexport const imageFromFileTask =\n  (f: File): Task<HTMLImageElement> =>\n  () =>\n    new Promise((resolve, _) => {\n      const reader = new FileReader();\n      const image = new Image();\n\n      reader.onload = (e: ProgressEvent<FileReader>) => {\n        image.src = e.target.result as string;\n      };\n\n      image.onload = () => resolve(image);\n\n      reader.readAsDataURL(f);\n    });\n"]}

package/dist/collection/Image/imageToB64.js

@@ -7,3 +7,4 @@ export const imageToB64 = (i) => {
   ctx.drawImage(i, 0, 0, naturalWidth, naturalHeight);
   return canvas.toDataURL();
 };
+//# sourceMappingURL=imageToB64.js.map

package/dist/collection/Image/imageToB64.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageToB64.js","sourceRoot":"","sources":["../../src/Image/imageToB64.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAmB,EAAU,EAAE;EACxD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;EAChD,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC;EAC1C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;EAEpC,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC;EAC5B,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC;EAE9B,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;EAEpD,OAAO,MAAM,CAAC,SAAS,EAAE,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["export const imageToB64 = (i: HTMLImageElement): string => {\n  const canvas = document.createElement(\"canvas\");\n  const { naturalWidth, naturalHeight } = i;\n  const ctx = canvas.getContext(\"2d\");\n\n  canvas.width = naturalWidth;\n  canvas.height = naturalHeight;\n\n  ctx.drawImage(i, 0, 0, naturalWidth, naturalHeight);\n\n  return canvas.toDataURL();\n};\n"]}

package/dist/collection/Image/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/collection/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Image/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/collection/Image/renderPromise.js

@@ -4,3 +4,4 @@ export const renderPromise = async (url) => new Promise((resolve) => {
   image.src = url;
 });
 export const imagesRenderedPromise = async (urls) => Promise.all(urls.map(renderPromise));
+//# sourceMappingURL=renderPromise.js.map

package/dist/collection/Image/renderPromise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderPromise.js","sourceRoot":"","sources":["../../src/Image/renderPromise.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,GAAW,EAAiB,EAAE,CAChE,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;EACtB,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;EAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;EAChD,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAClB,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,EAAE,IAAc,EAAmB,EAAE,CAC7E,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC","sourcesContent":["export const renderPromise = async (url: string): Promise<void> =>\n  new Promise((resolve) => {\n    const image = new Image();\n    image.addEventListener(\"load\", () => resolve());\n    image.src = url;\n  });\n\nexport const imagesRenderedPromise = async (urls: string[]): Promise<void[]> =>\n  Promise.all(urls.map(renderPromise));\n"]}

package/dist/collection/Image/resizeImage.js

@@ -26,3 +26,4 @@ export const resizeImage = (width, i) => {
   destinationContext.putImageData(destinationImageData, 0, 0);
   return destinationCanvas.toDataURL();
 };
+//# sourceMappingURL=resizeImage.js.map

package/dist/collection/Image/resizeImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizeImage.js","sourceRoot":"","sources":["../../src/Image/resizeImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EAEnB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAElB,MAAM,uBAAuB,GAAG,GAG9B,EAAE;EACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;EAExC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAa,EAAE;EAChE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;EAC9C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,uBAAuB,EAAE,CAAC;EAEpD,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC;EAC5B,MAAM,CAAC,MAAM,GAAG,aAAa,CAAC;EAE9B,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAE/B,OAAO,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,CAAmB,EAAU,EAAE;EACxE,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;EACxC,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,uBAAuB,EAAE,CAAC;EAC1E,MAAM,eAAe,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC;EAC/C,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC,GAAG,CACtE,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAC9B,CAAC;EAEF,MAAM,oBAAoB,GAAG,IAAI,SAAS,CACxC,gBAAgB,EAChB,iBAAiB,CAClB,CAAC;EAEF,MAAM,eAAe,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;EAE9C,iBAAiB,CAAC,KAAK,GAAG,gBAAgB,CAAC;EAC3C,iBAAiB,CAAC,MAAM,GAAG,iBAAiB,CAAC;EAE7C,OAAO,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;EAE/C,kBAAkB,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAE5D,OAAO,iBAAiB,CAAC,SAAS,EAAE,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { lanczos } from \"@rgba-image/lanczos\";\nimport {\n  dimensionsFromImage,\n  ImageDimension,\n  scaleByLargestSide,\n} from \"./sizing\";\n\nconst createCanvasWithContext = (): [\n  HTMLCanvasElement,\n  CanvasRenderingContext2D\n] => {\n  const canvas = document.createElement(\"canvas\");\n  const contenx = canvas.getContext(\"2d\");\n\n  return [canvas, contenx];\n};\n\nconst imageDataFromImage = (image: HTMLImageElement): ImageData => {\n  const { naturalWidth, naturalHeight } = image;\n  const [canvas, context] = createCanvasWithContext();\n\n  canvas.width = naturalWidth;\n  canvas.height = naturalHeight;\n\n  context.drawImage(image, 0, 0);\n\n  return context.getImageData(0, 0, naturalWidth, naturalHeight);\n};\n\nexport const resizeImage = (width: number, i: HTMLImageElement): string => {\n  const scale = scaleByLargestSide(width);\n  const [destinationCanvas, destinationContext] = createCanvasWithContext();\n  const imageDimensions = dimensionsFromImage(i);\n  const [destinationWidth, destinationHeight] = scale(imageDimensions).map(\n    (d: ImageDimension) => d.size\n  );\n\n  const destinationImageData = new ImageData(\n    destinationWidth,\n    destinationHeight\n  );\n\n  const originImageData = imageDataFromImage(i);\n\n  destinationCanvas.width = destinationWidth;\n  destinationCanvas.height = destinationHeight;\n\n  lanczos(originImageData, destinationImageData);\n\n  destinationContext.putImageData(destinationImageData, 0, 0);\n\n  return destinationCanvas.toDataURL();\n};\n"]}

package/dist/collection/Image/sizing.js

@@ -37,3 +37,4 @@ export const dimensionsFromImage = (image) => {
   const { naturalWidth, naturalHeight } = image;
   return [makeWidth(naturalWidth), makeHeight(naturalHeight)];
 };
+//# sourceMappingURL=sizing.js.map

package/dist/collection/Image/sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../src/Image/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAO,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAUvC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAkB,EAAE;EACjD,OAAO;IACL,IAAI,EAAE,OAAO;IACb,IAAI;GACL,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAkB,EAAE;EAClD,OAAO;IACL,IAAI,EAAE,QAAQ;IACd,IAAI;GACL,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,SAAS,GAAwB,SAAS,CAAC,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAC7E,SAAS,CACV,CAAC;AACF,MAAM,SAAS,GAAwB;EACrC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI;EACnC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChB,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EAC7D,CAAC;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AAC7C,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AAE7C,MAAM,kBAAkB,GAAG,CAAC,gBAAiC,EAAU,EAAE;EACvE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,gBAAgB,CAAC;EAC7C,OAAO,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAC7B,CAAC,MAAc,EAAE,EAAE,CACjB,CAAC,UAA2B,EAAmB,EAAE;EAC/C,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;EAC1D,MAAM,KAAK,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;EAEnD,MAAM,eAAe,mCAChB,gBAAgB,CAAC,CAAC,CAAC,KACtB,IAAI,EAAE,MAAM,GAAG,KAAK,GACrB,CAAC;EAEF,MAAM,cAAc,mCACf,gBAAgB,CAAC,CAAC,CAAC,KACtB,IAAI,EAAE,MAAM,GACb,CAAC;EAEF,OAAO,oBAAoB,CAAC,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC;AAEN,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAuB,EACN,EAAE;EACnB,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;EAC9C,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC","sourcesContent":["import { Ord as OrdNumber } from \"fp-ts/lib/number\";\nimport { Ord, contramap } from \"fp-ts/lib/Ord\";\nimport { sort } from \"fp-ts/lib/Array\";\n\ntype ImageWidth = \"width\";\ntype ImageHeight = \"height\";\n\nexport type ImageDimension = {\n  readonly kind: ImageWidth | ImageHeight;\n  readonly size: number;\n};\n\nconst makeWidth = (size: number): ImageDimension => {\n  return {\n    kind: \"width\",\n    size,\n  };\n};\n\nconst makeHeight = (size: number): ImageDimension => {\n  return {\n    kind: \"height\",\n    size,\n  };\n};\n\ntype ImageDimensions = ImageDimension[];\n\nconst ordBySize: Ord<ImageDimension> = contramap((s: ImageDimension) => s.size)(\n  OrdNumber\n);\nconst ordByKind: Ord<ImageDimension> = {\n  equals: (x, y) => x.kind === y.kind,\n  compare: (x, y) => {\n    return x.kind === y.kind ? 0 : x.kind === \"width\" ? -1 : 1;\n  },\n};\n\nconst sortDimentionsBySize = sort(ordBySize);\nconst sortDimentionsByKind = sort(ordByKind);\n\nconst getDimentionsRatio = (sortedDimensions: ImageDimensions): number => {\n  const [smallest, largest] = sortedDimensions;\n  return smallest.size / largest.size;\n};\n\nexport const scaleByLargestSide =\n  (toSize: number) =>\n    (dimensions: ImageDimensions): ImageDimensions => {\n      const sortedDimensions = sortDimentionsBySize(dimensions);\n      const ratio = getDimentionsRatio(sortedDimensions);\n\n      const newSmallestSide: ImageDimension = {\n        ...sortedDimensions[0],\n        size: toSize * ratio,\n      };\n\n      const newLargestSide: ImageDimension = {\n        ...sortedDimensions[1],\n        size: toSize,\n      };\n\n      return sortDimentionsByKind([newLargestSide, newSmallestSide]);\n    };\n\nexport const dimensionsFromImage = (\n  image: HTMLImageElement\n): ImageDimensions => {\n  const { naturalWidth, naturalHeight } = image;\n  return [makeWidth(naturalWidth), makeHeight(naturalHeight)];\n};\n"]}