vviinn-widgets 2.18.21 → 2.19.0

package/dist/types/network/ion/File.d.ts

@@ -1,9 +1,9 @@
 import { Valueable } from "./ValueObject";
-declare type IonFileData = {
+type IonFileData = {
   name: string;
   mediaType: string;
 };
-export declare type IonFile = Valueable<string> & IonFileData;
+export type IonFile = Valueable<string> & IonFileData;
 export declare const fileToB64: (f: File) => Promise<string>;
 export declare const fromFile: (f: File) => Promise<IonFile>;
 export {};

package/dist/types/network/ion/Form.d.ts

@@ -4,7 +4,7 @@ import { Valueable } from "./ValueObject";
 import { Link } from "./Link";
 import { ValueObject } from "./ValueObject";
 import { BasicError } from "../../error";
-declare type FormRelation = "form" | "edit-form" | "create-form" | "query-form";
+type FormRelation = "form" | "edit-form" | "create-form" | "query-form";
 declare enum FormMemberName {
   desc = "desc",
   eform = "eform",
@@ -29,15 +29,15 @@ declare enum FormMemberName {
   value = "value",
   visible = "visible"
 }
-declare type FormMemberObject = {
+type FormMemberObject = {
   [key in FormMemberName]: unknown;
 };
-declare type FormField = Partial<FormMemberObject>;
+type FormField = Partial<FormMemberObject>;
 export declare const checkFormFields: (f: FormField[], data: Object) => E.Either<string, Object>;
-export declare type FormType = {
+export type FormType = {
   rel: FormRelation[];
 };
-export declare type Form = Valueable<FormField[]> & Link & FormType;
+export type Form = Valueable<FormField[]> & Link & FormType;
 export declare const requestFromForm: (form: Form, data: Object) => E.Either<string, [string, RequestInit]>;
 export declare const formRequest: <T>(form: Form, data?: Object) => (payload: RequestInit) => TE.TaskEither<BasicError<Response> | BasicError<string>, ValueObject<T>>;
 export {};

package/dist/types/network/ion/Link.d.ts

@@ -5,7 +5,7 @@ import { RequestMethod } from "../utils";
 export interface IonLinkParams {
   readonly [param: string]: string;
 }
-export declare type Link = {
+export type Link = {
   href: string;
   readonly method?: RequestMethod;
   readonly name?: string;

package/dist/types/network/ion/ValueObject.d.ts

@@ -11,17 +11,17 @@ declare enum ObjectMemberName {
   type = "type",
   value = "value"
 }
-declare type MemberObject = {
+type MemberObject = {
   [key in ObjectMemberName]: unknown;
 };
-export declare type Valueable<T> = {
+export type Valueable<T> = {
   readonly value: T;
 };
-declare type Linked = {
+type Linked = {
   readonly links: {
     [link: string]: Link;
   };
 };
-export declare type ValueObject<T> = Valueable<T> & Partial<MemberObject> & Partial<Linked>;
+export type ValueObject<T> = Valueable<T> & Partial<MemberObject> & Partial<Linked>;
 export declare const foldValueObject: <T>(i: ValueObject<T>) => T;
 export {};

package/dist/types/network/utils.d.ts

@@ -16,10 +16,10 @@ export declare const mergeInitRequests: S.Semigroup<{
   readonly referrer?: string;
   readonly referrerPolicy?: ReferrerPolicy;
   readonly signal?: AbortSignal;
-  readonly window?: any;
+  readonly window?: null;
 }>;
-export declare type RequestWithPath = [string, RequestInit];
-export declare type RequestMethod = "GET" | "POST" | "DELETE";
+export type RequestWithPath = [string, RequestInit];
+export type RequestMethod = "GET" | "POST" | "DELETE";
 export declare const createBasicRequest: (method: RequestMethod) => RequestInit;
 export declare const createRequestFromMethod: (method: RequestMethod) => E.Either<any, RequestInit>;
 export declare const createInitGetRequest: E.Either<any, RequestInit>;

package/dist/types/recommendation/events.d.ts

@@ -2,22 +2,22 @@ import { FilterAction } from "vviinn-tracking-client-ts";
 import { CampaignTypeTitle, CampaignTypeId, WidgetType } from "../campaign/Campaign";
 import { ValueObject } from "../network/ion/ValueObject";
 import { DetectedObject } from "../searchSession/searchSession";
-export declare type BasicEventData = {
+export type BasicEventData = {
   widgetType: WidgetType;
   campaignTypeId: CampaignTypeId;
   campaignTypeName: CampaignTypeTitle;
   widgetId?: string;
 };
-export declare type SelectObjectEventData = BasicEventData & {
+export type SelectObjectEventData = BasicEventData & {
   detectedObject: ValueObject<DetectedObject>;
 };
-export declare type SelectFilterEventData = BasicEventData & {
+export type SelectFilterEventData = BasicEventData & {
   action: FilterAction;
   filterName?: string;
 };
-export declare type ProductCardEventData = BasicEventData & {
+export type ProductCardEventData = BasicEventData & {
   productId: string;
   productRank: number;
   productName: string;
 };
-export declare type ProductCardEvent = CustomEvent<ProductCardEventData>;
+export type ProductCardEvent = CustomEvent<ProductCardEventData>;

package/dist/types/recommendation/recommendation.d.ts

@@ -1,2 +1,2 @@
 import { components } from "../interfaces/generated";
-export declare type Recommendation = components["schemas"]["visual-product-search-object"];
+export type Recommendation = components["schemas"]["visual-product-search-object"];

package/dist/types/searchSession/searchSession.d.ts

@@ -16,26 +16,26 @@ export interface SearchSessionFilter {
   filters: Link[];
 }
 export declare const readFilters: (filters: SearchSessionFilters) => SearchSessionFilter[];
-declare type HasFilters = {
+type HasFilters = {
   readonly filters: ValueObject<SearchSessionFilters>;
 };
-export declare type DetectedObject = {
+export type DetectedObject = {
   class: string;
   score: number;
   rectangle: RectangleAlt;
 };
 export declare const detectedObjectEq: Eq<DetectedObject>;
-declare type ContainsDetectedObjects = {
+type ContainsDetectedObjects = {
   readonly detectedObjects: ValueObject<DetectedObject>[];
 };
-declare type ContainsRectangleSearch = {
+type ContainsRectangleSearch = {
   readonly searchArea: Form;
 };
-declare type ContainsHiresImageUpload = {
+type ContainsHiresImageUpload = {
   readonly uploadHighResolutionImage: Form;
 };
-export declare type SearchSession = ValueObject<Recommendation[]> & HasFilters & Partial<ContainsDetectedObjects> & ContainsRectangleSearch & ContainsHiresImageUpload;
+export type SearchSession = ValueObject<Recommendation[]> & HasFilters & Partial<ContainsDetectedObjects> & ContainsRectangleSearch & ContainsHiresImageUpload;
 export declare const searchSessionClient: (initialData: RequestInit, campaignId?: O.Option<string>) => TE.TaskEither<BasicError<Response | string>, SearchSession>;
-export declare type ObjectsDetectedEvent = CustomEvent<ValueObject<DetectedObject>[]>;
+export type ObjectsDetectedEvent = CustomEvent<ValueObject<DetectedObject>[]>;
 export declare const makeRequestFromFile: (token: string, file: File) => E.Either<BasicError<string>, RequestInit>;
 export {};

package/dist/types/slider/GridMode.d.ts

@@ -1 +1 @@
-export declare type GridMode = "auto" | "grid" | "manual";
+export type GridMode = "auto" | "grid" | "manual";

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,14 +214,16 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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 }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
+/**
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**
@@ -417,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -470,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -666,7 +738,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -740,6 +812,7 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;
@@ -820,8 +893,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1145,8 +1218,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1427,9 +1500,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1439,12 +1510,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1455,8 +1526,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;
@@ -1550,6 +1621,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/dist/types/store/imageSearch.store.d.ts

@@ -9,7 +9,7 @@ import { Rectangle } from "../geometry/Rectangle";
 import { Form } from "../network/ion/Form";
 import { Handler } from "../cropper/Handler";
 import { BasicError } from "../error";
-declare type ImageSearchStore = {
+type ImageSearchStore = {
   token?: string;
   campaignId: O.Option<string>;
   results: Recommendation[];

package/dist/types/tracking/models.d.ts

@@ -5,8 +5,8 @@ declare const FILTER_EVENT_EVENT_TYPE = "filter_event";
 declare const SEARCH_EVENT_EVENT_TYPE = "search_event";
 declare const WIDGET_EVENT_EVENT_TYPE = "widget_event";
 export { PRODUCT_CLICK_EVENT_TYPE, PRODUCT_VIEW_EVENT_TYPE, FILTER_EVENT_EVENT_TYPE, SEARCH_EVENT_EVENT_TYPE, WIDGET_EVENT_EVENT_TYPE, };
-export declare type WidgetEvents = "product_click_event" | "product_view_event" | "filter_event" | "search_event" | "widget_event";
-export declare type WidgetEventType = {
+export type WidgetEvents = "product_click_event" | "product_view_event" | "filter_event" | "search_event" | "widget_event";
+export type WidgetEventType = {
   widget: Widget;
   typ: WidgetEvents;
 };

package/dist/types/utils/event/Events.d.ts

@@ -1,4 +1,4 @@
-export declare type ClientEvent = {
+export type ClientEvent = {
   clientX: number;
   clientY: number;
 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/dist/vviinn-widgets/p-0b0d59d7.entry.js

@@ -0,0 +1,2 @@
+import{r,h as e,H as o}from"./p-fa17e81f.js";import{i as t}from"./p-3abc679c.js";import"./p-3b99c62d.js";const a=":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid white;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";const i=class{constructor(e){r(this,e)}isActive(){return t.loading||t.objectDetectionInProgress}render(){return e(o,{class:{active:this.isActive()}})}};i.style=a;export{i as vviinn_preloader};
+//# sourceMappingURL=p-0b0d59d7.entry.js.map

package/dist/vviinn-widgets/p-0b0d59d7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["vviinnPreloaderCss","VviinnPreloader","isActive","imageSearchState","loading","objectDetectionInProgress","render","h","Host","class","active","this"],"sources":["./src/components/vviinn-preloader/vviinn-preloader.css?tag=vviinn-preloader&encapsulation=shadow","./src/components/vviinn-preloader/vviinn-preloader.tsx"],"sourcesContent":[":host {\n  --preloader-size: 24px;\n  --preloader-width: calc(var(--preloader-size) / 6);\n  transform-origin: center;\n  animation: rotate 3s linear infinite;\n  border: var(--preloader-width) solid white;\n  border-radius: 50%;\n  border-top-color: transparent;\n  display: none;\n  outline: 0;\n  width: var(--preloader-size);\n  height: var(--preloader-size);\n  box-sizing: border-box;\n}\n\n:host(.active) {\n  display: flex;\n}\n\n@keyframes rotate {\n  from {\n    transform: rotate(-360deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { imageSearchState } from \"../../store/imageSearch.store\";\n\n@Component({\n  tag: \"vviinn-preloader\",\n  styleUrl: \"vviinn-preloader.css\",\n  shadow: true,\n})\nexport class VviinnPreloader {\n  private isActive(): boolean {\n    return (\n      imageSearchState.loading || imageSearchState.objectDetectionInProgress\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          active: this.isActive(),\n        }}\n      ></Host>\n    );\n  }\n}\n"],"mappings":"yGAAA,MAAMA,EAAqB,sb,MCQdC,EAAe,M,yBAClBC,WACN,OACEC,EAAiBC,SAAWD,EAAiBE,yB,CAIjDC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQC,KAAKT,a"}

package/dist/vviinn-widgets/p-14373da7.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,H as s,g as r}from"./p-fa17e81f.js";import{i as a,s as n,a as o,O as d,l as p}from"./p-3abc679c.js";import{s as l,S as c}from"./p-53eacbe3.js";import{e as h,f as g,g as u,h as v,v as m,b as f,i as b}from"./p-2f7bf983.js";import{c as x}from"./p-18fd769b.js";import"./p-3b99c62d.js";const y=":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 w=undefined&&undefined.__rest||function(i,t){var e={};for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&t.indexOf(s)<0)e[s]=i[s];if(i!=null&&typeof Object.getOwnPropertySymbols==="function")for(var r=0,s=Object.getOwnPropertySymbols(i);r<s.length;r++){if(t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(i,s[r]))e[s[r]]=i[s[r]]}return e};const k=i=>/^[-+]?(\d+|Infinity)$/.test(i)?Number(i):NaN;const I=i=>!p(i);const j=i=>!isNaN(i);const _=class{constructor(e){i(this,e);this.globalSlotsChanged=t(this,"globalSlotsChanged",7);this.vviinnWidgetLoad=t(this,"vviinnWidgetLoad",7);this.vviinnWidgetOpen=t(this,"vviinnWidgetOpen",7);this.vviinnWidgetClose=t(this,"vviinnWidgetClose",7);this.vviinnProductClick=t(this,"vviinnProductClick",7);this.vviinnProductView=t(this,"vviinnProductView",7);this.vviinnProductLoad=t(this,"vviinnProductLoad",7);this.vviinnImageUpload=t(this,"vviinnImageUpload",7);this.vviinnImageCrop=t(this,"vviinnImageCrop",7);this.vviinnSelectObject=t(this,"vviinnSelectObject",7);this.vviinnSelectFilter=t(this,"vviinnSelectFilter",7);this.vviinnNoResult=t(this,"vviinnNoResult",7);this.imageSource=null;this.setTrackingDeactivated=i=>{if(i.status==="rejected"){this.trackingDeactivated=true}};this.getBasicEventData=()=>{var i;return{widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:x["VPS"],widgetId:(i=this.buttonElementId)!==null&&i!==void 0?i: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 i=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(i))}activeWatcher(i){if(i){this.overflow=document.body.style.overflow;document.body.style.overflow="hidden";this.trackOpenEvent()}else{document.body.style.overflow=this.overflow}}buttonPressedWatcher(i){if(!i)return;if(this.mode==="modal"){this.active=true;this.vviinnWidgetOpen.emit(this.getBasicEventData())}}trackProductView({detail:i}){if(this.trackingDeactivated)return;const{productRank:t,productId:e,productName:s,widgetType:r,widgetId:a,campaignTypeId:n,campaignTypeName:o}=i,d=w(i,["productRank","productId","productName","widgetType","widgetId","campaignTypeId","campaignTypeName"]);const p=h(Object.assign({session_id:this.uiSessionId,rank:t,product:e},d));this.trackingApi.trackEvent(p).then(this.setTrackingDeactivated)}async trackProductClick({detail:i}){const{productRank:t,productId:e,productName:s,widgetType:r,widgetId:n,campaignTypeId:o,campaignTypeName:d}=i,p=w(i,["productRank","productId","productName","widgetType","widgetId","campaignTypeId","campaignTypeName"]);const l=g(Object.assign({session_id:this.uiSessionId,rank:t,product:e},p));if(!this.trackingDeactivated){await this.trackingApi.trackEvent(this.trackingDeactivated?null:l).then(this.setTrackingDeactivated)}const c=a.results.find((t=>t.productId===i.productId));if(!c||!c.deeplink)return;window.location.href=c.deeplink}trachSearchAreaChanges(){if(this.trackingDeactivated)return;const i=u({session_id:this.uiSessionId,source:this.imageSource,search_area:"manual-selection"});this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackDetectedObject(){if(this.trackingDeactivated)return;const i=u({session_id:this.uiSessionId,source:this.imageSource,search_area:"attention-point"});this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackFilter({detail:i}){if(this.trackingDeactivated)return;const t=v({session_id:this.uiSessionId,source:this.imageSource,kind:"category",action:i.action});this.trackingApi.trackEvent(t).then(this.setTrackingDeactivated)}connectedCallback(){n.apiPath=this.apiPath;n.currencySign=this.currencySign;n.locale=this.locale;a.token=this.token;a.campaignId=o.pipe(this.campaignId,d.fromNullable,d.chain(d.fromPredicate(I)),d.map(k),d.chain(d.fromPredicate(j)),d.map((i=>`${i}`)));this.uiSessionId=m();this.trackingApi=f(this.apiPath,this.token);this.id=this.el.id}componentWillLoad(){l(this,this.el);this.vviinnWidgetLoad.emit(this.getBasicEventData())}trackOpenEvent(){if(this.trackingDeactivated)return;const i=b({action:"open",session_id:this.uiSessionId});this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}handleImageSelection(i){this.imageSource=i;this.slidePosition=1;const t=this.el.shadowRoot.querySelector("vviinn-overlayed-modal");const e=t.shadowRoot.querySelector("vviinn-overlay");const s=e.querySelector("vviinn-modal");const r=s.shadowRoot.querySelector(".body");r.scrollTop=0;this.trackInitialSearch()}trackInitialSearch(){if(this.trackingDeactivated)return;const i=u({session_id:this.uiSessionId,source:this.imageSource,search_area:"full"});this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}resetState(){this.resetScroll("onboarding-block");this.slidePosition=0;a.image=d.none;a.imageUrl=d.none;a.imageBounds=d.none;a.searchArea=d.none;a.results=[];a.filters=[];a.detectedObjects=[];a.activeIonLink=undefined;a.rectangleSearchForm=undefined;a.loading=false;this.resetScroll("results-block")}haveErrors(){return this.wrongImageFormat||a.serverError}resetScroll(i,t="auto"){const e=this.el.shadowRoot.getElementById(i);e.scroll({top:0,left:0,behavior:t})}handleModalClose(){this.active=false;this.resetState();const i=["onboarding-block","results-block"];i.forEach((i=>this.resetScroll(i)));if(this.trackingDeactivated)return;const t=b({action:"close",session_id:this.uiSessionId});this.trackingApi.trackEvent(t).then(this.setTrackingDeactivated)}render(){var i;return e(s,null,!this.showingInButton&&e(c,null),e("vviinn-overlayed-modal",{class:{"first-screen":this.slidePosition===0},active:this.active,resetState:this.resetState.bind(this),onVviinnWidgetClose:()=>this.handleModalClose(),buttonElementId:(i=this.buttonElementId)!==null&&i!==void 0?i:this.id,hideBackButton:this.mode==="upload",exportparts:"secondary-action, title, close-button, example-images"},e("vviinn-slider",{showBullets:false,position:this.slidePosition},e("vviinn-slide",{class:{"start-page":true}},e("div",{class:{error:this.haveErrors(),"start-page_block":true}},e("vviinn-wrong-format",{class:{hidden:!this.wrongImageFormat},handler:()=>this.wrongImageFormat=false}),e("vviinn-server-error",{class:{hidden:!a.serverError},handler:()=>a.serverError=false}),e("vviinn-teaser",{class:{hidden:this.haveErrors()}}),e("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"},e("span",{slot:"upload-button-text",class:"upload-button-content"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"29",height:"28",fill:"none"},e("defs",null),e("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"}),e("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"})),e("slot",{name:"vviinn-image-upload-button-text"},e("span",null,"Kamera oder Bild auswählen")))),e("vviinn-privacy-badge",{class:{hidden:this.haveErrors()}})),e("div",{id:"onboarding-block",class:"start-page_block"},e("div",{class:"onboarding-wrapper"},e("vviinn-onboarding",null),e("vviinn-example-images",{part:"example-images",onVviinnImageUpload:()=>this.handleImageSelection("example"),onVviinnNoResult:()=>this.resetScroll("onboarding-block","smooth"),basicEventData:this.getBasicEventData()})))),e("vviinn-slide",{class:{"results-page":true,active:this.slidePosition==1}},e("div",{class:"image-wrapper"},e("vviinn-image-view",{basicEventData:this.getBasicEventData()}),e("div",{class:"filters-wrapper"},e("div",{class:"filters"},a.filters.map((i=>e("search-filters",{filter:i,basicEventData:this.getBasicEventData()})))))),e("div",{id:"results-block",class:"products-wrapper"},e("div",{class:{"nothing-found":true,hidden:a.results.length>0}},e("vviinn-empty-results",null),e("vviinn-onboarding",null)),e("div",{class:{hidden:a.results.length<=0,products:true}},a.results.map(((i,t)=>{var s;return e("vviinn-product-card",{key:i.productId,hidden:true,productTitle:i.title,productId:i.productId,brand:i.brand,deeplink:i.deeplink,price:i.price.actual,salePrice:i.price.sale,imageWidth:160,image:(s=i.image.thumbnail)!==null&&s!==void 0?s:i.image.original,part:"product-card",campaignTypeId:"VPS",index:t,widgetElementId:this.id,buttonElementId:this.buttonElementId})}))))))))}get el(){return r(this)}static get watchers(){return{active:["activeWatcher"],buttonPressed:["buttonPressedWatcher"]}}};_.style=y;export{_ as vviinn_vps_widget};
+//# sourceMappingURL=p-14373da7.entry.js.map

package/dist/vviinn-widgets/p-14373da7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["vviinnVpsWidgetCss","filterInt","value","test","Number","NaN","notEmptyString","s","isEmpty","notNan","n","isNaN","VviinnVpsWidget","this","imageSource","setTrackingDeactivated","result","status","trackingDeactivated","getBasicEventData","widgetType","campaignTypeId","campaignTypeName","campaignTypeNames","widgetId","_a","buttonElementId","id","componentDidLoad","slots","el","querySelectorAll","globalSlotsChanged","emit","Array","from","activeWatcher","overflow","document","body","style","trackOpenEvent","buttonPressedWatcher","pressed","mode","active","vviinnWidgetOpen","trackProductView","detail","productRank","productId","productName","rest","__rest","productViewEvent","createProductViewVpsEvent","Object","assign","session_id","uiSessionId","rank","product","trackingApi","trackEvent","then","async","productClickEvent","createProductClickVpsEvent","imageSearchState","results","find","r","deeplink","window","location","href","trachSearchAreaChanges","searchEvent","createSearchEvent","source","search_area","trackDetectedObject","trackFilter","createFilterEvent","kind","action","connectedCallback","state","apiPath","currencySign","locale","token","campaignId","pipe","O.fromNullable","O.chain","O.fromPredicate","O.map","uuidv4","createTrackingApi","componentWillLoad","slotChangeListener","vviinnWidgetLoad","widgetOpenEvent","createWidgetVpsEvent","handleImageSelection","slidePosition","root","shadowRoot","querySelector","overlay","modal","modalBody","scrollTop","trackInitialSearch","resetState","resetScroll","image","O.none","imageUrl","imageBounds","searchArea","filters","detectedObjects","activeIonLink","undefined","rectangleSearchForm","loading","haveErrors","wrongImageFormat","serverError","elementId","behavior","element","getElementById","scroll","top","left","handleModalClose","elementsToReset","forEach","name","widgetCloseEvent","render","h","Host","showingInButton","SlotSkeleton","class","bind","onVviinnWidgetClose","hideBackButton","exportparts","showBullets","position","error","hidden","handler","onVviinnImageUpload","onVviinnNoResult","resetVpsButton","basicEventData","part","startUpload","buttonPressed","slot","xmlns","width","height","fill","d","map","filter","length","products","p","i","key","productTitle","title","brand","price","actual","salePrice","sale","imageWidth","thumbnail","original","index","widgetElementId"],"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"],"mappings":"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"}

package/dist/vviinn-widgets/p-18fd769b.js

@@ -1 +1,2 @@
-const r={VPR:"Similar Products",VPS:"Visual Search",VCS:"Products Cross-Selling"};function t(r,t){return a=>(r=>"VPR"===r._tag)(a)?r():t()}function a(r){return"VPR"===r?{_tag:"VPR"}:{_tag:"VCS"}}export{t as a,r as c,a as f}
+const t={VPR:"Similar Products",VPS:"Visual Search",VCS:"Products Cross-Selling"};const r=t=>t._tag==="VPR";function s(t,s){return a=>r(a)?t():s()}function a(t){return t==="VPR"?{_tag:"VPR"}:{_tag:"VCS"}}export{s as a,t as c,a as f};
+//# sourceMappingURL=p-18fd769b.js.map

package/dist/vviinn-widgets/p-18fd769b.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["campaignTypeNames","VPR","VPS","VCS","isVPR","c","_tag","fold","onVPR","onVCS","fromString","s"],"sources":["./src/campaign/Campaign.ts"],"sourcesContent":["export type CampaignName = \"VPR\" | \"VCS\";\nexport type WidgetType = \"VPR\" | \"VPS\";\nexport type CampaignTypeId = \"VPR\" | \"VPS\" | \"VCS\";\n\nexport type CampaignTypeTitle =\n  | \"Similar Products\"\n  | \"Visual Search\"\n  | \"Products Cross-Selling\";\n\nexport const campaignTypeNames: Record<CampaignTypeId, CampaignTypeTitle> = {\n  VPR: \"Similar Products\",\n  VPS: \"Visual Search\",\n  VCS: \"Products Cross-Selling\",\n};\n\nexport interface VPR {\n  readonly _tag: \"VPR\";\n}\n\nexport interface VCS {\n  readonly _tag: \"VCS\";\n}\n\nexport const isVPR = (c: Campaign): c is VPR => c._tag === \"VPR\";\nexport const isVCS = (c: Campaign): c is VCS => c._tag === \"VCS\";\n\nexport type Campaign = VPR | VCS;\n\nexport function fold<A, B>(\n  onVPR: () => A,\n  onVCS: () => B\n): (c: Campaign) => A | B {\n  return (c) => (isVPR(c) ? onVPR() : onVCS());\n}\n\nexport function fromString(s: CampaignName): Campaign {\n  return s === \"VPR\" ? { _tag: \"VPR\" } : { _tag: \"VCS\" };\n}\n"],"mappings":"MASaA,EAA+D,CAC1EC,IAAK,mBACLC,IAAK,gBACLC,IAAK,0BAWA,MAAMC,EAASC,GAA0BA,EAAEC,OAAS,M,SAK3CC,EACdC,EACAC,GAEA,OAAQJ,GAAOD,EAAMC,GAAKG,IAAUC,GACtC,C,SAEgBC,EAAWC,GACzB,OAAOA,IAAM,MAAQ,CAAEL,KAAM,OAAU,CAAEA,KAAM,MACjD,Q"}