vviinn-widgets 2.52.1 → 2.52.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{customized-slots-4810e5e0.js → customized-slots-e1ef7a7f.js} +0 -1
- package/dist/cjs/{package-06c07b1d.js → package-38b79bf5.js} +1 -1
- package/dist/cjs/search-filters_17.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-carousel_4.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +2 -2
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +2 -2
- package/dist/collection/components/customized-slots.js +0 -1
- package/dist/collection/components/vviinn-vpr-button/stories/args.js +1 -1
- package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js +26 -1
- package/dist/collection/components/vviinn-vpr-widget/vviinn-vpr-widget.js +2 -1
- package/dist/collection/components/vviinn-vps-button/vviinn-vps-button.js +0 -1
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +11 -13
- package/dist/esm/{customized-slots-65951538.js → customized-slots-43165d07.js} +0 -1
- package/dist/esm/{package-a322d9df.js → package-5de24438.js} +1 -1
- package/dist/esm/search-filters_17.entry.js +1 -1
- package/dist/esm/vviinn-carousel_4.entry.js +2 -2
- package/dist/esm/vviinn-vpr-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-button.entry.js +2 -2
- package/dist/esm/vviinn-vps-widget.entry.js +2 -2
- package/dist/types/components/vviinn-vpr-button/vviinn-vpr-button.d.ts +26 -1
- package/dist/types/components/vviinn-vpr-widget/vviinn-vpr-widget.d.ts +2 -1
- package/dist/types/components/vviinn-vps-button/vviinn-vps-button.d.ts +0 -1
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +11 -13
- package/dist/vviinn-widgets/{p-0048f34c.entry.js → p-37f5587c.entry.js} +1 -1
- package/dist/vviinn-widgets/p-55127f61.js +1 -0
- package/dist/vviinn-widgets/{p-320f7424.entry.js → p-5a0d8b77.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-91485430.entry.js → p-5ecd801a.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-ff13e054.entry.js → p-831589c9.entry.js} +1 -1
- package/dist/vviinn-widgets/p-b45cbf79.js +1 -0
- package/dist/vviinn-widgets/{p-1268a57c.entry.js → p-d932c41e.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-0048f34c.entry.js → p-37f5587c.entry.js} +1 -1
- package/www/build/p-55127f61.js +1 -0
- package/www/build/{p-320f7424.entry.js → p-5a0d8b77.entry.js} +1 -1
- package/www/build/{p-91485430.entry.js → p-5ecd801a.entry.js} +1 -1
- package/www/build/{p-ff13e054.entry.js → p-831589c9.entry.js} +1 -1
- package/www/build/p-b45cbf79.js +1 -0
- package/www/build/{p-1268a57c.entry.js → p-d932c41e.entry.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-91891157.js +0 -1
- package/dist/vviinn-widgets/p-b7452598.js +0 -1
- package/www/build/p-91891157.js +0 -1
- package/www/build/p-b7452598.js +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
6
|
const search_store = require('./search.store-7605f369.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
|
-
const customizedSlots = require('./customized-slots-
|
|
8
|
+
const customizedSlots = require('./customized-slots-e1ef7a7f.js');
|
|
9
9
|
const PlusIcon = require('./PlusIcon-5e585127.js');
|
|
10
10
|
|
|
11
11
|
const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -6,8 +6,8 @@ const index = require('./index-5619b5ec.js');
|
|
|
6
6
|
const search_store = require('./search.store-7605f369.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
8
|
const PlusIcon = require('./PlusIcon-5e585127.js');
|
|
9
|
-
const customizedSlots = require('./customized-slots-
|
|
10
|
-
const _package = require('./package-
|
|
9
|
+
const customizedSlots = require('./customized-slots-e1ef7a7f.js');
|
|
10
|
+
const _package = require('./package-38b79bf5.js');
|
|
11
11
|
const resources = require('./resources-98e3c0b2.js');
|
|
12
12
|
|
|
13
13
|
const BasketIcon = () => (index.h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
|
-
const _package = require('./package-
|
|
6
|
+
const _package = require('./package-38b79bf5.js');
|
|
7
7
|
const VisualSearchIcon = require('./VisualSearchIcon-1180d079.js');
|
|
8
8
|
|
|
9
9
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
|
-
const _package = require('./package-
|
|
7
|
-
const customizedSlots = require('./customized-slots-
|
|
6
|
+
const _package = require('./package-38b79bf5.js');
|
|
7
|
+
const customizedSlots = require('./customized-slots-e1ef7a7f.js');
|
|
8
8
|
const constants = require('./constants-7684cbfc.js');
|
|
9
9
|
|
|
10
10
|
const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-5619b5ec.js');
|
|
6
6
|
const search_store = require('./search.store-7605f369.js');
|
|
7
7
|
const i18next = require('./i18next-74ff3413.js');
|
|
8
|
-
const _package = require('./package-
|
|
9
|
-
const customizedSlots = require('./customized-slots-
|
|
8
|
+
const _package = require('./package-38b79bf5.js');
|
|
9
|
+
const customizedSlots = require('./customized-slots-e1ef7a7f.js');
|
|
10
10
|
const resources = require('./resources-98e3c0b2.js');
|
|
11
11
|
const constants = require('./constants-7684cbfc.js');
|
|
12
12
|
|
|
@@ -2,9 +2,34 @@ import { Host, h, } from "@stencil/core";
|
|
|
2
2
|
import { version } from "../../../package.json";
|
|
3
3
|
import { VisualSearchIcon } from "../vviinn-icons";
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
5
|
* @part button - Clickable button element.
|
|
7
6
|
* @part vviinn-button - Button element container.
|
|
7
|
+
* @part product-card - Product Card itself.
|
|
8
|
+
* @part product-part - Will be deprecated. Use "product-card" instead.
|
|
9
|
+
* @part title - Title inside Product Card.
|
|
10
|
+
* @part brand - Brand inside Product Card.
|
|
11
|
+
* @part currency - Currency related to price.
|
|
12
|
+
* @part image - Product Card image.
|
|
13
|
+
* @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
|
|
14
|
+
* @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
|
|
15
|
+
* @part price-amount-sale - Numeric part of the price.
|
|
16
|
+
* @part price-amount-outdated - Numeric part of the price.
|
|
17
|
+
* @part price-amount-regular - Numeric part of the price.
|
|
18
|
+
* @part price-container - Block of prices.
|
|
19
|
+
* @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
|
|
20
|
+
* @part price-regular - Block for a price if no sale price is presented.
|
|
21
|
+
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
22
|
+
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
23
|
+
* @part carousel-button - Button for carousel navigation.
|
|
24
|
+
* @part recommendations-grid - For internal usage only!
|
|
25
|
+
* @part recommendations-title - Title of the recommendations grid.
|
|
26
|
+
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
27
|
+
* @part basket-button - Add to Basket button.
|
|
28
|
+
* @part update-button-top - Update Button on the top (Set mode).
|
|
29
|
+
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
30
|
+
*
|
|
31
|
+
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
32
|
+
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
8
33
|
*/
|
|
9
34
|
export class VviinnVprButton {
|
|
10
35
|
constructor() {
|
|
@@ -56,8 +56,9 @@ import { UpdateIcon } from "../vviinn-icons";
|
|
|
56
56
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
57
57
|
*
|
|
58
58
|
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
59
|
-
* @slot vviinn-recommendations-subtitle - Recommendations subtitle text.
|
|
59
|
+
* @slot vviinn-recommendations-subtitle - Recommendations subtitle text (Set mode).
|
|
60
60
|
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
61
|
+
* @slot vviinn-basket-button-icon - Text of Add to Basket icon (Set mode).
|
|
61
62
|
* @slot vviinn-update-button-icon - Icon of Update Button (Set mode).
|
|
62
63
|
* @slot vviinn-update-button-text - Text of Update Button on the top (Set mode).
|
|
63
64
|
*/
|
|
@@ -8,7 +8,6 @@ import { DEFAULT_EXAMPLE_IMAGE } from "../../assets/constants";
|
|
|
8
8
|
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
9
9
|
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
10
10
|
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
11
|
-
* @slot vviinn-show-files-button-text - Title of Show Files Button.
|
|
12
11
|
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
13
12
|
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
14
13
|
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
@@ -30,6 +30,17 @@ import { videoStreamSettings } from "../../video/settings";
|
|
|
30
30
|
import { checkDeviceType } from "../../helpers";
|
|
31
31
|
const CAMERA_START_DELAY = 500;
|
|
32
32
|
/**
|
|
33
|
+
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
34
|
+
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
35
|
+
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
36
|
+
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
37
|
+
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
38
|
+
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
39
|
+
* @slot vviinn-camera-capture-text - Text above the Camera Capture button.
|
|
40
|
+
* @slot vviinn-text-search-icon - Icon of text search block.
|
|
41
|
+
* @slot vviinn-privacy-badge-text - Text content of privacy notification block.
|
|
42
|
+
* @slot vviinn-image-search-modal-title - Image search modal title.
|
|
43
|
+
*
|
|
33
44
|
* @part close-button - Close Button in the modal's header.
|
|
34
45
|
* @part secondary-action - Back Button in the modal's header.
|
|
35
46
|
* @part title - Modal window title.
|
|
@@ -52,19 +63,6 @@ const CAMERA_START_DELAY = 500;
|
|
|
52
63
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
53
64
|
* @part title - Title inside Product Card.
|
|
54
65
|
* @part text-search-input - Text search input.
|
|
55
|
-
|
|
56
|
-
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
57
|
-
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
58
|
-
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
59
|
-
* @slot vviinn-show-files-button-text - Title of Show Files Button.
|
|
60
|
-
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
61
|
-
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
62
|
-
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
63
|
-
* @slot vviinn-camera-capture-text - Text above the Camera Capture button.
|
|
64
|
-
* @slot vviinn-privacy-badge-text - Text content of privacy notification block.
|
|
65
|
-
* @slot vviinn-image-search-modal-title - Image search modal title.
|
|
66
|
-
* @slot vviinn-text-search-icon - Icon of text search block.
|
|
67
|
-
*
|
|
68
66
|
*/
|
|
69
67
|
export class VviinnVpsWidget {
|
|
70
68
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
2
|
import { s as searchState, _ as _function, O as Option, q as fromAlt, r as foldValueObject, u as scaleWithSized, v as center, w as makeRectangularSearchRequest, x as detectedObjectEq, y as toFile, z as processSelectedFile, E as Either, B as match, o as createCommonjsModule, n as commonjsGlobal, C as sequenceToOption, D as fromImage, F as dimensionsFromImage, G as scaleByLargestSide, N as NonEmptyArray, H as processSelectedText } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
|
-
import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-
|
|
4
|
+
import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-43165d07.js';
|
|
5
5
|
import { P as PlusIcon } from './PlusIcon-af795e23.js';
|
|
6
6
|
|
|
7
7
|
const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -2,8 +2,8 @@ import { h, r as registerInstance, H as Host, g as getElement, c as createEvent,
|
|
|
2
2
|
import { _ as _function, a as _Array, O as Option, S as Semigroup, h as has, t as tuple, E as Either, s as searchState, b as state, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, d as createInitGetRequest, A as Apply, e as map, i as match, j as arrayToQueryString, k as parseExcluded, T as TaskEither, l as checkEmpryString } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
4
|
import { P as PlusIcon } from './PlusIcon-af795e23.js';
|
|
5
|
-
import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-
|
|
6
|
-
import { v as version } from './package-
|
|
5
|
+
import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-43165d07.js';
|
|
6
|
+
import { v as version } from './package-5de24438.js';
|
|
7
7
|
import { v as v4, c as createTrackingApi, r as resources, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './resources-c0029912.js';
|
|
8
8
|
|
|
9
9
|
const BasketIcon = () => (h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { v as version } from './package-
|
|
2
|
+
import { v as version } from './package-5de24438.js';
|
|
3
3
|
import { V as VisualSearchIcon } from './VisualSearchIcon-13f7da6a.js';
|
|
4
4
|
|
|
5
5
|
const vviinnVprButtonCss = ":host{display:block}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
|
-
import { v as version } from './package-
|
|
3
|
-
import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-
|
|
2
|
+
import { v as version } from './package-5de24438.js';
|
|
3
|
+
import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-43165d07.js';
|
|
4
4
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
5
5
|
|
|
6
6
|
const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
|
|
2
2
|
import { s as searchState, b as state, k as parseExcluded, O as Option } from './search.store-44630818.js';
|
|
3
3
|
import { i as instance } from './i18next-387f2b0a.js';
|
|
4
|
-
import { v as version } from './package-
|
|
5
|
-
import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-
|
|
4
|
+
import { v as version } from './package-5de24438.js';
|
|
5
|
+
import { c as campaignTypeNames, s as slotChangeListener, S as SlotSkeleton } from './customized-slots-43165d07.js';
|
|
6
6
|
import { j as createSearchEvent, k as createFilterEvent, v as v4, c as createTrackingApi, r as resources, l as createWidgetVpsEvent, m as createProductVpsEventByType, n as createResultVpsEventByType } from './resources-c0029912.js';
|
|
7
7
|
import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
|
|
8
8
|
|
|
@@ -4,9 +4,34 @@ import { CampaignName } from "../../campaign/Campaign";
|
|
|
4
4
|
import { BasicEventData, ProductCardEventData } from "../../recommendation/events";
|
|
5
5
|
import { Locale } from "../../locale";
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
7
|
* @part button - Clickable button element.
|
|
9
8
|
* @part vviinn-button - Button element container.
|
|
9
|
+
* @part product-card - Product Card itself.
|
|
10
|
+
* @part product-part - Will be deprecated. Use "product-card" instead.
|
|
11
|
+
* @part title - Title inside Product Card.
|
|
12
|
+
* @part brand - Brand inside Product Card.
|
|
13
|
+
* @part currency - Currency related to price.
|
|
14
|
+
* @part image - Product Card image.
|
|
15
|
+
* @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
|
|
16
|
+
* @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
|
|
17
|
+
* @part price-amount-sale - Numeric part of the price.
|
|
18
|
+
* @part price-amount-outdated - Numeric part of the price.
|
|
19
|
+
* @part price-amount-regular - Numeric part of the price.
|
|
20
|
+
* @part price-container - Block of prices.
|
|
21
|
+
* @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
|
|
22
|
+
* @part price-regular - Block for a price if no sale price is presented.
|
|
23
|
+
* @part price-sale - Block for sale price. Rendered only if the sale price is presented.
|
|
24
|
+
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
25
|
+
* @part carousel-button - Button for carousel navigation.
|
|
26
|
+
* @part recommendations-grid - For internal usage only!
|
|
27
|
+
* @part recommendations-title - Title of the recommendations grid.
|
|
28
|
+
* @part recommendations-subtitle - Subtitle of the recommendations grid.
|
|
29
|
+
* @part basket-button - Add to Basket button.
|
|
30
|
+
* @part update-button-top - Update Button on the top (Set mode).
|
|
31
|
+
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
32
|
+
*
|
|
33
|
+
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
34
|
+
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
10
35
|
*/
|
|
11
36
|
export declare class VviinnVprButton {
|
|
12
37
|
el: HTMLElement;
|
|
@@ -32,8 +32,9 @@ export type UpdateButtonLocation = "onTop" | "onItem" | "topAndItem";
|
|
|
32
32
|
* @part update-button-item - Update Button inside the Product Card (Set mode).
|
|
33
33
|
*
|
|
34
34
|
* @slot vviinn-recommendations-title - Recommendations title text.
|
|
35
|
-
* @slot vviinn-recommendations-subtitle - Recommendations subtitle text.
|
|
35
|
+
* @slot vviinn-recommendations-subtitle - Recommendations subtitle text (Set mode).
|
|
36
36
|
* @slot vviinn-basket-button-text - Text of Add to Basket button.
|
|
37
|
+
* @slot vviinn-basket-button-icon - Text of Add to Basket icon (Set mode).
|
|
37
38
|
* @slot vviinn-update-button-icon - Icon of Update Button (Set mode).
|
|
38
39
|
* @slot vviinn-update-button-text - Text of Update Button on the top (Set mode).
|
|
39
40
|
*/
|
|
@@ -5,7 +5,6 @@ import { Locale } from "../../locale";
|
|
|
5
5
|
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
6
6
|
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
7
7
|
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
8
|
-
* @slot vviinn-show-files-button-text - Title of Show Files Button.
|
|
9
8
|
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
10
9
|
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
11
10
|
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
@@ -5,6 +5,17 @@ import { Locale } from "../../locale";
|
|
|
5
5
|
import { Recommendation } from "../..";
|
|
6
6
|
type UploadSource = "uploadPhoto" | "startCamera";
|
|
7
7
|
/**
|
|
8
|
+
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
9
|
+
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
10
|
+
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
11
|
+
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
12
|
+
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
13
|
+
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
14
|
+
* @slot vviinn-camera-capture-text - Text above the Camera Capture button.
|
|
15
|
+
* @slot vviinn-text-search-icon - Icon of text search block.
|
|
16
|
+
* @slot vviinn-privacy-badge-text - Text content of privacy notification block.
|
|
17
|
+
* @slot vviinn-image-search-modal-title - Image search modal title.
|
|
18
|
+
*
|
|
8
19
|
* @part close-button - Close Button in the modal's header.
|
|
9
20
|
* @part secondary-action - Back Button in the modal's header.
|
|
10
21
|
* @part title - Modal window title.
|
|
@@ -27,19 +38,6 @@ type UploadSource = "uploadPhoto" | "startCamera";
|
|
|
27
38
|
* @part price-prefix - Block rendered before each price element (for ex. "from").
|
|
28
39
|
* @part title - Title inside Product Card.
|
|
29
40
|
* @part text-search-input - Text search input.
|
|
30
|
-
|
|
31
|
-
* @slot vviinn-teaser-text - Text on widget's main screen.
|
|
32
|
-
* @slot vviinn-image-upload-button-text - Title of Upload Button.
|
|
33
|
-
* @slot vviinn-image-upload-icon - Icon of Upload Button.
|
|
34
|
-
* @slot vviinn-show-files-button-text - Title of Show Files Button.
|
|
35
|
-
* @slot vviinn-camera-button-text-start - Title of Start Camera button.
|
|
36
|
-
* @slot vviinn-camera-button-text-stop - Title of Stop Camera button (for Desktop).
|
|
37
|
-
* @slot vviinn-camera-icon - Icon of Camera Button.
|
|
38
|
-
* @slot vviinn-camera-capture-text - Text above the Camera Capture button.
|
|
39
|
-
* @slot vviinn-privacy-badge-text - Text content of privacy notification block.
|
|
40
|
-
* @slot vviinn-image-search-modal-title - Image search modal title.
|
|
41
|
-
* @slot vviinn-text-search-icon - Icon of text search block.
|
|
42
|
-
*
|
|
43
41
|
*/
|
|
44
42
|
export declare class VviinnVpsWidget {
|
|
45
43
|
el: HTMLElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as t,r as i,c as e,H as n,g as o}from"./p-1e83e6ba.js";import{s,_ as r,O as a,q as h,r as c,u as l,v as d,w as p,x as u,y as v,z as f,E as m,B as g,o as b,n as w,C as x,D as y,F as C,G as k,N as M,H as j}from"./p-1c1be428.js";import{i as z}from"./p-2e76a5c3.js";import{s as O,c as E}from"./p-91891157.js";import{P as L}from"./p-ff8db3d2.js";const N=()=>t("svg",{width:"12",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z"})),S=()=>t("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M8.00001 17.3333C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H8.00001Z",fill:"currentColor"})),T=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"80",height:"80",viewBox:"0 0 80 80",fill:"none"},t("circle",{cx:"40",cy:"40",r:"36",fill:"white"}),t("circle",{cx:"40",cy:"40",r:"39",fill:"white","fill-opacity":"0.16",stroke:"white","stroke-width":"2"}),t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z",fill:"#161616"})),D=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z",fill:"currentColor"})),A=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z",fill:"#525252"}),t("path",{d:"M14 12C14 9.24 11.76 7 9 7C6.24 7 4 9.24 4 12C4 14.76 6.24 17 9 17C10.02 17 10.96 16.69 11.75 16.17L16.29 20.71L17.7 19.3L13.16 14.76C13.68 13.97 13.99 13.02 13.99 12.01L14 12ZM9 15C7.35 15 6 13.65 6 12C6 10.35 7.35 9 9 9C10.65 9 12 10.35 12 12C12 13.65 10.65 15 9 15Z",fill:"#525252"})),B=()=>t("svg",{slot:"icon",class:"icon",width:"32",height:"32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z",fill:"#525252"}),t("path",{d:"M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z",fill:"#525252"})),H=({className:i})=>t("svg",{width:"30",height:"30",viewBox:"0 0 30 30",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:i},t("path",{d:"M29 1H17C8.16344 1 1 8.16344 1 17V29",stroke:"white","stroke-width":"2","stroke-linecap":"square"}));const _=(t,i)=>{var e;if(!t)return"";const n={};return t.href.split("?")[1].split("included[]=").join("").split("&").forEach((t=>{const[i,e]=t.split("%3A");n[i]=e})),"categories"===i?null!==(e=n.product_type)&&void 0!==e?e:n.google_product_category:n[i]},F=class{constructor(t){i(this,t),this.vviinnSelectFilter=e(this,"vviinnSelectFilter",7),this.filterType=this.filter.name,this.filter=null,this.basicEventData=void 0,this.selectedFilter="",this.hideFilters=!0}isCategoriesFilterType(){return"categories"===this.filterType}getFilterKind(){return this.isCategoriesFilterType()?"category":this.filterType}handleFilterSelection(t){return this.isFilterSelected(t)?this.clearSelectedFilter(t):this.selectFilter(t)}selectFilter(t){s.activeIonLink=t,this.selectedFilter=_(t,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"select",kind:this.getFilterKind()}))}clearSelectedFilter(t){s.activeIonLink=t.clear,this.selectedFilter=_(t.clear,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"deselect",kind:this.getFilterKind()}))}toggleFilters(){this.hideFilters=!this.hideFilters}handleEnter(t,i){"Enter"===t.key&&this.handleFilterSelection(i)}isFilterSelected(t){return this.isCategoriesFilterType()?this.selectedFilter===_(t,"categories"):this.selectedFilter===t.name}render(){if(!this.filter)return null;const{name:i,filters:e}=this.filter;return t(n,{exportparts:"filter, show-more-filters"},t("div",{class:{filters:!0,"no-scrollbar-mobile":this.isCategoriesFilterType(),"no-scrollbar":!this.isCategoriesFilterType()}},e.filter(((t,i)=>!this.hideFilters||i<5)).map(((e,n)=>{const o="categories"===i?this.selectedFilter===_(e,"categories"):this.selectedFilter===e.name;return t("div",{role:"button",tabindex:"0",key:n,part:o?"filter active":"filter",class:{filter:!0,active:o},style:{"animation-delay":10*n+"ms"},onPointerUp:t=>{s.loading||(t.stopPropagation(),this.handleFilterSelection(e))},onKeyPress:t=>{s.loading||this.handleEnter(t,e)}},e.name)})),this.hideFilters&&t("div",{class:{"show-more":!0,hidden:e.length<=5,active:!this.hideFilters},role:"button",tabindex:"0","aria-role":"button",onClick:()=>{setTimeout((()=>this.toggleFilters()),300)},onKeyPress:t=>{"Enter"===t.key&&this.toggleFilters()},part:"show-more-filters"})))}get el(){return o(this)}};F.style=".filters{display:flex;flex-direction:row;overflow-x:auto;padding:0 12px 12px 24px}.filter{align-items:center;color:#525252;cursor:pointer;display:flex;margin-right:12px;height:-moz-max-content;height:max-content;min-width:-moz-max-content;min-width:max-content;transition-property:background;transition-duration:0.5s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px 12px}.show-more{display:flex}.show-more.hidden{display:none !important}.show-more::after{position:relative;content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;transform:rotate(-90deg);left:2px}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 768px){.filters{padding-right:54px;padding-bottom:0}}@media (max-width: 640px){.no-scrollbar-mobile{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar-mobile::-webkit-scrollbar{display:none}}";const W=class{constructor(t){i(this,t),this.vviinnSelectObject=e(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.basicEventData=void 0,this.position=["0","0"]}getObjectPosition(){return r.pipe(s.imageBounds,a.map((t=>{const i=h(c(this.detectedObject).rectangle),{x:e,y:n}=r.pipe(i,l(t),d);return[`${e}px`,`${n}px`]})),a.getOrElse((()=>["0","0"])))}selectDetectedObject(){r.pipe(s.imageBounds,a.map((t=>{const i=c(this.detectedObject).rectangle,e=h(i),n=l(t)(e);s.detectedObject=this.detectedObject,s.searchArea=a.some(n)}))),p(),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject}))}isActive(){if(!this.detectedObject)return!1;if(!s.detectedObject)return!1;const t=c(this.detectedObject),i=c(s.detectedObject);return u.equals(t,i)}render(){return t(n,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};W.style=':host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:"";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}';const I=class{constructor(t){i(this,t),this.handler=void 0}render(){return t(n,null,t("vviinn-error",null,t(B,null),t("h4",{slot:"title"},z.t("emptyResultsBlock.title")),"image"===s.searchType&&t("button",{slot:"action",onClick:this.handler},z.t("emptyResultsBlock.button"))))}},R=class{constructor(t){i(this,t),this.vviinnImageUpload=e(this,"vviinnImageUpload",7),this.vviinnNoResult=e(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=e(this,"vviinnImageUploadFinished",7),this.vviinnCameraEnabled=e(this,"vviinnCameraEnabled",7),this.videoTrack=null,this.initializeZoom=async()=>{var t;if(!this.videoTrack)return;const i=(null===(t=this.videoTrack)||void 0===t?void 0:t.getCapabilities)?this.videoTrack.getCapabilities():{};"zoom"in i&&(this.zoomCapabilities=i.zoom,await this.videoTrack.applyConstraints({advanced:[{zoom:this.zoomCapabilities.min}]}))},this.onZoom=async t=>{var i;if(!this.videoTrack||!this.zoomCapabilities)return;const{max:e,min:n}=this.zoomCapabilities,o=null!==(i=this.videoTrack.getSettings().zoom)&&void 0!==i?i:n,s=Math.round((e-n)/3*10)/10;let r;r="in"===t?o+s:o-s,r<n&&(r=n),r>e&&(r=e),await this.videoTrack.applyConstraints({advanced:[{zoom:r}]})},this.exampleImageSource=void 0,this.width=0,this.height=0,this.basicEventData=void 0,this.srcObject=void 0,this.cameraButtonClicked=!1,this.selected=!1,this.videoInitialized=!1,this.zoomCapabilities=null}componentWillLoad(){O(this,this.el)}componentDidLoad(){this.videoElement=this.el.shadowRoot.getElementById("camera-preview")}createPlaceholderImageCanvas(){const t=this.el.shadowRoot.getElementById("captured-image-placeholder"),i=this.videoElement,{videoWidth:e,videoHeight:n}=i,o=document.createElement("canvas");o.width=e,o.height=n,o.getContext("2d").drawImage(i,0,0,o.width,o.height);const s=o.toDataURL("image/jpeg");t.src=s}async selectImage(){if(!this.srcObject)return;let t;this.vviinnImageUpload.emit(this.basicEventData);const i=this.el.shadowRoot.getElementById("photo-frame"),e=this.videoElement,n=i.getBoundingClientRect(),o=e.getBoundingClientRect(),{videoWidth:s,videoHeight:a}=e,h=document.createElement("canvas");this.selected=!0,this.videoElement.pause(),this.createPlaceholderImageCanvas();const c=s/o.width,l=a/o.height,d=Math.min(n.width*c,n.height*l);h.width=d,h.height=d;const p=(n.left-o.left+(n.width-d/c)/2)*c,u=(n.top-o.top+(n.height-d/l)/2)*l;h.getContext("2d").drawImage(e,p,u,d,d,0,0,h.width,h.height);const g=h.toDataURL("image/jpeg");t=await v(g),r.pipe(await f(t),m.match((()=>this.vviinnNoResult.emit(this.basicEventData)),(()=>this.vviinnImageUploadFinished.emit()))),this.selected=!1,this.videoInitialized=!1,this.vviinnCameraEnabled.emit(!1)}handleKeyPress({key:t}){"Enter"!==t&&" "!==t||this.selectImage()}handleSrcObjectChange(){this.srcObject?(this.videoElement.srcObject=this.srcObject,this.videoTrack=this.srcObject.getVideoTracks()[0],this.initializeZoom(),this.videoElement.onloadedmetadata=()=>{this.vviinnCameraEnabled.emit(!0),this.videoInitialized=!0}):this.videoInitialized=!1}render(){return t(n,{onKeyUp:t=>this.handleKeyPress(t),class:{"video-expanded":this.cameraButtonClicked}},t("video",{id:"camera-preview",class:{hidden:!this.videoInitialized||this.selected},autoplay:!0,playsinline:!0,muted:!0}),t("img",{src:this.exampleImageSource,width:this.width,height:this.height,tabindex:1,class:{hidden:this.videoInitialized||this.selected}}),t("img",{id:"captured-image-placeholder",class:{hidden:!this.selected}}),t("div",{class:{container:!0,hidden:!this.videoInitialized}},t("div",{class:"photo-frame-container"},t("div",{id:"photo-frame"},t(H,{className:"photo-frame-corner top-left"}),t(H,{className:"photo-frame-corner top-right"}),t(H,{className:"photo-frame-corner bottom-left"}),t(H,{className:"photo-frame-corner bottom-right"})),t("div",{class:{"zoom-buttons":!0,hidden:!this.zoomCapabilities}},t("button",{onClick:()=>this.onZoom("out")},t(S,null)),t("button",{onClick:()=>this.onZoom("in")},t(L,null)))),t("div",{class:"buttons-group"},t("div",{class:"buttons-group-info"},t("slot",{name:"vviinn-camera-capture-text"},z.t("cameraCaptureText"))),t("button",{class:"photo-button",onClick:()=>this.selectImage()},t(T,null)))))}get el(){return o(this)}static get watchers(){return{srcObject:["handleSrcObjectChange"]}}};R.style=":host{display:block;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;flex-grow:1;transition:min-height 1s}:host(.video-expanded){min-height:100%;transition:min-height 0.8s}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}#camera-preview{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;position:relative}#captured-image-placeholder{height:auto}.container{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;flex-direction:column;gap:12px;padding:64px 0 164px;justify-content:center;align-content:center;box-sizing:border-box}.photo-frame-container{width:100%;height:100%;display:flex;flex-direction:column;gap:12px}#photo-frame{position:relative;aspect-ratio:1/1;border-radius:16px;box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.32);width:100%;height:auto;max-width:400px;margin:0 auto}@media (max-width: 960px){.photo-frame-container{width:auto;height:auto}#photo-frame{max-width:80%;height:auto}}@media (max-width: 380px){#photo-frame{max-width:70%}}.photo-frame-corner{position:absolute;--delta:-1px}.photo-frame-corner.top-left{top:var(--delta);left:var(--delta)}.photo-frame-corner.top-right{top:var(--delta);right:var(--delta);transform:rotate(90deg)}.photo-frame-corner.bottom-left{bottom:var(--delta);left:var(--delta);transform:rotate(-90deg)}.photo-frame-corner.bottom-right{bottom:var(--delta);right:var(--delta);transform:rotate(180deg)}.buttons-group{display:flex;width:100%;left:0;gap:12px;flex-direction:column;align-items:center;position:absolute;bottom:32px}.buttons-group-info{padding:4px 12px;border-radius:8px;background-color:rgba(0, 0, 0, 0.48);color:white;font-size:14px;line-height:20px}.photo-button{cursor:pointer;border:none;position:relative;z-index:1;padding:0;color:#6f6f6f;background-color:transparent;-webkit-tap-highlight-color:transparent;line-height:0;margin:0 auto}.zoom-buttons{display:flex;position:relative;justify-content:center;gap:12px}.zoom-buttons button{color:white;display:flex;width:48px;height:48px;justify-content:center;align-items:center;border-radius:var(--radius-radius-md, 8px);background-color:rgba(0, 0, 0, 0.48);border:none;cursor:pointer}.hidden{display:none}";const P=class{constructor(t){i(this,t),this.vviinnImageUpload=e(this,"vviinnImageUpload",7),this.vviinnNoResult=e(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=e(this,"vviinnImageUploadFinished",7),this.basicEventData=void 0,this.startUpload=void 0,this.loading=!1,this.accept="image",this.resetVpsButton=void 0,this.capture=void 0}async handleInputChange(t){this.vviinnImageUpload.emit(this.basicEventData);const i=t.target,e=await f(i.files[0]);r.pipe(e,g((({kind:t})=>this.vviinnNoResult.emit(Object.assign(Object.assign({},this.basicEventData),{reason:t}))),(()=>this.vviinnImageUploadFinished.emit()))),i.value=null}startUploadWatcher(t){t&&(this.fileInput.click(),this.resetVpsButton())}render(){return t(n,{exportparts:"button"},this.loading?t("vviinn-preloader",null):t("label",{htmlFor:"fileInput",part:"button"},t("slot",{name:"upload-button-text"},"Upload image")),t("input",{id:"fileInput",class:"visually-hidden",type:"file",capture:this.capture,accept:"image"===this.accept?"image/*":"application/octet-stream",onChange:t=>this.handleInputChange(t),ref:t=>this.fileInput=t}))}static get watchers(){return{startUpload:["startUploadWatcher"]}}};P.style=".visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;width:100%;height:100%;transition:background 0.1s ease-in-out}";var Y=b((function(t){
|
|
1
|
+
import{h as t,r as i,c as e,H as n,g as o}from"./p-1e83e6ba.js";import{s,_ as r,O as a,q as h,r as c,u as l,v as d,w as p,x as u,y as v,z as f,E as m,B as g,o as b,n as w,C as x,D as y,F as C,G as k,N as M,H as j}from"./p-1c1be428.js";import{i as z}from"./p-2e76a5c3.js";import{s as O,c as E}from"./p-b45cbf79.js";import{P as L}from"./p-ff8db3d2.js";const N=()=>t("svg",{width:"12",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z"})),S=()=>t("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M8.00001 17.3333C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H8.00001Z",fill:"currentColor"})),T=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"80",height:"80",viewBox:"0 0 80 80",fill:"none"},t("circle",{cx:"40",cy:"40",r:"36",fill:"white"}),t("circle",{cx:"40",cy:"40",r:"39",fill:"white","fill-opacity":"0.16",stroke:"white","stroke-width":"2"}),t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z",fill:"#161616"})),D=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z",fill:"currentColor"})),A=()=>t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z",fill:"#525252"}),t("path",{d:"M14 12C14 9.24 11.76 7 9 7C6.24 7 4 9.24 4 12C4 14.76 6.24 17 9 17C10.02 17 10.96 16.69 11.75 16.17L16.29 20.71L17.7 19.3L13.16 14.76C13.68 13.97 13.99 13.02 13.99 12.01L14 12ZM9 15C7.35 15 6 13.65 6 12C6 10.35 7.35 9 9 9C10.65 9 12 10.35 12 12C12 13.65 10.65 15 9 15Z",fill:"#525252"})),B=()=>t("svg",{slot:"icon",class:"icon",width:"32",height:"32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z",fill:"#525252"}),t("path",{d:"M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z",fill:"#525252"})),H=({className:i})=>t("svg",{width:"30",height:"30",viewBox:"0 0 30 30",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:i},t("path",{d:"M29 1H17C8.16344 1 1 8.16344 1 17V29",stroke:"white","stroke-width":"2","stroke-linecap":"square"}));const _=(t,i)=>{var e;if(!t)return"";const n={};return t.href.split("?")[1].split("included[]=").join("").split("&").forEach((t=>{const[i,e]=t.split("%3A");n[i]=e})),"categories"===i?null!==(e=n.product_type)&&void 0!==e?e:n.google_product_category:n[i]},F=class{constructor(t){i(this,t),this.vviinnSelectFilter=e(this,"vviinnSelectFilter",7),this.filterType=this.filter.name,this.filter=null,this.basicEventData=void 0,this.selectedFilter="",this.hideFilters=!0}isCategoriesFilterType(){return"categories"===this.filterType}getFilterKind(){return this.isCategoriesFilterType()?"category":this.filterType}handleFilterSelection(t){return this.isFilterSelected(t)?this.clearSelectedFilter(t):this.selectFilter(t)}selectFilter(t){s.activeIonLink=t,this.selectedFilter=_(t,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"select",kind:this.getFilterKind()}))}clearSelectedFilter(t){s.activeIonLink=t.clear,this.selectedFilter=_(t.clear,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"deselect",kind:this.getFilterKind()}))}toggleFilters(){this.hideFilters=!this.hideFilters}handleEnter(t,i){"Enter"===t.key&&this.handleFilterSelection(i)}isFilterSelected(t){return this.isCategoriesFilterType()?this.selectedFilter===_(t,"categories"):this.selectedFilter===t.name}render(){if(!this.filter)return null;const{name:i,filters:e}=this.filter;return t(n,{exportparts:"filter, show-more-filters"},t("div",{class:{filters:!0,"no-scrollbar-mobile":this.isCategoriesFilterType(),"no-scrollbar":!this.isCategoriesFilterType()}},e.filter(((t,i)=>!this.hideFilters||i<5)).map(((e,n)=>{const o="categories"===i?this.selectedFilter===_(e,"categories"):this.selectedFilter===e.name;return t("div",{role:"button",tabindex:"0",key:n,part:o?"filter active":"filter",class:{filter:!0,active:o},style:{"animation-delay":10*n+"ms"},onPointerUp:t=>{s.loading||(t.stopPropagation(),this.handleFilterSelection(e))},onKeyPress:t=>{s.loading||this.handleEnter(t,e)}},e.name)})),this.hideFilters&&t("div",{class:{"show-more":!0,hidden:e.length<=5,active:!this.hideFilters},role:"button",tabindex:"0","aria-role":"button",onClick:()=>{setTimeout((()=>this.toggleFilters()),300)},onKeyPress:t=>{"Enter"===t.key&&this.toggleFilters()},part:"show-more-filters"})))}get el(){return o(this)}};F.style=".filters{display:flex;flex-direction:row;overflow-x:auto;padding:0 12px 12px 24px}.filter{align-items:center;color:#525252;cursor:pointer;display:flex;margin-right:12px;height:-moz-max-content;height:max-content;min-width:-moz-max-content;min-width:max-content;transition-property:background;transition-duration:0.5s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px 12px}.show-more{display:flex}.show-more.hidden{display:none !important}.show-more::after{position:relative;content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;transform:rotate(-90deg);left:2px}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 768px){.filters{padding-right:54px;padding-bottom:0}}@media (max-width: 640px){.no-scrollbar-mobile{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar-mobile::-webkit-scrollbar{display:none}}";const W=class{constructor(t){i(this,t),this.vviinnSelectObject=e(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.basicEventData=void 0,this.position=["0","0"]}getObjectPosition(){return r.pipe(s.imageBounds,a.map((t=>{const i=h(c(this.detectedObject).rectangle),{x:e,y:n}=r.pipe(i,l(t),d);return[`${e}px`,`${n}px`]})),a.getOrElse((()=>["0","0"])))}selectDetectedObject(){r.pipe(s.imageBounds,a.map((t=>{const i=c(this.detectedObject).rectangle,e=h(i),n=l(t)(e);s.detectedObject=this.detectedObject,s.searchArea=a.some(n)}))),p(),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject}))}isActive(){if(!this.detectedObject)return!1;if(!s.detectedObject)return!1;const t=c(this.detectedObject),i=c(s.detectedObject);return u.equals(t,i)}render(){return t(n,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};W.style=':host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:"";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}';const I=class{constructor(t){i(this,t),this.handler=void 0}render(){return t(n,null,t("vviinn-error",null,t(B,null),t("h4",{slot:"title"},z.t("emptyResultsBlock.title")),"image"===s.searchType&&t("button",{slot:"action",onClick:this.handler},z.t("emptyResultsBlock.button"))))}},R=class{constructor(t){i(this,t),this.vviinnImageUpload=e(this,"vviinnImageUpload",7),this.vviinnNoResult=e(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=e(this,"vviinnImageUploadFinished",7),this.vviinnCameraEnabled=e(this,"vviinnCameraEnabled",7),this.videoTrack=null,this.initializeZoom=async()=>{var t;if(!this.videoTrack)return;const i=(null===(t=this.videoTrack)||void 0===t?void 0:t.getCapabilities)?this.videoTrack.getCapabilities():{};"zoom"in i&&(this.zoomCapabilities=i.zoom,await this.videoTrack.applyConstraints({advanced:[{zoom:this.zoomCapabilities.min}]}))},this.onZoom=async t=>{var i;if(!this.videoTrack||!this.zoomCapabilities)return;const{max:e,min:n}=this.zoomCapabilities,o=null!==(i=this.videoTrack.getSettings().zoom)&&void 0!==i?i:n,s=Math.round((e-n)/3*10)/10;let r;r="in"===t?o+s:o-s,r<n&&(r=n),r>e&&(r=e),await this.videoTrack.applyConstraints({advanced:[{zoom:r}]})},this.exampleImageSource=void 0,this.width=0,this.height=0,this.basicEventData=void 0,this.srcObject=void 0,this.cameraButtonClicked=!1,this.selected=!1,this.videoInitialized=!1,this.zoomCapabilities=null}componentWillLoad(){O(this,this.el)}componentDidLoad(){this.videoElement=this.el.shadowRoot.getElementById("camera-preview")}createPlaceholderImageCanvas(){const t=this.el.shadowRoot.getElementById("captured-image-placeholder"),i=this.videoElement,{videoWidth:e,videoHeight:n}=i,o=document.createElement("canvas");o.width=e,o.height=n,o.getContext("2d").drawImage(i,0,0,o.width,o.height);const s=o.toDataURL("image/jpeg");t.src=s}async selectImage(){if(!this.srcObject)return;let t;this.vviinnImageUpload.emit(this.basicEventData);const i=this.el.shadowRoot.getElementById("photo-frame"),e=this.videoElement,n=i.getBoundingClientRect(),o=e.getBoundingClientRect(),{videoWidth:s,videoHeight:a}=e,h=document.createElement("canvas");this.selected=!0,this.videoElement.pause(),this.createPlaceholderImageCanvas();const c=s/o.width,l=a/o.height,d=Math.min(n.width*c,n.height*l);h.width=d,h.height=d;const p=(n.left-o.left+(n.width-d/c)/2)*c,u=(n.top-o.top+(n.height-d/l)/2)*l;h.getContext("2d").drawImage(e,p,u,d,d,0,0,h.width,h.height);const g=h.toDataURL("image/jpeg");t=await v(g),r.pipe(await f(t),m.match((()=>this.vviinnNoResult.emit(this.basicEventData)),(()=>this.vviinnImageUploadFinished.emit()))),this.selected=!1,this.videoInitialized=!1,this.vviinnCameraEnabled.emit(!1)}handleKeyPress({key:t}){"Enter"!==t&&" "!==t||this.selectImage()}handleSrcObjectChange(){this.srcObject?(this.videoElement.srcObject=this.srcObject,this.videoTrack=this.srcObject.getVideoTracks()[0],this.initializeZoom(),this.videoElement.onloadedmetadata=()=>{this.vviinnCameraEnabled.emit(!0),this.videoInitialized=!0}):this.videoInitialized=!1}render(){return t(n,{onKeyUp:t=>this.handleKeyPress(t),class:{"video-expanded":this.cameraButtonClicked}},t("video",{id:"camera-preview",class:{hidden:!this.videoInitialized||this.selected},autoplay:!0,playsinline:!0,muted:!0}),t("img",{src:this.exampleImageSource,width:this.width,height:this.height,tabindex:1,class:{hidden:this.videoInitialized||this.selected}}),t("img",{id:"captured-image-placeholder",class:{hidden:!this.selected}}),t("div",{class:{container:!0,hidden:!this.videoInitialized}},t("div",{class:"photo-frame-container"},t("div",{id:"photo-frame"},t(H,{className:"photo-frame-corner top-left"}),t(H,{className:"photo-frame-corner top-right"}),t(H,{className:"photo-frame-corner bottom-left"}),t(H,{className:"photo-frame-corner bottom-right"})),t("div",{class:{"zoom-buttons":!0,hidden:!this.zoomCapabilities}},t("button",{onClick:()=>this.onZoom("out")},t(S,null)),t("button",{onClick:()=>this.onZoom("in")},t(L,null)))),t("div",{class:"buttons-group"},t("div",{class:"buttons-group-info"},t("slot",{name:"vviinn-camera-capture-text"},z.t("cameraCaptureText"))),t("button",{class:"photo-button",onClick:()=>this.selectImage()},t(T,null)))))}get el(){return o(this)}static get watchers(){return{srcObject:["handleSrcObjectChange"]}}};R.style=":host{display:block;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;flex-grow:1;transition:min-height 1s}:host(.video-expanded){min-height:100%;transition:min-height 0.8s}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}#camera-preview{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;position:relative}#captured-image-placeholder{height:auto}.container{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;flex-direction:column;gap:12px;padding:64px 0 164px;justify-content:center;align-content:center;box-sizing:border-box}.photo-frame-container{width:100%;height:100%;display:flex;flex-direction:column;gap:12px}#photo-frame{position:relative;aspect-ratio:1/1;border-radius:16px;box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.32);width:100%;height:auto;max-width:400px;margin:0 auto}@media (max-width: 960px){.photo-frame-container{width:auto;height:auto}#photo-frame{max-width:80%;height:auto}}@media (max-width: 380px){#photo-frame{max-width:70%}}.photo-frame-corner{position:absolute;--delta:-1px}.photo-frame-corner.top-left{top:var(--delta);left:var(--delta)}.photo-frame-corner.top-right{top:var(--delta);right:var(--delta);transform:rotate(90deg)}.photo-frame-corner.bottom-left{bottom:var(--delta);left:var(--delta);transform:rotate(-90deg)}.photo-frame-corner.bottom-right{bottom:var(--delta);right:var(--delta);transform:rotate(180deg)}.buttons-group{display:flex;width:100%;left:0;gap:12px;flex-direction:column;align-items:center;position:absolute;bottom:32px}.buttons-group-info{padding:4px 12px;border-radius:8px;background-color:rgba(0, 0, 0, 0.48);color:white;font-size:14px;line-height:20px}.photo-button{cursor:pointer;border:none;position:relative;z-index:1;padding:0;color:#6f6f6f;background-color:transparent;-webkit-tap-highlight-color:transparent;line-height:0;margin:0 auto}.zoom-buttons{display:flex;position:relative;justify-content:center;gap:12px}.zoom-buttons button{color:white;display:flex;width:48px;height:48px;justify-content:center;align-items:center;border-radius:var(--radius-radius-md, 8px);background-color:rgba(0, 0, 0, 0.48);border:none;cursor:pointer}.hidden{display:none}";const P=class{constructor(t){i(this,t),this.vviinnImageUpload=e(this,"vviinnImageUpload",7),this.vviinnNoResult=e(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=e(this,"vviinnImageUploadFinished",7),this.basicEventData=void 0,this.startUpload=void 0,this.loading=!1,this.accept="image",this.resetVpsButton=void 0,this.capture=void 0}async handleInputChange(t){this.vviinnImageUpload.emit(this.basicEventData);const i=t.target,e=await f(i.files[0]);r.pipe(e,g((({kind:t})=>this.vviinnNoResult.emit(Object.assign(Object.assign({},this.basicEventData),{reason:t}))),(()=>this.vviinnImageUploadFinished.emit()))),i.value=null}startUploadWatcher(t){t&&(this.fileInput.click(),this.resetVpsButton())}render(){return t(n,{exportparts:"button"},this.loading?t("vviinn-preloader",null):t("label",{htmlFor:"fileInput",part:"button"},t("slot",{name:"upload-button-text"},"Upload image")),t("input",{id:"fileInput",class:"visually-hidden",type:"file",capture:this.capture,accept:"image"===this.accept?"image/*":"application/octet-stream",onChange:t=>this.handleInputChange(t),ref:t=>this.fileInput=t}))}static get watchers(){return{startUpload:["startUploadWatcher"]}}};P.style=".visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;width:100%;height:100%;transition:background 0.1s ease-in-out}";var Y=b((function(t){
|
|
2
2
|
/*!
|
|
3
3
|
* Cropper.js v1.5.13
|
|
4
4
|
* https://fengyuanchen.github.io/cropperjs
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const o="2.52.2";export{o as v}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{h as t,r as i,c as s,H as e,g as a}from"./p-1e83e6ba.js";import{s as n,b as r,k as o,O as h}from"./p-1c1be428.js";import{i as d}from"./p-2e76a5c3.js";import{v as c}from"./p-b7452598.js";import{c as l,s as p,S as v}from"./p-91891157.js";import{j as u,k as g,v as m,c as b,r as f,l as x,m as y,n as w}from"./p-d7f0728d.js";import{D as k}from"./p-cc013cd2.js";const C=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M12 17.5C13.25 17.5 14.3125 17.0625 15.1875 16.1875C16.0625 15.3125 16.5 14.25 16.5 13C16.5 11.75 16.0625 10.6875 15.1875 9.8125C14.3125 8.9375 13.25 8.5 12 8.5C10.75 8.5 9.6875 8.9375 8.8125 9.8125C7.9375 10.6875 7.5 11.75 7.5 13C7.5 14.25 7.9375 15.3125 8.8125 16.1875C9.6875 17.0625 10.75 17.5 12 17.5ZM12 15.5C11.3 15.5 10.7083 15.2583 10.225 14.775C9.74167 14.2917 9.5 13.7 9.5 13C9.5 12.3 9.74167 11.7083 10.225 11.225C10.7083 10.7417 11.3 10.5 12 10.5C12.7 10.5 13.2917 10.7417 13.775 11.225C14.2583 11.7083 14.5 12.3 14.5 13C14.5 13.7 14.2583 14.2917 13.775 14.775C13.2917 15.2583 12.7 15.5 12 15.5ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7C2 6.45 2.19583 5.97917 2.5875 5.5875C2.97917 5.19583 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.45 8.80417 3.29167 9.0625 3.175C9.32083 3.05833 9.59167 3 9.875 3H14.125C14.4083 3 14.6792 3.05833 14.9375 3.175C15.1958 3.29167 15.4167 3.45 15.6 3.65L16.85 5H20C20.55 5 21.0208 5.19583 21.4125 5.5875C21.8042 5.97917 22 6.45 22 7V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4Z",fill:"currentColor"})),j=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M4.5 21C4.1 21 3.75 20.85 3.45 20.55C3.15 20.25 3 19.9 3 19.5V4.5C3 4.1 3.15 3.75 3.45 3.45C3.75 3.15 4.1 3 4.5 3H19.5C19.9 3 20.25 3.15 20.55 3.45C20.85 3.75 21 4.1 21 4.5V19.5C21 19.9 20.85 20.25 20.55 20.55C20.25 20.85 19.9 21 19.5 21H4.5ZM6.65 17.075H17.375C17.525 17.075 17.6333 17.0083 17.7 16.875C17.7667 16.7417 17.7583 16.6083 17.675 16.475L14.75 12.575C14.6667 12.475 14.5667 12.425 14.45 12.425C14.3333 12.425 14.2333 12.475 14.15 12.575L11.15 16.45L9.125 13.675C9.04167 13.575 8.94167 13.525 8.825 13.525C8.70833 13.525 8.60833 13.575 8.525 13.675L6.375 16.475C6.275 16.6083 6.25833 16.7417 6.325 16.875C6.39167 17.0083 6.5 17.075 6.65 17.075Z",fill:"currentColor"})),I={facingMode:"environment",width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30}};var S=function(t,i){var s={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0&&(s[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(t);a<e.length;a++)i.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(t,e[a])&&(s[e[a]]=t[e[a]])}return s};const T=class{constructor(e){i(this,e),this.globalSlotsChanged=s(this,"globalSlotsChanged",7),this.vviinnWidgetLoad=s(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=s(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=s(this,"vviinnWidgetClose",7),this.vviinnImageUpload=s(this,"vviinnImageUpload",7),this.vviinnProductLoad=s(this,"vviinnProductLoad",7),this.vviinnProductView=s(this,"vviinnProductView",7),this.vviinnProductClick=s(this,"vviinnProductClick",7),this.vviinnResultLoad=s(this,"vviinnResultLoad",7),this.vviinnResultView=s(this,"vviinnResultView",7),this.vviinnNoResult=s(this,"vviinnNoResult",7),this.vviinnImageCrop=s(this,"vviinnImageCrop",7),this.vviinnSelectObject=s(this,"vviinnSelectObject",7),this.vviinnSelectFilter=s(this,"vviinnSelectFilter",7),this.imageSource=null,this.resultLoaded=!1,this.resultViewed=!1,this.cameraAvailable=!1,this.isDesktop=!1,this.videoTrack=null,this.handleVviinnImageUpload=t=>{this.trackInitialSearch(),this.uploadSource=t},this.handleVviinnImageUploadFinished=()=>{this.handleImageSelection(),"upload"===this.mode&&this.showingInButton&&(this.active=!0)},this.handleVviinnNoResult=t=>{"client"===t.reason&&(this.wrongImageFormat=!0)},this.adjustCameraSettings=async()=>{var t;if(!this.videoTrack)return;const i=(null===(t=this.videoTrack)||void 0===t?void 0:t.getCapabilities)?this.videoTrack.getCapabilities():{};if("focusMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{focusMode:"continuous"}]})}catch(t){console.error("Failed to apply focus mode constraints",t)}if("exposureMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{exposureMode:"continuous"}]})}catch(t){console.error("Failed to apply exposure mode constraints",t)}if("whiteBalanceMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{whiteBalanceMode:"continuous"}]})}catch(t){console.error("Failed to apply white balance mode constraints",t)}},this.handleStartCameraClick=async()=>{this.stream?this.resetState():(this.cameraInitializing=!0,setTimeout((async()=>{this.cameraButtonClicked=!0;try{const t=await navigator.mediaDevices.getUserMedia({video:I});this.videoTrack=t.getVideoTracks()[0],this.adjustCameraSettings(),this.stream=t,this.uploadSource="startCamera"}catch(t){console.log("Error accessing camera: ",t.message),this.resetState(),this.cameraInitializing=!1}}),500))},this.setShowAspectRatioError=t=>{this.showAspectRatioError=t},this.setTrackingDeactivated=t=>{"rejected"===t.status&&(this.trackingDeactivated=!0)},this.getBasicEventData=()=>{var t;return{widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:l.VPS,widgetId:null!==(t=this.buttonElementId)&&void 0!==t?t:this.id,widgetVersion:c}},this.LinkText=({href:i,children:s})=>t("a",{href:i||""},s),this.token=void 0,this.active=!0,this.currencySign="€",this.locale="de-DE",this.campaignId="",this.excluded="",this.productDetailNewTab=!0,this.imageResolutionWidth=250,this.exampleImageSource=k,this.textSearchShow=!1,this.apiPath="https://api.vviinn.com",this.showingInButton=!1,this.buttonElementId=void 0,this.buttonPressed=void 0,this.mode="modal",this.resetVpsButton=void 0,this.slidePosition=0,this.width=0,this.wrongImageFormat=!1,this.trackingDeactivated=!1,this.stream=null,this.cameraInitializing=!1,this.cameraEnabled=!1,this.cameraButtonClicked=!1,this.uploadSource=void 0,this.showAspectRatioError=!1,this.products=[],this.initialSearchQuery=""}initResultEvents(){this.resultLoaded=!1,this.resultViewed=!1}stopStreamTracks(){var t;null===(t=this.stream)||void 0===t||t.getTracks().forEach((t=>{t.stop()}))}isOnboardingSlide(){return 0===this.slidePosition}isResultSlide(){return 1===this.slidePosition}findProductById(t){return n.results.find((i=>i.productId===t))}handleOpenLink(t,i){if(this.productDetailNewTab||i.ctrlKey||i.metaKey){let i=window.open();i?i.location.href=t:window.location.href=t}else window.location.href=t}componentDidLoad(){const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}activeWatcher(t){t?(this.overflow=document.body.style.overflow,document.body.style.overflow="hidden",this.vviinnWidgetOpen.emit(this.getBasicEventData()),"camera"===this.mode&&this.handleStartCameraClick(),this.trackWidgetEvent("open")):(document.body.style.overflow=this.overflow,this.initResultEvents())}trackCameraEnabled({detail:t}){this.cameraEnabled=t,this.cameraInitializing=!1}trackProductLoad({detail:t}){const i=this.getProductTrackEvent(t,"load");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackProductView({detail:t}){this.resultViewed||(this.resultViewed=!0,this.vviinnResultView.emit(this.getBasicEventData()),this.trackResultEvent("view"));const i=this.getProductTrackEvent(t,"view");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}async trackProductClick({detail:t}){const{productId:i,clickEvent:s}=t,e=this.getProductTrackEvent(t,"click"),a=this.findProductById(i);a&&a.deeplink&&(this.trackingDeactivated?this.handleOpenLink(a.deeplink,s):await this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated).finally((()=>{this.handleOpenLink(a.deeplink,s)})))}async trackAuxClick({detail:t}){const{productId:i}=t,s=this.getProductTrackEvent(t,"click"),e=this.findProductById(i);e&&e.deeplink&&(this.trackingDeactivated||await this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated))}trachSearchAreaChanges(){if(this.initResultEvents(),this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId"]),s=u(Object.assign({session_id:this.uiSessionId,source:this.imageSource,search_area:"manual-selection"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}trackDetectedObject(){if(this.initResultEvents(),this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId"]),s=u(Object.assign({session_id:this.uiSessionId,source:this.imageSource,search_area:"attention-point"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}trackFilter({detail:t}){if(this.initResultEvents(),this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId"]),e=g(Object.assign({session_id:this.uiSessionId,source:this.imageSource,kind:t.kind,action:t.action},s));this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}async trackTextSearchFinished({detail:t}){this.initialSearchQuery=t,this.slidePosition=1}connectedCallback(){this.isDesktop="desktop"===(()=>{const t=navigator.userAgent;return/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(t)?"tablet":/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(t)?"mobile":"desktop"})(),r.apiPath=this.apiPath,r.currencySign=this.currencySign,r.locale=this.locale,this.cameraAvailable=!!navigator.mediaDevices&&!!navigator.mediaDevices.getUserMedia,this.excluded&&(this.excluded=o(this.excluded)),n.token=this.token,n.campaignId=this.campaignId,n.excluded=this.excluded,this.uiSessionId=m(),this.trackingApi=b(this.apiPath,this.token),this.id=this.el.id}async componentWillLoad(){await d.init({lng:this.locale,fallbackLng:"en",resources:f}),p(this,this.el),this.vviinnWidgetLoad.emit(this.getBasicEventData()),this.trackWidgetEvent("load")}trackWidgetEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId","widgetType"]),e=Object.assign({action:t,session_id:this.uiSessionId},s),a=x(e);this.trackingApi.trackEvent(a).then(this.setTrackingDeactivated)}getProductTrackEvent(t,i){if(this.trackingDeactivated)return null;const{productRank:s,productId:e}=t,a=S(t,["productRank","productId","campaignTypeId","widgetType","clickEvent"]),n=Object.assign({session_id:this.uiSessionId,rank:s,product:e},a);return y(i)(n)}trackResultEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId","widgetType"]);let e=w(t)(Object.assign({session_id:this.uiSessionId},s));this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}trackInitialSearch(){if(this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId","widgetType"]),s=u(Object.assign({session_id:this.uiSessionId,search_area:"full",source:"upload"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}handleImageSelection(){this.imageSource="upload",this.slidePosition=1,this.el.shadowRoot.querySelector("vviinn-overlayed-modal").shadowRoot.querySelector("vviinn-overlay").querySelector("vviinn-modal").shadowRoot.querySelector(".body").scrollTop=0,this.stopStreamTracks()}renderButtons(){const i=n.loading&&"image"===n.searchType&&"startCamera"===this.uploadSource||this.cameraInitializing,s=[this.cameraAvailable&&t("button",{class:"action-button",part:"start-camera_button",onClick:()=>{this.handleStartCameraClick()}},t("vviinn-preloader",{class:{hidden:!i}}),t("span",{class:{"action-button-content":!0,hidden:i}},t("slot",{name:"vviinn-camera-icon"},t(C,null)),t("span",{class:{hidden:!this.cameraEnabled}},t("slot",{name:"vviinn-camera-button-text-stop"},d.t("cameraButtonTextStop"))),t("span",{class:{hidden:this.cameraEnabled}},t("slot",{name:"vviinn-camera-button-text-start"},d.t("cameraButtonTextStart"))))),t("vviinn-image-selector",{class:"action-button",onClick:()=>this.uploadSource="uploadPhoto",onVviinnImageUploadFinished:this.handleVviinnImageUploadFinished,onVviinnImageUpload:()=>{this.handleVviinnImageUpload("uploadPhoto")},onVviinnNoResult:({detail:t})=>this.handleVviinnNoResult(t),resetVpsButton:this.resetVpsButton,basicEventData:this.getBasicEventData(),part:"upload-photo_button",startUpload:this.buttonPressed&&this.showingInButton&&"upload"===this.mode,loading:n.loading&&"image"===n.searchType&&"uploadPhoto"===this.uploadSource},t("span",{slot:"upload-button-text",class:"action-button-content"},t("slot",{name:"vviinn-image-upload-icon"},t(j,null)),t("slot",{name:"vviinn-image-upload-button-text"},t("span",null,d.t("imageUploadButtonText")))))];return this.isDesktop?s.reverse():s}renderResults(){return 0!==n.results.length&&this.isResultSlide()?(this.resultLoaded||(this.vviinnResultLoad.emit(this.getBasicEventData()),this.trackResultEvent("load"),this.resultLoaded=!0),n.results.map(((i,s)=>{var e;return t("vviinn-product-card",{key:i.productId,hidden:!0,productTitle:i.title,productId:i.productId,productType:i.productType,brand:i.brand,deeplink:i.deeplink,price:i.price.actual,salePrice:i.price.sale,responsive:!0,imageWidth:this.imageResolutionWidth,image:null!==(e=i.image.thumbnail)&&void 0!==e?e:i.image.original,part:"product-card",campaignTypeId:"VPS",index:s,widgetElementId:this.id,buttonElementId:this.buttonElementId,widgetVersion:c})}))):null}resetState(){this.resetScroll("start-page_block"),this.slidePosition=0,n.resetCategoryLink=void 0,n.activeIonLink=void 0,n.image=h.none,n.imageUrl=h.none,n.imageBounds=h.none,n.searchArea=h.none,n.results=[],n.filters=[],n.detectedObjects=[],n.rectangleSearchForm=void 0,n.loading=!1,n.serverError=!1,n.searchType=void 0,this.wrongImageFormat=!1,this.resetScroll("results-block"),this.stopStreamTracks(),this.initResultEvents(),this.stream=null,this.cameraEnabled=!1,this.cameraButtonClicked=!1,this.cameraInitializing=!1,this.setShowAspectRatioError(!1)}haveErrors(){return this.wrongImageFormat||n.serverError}resetScroll(t,i="auto"){this.el.shadowRoot.getElementById(t).scroll({top:0,left:0,behavior:i})}handleModalClose(){this.active=!1,this.resetState(),["start-page_block","results-block"].forEach((t=>this.resetScroll(t))),this.trackWidgetEvent("close")}render(){var i;return t(e,{exportparts:"text-search-input"},!this.showingInButton&&v("vps"),t("vviinn-overlayed-modal",{class:{"first-screen":this.isOnboardingSlide()},isFirstScreen:this.isOnboardingSlide(),active:this.active,resetState:this.resetState.bind(this),onVviinnWidgetClose:()=>this.handleModalClose(),buttonElementId:null!==(i=this.buttonElementId)&&void 0!==i?i:this.id,widgetVersion:c,hideBackButton:"upload"===this.mode&&this.showingInButton||!this.cameraEnabled&&this.isOnboardingSlide(),exportparts:"secondary-action, title, close-button"},t("vviinn-slider",{showBullets:!1,position:this.slidePosition},t("vviinn-slide",{class:{"start-page":!0,"camera-enabled":this.cameraEnabled}},t("vviinn-example-image",{onVviinnImageUploadFinished:this.handleVviinnImageUploadFinished,onVviinnImageUpload:()=>{this.handleVviinnImageUpload("startCamera")},basicEventData:this.getBasicEventData(),srcObject:this.stream,cameraButtonClicked:this.cameraButtonClicked,exampleImageSource:this.exampleImageSource}),t("div",{class:{error:this.haveErrors()},id:"start-page_block"},t("div",{class:"start-page_main-content"},t("div",{class:{"start-page_errors-block":!0,hidden:!this.wrongImageFormat&&!n.serverError}},t("vviinn-wrong-format",{class:{hidden:!this.wrongImageFormat},handler:()=>this.resetState()}),t("vviinn-server-error",{class:{hidden:!n.serverError},handler:()=>this.resetState()})),!this.haveErrors()&&t("vviinn-teaser",null),!this.haveErrors()&&t("div",{class:"buttons-group"},this.renderButtons()),this.textSearchShow&&!this.haveErrors()&&t("vviinn-text-search",{clearSearchQuery:!0})),t("vviinn-privacy-badge",{privacyBadgeText:d.t("privacyBadgeText",{interpolation:{escapeValue:!1}}),class:{invisible:this.haveErrors()}}))),t("vviinn-slide",{class:{"results-page":!0,active:this.isResultSlide()}},this.isResultSlide()&&"image"===n.searchType&&t("div",{class:"image-wrapper"},t("vviinn-image-view",{basicEventData:this.getBasicEventData(),setShowAspectRatioError:this.setShowAspectRatioError,showAspectRatioError:this.showAspectRatioError}),t("div",{class:{"filters-wrapper":!0,hidden:this.showAspectRatioError}},t("div",{class:"filters"},n.filters.map((i=>t("search-filters",{filter:i,basicEventData:this.getBasicEventData()})))))),this.textSearchShow&&this.isResultSlide()&&"text"===n.searchType&&t("div",{class:"text-search-wrapper"},t("vviinn-text-search",{initialSearchQuery:this.initialSearchQuery})),t("div",{id:"results-block",class:"products-wrapper"},t("div",{class:{"nothing-found":!0,hidden:n.results.length>0}},t("vviinn-empty-results",{handler:()=>this.resetState()})),t("div",{class:{"nothing-found":!0,hidden:!this.showAspectRatioError}},t("vviinn-wrong-aspect-ratio",{handler:()=>this.resetState()})),t("div",{class:{hidden:0===n.results.length||this.showAspectRatioError,products:!0}},this.renderResults()))))))}get el(){return a(this)}static get watchers(){return{active:["activeWatcher"]}}};T.style=":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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.results-page .text-search-wrapper{width:100%;padding:24px}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.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{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.image-wrapper{padding:0}.filters-wrapper{padding-left:24px;min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.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;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.filters-wrapper{padding-left:24px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{T as vviinn_vps_widget}
|
|
1
|
+
import{h as t,r as i,c as s,H as e,g as a}from"./p-1e83e6ba.js";import{s as n,b as r,k as o,O as h}from"./p-1c1be428.js";import{i as d}from"./p-2e76a5c3.js";import{v as c}from"./p-55127f61.js";import{c as l,s as p,S as v}from"./p-b45cbf79.js";import{j as u,k as g,v as m,c as f,r as b,l as x,m as y,n as w}from"./p-d7f0728d.js";import{D as k}from"./p-cc013cd2.js";const C=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M12 17.5C13.25 17.5 14.3125 17.0625 15.1875 16.1875C16.0625 15.3125 16.5 14.25 16.5 13C16.5 11.75 16.0625 10.6875 15.1875 9.8125C14.3125 8.9375 13.25 8.5 12 8.5C10.75 8.5 9.6875 8.9375 8.8125 9.8125C7.9375 10.6875 7.5 11.75 7.5 13C7.5 14.25 7.9375 15.3125 8.8125 16.1875C9.6875 17.0625 10.75 17.5 12 17.5ZM12 15.5C11.3 15.5 10.7083 15.2583 10.225 14.775C9.74167 14.2917 9.5 13.7 9.5 13C9.5 12.3 9.74167 11.7083 10.225 11.225C10.7083 10.7417 11.3 10.5 12 10.5C12.7 10.5 13.2917 10.7417 13.775 11.225C14.2583 11.7083 14.5 12.3 14.5 13C14.5 13.7 14.2583 14.2917 13.775 14.775C13.2917 15.2583 12.7 15.5 12 15.5ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7C2 6.45 2.19583 5.97917 2.5875 5.5875C2.97917 5.19583 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.45 8.80417 3.29167 9.0625 3.175C9.32083 3.05833 9.59167 3 9.875 3H14.125C14.4083 3 14.6792 3.05833 14.9375 3.175C15.1958 3.29167 15.4167 3.45 15.6 3.65L16.85 5H20C20.55 5 21.0208 5.19583 21.4125 5.5875C21.8042 5.97917 22 6.45 22 7V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4Z",fill:"currentColor"})),j=()=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},t("path",{d:"M4.5 21C4.1 21 3.75 20.85 3.45 20.55C3.15 20.25 3 19.9 3 19.5V4.5C3 4.1 3.15 3.75 3.45 3.45C3.75 3.15 4.1 3 4.5 3H19.5C19.9 3 20.25 3.15 20.55 3.45C20.85 3.75 21 4.1 21 4.5V19.5C21 19.9 20.85 20.25 20.55 20.55C20.25 20.85 19.9 21 19.5 21H4.5ZM6.65 17.075H17.375C17.525 17.075 17.6333 17.0083 17.7 16.875C17.7667 16.7417 17.7583 16.6083 17.675 16.475L14.75 12.575C14.6667 12.475 14.5667 12.425 14.45 12.425C14.3333 12.425 14.2333 12.475 14.15 12.575L11.15 16.45L9.125 13.675C9.04167 13.575 8.94167 13.525 8.825 13.525C8.70833 13.525 8.60833 13.575 8.525 13.675L6.375 16.475C6.275 16.6083 6.25833 16.7417 6.325 16.875C6.39167 17.0083 6.5 17.075 6.65 17.075Z",fill:"currentColor"})),I={facingMode:"environment",width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30}};var S=function(t,i){var s={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0&&(s[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(t);a<e.length;a++)i.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(t,e[a])&&(s[e[a]]=t[e[a]])}return s};const T=class{constructor(e){i(this,e),this.globalSlotsChanged=s(this,"globalSlotsChanged",7),this.vviinnWidgetLoad=s(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=s(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=s(this,"vviinnWidgetClose",7),this.vviinnImageUpload=s(this,"vviinnImageUpload",7),this.vviinnProductLoad=s(this,"vviinnProductLoad",7),this.vviinnProductView=s(this,"vviinnProductView",7),this.vviinnProductClick=s(this,"vviinnProductClick",7),this.vviinnResultLoad=s(this,"vviinnResultLoad",7),this.vviinnResultView=s(this,"vviinnResultView",7),this.vviinnNoResult=s(this,"vviinnNoResult",7),this.vviinnImageCrop=s(this,"vviinnImageCrop",7),this.vviinnSelectObject=s(this,"vviinnSelectObject",7),this.vviinnSelectFilter=s(this,"vviinnSelectFilter",7),this.imageSource=null,this.resultLoaded=!1,this.resultViewed=!1,this.cameraAvailable=!1,this.isDesktop=!1,this.videoTrack=null,this.handleVviinnImageUpload=t=>{this.trackInitialSearch(),this.uploadSource=t},this.handleVviinnImageUploadFinished=()=>{this.handleImageSelection(),"upload"===this.mode&&this.showingInButton&&(this.active=!0)},this.handleVviinnNoResult=t=>{"client"===t.reason&&(this.wrongImageFormat=!0)},this.adjustCameraSettings=async()=>{var t;if(!this.videoTrack)return;const i=(null===(t=this.videoTrack)||void 0===t?void 0:t.getCapabilities)?this.videoTrack.getCapabilities():{};if("focusMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{focusMode:"continuous"}]})}catch(t){console.error("Failed to apply focus mode constraints",t)}if("exposureMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{exposureMode:"continuous"}]})}catch(t){console.error("Failed to apply exposure mode constraints",t)}if("whiteBalanceMode"in i)try{await this.videoTrack.applyConstraints({advanced:[{whiteBalanceMode:"continuous"}]})}catch(t){console.error("Failed to apply white balance mode constraints",t)}},this.handleStartCameraClick=async()=>{this.stream?this.resetState():(this.cameraInitializing=!0,setTimeout((async()=>{this.cameraButtonClicked=!0;try{const t=await navigator.mediaDevices.getUserMedia({video:I});this.videoTrack=t.getVideoTracks()[0],this.adjustCameraSettings(),this.stream=t,this.uploadSource="startCamera"}catch(t){console.log("Error accessing camera: ",t.message),this.resetState(),this.cameraInitializing=!1}}),500))},this.setShowAspectRatioError=t=>{this.showAspectRatioError=t},this.setTrackingDeactivated=t=>{"rejected"===t.status&&(this.trackingDeactivated=!0)},this.getBasicEventData=()=>{var t;return{widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:l.VPS,widgetId:null!==(t=this.buttonElementId)&&void 0!==t?t:this.id,widgetVersion:c}},this.LinkText=({href:i,children:s})=>t("a",{href:i||""},s),this.token=void 0,this.active=!0,this.currencySign="€",this.locale="de-DE",this.campaignId="",this.excluded="",this.productDetailNewTab=!0,this.imageResolutionWidth=250,this.exampleImageSource=k,this.textSearchShow=!1,this.apiPath="https://api.vviinn.com",this.showingInButton=!1,this.buttonElementId=void 0,this.buttonPressed=void 0,this.mode="modal",this.resetVpsButton=void 0,this.slidePosition=0,this.width=0,this.wrongImageFormat=!1,this.trackingDeactivated=!1,this.stream=null,this.cameraInitializing=!1,this.cameraEnabled=!1,this.cameraButtonClicked=!1,this.uploadSource=void 0,this.showAspectRatioError=!1,this.products=[],this.initialSearchQuery=""}initResultEvents(){this.resultLoaded=!1,this.resultViewed=!1}stopStreamTracks(){var t;null===(t=this.stream)||void 0===t||t.getTracks().forEach((t=>{t.stop()}))}isOnboardingSlide(){return 0===this.slidePosition}isResultSlide(){return 1===this.slidePosition}findProductById(t){return n.results.find((i=>i.productId===t))}handleOpenLink(t,i){if(this.productDetailNewTab||i.ctrlKey||i.metaKey){let i=window.open();i?i.location.href=t:window.location.href=t}else window.location.href=t}componentDidLoad(){const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}activeWatcher(t){t?(this.overflow=document.body.style.overflow,document.body.style.overflow="hidden",this.vviinnWidgetOpen.emit(this.getBasicEventData()),"camera"===this.mode&&this.handleStartCameraClick(),this.trackWidgetEvent("open")):(document.body.style.overflow=this.overflow,this.initResultEvents())}trackCameraEnabled({detail:t}){this.cameraEnabled=t,this.cameraInitializing=!1}trackProductLoad({detail:t}){const i=this.getProductTrackEvent(t,"load");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackProductView({detail:t}){this.resultViewed||(this.resultViewed=!0,this.vviinnResultView.emit(this.getBasicEventData()),this.trackResultEvent("view"));const i=this.getProductTrackEvent(t,"view");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}async trackProductClick({detail:t}){const{productId:i,clickEvent:s}=t,e=this.getProductTrackEvent(t,"click"),a=this.findProductById(i);a&&a.deeplink&&(this.trackingDeactivated?this.handleOpenLink(a.deeplink,s):await this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated).finally((()=>{this.handleOpenLink(a.deeplink,s)})))}async trackAuxClick({detail:t}){const{productId:i}=t,s=this.getProductTrackEvent(t,"click"),e=this.findProductById(i);e&&e.deeplink&&(this.trackingDeactivated||await this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated))}trachSearchAreaChanges(){if(this.initResultEvents(),this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId"]),s=u(Object.assign({session_id:this.uiSessionId,source:this.imageSource,search_area:"manual-selection"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}trackDetectedObject(){if(this.initResultEvents(),this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId"]),s=u(Object.assign({session_id:this.uiSessionId,source:this.imageSource,search_area:"attention-point"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}trackFilter({detail:t}){if(this.initResultEvents(),this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId"]),e=g(Object.assign({session_id:this.uiSessionId,source:this.imageSource,kind:t.kind,action:t.action},s));this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}async trackTextSearchFinished({detail:t}){this.initialSearchQuery=t,this.slidePosition=1}connectedCallback(){this.isDesktop="desktop"===(()=>{const t=navigator.userAgent;return/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(t)?"tablet":/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(t)?"mobile":"desktop"})(),r.apiPath=this.apiPath,r.currencySign=this.currencySign,r.locale=this.locale,this.cameraAvailable=!!navigator.mediaDevices&&!!navigator.mediaDevices.getUserMedia,this.excluded&&(this.excluded=o(this.excluded)),n.token=this.token,n.campaignId=this.campaignId,n.excluded=this.excluded,this.uiSessionId=m(),this.trackingApi=f(this.apiPath,this.token),this.id=this.el.id}async componentWillLoad(){await d.init({lng:this.locale,fallbackLng:"en",resources:b}),p(this,this.el),this.vviinnWidgetLoad.emit(this.getBasicEventData()),this.trackWidgetEvent("load")}trackWidgetEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId","widgetType"]),e=Object.assign({action:t,session_id:this.uiSessionId},s),a=x(e);this.trackingApi.trackEvent(a).then(this.setTrackingDeactivated)}getProductTrackEvent(t,i){if(this.trackingDeactivated)return null;const{productRank:s,productId:e}=t,a=S(t,["productRank","productId","campaignTypeId","widgetType","clickEvent"]),n=Object.assign({session_id:this.uiSessionId,rank:s,product:e},a);return y(i)(n)}trackResultEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=S(i,["campaignTypeId","widgetType"]);let e=w(t)(Object.assign({session_id:this.uiSessionId},s));this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}trackInitialSearch(){if(this.trackingDeactivated)return;const t=this.getBasicEventData(),i=S(t,["campaignTypeId","widgetType"]),s=u(Object.assign({session_id:this.uiSessionId,search_area:"full",source:"upload"},i));this.trackingApi.trackEvent(s).then(this.setTrackingDeactivated)}handleImageSelection(){this.imageSource="upload",this.slidePosition=1,this.el.shadowRoot.querySelector("vviinn-overlayed-modal").shadowRoot.querySelector("vviinn-overlay").querySelector("vviinn-modal").shadowRoot.querySelector(".body").scrollTop=0,this.stopStreamTracks()}renderButtons(){const i=n.loading&&"image"===n.searchType&&"startCamera"===this.uploadSource||this.cameraInitializing,s=[this.cameraAvailable&&t("button",{class:"action-button",part:"start-camera_button",onClick:()=>{this.handleStartCameraClick()}},t("vviinn-preloader",{class:{hidden:!i}}),t("span",{class:{"action-button-content":!0,hidden:i}},t("slot",{name:"vviinn-camera-icon"},t(C,null)),t("span",{class:{hidden:!this.cameraEnabled}},t("slot",{name:"vviinn-camera-button-text-stop"},d.t("cameraButtonTextStop"))),t("span",{class:{hidden:this.cameraEnabled}},t("slot",{name:"vviinn-camera-button-text-start"},d.t("cameraButtonTextStart"))))),t("vviinn-image-selector",{class:"action-button",onClick:()=>this.uploadSource="uploadPhoto",onVviinnImageUploadFinished:this.handleVviinnImageUploadFinished,onVviinnImageUpload:()=>{this.handleVviinnImageUpload("uploadPhoto")},onVviinnNoResult:({detail:t})=>this.handleVviinnNoResult(t),resetVpsButton:this.resetVpsButton,basicEventData:this.getBasicEventData(),part:"upload-photo_button",startUpload:this.buttonPressed&&this.showingInButton&&"upload"===this.mode,loading:n.loading&&"image"===n.searchType&&"uploadPhoto"===this.uploadSource},t("span",{slot:"upload-button-text",class:"action-button-content"},t("slot",{name:"vviinn-image-upload-icon"},t(j,null)),t("slot",{name:"vviinn-image-upload-button-text"},t("span",null,d.t("imageUploadButtonText")))))];return this.isDesktop?s.reverse():s}renderResults(){return 0!==n.results.length&&this.isResultSlide()?(this.resultLoaded||(this.vviinnResultLoad.emit(this.getBasicEventData()),this.trackResultEvent("load"),this.resultLoaded=!0),n.results.map(((i,s)=>{var e;return t("vviinn-product-card",{key:i.productId,hidden:!0,productTitle:i.title,productId:i.productId,productType:i.productType,brand:i.brand,deeplink:i.deeplink,price:i.price.actual,salePrice:i.price.sale,responsive:!0,imageWidth:this.imageResolutionWidth,image:null!==(e=i.image.thumbnail)&&void 0!==e?e:i.image.original,part:"product-card",campaignTypeId:"VPS",index:s,widgetElementId:this.id,buttonElementId:this.buttonElementId,widgetVersion:c})}))):null}resetState(){this.resetScroll("start-page_block"),this.slidePosition=0,n.resetCategoryLink=void 0,n.activeIonLink=void 0,n.image=h.none,n.imageUrl=h.none,n.imageBounds=h.none,n.searchArea=h.none,n.results=[],n.filters=[],n.detectedObjects=[],n.rectangleSearchForm=void 0,n.loading=!1,n.serverError=!1,n.searchType=void 0,this.wrongImageFormat=!1,this.resetScroll("results-block"),this.stopStreamTracks(),this.initResultEvents(),this.stream=null,this.cameraEnabled=!1,this.cameraButtonClicked=!1,this.cameraInitializing=!1,this.setShowAspectRatioError(!1)}haveErrors(){return this.wrongImageFormat||n.serverError}resetScroll(t,i="auto"){this.el.shadowRoot.getElementById(t).scroll({top:0,left:0,behavior:i})}handleModalClose(){this.active=!1,this.resetState(),["start-page_block","results-block"].forEach((t=>this.resetScroll(t))),this.trackWidgetEvent("close")}render(){var i;return t(e,{exportparts:"text-search-input"},!this.showingInButton&&v("vps"),t("vviinn-overlayed-modal",{class:{"first-screen":this.isOnboardingSlide()},isFirstScreen:this.isOnboardingSlide(),active:this.active,resetState:this.resetState.bind(this),onVviinnWidgetClose:()=>this.handleModalClose(),buttonElementId:null!==(i=this.buttonElementId)&&void 0!==i?i:this.id,widgetVersion:c,hideBackButton:"upload"===this.mode&&this.showingInButton||!this.cameraEnabled&&this.isOnboardingSlide(),exportparts:"secondary-action, title, close-button"},t("vviinn-slider",{showBullets:!1,position:this.slidePosition},t("vviinn-slide",{class:{"start-page":!0,"camera-enabled":this.cameraEnabled}},t("vviinn-example-image",{onVviinnImageUploadFinished:this.handleVviinnImageUploadFinished,onVviinnImageUpload:()=>{this.handleVviinnImageUpload("startCamera")},basicEventData:this.getBasicEventData(),srcObject:this.stream,cameraButtonClicked:this.cameraButtonClicked,exampleImageSource:this.exampleImageSource}),t("div",{class:{error:this.haveErrors()},id:"start-page_block"},t("div",{class:"start-page_main-content"},t("div",{class:{"start-page_errors-block":!0,hidden:!this.wrongImageFormat&&!n.serverError}},t("vviinn-wrong-format",{class:{hidden:!this.wrongImageFormat},handler:()=>this.resetState()}),t("vviinn-server-error",{class:{hidden:!n.serverError},handler:()=>this.resetState()})),!this.haveErrors()&&t("vviinn-teaser",null),!this.haveErrors()&&t("div",{class:"buttons-group"},this.renderButtons()),this.textSearchShow&&!this.haveErrors()&&t("vviinn-text-search",{clearSearchQuery:!0})),t("vviinn-privacy-badge",{privacyBadgeText:d.t("privacyBadgeText",{interpolation:{escapeValue:!1}}),class:{invisible:this.haveErrors()}}))),t("vviinn-slide",{class:{"results-page":!0,active:this.isResultSlide()}},this.isResultSlide()&&"image"===n.searchType&&t("div",{class:"image-wrapper"},t("vviinn-image-view",{basicEventData:this.getBasicEventData(),setShowAspectRatioError:this.setShowAspectRatioError,showAspectRatioError:this.showAspectRatioError}),t("div",{class:{"filters-wrapper":!0,hidden:this.showAspectRatioError}},t("div",{class:"filters"},n.filters.map((i=>t("search-filters",{filter:i,basicEventData:this.getBasicEventData()})))))),this.textSearchShow&&this.isResultSlide()&&"text"===n.searchType&&t("div",{class:"text-search-wrapper"},t("vviinn-text-search",{initialSearchQuery:this.initialSearchQuery})),t("div",{id:"results-block",class:"products-wrapper"},t("div",{class:{"nothing-found":!0,hidden:n.results.length>0}},t("vviinn-empty-results",{handler:()=>this.resetState()})),t("div",{class:{"nothing-found":!0,hidden:!this.showAspectRatioError}},t("vviinn-wrong-aspect-ratio",{handler:()=>this.resetState()})),t("div",{class:{hidden:0===n.results.length||this.showAspectRatioError,products:!0}},this.renderResults()))))))}get el(){return a(this)}static get watchers(){return{active:["activeWatcher"]}}};T.style=":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);height:640px}#start-page_block{box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center;padding:42px 62px}#start-page_block.error{align-content:center}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;gap:12px}#start-page_block vviinn-text-search{margin-top:12px}.buttons-group{display:flex;flex-direction:column;gap:12px;margin-top:24px}.action-button{font-family:inherit;display:grid;border:none;cursor:pointer;align-items:center;border-radius:8px;font-size:16px;height:48px;justify-items:center;transition:background 0.1s ease-in-out;color:#525252;background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--color-primary-system));border-color:var(--color-primary, var(--color-primary-system));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--color-primary-hover-system));border-color:var(--color-primary-hover, var(--color-primary-hover-system))}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{margin-top:64px;display:grid;grid-template-columns:336px auto;box-sizing:border-box}.results-page>*{padding:24px;box-sizing:border-box}.results-page .text-search-wrapper{width:100%;padding:24px}.products{width:100%;align-content:center;align-items:start;box-sizing:border-box;display:grid;grid-gap:32px 16px;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));justify-items:center;padding:24px;position:absolute}.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{display:grid;grid-template-rows:min-content 1fr;min-width:100%}.filters-wrapper{margin-top:24px;overflow-x:auto;transform:translateX(-24px);min-width:calc(100% + 48px)}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:8px;box-sizing:border-box;color:#161616;font-size:14px;font-weight:400;line-height:20px}search-filters::part(show-more-filters){display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #f4f4f4;min-width:40px;height:40px;border-radius:100px;box-sizing:border-box;color:#161616}search-filters::part(show-more-filters):hover{background:#eaeaea}search-filters::part(filter active){background:var(--color-primary, var(--color-primary-system));color:white}.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%}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden}.results-page{margin-top:0}.results-page>*{box-sizing:border-box;padding:12px 24px 24px}.image-wrapper{padding:0}.filters-wrapper{padding-left:24px;min-width:calc(100% + 40px)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px}.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;margin-top:24px}.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: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}@media (max-width: 380px){.filters-wrapper{padding-left:24px}.products{grid-gap:24px 10px}}vviinn-wrong-format,vviinn-server-error{width:280px;align-self:center;justify-self:center}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{T as vviinn_vps_widget}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,H as h,g as n}from"./p-1e83e6ba.js";import{v as o}from"./p-
|
|
1
|
+
import{r as i,c as t,h as s,H as h,g as n}from"./p-1e83e6ba.js";import{v as o}from"./p-55127f61.js";import{V as e}from"./p-b21ebac9.js";const v=class{constructor(s){i(this,s),this.vviinnWidgetLoad=t(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=t(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=t(this,"vviinnWidgetClose",7),this.vviinnProductLoad=t(this,"vviinnProductLoad",7),this.vviinnProductClick=t(this,"vviinnProductClick",7),this.vviinnProductView=t(this,"vviinnProductView",7),this.vviinnResultLoad=t(this,"vviinnResultLoad",7),this.vviinnResultView=t(this,"vviinnResultView",7),this.vviinnNoResult=t(this,"vviinnNoResult",7),this.vviinnAddToBasket=t(this,"vviinnAddToBasket",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.locale="de-DE",this.color="",this.addStyle=!0,this.mode="continuity",this.imageWidth=300,this.currencySign="€",this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.excluded="",this.productDetailNewTab=!1,this.addToBasketShow=!1,this.apiPath="https://api.vviinn.com"}render(){return s(h,{onClick:()=>{this.handleClick()},role:"button",tabindex:"0"},s("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},s("slot",null,s(e,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.locale=this.locale,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,i.productDetailNewTab=this.productDetailNewTab,i.widgetVersion=o,i.showingInButton=!0,i.excluded=this.excluded,i.addToBasketShow=this.addToBasketShow,i.buttonChildren=this.el.children,this.sidebar=i,i.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener)}get el(){return n(this)}};v.style=":host{display:block}";export{v as vviinn_vpr_button}
|