vviinn-widgets 2.2.2 → 2.4.0

package/dist/collection/tracking/filter.js

@@ -0,0 +1,5 @@
+import { FILTER_EVENT_EVENT_TYPE } from "./models";
+export const filterEvent = {
+  widget: "VPS",
+  typ: FILTER_EVENT_EVENT_TYPE,
+};

package/dist/collection/tracking/index.js

@@ -0,0 +1,13 @@
+import { createTrackingEvent } from "./event";
+import { filterEvent } from "./filter";
+import { vprProductClick, vprProductView, vpsProductClick, vpsProductView, } from "./product";
+import { searchEvent } from "./search";
+import { vprWidget, vpsWidget } from "./widget";
+export const createProductViewVprEvent = createTrackingEvent(vprProductView);
+export const createProductViewVpsEvent = createTrackingEvent(vpsProductView);
+export const createProductClickVprEvent = createTrackingEvent(vprProductClick);
+export const createProductClickVpsEvent = createTrackingEvent(vpsProductClick);
+export const createWidgetVprEvent = createTrackingEvent(vprWidget);
+export const createWidgetVpsEvent = createTrackingEvent(vpsWidget);
+export const createSearchEvent = createTrackingEvent(searchEvent);
+export const createFilterEvent = createTrackingEvent(filterEvent);

package/dist/collection/tracking/models.js

@@ -0,0 +1,6 @@
+const PRODUCT_CLICK_EVENT_TYPE = "product_click_event";
+const PRODUCT_VIEW_EVENT_TYPE = "product_view_event";
+const FILTER_EVENT_EVENT_TYPE = "filter_event";
+const SEARCH_EVENT_EVENT_TYPE = "search_event";
+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, };

package/dist/collection/tracking/product.js

