/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { BasicEventData, ChangedFiltersEventData, CrossSellingClickEventData, DynamicFilterInternalData, DynamicFilterTrackingData, ImageUploadEventData, NoResultEventData, ProductCardEventData, RedirectEventData, SearchIdEventData, SelectFilterEventData, SelectObjectEventData, TextSearchEventData, TriggerSourceEventData } from "./recommendation/events"; import { SearchStore, SearchStoreName } from "./store/search.store"; import { CarouselMode } from "./components/vviinn-carousel/vviinn-carousel"; import { Locale } from "./locale"; import { CampaignName, CampaignTypeId } from "./campaign/Campaign"; import { BasePrice, EnergyCertification, EnergyClassIconDirection, EntityType, Interval, IntervalFilterValueItem, ProductImage, Recommendation, Rectangle } from "./interfaces"; import { UpdateButtonLocation } from "./components/vviinn-vpr-widget/vviinn-vpr-widget"; import { CropEndEventData, LoadImageEventData } from "./components/vviinn-cropper/types"; import { ErrorType } from "./components/vviinn-error/index"; import { Histogram } from "./components/vviinn-range-filter/vviinn-range-filter"; import { CarouselMode as CarouselMode1 } from "./components/vviinn-carousel/vviinn-carousel"; import { OneClickDiscoveryAppendMode, OneClickDiscoveryMode, SearchBarMode, VisualSearchMode } from "./widget/types"; import { ReplaceSlotsContentInParent } from "./components/vviinn-results/vviinn-results"; import { ShopTheLookEventData } from "./components/vviinn-shop-the-look/vviinn-shop-the-look"; import { Mode, UpdateButtonLocation as UpdateButtonLocation1 } from "./components/vviinn-vpr-widget/vviinn-vpr-widget"; export { BasicEventData, ChangedFiltersEventData, CrossSellingClickEventData, DynamicFilterInternalData, DynamicFilterTrackingData, ImageUploadEventData, NoResultEventData, ProductCardEventData, RedirectEventData, SearchIdEventData, SelectFilterEventData, SelectObjectEventData, TextSearchEventData, TriggerSourceEventData } from "./recommendation/events"; export { SearchStore, SearchStoreName } from "./store/search.store"; export { CarouselMode } from "./components/vviinn-carousel/vviinn-carousel"; export { Locale } from "./locale"; export { CampaignName, CampaignTypeId } from "./campaign/Campaign"; export { BasePrice, EnergyCertification, EnergyClassIconDirection, EntityType, Interval, IntervalFilterValueItem, ProductImage, Recommendation, Rectangle } from "./interfaces"; export { UpdateButtonLocation } from "./components/vviinn-vpr-widget/vviinn-vpr-widget"; export { CropEndEventData, LoadImageEventData } from "./components/vviinn-cropper/types"; export { ErrorType } from "./components/vviinn-error/index"; export { Histogram } from "./components/vviinn-range-filter/vviinn-range-filter"; export { CarouselMode as CarouselMode1 } from "./components/vviinn-carousel/vviinn-carousel"; export { OneClickDiscoveryAppendMode, OneClickDiscoveryMode, SearchBarMode, VisualSearchMode } from "./widget/types"; export { ReplaceSlotsContentInParent } from "./components/vviinn-results/vviinn-results"; export { ShopTheLookEventData } from "./components/vviinn-shop-the-look/vviinn-shop-the-look"; export { Mode, UpdateButtonLocation as UpdateButtonLocation1 } from "./components/vviinn-vpr-widget/vviinn-vpr-widget"; export namespace Components { /** * Visual presentation for a button. Does not handle interaction logic itself. * This component is not intended to be used directly - only within other button components. */ interface VviinnButton { "addStyle": boolean; } interface VviinnCamera { "apiPath"?: string; "basicEventData": BasicEventData; "cameraButtonClicked": boolean; "exampleImageSource": string; "height": number; "showInWidget": boolean; "srcObject": MediaStream; "state": SearchStore; "storeName": SearchStoreName; "token": string; "width": number; } interface VviinnCarousel { "addPriceContainer"?: boolean; "addToBasketShow": boolean; "campaignTypeId": CampaignTypeId; "currencySign": string; "favoriteShow": boolean; "gridArrowsDynamic": boolean; "hasErrorOnLoad"?: boolean; "imageResolutionWidth": number; "imageWidth": number; "isAppended"?: boolean; "loading"?: boolean; "locale": Locale; "mode": CarouselMode; "numberLocale"?: string; "pricePrefix": string; "recommendations": Recommendation[]; "replaceSlotsContent": () => void; "setItemsAmount"?: number; "setModeDiscountsArray": number[]; "showInWidget": boolean; "showMultipleImages": boolean; "showScroll": boolean; "sourceProduct": Recommendation; "updateButtonLocation": UpdateButtonLocation; "updatingAllCards": boolean; "widgetElementId"?: string; "widgetVersion": string; } interface VviinnCropper { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Automatically trigger visual search after crop. Set to false to handle search manually via vviinnCropperCropEnd event */ "autoSearch"?: boolean; "basicEventData": BasicEventData; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; "height"?: number; /** * Save to Local Storage mode for uploaded image */ "saveImageMode"?: "once" | "always" | "never"; "showAspectRatioError": boolean; "showInWidget": boolean; /** * Vviinn customer's token */ "token": string; "width": number; } interface VviinnDetectedObject { "basicEventData": BasicEventData; "detectedObject": Rectangle; "imageBounds": Rectangle | null; "selectedDetectedObject": Rectangle; "showInWidget": boolean; } interface VviinnEnergyLabel { "certificationClass"?: EnergyCertification["certificationClass"]; "classDataSheetUrl"?: EnergyCertification["classDataSheetUrl"]; "classIconUrls"?: EnergyCertification["classIconUrls"]; "classRange"?: EnergyCertification["classRange"]; "iconDirection": EnergyClassIconDirection; "productType"?: EnergyCertification["productType"]; } interface VviinnError { "errorType"?: ErrorType; "handler"?: VoidFunction; "hasBackground": boolean; "searchType"?: string; } interface VviinnExtendedFilters { /** * The currency sign displayed after price values */ "currencySign"?: string; "filtersString": string; /** * Locale for text localization */ "locale"?: Locale; "mode": | "button" | "preview" | "preview-inline" | "modal"; /** * Minimum number of filter options required to show search bar in preview-inline mode. Set to 0 to always show, or a high number to never show. */ "searchThreshold"?: number; "showHeader"?: boolean; "showInWidget": boolean; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs": boolean; "showingInButton": boolean; "widgetElement"?: HTMLVviinnVpsWidgetElement; } interface VviinnExtendedFiltersButton { "handleClick": () => void; "showInWidget"?: boolean; } interface VviinnFilters { "filtersString": string; "showInWidget": boolean; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs": boolean; } /** * Encapsulated image component with customizable styling and built-in placeholder support. */ interface VviinnImage { /** * Image alt text */ "alt": string; /** * Background color (applied to image container) */ "backgroundColor": string; /** * Border (applied to image container) */ "border": string; /** * Border radius (can use CSS custom properties) */ "borderRadius": string; /** * Custom CSS classes to apply */ "customClass": string; /** * Type of the entity */ "entityType": EntityType; /** * Ref callback for the image element */ "imageRef"?: (el: HTMLImageElement | null) => void; /** * Image processing width for URL optimization */ "imageResolutionWidth"?: number; /** * Image title attribute */ "imageTitle": string; /** * Whether component is in set mode shows sparkle icon in loading state */ "isSetMode": boolean; /** * Callback for when image loading ends (load or error) */ "loadEndCallback"?: () => void; /** * How the image should fit within its container */ "objectFit": "contain" | "cover" | "fill" | "none" | "scale-down"; /** * Whether to enable responsive behavior (width: 100%, height: auto) */ "responsive": boolean; /** * Whether to show loading state with skeleton animation */ "showSkeleton": boolean; /** * Image source URL */ "src"?: string; /** * Image width in pixels */ "width"?: number; } interface VviinnImageSelector { "accept": string; "apiPath"?: string; "basicEventData": BasicEventData; "loading": boolean; "resetVpsButton": () => void; "showInWidget": boolean; "startUpload": boolean; "state": SearchStore; "storeName": SearchStoreName; "token": string; } interface VviinnModal { "active": boolean; "buttonElementId"?: string; "hideBackButton": boolean; "isFirstScreen": boolean; "resetState": () => void; "widgetVersion": string; } interface VviinnOverlay { "active": boolean; } interface VviinnOverlayedModal { "active": boolean; "buttonElementId"?: string; "hideBackButton": boolean; "isFirstScreen": boolean; "resetState": () => void; "widgetVersion": string; } interface VviinnPreloader { } interface VviinnPrivacyBadge { "privacyBadgeText": string; } interface VviinnProductCard { "addPriceContainer"?: boolean; "addToBasketShow": boolean; "appliedDiscountPercentage"?: number; "basePrice"?: BasePrice | string | null; "baseSalePrice": BasePrice | string | null; "brand": string | undefined; "buttonElementId"?: string; "campaignTypeId": CampaignTypeId; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; "currencySign": string | undefined; "currentDiscountPercentage"?: number; "customLabels": string; "deeplink": string | undefined; "defaultAnimationInterval": number; "disableMobileSwiper": boolean; "energyCertifications"?: EnergyCertification[]; "energyCertificationsString": string; "entityType": EntityType; "favoriteShow": boolean; "image": string | undefined; "imageResolutionWidth": number; "imageWidth": number; "images": ProductImage[]; "index": number; "isResultsWidget": boolean; "isSetMode": boolean; "isSourceProduct": boolean; "isStandalone": boolean; "loading": boolean; "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; "price": number | undefined; "pricePrefix"?: string; "product"?: Recommendation; "productId": string; "productTitle": string; "productType": string | undefined; "responsive": boolean; "salePrice": number | undefined; "showFooterArrow": boolean; /** * Show multiple images: swiper on mobile, hover on desktop */ "showMultipleImages": boolean; "updateButtonLocation": UpdateButtonLocation; "updatingAllCards": boolean; "widgetElementId"?: string; "widgetVersion": string; } interface VviinnRangeFilter { /** * The currency sign displayed after price values */ "currencySign"?: string; "histogram": Histogram; "intervalChangeHandler": (filterValue: IntervalFilterValueItem) => void; "selectedInterval"?: Interval; "showCurrency": boolean; /** * Show editable input fields instead of readonly labels */ "showIntervalInputs": boolean; } interface VviinnRecommendationsSidebar { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; "apiPath": string; "buttonChildren": HTMLCollection; "buttonElementId"?: string; "campaignType": CampaignName; /** * comma-separated list of campaign-ids */ "campaigns": string; "color": string; "cssUrl": string | null; "currencySign": string; "excluded": string; "favoriteShow": boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic": boolean; "imageResolutionWidth": number; "imageWidth": number; "isAppended": boolean; "locale": Locale; "mode": CarouselMode1; "noResultShow": boolean; "noResultText": string; "numberLocale"?: string; "position": "bottom" | "right"; "pricePrefix": string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab": boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect": boolean; "productId": string; "setItemsAmount"?: number; "setModeDiscounts": string; "showFilters": boolean; "showInCustomContainer": boolean; "showInModal": boolean; "showInWidget": boolean; "showMultipleImages": boolean; "showingInButton": boolean; "sidebarSubtitle": string; "sidebarTitle": string; "token": string; "triggerElement"?: HTMLElement; "uiSessionId"?: string; "updateButtonLocation": UpdateButtonLocation; "useCarousel": boolean; "widgetScrollbar": boolean; "widgetVersion": string; } interface VviinnResults { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; "buttonElementId"?: string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch": string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Show or hide Favorite button */ "favoriteShow": boolean; /** * Column for performing Product Listing Page request */ "filterColumn"?: string; /** * Value for performing Product Listing Page request */ "filterValue"?: string; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns": string; /** * One-Click Discovery Mode */ "oneClickDiscoveryMode"?: OneClickDiscoveryMode; "parentSlots"?: HTMLSlotElement[]; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; "replaceSlotsContentInButton"?: ReplaceSlotsContentInParent; "replaceSlotsContentInWidget"?: ReplaceSlotsContentInParent; "resetWidgetState"?: () => void; /** * Number of results displayed for text search and product listing page (less or equal to the value, set in the campaign) */ "resultsCount"?: number; /** * Custom URL param names parsed from results page URL. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page. When set, the component parses URL parameters (query, searchId) on load. */ "resultsPageUrl"?: string; "scrollableModalBody"?: HTMLElement; /** * Search ID for results request */ "searchId"?: string; "showAspectRatioError"?: boolean; "showInWidget"?: boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages": boolean; /** * Query to perform a text search. It is recommended to use the search-query prop for vviinn-text-search instead, when using the Search Bar on the same page. */ "textSearchQuery"?: string; /** * Vviinn customer's token (required) */ "token": string; /** * uiSessionId from vps-widget */ "uiSessionId"?: string; "useInnerState"?: boolean; "widgetElementId"?: string; } interface VviinnSelectedFilters { /** * The currency sign displayed after price values */ "currencySign"?: string; /** * Locale for text localization */ "locale"?: Locale; "showInWidget": boolean; } /** * Interactive "Shop-the-Look" widget that enables visual product search on fashion/interior images. * Users can click on hotspots (detected objects) to discover similar products and see recommendations in a modal. * Supports multiple images with swiper navigation, responsive design, and customizable styling. */ interface VviinnShopTheLook { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Campaign ID for visual search requests */ "campaignId": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Height of the widget in pixels */ "height": number; /** * Comma-separated list of image URLs to display in the widget */ "imageUrls": string; /** * Locale for text localization */ "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Open product links in new tab */ "productDetailsNewTab": boolean; /** * Enable product detail redirects on click */ "productDetailsRedirect": boolean; /** * Enable cropper mode for manual area selection */ "showCropper": boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages": boolean; /** * Vviinn customer's token (required) */ "token": string; /** * Enable upload mode to allow users to upload their own images */ "uploadMode": boolean; /** * Style variant for corner styling - 'rounded' for rounded corners, 'cornered' for sharp corners */ "widgetStyle": "rounded" | "cornered"; } interface VviinnSkeleton { "aspectRatio"?: number; "halfWidth": boolean; "height": number; } interface VviinnSlide { } interface VviinnSlider { "position": number; } interface VviinnSuggestions { "apiPath"?: string; "currencySign"?: string; "locale"?: Locale; "pricePrefix"?: string; "showInWidget": boolean; "token"?: string; } interface VviinnTeaser { } interface VviinnTextSearch { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow": boolean; "basicEventData": BasicEventData; /** * URL to external CSS file for custom styling of the visual search modal */ "cssUrl"?: string | null; /** * Example image shown in the visual search modal */ "exampleImageSource"?: string; /** * Locale for text localization */ "locale"?: Locale; /** * Basic or extended text search with search modal and speech recognition */ "mode": SearchBarMode; /** * Custom placeholder for the text search input */ "placeholder"?: string; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Query for the text search passed from widget */ "searchQuery"?: string; "showInWidget": boolean; "showOnFirstScreen": boolean; /** * Vviinn customer's token (required) */ "token": string; "uiSessionId"?: string; /** * Visual search modal mode (modal/camera/upload) */ "visualSearchMode"?: VisualSearchMode; } interface VviinnVprButton { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Add default styles to the button */ "addStyle": boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; "appendSidebarToElement": HTMLElement; "appendSidebarToId": string; /** * Campaign type */ "campaignType": CampaignName; /** * Comma-separated list of campaign IDs */ "campaigns": string; /** * Accepts any hex color code */ "color": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded": string; /** * Show or hide Favorite button */ "favoriteShow": boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic": boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth": number; /** * Width of each recommended product image in Continuity mode */ "imageWidth": number; "isStandalone": boolean; /** * Locale for text localization */ "locale"?: Locale; /** * Show or hide the scrollbar */ "modalScrollbar": boolean; /** * Switch between carousel modes */ "mode": CarouselMode1; /** * Showing a message (when true) or hiding the whole widget, when no results */ "noResultShow": boolean; /** * A custom message is displayed when no results */ "noResultText": string; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * One-Click Discovery mode */ "oneClickDiscoveryMode"?: OneClickDiscoveryMode; /** * Position of the modal */ "position": "bottom" | "right"; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab": boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect": boolean; /** * ID of product you need recommendations for (required) */ "productId": string; /** * Items amount in set mode grid */ "setItemsAmount"?: number; /** * List of discounts for Set mode. Example: "5, 10, 15, 20" (could be less than 4 numbers) */ "setModeDiscounts": string; /** * Show filters on top */ "showFilters": boolean; "showInWidget": boolean; /** * Show multiple images on hover (desktop only) */ "showMultipleImages": boolean; /** * Widget's subtitle */ "sidebarSubtitle": string; /** * Sidebar title */ "sidebarTitle": string; /** * Vviinn customer's token (required) */ "token": string; "uiSessionId"?: string; /** * Location of Update button for Set mode */ "updateButtonLocation": UpdateButtonLocation; } interface VviinnVprWidget { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Widget's subtitle */ "blockSubtitle": string; /** * Widget's title */ "blockTitle": string; "buttonElementId"?: string; /** * Campaign type */ "campaignType": CampaignName; /** * Comma-separated list of campaign IDs */ "campaigns": string; "closed"?: boolean; /** * Accepts any hex color code */ "color": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded": string; /** * Show or hide Favorite button */ "favoriteShow": boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic": boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth": number; /** * Width of each recommended product image in Continuity mode */ "imageWidth": number; "isAppended"?: boolean; /** * Locale for text localization */ "locale"?: Locale; /** * Switch between carousel modes */ "mode": Mode; /** * Showing a message (when true) or hiding the whole widget, when no results */ "noResultShow": boolean; /** * A custom message is displayed when no results */ "noResultText": string; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; "opened"?: boolean; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab": boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect": boolean; /** * ID of product you need recommendations for (required) */ "productId": string; "recommendationsLoading"?: boolean; /** * Items amount in set mode grid */ "setItemsAmount"?: number; /** * List of discounts for Set mode. Example: "5, 10, 15, 20" (could be less than 4 numbers) */ "setModeDiscounts": string; "setRecommendationsLoading"?: (loading: boolean) => void; /** * Show extended filters on top */ "showExtendedFilters": boolean; /** * Show filters on top */ "showFilters": boolean; "showInWidget": boolean; /** * Show multiple images on hover (desktop only) */ "showMultipleImages": boolean; /** * Show or hide the widget's scrollbar */ "showScroll": boolean; "showingInButton": boolean; /** * Vviinn customer's token (required) */ "token": string; "uiSessionId"?: string; /** * Location of Update button for Set mode */ "updateButtonLocation": UpdateButtonLocation1; "useCarousel": boolean; } interface VviinnVpsButton { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Add style to the button */ "addStyle": boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow": boolean; /** * Campaign ID used for Visual Search (deprecated) */ "campaignId": string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch": string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Example image source */ "exampleImageSource": string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded": string; /** * Show or hide Favorite button */ "favoriteShow": boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth": number; /** * Locale for text localization */ "locale"?: Locale; /** * Show the onboarding step, start the camera on opening, or skip the onboarding and move to the direct image upload. */ "mode": VisualSearchMode; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns": string; /** * One-Click Discovery mode, restricted to append only (no modal supported for this component) */ "oneClickDiscoveryMode"?: OneClickDiscoveryAppendMode; "parentSlots"?: HTMLSlotElement[]; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab": boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect": boolean; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs": boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages": boolean; /** * Render results in modal. Set false to redirect or show results on the page. */ "showResultsInModal"?: boolean; /** * Show the text search */ "textSearchShow": boolean; /** * Vviinn customer's token (required) */ "token": string; } interface VviinnVpsWidget { /** * Toggle the widget's modal showing */ "active": boolean; /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow": boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow": boolean; "buttonElementId"?: string; "buttonPressed"?: boolean; /** * Campaign ID used for Visual Search (deprecated) */ "campaignId": string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch": string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch": string; /** * URL to external CSS file for custom styling */ "cssUrl": string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Example image source */ "exampleImageSource": string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded": string; /** * Show or hide Favorite button */ "favoriteShow": boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth": number; /** * Locale for text localization */ "locale"?: Locale; "mode": VisualSearchMode; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns": string; /** * One-Click Discovery mode, restricted to append only (no modal supported for this component) */ "oneClickDiscoveryMode"?: OneClickDiscoveryAppendMode; "parentSlots"?: HTMLSlotElement[]; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab": boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect": boolean; "replaceSlotsContentInButton"?: () => void; "resetVpsButton": () => void; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs": boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages": boolean; /** * Render results in modal. Set false to redirect or show results on the page. */ "showResultsInModal"?: boolean; "showingInButton"?: boolean; /** * Show the text search */ "textSearchShow": boolean; /** * Vviinn customer's token (required) */ "token": string; } } export interface VviinnCameraCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnCameraElement; } export interface VviinnCarouselCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnCarouselElement; } export interface VviinnCropperCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnCropperElement; } export interface VviinnDetectedObjectCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnDetectedObjectElement; } export interface VviinnExtendedFiltersCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnExtendedFiltersElement; } export interface VviinnExtendedFiltersButtonCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnExtendedFiltersButtonElement; } export interface VviinnFiltersCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnFiltersElement; } export interface VviinnImageCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnImageElement; } export interface VviinnImageSelectorCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnImageSelectorElement; } export interface VviinnModalCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnModalElement; } export interface VviinnOverlayedModalCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnOverlayedModalElement; } export interface VviinnProductCardCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnProductCardElement; } export interface VviinnResultsCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnResultsElement; } export interface VviinnSelectedFiltersCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnSelectedFiltersElement; } export interface VviinnShopTheLookCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnShopTheLookElement; } export interface VviinnSuggestionsCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnSuggestionsElement; } export interface VviinnTextSearchCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnTextSearchElement; } export interface VviinnVprButtonCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnVprButtonElement; } export interface VviinnVprWidgetCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnVprWidgetElement; } export interface VviinnVpsButtonCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnVpsButtonElement; } export interface VviinnVpsWidgetCustomEvent extends CustomEvent { detail: T; target: HTMLVviinnVpsWidgetElement; } declare global { /** * Visual presentation for a button. Does not handle interaction logic itself. * This component is not intended to be used directly - only within other button components. */ interface HTMLVviinnButtonElement extends Components.VviinnButton, HTMLStencilElement { } var HTMLVviinnButtonElement: { prototype: HTMLVviinnButtonElement; new (): HTMLVviinnButtonElement; }; interface HTMLVviinnCameraElementEventMap { "vviinnImageUploadStarted": ImageUploadEventData; "vviinnNoResult": BasicEventData; "vviinnImageUploadFinished": SearchIdEventData; "vviinnCameraEnabled": any; } interface HTMLVviinnCameraElement extends Components.VviinnCamera, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnCameraElement, ev: VviinnCameraCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnCameraElement, ev: VviinnCameraCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnCameraElement: { prototype: HTMLVviinnCameraElement; new (): HTMLVviinnCameraElement; }; interface HTMLVviinnCarouselElementEventMap { "vviinnProductLoad": ProductCardEventData; "vviinnProductView": ProductCardEventData; } interface HTMLVviinnCarouselElement extends Components.VviinnCarousel, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnCarouselElement, ev: VviinnCarouselCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnCarouselElement, ev: VviinnCarouselCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnCarouselElement: { prototype: HTMLVviinnCarouselElement; new (): HTMLVviinnCarouselElement; }; interface HTMLVviinnCropperElementEventMap { "vviinnImageCrop": TriggerSourceEventData; "vviinnCropperLoadImage": LoadImageEventData; "vviinnCropperCropEnd": CropEndEventData; "vviinnNoResult": BasicEventData; "vviinnCropperAspectRatioError": boolean; "vviinnCropperResetState": TriggerSourceEventData; "vviinnResetCropArea": TriggerSourceEventData; "vviinnSelectedFiltersReset": TriggerSourceEventData; } interface HTMLVviinnCropperElement extends Components.VviinnCropper, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnCropperElement, ev: VviinnCropperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnCropperElement, ev: VviinnCropperCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnCropperElement: { prototype: HTMLVviinnCropperElement; new (): HTMLVviinnCropperElement; }; interface HTMLVviinnDetectedObjectElementEventMap { "vviinnSelectObject": SelectObjectEventData; } interface HTMLVviinnDetectedObjectElement extends Components.VviinnDetectedObject, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnDetectedObjectElement, ev: VviinnDetectedObjectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnDetectedObjectElement, ev: VviinnDetectedObjectCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnDetectedObjectElement: { prototype: HTMLVviinnDetectedObjectElement; new (): HTMLVviinnDetectedObjectElement; }; interface HTMLVviinnEnergyLabelElement extends Components.VviinnEnergyLabel, HTMLStencilElement { } var HTMLVviinnEnergyLabelElement: { prototype: HTMLVviinnEnergyLabelElement; new (): HTMLVviinnEnergyLabelElement; }; interface HTMLVviinnErrorElement extends Components.VviinnError, HTMLStencilElement { } var HTMLVviinnErrorElement: { prototype: HTMLVviinnErrorElement; new (): HTMLVviinnErrorElement; }; interface HTMLVviinnExtendedFiltersElementEventMap { "vviinnFiltersChanged": ChangedFiltersEventData; "vviinnFilterTriggered": DynamicFilterTrackingData; "globalSlotsChanged": any; "vviinnSelectedFiltersReset": TriggerSourceEventData; "vviinnExtendedFiltersButtonClicked": TriggerSourceEventData; } interface HTMLVviinnExtendedFiltersElement extends Components.VviinnExtendedFilters, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnExtendedFiltersElement, ev: VviinnExtendedFiltersCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnExtendedFiltersElement, ev: VviinnExtendedFiltersCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnExtendedFiltersElement: { prototype: HTMLVviinnExtendedFiltersElement; new (): HTMLVviinnExtendedFiltersElement; }; interface HTMLVviinnExtendedFiltersButtonElementEventMap { "vviinnExtendedFiltersButtonClicked": TriggerSourceEventData; } interface HTMLVviinnExtendedFiltersButtonElement extends Components.VviinnExtendedFiltersButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnExtendedFiltersButtonElement, ev: VviinnExtendedFiltersButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnExtendedFiltersButtonElement, ev: VviinnExtendedFiltersButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnExtendedFiltersButtonElement: { prototype: HTMLVviinnExtendedFiltersButtonElement; new (): HTMLVviinnExtendedFiltersButtonElement; }; interface HTMLVviinnFiltersElementEventMap { "vviinnFiltersChanged": ChangedFiltersEventData; "vviinnFilterTriggered": DynamicFilterInternalData; "globalSlotsChanged": any; "vviinnSelectedFiltersReset": TriggerSourceEventData; } interface HTMLVviinnFiltersElement extends Components.VviinnFilters, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnFiltersElement, ev: VviinnFiltersCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnFiltersElement, ev: VviinnFiltersCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnFiltersElement: { prototype: HTMLVviinnFiltersElement; new (): HTMLVviinnFiltersElement; }; interface HTMLVviinnImageElementEventMap { "vviinnImageLoad": void; "vviinnImageError": void; } /** * Encapsulated image component with customizable styling and built-in placeholder support. */ interface HTMLVviinnImageElement extends Components.VviinnImage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnImageElement, ev: VviinnImageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnImageElement, ev: VviinnImageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnImageElement: { prototype: HTMLVviinnImageElement; new (): HTMLVviinnImageElement; }; interface HTMLVviinnImageSelectorElementEventMap { "vviinnImageUploadStarted": ImageUploadEventData; "vviinnNoResult": NoResultEventData; "vviinnImageUploadFinished": SearchIdEventData; } interface HTMLVviinnImageSelectorElement extends Components.VviinnImageSelector, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnImageSelectorElement, ev: VviinnImageSelectorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnImageSelectorElement, ev: VviinnImageSelectorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnImageSelectorElement: { prototype: HTMLVviinnImageSelectorElement; new (): HTMLVviinnImageSelectorElement; }; interface HTMLVviinnModalElementEventMap { "vviinnWidgetClose": BasicEventData; } interface HTMLVviinnModalElement extends Components.VviinnModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnModalElement, ev: VviinnModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnModalElement, ev: VviinnModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnModalElement: { prototype: HTMLVviinnModalElement; new (): HTMLVviinnModalElement; }; interface HTMLVviinnOverlayElement extends Components.VviinnOverlay, HTMLStencilElement { } var HTMLVviinnOverlayElement: { prototype: HTMLVviinnOverlayElement; new (): HTMLVviinnOverlayElement; }; interface HTMLVviinnOverlayedModalElementEventMap { "vviinnWidgetClose": BasicEventData; } interface HTMLVviinnOverlayedModalElement extends Components.VviinnOverlayedModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnOverlayedModalElement, ev: VviinnOverlayedModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnOverlayedModalElement, ev: VviinnOverlayedModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnOverlayedModalElement: { prototype: HTMLVviinnOverlayedModalElement; new (): HTMLVviinnOverlayedModalElement; }; interface HTMLVviinnPreloaderElement extends Components.VviinnPreloader, HTMLStencilElement { } var HTMLVviinnPreloaderElement: { prototype: HTMLVviinnPreloaderElement; new (): HTMLVviinnPreloaderElement; }; interface HTMLVviinnPrivacyBadgeElement extends Components.VviinnPrivacyBadge, HTMLStencilElement { } var HTMLVviinnPrivacyBadgeElement: { prototype: HTMLVviinnPrivacyBadgeElement; new (): HTMLVviinnPrivacyBadgeElement; }; interface HTMLVviinnProductCardElementEventMap { "vviinnProductLoad": ProductCardEventData; "vviinnProductView": ProductCardEventData; "vviinnProductClick": ProductCardEventData; "vviinnAddToBasket": ProductCardEventData; "vviinnAddToFavorite": ProductCardEventData; "vviinnAuxClick": ProductCardEventData; "vviinnCrossSellingClick": CrossSellingClickEventData; "vviinnUpdatingAllCardsStarted": any; "vviinnUpdatingAllCardsFinished": any; } interface HTMLVviinnProductCardElement extends Components.VviinnProductCard, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnProductCardElement, ev: VviinnProductCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnProductCardElement, ev: VviinnProductCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnProductCardElement: { prototype: HTMLVviinnProductCardElement; new (): HTMLVviinnProductCardElement; }; interface HTMLVviinnRangeFilterElement extends Components.VviinnRangeFilter, HTMLStencilElement { } var HTMLVviinnRangeFilterElement: { prototype: HTMLVviinnRangeFilterElement; new (): HTMLVviinnRangeFilterElement; }; interface HTMLVviinnRecommendationsSidebarElement extends Components.VviinnRecommendationsSidebar, HTMLStencilElement { } var HTMLVviinnRecommendationsSidebarElement: { prototype: HTMLVviinnRecommendationsSidebarElement; new (): HTMLVviinnRecommendationsSidebarElement; }; interface HTMLVviinnResultsElementEventMap { "vviinnProductLoad": ProductCardEventData; "vviinnProductView": ProductCardEventData; "vviinnProductClick": ProductCardEventData; "vviinnResultLoad": BasicEventData; "vviinnResultView": BasicEventData; "vviinnTextSearchStarted": TextSearchEventData; "vviinnFiltersChanged": ChangedFiltersEventData; "vviinnCropperResetState": TriggerSourceEventData; "vviinnNoResult": BasicEventData; "globalSlotsChanged": any; "vviinnSelectedFiltersReset": TriggerSourceEventData; } interface HTMLVviinnResultsElement extends Components.VviinnResults, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnResultsElement, ev: VviinnResultsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnResultsElement, ev: VviinnResultsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnResultsElement: { prototype: HTMLVviinnResultsElement; new (): HTMLVviinnResultsElement; }; interface HTMLVviinnSelectedFiltersElementEventMap { "vviinnFiltersChanged": ChangedFiltersEventData; "vviinnFilterTriggered": DynamicFilterInternalData; "vviinnSelectedFiltersReset": TriggerSourceEventData; "vviinnCropperResetState": TriggerSourceEventData; "vviinnResetCropArea": TriggerSourceEventData; "globalSlotsChanged": any; } interface HTMLVviinnSelectedFiltersElement extends Components.VviinnSelectedFilters, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnSelectedFiltersElement, ev: VviinnSelectedFiltersCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnSelectedFiltersElement, ev: VviinnSelectedFiltersCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnSelectedFiltersElement: { prototype: HTMLVviinnSelectedFiltersElement; new (): HTMLVviinnSelectedFiltersElement; }; interface HTMLVviinnShopTheLookElementEventMap { "vviinnShopTheLookDetectedObjectClick": ShopTheLookEventData; "vviinnShopTheLookProductClick": ShopTheLookEventData; "vviinnShopTheLookModalClose": BasicEventData; } /** * Interactive "Shop-the-Look" widget that enables visual product search on fashion/interior images. * Users can click on hotspots (detected objects) to discover similar products and see recommendations in a modal. * Supports multiple images with swiper navigation, responsive design, and customizable styling. */ interface HTMLVviinnShopTheLookElement extends Components.VviinnShopTheLook, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnShopTheLookElement, ev: VviinnShopTheLookCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnShopTheLookElement, ev: VviinnShopTheLookCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnShopTheLookElement: { prototype: HTMLVviinnShopTheLookElement; new (): HTMLVviinnShopTheLookElement; }; interface HTMLVviinnSkeletonElement extends Components.VviinnSkeleton, HTMLStencilElement { } var HTMLVviinnSkeletonElement: { prototype: HTMLVviinnSkeletonElement; new (): HTMLVviinnSkeletonElement; }; interface HTMLVviinnSlideElement extends Components.VviinnSlide, HTMLStencilElement { } var HTMLVviinnSlideElement: { prototype: HTMLVviinnSlideElement; new (): HTMLVviinnSlideElement; }; interface HTMLVviinnSliderElement extends Components.VviinnSlider, HTMLStencilElement { } var HTMLVviinnSliderElement: { prototype: HTMLVviinnSliderElement; new (): HTMLVviinnSliderElement; }; interface HTMLVviinnSuggestionsElementEventMap { "vviinnFiltersChanged": ChangedFiltersEventData; "vviinnFilterTriggered": DynamicFilterInternalData; "globalSlotsChanged": any; } interface HTMLVviinnSuggestionsElement extends Components.VviinnSuggestions, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnSuggestionsElement, ev: VviinnSuggestionsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnSuggestionsElement, ev: VviinnSuggestionsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnSuggestionsElement: { prototype: HTMLVviinnSuggestionsElement; new (): HTMLVviinnSuggestionsElement; }; interface HTMLVviinnTeaserElement extends Components.VviinnTeaser, HTMLStencilElement { } var HTMLVviinnTeaserElement: { prototype: HTMLVviinnTeaserElement; new (): HTMLVviinnTeaserElement; }; interface HTMLVviinnTextSearchElementEventMap { "vviinnImageUploadFinished": SearchIdEventData; "vviinnFilterTriggered": DynamicFilterInternalData; "vviinnTextSearchStarted": TextSearchEventData; "widgetTextSearchFinished": TextSearchEventData; "vviinnSelectedFiltersReset": TriggerSourceEventData; "vviinnNoResult": BasicEventData; "vviinnRedirect": RedirectEventData; } interface HTMLVviinnTextSearchElement extends Components.VviinnTextSearch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnTextSearchElement, ev: VviinnTextSearchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnTextSearchElement, ev: VviinnTextSearchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnTextSearchElement: { prototype: HTMLVviinnTextSearchElement; new (): HTMLVviinnTextSearchElement; }; interface HTMLVviinnVprButtonElementEventMap { "vviinnWidgetLoad": BasicEventData; "vviinnWidgetOpen": BasicEventData; "vviinnWidgetClose": BasicEventData; "vviinnProductLoad": ProductCardEventData; "vviinnProductClick": ProductCardEventData; "vviinnProductView": ProductCardEventData; "vviinnResultLoad": BasicEventData; "vviinnResultView": BasicEventData; "vviinnNoResult": BasicEventData; "vviinnAddToBasket": BasicEventData; "vviinnVprButtonActivated": void; } interface HTMLVviinnVprButtonElement extends Components.VviinnVprButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnVprButtonElement, ev: VviinnVprButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnVprButtonElement, ev: VviinnVprButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnVprButtonElement: { prototype: HTMLVviinnVprButtonElement; new (): HTMLVviinnVprButtonElement; }; interface HTMLVviinnVprWidgetElementEventMap { "vviinnWidgetLoad": BasicEventData; "vviinnProductLoad": ProductCardEventData; "vviinnProductView": ProductCardEventData; "vviinnProductClick": ProductCardEventData; "vviinnResultLoad": BasicEventData; "vviinnResultView": BasicEventData; "vviinnNoResult": BasicEventData; "vviinnAddToBasket": BasicEventData; "vviinnFiltersChanged": ChangedFiltersEventData; "globalSlotsChanged": any; "vviinnRecommendationsLoaded": any; "vviinnWidgetOpen": BasicEventData; "vviinnWidgetClose": BasicEventData; "vviinnOneClickDiscoveryAppendClosed": TriggerSourceEventData; "sourceProductReceived": Recommendation; } interface HTMLVviinnVprWidgetElement extends Components.VviinnVprWidget, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnVprWidgetElement, ev: VviinnVprWidgetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnVprWidgetElement, ev: VviinnVprWidgetCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnVprWidgetElement: { prototype: HTMLVviinnVprWidgetElement; new (): HTMLVviinnVprWidgetElement; }; interface HTMLVviinnVpsButtonElementEventMap { "vviinnWidgetLoad": BasicEventData; "vviinnWidgetOpen": BasicEventData; "vviinnWidgetClose": BasicEventData; "vviinnImageUploadStarted": ImageUploadEventData; "vviinnProductLoad": ProductCardEventData; "vviinnProductClick": ProductCardEventData; "vviinnProductView": ProductCardEventData; "vviinnResultLoad": BasicEventData; "vviinnResultView": BasicEventData; "vviinnNoResult": BasicEventData; "vviinnImageCrop": BasicEventData; "vviinnSelectObject": SelectObjectEventData; "vviinnSelectFilter": SelectFilterEventData; "globalSlotsChanged": any; } interface HTMLVviinnVpsButtonElement extends Components.VviinnVpsButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnVpsButtonElement, ev: VviinnVpsButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnVpsButtonElement, ev: VviinnVpsButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnVpsButtonElement: { prototype: HTMLVviinnVpsButtonElement; new (): HTMLVviinnVpsButtonElement; }; interface HTMLVviinnVpsWidgetElementEventMap { "globalSlotsChanged": any; "vviinnWidgetLoad": BasicEventData; "vviinnWidgetOpen": BasicEventData; "vviinnWidgetClose": BasicEventData; "vviinnImageCrop": BasicEventData; "vviinnSelectObject": SelectObjectEventData; "vviinnSelectFilter": SelectFilterEventData; "vviinnImageUploadStarted": ImageUploadEventData; "vviinnNoResult": BasicEventData; "vviinnRedirect": RedirectEventData; } interface HTMLVviinnVpsWidgetElement extends Components.VviinnVpsWidget, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLVviinnVpsWidgetElement, ev: VviinnVpsWidgetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLVviinnVpsWidgetElement, ev: VviinnVpsWidgetCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLVviinnVpsWidgetElement: { prototype: HTMLVviinnVpsWidgetElement; new (): HTMLVviinnVpsWidgetElement; }; interface HTMLElementTagNameMap { "vviinn-button": HTMLVviinnButtonElement; "vviinn-camera": HTMLVviinnCameraElement; "vviinn-carousel": HTMLVviinnCarouselElement; "vviinn-cropper": HTMLVviinnCropperElement; "vviinn-detected-object": HTMLVviinnDetectedObjectElement; "vviinn-energy-label": HTMLVviinnEnergyLabelElement; "vviinn-error": HTMLVviinnErrorElement; "vviinn-extended-filters": HTMLVviinnExtendedFiltersElement; "vviinn-extended-filters-button": HTMLVviinnExtendedFiltersButtonElement; "vviinn-filters": HTMLVviinnFiltersElement; "vviinn-image": HTMLVviinnImageElement; "vviinn-image-selector": HTMLVviinnImageSelectorElement; "vviinn-modal": HTMLVviinnModalElement; "vviinn-overlay": HTMLVviinnOverlayElement; "vviinn-overlayed-modal": HTMLVviinnOverlayedModalElement; "vviinn-preloader": HTMLVviinnPreloaderElement; "vviinn-privacy-badge": HTMLVviinnPrivacyBadgeElement; "vviinn-product-card": HTMLVviinnProductCardElement; "vviinn-range-filter": HTMLVviinnRangeFilterElement; "vviinn-recommendations-sidebar": HTMLVviinnRecommendationsSidebarElement; "vviinn-results": HTMLVviinnResultsElement; "vviinn-selected-filters": HTMLVviinnSelectedFiltersElement; "vviinn-shop-the-look": HTMLVviinnShopTheLookElement; "vviinn-skeleton": HTMLVviinnSkeletonElement; "vviinn-slide": HTMLVviinnSlideElement; "vviinn-slider": HTMLVviinnSliderElement; "vviinn-suggestions": HTMLVviinnSuggestionsElement; "vviinn-teaser": HTMLVviinnTeaserElement; "vviinn-text-search": HTMLVviinnTextSearchElement; "vviinn-vpr-button": HTMLVviinnVprButtonElement; "vviinn-vpr-widget": HTMLVviinnVprWidgetElement; "vviinn-vps-button": HTMLVviinnVpsButtonElement; "vviinn-vps-widget": HTMLVviinnVpsWidgetElement; } } declare namespace LocalJSX { /** * Visual presentation for a button. Does not handle interaction logic itself. * This component is not intended to be used directly - only within other button components. */ interface VviinnButton { "addStyle"?: boolean; } interface VviinnCamera { "apiPath"?: string; "basicEventData"?: BasicEventData; "cameraButtonClicked"?: boolean; "exampleImageSource"?: string; "height"?: number; "onVviinnImageUploadFinished"?: (event: VviinnCameraCustomEvent) => void; "onVviinnImageUploadStarted"?: (event: VviinnCameraCustomEvent) => void; "onVviinnNoResult"?: (event: VviinnCameraCustomEvent) => void; "showInWidget"?: boolean; "srcObject"?: MediaStream; "state"?: SearchStore; "storeName"?: SearchStoreName; "token"?: string; "width"?: number; } interface VviinnCarousel { "addPriceContainer"?: boolean; "addToBasketShow"?: boolean; "campaignTypeId"?: CampaignTypeId; "currencySign"?: string; "favoriteShow"?: boolean; "gridArrowsDynamic"?: boolean; "hasErrorOnLoad"?: boolean; "imageResolutionWidth"?: number; "imageWidth"?: number; "isAppended"?: boolean; "loading"?: boolean; "locale"?: Locale; "mode"?: CarouselMode; "numberLocale"?: string; /** * Event emitted once when the recommendation is rendered on the page */ "onVviinnProductLoad"?: (event: VviinnCarouselCustomEvent) => void; /** * Event emitted once when the recommendation appears in the viewport */ "onVviinnProductView"?: (event: VviinnCarouselCustomEvent) => void; "pricePrefix"?: string; "recommendations"?: Recommendation[]; "replaceSlotsContent"?: () => void; "setItemsAmount"?: number; "setModeDiscountsArray"?: number[]; "showInWidget"?: boolean; "showMultipleImages"?: boolean; "showScroll"?: boolean; "sourceProduct"?: Recommendation; "updateButtonLocation"?: UpdateButtonLocation; "updatingAllCards"?: boolean; "widgetElementId"?: string; "widgetVersion"?: string; } interface VviinnCropper { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Automatically trigger visual search after crop. Set to false to handle search manually via vviinnCropperCropEnd event */ "autoSearch"?: boolean; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * Triggered when crop ends with enriched data including normalized coordinates for visual-search API */ "onVviinnCropperCropEnd"?: (event: VviinnCropperCustomEvent) => void; "onVviinnCropperLoadImage"?: (event: VviinnCropperCustomEvent) => void; "onVviinnImageCrop"?: (event: VviinnCropperCustomEvent) => void; /** * Triggered when a visual search request fails */ "onVviinnNoResult"?: (event: VviinnCropperCustomEvent) => void; /** * Save to Local Storage mode for uploaded image */ "saveImageMode"?: "once" | "always" | "never"; /** * Vviinn customer's token */ "token"?: string; "width"?: number; } interface VviinnDetectedObject { "basicEventData"?: BasicEventData; "detectedObject"?: Rectangle; "imageBounds"?: Rectangle | null; "onVviinnSelectObject"?: (event: VviinnDetectedObjectCustomEvent) => void; "selectedDetectedObject"?: Rectangle; "showInWidget"?: boolean; } interface VviinnEnergyLabel { "certificationClass"?: EnergyCertification["certificationClass"]; "classDataSheetUrl"?: EnergyCertification["classDataSheetUrl"]; "classIconUrls"?: EnergyCertification["classIconUrls"]; "classRange"?: EnergyCertification["classRange"]; "iconDirection"?: EnergyClassIconDirection; "productType"?: EnergyCertification["productType"]; } interface VviinnError { "errorType"?: ErrorType; "handler"?: VoidFunction; "hasBackground"?: boolean; "searchType"?: string; } interface VviinnExtendedFilters { /** * The currency sign displayed after price values */ "currencySign"?: string; /** * Locale for text localization */ "locale"?: Locale; "mode"?: | "button" | "preview" | "preview-inline" | "modal"; "onVviinnFilterTriggered"?: (event: VviinnExtendedFiltersCustomEvent) => void; /** * The filter's state changes */ "onVviinnFiltersChanged"?: (event: VviinnExtendedFiltersCustomEvent) => void; /** * Minimum number of filter options required to show search bar in preview-inline mode. Set to 0 to always show, or a high number to never show. */ "searchThreshold"?: number; "showHeader"?: boolean; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs"?: boolean; } interface VviinnExtendedFiltersButton { "handleClick"?: () => void; "onVviinnExtendedFiltersButtonClicked"?: (event: VviinnExtendedFiltersButtonCustomEvent) => void; "showInWidget"?: boolean; } interface VviinnFilters { "onVviinnFilterTriggered"?: (event: VviinnFiltersCustomEvent) => void; /** * The filter's state changes */ "onVviinnFiltersChanged"?: (event: VviinnFiltersCustomEvent) => void; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs"?: boolean; } /** * Encapsulated image component with customizable styling and built-in placeholder support. */ interface VviinnImage { /** * Image alt text */ "alt"?: string; /** * Background color (applied to image container) */ "backgroundColor"?: string; /** * Border (applied to image container) */ "border"?: string; /** * Border radius (can use CSS custom properties) */ "borderRadius"?: string; /** * Custom CSS classes to apply */ "customClass"?: string; /** * Type of the entity */ "entityType"?: EntityType; /** * Ref callback for the image element */ "imageRef"?: (el: HTMLImageElement | null) => void; /** * Image processing width for URL optimization */ "imageResolutionWidth"?: number; /** * Image title attribute */ "imageTitle"?: string; /** * Whether component is in set mode shows sparkle icon in loading state */ "isSetMode"?: boolean; /** * Callback for when image loading ends (load or error) */ "loadEndCallback"?: () => void; /** * How the image should fit within its container */ "objectFit"?: "contain" | "cover" | "fill" | "none" | "scale-down"; /** * Emitted when image fails to load */ "onVviinnImageError"?: (event: VviinnImageCustomEvent) => void; /** * Emitted when image loads successfully */ "onVviinnImageLoad"?: (event: VviinnImageCustomEvent) => void; /** * Whether to enable responsive behavior (width: 100%, height: auto) */ "responsive"?: boolean; /** * Whether to show loading state with skeleton animation */ "showSkeleton"?: boolean; /** * Image source URL */ "src"?: string; /** * Image width in pixels */ "width"?: number; } interface VviinnImageSelector { "accept"?: string; "apiPath"?: string; "basicEventData"?: BasicEventData; "loading"?: boolean; "onVviinnImageUploadFinished"?: (event: VviinnImageSelectorCustomEvent) => void; "onVviinnImageUploadStarted"?: (event: VviinnImageSelectorCustomEvent) => void; /** * Wrong image format (supported formats depend on the browser) */ "onVviinnNoResult"?: (event: VviinnImageSelectorCustomEvent) => void; "resetVpsButton"?: () => void; "showInWidget"?: boolean; "startUpload"?: boolean; "state"?: SearchStore; "storeName"?: SearchStoreName; "token"?: string; } interface VviinnModal { "active"?: boolean; /** * Close Button clicked and close animation ends */ "onVviinnWidgetClose"?: (event: VviinnModalCustomEvent) => void; "resetState"?: () => void; } interface VviinnOverlay { "active"?: boolean; } interface VviinnOverlayedModal { "active"?: boolean; "onVviinnWidgetClose"?: (event: VviinnOverlayedModalCustomEvent) => void; "resetState"?: () => void; } interface VviinnPreloader { } interface VviinnPrivacyBadge { "privacyBadgeText"?: string; } interface VviinnProductCard { "addPriceContainer"?: boolean; "addToBasketShow"?: boolean; "basePrice"?: BasePrice | string | null; "baseSalePrice"?: BasePrice | string | null; "brand"?: string | undefined; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; "currencySign"?: string | undefined; "customLabels"?: string; "deeplink"?: string | undefined; "energyCertifications"?: EnergyCertification[]; "entityType"?: EntityType; "favoriteShow"?: boolean; "image"?: string | undefined; "imageWidth"?: number; "images"?: ProductImage[]; "isSetMode"?: boolean; "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * User clicks on Add to Basket button */ "onVviinnAddToBasket"?: (event: VviinnProductCardCustomEvent) => void; /** * User clicks on Favorite button */ "onVviinnAddToFavorite"?: (event: VviinnProductCardCustomEvent) => void; /** * Event emitted ones when user click on deeplink */ "onVviinnProductClick"?: (event: VviinnProductCardCustomEvent) => void; /** * Event emitted once when the recommendation is rendered on the page */ "onVviinnProductLoad"?: (event: VviinnProductCardCustomEvent) => void; /** * Event emitted once when the recommendation appears in the viewport */ "onVviinnProductView"?: (event: VviinnProductCardCustomEvent) => void; "price"?: number | undefined; "pricePrefix"?: string; "productTitle"?: string; "productType"?: string | undefined; "responsive"?: boolean; "salePrice"?: number | undefined; /** * Show multiple images: swiper on mobile, hover on desktop */ "showMultipleImages"?: boolean; "updateButtonLocation"?: UpdateButtonLocation; } interface VviinnRangeFilter { /** * The currency sign displayed after price values */ "currencySign"?: string; "histogram"?: Histogram; "intervalChangeHandler"?: (filterValue: IntervalFilterValueItem) => void; "selectedInterval"?: Interval; "showCurrency"?: boolean; /** * Show editable input fields instead of readonly labels */ "showIntervalInputs"?: boolean; } interface VviinnRecommendationsSidebar { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; "apiPath"?: string; "campaignType"?: CampaignName; /** * comma-separated list of campaign-ids */ "campaigns"?: string; "color"?: string; "cssUrl"?: string | null; "currencySign"?: string; "excluded"?: string; "favoriteShow"?: boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic"?: boolean; "imageResolutionWidth"?: number; "imageWidth"?: number; "locale"?: Locale; "mode"?: CarouselMode1; "noResultShow"?: boolean; "noResultText"?: string; "numberLocale"?: string; "position"?: "bottom" | "right"; "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; "productId"?: string; "setItemsAmount"?: number; "setModeDiscounts"?: string; "showFilters"?: boolean; "showInWidget"?: boolean; "showMultipleImages"?: boolean; "sidebarSubtitle"?: string; "sidebarTitle"?: string; "token"?: string; "updateButtonLocation"?: UpdateButtonLocation; "useCarousel"?: boolean; "widgetScrollbar"?: boolean; } interface VviinnResults { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch"?: string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Show or hide Favorite button */ "favoriteShow"?: boolean; /** * Column for performing Product Listing Page request */ "filterColumn"?: string; /** * Value for performing Product Listing Page request */ "filterValue"?: string; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Triggered when a text search request fails */ "onVviinnNoResult"?: (event: VviinnResultsCustomEvent) => void; /** * Click on the product's link */ "onVviinnProductClick"?: (event: VviinnResultsCustomEvent) => void; /** * Recommended product renders on the page */ "onVviinnProductLoad"?: (event: VviinnResultsCustomEvent) => void; /** * Recommended product appears in the viewport */ "onVviinnProductView"?: (event: VviinnResultsCustomEvent) => void; /** * The search result renders on the page */ "onVviinnResultLoad"?: (event: VviinnResultsCustomEvent) => void; /** * The search result appears in the viewport */ "onVviinnResultView"?: (event: VviinnResultsCustomEvent) => void; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns"?: string; /** * One-Click Discovery Mode */ "oneClickDiscoveryMode"?: OneClickDiscoveryMode; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; /** * Number of results displayed for text search and product listing page (less or equal to the value, set in the campaign) */ "resultsCount"?: number; /** * Custom URL param names parsed from results page URL. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page. When set, the component parses URL parameters (query, searchId) on load. */ "resultsPageUrl"?: string; /** * Search ID for results request */ "searchId"?: string; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages"?: boolean; /** * Query to perform a text search. It is recommended to use the search-query prop for vviinn-text-search instead, when using the Search Bar on the same page. */ "textSearchQuery"?: string; /** * Vviinn customer's token (required) */ "token"?: string; /** * uiSessionId from vps-widget */ "uiSessionId"?: string; } interface VviinnSelectedFilters { /** * The currency sign displayed after price values */ "currencySign"?: string; /** * Locale for text localization */ "locale"?: Locale; "onVviinnFilterTriggered"?: (event: VviinnSelectedFiltersCustomEvent) => void; /** * The filter's state changes */ "onVviinnFiltersChanged"?: (event: VviinnSelectedFiltersCustomEvent) => void; } /** * Interactive "Shop-the-Look" widget that enables visual product search on fashion/interior images. * Users can click on hotspots (detected objects) to discover similar products and see recommendations in a modal. * Supports multiple images with swiper navigation, responsive design, and customizable styling. */ interface VviinnShopTheLook { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Campaign ID for visual search requests */ "campaignId"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Height of the widget in pixels */ "height"?: number; /** * Comma-separated list of image URLs to display in the widget */ "imageUrls"?: string; /** * Locale for text localization */ "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Emitted when a detected object/hotspot is clicked. Contains the object ID and first recommended product. */ "onVviinnShopTheLookDetectedObjectClick"?: (event: VviinnShopTheLookCustomEvent) => void; /** * Emitted when the recommendation modal is closed by the user. */ "onVviinnShopTheLookModalClose"?: (event: VviinnShopTheLookCustomEvent) => void; /** * Emitted when a product in the recommendation modal is clicked. Contains the product details and detected object ID. */ "onVviinnShopTheLookProductClick"?: (event: VviinnShopTheLookCustomEvent) => void; /** * Open product links in new tab */ "productDetailsNewTab"?: boolean; /** * Enable product detail redirects on click */ "productDetailsRedirect"?: boolean; /** * Enable cropper mode for manual area selection */ "showCropper"?: boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages"?: boolean; /** * Vviinn customer's token (required) */ "token"?: string; /** * Enable upload mode to allow users to upload their own images */ "uploadMode"?: boolean; /** * Style variant for corner styling - 'rounded' for rounded corners, 'cornered' for sharp corners */ "widgetStyle"?: "rounded" | "cornered"; } interface VviinnSkeleton { "aspectRatio"?: number; "halfWidth"?: boolean; "height"?: number; } interface VviinnSlide { } interface VviinnSlider { "position"?: number; } interface VviinnSuggestions { "apiPath"?: string; "currencySign"?: string; "locale"?: Locale; "onVviinnFilterTriggered"?: (event: VviinnSuggestionsCustomEvent) => void; "onVviinnFiltersChanged"?: (event: VviinnSuggestionsCustomEvent) => void; "pricePrefix"?: string; "showInWidget"?: boolean; "token"?: string; } interface VviinnTeaser { } interface VviinnTextSearch { /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow"?: boolean; /** * URL to external CSS file for custom styling of the visual search modal */ "cssUrl"?: string | null; /** * Example image shown in the visual search modal */ "exampleImageSource"?: string; /** * Locale for text localization */ "locale"?: Locale; /** * Basic or extended text search with search modal and speech recognition */ "mode"?: SearchBarMode; /** * A filter was triggered */ "onVviinnFilterTriggered"?: (event: VviinnTextSearchCustomEvent) => void; /** * An image search ID was received (used by vviinn-results component) */ "onVviinnImageUploadFinished"?: (event: VviinnTextSearchCustomEvent) => void; /** * Triggered when a text search request fails */ "onVviinnNoResult"?: (event: VviinnTextSearchCustomEvent) => void; /** * A redirect URL is received from the API (can be intercepted by client) */ "onVviinnRedirect"?: (event: VviinnTextSearchCustomEvent) => void; /** * Custom placeholder for the text search input */ "placeholder"?: string; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Query for the text search passed from widget */ "searchQuery"?: string; /** * Vviinn customer's token (required) */ "token"?: string; /** * Visual search modal mode (modal/camera/upload) */ "visualSearchMode"?: VisualSearchMode; } interface VviinnVprButton { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Add default styles to the button */ "addStyle"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Campaign type */ "campaignType"?: CampaignName; /** * Comma-separated list of campaign IDs */ "campaigns"?: string; /** * Accepts any hex color code */ "color"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded"?: string; /** * Show or hide Favorite button */ "favoriteShow"?: boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic"?: boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Width of each recommended product image in Continuity mode */ "imageWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Show or hide the scrollbar */ "modalScrollbar"?: boolean; /** * Switch between carousel modes */ "mode"?: CarouselMode1; /** * Showing a message (when true) or hiding the whole widget, when no results */ "noResultShow"?: boolean; /** * A custom message is displayed when no results */ "noResultText"?: string; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Add to Basket button clicked */ "onVviinnAddToBasket"?: (event: VviinnVprButtonCustomEvent) => void; /** * Recommendation request failed */ "onVviinnNoResult"?: (event: VviinnVprButtonCustomEvent) => void; /** * Click on the product's link */ "onVviinnProductClick"?: (event: VviinnVprButtonCustomEvent) => void; /** * The recommendation renders on the page */ "onVviinnProductLoad"?: (event: VviinnVprButtonCustomEvent) => void; /** * The recommendation appears in the viewport */ "onVviinnProductView"?: (event: VviinnVprButtonCustomEvent) => void; /** * The recommendation result renders on the page */ "onVviinnResultLoad"?: (event: VviinnVprButtonCustomEvent) => void; /** * The recommendation result appears in the viewport */ "onVviinnResultView"?: (event: VviinnVprButtonCustomEvent) => void; /** * The VPR button is activated */ "onVviinnVprButtonActivated"?: (event: VviinnVprButtonCustomEvent) => void; /** * Event emitted on modal close */ "onVviinnWidgetClose"?: (event: VviinnVprButtonCustomEvent) => void; /** * Event emitted on widget load */ "onVviinnWidgetLoad"?: (event: VviinnVprButtonCustomEvent) => void; /** * Event emitted on modal open */ "onVviinnWidgetOpen"?: (event: VviinnVprButtonCustomEvent) => void; /** * One-Click Discovery mode */ "oneClickDiscoveryMode"?: OneClickDiscoveryMode; /** * Position of the modal */ "position"?: "bottom" | "right"; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; /** * ID of product you need recommendations for (required) */ "productId"?: string; /** * Items amount in set mode grid */ "setItemsAmount"?: number; /** * List of discounts for Set mode. Example: "5, 10, 15, 20" (could be less than 4 numbers) */ "setModeDiscounts"?: string; /** * Show filters on top */ "showFilters"?: boolean; /** * Show multiple images on hover (desktop only) */ "showMultipleImages"?: boolean; /** * Widget's subtitle */ "sidebarSubtitle"?: string; /** * Sidebar title */ "sidebarTitle"?: string; /** * Vviinn customer's token (required) */ "token"?: string; /** * Location of Update button for Set mode */ "updateButtonLocation"?: UpdateButtonLocation; } interface VviinnVprWidget { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Widget's subtitle */ "blockSubtitle"?: string; /** * Widget's title */ "blockTitle"?: string; /** * Campaign type */ "campaignType"?: CampaignName; /** * Comma-separated list of campaign IDs */ "campaigns"?: string; /** * Accepts any hex color code */ "color"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded"?: string; /** * Show or hide Favorite button */ "favoriteShow"?: boolean; /** * Hiding disabled arrows in the carousel if true */ "gridArrowsDynamic"?: boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Width of each recommended product image in Continuity mode */ "imageWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Switch between carousel modes */ "mode"?: Mode; /** * Showing a message (when true) or hiding the whole widget, when no results */ "noResultShow"?: boolean; /** * A custom message is displayed when no results */ "noResultText"?: string; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Add to Basket button clicked */ "onVviinnAddToBasket"?: (event: VviinnVprWidgetCustomEvent) => void; /** * The filter's state changes */ "onVviinnFiltersChanged"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Recommendation request failed */ "onVviinnNoResult"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Click on the product's link */ "onVviinnProductClick"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Recommended product renders on the page */ "onVviinnProductLoad"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Recommended product appears in the viewport */ "onVviinnProductView"?: (event: VviinnVprWidgetCustomEvent) => void; /** * The recommendation result renders on the page */ "onVviinnResultLoad"?: (event: VviinnVprWidgetCustomEvent) => void; /** * The recommendation result appears in the viewport */ "onVviinnResultView"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Event emitted on widget load */ "onVviinnWidgetLoad"?: (event: VviinnVprWidgetCustomEvent) => void; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; /** * ID of product you need recommendations for (required) */ "productId"?: string; /** * Items amount in set mode grid */ "setItemsAmount"?: number; /** * List of discounts for Set mode. Example: "5, 10, 15, 20" (could be less than 4 numbers) */ "setModeDiscounts"?: string; /** * Show extended filters on top */ "showExtendedFilters"?: boolean; /** * Show filters on top */ "showFilters"?: boolean; /** * Show multiple images on hover (desktop only) */ "showMultipleImages"?: boolean; /** * Show or hide the widget's scrollbar */ "showScroll"?: boolean; /** * Vviinn customer's token (required) */ "token"?: string; /** * Location of Update button for Set mode */ "updateButtonLocation"?: UpdateButtonLocation1; } interface VviinnVpsButton { /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Add style to the button */ "addStyle"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow"?: boolean; /** * Campaign ID used for Visual Search (deprecated) */ "campaignId"?: string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch"?: string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Example image source */ "exampleImageSource"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded"?: string; /** * Show or hide Favorite button */ "favoriteShow"?: boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Show the onboarding step, start the camera on opening, or skip the onboarding and move to the direct image upload. */ "mode"?: VisualSearchMode; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Crop area changes */ "onVviinnImageCrop"?: (event: VviinnVpsButtonCustomEvent) => void; /** * The image upload has started */ "onVviinnImageUploadStarted"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Wrong image format (supported formats depend on the browser), or the request failed */ "onVviinnNoResult"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Click on the product's link */ "onVviinnProductClick"?: (event: VviinnVpsButtonCustomEvent) => void; /** * The recommendation renders on the page */ "onVviinnProductLoad"?: (event: VviinnVpsButtonCustomEvent) => void; /** * The recommendation appears in the viewport */ "onVviinnProductView"?: (event: VviinnVpsButtonCustomEvent) => void; /** * The search result renders on the page */ "onVviinnResultLoad"?: (event: VviinnVpsButtonCustomEvent) => void; /** * The search result appears in the viewport */ "onVviinnResultView"?: (event: VviinnVpsButtonCustomEvent) => void; /** * User selects one of the filters */ "onVviinnSelectFilter"?: (event: VviinnVpsButtonCustomEvent) => void; /** * User selects the detected object */ "onVviinnSelectObject"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Event emitted on modal close. */ "onVviinnWidgetClose"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Event emitted on widget load. */ "onVviinnWidgetLoad"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Event emitted on modal open. */ "onVviinnWidgetOpen"?: (event: VviinnVpsButtonCustomEvent) => void; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns"?: string; /** * One-Click Discovery mode, restricted to append only (no modal supported for this component) */ "oneClickDiscoveryMode"?: OneClickDiscoveryAppendMode; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs"?: boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages"?: boolean; /** * Render results in modal. Set false to redirect or show results on the page. */ "showResultsInModal"?: boolean; /** * Show the text search */ "textSearchShow"?: boolean; /** * Vviinn customer's token (required) */ "token"?: string; } interface VviinnVpsWidget { /** * Toggle the widget's modal showing */ "active"?: boolean; /** * Wrap the Product Card's price values in the container. */ "addPriceContainer"?: boolean; /** * Show or hide Add to Basket buttons */ "addToBasketShow"?: boolean; /** * API endpoint URL (optional, defaults to production) */ "apiPath"?: string; /** * Show auto-suggest dropdown with search completions */ "autoSuggestShow"?: boolean; /** * Campaign ID used for Visual Search (deprecated) */ "campaignId"?: string; /** * Campaign ID used for Text Search */ "campaignIdTextSearch"?: string; /** * Campaign ID used for Visual Search */ "campaignIdVisualSearch"?: string; /** * URL to external CSS file for custom styling */ "cssUrl"?: string | null; /** * The currency sign is displayed after the price */ "currencySign"?: string; /** * Example image source */ "exampleImageSource"?: string; /** * Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer" */ "excluded"?: string; /** * Show or hide Favorite button */ "favoriteShow"?: boolean; /** * Resolution width of an image in the product card */ "imageResolutionWidth"?: number; /** * Locale for text localization */ "locale"?: Locale; /** * Locale for number formatting. Falls back to locale */ "numberLocale"?: string; /** * Crop area changes */ "onVviinnImageCrop"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * The image upload has started */ "onVviinnImageUploadStarted"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Wrong image format (supported formats depend on the browser), or the request failed */ "onVviinnNoResult"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Redirect to results page (can be intercepted by client via preventDefault) */ "onVviinnRedirect"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * User selects one of the filters */ "onVviinnSelectFilter"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * User selects the detected object */ "onVviinnSelectObject"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Event emitted on modal close */ "onVviinnWidgetClose"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Event emitted on widget load */ "onVviinnWidgetLoad"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Event emitted on modal open */ "onVviinnWidgetOpen"?: (event: VviinnVpsWidgetCustomEvent) => void; /** * Comma-separated list of campaign IDs */ "oneClickDiscoveryCampaigns"?: string; /** * One-Click Discovery mode, restricted to append only (no modal supported for this component) */ "oneClickDiscoveryMode"?: OneClickDiscoveryAppendMode; /** * Prefix is displayed before the price */ "pricePrefix"?: string; /** * Toggle for opening product link in new tab or not */ "productDetailsNewTab"?: boolean; /** * Toggle for redirection to PDP on product's click */ "productDetailsRedirect"?: boolean; /** * Custom URL param names for results page redirect. Default: "query=query&searchId=searchId". */ "resultsPageParams"?: string; /** * URL of the results page for automatic search redirect. */ "resultsPageUrl"?: string; /** * Show editable input fields in interval filters instead of readonly labels */ "showIntervalInputs"?: boolean; /** * Show multiple images: swiper on mobile, hover on desktop in product cards */ "showMultipleImages"?: boolean; /** * Render results in modal. Set false to redirect or show results on the page. */ "showResultsInModal"?: boolean; /** * Show the text search */ "textSearchShow"?: boolean; /** * Vviinn customer's token (required) */ "token"?: string; } interface IntrinsicElements { "vviinn-button": VviinnButton; "vviinn-camera": VviinnCamera; "vviinn-carousel": VviinnCarousel; "vviinn-cropper": VviinnCropper; "vviinn-detected-object": VviinnDetectedObject; "vviinn-energy-label": VviinnEnergyLabel; "vviinn-error": VviinnError; "vviinn-extended-filters": VviinnExtendedFilters; "vviinn-extended-filters-button": VviinnExtendedFiltersButton; "vviinn-filters": VviinnFilters; "vviinn-image": VviinnImage; "vviinn-image-selector": VviinnImageSelector; "vviinn-modal": VviinnModal; "vviinn-overlay": VviinnOverlay; "vviinn-overlayed-modal": VviinnOverlayedModal; "vviinn-preloader": VviinnPreloader; "vviinn-privacy-badge": VviinnPrivacyBadge; "vviinn-product-card": VviinnProductCard; "vviinn-range-filter": VviinnRangeFilter; "vviinn-recommendations-sidebar": VviinnRecommendationsSidebar; "vviinn-results": VviinnResults; "vviinn-selected-filters": VviinnSelectedFilters; "vviinn-shop-the-look": VviinnShopTheLook; "vviinn-skeleton": VviinnSkeleton; "vviinn-slide": VviinnSlide; "vviinn-slider": VviinnSlider; "vviinn-suggestions": VviinnSuggestions; "vviinn-teaser": VviinnTeaser; "vviinn-text-search": VviinnTextSearch; "vviinn-vpr-button": VviinnVprButton; "vviinn-vpr-widget": VviinnVprWidget; "vviinn-vps-button": VviinnVpsButton; "vviinn-vps-widget": VviinnVpsWidget; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * Visual presentation for a button. Does not handle interaction logic itself. * This component is not intended to be used directly - only within other button components. */ "vviinn-button": LocalJSX.VviinnButton & JSXBase.HTMLAttributes; "vviinn-camera": LocalJSX.VviinnCamera & JSXBase.HTMLAttributes; "vviinn-carousel": LocalJSX.VviinnCarousel & JSXBase.HTMLAttributes; "vviinn-cropper": LocalJSX.VviinnCropper & JSXBase.HTMLAttributes; "vviinn-detected-object": LocalJSX.VviinnDetectedObject & JSXBase.HTMLAttributes; "vviinn-energy-label": LocalJSX.VviinnEnergyLabel & JSXBase.HTMLAttributes; "vviinn-error": LocalJSX.VviinnError & JSXBase.HTMLAttributes; "vviinn-extended-filters": LocalJSX.VviinnExtendedFilters & JSXBase.HTMLAttributes; "vviinn-extended-filters-button": LocalJSX.VviinnExtendedFiltersButton & JSXBase.HTMLAttributes; "vviinn-filters": LocalJSX.VviinnFilters & JSXBase.HTMLAttributes; /** * Encapsulated image component with customizable styling and built-in placeholder support. */ "vviinn-image": LocalJSX.VviinnImage & JSXBase.HTMLAttributes; "vviinn-image-selector": LocalJSX.VviinnImageSelector & JSXBase.HTMLAttributes; "vviinn-modal": LocalJSX.VviinnModal & JSXBase.HTMLAttributes; "vviinn-overlay": LocalJSX.VviinnOverlay & JSXBase.HTMLAttributes; "vviinn-overlayed-modal": LocalJSX.VviinnOverlayedModal & JSXBase.HTMLAttributes; "vviinn-preloader": LocalJSX.VviinnPreloader & JSXBase.HTMLAttributes; "vviinn-privacy-badge": LocalJSX.VviinnPrivacyBadge & JSXBase.HTMLAttributes; "vviinn-product-card": LocalJSX.VviinnProductCard & JSXBase.HTMLAttributes; "vviinn-range-filter": LocalJSX.VviinnRangeFilter & JSXBase.HTMLAttributes; "vviinn-recommendations-sidebar": LocalJSX.VviinnRecommendationsSidebar & JSXBase.HTMLAttributes; "vviinn-results": LocalJSX.VviinnResults & JSXBase.HTMLAttributes; "vviinn-selected-filters": LocalJSX.VviinnSelectedFilters & JSXBase.HTMLAttributes; /** * Interactive "Shop-the-Look" widget that enables visual product search on fashion/interior images. * Users can click on hotspots (detected objects) to discover similar products and see recommendations in a modal. * Supports multiple images with swiper navigation, responsive design, and customizable styling. */ "vviinn-shop-the-look": LocalJSX.VviinnShopTheLook & JSXBase.HTMLAttributes; "vviinn-skeleton": LocalJSX.VviinnSkeleton & JSXBase.HTMLAttributes; "vviinn-slide": LocalJSX.VviinnSlide & JSXBase.HTMLAttributes; "vviinn-slider": LocalJSX.VviinnSlider & JSXBase.HTMLAttributes; "vviinn-suggestions": LocalJSX.VviinnSuggestions & JSXBase.HTMLAttributes; "vviinn-teaser": LocalJSX.VviinnTeaser & JSXBase.HTMLAttributes; "vviinn-text-search": LocalJSX.VviinnTextSearch & JSXBase.HTMLAttributes; "vviinn-vpr-button": LocalJSX.VviinnVprButton & JSXBase.HTMLAttributes; "vviinn-vpr-widget": LocalJSX.VviinnVprWidget & JSXBase.HTMLAttributes; "vviinn-vps-button": LocalJSX.VviinnVpsButton & JSXBase.HTMLAttributes; "vviinn-vps-widget": LocalJSX.VviinnVpsWidget & JSXBase.HTMLAttributes; } } }