vviinn-widgets 2.18.21 → 2.19.1

package/dist/esm/vviinn-widgets.js

@@ -1,17 +1,21 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-590cb67e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-48ef9564.js';
+export { s as setNonce } from './index-48ef9564.js';
 
 /*
- Stencil Client Patch Browser v2.9.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v3.3.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
     const opts = {};
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
+        // TODO(STENCIL-661): Remove code related to the dynamic import shim
+        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["vviinn-button",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["cropper-handler",[[1,"cropper-handler",{"handler":[16],"disabled":[4]}]]],["vviinn-error",[[1,"vviinn-error"]]],["vviinn-preloader",[[1,"vviinn-preloader"]]],["vviinn-carousel_3",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"buttonElementId":[1,"button-element-id"],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32]},[[0,"vviinnProductLoad","handleProductLoading"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32]}],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"campaignTypeId":[1,"campaign-type-id"],"dimmedBackground":[4,"dimmed-background"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"index":[2],"imageLoaded":[32]}]]],["highlight-box_22",[[1,"vviinn-image-view",{"basicEventData":[16]}],[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16]}],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedCategoryId":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge"],[1,"vviinn-teaser"],[1,"image-cropper",{"disabled":[4],"basicEventData":[16],"handleMove":[32]}],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"highlight-box"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"slider":[32]}],[1,"vviinn-onboarding-card-1"],[1,"vviinn-onboarding-card-2"],[1,"vviinn-onboarding-card-3"],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget",[[1,"vviinn-vps-widget",{"token":[1],"apiPath":[1,"api-path"],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"]]]]],["vviinn-vps-button",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"apiPath":[1,"api-path"],"pressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"]}]]]], options);
+  return bootstrapLazy([["cropper-handler_29",[[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"]]],[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"]]],[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-button",{"addStyle":[4,"add-style"]}],[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]}],[1,"cropper-handler",{"handler":[16],"disabled":[4]}],[1,"vviinn-error"],[1,"vviinn-preloader"],[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]}]]],["vviinn-carousel_2",[[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]}]]],["vviinn-recommendations-sidebar",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"apiPath":[1,"api-path"]}]]]], options);
 });

package/dist/loader/index.d.ts

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

package/dist/loader/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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