@@ -0,0 +1,18 @@
+import { PRODUCT_VIEW_EVENT_TYPE, PRODUCT_CLICK_EVENT_TYPE, } from "./models";
+const vprProductView = {
+  widget: "VPR",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vpsProductView = {
+  widget: "VPS",
+  typ: PRODUCT_VIEW_EVENT_TYPE,
+};
+const vprProductClick = {
+  widget: "VPR",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+const vpsProductClick = {
+  widget: "VPS",
+  typ: PRODUCT_CLICK_EVENT_TYPE,
+};
+export { vprProductClick, vprProductView, vpsProductClick, vpsProductView };

package/dist/collection/tracking/search.js

@@ -0,0 +1,5 @@
+import { SEARCH_EVENT_EVENT_TYPE } from "./models";
+export const searchEvent = {
+  widget: "VPS",
+  typ: SEARCH_EVENT_EVENT_TYPE,
+};

package/dist/collection/tracking/widget.js

@@ -0,0 +1,10 @@
+import { WIDGET_EVENT_EVENT_TYPE } from "./models";
+const vprWidget = {
+  widget: "VPR",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+const vpsWidget = {
+  widget: "VPS",
+  typ: WIDGET_EVENT_EVENT_TYPE,
+};
+export { vprWidget, vpsWidget };

package/dist/esm/{app-globals-345e497d.js → app-globals-550daa9b.js}

@@ -1,4 +1,4 @@
-import { E as Env } from './index-6fa21e24.js';
+import { E as Env } from './index-c09e56b6.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.

package/dist/esm/cropper-handler.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-6fa21e24.js';
+import { r as registerInstance, h, H as Host } from './index-c09e56b6.js';
 import { q as getCursorValue } from './Handler-639a4cb3.js';
 
 const cropperHandlerCss = ":host{--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);touch-action:none;position:absolute;width:var(--size);z-index:4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.disabled){opacity:0.25}:host(.nw-resize){border-bottom:none;border-right:none;top:0;left:0}:host(.ne-resize){border-left:none;border-bottom:none;right:0;top:0}:host(.sw-resize){border-right:none;border-top:none;left:0;bottom:0}:host(.se-resize){border-left:none;border-top:none;bottom:0;right:0}";

package/dist/esm/{customized-slots-a76a8d41.js → customized-slots-80625933.js}

@@ -1,4 +1,4 @@
-import { h } from './index-6fa21e24.js';
+import { h } from './index-c09e56b6.js';
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",

package/dist/esm/highlight-box_22.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-6fa21e24.js';
-import { O as Option, h as sequenceToOption, i as imageSearchState, a as _function, t as transform, j as move, k as makeRectangularSearchRequest, l as fromAlt, n as foldValueObject, o as scaleWithSized, p as center, q as detectedObjectEq, r as toFile, u as processSelectedFile, E as Either, v as match, w as fromImage, x as dimensionsFromImage, y as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-8eab0da1.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-c09e56b6.js';
+import { O as Option, j as sequenceToOption, i as imageSearchState, a as _function, t as transform, k as move, l as makeRectangularSearchRequest, n as fromAlt, o as foldValueObject, p as scaleWithSized, q as center, r as detectedObjectEq, u as toFile, v as processSelectedFile, E as Either, w as match, x as fromImage, y as dimensionsFromImage, z as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-1268786d.js';
 import { p as pipe, m as pointDiffSemigroup, o as fromMouseEvent } from './Handler-639a4cb3.js';
-import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-8cb063df.js';
-import { s as slotChangeListener } from './customized-slots-a76a8d41.js';
+import { c as CheckIcon, O as OnboardingCard1Icon, d as OnboardingCard2Icon, e as OnboardingCard3Icon, A as ArrowIcon } from './index-1cf740a8.js';
+import { s as slotChangeListener } from './customized-slots-80625933.js';
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -67,6 +67,7 @@ const MIN_SEARCHAREA_SIZE = 40;
 let ImageCropper = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.cropperChanged = createEvent(this, "cropperChanged", 7);
     this.disabled = false;
     this.handleMove = false;
     this.mouseStartPoint = undefined;
@@ -86,18 +87,21 @@ let ImageCropper = class {
     };
     _function.pipe(imageSearchState.searchArea, Option.map((area) => {
       const newSearchArea = transform(area, transformedHandler);
-      if (newSearchArea.width < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.height < MIN_SEARCHAREA_SIZE ||
-        newSearchArea.x < 0 ||
-        newSearchArea.y < 0 ||
-        this.bounds.height - (newSearchArea.y + newSearchArea.height) < 0 ||
-        this.bounds.width - (newSearchArea.x + newSearchArea.width) < 0)
+      if (this.outOfBounds(newSearchArea))
         return;
       imageSearchState.searchArea = Option.some(newSearchArea);
       this.mouseStartPoint = destination;
       imageSearchState.detectedObject = undefined;
     }));
   }
+  outOfBounds(area) {
+    return (area.width < MIN_SEARCHAREA_SIZE ||
+      area.height < MIN_SEARCHAREA_SIZE ||
+      area.x < 0 ||
+      area.y < 0 ||
+      this.bounds.height - (area.y + area.height) < 0 ||
+      this.bounds.width - (area.x + area.width) < 0);
+  }
   handleCropperMove(ev) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -138,6 +142,7 @@ let ImageCropper = class {
     document.removeEventListener("pointerup", this.pointerReleaseListener);
     this.mouseStartPoint = undefined;
     makeRectangularSearchRequest();
+    this.cropperChanged.emit();
   }
   getStyleMap() {
     return _function.pipe(imageSearchState.searchArea, Option.map((rectangle) => {
@@ -170,6 +175,7 @@ const getFilterId = (filter) => filter.href.split("/").reverse()[0];
 let SearchFilters = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.filterSelected = createEvent(this, "filterSelected", 7);
     this.filter = null;
     this.selectedCategoryId = null;
     this.hideFilters = true;
@@ -182,11 +188,13 @@ let SearchFilters = class {
   selectFilter(filter) {
     this.selectedCategoryId = getFilterId(filter);
     imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
   }
   clearSelectedFilter() {
     this.selectedCategoryId = null;
     imageSearchState.activeIonLink = undefined;
     this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
   }
   findSelectedFilter() {
     return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
@@ -231,6 +239,7 @@ const vviinnDetectedObjectCss = ":host{--color-primary-system:#0F62FE;--color-pr
 let VviinnDetectedObject = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.detectedObjectClicked = createEvent(this, "detectedObjectClicked", 7);
     this.position = ["0", "0"];
   }
   getObjectPosition() {
@@ -249,6 +258,7 @@ let VviinnDetectedObject = class {
       imageSearchState.searchArea = Option.some(scaledRect);
     }));
     makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
   }
   isActive() {
     if (!this.detectedObject)

package/dist/esm/{imageSearch.store-8eab0da1.js → imageSearch.store-1268786d.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-6fa21e24.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-c09e56b6.js';
 import { t as tuple, i as isNone$1, l as left$1, r as right$1, a as isLeft$1, b as identity, p as pipe, n as none$1, s as some$1, f as first, c as flow, d as struct, e as last, g as pointSumSemigroup, H as HandlerDirection, h as fromRectangle, j as isSome, k as fromRectangle$1 } from './Handler-639a4cb3.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -10156,15 +10156,17 @@ const createStore = (defaultState, shouldUpdate) => {
     return map;
 };
 
-const store = createStore({
-  fallbackStyles: "",
-  pricePrefix: null,
-  currencySign: null,
-  apiPath: undefined,
-  locale: "de-DE",
+const trackingStore = {
+  trackingEnabled: true,
+};
+
+const { state: state$1, onChange: onChange$1 } = createStore(Object.assign({ fallbackStyles: "", pricePrefix: null, currencySign: null, apiPath: null, token: null, locale: "de-DE" }, trackingStore));
+onChange$1("apiPath", (val) => {
+  console.log("apiPathChanged", val);
+});
+onChange$1("token", (val) => {
+  console.log("tokenChanged", val);
 });
-const state$1 = store.state;
-const state$2 = store.state;
 
 function ap$4(F, G) {
     return function (fa) { return function (fab) {
@@ -15163,4 +15165,4 @@ const processSelectedFile = async (file) => {
   return session;
 };
 
-export { Apply as A, Either as E, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T, _Array as _, _function as a, createInitGetRequest as b, chainW as c, sequenceT as d, state$1 as e, fromEither as f, getApiPath as g, sequenceToOption as h, imageSearchState as i, move as j, makeRectangularSearchRequest as k, fromAlt as l, makeRequest as m, foldValueObject as n, scaleWithSized as o, center as p, detectedObjectEq as q, toFile as r, state$2 as s, transform as t, processSelectedFile as u, match as v, fromImage as w, dimensionsFromImage as x, scaleByLargestSide as y };
+export { Apply as A, Either as E, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T, _Array as _, _function as a, createInitGetRequest as b, chainW as c, sequenceT as d, commonjsGlobal as e, fromEither as f, getApiPath as g, createCommonjsModule as h, imageSearchState as i, sequenceToOption as j, move as k, makeRectangularSearchRequest as l, makeRequest as m, fromAlt as n, foldValueObject as o, scaleWithSized as p, center as q, detectedObjectEq as r, state$1 as s, transform as t, toFile as u, processSelectedFile as v, match as w, fromImage as x, dimensionsFromImage as y, scaleByLargestSide as z };

package/dist/esm/{index-8cb063df.js → index-1cf740a8.js}

@@ -1,11 +1,9 @@
-import { h } from './index-6fa21e24.js';
+import { h } from './index-c09e56b6.js';
 
 const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
-const CameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none" },
-  h("defs", null),
-  h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M9.771 3.89a.875.875 0 01.728-.39h7c.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.25A2.625 2.625 0 012.625 21V8.75A2.625 2.625 0 015.25 6.125h3.031l1.49-2.235zm1.197 1.36l-1.49 2.235a.875.875 0 01-.729.39H5.25a.875.875 0 00-.875.875V21a.875.875 0 00.875.875h17.5a.875.875 0 00.875-.875V8.75a.875.875 0 00-.875-.875h-3.5a.875.875 0 01-.729-.39l-1.49-2.235h-6.063z", "clip-rule": "evenodd" }),
-  h("path", { fill: "#525252", "fill-rule": "evenodd", d: "M14 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" })));
+const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
 const OnboardingCard1Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", fill: "none" },
   h("defs", null),
   h("path", { fill: "#393939", d: "M74.55 20a5.06 5.06 0 014.14 2l4.72 9.32.1.18.11.17A5.07 5.07 0 0087.93 34h13.87c5.07 0 9.2 3.59 9.2 8v50c0 4.41-4.13 8-9.2 8H18.2c-5.07 0-9.2-3.59-9.2-8V42c0-4.41 4.13-8 9.2-8h13.87a5.072 5.072 0 004.31-2.34l.11-.17.1-.18L41.31 22a5.06 5.06 0 014.14-2h29.1zm0-4h-29.1a9 9 0 00-7.6 4L33 29.5a1.13 1.13 0 01-1 .5H18.2C10.91 30 5 35.37 5 42v50c0 6.63 5.91 12 13.2 12h83.6c7.29 0 13.2-5.37 13.2-12V42c0-6.63-5.91-12-13.2-12H87.93a1.13 1.13 0 01-1-.5L82.15 20a9 9 0 00-7.6-4z" }),
@@ -21,11 +19,11 @@ const OnboardingCard3Icon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg
   h("path", { class: "colored", d: "M100 7.94H20a12 12 0 00-12 12v80a11.998 11.998 0 0012 12h80c3.183 0 6.235-1.264 8.485-3.515A11.996 11.996 0 00112 99.94v-80a11.998 11.998 0 00-12-12zm-8 69.24a1.69 1.69 0 01-.85 1.45l-30.31 17.1a1.77 1.77 0 01-1.67 0l-30.32-17.1a1.689 1.689 0 01-.85-1.45V42.82a1.66 1.66 0 01.85-1.45l30.32-17.21a1.71 1.71 0 011.67 0l30.31 17.21a1.67 1.67 0 01.85 1.45v34.36z" })));
 const CheckIcon = () => (h("svg", { width: "14", height: "11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M5 10.414 0 5.413 1.413 4 5 7.586 12.585 0 14 1.415l-9 8.999Z", fill: "var(--color-primary, var(--color-primary-system))" })));
-const ChevronIcon = () => (h("svg", { width: "9", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z", fill: "#525252" })));
-const VisualSearchIcon = () => (h("svg", { width: "22", height: "22", xmlns: "http://www.w3.org/2000/svg" },
-  h("path", { d: "M18 0h-3v2h3c1.103 0 2 .897 2 2v3h2V4c0-2.206-1.794-4-4-4Zm2 18c0 1.103-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4v-3h-2v3ZM2 18v-3H0v3c0 2.206 1.794 4 4 4h3v-2H4c-1.103 0-2-.897-2-2ZM2 4c0-1.103.897-2 2-2h3V0H4C1.794 0 0 1.794 0 4v3h2V4Zm6 6.5C8 9.122 9.122 8 10.5 8S13 9.122 13 10.5 11.878 13 10.5 13A2.503 2.503 0 0 1 8 10.5Zm7.5 6.5a1.503 1.503 0 0 0 1.061-2.561l-2.012-2.011c.293-.6.448-1.26.451-1.928C15 8.019 12.981 6 10.5 6A4.505 4.505 0 0 0 6 10.5c0 2.481 2.019 4.5 4.5 4.5.693 0 1.341-.17 1.928-.451l2.011 2.012c.293.293.677.439 1.061.439Z" })));
+const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+const VisualSearchIcon = () => (h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
 const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
 
-export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CrossIcon as a, CameraIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };
+export { ArrowIcon as A, ChevronIcon as C, OnboardingCard1Icon as O, VisualSearchIcon as V, CameraIcon as a, CrossIcon as b, CheckIcon as c, OnboardingCard2Icon as d, OnboardingCard3Icon as e };

package/dist/esm/{index-6fa21e24.js → index-c09e56b6.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'vviinn-widgets';
-const Env = /* vviinn-widgets */ {"packageVersion":"2.2.2","packageName":"vviinn-widgets","environment":"local"};
+const Env = /* vviinn-widgets */ {"packageVersion":"2.3.1","packageName":"vviinn-widgets","environment":"local"};
 
 let scopeId;
 let hostTagName;