vviinn-widgets 2.18.21 → 2.19.1

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/p-312b0eb7.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as s,H as h,g as n}from"./p-fa17e81f.js";import{V as o,c as e}from"./p-d08ce429.js";const d=class{constructor(s){i(this,s),this.vviinnWidgetOpen=t(this,"vviinnWidgetOpen",7),this.vviinnWidgetLoad=t(this,"vviinnWidgetLoad",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.vviinnNoResult=t(this,"vviinnNoResult",7),this.sidebar=null,this.sidebarCloseListener=()=>{document.body.removeChild(this.sidebar)},this.token=void 0,this.productId=void 0,this.position="bottom",this.sourceImage=null,this.sidebarTitle="Visually similar products",this.modalScrollbar=!1,this.campaigns="",this.campaignType="VPR",this.color=void 0,this.addStyle=!0,this.mode="continuity",this.imageWidth=300,this.currencySign="€",this.noResultText=void 0,this.noResultShow=!0,this.gridArrowsDynamic=!1,this.apiPath="https://api.vviinn.com"}render(){return s(h,{onClick:()=>{this.handleClick(),this.vviinnWidgetOpen.emit({widgetType:"VPR",campaignTypeId:this.campaignType,campaignTypeName:e[this.campaignType],widgetId:this.el.id})},role:"button",tabindex:"0"},s("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},s("slot",null,s(o,null))))}handleClick(){const i=document.createElement("vviinn-recommendations-sidebar");i.sidebarTitle=this.sidebarTitle,i.productId=this.productId,i.token=this.token,i.position=this.position,i.sourceImage=this.sourceImage,i.widgetScrollbar=this.modalScrollbar,i.campaigns=this.campaigns,i.campaignType=this.campaignType,i.color=this.color,i.mode="right"===this.position?"grid":this.mode,i.imageWidth=this.imageWidth,i.currencySign=this.currencySign,i.apiPath=this.apiPath,i.buttonElementId=this.el.id,i.noResultText=this.noResultText,i.noResultShow=this.noResultShow,i.gridArrowsDynamic=this.gridArrowsDynamic,this.sidebar=i,i.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&(this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener),document.body.removeChild(this.sidebar))}get el(){return n(this)}};d.style=":host{display:block}";export{d as vviinn_vpr_button}