/* 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 { FilterManager, FilterManagerFilters, KlevuConfig, KlevuFetchModifer, KlevuFilterResultOptions, KlevuFilterResultSlider, KlevuMerchandisingOptions, KlevuQueryResult, KlevuRecord, KlevuResponseQueryObject, KlevuSearchOptions, KlevuSearchSorting, KlevuSuggestionResult, KMCMapsRootObject, MoiMessages, MoiProduct, MoiRequest, MoiResponseFilter, MoiSavedFeedback, ProductInfo } from "@klevu/core"; import { KlevuMessageFeedbackReasonDetails } from "./components/klevu-chat-bubble/klevu-chat-bubble"; import { onKlevuMessageFeedbackDetails } from "./components/klevu-chat-messages/klevu-chat-messages"; import { KlevuOnSwatchClick } from "./components/klevu-color-swatch/klevu-color-swatch"; import { KlevuDropdownVariant } from "./components/klevu-dropdown/klevu-dropdown"; import { KlevuFacetMode, KlevuSelectionUpdatedEventDetail } from "./components/klevu-facet/klevu-facet"; import { KlevuColorSwatchOverride } from "./components/klevu-facet-list/klevu-facet-list"; import { KlevuFacetMode as KlevuFacetMode1 } from "./components/klevu-facet/klevu-facet"; import { KlevuColorSwatchOverride as KlevuColorSwatchOverride1, KlevuFiltersAppliedEventDetail } from "./components/klevu-facet-list/klevu-facet-list"; import { KlevuUIGlobalSettings } from "./utils/utils"; import { Translation, Translations } from "./components/klevu-init/klevu-init"; import { Placement } from "@floating-ui/dom"; import { KlevuProductAddToCart, KlevuProductOnProductClick, KlevuProductVariant } from "./components/klevu-product/klevu-product"; import { KlevuTextfieldVariant } from "./components/klevu-textfield/klevu-textfield"; import { WidgetLayout } from "./components/klevu-product-query/klevu-product-query"; import { WidgetLayout as WidgetLayout1 } from "./components/klevu-product-query/klevu-product-query"; import { AllQueryOptions } from "./components/klevu-query/klevu-query"; import { SearchFieldVariant } from "./components/klevu-search-field/klevu-search-field"; import { KlevuQuicksearchDataEvent, KlevuQuicksearchResultVarint } from "./components/klevu-quicksearch/klevu-quicksearch"; import { SearchFieldVariant as SearchFieldVariant1, SearchResultsEventData, SuggestionsEventData } from "./components/klevu-search-field/klevu-search-field"; import { KlevuDropdownVariant as KlevuDropdownVariant1 } from "./components"; import { KlevuTextfieldVariant as KlevuTextfieldVariant1 } from "./components/klevu-textfield/klevu-textfield"; import { KlevuTypographyVariant } from "./components/klevu-typography/klevu-typography"; import { OverflowBehavior, OverlayScrollbars } from "overlayscrollbars"; import { ViewportSize } from "./components/klevu-util-viewport/klevu-util-viewport"; export { FilterManager, FilterManagerFilters, KlevuConfig, KlevuFetchModifer, KlevuFilterResultOptions, KlevuFilterResultSlider, KlevuMerchandisingOptions, KlevuQueryResult, KlevuRecord, KlevuResponseQueryObject, KlevuSearchOptions, KlevuSearchSorting, KlevuSuggestionResult, KMCMapsRootObject, MoiMessages, MoiProduct, MoiRequest, MoiResponseFilter, MoiSavedFeedback, ProductInfo } from "@klevu/core"; export { KlevuMessageFeedbackReasonDetails } from "./components/klevu-chat-bubble/klevu-chat-bubble"; export { onKlevuMessageFeedbackDetails } from "./components/klevu-chat-messages/klevu-chat-messages"; export { KlevuOnSwatchClick } from "./components/klevu-color-swatch/klevu-color-swatch"; export { KlevuDropdownVariant } from "./components/klevu-dropdown/klevu-dropdown"; export { KlevuFacetMode, KlevuSelectionUpdatedEventDetail } from "./components/klevu-facet/klevu-facet"; export { KlevuColorSwatchOverride } from "./components/klevu-facet-list/klevu-facet-list"; export { KlevuFacetMode as KlevuFacetMode1 } from "./components/klevu-facet/klevu-facet"; export { KlevuColorSwatchOverride as KlevuColorSwatchOverride1, KlevuFiltersAppliedEventDetail } from "./components/klevu-facet-list/klevu-facet-list"; export { KlevuUIGlobalSettings } from "./utils/utils"; export { Translation, Translations } from "./components/klevu-init/klevu-init"; export { Placement } from "@floating-ui/dom"; export { KlevuProductAddToCart, KlevuProductOnProductClick, KlevuProductVariant } from "./components/klevu-product/klevu-product"; export { KlevuTextfieldVariant } from "./components/klevu-textfield/klevu-textfield"; export { WidgetLayout } from "./components/klevu-product-query/klevu-product-query"; export { WidgetLayout as WidgetLayout1 } from "./components/klevu-product-query/klevu-product-query"; export { AllQueryOptions } from "./components/klevu-query/klevu-query"; export { SearchFieldVariant } from "./components/klevu-search-field/klevu-search-field"; export { KlevuQuicksearchDataEvent, KlevuQuicksearchResultVarint } from "./components/klevu-quicksearch/klevu-quicksearch"; export { SearchFieldVariant as SearchFieldVariant1, SearchResultsEventData, SuggestionsEventData } from "./components/klevu-search-field/klevu-search-field"; export { KlevuDropdownVariant as KlevuDropdownVariant1 } from "./components"; export { KlevuTextfieldVariant as KlevuTextfieldVariant1 } from "./components/klevu-textfield/klevu-textfield"; export { KlevuTypographyVariant } from "./components/klevu-typography/klevu-typography"; export { OverflowBehavior, OverlayScrollbars } from "overlayscrollbars"; export { ViewportSize } from "./components/klevu-util-viewport/klevu-util-viewport"; export namespace Components { /** * Component that wrap two slots to create accordion element. * @csspart accordion-base The container element for the accordion * @csspart accordion-header The label of the accordion * @csspart accordion-content The content of the accordion * @csspart accordion-icon The icon of the accordion */ interface KlevuAccordion { /** * is accordion open */ "open": boolean; /** * Should it initially be open */ "startOpen"?: boolean; } /** * Basic badge component. Can be used to display small information on top of other elements. Typically * used to display things on top of product. * @csspart badge-content The content of the badge * @csspart badge-base The container of the badge */ interface KlevuBadge { /** * Setting a accent color to badge (1-4) */ "accent"?: number; /** * Setting a neutral color to badge (1-8) */ "neutral"?: number; } /** * Component that displays a typical klevu banner * @csspart banner-image The image element */ interface KlevuBanner { /** * The alt text to display for iamge */ "altText": string; /** * The image url to display */ "imageUrl": string; /** * The link url to navigate to */ "linkUrl": string; /** * The target to open the link in */ "target": "_blank" | "_self"; } /** * Basic button component * @csspart button-base The button element */ interface KlevuButton { /** * Is button disabled */ "disabled"?: boolean; /** * Make button display block */ "fullWidth"?: boolean; /** * Instead of content have an icon. So basically icon-button */ "icon"?: string; /** * Toned down secondary button */ "isSecondary"?: boolean; /** * Toned down tertiary button */ "isTertiary"?: boolean; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; "size": "tiny" | "small" | "normal" | "large"; } /** * Container for chat items. Very simple component, just a wrapper. * @csspart chat-bubble-base The container for the chat bubble * @csspart chat-bubble-positive-feedback The positive feedback section * @csspart chat-bubble-negative-feedback The negative feedback section * @csspart chat-bubble-feedback-reasons The feedback reasons section */ interface KlevuChatBubble { /** * Has user given feedback to this message */ "feedback"?: MoiSavedFeedback; /** * List of feedback reasons to show after the message */ "feedbackReasons"?: string[]; /** * Is the message from the user or from the bot */ "remote"?: boolean; /** * Text for rating reason title */ "tRatingReason": string; } /** * Component that wraps chat elements into a layout. */ interface KlevuChatLayout { /** * Close the popup menu */ "closePopup": () => Promise; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; /** * Scroll current chat to bottom of page */ "scrollMainToBottom": (behavior?: "smooth" | "instant") => Promise; /** * Use native scrollbars instead of custom ones in content */ "useNativeScrollbars"?: boolean; } interface KlevuChatMessages { /** * Should display the product slider navigation buttons centered in relating to product list */ "centerNextPrev": boolean; /** * Should display a feedback button after each message */ "enableMessageFeedback"?: boolean; /** * Feedbacks given by user */ "feedbacks"?: MoiSavedFeedback[]; /** * Optional action to perform when type writer effect completes */ "handleTypeWriterEffectEnds"?: (showQuestions: boolean) => void; /** * Messages received from Moi backend */ "messages": MoiMessages; /** * Scroll to bottom of the chat */ "scrollBottom"?: () => void; /** * What message should we */ "showFeedbackFor"?: string; /** * type animation speed, if 0, no animation */ "speed": number; } /** * Checkbox component * @csspart checkbox-base The container element of the checkbox * @csspart checkbox-box The checkbox element * @csspart checkbox-content The label of the checkbox */ interface KlevuCheckbox { /** * Is checkbox checked */ "checked"?: boolean; /** * Is disabled */ "disabled"?: boolean; /** * Name of the checkbox */ "name"?: string; } /** * Chip component that is used to display selected value in a listing. Gives also ability to remove the chip. * Has selected and removable attributes that can be used to display the chip in selected state and also to remove the chip. * @csspart chip-base The container for the chip * @csspart chip-icon The icon for the close button * @csspart chip-content The content for the chip */ interface KlevuChip { /** * Removable state of the chip */ "removable": boolean; /** * Selected state of the chip */ "selected": boolean; } /** * Component to display list of CMS page results * @csspart cms-list-caption The caption for the cms list */ interface KlevuCmsList { /** * Should use url parameter from link to create anchor */ "link"?: boolean; /** * List of Klevu results records with type of Page */ "pages": Array>; /** * Caption of the listing */ "tCaption": string; } /** * Color Swatch component */ interface KlevuColorSwatch { /** * Specify border color for the swatch */ "borderColor"?: string; /** * Color to apply */ "color"?: string; /** * ImageUrl to load in swatch */ "imageUrl"?: string; /** * This field will be sent in the click callback */ "name": string; /** * If selected */ "selected": boolean; } /** * Component to create offscreen drawer on left or right side of the screen * @csspart drawer-base The container of the drawer * @csspart drawer-origin The button that controls open of the drawer * @csspart drawer-content The content inside the drawer */ interface KlevuDrawer { /** * Anchor to right or left side of the page */ "anchor": "right" | "left"; /** * Display dim background on top of other content */ "background"?: boolean; /** * Close by clicking outside of drawer */ "closeAtOutsideClick": boolean; "closeModal": () => Promise; /** * Add little bit of padding to content of drawer */ "insertYPadding"?: boolean; "openModal": () => Promise; /** * Start side drawer open */ "startOpen"?: boolean; } /** * Simple native dropdown component for dropdown * @csspart dropdown-base The container for the dropdown * @csspart dropdown-select The select box */ interface KlevuDropdown { /** * Is element disabled */ "disabled"?: boolean; /** * Form name */ "name": string; /** * Options to display in dropdown */ "options": Array<{ value: string; text: string }>; /** * Which element value is selected */ "selected": string; /** * Variant of dropdown */ "variant": KlevuDropdownVariant; } /** * Rendering items of single facet with all its options or a slider. * Manager property must be set for this component to work. * @csspart facet-heading Heading of the facet * @csspart facet-radio The radio button for selection of facet * @csspart facet-more-button The button to show more results * @csspart facet-option-count The count of results per option */ interface KlevuFacet { /** * Should the facet be in accordion */ "accordion"?: boolean; /** * Start accordion open */ "accordionStartOpen"?: boolean; /** * Specific overrides for individual color swatch. The overrides can be colors (hex or valid css colors) or a valid url to load. ImageUrl takes precedence over color when both are specified. */ "colorSwatchOverrides"?: KlevuColorSwatchOverride; /** * Set predefined order for options. Unfound values are in original order in end */ "customOrder"?: string[]; /** * Override label text with custom value */ "labelOverride"?: string; /** * Originating filter manager which to modify. This is the most important property of the component. It will be used to modify the filter state for queries. */ "manager": FilterManager; /** * Which mode should facets be in */ "mode": KlevuFacetMode; /** * From which options to build facet. Single option value from Klevu SDK FilterManager. Either this or slider must be set. */ "option"?: KlevuFilterResultOptions; /** * The currency to show in the price slider */ "priceSliderCurrency": string; /** * From which slider to build facet. */ "slider"?: KlevuFilterResultSlider; "tAll": string; "tMore": string; /** * Converts the color filters to swatches */ "useColorSwatch"?: boolean; } /** * Render all facets of filter manager */ interface KlevuFacetList { /** * Should use accordions to for facets */ "accordion"?: boolean; /** * Button text for Apply button when using `useApplyButton` */ "applyButtonText": string; /** * Button text for Clear button when using `useApplyButton` */ "clearButtonText": string; /** * Specific overrides for individual color swatch. The overrides can be colors (hex or valid css colors) or a valid url to load. ImageUrl takes precedence over color when both are specified. */ "colorSwatchOverrides"?: { [key: string]: KlevuColorSwatchOverride1 }; /** * Specify which facet keys should be rendered as color swatches */ "colorSwatches"?: string[]; /** * Custom order keys for every facet */ "customOrder"?: { [key: string]: string[] }; /** * Default price label for sliders */ "defaultPriceLabel": string; /** * Filter managet from which the list is built from */ "manager": FilterManager; /** * Set mode for facets or if object is passed then define per key */ "mode"?: KlevuFacetMode1 | { [key: string]: KlevuFacetMode1 }; /** * The currency to show in the price slider */ "priceSliderCurrency": string; /** * To set the facet selection value in the url */ "shouldUpdateUrlForFacets"?: boolean; /** * When using `useApplyButton` then this method can be used to update current state filterManager into to local state of that is displayed in the UI */ "updateApplyFilterState": () => Promise; /** * Display "apply filters" button in the end. And do not apply filters until this button is pressed */ "useApplyButton"?: boolean; } /** * Klevu icon component. Uses Google Material Icons. */ interface KlevuIcon { /** * Name of the icon. Please use tokens of material icons */ "name": string; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; } /** * `klevu-init` is the most important component of the whole library. Place one in your document. It should be * one of the first ones in the `` tag. Currently only one `klevu-init` per page is supported. It is used to define * configuration for all components on the page and provide few global settings for all components: * - **onItemClick:** what happens when product is clicked. Typically this places default action of * _klevu-product_ click. For example you can make your own frontend router to act in this function. Is * provided with product and click event as attributes. Remember to preventDefault and return false to prevent anchor * link following. * - **generateProductUrl:** what kind of URL's should be generated for products. If _onItemClick_ * is not used this can be used for it. Has product as attribute. * - **renderPrice:** generic function for price rendering. If you wish to have your own formatting for price * rendering then this is the place. Has two attribute amount and currency of item. * Initializes components to fetch data from correct Klevu backend * **Note: All global CSS variables are documented in `klevu-init` even thought they are not defined in it.** */ interface KlevuInit { /** * Read only API key to Klevu */ "apiKey": string; /** * Override the default assets path. Will use format of `${assetsPath}/assets/${resource}` */ "assetsPath"?: string; /** * Data read consent given */ "consentGiven"?: boolean; /** * disableUserSession and stop making calls to visitor service when this is true, defaults to false. */ "disableUserSession"?: boolean; /** * Enable Klaviyo integration */ "enableKlaviyoConnector"?: boolean; /** * Override the default events v1 URL */ "eventsV1Url"?: string; /** * Override the default events v2 URL */ "eventsV2Url"?: string; "getAssetsPath": () => Promise; /** * @returns KlevuConfig, but due to typescript problems it is any */ "getConfig": () => Promise; /** * Get settings defined in klevu-init * @returns */ "getSettings": () => Promise; /** * Ipv4 ServiceUrl for ipv4 retrieval used in analytics */ "ipv4ServiceUrl"?: string; /** * Ipv6 ServiceUrl for ipv6 retrieval used in analytics */ "ipv6ServiceUrl"?: string; /** * Get settings defined in klevu-init * @returns */ "isSettingsDefined": () => Promise; "kmcLoadDefaults"?: boolean; /** * Which language to load */ "language": Translations; /** * Override the default moi API URL */ "moiApiUrl"?: string; /** * Override the default recommendations API URL */ "recommendationsApiUrl"?: string; "setConsentGiven": (val: boolean) => Promise; "setUseConsent": (val: boolean) => Promise; /** * Global settings */ "settings": KlevuUIGlobalSettings; "settingsUrl"?: string; /** * Provide your own translations */ "translation"?: Translation; /** * Override the default translation URL prefix. Will use format of `${translationUrlPrefix}/translations/${lang}.json` */ "translationUrlPrefix"?: string; /** * Klevu Server URL */ "url": string; /** * Enable Data Protection */ "useConsent"?: boolean; /** * Override the default session API URL */ "visitorServiceUrl"?: string; } /** * Lists latest searches user has made on the site * @csspart latest-searches-caption The caption for the latest search list */ interface KlevuLatestSearches { /** * Caption of the list */ "tCaption": string; } /** * Generic layout used in merchansiding and search landing page */ interface KlevuLayoutResults { /** * Can be used to close the drawer programmatically */ "closeDrawer": () => Promise; } /** * Single list item for listing things. * @csspart list-base The container for the list * @csspart list-icon The icon element of the list * @csspart list-image The image element of the list * @csspart list-content The content of the list * @csspart list-button The button element in the list */ interface KlevuList { /** * Condensed version of the list item. */ "condensed": boolean; /** * Icon to be displayed in the list item. Cannot be used with image. */ "icon"?: string; /** * Image to be displayed in the list item. Cannot be used with icon. */ "image"?: string; "noXPadding": boolean; /** * To render primary text with default styling */ "primaryText": string; /** * To render secondary text with default styling */ "secondaryText": string; /** * Make the whole thing clickable and navigate to this url. */ "url"?: string; } /** * Simple loading indicator * @csspart loading-indicator-base The container for the loading indicator */ interface KlevuLoadingIndicator { } /** * Full merchandising app to power up your product grid pages * @csspart merchandising-sidebar - Sidebar container * @csspart merchandising-header - Header container * @csspart merchandising-content - Content container * @csspart merchandising-footer - Footer container */ interface KlevuMerchandising { /** * To update the pagination and filters to the url automatically */ "autoUpdateUrl"?: boolean; /** * Which category products */ "category": string; /** * Category title */ "categoryTitle": string; /** * How many filters per facet to show */ "filterCount"?: number; /** * Order filters in given order */ "filterCustomOrder"?: { [key: string]: string[] }; /** * Hides brand from merchandising */ "hideBrand"?: boolean; /** * Hides description from merchandising */ "hideDescription"?: boolean; /** * Hides hover image from merchandising */ "hideHoverImage"?: boolean; /** * Hides image from merchandising */ "hideImage"?: boolean; /** * Hides name from merchandising */ "hideName"?: boolean; /** * Hides price from merchandising */ "hidePrice"?: boolean; /** * Do not show swatches in products in merchandising */ "hideSwatches"?: boolean; /** * Count of products for page */ "limit": number; /** * Object to override and settings on search options */ "options"?: KlevuMerchandisingOptions; /** * Caption to show if product is out of stock in products in merchandising */ "outOfStockCaption"?: string; /** * Show add to cart button in products in merchandising */ "showAddToCart"?: boolean; /** * To show the product code next to product name in merchandising */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show variants count in merchandising */ "showVariantsCount": boolean; /** * Order of results */ "sort"?: KlevuSearchSorting; /** * Pass custom options for the sort dropdown */ "sortOptions"?: Array<{ value: KlevuSearchSorting; text: string }>; /** * Text for add to cart button in merchandising */ "tAddToCart"?: string; /** * Text for load more button */ "tLoadMore": string; /** * Overrides KMC setting to use ABtest for results */ "useABTest"?: boolean; /** * Should use infinite scroll component to trigger load next */ "useInfiniteScroll"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator": boolean; /** * Should display pagination instead of load next */ "usePagination"?: boolean; /** * Enable personalisation */ "usePersonalisation"?: boolean; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not in merchandising. */ "vatCaption"?: string; } /** * Stylized modal dialog. * @csspart modal-base The container for modal dialog * @csspart modal-header The header for modal dialog * @csspart modal-dialog The dialog component * @csspart modal-body The body for modal dialog */ interface KlevuModal { /** * Closes the modal. */ "closeModal": () => Promise; /** * Opens the modal. */ "openModal": () => Promise; /** * Should show the modal on load. */ "startOpen": boolean; } /** * Klevu MOI Application */ interface KlevuMoi { /** * Override default API key */ "apiKey"?: string; "close": () => Promise; /** * Initialize the MOI session and open window */ "open": () => Promise; /** * Start the MOI window open */ "startOpen"?: boolean; } /** * Pagination component. Either provide numbers or query result to display the component. * @csspart pagination-base The container for pagination * @csspart pagination-navigation-previous The previous page button * @csspart pagination-navigation-next The next page button */ interface KlevuPagination { /** * Current page */ "current"?: number; /** * Max page */ "max"?: number; /** * Min page */ "min"?: number; /** * Query results used to build min, max and current */ "queryResult"?: KlevuQueryResult; /** * To set the page selection value in the url */ "shouldUpdateUrlForPage"?: boolean; } /** * Fetches and displays most popular searches from Klevu Merchant center * @csspart popular-searches-base The container for the popular searches * @csspart popular-searches-caption The caption for the search * @csspart popular-searches-list-item The list item in search */ interface KlevuPopularSearches { /** * Caption of the list */ "tCaption": string; } /** * Popup component where clicking origin component popups the the content * @csspart popup-base The container for the popup * @csspart popup-content Content component */ interface KlevuPopup { /** * Anchor popup to left or right of page */ "anchor": Placement; /** * Close popup when clicking outside content area */ "closeAtOutsideClick": boolean; /** * Closes the popup */ "closeModal": () => Promise; /** * Elevation of the popup. 0-3. */ "elevation": number; /** * Sets origin element to full width of the container */ "fullWidthOrigin"?: boolean; /** * Expand popup to full size of the screen when popup is smaller that requested width */ "fullscreenOnMobileSize"?: boolean; /** * How many pixels to offset the popup from origin */ "offset": number; /** * Open content when origin component is focused */ "openAtFocus": boolean; /** * Opens the popup */ "openModal": () => Promise; /** * Element to anchor popup to. If not set popup is anchored to origin slot */ "originElement"?: HTMLElement; /** * Initially show the popup */ "startOpen"?: boolean; /** * Clicking origin again will close the popup */ "toggle"?: boolean; /** * Darken background when popup is open */ "useBackground": boolean; } /** * Generic product component that renders product based on KlevuRecord of klevu/core * All parts of the component can be replaced with slots. * By default the products fill the whole space, but it can be limited * with --klevu-product-width and --klevu-product-small-width css variables. * @csspart product-image The image element of component * @csspart product-base The container element of whole * @csspart product-swatch Single swatch element under the image * @csspart product-brandname The brand name of the product * @csspart product-name The name of the product * @csspart product-description The description of the product * @csspart product-price The price of the product * @csspart product-vatcaption The vat caption of the product * @csspart product-ooscaption The out of stock caption of the product * @csspart product-variants-count The number of variants * @csspart product-addtocart The add to cart button */ interface KlevuProduct { /** * Fallback image url to be used when the product image fails to load. */ "fallbackProductImageUrl"?: string; /** * Force certain width for product. Do not use max-width */ "fixedWidth"?: boolean; /** * Hides brand information */ "hideBrand"?: boolean; /** * Hides description from info */ "hideDescription"?: boolean; /** * When mousing over product, show hover image if available */ "hideHoverImage"?: boolean; /** * Hides image */ "hideImage"?: boolean; /** * Hides name from info */ "hideName"?: boolean; /** * Hides price from info */ "hidePrice"?: boolean; /** * Do not show swatches in products */ "hideSwatches"?: boolean; /** * Turns the component into a product wrapper that handles events automatically. It assumes that whole product is clickable. Component has only one main slot that can contain any content. To prevent product clicking use `event.stopPropagation()` in your events. Component still requires the product parameter as it's data is used send correct data to Klevu analytics */ "isWrapper"?: boolean; /** * What key to use for brand value */ "keyBrand": string; /** * What key to use for description value */ "keyDescription": string; /** * What key to use for name value */ "keyName": string; /** * Caption to show if product is out of stock */ "outOfStockCaption"?: string; /** * Product data */ "product"?: Partial; /** * Show add to cart button */ "showAddToCart"?: boolean; /** * To show the product code next to product name. */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings */ "showRatingsCount"?: boolean; /** * Show variants count */ "showVariantsCount": boolean; /** * Text for add to cart button */ "tAddToCart"?: string; /** * What variant of product to render */ "variant": KlevuProductVariant; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not. */ "vatCaption"?: string; } /** * Component to place products on grid. Very simple container for products. * @csspart product-grid-base The container for the grid */ interface KlevuProductGrid { /** * Force to place products in grid with given number of columns. */ "itemsPerRow"?: number; } /** * Button that is placed on the site to start a product query session * @csspart product-query-open-button Button that opens the popup */ interface KlevuProductQuery { "additionaldata": string; /** * Text of the button for asking a question */ "askButtonText"?: string; /** * Text of the button to open the popup */ "buttonText": string; /** * Channel Id to be used in analytics eg: Shopify, BigCommerce */ "channelId"?: string; /** * Disable closing the popup when clicking outside of it */ "disableCloseOutsideClick"?: boolean; /** * Fine print of the popup under the title */ "finePrint": string; /** * Set to true if you want to hide the embedded title */ "hideEmbeddedTitle"?: boolean; /** * Product Group Id to be used in analytics, in case of multiple variants */ "itemGroupId"?: string; /** * Product Id to be used in analytics */ "itemId"?: string; /** * Optional Product Variant Id to be used in analytics */ "itemVariantId"?: string; /** * Locale to be used in analytics eg: en_US */ "locale"?: string; /** * Anchor popup to which side of the origin */ "popupAnchor": Placement; /** * How many pixels to offset the popup from origin */ "popupOffset": number; /** * Title of the popup */ "popupTitle": string; /** * Instead of Klevu API-key use a widget id to start a session */ "pqaWidgetId"?: string; /** * Set to false if you want to show the popup in place instead of dialog box */ "pqaWidgetLayout": WidgetLayout; /** * Alternative to url, productId can be used to start a session */ "productId"?: string; /** * Pass function to call that will return the product info eg: pass function call as string - "getProductInfo()" or function itself * @returns ProductInfo object */ "productInfoGenerator"?: string | (() => ProductInfo); /** * Settings for requests to Klevu. Deeper modification on how the product query works. */ "settings"?: MoiRequest["klevuSettings"]; /** * Placeholder of the textfield */ "textFieldPlaceholder": string; /** * Variant of the textfield how does it look like */ "textFieldVariant": KlevuTextfieldVariant; /** * Url of the page where the product is */ "url": string; /** * Use dark background with the popup */ "useBackground"?: boolean; /** * Use native scrollbars instead of custom ones */ "useNativeScrollbars"?: boolean; } /** * Klevu Product Query popup application that shows a popup for asking questions about a product * @csspart product-query-popup-header Header of the popup * @csspart product-query-popup-footer Footer of the popup where input is * @csspart product-query-popup-feedback Feedback section of the popup when it is being closed * @csspart product-query-popup-question-container Help questions container * @csspart product-query-popup-question Question bubble * @csspart product-query-popup-sendmessage Send message section */ interface KlevuProductQueryPopup { /** * Pass any additional data you would want the AI to use for context */ "additionaldata"?: string; /** * Text of the button for asking a question */ "askButtonText"?: string; /** * Channel Id to be used in analytics eg: Shopify, Bigcommerce */ "channelId"?: string; /** * Config for Klevu */ "config"?: KlevuConfig; /** * Disable closing the popup when clicking outside of it */ "disableCloseOutsideClick"?: boolean; /** * Set to true if you want to hide the embedded title */ "hideEmbeddedTitle"?: boolean; /** * Product Group Id to be used in analytics, in case of multiple variants */ "itemGroupId"?: string; /** * Product Id to be used in analytics */ "itemId"?: string; /** * Optional Product Variant Id to be used in analytics */ "itemVariantId"?: string; /** * Locale to be used in analytics eg: en_US */ "locale"?: string; /** * Element to anchor the product query popup to */ "originElement"?: HTMLElement; /** * Anchor popup to which side of the origin */ "popupAnchor": Placement; /** * How many pixels to offset the popup from origin */ "popupOffset"?: number; /** * Instead of Klevu API-key use a widget id to start a session */ "pqaWidgetId"?: string; /** * Set to false if you want to show this in place instead of dialog box */ "pqaWidgetLayout": WidgetLayout1; /** * Alternative to url, productId can be used to start a session */ "productId"?: string; /** * Pass function to call that will return the product info eg: pass function call as string - "getProductInfo()" or function * @returns ProductInfo object */ "productInfoGenerator"?: string | (() => ProductInfo); /** * Set to true if you want to remove the powered by ribbon */ "removeAskloBranding": boolean; /** * Settings for requests to Klevu. Deeper modification on how the product query works. */ "settings"?: MoiRequest["klevuSettings"]; /** * When sending a message fails, show this text */ "tAnswerError": string; /** * Text of the button to open the popup */ "tButtonText": string; /** * Data protection notice when user registering is enabled */ "tDataProtectionNotice": string; /** * Fine print of the popup under the title */ "tFinePrint": string; /** * When loading takes a bit longer, show this text */ "tLoadingSorry": string; /** * Title of the popup */ "tPopupTitle": string; /** * Description of the feedback section when closing the popup */ "tRateExperienceText": string; /** * Title of the feedback section when closing the popup */ "tRateExperienceTitle": string; /** * Placeholder of the textfield */ "tTextFieldPlaceholder": string; /** * Variant of the textfield how does it look like */ "textFieldVariant": KlevuTextfieldVariant; /** * Url of the page where the product is */ "url": string; /** * Use dark background with the popup */ "useBackground"?: boolean; /** * Use native scrollbars instead of custom ones */ "useNativeScrollbars"?: boolean; } /** * __klevu-query__ component is a special kind of component that makes queries to Klevu defined by the * __type__ parameter. It also listens to clicks to __klevu-product__ -component and sends analytical data to Klevu * based on that. This components gives you ability to create any kind of UI with Klevu components or by using your own * components! Just use __klevu-query__ to fetch the data and __klevu-product__ to render the product * cards. Whole content of __klevu-product__ can be replaced with your content. */ interface KlevuQuery { /** * Which category to do merchandising. Required for "merchandising" type */ "category"?: string; /** * Which category title to have on page. Required for "merchandising" type */ "categoryTitle"?: string; /** * By default component will fetch results on init or on property change. This can be disabled with this prop. */ "disableInitialFetch"?: boolean; /** * Force component to fetch results. This is called automatically when properties change. */ "fetch": () => Promise; /** * To how many filters limit results to */ "filterCount"?: number; /** * Fetch filters on the request */ "filterGet"?: boolean; /** * Should get price filters */ "filterWithPrices"?: boolean; /** * What's the limit on page */ "limit"?: number; /** * @klevu /core FilterManager used for filters. If none is set, new one is created */ "manager": FilterManager; /** * Offset of results */ "offset"?: number; /** * Object to override and settings on search options */ "options"?: AllQueryOptions; /** * Override default modifiers. This will disable default modifiers and ones set by filter props */ "overrideModifiers"?: KlevuFetchModifer[]; /** * Which products are in cart. Required for some recommendation types */ "recommendationCartProductIds"?: string[]; /** * Which category path to use for recommendation. Required for some recommendation types */ "recommendationCategoryPath"?: string; /** * Which product is currently being viewed. Required for some recommendation types */ "recommendationCurrentProductId"?: string; /** * Which recommendation to fetch from Klevu Merchant Center. Required for "recommendation" type */ "recommendationId"?: string; /** * What is the item group id of the product being viewed. Required for some recommendation types */ "recommendationItemGroupId"?: string; /** * When searching should search suggestions be fetched */ "searchSuggestions"?: boolean; /** * What to search. Required for "search" type. */ "searchTerm"?: string; /** * Should search view event be sent. View event is important for analytical cases. In case of a search this should be used only when creating a landing page for search. */ "sendSearchViewEvent"?: boolean; /** * How to sort */ "sort"?: KlevuSearchSorting; /** * What kind of query */ "type": "search" | "merchandising" | "recommendation"; /** * Should component listen to changes to filters */ "updateOnFilterChange"?: boolean; } /** * Full app to create search bar that popups trending products and search results. * @csspart quicksearch-content - The popup container * @csspart quicksearch-sidepanel - Sidepanel container sidepanel * @csspart quicksearch-main-area - Main content area container */ interface KlevuQuicksearch { /** * What term should be used if there isn't enough results */ "fallbackTerm"?: string; /** * How many products to show in full variant */ "fullResultCount": number; /** * Hide popular keywords on no results page */ "hidePopularKeywordsOnNoResultsPage"?: boolean; /** * Hide popular keywords */ "hidePopularSearches"?: boolean; /** * Hide recent searches */ "hideRecentSearches"?: boolean; /** * Hide recently viewed products */ "hideRecentlyViewedProducts"?: boolean; /** * Hide trending products */ "hideTrendingProducts"?: boolean; /** * HHide trending products on no results page */ "hideTrendingProductsOnNoResultsPage"?: boolean; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Placeholder for input text */ "placeholder"?: string; /** * How many products to show in Popular products section */ "popularProductsCount": number; /** * Anchor popup to witch side */ "popupAnchor"?: Placement; /** * Change variant of the search results */ "resultVariant": KlevuQuicksearchResultVarint; /** * Should component search for categories too */ "searchCategories"?: boolean; /** * Should component search for CMS pages too */ "searchCmsPages"?: boolean; /** * Change variant of the search field */ "searchFieldVariant": SearchFieldVariant; /** * Text of search button */ "searchText"?: string; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show variants count */ "showVariantsCount": boolean; /** * How many products to show in simple variant */ "simpleResultCount": number; /** * Title of categories section */ "tCategoriesCaption": string; /** * Recently clicked tab caption Supports showing the count in place of %s in the value eg: `Recently Searched (%s)` with count of 2 will lead to `Recently Searched (2)`. */ "tLastClickedProductsCaption"?: string; /** * Message to show when no results found */ "tNoResultsMessage": string; /** * Popular products section heading */ "tPopularProductsTitle"?: string; /** * Popular products section heading shown on no results page */ "tPopularProductsTitleOnNoResultsPage"?: string; /** * Title of search results */ "tSearchResults": string; /** * Trending tab caption Supports showing the count in place of %s in the value eg: `Trending (%s)` with count of 2 will lead to `Trending (2)`. */ "tTrendingCaption"?: string; /** * Load with default term */ "term"?: string; /** * Pass your own redirect urls for a keyword */ "urlRedirects"?: KMCMapsRootObject["klevu_keywordUrlMap"]; /** * Enables Klaviyo click tracking */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator": boolean; /** * Enable personalisation */ "usePersonalisation"?: boolean; } /** * Klevu ratings component * @prop rating - The rating value as a number to show * @prop ratingRange - The number of stars to show * @csspart rating-base The container for rating component * @csspart rating-star The star component */ interface KlevuRating { /** * Rating value */ "rating": number; /** * Number of stars to show */ "ratingRange": number; } /** * Full recommendation banner solution */ interface KlevuRecommendations { /** * For cart recommendation you need to provide product id's in cart */ "cartProductIds"?: string[]; /** * For category product recommendation you need to provide categery path */ "categoryPath"?: string; /** * For similiar products recommendation you need to provide productId and itemGroupId */ "currentProductId"?: string; /** * For similiar products recommendation you need to provide productId and itemGroupId */ "itemGroupId"?: string; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * The ID of the recommendation */ "recommendationId": string; /** * Title of the recommendation */ "recommendationTitle"?: string; } /** * Plain textfield that does the searching. It queries Klevu and returns the results * in a custom event. Then you can decide what to do with the results. */ interface KlevuSearchField { /** * Fallback term to use if there are no results */ "fallbackTerm"?: string; /** * Fetch next page of results from previous query * @param type what type of content to get page from * @param pageIndex from what page. If empty next page is fetched */ "getPage": (type: "search" | "category" | "cms", pageIndex?: number) => Promise; /** * Fetches query result from last request * @param type type of query result * @returns */ "getQueryResult": (type: "search" | "category" | "cms") => Promise; /** * Maximum amount of results */ "limit": number; /** * Programmatically trigger search * @param term What to search */ "makeSearch": (term: string) => Promise; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Should try to find categories as well */ "searchCategories"?: boolean; /** * Should try to find cms pages as well */ "searchCmsPages"?: boolean; /** * Should search products */ "searchProducts"?: boolean; /** * Should search suggestions */ "searchSuggestions"?: boolean; /** * Sends analytics when making query */ "sendAnalytics"?: boolean; /** * In case you want to sort the results */ "sort"?: KlevuSearchSorting; /** * The placeholder text to display in the search field. */ "tPlaceholder": string; /** * Button text */ "tSearchText": string; "term": string; /** * Enable Klaviyo integration for search terms and clicks */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator": boolean; /** * Enable personalisation on the query */ "usePersonalisation"?: boolean; /** * Variant of the search field */ "variant": SearchFieldVariant1; } /** * Full app component for search landing page * @csspart search-landing-page-header The header container * @csspart search-landing-page-content The content container * @csspart search-landing-page-sidebar The sidebar container * @csspart search-landing-page-footer The footer container */ interface KlevuSearchLandingPage { /** * To update the pagination and filters to the url automatically */ "autoUpdateUrl"?: boolean; /** * How many products to display in filters */ "filterCount"?: number; /** * Order filters in a customer order */ "filterCustomOrder"?: { [key: string]: string[] }; /** * Hides brand from search results */ "hideBrand"?: boolean; /** * Hides description from search results */ "hideDescription"?: boolean; /** * Hide filters on results page */ "hideFilters"?: boolean; /** * Hides hover image from search results */ "hideHoverImage"?: boolean; /** * Hides image from search results */ "hideImage"?: boolean; /** * Hides name from search results */ "hideName"?: boolean; /** * Hides price from search results */ "hidePrice"?: boolean; /** * Do not show swatches in products in search results */ "hideSwatches"?: boolean; /** * How many results to display on a page */ "limit": number; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Caption to show if product is out of stock in products in search results */ "outOfStockCaption"?: string; /** * How many products to show in popular products */ "popularProductsResultCount": number; /** * The factor to use to generate the ranges */ "priceInterval": number; /** * Show add to cart button in products in search results */ "showAddToCart"?: boolean; /** * Show price as options */ "showPriceAsSlider"?: boolean; /** * To show the product code next to product name in search results */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show the quick search box at the top of the page */ "showSearch"?: boolean; /** * Show variants count */ "showVariantsCount": boolean; /** * In which order to set the products */ "sort"?: KlevuSearchSorting; /** * Pass custom options for the sort dropdown */ "sortOptions"?: Array<{ value: KlevuSearchSorting; text: string }>; /** * Text for add to cart button in search results */ "tAddToCart"?: string; /** * Text of load more button */ "tLoadMore": string; /** * The title of the page */ "tSearchTitle": string; /** * What term was used for search */ "term": string; /** * Should use infinite scroll component to trigger load next */ "useInfiniteScroll"?: boolean; /** * Enable Klaviyo integration */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator": boolean; /** * Specify whether to show checkboxes or radio buttons for filters */ "useMultiSelectFilters"?: boolean; /** * Use pagination instead of loading more */ "usePagination"?: boolean; /** * Enable personalization */ "usePersonalisation"?: boolean; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not in search results. */ "vatCaption"?: string; } /** * Horizontal slider component. By default used for price range in this package. But can * be used for other purposes as well. */ interface KlevuSlider { /** * Current end value of the range */ "end"?: number; /** * Format tooltip value with function */ "formatTooltip"?: (value: number) => string; /** * Max value of the range */ "max": number; /** * Min value of the range */ "min": number; /** * Show tooltips on top of slider */ "showTooltips"?: boolean; /** * Current start value of the range */ "start"?: number; } /** * Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons. * @csspart slides-base The container for the slides component * @csspart slides-heading The heading of the slides * @csspart slides-previous-button The previous button * @csspart slides-next-button The next button */ interface KlevuSlides { /** * center position next and previous buttons */ "centerNextPrev"?: boolean; /** * Heading for the slides component */ "heading"?: string; /** * Hides next and previous buttons */ "hideNextPrev"?: boolean; /** * When clicking next/prev buttons should scroll full width of container */ "slideFullWidth"?: boolean; } /** * Sort dropdown. User can select what kind of sorting they want */ interface KlevuSort { /** * Pass custom options for the sort dropdown */ "options": Array<{ value: KlevuSearchSorting; text: string }>; /** * Dropdown variant */ "variant": KlevuDropdownVariant1; } /** * Simple component to list suggestions. Takes in a parameter suggestions that will be rendered as a list * @csspart suggestions-list-caption The caption to the list of suggestions */ interface KlevuSuggestionsList { /** * Caption on the list */ "caption": string; /** * Suggestions to render in list */ "suggestions": string[]; } /** * Very simple tab component. Use like a button, but with a caption. * Use standard onClick event to handle click. * @csspart tab-base The tab container * @csspart tab-caption The caption for the tab */ interface KlevuTab { /** * Whether the tab is active */ "active"?: boolean; /** * Title of the tab */ "caption": string; /** * Whether the tab is disabled */ "disabled"?: boolean; } /** * Branded text field component * @csspart textfield-base The container for input box * @csspart textfield-icon The icon at beginning of input * @csspart textfield-input The input box * @csspart textfield-clearbutton The clear button at the end of input */ interface KlevuTextfield { /** * Display a button to clear field value on the right side of the field */ "clearButton"?: boolean; /** * Is field disabled */ "disabled": boolean; /** * Is field in error state */ "error"?: boolean; /** * Icon to display in textfield start of the field. Please use tokens of material icons */ "icon"?: string; /** * Placeholder value of the field */ "placeholder"?: string; /** * Current value of the field */ "value": string; /** * Variant of textfield */ "variant": KlevuTextfieldVariant1; } /** * Klevu typography component. This component is used in most places to set correct font in component pieces. */ interface KlevuTypography { /** * Display the text in full width. Usefull when typography needs to be used as a block element. */ "fullWidth"?: boolean; /** * Variant of heading */ "variant": KlevuTypographyVariant; } /** * Utility compoenent that simplifies listening Klevu SDK Dom events * https://docs.klevu.com/headless-sdk/events-analytics#dhk6Y */ interface KlevuUtilDomEvents { } /** * Component that triggers event when intercepted on scroll of page. */ interface KlevuUtilInfiniteScroll { /** * Whether infinite scrolling is enabled */ "enabled": boolean; /** * The number of pages after which triggers infiniteScrollingPaused event. Listen to this event to allow further loading on user input. */ "infiniteScrollPauseThreshold": number; } /** * Portal component to move content to end of body instead of normal DOM position. Typically used for popups * to prevent problems with CSS stylings. * Does not move styles, so create a child component that has styles defined in shadow DOM. */ interface KlevuUtilPortal { } /** * Utility that replaces the default browser scrollbar with a custom one. */ interface KlevuUtilScrollbars { "getContainer": () => Promise; "getInstance": () => Promise<{ customInstance: OverlayScrollbars | undefined; nativeContainer: HTMLDivElement | undefined; }>; /** * The overflow behavior of the horizontal scrollbar. */ "overflowX"?: OverflowBehavior; /** * The overflow behavior of the vertical scrollbar. */ "overflowY"?: OverflowBehavior; /** * Disables the custom scrollbar and use native scrollbars instead. */ "useNative"?: boolean; } /** * KlevuUtilSsrProvider component stores the Klevu SSR response as a string * that can be hydrated in the client side. */ interface KlevuUtilSsrProvider { /** * @returns packed parameter returned by KlevuSSRFetch function for KlevuSSRHydrate function */ "getPacked": () => Promise; "html"?: string; "identifier"?: string; "packed"?: string; /** * packed parameter returned by KlevuSSRFetch function * @param packed */ "setPacked": (packed: object) => Promise; } interface KlevuUtilViewport { "getCurrentSize": () => Promise; /** * List of sizes to listen for */ "sizes": ViewportSize[]; } } export interface KlevuBannerCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuBannerElement; } export interface KlevuChatBubbleCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuChatBubbleElement; } export interface KlevuChatLayoutCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuChatLayoutElement; } export interface KlevuChatMessagesCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuChatMessagesElement; } export interface KlevuCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuCheckboxElement; } export interface KlevuChipCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuChipElement; } export interface KlevuCmsListCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuCmsListElement; } export interface KlevuColorSwatchCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuColorSwatchElement; } export interface KlevuDropdownCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuDropdownElement; } export interface KlevuFacetCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuFacetElement; } export interface KlevuFacetListCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuFacetListElement; } export interface KlevuInitCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuInitElement; } export interface KlevuLatestSearchesCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuLatestSearchesElement; } export interface KlevuLayoutResultsCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuLayoutResultsElement; } export interface KlevuMerchandisingCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuMerchandisingElement; } export interface KlevuModalCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuModalElement; } export interface KlevuMoiCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuMoiElement; } export interface KlevuPaginationCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuPaginationElement; } export interface KlevuPopularSearchesCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuPopularSearchesElement; } export interface KlevuPopupCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuPopupElement; } export interface KlevuProductCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuProductElement; } export interface KlevuProductQueryPopupCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuProductQueryPopupElement; } export interface KlevuQueryCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuQueryElement; } export interface KlevuQuicksearchCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuQuicksearchElement; } export interface KlevuRecommendationsCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuRecommendationsElement; } export interface KlevuSearchFieldCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuSearchFieldElement; } export interface KlevuSearchLandingPageCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuSearchLandingPageElement; } export interface KlevuSliderCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuSliderElement; } export interface KlevuSortCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuSortElement; } export interface KlevuSuggestionsListCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuSuggestionsListElement; } export interface KlevuTextfieldCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuTextfieldElement; } export interface KlevuUtilDomEventsCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuUtilDomEventsElement; } export interface KlevuUtilInfiniteScrollCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuUtilInfiniteScrollElement; } export interface KlevuUtilViewportCustomEvent extends CustomEvent { detail: T; target: HTMLKlevuUtilViewportElement; } declare global { /** * Component that wrap two slots to create accordion element. * @csspart accordion-base The container element for the accordion * @csspart accordion-header The label of the accordion * @csspart accordion-content The content of the accordion * @csspart accordion-icon The icon of the accordion */ interface HTMLKlevuAccordionElement extends Components.KlevuAccordion, HTMLStencilElement { } var HTMLKlevuAccordionElement: { prototype: HTMLKlevuAccordionElement; new (): HTMLKlevuAccordionElement; }; /** * Basic badge component. Can be used to display small information on top of other elements. Typically * used to display things on top of product. * @csspart badge-content The content of the badge * @csspart badge-base The container of the badge */ interface HTMLKlevuBadgeElement extends Components.KlevuBadge, HTMLStencilElement { } var HTMLKlevuBadgeElement: { prototype: HTMLKlevuBadgeElement; new (): HTMLKlevuBadgeElement; }; /** * Component that displays a typical klevu banner * @csspart banner-image The image element */ interface HTMLKlevuBannerElement extends Components.KlevuBanner, HTMLStencilElement { } var HTMLKlevuBannerElement: { prototype: HTMLKlevuBannerElement; new (): HTMLKlevuBannerElement; }; /** * Basic button component * @csspart button-base The button element */ interface HTMLKlevuButtonElement extends Components.KlevuButton, HTMLStencilElement { } var HTMLKlevuButtonElement: { prototype: HTMLKlevuButtonElement; new (): HTMLKlevuButtonElement; }; /** * Container for chat items. Very simple component, just a wrapper. * @csspart chat-bubble-base The container for the chat bubble * @csspart chat-bubble-positive-feedback The positive feedback section * @csspart chat-bubble-negative-feedback The negative feedback section * @csspart chat-bubble-feedback-reasons The feedback reasons section */ interface HTMLKlevuChatBubbleElement extends Components.KlevuChatBubble, HTMLStencilElement { } var HTMLKlevuChatBubbleElement: { prototype: HTMLKlevuChatBubbleElement; new (): HTMLKlevuChatBubbleElement; }; /** * Component that wraps chat elements into a layout. */ interface HTMLKlevuChatLayoutElement extends Components.KlevuChatLayout, HTMLStencilElement { } var HTMLKlevuChatLayoutElement: { prototype: HTMLKlevuChatLayoutElement; new (): HTMLKlevuChatLayoutElement; }; interface HTMLKlevuChatMessagesElement extends Components.KlevuChatMessages, HTMLStencilElement { } var HTMLKlevuChatMessagesElement: { prototype: HTMLKlevuChatMessagesElement; new (): HTMLKlevuChatMessagesElement; }; /** * Checkbox component * @csspart checkbox-base The container element of the checkbox * @csspart checkbox-box The checkbox element * @csspart checkbox-content The label of the checkbox */ interface HTMLKlevuCheckboxElement extends Components.KlevuCheckbox, HTMLStencilElement { } var HTMLKlevuCheckboxElement: { prototype: HTMLKlevuCheckboxElement; new (): HTMLKlevuCheckboxElement; }; /** * Chip component that is used to display selected value in a listing. Gives also ability to remove the chip. * Has selected and removable attributes that can be used to display the chip in selected state and also to remove the chip. * @csspart chip-base The container for the chip * @csspart chip-icon The icon for the close button * @csspart chip-content The content for the chip */ interface HTMLKlevuChipElement extends Components.KlevuChip, HTMLStencilElement { } var HTMLKlevuChipElement: { prototype: HTMLKlevuChipElement; new (): HTMLKlevuChipElement; }; /** * Component to display list of CMS page results * @csspart cms-list-caption The caption for the cms list */ interface HTMLKlevuCmsListElement extends Components.KlevuCmsList, HTMLStencilElement { } var HTMLKlevuCmsListElement: { prototype: HTMLKlevuCmsListElement; new (): HTMLKlevuCmsListElement; }; /** * Color Swatch component */ interface HTMLKlevuColorSwatchElement extends Components.KlevuColorSwatch, HTMLStencilElement { } var HTMLKlevuColorSwatchElement: { prototype: HTMLKlevuColorSwatchElement; new (): HTMLKlevuColorSwatchElement; }; /** * Component to create offscreen drawer on left or right side of the screen * @csspart drawer-base The container of the drawer * @csspart drawer-origin The button that controls open of the drawer * @csspart drawer-content The content inside the drawer */ interface HTMLKlevuDrawerElement extends Components.KlevuDrawer, HTMLStencilElement { } var HTMLKlevuDrawerElement: { prototype: HTMLKlevuDrawerElement; new (): HTMLKlevuDrawerElement; }; /** * Simple native dropdown component for dropdown * @csspart dropdown-base The container for the dropdown * @csspart dropdown-select The select box */ interface HTMLKlevuDropdownElement extends Components.KlevuDropdown, HTMLStencilElement { } var HTMLKlevuDropdownElement: { prototype: HTMLKlevuDropdownElement; new (): HTMLKlevuDropdownElement; }; /** * Rendering items of single facet with all its options or a slider. * Manager property must be set for this component to work. * @csspart facet-heading Heading of the facet * @csspart facet-radio The radio button for selection of facet * @csspart facet-more-button The button to show more results * @csspart facet-option-count The count of results per option */ interface HTMLKlevuFacetElement extends Components.KlevuFacet, HTMLStencilElement { } var HTMLKlevuFacetElement: { prototype: HTMLKlevuFacetElement; new (): HTMLKlevuFacetElement; }; /** * Render all facets of filter manager */ interface HTMLKlevuFacetListElement extends Components.KlevuFacetList, HTMLStencilElement { } var HTMLKlevuFacetListElement: { prototype: HTMLKlevuFacetListElement; new (): HTMLKlevuFacetListElement; }; /** * Klevu icon component. Uses Google Material Icons. */ interface HTMLKlevuIconElement extends Components.KlevuIcon, HTMLStencilElement { } var HTMLKlevuIconElement: { prototype: HTMLKlevuIconElement; new (): HTMLKlevuIconElement; }; /** * `klevu-init` is the most important component of the whole library. Place one in your document. It should be * one of the first ones in the `` tag. Currently only one `klevu-init` per page is supported. It is used to define * configuration for all components on the page and provide few global settings for all components: * - **onItemClick:** what happens when product is clicked. Typically this places default action of * _klevu-product_ click. For example you can make your own frontend router to act in this function. Is * provided with product and click event as attributes. Remember to preventDefault and return false to prevent anchor * link following. * - **generateProductUrl:** what kind of URL's should be generated for products. If _onItemClick_ * is not used this can be used for it. Has product as attribute. * - **renderPrice:** generic function for price rendering. If you wish to have your own formatting for price * rendering then this is the place. Has two attribute amount and currency of item. * Initializes components to fetch data from correct Klevu backend * **Note: All global CSS variables are documented in `klevu-init` even thought they are not defined in it.** */ interface HTMLKlevuInitElement extends Components.KlevuInit, HTMLStencilElement { } var HTMLKlevuInitElement: { prototype: HTMLKlevuInitElement; new (): HTMLKlevuInitElement; }; /** * Lists latest searches user has made on the site * @csspart latest-searches-caption The caption for the latest search list */ interface HTMLKlevuLatestSearchesElement extends Components.KlevuLatestSearches, HTMLStencilElement { } var HTMLKlevuLatestSearchesElement: { prototype: HTMLKlevuLatestSearchesElement; new (): HTMLKlevuLatestSearchesElement; }; /** * Generic layout used in merchansiding and search landing page */ interface HTMLKlevuLayoutResultsElement extends Components.KlevuLayoutResults, HTMLStencilElement { } var HTMLKlevuLayoutResultsElement: { prototype: HTMLKlevuLayoutResultsElement; new (): HTMLKlevuLayoutResultsElement; }; /** * Single list item for listing things. * @csspart list-base The container for the list * @csspart list-icon The icon element of the list * @csspart list-image The image element of the list * @csspart list-content The content of the list * @csspart list-button The button element in the list */ interface HTMLKlevuListElement extends Components.KlevuList, HTMLStencilElement { } var HTMLKlevuListElement: { prototype: HTMLKlevuListElement; new (): HTMLKlevuListElement; }; /** * Simple loading indicator * @csspart loading-indicator-base The container for the loading indicator */ interface HTMLKlevuLoadingIndicatorElement extends Components.KlevuLoadingIndicator, HTMLStencilElement { } var HTMLKlevuLoadingIndicatorElement: { prototype: HTMLKlevuLoadingIndicatorElement; new (): HTMLKlevuLoadingIndicatorElement; }; /** * Full merchandising app to power up your product grid pages * @csspart merchandising-sidebar - Sidebar container * @csspart merchandising-header - Header container * @csspart merchandising-content - Content container * @csspart merchandising-footer - Footer container */ interface HTMLKlevuMerchandisingElement extends Components.KlevuMerchandising, HTMLStencilElement { } var HTMLKlevuMerchandisingElement: { prototype: HTMLKlevuMerchandisingElement; new (): HTMLKlevuMerchandisingElement; }; /** * Stylized modal dialog. * @csspart modal-base The container for modal dialog * @csspart modal-header The header for modal dialog * @csspart modal-dialog The dialog component * @csspart modal-body The body for modal dialog */ interface HTMLKlevuModalElement extends Components.KlevuModal, HTMLStencilElement { } var HTMLKlevuModalElement: { prototype: HTMLKlevuModalElement; new (): HTMLKlevuModalElement; }; /** * Klevu MOI Application */ interface HTMLKlevuMoiElement extends Components.KlevuMoi, HTMLStencilElement { } var HTMLKlevuMoiElement: { prototype: HTMLKlevuMoiElement; new (): HTMLKlevuMoiElement; }; /** * Pagination component. Either provide numbers or query result to display the component. * @csspart pagination-base The container for pagination * @csspart pagination-navigation-previous The previous page button * @csspart pagination-navigation-next The next page button */ interface HTMLKlevuPaginationElement extends Components.KlevuPagination, HTMLStencilElement { } var HTMLKlevuPaginationElement: { prototype: HTMLKlevuPaginationElement; new (): HTMLKlevuPaginationElement; }; /** * Fetches and displays most popular searches from Klevu Merchant center * @csspart popular-searches-base The container for the popular searches * @csspart popular-searches-caption The caption for the search * @csspart popular-searches-list-item The list item in search */ interface HTMLKlevuPopularSearchesElement extends Components.KlevuPopularSearches, HTMLStencilElement { } var HTMLKlevuPopularSearchesElement: { prototype: HTMLKlevuPopularSearchesElement; new (): HTMLKlevuPopularSearchesElement; }; /** * Popup component where clicking origin component popups the the content * @csspart popup-base The container for the popup * @csspart popup-content Content component */ interface HTMLKlevuPopupElement extends Components.KlevuPopup, HTMLStencilElement { } var HTMLKlevuPopupElement: { prototype: HTMLKlevuPopupElement; new (): HTMLKlevuPopupElement; }; /** * Generic product component that renders product based on KlevuRecord of klevu/core * All parts of the component can be replaced with slots. * By default the products fill the whole space, but it can be limited * with --klevu-product-width and --klevu-product-small-width css variables. * @csspart product-image The image element of component * @csspart product-base The container element of whole * @csspart product-swatch Single swatch element under the image * @csspart product-brandname The brand name of the product * @csspart product-name The name of the product * @csspart product-description The description of the product * @csspart product-price The price of the product * @csspart product-vatcaption The vat caption of the product * @csspart product-ooscaption The out of stock caption of the product * @csspart product-variants-count The number of variants * @csspart product-addtocart The add to cart button */ interface HTMLKlevuProductElement extends Components.KlevuProduct, HTMLStencilElement { } var HTMLKlevuProductElement: { prototype: HTMLKlevuProductElement; new (): HTMLKlevuProductElement; }; /** * Component to place products on grid. Very simple container for products. * @csspart product-grid-base The container for the grid */ interface HTMLKlevuProductGridElement extends Components.KlevuProductGrid, HTMLStencilElement { } var HTMLKlevuProductGridElement: { prototype: HTMLKlevuProductGridElement; new (): HTMLKlevuProductGridElement; }; /** * Button that is placed on the site to start a product query session * @csspart product-query-open-button Button that opens the popup */ interface HTMLKlevuProductQueryElement extends Components.KlevuProductQuery, HTMLStencilElement { } var HTMLKlevuProductQueryElement: { prototype: HTMLKlevuProductQueryElement; new (): HTMLKlevuProductQueryElement; }; /** * Klevu Product Query popup application that shows a popup for asking questions about a product * @csspart product-query-popup-header Header of the popup * @csspart product-query-popup-footer Footer of the popup where input is * @csspart product-query-popup-feedback Feedback section of the popup when it is being closed * @csspart product-query-popup-question-container Help questions container * @csspart product-query-popup-question Question bubble * @csspart product-query-popup-sendmessage Send message section */ interface HTMLKlevuProductQueryPopupElement extends Components.KlevuProductQueryPopup, HTMLStencilElement { } var HTMLKlevuProductQueryPopupElement: { prototype: HTMLKlevuProductQueryPopupElement; new (): HTMLKlevuProductQueryPopupElement; }; /** * __klevu-query__ component is a special kind of component that makes queries to Klevu defined by the * __type__ parameter. It also listens to clicks to __klevu-product__ -component and sends analytical data to Klevu * based on that. This components gives you ability to create any kind of UI with Klevu components or by using your own * components! Just use __klevu-query__ to fetch the data and __klevu-product__ to render the product * cards. Whole content of __klevu-product__ can be replaced with your content. */ interface HTMLKlevuQueryElement extends Components.KlevuQuery, HTMLStencilElement { } var HTMLKlevuQueryElement: { prototype: HTMLKlevuQueryElement; new (): HTMLKlevuQueryElement; }; /** * Full app to create search bar that popups trending products and search results. * @csspart quicksearch-content - The popup container * @csspart quicksearch-sidepanel - Sidepanel container sidepanel * @csspart quicksearch-main-area - Main content area container */ interface HTMLKlevuQuicksearchElement extends Components.KlevuQuicksearch, HTMLStencilElement { } var HTMLKlevuQuicksearchElement: { prototype: HTMLKlevuQuicksearchElement; new (): HTMLKlevuQuicksearchElement; }; /** * Klevu ratings component * @prop rating - The rating value as a number to show * @prop ratingRange - The number of stars to show * @csspart rating-base The container for rating component * @csspart rating-star The star component */ interface HTMLKlevuRatingElement extends Components.KlevuRating, HTMLStencilElement { } var HTMLKlevuRatingElement: { prototype: HTMLKlevuRatingElement; new (): HTMLKlevuRatingElement; }; /** * Full recommendation banner solution */ interface HTMLKlevuRecommendationsElement extends Components.KlevuRecommendations, HTMLStencilElement { } var HTMLKlevuRecommendationsElement: { prototype: HTMLKlevuRecommendationsElement; new (): HTMLKlevuRecommendationsElement; }; /** * Plain textfield that does the searching. It queries Klevu and returns the results * in a custom event. Then you can decide what to do with the results. */ interface HTMLKlevuSearchFieldElement extends Components.KlevuSearchField, HTMLStencilElement { } var HTMLKlevuSearchFieldElement: { prototype: HTMLKlevuSearchFieldElement; new (): HTMLKlevuSearchFieldElement; }; /** * Full app component for search landing page * @csspart search-landing-page-header The header container * @csspart search-landing-page-content The content container * @csspart search-landing-page-sidebar The sidebar container * @csspart search-landing-page-footer The footer container */ interface HTMLKlevuSearchLandingPageElement extends Components.KlevuSearchLandingPage, HTMLStencilElement { } var HTMLKlevuSearchLandingPageElement: { prototype: HTMLKlevuSearchLandingPageElement; new (): HTMLKlevuSearchLandingPageElement; }; /** * Horizontal slider component. By default used for price range in this package. But can * be used for other purposes as well. */ interface HTMLKlevuSliderElement extends Components.KlevuSlider, HTMLStencilElement { } var HTMLKlevuSliderElement: { prototype: HTMLKlevuSliderElement; new (): HTMLKlevuSliderElement; }; /** * Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons. * @csspart slides-base The container for the slides component * @csspart slides-heading The heading of the slides * @csspart slides-previous-button The previous button * @csspart slides-next-button The next button */ interface HTMLKlevuSlidesElement extends Components.KlevuSlides, HTMLStencilElement { } var HTMLKlevuSlidesElement: { prototype: HTMLKlevuSlidesElement; new (): HTMLKlevuSlidesElement; }; /** * Sort dropdown. User can select what kind of sorting they want */ interface HTMLKlevuSortElement extends Components.KlevuSort, HTMLStencilElement { } var HTMLKlevuSortElement: { prototype: HTMLKlevuSortElement; new (): HTMLKlevuSortElement; }; /** * Simple component to list suggestions. Takes in a parameter suggestions that will be rendered as a list * @csspart suggestions-list-caption The caption to the list of suggestions */ interface HTMLKlevuSuggestionsListElement extends Components.KlevuSuggestionsList, HTMLStencilElement { } var HTMLKlevuSuggestionsListElement: { prototype: HTMLKlevuSuggestionsListElement; new (): HTMLKlevuSuggestionsListElement; }; /** * Very simple tab component. Use like a button, but with a caption. * Use standard onClick event to handle click. * @csspart tab-base The tab container * @csspart tab-caption The caption for the tab */ interface HTMLKlevuTabElement extends Components.KlevuTab, HTMLStencilElement { } var HTMLKlevuTabElement: { prototype: HTMLKlevuTabElement; new (): HTMLKlevuTabElement; }; /** * Branded text field component * @csspart textfield-base The container for input box * @csspart textfield-icon The icon at beginning of input * @csspart textfield-input The input box * @csspart textfield-clearbutton The clear button at the end of input */ interface HTMLKlevuTextfieldElement extends Components.KlevuTextfield, HTMLStencilElement { } var HTMLKlevuTextfieldElement: { prototype: HTMLKlevuTextfieldElement; new (): HTMLKlevuTextfieldElement; }; /** * Klevu typography component. This component is used in most places to set correct font in component pieces. */ interface HTMLKlevuTypographyElement extends Components.KlevuTypography, HTMLStencilElement { } var HTMLKlevuTypographyElement: { prototype: HTMLKlevuTypographyElement; new (): HTMLKlevuTypographyElement; }; /** * Utility compoenent that simplifies listening Klevu SDK Dom events * https://docs.klevu.com/headless-sdk/events-analytics#dhk6Y */ interface HTMLKlevuUtilDomEventsElement extends Components.KlevuUtilDomEvents, HTMLStencilElement { } var HTMLKlevuUtilDomEventsElement: { prototype: HTMLKlevuUtilDomEventsElement; new (): HTMLKlevuUtilDomEventsElement; }; /** * Component that triggers event when intercepted on scroll of page. */ interface HTMLKlevuUtilInfiniteScrollElement extends Components.KlevuUtilInfiniteScroll, HTMLStencilElement { } var HTMLKlevuUtilInfiniteScrollElement: { prototype: HTMLKlevuUtilInfiniteScrollElement; new (): HTMLKlevuUtilInfiniteScrollElement; }; /** * Portal component to move content to end of body instead of normal DOM position. Typically used for popups * to prevent problems with CSS stylings. * Does not move styles, so create a child component that has styles defined in shadow DOM. */ interface HTMLKlevuUtilPortalElement extends Components.KlevuUtilPortal, HTMLStencilElement { } var HTMLKlevuUtilPortalElement: { prototype: HTMLKlevuUtilPortalElement; new (): HTMLKlevuUtilPortalElement; }; /** * Utility that replaces the default browser scrollbar with a custom one. */ interface HTMLKlevuUtilScrollbarsElement extends Components.KlevuUtilScrollbars, HTMLStencilElement { } var HTMLKlevuUtilScrollbarsElement: { prototype: HTMLKlevuUtilScrollbarsElement; new (): HTMLKlevuUtilScrollbarsElement; }; /** * KlevuUtilSsrProvider component stores the Klevu SSR response as a string * that can be hydrated in the client side. */ interface HTMLKlevuUtilSsrProviderElement extends Components.KlevuUtilSsrProvider, HTMLStencilElement { } var HTMLKlevuUtilSsrProviderElement: { prototype: HTMLKlevuUtilSsrProviderElement; new (): HTMLKlevuUtilSsrProviderElement; }; interface HTMLKlevuUtilViewportElement extends Components.KlevuUtilViewport, HTMLStencilElement { } var HTMLKlevuUtilViewportElement: { prototype: HTMLKlevuUtilViewportElement; new (): HTMLKlevuUtilViewportElement; }; interface HTMLElementTagNameMap { "klevu-accordion": HTMLKlevuAccordionElement; "klevu-badge": HTMLKlevuBadgeElement; "klevu-banner": HTMLKlevuBannerElement; "klevu-button": HTMLKlevuButtonElement; "klevu-chat-bubble": HTMLKlevuChatBubbleElement; "klevu-chat-layout": HTMLKlevuChatLayoutElement; "klevu-chat-messages": HTMLKlevuChatMessagesElement; "klevu-checkbox": HTMLKlevuCheckboxElement; "klevu-chip": HTMLKlevuChipElement; "klevu-cms-list": HTMLKlevuCmsListElement; "klevu-color-swatch": HTMLKlevuColorSwatchElement; "klevu-drawer": HTMLKlevuDrawerElement; "klevu-dropdown": HTMLKlevuDropdownElement; "klevu-facet": HTMLKlevuFacetElement; "klevu-facet-list": HTMLKlevuFacetListElement; "klevu-icon": HTMLKlevuIconElement; "klevu-init": HTMLKlevuInitElement; "klevu-latest-searches": HTMLKlevuLatestSearchesElement; "klevu-layout-results": HTMLKlevuLayoutResultsElement; "klevu-list": HTMLKlevuListElement; "klevu-loading-indicator": HTMLKlevuLoadingIndicatorElement; "klevu-merchandising": HTMLKlevuMerchandisingElement; "klevu-modal": HTMLKlevuModalElement; "klevu-moi": HTMLKlevuMoiElement; "klevu-pagination": HTMLKlevuPaginationElement; "klevu-popular-searches": HTMLKlevuPopularSearchesElement; "klevu-popup": HTMLKlevuPopupElement; "klevu-product": HTMLKlevuProductElement; "klevu-product-grid": HTMLKlevuProductGridElement; "klevu-product-query": HTMLKlevuProductQueryElement; "klevu-product-query-popup": HTMLKlevuProductQueryPopupElement; "klevu-query": HTMLKlevuQueryElement; "klevu-quicksearch": HTMLKlevuQuicksearchElement; "klevu-rating": HTMLKlevuRatingElement; "klevu-recommendations": HTMLKlevuRecommendationsElement; "klevu-search-field": HTMLKlevuSearchFieldElement; "klevu-search-landing-page": HTMLKlevuSearchLandingPageElement; "klevu-slider": HTMLKlevuSliderElement; "klevu-slides": HTMLKlevuSlidesElement; "klevu-sort": HTMLKlevuSortElement; "klevu-suggestions-list": HTMLKlevuSuggestionsListElement; "klevu-tab": HTMLKlevuTabElement; "klevu-textfield": HTMLKlevuTextfieldElement; "klevu-typography": HTMLKlevuTypographyElement; "klevu-util-dom-events": HTMLKlevuUtilDomEventsElement; "klevu-util-infinite-scroll": HTMLKlevuUtilInfiniteScrollElement; "klevu-util-portal": HTMLKlevuUtilPortalElement; "klevu-util-scrollbars": HTMLKlevuUtilScrollbarsElement; "klevu-util-ssr-provider": HTMLKlevuUtilSsrProviderElement; "klevu-util-viewport": HTMLKlevuUtilViewportElement; } } declare namespace LocalJSX { /** * Component that wrap two slots to create accordion element. * @csspart accordion-base The container element for the accordion * @csspart accordion-header The label of the accordion * @csspart accordion-content The content of the accordion * @csspart accordion-icon The icon of the accordion */ interface KlevuAccordion { /** * is accordion open */ "open"?: boolean; /** * Should it initially be open */ "startOpen"?: boolean; } /** * Basic badge component. Can be used to display small information on top of other elements. Typically * used to display things on top of product. * @csspart badge-content The content of the badge * @csspart badge-base The container of the badge */ interface KlevuBadge { /** * Setting a accent color to badge (1-4) */ "accent"?: number; /** * Setting a neutral color to badge (1-8) */ "neutral"?: number; } /** * Component that displays a typical klevu banner * @csspart banner-image The image element */ interface KlevuBanner { /** * The alt text to display for iamge */ "altText": string; /** * The image url to display */ "imageUrl": string; /** * The link url to navigate to */ "linkUrl": string; /** * Event emitted when the banner is clicked. Sends the link url as the event detail If defaultPrevented is called on the event, the link will not be followed */ "onKlevuBannerClick"?: (event: KlevuBannerCustomEvent) => void; /** * The target to open the link in */ "target"?: "_blank" | "_self"; } /** * Basic button component * @csspart button-base The button element */ interface KlevuButton { /** * Is button disabled */ "disabled"?: boolean; /** * Make button display block */ "fullWidth"?: boolean; /** * Instead of content have an icon. So basically icon-button */ "icon"?: string; /** * Toned down secondary button */ "isSecondary"?: boolean; /** * Toned down tertiary button */ "isTertiary"?: boolean; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; "size"?: "tiny" | "small" | "normal" | "large"; } /** * Container for chat items. Very simple component, just a wrapper. * @csspart chat-bubble-base The container for the chat bubble * @csspart chat-bubble-positive-feedback The positive feedback section * @csspart chat-bubble-negative-feedback The negative feedback section * @csspart chat-bubble-feedback-reasons The feedback reasons section */ interface KlevuChatBubble { /** * Has user given feedback to this message */ "feedback"?: MoiSavedFeedback; /** * List of feedback reasons to show after the message */ "feedbackReasons"?: string[]; "onKlevuMessageFeedbackReason"?: (event: KlevuChatBubbleCustomEvent) => void; /** * Is the message from the user or from the bot */ "remote"?: boolean; /** * Text for rating reason title */ "tRatingReason"?: string; } /** * Component that wraps chat elements into a layout. */ interface KlevuChatLayout { /** * Event emitted when user sends a message */ "onKlevuChatLayoutMessageSent"?: (event: KlevuChatLayoutCustomEvent) => void; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; /** * Use native scrollbars instead of custom ones in content */ "useNativeScrollbars"?: boolean; } interface KlevuChatMessages { /** * Should display the product slider navigation buttons centered in relating to product list */ "centerNextPrev"?: boolean; /** * Should display a feedback button after each message */ "enableMessageFeedback"?: boolean; /** * Feedbacks given by user */ "feedbacks"?: MoiSavedFeedback[]; /** * Optional action to perform when type writer effect completes */ "handleTypeWriterEffectEnds"?: (showQuestions: boolean) => void; /** * Messages received from Moi backend */ "messages"?: MoiMessages; /** * When product is clicked */ "onKlevuChatProductClick"?: (event: KlevuChatMessagesCustomEvent<{ product: MoiProduct }>) => void; /** * When feedback is given */ "onKlevuMessageFeedback"?: (event: KlevuChatMessagesCustomEvent) => void; /** * When product filter is clicked */ "onKlevuSelectFilter"?: (event: KlevuChatMessagesCustomEvent<{ message: MoiResponseFilter; filter: MoiResponseFilter["filter"]["options"][0] }>) => void; /** * When product option is clicked */ "onKlevuSelectProductOption"?: (event: KlevuChatMessagesCustomEvent<{ product: MoiProduct; option: MoiProduct["options"][0] }>) => void; /** * Scroll to bottom of the chat */ "scrollBottom"?: () => void; /** * What message should we */ "showFeedbackFor"?: string; /** * type animation speed, if 0, no animation */ "speed"?: number; } /** * Checkbox component * @csspart checkbox-base The container element of the checkbox * @csspart checkbox-box The checkbox element * @csspart checkbox-content The label of the checkbox */ interface KlevuCheckbox { /** * Is checkbox checked */ "checked"?: boolean; /** * Is disabled */ "disabled"?: boolean; /** * Name of the checkbox */ "name"?: string; "onKlevuCheckboxChange"?: (event: KlevuCheckboxCustomEvent) => void; } /** * Chip component that is used to display selected value in a listing. Gives also ability to remove the chip. * Has selected and removable attributes that can be used to display the chip in selected state and also to remove the chip. * @csspart chip-base The container for the chip * @csspart chip-icon The icon for the close button * @csspart chip-content The content for the chip */ interface KlevuChip { /** * Event that is fired when chip is removed */ "onKlevuChipRemove"?: (event: KlevuChipCustomEvent) => void; /** * Removable state of the chip */ "removable"?: boolean; /** * Selected state of the chip */ "selected"?: boolean; } /** * Component to display list of CMS page results * @csspart cms-list-caption The caption for the cms list */ interface KlevuCmsList { /** * Should use url parameter from link to create anchor */ "link"?: boolean; "onKlevuCmsPageClick"?: (event: KlevuCmsListCustomEvent>) => void; /** * List of Klevu results records with type of Page */ "pages": Array>; /** * Caption of the listing */ "tCaption"?: string; } /** * Color Swatch component */ interface KlevuColorSwatch { /** * Specify border color for the swatch */ "borderColor"?: string; /** * Color to apply */ "color"?: string; /** * ImageUrl to load in swatch */ "imageUrl"?: string; /** * This field will be sent in the click callback */ "name": string; /** * When swatch has been clicked */ "onKlevuSwatchClick"?: (event: KlevuColorSwatchCustomEvent) => void; /** * If selected */ "selected": boolean; } /** * Component to create offscreen drawer on left or right side of the screen * @csspart drawer-base The container of the drawer * @csspart drawer-origin The button that controls open of the drawer * @csspart drawer-content The content inside the drawer */ interface KlevuDrawer { /** * Anchor to right or left side of the page */ "anchor"?: "right" | "left"; /** * Display dim background on top of other content */ "background"?: boolean; /** * Close by clicking outside of drawer */ "closeAtOutsideClick"?: boolean; /** * Add little bit of padding to content of drawer */ "insertYPadding"?: boolean; /** * Start side drawer open */ "startOpen"?: boolean; } /** * Simple native dropdown component for dropdown * @csspart dropdown-base The container for the dropdown * @csspart dropdown-select The select box */ interface KlevuDropdown { /** * Is element disabled */ "disabled"?: boolean; /** * Form name */ "name": string; /** * When dropdown item has been changed */ "onKlevuDropdownChanged"?: (event: KlevuDropdownCustomEvent) => void; /** * Options to display in dropdown */ "options": Array<{ value: string; text: string }>; /** * Which element value is selected */ "selected": string; /** * Variant of dropdown */ "variant"?: KlevuDropdownVariant; } /** * Rendering items of single facet with all its options or a slider. * Manager property must be set for this component to work. * @csspart facet-heading Heading of the facet * @csspart facet-radio The radio button for selection of facet * @csspart facet-more-button The button to show more results * @csspart facet-option-count The count of results per option */ interface KlevuFacet { /** * Should the facet be in accordion */ "accordion"?: boolean; /** * Start accordion open */ "accordionStartOpen"?: boolean; /** * Specific overrides for individual color swatch. The overrides can be colors (hex or valid css colors) or a valid url to load. ImageUrl takes precedence over color when both are specified. */ "colorSwatchOverrides"?: KlevuColorSwatchOverride; /** * Set predefined order for options. Unfound values are in original order in end */ "customOrder"?: string[]; /** * Override label text with custom value */ "labelOverride"?: string; /** * Originating filter manager which to modify. This is the most important property of the component. It will be used to modify the filter state for queries. */ "manager": FilterManager; /** * Which mode should facets be in */ "mode"?: KlevuFacetMode; /** * When filter selection is updated */ "onKlevuFilterSelectionUpdate"?: (event: KlevuFacetCustomEvent) => void; /** * From which options to build facet. Single option value from Klevu SDK FilterManager. Either this or slider must be set. */ "option"?: KlevuFilterResultOptions; /** * The currency to show in the price slider */ "priceSliderCurrency"?: string; /** * From which slider to build facet. */ "slider"?: KlevuFilterResultSlider; "tAll"?: string; "tMore"?: string; /** * Converts the color filters to swatches */ "useColorSwatch"?: boolean; } /** * Render all facets of filter manager */ interface KlevuFacetList { /** * Should use accordions to for facets */ "accordion"?: boolean; /** * Button text for Apply button when using `useApplyButton` */ "applyButtonText"?: string; /** * Button text for Clear button when using `useApplyButton` */ "clearButtonText"?: string; /** * Specific overrides for individual color swatch. The overrides can be colors (hex or valid css colors) or a valid url to load. ImageUrl takes precedence over color when both are specified. */ "colorSwatchOverrides"?: { [key: string]: KlevuColorSwatchOverride1 }; /** * Specify which facet keys should be rendered as color swatches */ "colorSwatches"?: string[]; /** * Custom order keys for every facet */ "customOrder"?: { [key: string]: string[] }; /** * Default price label for sliders */ "defaultPriceLabel"?: string; /** * Filter managet from which the list is built from */ "manager": FilterManager; /** * Set mode for facets or if object is passed then define per key */ "mode"?: KlevuFacetMode1 | { [key: string]: KlevuFacetMode1 }; /** * When filters are applied */ "onKlevuApplyFilters"?: (event: KlevuFacetListCustomEvent) => void; /** * The currency to show in the price slider */ "priceSliderCurrency"?: string; /** * To set the facet selection value in the url */ "shouldUpdateUrlForFacets"?: boolean; /** * Display "apply filters" button in the end. And do not apply filters until this button is pressed */ "useApplyButton"?: boolean; } /** * Klevu icon component. Uses Google Material Icons. */ interface KlevuIcon { /** * Name of the icon. Please use tokens of material icons */ "name": string; /** * To be set to portal trigger element when component is being used in a portal */ "originElement"?: HTMLElement; } /** * `klevu-init` is the most important component of the whole library. Place one in your document. It should be * one of the first ones in the `` tag. Currently only one `klevu-init` per page is supported. It is used to define * configuration for all components on the page and provide few global settings for all components: * - **onItemClick:** what happens when product is clicked. Typically this places default action of * _klevu-product_ click. For example you can make your own frontend router to act in this function. Is * provided with product and click event as attributes. Remember to preventDefault and return false to prevent anchor * link following. * - **generateProductUrl:** what kind of URL's should be generated for products. If _onItemClick_ * is not used this can be used for it. Has product as attribute. * - **renderPrice:** generic function for price rendering. If you wish to have your own formatting for price * rendering then this is the place. Has two attribute amount and currency of item. * Initializes components to fetch data from correct Klevu backend * **Note: All global CSS variables are documented in `klevu-init` even thought they are not defined in it.** */ interface KlevuInit { /** * Read only API key to Klevu */ "apiKey": string; /** * Override the default assets path. Will use format of `${assetsPath}/assets/${resource}` */ "assetsPath"?: string; /** * Data read consent given */ "consentGiven"?: boolean; /** * disableUserSession and stop making calls to visitor service when this is true, defaults to false. */ "disableUserSession"?: boolean; /** * Enable Klaviyo integration */ "enableKlaviyoConnector"?: boolean; /** * Override the default events v1 URL */ "eventsV1Url"?: string; /** * Override the default events v2 URL */ "eventsV2Url"?: string; /** * Ipv4 ServiceUrl for ipv4 retrieval used in analytics */ "ipv4ServiceUrl"?: string; /** * Ipv6 ServiceUrl for ipv6 retrieval used in analytics */ "ipv6ServiceUrl"?: string; "kmcLoadDefaults"?: boolean; /** * Which language to load */ "language"?: Translations; /** * Override the default moi API URL */ "moiApiUrl"?: string; "onKlevuInitSettingsUpdated"?: (event: KlevuInitCustomEvent) => void; /** * Override the default recommendations API URL */ "recommendationsApiUrl"?: string; /** * Global settings */ "settings"?: KlevuUIGlobalSettings; "settingsUrl"?: string; /** * Provide your own translations */ "translation"?: Translation; /** * Override the default translation URL prefix. Will use format of `${translationUrlPrefix}/translations/${lang}.json` */ "translationUrlPrefix"?: string; /** * Klevu Server URL */ "url": string; /** * Enable Data Protection */ "useConsent"?: boolean; /** * Override the default session API URL */ "visitorServiceUrl"?: string; } /** * Lists latest searches user has made on the site * @csspart latest-searches-caption The caption for the latest search list */ interface KlevuLatestSearches { /** * Event that is emitted when a popular search is clicked */ "onKlevuLastSearchClicked"?: (event: KlevuLatestSearchesCustomEvent) => void; /** * Caption of the list */ "tCaption"?: string; } /** * Generic layout used in merchansiding and search landing page */ interface KlevuLayoutResults { "onKlevuDrawerOpened"?: (event: KlevuLayoutResultsCustomEvent) => void; } /** * Single list item for listing things. * @csspart list-base The container for the list * @csspart list-icon The icon element of the list * @csspart list-image The image element of the list * @csspart list-content The content of the list * @csspart list-button The button element in the list */ interface KlevuList { /** * Condensed version of the list item. */ "condensed"?: boolean; /** * Icon to be displayed in the list item. Cannot be used with image. */ "icon"?: string; /** * Image to be displayed in the list item. Cannot be used with icon. */ "image"?: string; "noXPadding"?: boolean; /** * To render primary text with default styling */ "primaryText"?: string; /** * To render secondary text with default styling */ "secondaryText"?: string; /** * Make the whole thing clickable and navigate to this url. */ "url"?: string; } /** * Simple loading indicator * @csspart loading-indicator-base The container for the loading indicator */ interface KlevuLoadingIndicator { } /** * Full merchandising app to power up your product grid pages * @csspart merchandising-sidebar - Sidebar container * @csspart merchandising-header - Header container * @csspart merchandising-content - Content container * @csspart merchandising-footer - Footer container */ interface KlevuMerchandising { /** * To update the pagination and filters to the url automatically */ "autoUpdateUrl"?: boolean; /** * Which category products */ "category": string; /** * Category title */ "categoryTitle": string; /** * How many filters per facet to show */ "filterCount"?: number; /** * Order filters in given order */ "filterCustomOrder"?: { [key: string]: string[] }; /** * Hides brand from merchandising */ "hideBrand"?: boolean; /** * Hides description from merchandising */ "hideDescription"?: boolean; /** * Hides hover image from merchandising */ "hideHoverImage"?: boolean; /** * Hides image from merchandising */ "hideImage"?: boolean; /** * Hides name from merchandising */ "hideName"?: boolean; /** * Hides price from merchandising */ "hidePrice"?: boolean; /** * Do not show swatches in products in merchandising */ "hideSwatches"?: boolean; /** * Count of products for page */ "limit"?: number; "onKlevuData"?: (event: KlevuMerchandisingCustomEvent<{ resultObject: KlevuResponseQueryObject; records: KlevuRecord[]; manager: FilterManager }>) => void; /** * Object to override and settings on search options */ "options"?: KlevuMerchandisingOptions; /** * Caption to show if product is out of stock in products in merchandising */ "outOfStockCaption"?: string; /** * Show add to cart button in products in merchandising */ "showAddToCart"?: boolean; /** * To show the product code next to product name in merchandising */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show variants count in merchandising */ "showVariantsCount"?: boolean; /** * Order of results */ "sort"?: KlevuSearchSorting; /** * Pass custom options for the sort dropdown */ "sortOptions"?: Array<{ value: KlevuSearchSorting; text: string }>; /** * Text for add to cart button in merchandising */ "tAddToCart"?: string; /** * Text for load more button */ "tLoadMore"?: string; /** * Overrides KMC setting to use ABtest for results */ "useABTest"?: boolean; /** * Should use infinite scroll component to trigger load next */ "useInfiniteScroll"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator"?: boolean; /** * Should display pagination instead of load next */ "usePagination"?: boolean; /** * Enable personalisation */ "usePersonalisation"?: boolean; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not in merchandising. */ "vatCaption"?: string; } /** * Stylized modal dialog. * @csspart modal-base The container for modal dialog * @csspart modal-header The header for modal dialog * @csspart modal-dialog The dialog component * @csspart modal-body The body for modal dialog */ interface KlevuModal { /** * Emitted when the modal is closed. */ "onKlevuCloseModal"?: (event: KlevuModalCustomEvent) => void; /** * Should show the modal on load. */ "startOpen"?: boolean; } /** * Klevu MOI Application */ interface KlevuMoi { /** * Override default API key */ "apiKey"?: string; /** * When a product is clicked. By default does a full page redirect to product url if event is not cancelled. Use `event.preventDefault()` to cancel the redirect. * @param product */ "onKlevuMoiProductClick"?: (event: KlevuMoiCustomEvent) => void; /** * When the visibility of Moi window changes */ "onKlevuMoiVisibilityChange"?: (event: KlevuMoiCustomEvent<"open" | "close">) => void; /** * Start the MOI window open */ "startOpen"?: boolean; } /** * Pagination component. Either provide numbers or query result to display the component. * @csspart pagination-base The container for pagination * @csspart pagination-navigation-previous The previous page button * @csspart pagination-navigation-next The next page button */ interface KlevuPagination { /** * Current page */ "current"?: number; /** * Max page */ "max"?: number; /** * Min page */ "min"?: number; /** * Page that was changed into */ "onKlevuPaginationChange"?: (event: KlevuPaginationCustomEvent) => void; /** * Query results used to build min, max and current */ "queryResult"?: KlevuQueryResult; /** * To set the page selection value in the url */ "shouldUpdateUrlForPage"?: boolean; } /** * Fetches and displays most popular searches from Klevu Merchant center * @csspart popular-searches-base The container for the popular searches * @csspart popular-searches-caption The caption for the search * @csspart popular-searches-list-item The list item in search */ interface KlevuPopularSearches { /** * Event that is emitted when a popular search is clicked */ "onKlevuPopularSearchClicked"?: (event: KlevuPopularSearchesCustomEvent) => void; /** * Caption of the list */ "tCaption"?: string; } /** * Popup component where clicking origin component popups the the content * @csspart popup-base The container for the popup * @csspart popup-content Content component */ interface KlevuPopup { /** * Anchor popup to left or right of page */ "anchor"?: Placement; /** * Close popup when clicking outside content area */ "closeAtOutsideClick"?: boolean; /** * Elevation of the popup. 0-3. */ "elevation"?: number; /** * Sets origin element to full width of the container */ "fullWidthOrigin"?: boolean; /** * Expand popup to full size of the screen when popup is smaller that requested width */ "fullscreenOnMobileSize"?: boolean; /** * How many pixels to offset the popup from origin */ "offset"?: number; "onKlevuPopupClose"?: (event: KlevuPopupCustomEvent) => void; /** * When popup is opened this event is emitted */ "onKlevuPopupOpen"?: (event: KlevuPopupCustomEvent) => void; /** * Open content when origin component is focused */ "openAtFocus"?: boolean; /** * Element to anchor popup to. If not set popup is anchored to origin slot */ "originElement"?: HTMLElement; /** * Initially show the popup */ "startOpen"?: boolean; /** * Clicking origin again will close the popup */ "toggle"?: boolean; /** * Darken background when popup is open */ "useBackground"?: boolean; } /** * Generic product component that renders product based on KlevuRecord of klevu/core * All parts of the component can be replaced with slots. * By default the products fill the whole space, but it can be limited * with --klevu-product-width and --klevu-product-small-width css variables. * @csspart product-image The image element of component * @csspart product-base The container element of whole * @csspart product-swatch Single swatch element under the image * @csspart product-brandname The brand name of the product * @csspart product-name The name of the product * @csspart product-description The description of the product * @csspart product-price The price of the product * @csspart product-vatcaption The vat caption of the product * @csspart product-ooscaption The out of stock caption of the product * @csspart product-variants-count The number of variants * @csspart product-addtocart The add to cart button */ interface KlevuProduct { /** * Fallback image url to be used when the product image fails to load. */ "fallbackProductImageUrl"?: string; /** * Force certain width for product. Do not use max-width */ "fixedWidth"?: boolean; /** * Hides brand information */ "hideBrand"?: boolean; /** * Hides description from info */ "hideDescription"?: boolean; /** * When mousing over product, show hover image if available */ "hideHoverImage"?: boolean; /** * Hides image */ "hideImage"?: boolean; /** * Hides name from info */ "hideName"?: boolean; /** * Hides price from info */ "hidePrice"?: boolean; /** * Do not show swatches in products */ "hideSwatches"?: boolean; /** * Turns the component into a product wrapper that handles events automatically. It assumes that whole product is clickable. Component has only one main slot that can contain any content. To prevent product clicking use `event.stopPropagation()` in your events. Component still requires the product parameter as it's data is used send correct data to Klevu analytics */ "isWrapper"?: boolean; /** * What key to use for brand value */ "keyBrand"?: string; /** * What key to use for description value */ "keyDescription"?: string; /** * What key to use for name value */ "keyName"?: string; /** * When the product add to cart is clicked */ "onKlevuAddToCart"?: (event: KlevuProductCustomEvent) => void; /** * When products has been clicked */ "onKlevuProductClick"?: (event: KlevuProductCustomEvent) => void; /** * Caption to show if product is out of stock */ "outOfStockCaption"?: string; /** * Product data */ "product"?: Partial; /** * Show add to cart button */ "showAddToCart"?: boolean; /** * To show the product code next to product name. */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings */ "showRatingsCount"?: boolean; /** * Show variants count */ "showVariantsCount"?: boolean; /** * Text for add to cart button */ "tAddToCart"?: string; /** * What variant of product to render */ "variant"?: KlevuProductVariant; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not. */ "vatCaption"?: string; } /** * Component to place products on grid. Very simple container for products. * @csspart product-grid-base The container for the grid */ interface KlevuProductGrid { /** * Force to place products in grid with given number of columns. */ "itemsPerRow"?: number; } /** * Button that is placed on the site to start a product query session * @csspart product-query-open-button Button that opens the popup */ interface KlevuProductQuery { "additionaldata"?: string; /** * Text of the button for asking a question */ "askButtonText"?: string; /** * Text of the button to open the popup */ "buttonText"?: string; /** * Channel Id to be used in analytics eg: Shopify, BigCommerce */ "channelId"?: string; /** * Disable closing the popup when clicking outside of it */ "disableCloseOutsideClick"?: boolean; /** * Fine print of the popup under the title */ "finePrint"?: string; /** * Set to true if you want to hide the embedded title */ "hideEmbeddedTitle"?: boolean; /** * Product Group Id to be used in analytics, in case of multiple variants */ "itemGroupId"?: string; /** * Product Id to be used in analytics */ "itemId"?: string; /** * Optional Product Variant Id to be used in analytics */ "itemVariantId"?: string; /** * Locale to be used in analytics eg: en_US */ "locale"?: string; /** * Anchor popup to which side of the origin */ "popupAnchor"?: Placement; /** * How many pixels to offset the popup from origin */ "popupOffset"?: number; /** * Title of the popup */ "popupTitle"?: string; /** * Instead of Klevu API-key use a widget id to start a session */ "pqaWidgetId"?: string; /** * Set to false if you want to show the popup in place instead of dialog box */ "pqaWidgetLayout"?: WidgetLayout; /** * Alternative to url, productId can be used to start a session */ "productId"?: string; /** * Pass function to call that will return the product info eg: pass function call as string - "getProductInfo()" or function itself * @returns ProductInfo object */ "productInfoGenerator"?: string | (() => ProductInfo); /** * Settings for requests to Klevu. Deeper modification on how the product query works. */ "settings"?: MoiRequest["klevuSettings"]; /** * Placeholder of the textfield */ "textFieldPlaceholder"?: string; /** * Variant of the textfield how does it look like */ "textFieldVariant"?: KlevuTextfieldVariant; /** * Url of the page where the product is */ "url"?: string; /** * Use dark background with the popup */ "useBackground"?: boolean; /** * Use native scrollbars instead of custom ones */ "useNativeScrollbars"?: boolean; } /** * Klevu Product Query popup application that shows a popup for asking questions about a product * @csspart product-query-popup-header Header of the popup * @csspart product-query-popup-footer Footer of the popup where input is * @csspart product-query-popup-feedback Feedback section of the popup when it is being closed * @csspart product-query-popup-question-container Help questions container * @csspart product-query-popup-question Question bubble * @csspart product-query-popup-sendmessage Send message section */ interface KlevuProductQueryPopup { /** * Pass any additional data you would want the AI to use for context */ "additionaldata"?: string; /** * Text of the button for asking a question */ "askButtonText"?: string; /** * Channel Id to be used in analytics eg: Shopify, Bigcommerce */ "channelId"?: string; /** * Config for Klevu */ "config"?: KlevuConfig; /** * Disable closing the popup when clicking outside of it */ "disableCloseOutsideClick"?: boolean; /** * Set to true if you want to hide the embedded title */ "hideEmbeddedTitle"?: boolean; /** * Product Group Id to be used in analytics, in case of multiple variants */ "itemGroupId"?: string; /** * Product Id to be used in analytics */ "itemId"?: string; /** * Optional Product Variant Id to be used in analytics */ "itemVariantId"?: string; /** * Locale to be used in analytics eg: en_US */ "locale"?: string; "onKlevuMoiProductClick"?: (event: KlevuProductQueryPopupCustomEvent) => void; /** * Element to anchor the product query popup to */ "originElement"?: HTMLElement; /** * Anchor popup to which side of the origin */ "popupAnchor"?: Placement; /** * How many pixels to offset the popup from origin */ "popupOffset"?: number; /** * Instead of Klevu API-key use a widget id to start a session */ "pqaWidgetId"?: string; /** * Set to false if you want to show this in place instead of dialog box */ "pqaWidgetLayout"?: WidgetLayout1; /** * Alternative to url, productId can be used to start a session */ "productId"?: string; /** * Pass function to call that will return the product info eg: pass function call as string - "getProductInfo()" or function * @returns ProductInfo object */ "productInfoGenerator"?: string | (() => ProductInfo); /** * Set to true if you want to remove the powered by ribbon */ "removeAskloBranding"?: boolean; /** * Settings for requests to Klevu. Deeper modification on how the product query works. */ "settings"?: MoiRequest["klevuSettings"]; /** * When sending a message fails, show this text */ "tAnswerError"?: string; /** * Text of the button to open the popup */ "tButtonText"?: string; /** * Data protection notice when user registering is enabled */ "tDataProtectionNotice"?: string; /** * Fine print of the popup under the title */ "tFinePrint"?: string; /** * When loading takes a bit longer, show this text */ "tLoadingSorry"?: string; /** * Title of the popup */ "tPopupTitle"?: string; /** * Description of the feedback section when closing the popup */ "tRateExperienceText"?: string; /** * Title of the feedback section when closing the popup */ "tRateExperienceTitle"?: string; /** * Placeholder of the textfield */ "tTextFieldPlaceholder"?: string; /** * Variant of the textfield how does it look like */ "textFieldVariant"?: KlevuTextfieldVariant; /** * Url of the page where the product is */ "url"?: string; /** * Use dark background with the popup */ "useBackground"?: boolean; /** * Use native scrollbars instead of custom ones */ "useNativeScrollbars"?: boolean; } /** * __klevu-query__ component is a special kind of component that makes queries to Klevu defined by the * __type__ parameter. It also listens to clicks to __klevu-product__ -component and sends analytical data to Klevu * based on that. This components gives you ability to create any kind of UI with Klevu components or by using your own * components! Just use __klevu-query__ to fetch the data and __klevu-product__ to render the product * cards. Whole content of __klevu-product__ can be replaced with your content. */ interface KlevuQuery { /** * Which category to do merchandising. Required for "merchandising" type */ "category"?: string; /** * Which category title to have on page. Required for "merchandising" type */ "categoryTitle"?: string; /** * By default component will fetch results on init or on property change. This can be disabled with this prop. */ "disableInitialFetch"?: boolean; /** * To how many filters limit results to */ "filterCount"?: number; /** * Fetch filters on the request */ "filterGet"?: boolean; /** * Should get price filters */ "filterWithPrices"?: boolean; /** * What's the limit on page */ "limit"?: number; /** * @klevu /core FilterManager used for filters. If none is set, new one is created */ "manager"?: FilterManager; /** * Offset of results */ "offset"?: number; "onKlevuQueryResult"?: (event: KlevuQueryCustomEvent<{ result: KlevuQueryResult suggestions?: KlevuSuggestionResult manager: FilterManager }>) => void; /** * Object to override and settings on search options */ "options"?: AllQueryOptions; /** * Override default modifiers. This will disable default modifiers and ones set by filter props */ "overrideModifiers"?: KlevuFetchModifer[]; /** * Which products are in cart. Required for some recommendation types */ "recommendationCartProductIds"?: string[]; /** * Which category path to use for recommendation. Required for some recommendation types */ "recommendationCategoryPath"?: string; /** * Which product is currently being viewed. Required for some recommendation types */ "recommendationCurrentProductId"?: string; /** * Which recommendation to fetch from Klevu Merchant Center. Required for "recommendation" type */ "recommendationId"?: string; /** * What is the item group id of the product being viewed. Required for some recommendation types */ "recommendationItemGroupId"?: string; /** * When searching should search suggestions be fetched */ "searchSuggestions"?: boolean; /** * What to search. Required for "search" type. */ "searchTerm"?: string; /** * Should search view event be sent. View event is important for analytical cases. In case of a search this should be used only when creating a landing page for search. */ "sendSearchViewEvent"?: boolean; /** * How to sort */ "sort"?: KlevuSearchSorting; /** * What kind of query */ "type": "search" | "merchandising" | "recommendation"; /** * Should component listen to changes to filters */ "updateOnFilterChange"?: boolean; } /** * Full app to create search bar that popups trending products and search results. * @csspart quicksearch-content - The popup container * @csspart quicksearch-sidepanel - Sidepanel container sidepanel * @csspart quicksearch-main-area - Main content area container */ interface KlevuQuicksearch { /** * What term should be used if there isn't enough results */ "fallbackTerm"?: string; /** * How many products to show in full variant */ "fullResultCount"?: number; /** * Hide popular keywords on no results page */ "hidePopularKeywordsOnNoResultsPage"?: boolean; /** * Hide popular keywords */ "hidePopularSearches"?: boolean; /** * Hide recent searches */ "hideRecentSearches"?: boolean; /** * Hide recently viewed products */ "hideRecentlyViewedProducts"?: boolean; /** * Hide trending products */ "hideTrendingProducts"?: boolean; /** * HHide trending products on no results page */ "hideTrendingProductsOnNoResultsPage"?: boolean; /** * When the data in the component changes. This event can be used to replace whole rendering of products when used with slots properly. */ "onKlevuData"?: (event: KlevuQuicksearchCustomEvent) => void; /** * Will be emitted when there is a url match for redirects. You can override the default behaviour of redirects by preventing default of this event */ "onKlevuRedirect"?: (event: KlevuQuicksearchCustomEvent) => void; /** * When user clicks search button. Returns the search term. This event is emitted when there is no url matched for redirects */ "onKlevuSearch"?: (event: KlevuQuicksearchCustomEvent) => void; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Placeholder for input text */ "placeholder"?: string; /** * How many products to show in Popular products section */ "popularProductsCount"?: number; /** * Anchor popup to witch side */ "popupAnchor"?: Placement; /** * Change variant of the search results */ "resultVariant"?: KlevuQuicksearchResultVarint; /** * Should component search for categories too */ "searchCategories"?: boolean; /** * Should component search for CMS pages too */ "searchCmsPages"?: boolean; /** * Change variant of the search field */ "searchFieldVariant"?: SearchFieldVariant; /** * Text of search button */ "searchText"?: string; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show variants count */ "showVariantsCount"?: boolean; /** * How many products to show in simple variant */ "simpleResultCount"?: number; /** * Title of categories section */ "tCategoriesCaption"?: string; /** * Recently clicked tab caption Supports showing the count in place of %s in the value eg: `Recently Searched (%s)` with count of 2 will lead to `Recently Searched (2)`. */ "tLastClickedProductsCaption"?: string; /** * Message to show when no results found */ "tNoResultsMessage"?: string; /** * Popular products section heading */ "tPopularProductsTitle"?: string; /** * Popular products section heading shown on no results page */ "tPopularProductsTitleOnNoResultsPage"?: string; /** * Title of search results */ "tSearchResults"?: string; /** * Trending tab caption Supports showing the count in place of %s in the value eg: `Trending (%s)` with count of 2 will lead to `Trending (2)`. */ "tTrendingCaption"?: string; /** * Load with default term */ "term"?: string; /** * Pass your own redirect urls for a keyword */ "urlRedirects"?: KMCMapsRootObject["klevu_keywordUrlMap"]; /** * Enables Klaviyo click tracking */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator"?: boolean; /** * Enable personalisation */ "usePersonalisation"?: boolean; } /** * Klevu ratings component * @prop rating - The rating value as a number to show * @prop ratingRange - The number of stars to show * @csspart rating-base The container for rating component * @csspart rating-star The star component */ interface KlevuRating { /** * Rating value */ "rating"?: number; /** * Number of stars to show */ "ratingRange"?: number; } /** * Full recommendation banner solution */ interface KlevuRecommendations { /** * For cart recommendation you need to provide product id's in cart */ "cartProductIds"?: string[]; /** * For category product recommendation you need to provide categery path */ "categoryPath"?: string; /** * For similiar products recommendation you need to provide productId and itemGroupId */ "currentProductId"?: string; /** * For similiar products recommendation you need to provide productId and itemGroupId */ "itemGroupId"?: string; /** * When Recommndations data is available or updated */ "onKlevuData"?: (event: KlevuRecommendationsCustomEvent) => void; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * The ID of the recommendation */ "recommendationId": string; /** * Title of the recommendation */ "recommendationTitle"?: string; } /** * Plain textfield that does the searching. It queries Klevu and returns the results * in a custom event. Then you can decide what to do with the results. */ interface KlevuSearchField { /** * Fallback term to use if there are no results */ "fallbackTerm"?: string; /** * Maximum amount of results */ "limit"?: number; /** * When user clicks search button. Returns the search term. */ "onKlevuSearchClick"?: (event: KlevuSearchFieldCustomEvent) => void; /** * When results come from after typing in the search field. This is debounced to avoid excessive requests. */ "onKlevuSearchResults"?: (event: KlevuSearchFieldCustomEvent) => void; /** * When searchfield gives some suggestions */ "onKlevuSearchSuggestions"?: (event: KlevuSearchFieldCustomEvent) => void; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Should try to find categories as well */ "searchCategories"?: boolean; /** * Should try to find cms pages as well */ "searchCmsPages"?: boolean; /** * Should search products */ "searchProducts"?: boolean; /** * Should search suggestions */ "searchSuggestions"?: boolean; /** * Sends analytics when making query */ "sendAnalytics"?: boolean; /** * In case you want to sort the results */ "sort"?: KlevuSearchSorting; /** * The placeholder text to display in the search field. */ "tPlaceholder"?: string; /** * Button text */ "tSearchText"?: string; "term"?: string; /** * Enable Klaviyo integration for search terms and clicks */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator"?: boolean; /** * Enable personalisation on the query */ "usePersonalisation"?: boolean; /** * Variant of the search field */ "variant"?: SearchFieldVariant1; } /** * Full app component for search landing page * @csspart search-landing-page-header The header container * @csspart search-landing-page-content The content container * @csspart search-landing-page-sidebar The sidebar container * @csspart search-landing-page-footer The footer container */ interface KlevuSearchLandingPage { /** * To update the pagination and filters to the url automatically */ "autoUpdateUrl"?: boolean; /** * How many products to display in filters */ "filterCount"?: number; /** * Order filters in a customer order */ "filterCustomOrder"?: { [key: string]: string[] }; /** * Hides brand from search results */ "hideBrand"?: boolean; /** * Hides description from search results */ "hideDescription"?: boolean; /** * Hide filters on results page */ "hideFilters"?: boolean; /** * Hides hover image from search results */ "hideHoverImage"?: boolean; /** * Hides image from search results */ "hideImage"?: boolean; /** * Hides name from search results */ "hideName"?: boolean; /** * Hides price from search results */ "hidePrice"?: boolean; /** * Do not show swatches in products in search results */ "hideSwatches"?: boolean; /** * How many results to display on a page */ "limit"?: number; "onKlevuData"?: (event: KlevuSearchLandingPageCustomEvent<{ resultObject: KlevuResponseQueryObject; records: KlevuRecord[]; manager: FilterManager }>) => void; /** * Object to override and settings on search options */ "options"?: KlevuSearchOptions; /** * Caption to show if product is out of stock in products in search results */ "outOfStockCaption"?: string; /** * How many products to show in popular products */ "popularProductsResultCount"?: number; /** * The factor to use to generate the ranges */ "priceInterval"?: number; /** * Show add to cart button in products in search results */ "showAddToCart"?: boolean; /** * Show price as options */ "showPriceAsSlider"?: boolean; /** * To show the product code next to product name in search results */ "showProductCode"?: boolean; /** * Show ratings */ "showRatings"?: boolean; /** * Show ratings count */ "showRatingsCount"?: boolean; /** * Show the quick search box at the top of the page */ "showSearch"?: boolean; /** * Show variants count */ "showVariantsCount"?: boolean; /** * In which order to set the products */ "sort"?: KlevuSearchSorting; /** * Pass custom options for the sort dropdown */ "sortOptions"?: Array<{ value: KlevuSearchSorting; text: string }>; /** * Text for add to cart button in search results */ "tAddToCart"?: string; /** * Text of load more button */ "tLoadMore"?: string; /** * The title of the page */ "tSearchTitle"?: string; /** * What term was used for search */ "term": string; /** * Should use infinite scroll component to trigger load next */ "useInfiniteScroll"?: boolean; /** * Enable Klaviyo integration */ "useKlaviyo"?: boolean; /** * Used to enable loading indicator */ "useLoadingIndicator"?: boolean; /** * Specify whether to show checkboxes or radio buttons for filters */ "useMultiSelectFilters"?: boolean; /** * Use pagination instead of loading more */ "usePagination"?: boolean; /** * Enable personalization */ "usePersonalisation"?: boolean; /** * Text to be added after the price. Usually used to indicate that does the price include VAT or not in search results. */ "vatCaption"?: string; } /** * Horizontal slider component. By default used for price range in this package. But can * be used for other purposes as well. */ interface KlevuSlider { /** * Current end value of the range */ "end"?: number; /** * Format tooltip value with function */ "formatTooltip"?: (value: number) => string; /** * Max value of the range */ "max": number; /** * Min value of the range */ "min": number; /** * When values change */ "onKlevuSliderChange"?: (event: KlevuSliderCustomEvent<[number, number]>) => void; /** * Show tooltips on top of slider */ "showTooltips"?: boolean; /** * Current start value of the range */ "start"?: number; } /** * Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons. * @csspart slides-base The container for the slides component * @csspart slides-heading The heading of the slides * @csspart slides-previous-button The previous button * @csspart slides-next-button The next button */ interface KlevuSlides { /** * center position next and previous buttons */ "centerNextPrev"?: boolean; /** * Heading for the slides component */ "heading"?: string; /** * Hides next and previous buttons */ "hideNextPrev"?: boolean; /** * When clicking next/prev buttons should scroll full width of container */ "slideFullWidth"?: boolean; } /** * Sort dropdown. User can select what kind of sorting they want */ interface KlevuSort { /** * When the sorting changes */ "onKlevuSortChanged"?: (event: KlevuSortCustomEvent) => void; /** * Pass custom options for the sort dropdown */ "options"?: Array<{ value: KlevuSearchSorting; text: string }>; /** * Dropdown variant */ "variant"?: KlevuDropdownVariant1; } /** * Simple component to list suggestions. Takes in a parameter suggestions that will be rendered as a list * @csspart suggestions-list-caption The caption to the list of suggestions */ interface KlevuSuggestionsList { /** * Caption on the list */ "caption"?: string; /** * Event that is emitted when a suggestion is clicked */ "onKlevuSuggestionClicked"?: (event: KlevuSuggestionsListCustomEvent) => void; /** * Suggestions to render in list */ "suggestions"?: string[]; } /** * Very simple tab component. Use like a button, but with a caption. * Use standard onClick event to handle click. * @csspart tab-base The tab container * @csspart tab-caption The caption for the tab */ interface KlevuTab { /** * Whether the tab is active */ "active"?: boolean; /** * Title of the tab */ "caption": string; /** * Whether the tab is disabled */ "disabled"?: boolean; } /** * Branded text field component * @csspart textfield-base The container for input box * @csspart textfield-icon The icon at beginning of input * @csspart textfield-input The input box * @csspart textfield-clearbutton The clear button at the end of input */ interface KlevuTextfield { /** * Display a button to clear field value on the right side of the field */ "clearButton"?: boolean; /** * Is field disabled */ "disabled"?: boolean; /** * Is field in error state */ "error"?: boolean; /** * Icon to display in textfield start of the field. Please use tokens of material icons */ "icon"?: string; /** * When text changes in field */ "onKlevuTextChanged"?: (event: KlevuTextfieldCustomEvent) => void; /** * When enter is pressed in textfield */ "onKlevuTextEnterPressed"?: (event: KlevuTextfieldCustomEvent) => void; /** * When textfield is focused */ "onKlevuTextFocused"?: (event: KlevuTextfieldCustomEvent) => void; /** * Placeholder value of the field */ "placeholder"?: string; /** * Current value of the field */ "value": string; /** * Variant of textfield */ "variant"?: KlevuTextfieldVariant1; } /** * Klevu typography component. This component is used in most places to set correct font in component pieces. */ interface KlevuTypography { /** * Display the text in full width. Usefull when typography needs to be used as a block element. */ "fullWidth"?: boolean; /** * Variant of heading */ "variant": KlevuTypographyVariant; } /** * Utility compoenent that simplifies listening Klevu SDK Dom events * https://docs.klevu.com/headless-sdk/events-analytics#dhk6Y */ interface KlevuUtilDomEvents { "onKlevuClickEventSent"?: (event: KlevuUtilDomEventsCustomEvent<{ productId: string product?: Partial }>) => void; "onKlevuFilterSelectionUpdate"?: (event: KlevuUtilDomEventsCustomEvent<{ key: string name: string selected: boolean }>) => void; "onKlevuFiltersApplied"?: (event: KlevuUtilDomEventsCustomEvent<{ filters: FilterManagerFilters[] }>) => void; "onKlevuLastSearchUpdate"?: (event: KlevuUtilDomEventsCustomEvent) => void; } /** * Component that triggers event when intercepted on scroll of page. */ interface KlevuUtilInfiniteScroll { /** * Whether infinite scrolling is enabled */ "enabled"?: boolean; /** * The number of pages after which triggers infiniteScrollingPaused event. Listen to this event to allow further loading on user input. */ "infiniteScrollPauseThreshold"?: number; /** * Event emitted when infinite loading reaches a multiple of infiniteScrollPauseThreshold */ "onKlevuInfiniteScrollingPaused"?: (event: KlevuUtilInfiniteScrollCustomEvent) => void; /** * Event emitted when infinite scroll element is intercepted */ "onKlevuLoadMore"?: (event: KlevuUtilInfiniteScrollCustomEvent) => void; } /** * Portal component to move content to end of body instead of normal DOM position. Typically used for popups * to prevent problems with CSS stylings. * Does not move styles, so create a child component that has styles defined in shadow DOM. */ interface KlevuUtilPortal { } /** * Utility that replaces the default browser scrollbar with a custom one. */ interface KlevuUtilScrollbars { /** * The overflow behavior of the horizontal scrollbar. */ "overflowX"?: OverflowBehavior; /** * The overflow behavior of the vertical scrollbar. */ "overflowY"?: OverflowBehavior; /** * Disables the custom scrollbar and use native scrollbars instead. */ "useNative"?: boolean; } /** * KlevuUtilSsrProvider component stores the Klevu SSR response as a string * that can be hydrated in the client side. */ interface KlevuUtilSsrProvider { "html"?: string; "identifier"?: string; "packed"?: string; } interface KlevuUtilViewport { "onKlevuSizeChanged"?: (event: KlevuUtilViewportCustomEvent) => void; /** * List of sizes to listen for */ "sizes"?: ViewportSize[]; } interface IntrinsicElements { "klevu-accordion": KlevuAccordion; "klevu-badge": KlevuBadge; "klevu-banner": KlevuBanner; "klevu-button": KlevuButton; "klevu-chat-bubble": KlevuChatBubble; "klevu-chat-layout": KlevuChatLayout; "klevu-chat-messages": KlevuChatMessages; "klevu-checkbox": KlevuCheckbox; "klevu-chip": KlevuChip; "klevu-cms-list": KlevuCmsList; "klevu-color-swatch": KlevuColorSwatch; "klevu-drawer": KlevuDrawer; "klevu-dropdown": KlevuDropdown; "klevu-facet": KlevuFacet; "klevu-facet-list": KlevuFacetList; "klevu-icon": KlevuIcon; "klevu-init": KlevuInit; "klevu-latest-searches": KlevuLatestSearches; "klevu-layout-results": KlevuLayoutResults; "klevu-list": KlevuList; "klevu-loading-indicator": KlevuLoadingIndicator; "klevu-merchandising": KlevuMerchandising; "klevu-modal": KlevuModal; "klevu-moi": KlevuMoi; "klevu-pagination": KlevuPagination; "klevu-popular-searches": KlevuPopularSearches; "klevu-popup": KlevuPopup; "klevu-product": KlevuProduct; "klevu-product-grid": KlevuProductGrid; "klevu-product-query": KlevuProductQuery; "klevu-product-query-popup": KlevuProductQueryPopup; "klevu-query": KlevuQuery; "klevu-quicksearch": KlevuQuicksearch; "klevu-rating": KlevuRating; "klevu-recommendations": KlevuRecommendations; "klevu-search-field": KlevuSearchField; "klevu-search-landing-page": KlevuSearchLandingPage; "klevu-slider": KlevuSlider; "klevu-slides": KlevuSlides; "klevu-sort": KlevuSort; "klevu-suggestions-list": KlevuSuggestionsList; "klevu-tab": KlevuTab; "klevu-textfield": KlevuTextfield; "klevu-typography": KlevuTypography; "klevu-util-dom-events": KlevuUtilDomEvents; "klevu-util-infinite-scroll": KlevuUtilInfiniteScroll; "klevu-util-portal": KlevuUtilPortal; "klevu-util-scrollbars": KlevuUtilScrollbars; "klevu-util-ssr-provider": KlevuUtilSsrProvider; "klevu-util-viewport": KlevuUtilViewport; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { /** * Component that wrap two slots to create accordion element. * @csspart accordion-base The container element for the accordion * @csspart accordion-header The label of the accordion * @csspart accordion-content The content of the accordion * @csspart accordion-icon The icon of the accordion */ "klevu-accordion": LocalJSX.KlevuAccordion & JSXBase.HTMLAttributes; /** * Basic badge component. Can be used to display small information on top of other elements. Typically * used to display things on top of product. * @csspart badge-content The content of the badge * @csspart badge-base The container of the badge */ "klevu-badge": LocalJSX.KlevuBadge & JSXBase.HTMLAttributes; /** * Component that displays a typical klevu banner * @csspart banner-image The image element */ "klevu-banner": LocalJSX.KlevuBanner & JSXBase.HTMLAttributes; /** * Basic button component * @csspart button-base The button element */ "klevu-button": LocalJSX.KlevuButton & JSXBase.HTMLAttributes; /** * Container for chat items. Very simple component, just a wrapper. * @csspart chat-bubble-base The container for the chat bubble * @csspart chat-bubble-positive-feedback The positive feedback section * @csspart chat-bubble-negative-feedback The negative feedback section * @csspart chat-bubble-feedback-reasons The feedback reasons section */ "klevu-chat-bubble": LocalJSX.KlevuChatBubble & JSXBase.HTMLAttributes; /** * Component that wraps chat elements into a layout. */ "klevu-chat-layout": LocalJSX.KlevuChatLayout & JSXBase.HTMLAttributes; "klevu-chat-messages": LocalJSX.KlevuChatMessages & JSXBase.HTMLAttributes; /** * Checkbox component * @csspart checkbox-base The container element of the checkbox * @csspart checkbox-box The checkbox element * @csspart checkbox-content The label of the checkbox */ "klevu-checkbox": LocalJSX.KlevuCheckbox & JSXBase.HTMLAttributes; /** * Chip component that is used to display selected value in a listing. Gives also ability to remove the chip. * Has selected and removable attributes that can be used to display the chip in selected state and also to remove the chip. * @csspart chip-base The container for the chip * @csspart chip-icon The icon for the close button * @csspart chip-content The content for the chip */ "klevu-chip": LocalJSX.KlevuChip & JSXBase.HTMLAttributes; /** * Component to display list of CMS page results * @csspart cms-list-caption The caption for the cms list */ "klevu-cms-list": LocalJSX.KlevuCmsList & JSXBase.HTMLAttributes; /** * Color Swatch component */ "klevu-color-swatch": LocalJSX.KlevuColorSwatch & JSXBase.HTMLAttributes; /** * Component to create offscreen drawer on left or right side of the screen * @csspart drawer-base The container of the drawer * @csspart drawer-origin The button that controls open of the drawer * @csspart drawer-content The content inside the drawer */ "klevu-drawer": LocalJSX.KlevuDrawer & JSXBase.HTMLAttributes; /** * Simple native dropdown component for dropdown * @csspart dropdown-base The container for the dropdown * @csspart dropdown-select The select box */ "klevu-dropdown": LocalJSX.KlevuDropdown & JSXBase.HTMLAttributes; /** * Rendering items of single facet with all its options or a slider. * Manager property must be set for this component to work. * @csspart facet-heading Heading of the facet * @csspart facet-radio The radio button for selection of facet * @csspart facet-more-button The button to show more results * @csspart facet-option-count The count of results per option */ "klevu-facet": LocalJSX.KlevuFacet & JSXBase.HTMLAttributes; /** * Render all facets of filter manager */ "klevu-facet-list": LocalJSX.KlevuFacetList & JSXBase.HTMLAttributes; /** * Klevu icon component. Uses Google Material Icons. */ "klevu-icon": LocalJSX.KlevuIcon & JSXBase.HTMLAttributes; /** * `klevu-init` is the most important component of the whole library. Place one in your document. It should be * one of the first ones in the `` tag. Currently only one `klevu-init` per page is supported. It is used to define * configuration for all components on the page and provide few global settings for all components: * - **onItemClick:** what happens when product is clicked. Typically this places default action of * _klevu-product_ click. For example you can make your own frontend router to act in this function. Is * provided with product and click event as attributes. Remember to preventDefault and return false to prevent anchor * link following. * - **generateProductUrl:** what kind of URL's should be generated for products. If _onItemClick_ * is not used this can be used for it. Has product as attribute. * - **renderPrice:** generic function for price rendering. If you wish to have your own formatting for price * rendering then this is the place. Has two attribute amount and currency of item. * Initializes components to fetch data from correct Klevu backend * **Note: All global CSS variables are documented in `klevu-init` even thought they are not defined in it.** */ "klevu-init": LocalJSX.KlevuInit & JSXBase.HTMLAttributes; /** * Lists latest searches user has made on the site * @csspart latest-searches-caption The caption for the latest search list */ "klevu-latest-searches": LocalJSX.KlevuLatestSearches & JSXBase.HTMLAttributes; /** * Generic layout used in merchansiding and search landing page */ "klevu-layout-results": LocalJSX.KlevuLayoutResults & JSXBase.HTMLAttributes; /** * Single list item for listing things. * @csspart list-base The container for the list * @csspart list-icon The icon element of the list * @csspart list-image The image element of the list * @csspart list-content The content of the list * @csspart list-button The button element in the list */ "klevu-list": LocalJSX.KlevuList & JSXBase.HTMLAttributes; /** * Simple loading indicator * @csspart loading-indicator-base The container for the loading indicator */ "klevu-loading-indicator": LocalJSX.KlevuLoadingIndicator & JSXBase.HTMLAttributes; /** * Full merchandising app to power up your product grid pages * @csspart merchandising-sidebar - Sidebar container * @csspart merchandising-header - Header container * @csspart merchandising-content - Content container * @csspart merchandising-footer - Footer container */ "klevu-merchandising": LocalJSX.KlevuMerchandising & JSXBase.HTMLAttributes; /** * Stylized modal dialog. * @csspart modal-base The container for modal dialog * @csspart modal-header The header for modal dialog * @csspart modal-dialog The dialog component * @csspart modal-body The body for modal dialog */ "klevu-modal": LocalJSX.KlevuModal & JSXBase.HTMLAttributes; /** * Klevu MOI Application */ "klevu-moi": LocalJSX.KlevuMoi & JSXBase.HTMLAttributes; /** * Pagination component. Either provide numbers or query result to display the component. * @csspart pagination-base The container for pagination * @csspart pagination-navigation-previous The previous page button * @csspart pagination-navigation-next The next page button */ "klevu-pagination": LocalJSX.KlevuPagination & JSXBase.HTMLAttributes; /** * Fetches and displays most popular searches from Klevu Merchant center * @csspart popular-searches-base The container for the popular searches * @csspart popular-searches-caption The caption for the search * @csspart popular-searches-list-item The list item in search */ "klevu-popular-searches": LocalJSX.KlevuPopularSearches & JSXBase.HTMLAttributes; /** * Popup component where clicking origin component popups the the content * @csspart popup-base The container for the popup * @csspart popup-content Content component */ "klevu-popup": LocalJSX.KlevuPopup & JSXBase.HTMLAttributes; /** * Generic product component that renders product based on KlevuRecord of klevu/core * All parts of the component can be replaced with slots. * By default the products fill the whole space, but it can be limited * with --klevu-product-width and --klevu-product-small-width css variables. * @csspart product-image The image element of component * @csspart product-base The container element of whole * @csspart product-swatch Single swatch element under the image * @csspart product-brandname The brand name of the product * @csspart product-name The name of the product * @csspart product-description The description of the product * @csspart product-price The price of the product * @csspart product-vatcaption The vat caption of the product * @csspart product-ooscaption The out of stock caption of the product * @csspart product-variants-count The number of variants * @csspart product-addtocart The add to cart button */ "klevu-product": LocalJSX.KlevuProduct & JSXBase.HTMLAttributes; /** * Component to place products on grid. Very simple container for products. * @csspart product-grid-base The container for the grid */ "klevu-product-grid": LocalJSX.KlevuProductGrid & JSXBase.HTMLAttributes; /** * Button that is placed on the site to start a product query session * @csspart product-query-open-button Button that opens the popup */ "klevu-product-query": LocalJSX.KlevuProductQuery & JSXBase.HTMLAttributes; /** * Klevu Product Query popup application that shows a popup for asking questions about a product * @csspart product-query-popup-header Header of the popup * @csspart product-query-popup-footer Footer of the popup where input is * @csspart product-query-popup-feedback Feedback section of the popup when it is being closed * @csspart product-query-popup-question-container Help questions container * @csspart product-query-popup-question Question bubble * @csspart product-query-popup-sendmessage Send message section */ "klevu-product-query-popup": LocalJSX.KlevuProductQueryPopup & JSXBase.HTMLAttributes; /** * __klevu-query__ component is a special kind of component that makes queries to Klevu defined by the * __type__ parameter. It also listens to clicks to __klevu-product__ -component and sends analytical data to Klevu * based on that. This components gives you ability to create any kind of UI with Klevu components or by using your own * components! Just use __klevu-query__ to fetch the data and __klevu-product__ to render the product * cards. Whole content of __klevu-product__ can be replaced with your content. */ "klevu-query": LocalJSX.KlevuQuery & JSXBase.HTMLAttributes; /** * Full app to create search bar that popups trending products and search results. * @csspart quicksearch-content - The popup container * @csspart quicksearch-sidepanel - Sidepanel container sidepanel * @csspart quicksearch-main-area - Main content area container */ "klevu-quicksearch": LocalJSX.KlevuQuicksearch & JSXBase.HTMLAttributes; /** * Klevu ratings component * @prop rating - The rating value as a number to show * @prop ratingRange - The number of stars to show * @csspart rating-base The container for rating component * @csspart rating-star The star component */ "klevu-rating": LocalJSX.KlevuRating & JSXBase.HTMLAttributes; /** * Full recommendation banner solution */ "klevu-recommendations": LocalJSX.KlevuRecommendations & JSXBase.HTMLAttributes; /** * Plain textfield that does the searching. It queries Klevu and returns the results * in a custom event. Then you can decide what to do with the results. */ "klevu-search-field": LocalJSX.KlevuSearchField & JSXBase.HTMLAttributes; /** * Full app component for search landing page * @csspart search-landing-page-header The header container * @csspart search-landing-page-content The content container * @csspart search-landing-page-sidebar The sidebar container * @csspart search-landing-page-footer The footer container */ "klevu-search-landing-page": LocalJSX.KlevuSearchLandingPage & JSXBase.HTMLAttributes; /** * Horizontal slider component. By default used for price range in this package. But can * be used for other purposes as well. */ "klevu-slider": LocalJSX.KlevuSlider & JSXBase.HTMLAttributes; /** * Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons. * @csspart slides-base The container for the slides component * @csspart slides-heading The heading of the slides * @csspart slides-previous-button The previous button * @csspart slides-next-button The next button */ "klevu-slides": LocalJSX.KlevuSlides & JSXBase.HTMLAttributes; /** * Sort dropdown. User can select what kind of sorting they want */ "klevu-sort": LocalJSX.KlevuSort & JSXBase.HTMLAttributes; /** * Simple component to list suggestions. Takes in a parameter suggestions that will be rendered as a list * @csspart suggestions-list-caption The caption to the list of suggestions */ "klevu-suggestions-list": LocalJSX.KlevuSuggestionsList & JSXBase.HTMLAttributes; /** * Very simple tab component. Use like a button, but with a caption. * Use standard onClick event to handle click. * @csspart tab-base The tab container * @csspart tab-caption The caption for the tab */ "klevu-tab": LocalJSX.KlevuTab & JSXBase.HTMLAttributes; /** * Branded text field component * @csspart textfield-base The container for input box * @csspart textfield-icon The icon at beginning of input * @csspart textfield-input The input box * @csspart textfield-clearbutton The clear button at the end of input */ "klevu-textfield": LocalJSX.KlevuTextfield & JSXBase.HTMLAttributes; /** * Klevu typography component. This component is used in most places to set correct font in component pieces. */ "klevu-typography": LocalJSX.KlevuTypography & JSXBase.HTMLAttributes; /** * Utility compoenent that simplifies listening Klevu SDK Dom events * https://docs.klevu.com/headless-sdk/events-analytics#dhk6Y */ "klevu-util-dom-events": LocalJSX.KlevuUtilDomEvents & JSXBase.HTMLAttributes; /** * Component that triggers event when intercepted on scroll of page. */ "klevu-util-infinite-scroll": LocalJSX.KlevuUtilInfiniteScroll & JSXBase.HTMLAttributes; /** * Portal component to move content to end of body instead of normal DOM position. Typically used for popups * to prevent problems with CSS stylings. * Does not move styles, so create a child component that has styles defined in shadow DOM. */ "klevu-util-portal": LocalJSX.KlevuUtilPortal & JSXBase.HTMLAttributes; /** * Utility that replaces the default browser scrollbar with a custom one. */ "klevu-util-scrollbars": LocalJSX.KlevuUtilScrollbars & JSXBase.HTMLAttributes; /** * KlevuUtilSsrProvider component stores the Klevu SSR response as a string * that can be hydrated in the client side. */ "klevu-util-ssr-provider": LocalJSX.KlevuUtilSsrProvider & JSXBase.HTMLAttributes; "klevu-util-viewport": LocalJSX.KlevuUtilViewport & JSXBase.HTMLAttributes; } } }