{
  "version": 1.1,
  "tags": [
    {
      "name": "klevu-accordion",
      "description": {
        "kind": "markdown",
        "value": "Component that wrap two slots to create accordion element."
      },
      "attributes": [
        {
          "name": "open",
          "description": "is accordion open"
        },
        {
          "name": "start-open",
          "description": "Should it initially be open"
        }
      ]
    },
    {
      "name": "klevu-badge",
      "description": {
        "kind": "markdown",
        "value": "Basic badge component. Can be used to display small information on top of other elements. Typically\nused to display things on top of product."
      },
      "attributes": [
        {
          "name": "accent",
          "description": "Setting a accent color to badge (1-4)"
        },
        {
          "name": "neutral",
          "description": "Setting a neutral color to badge (1-8)"
        }
      ]
    },
    {
      "name": "klevu-banner",
      "description": {
        "kind": "markdown",
        "value": "Component that displays a typical klevu banner"
      },
      "attributes": [
        {
          "name": "alt-text",
          "description": "The alt text to display for iamge"
        },
        {
          "name": "image-url",
          "description": "The image url to display"
        },
        {
          "name": "link-url",
          "description": "The link url to navigate to"
        },
        {
          "name": "target",
          "description": "The target to open the link in",
          "values": [
            {
              "name": "_blank"
            },
            {
              "name": "_self"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-button",
      "description": {
        "kind": "markdown",
        "value": "Basic button component"
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Is button disabled"
        },
        {
          "name": "full-width",
          "description": "Make button display block"
        },
        {
          "name": "icon",
          "description": "Instead of content have an icon. So basically icon-button"
        },
        {
          "name": "is-secondary",
          "description": "Toned down secondary button"
        },
        {
          "name": "is-tertiary",
          "description": "Toned down tertiary button"
        },
        {
          "name": "size",
          "description": "",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "normal"
            },
            {
              "name": "small"
            },
            {
              "name": "tiny"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-chat-bubble",
      "description": {
        "kind": "markdown",
        "value": "Container for chat items. Very simple component, just a wrapper."
      },
      "attributes": [
        {
          "name": "remote",
          "description": "Is the message from the user or from the bot"
        },
        {
          "name": "t-rating-reason",
          "description": "Text for rating reason title"
        }
      ]
    },
    {
      "name": "klevu-chat-layout",
      "description": {
        "kind": "markdown",
        "value": "Component that wraps chat elements into a layout."
      },
      "attributes": [
        {
          "name": "use-native-scrollbars",
          "description": "Use native scrollbars instead of custom ones in content"
        }
      ]
    },
    {
      "name": "klevu-chat-messages",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "center-next-prev",
          "description": "Should display the product slider navigation buttons centered in relating to product list"
        },
        {
          "name": "enable-message-feedback",
          "description": "Should display a feedback button after each message"
        },
        {
          "name": "show-feedback-for",
          "description": "What message should we"
        },
        {
          "name": "speed",
          "description": "type animation speed, if 0, no animation"
        }
      ]
    },
    {
      "name": "klevu-checkbox",
      "description": {
        "kind": "markdown",
        "value": "Checkbox component"
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Is checkbox checked"
        },
        {
          "name": "disabled",
          "description": "Is disabled"
        },
        {
          "name": "name",
          "description": "Name of the checkbox"
        }
      ]
    },
    {
      "name": "klevu-chip",
      "description": {
        "kind": "markdown",
        "value": "Chip component that is used to display selected value in a listing. Gives also ability to remove the chip.\n\nHas selected and removable attributes that can be used to display the chip in selected state and also to remove the chip."
      },
      "attributes": [
        {
          "name": "removable",
          "description": "Removable state of the chip"
        },
        {
          "name": "selected",
          "description": "Selected state of the chip"
        }
      ]
    },
    {
      "name": "klevu-cms-list",
      "description": {
        "kind": "markdown",
        "value": "Component to display list of CMS page results"
      },
      "attributes": [
        {
          "name": "link",
          "description": "Should use url parameter from link to create anchor"
        },
        {
          "name": "t-caption",
          "description": "Caption of the listing"
        }
      ]
    },
    {
      "name": "klevu-color-swatch",
      "description": {
        "kind": "markdown",
        "value": "Color Swatch component"
      },
      "attributes": [
        {
          "name": "border-color",
          "description": "Specify border color for the swatch"
        },
        {
          "name": "color",
          "description": "Color to apply"
        },
        {
          "name": "image-url",
          "description": "ImageUrl to load in swatch"
        },
        {
          "name": "name",
          "description": "This field will be sent in the click callback"
        },
        {
          "name": "selected",
          "description": "If selected"
        }
      ]
    },
    {
      "name": "klevu-drawer",
      "description": {
        "kind": "markdown",
        "value": "Component to create offscreen drawer on left or right side of the screen"
      },
      "attributes": [
        {
          "name": "anchor",
          "description": "Anchor to right or left side of the page",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "background",
          "description": "Display dim background on top of other content"
        },
        {
          "name": "close-at-outside-click",
          "description": "Close by clicking outside of drawer"
        },
        {
          "name": "insert-y-padding",
          "description": "Add little bit of padding to content of drawer"
        },
        {
          "name": "start-open",
          "description": "Start side drawer open"
        }
      ]
    },
    {
      "name": "klevu-dropdown",
      "description": {
        "kind": "markdown",
        "value": "Simple native dropdown component for dropdown"
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "Is element disabled"
        },
        {
          "name": "name",
          "description": "Form name"
        },
        {
          "name": "selected",
          "description": "Which element value is selected"
        },
        {
          "name": "variant",
          "description": "Variant of dropdown",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-facet",
      "description": {
        "kind": "markdown",
        "value": "Rendering items of single facet with all its options or a slider.\n\nManager property must be set for this component to work."
      },
      "attributes": [
        {
          "name": "accordion",
          "description": "Should the facet be in accordion"
        },
        {
          "name": "accordion-start-open",
          "description": "Start accordion open"
        },
        {
          "name": "label-override",
          "description": "Override label text with custom value"
        },
        {
          "name": "mode",
          "description": "Which mode should facets be in",
          "values": [
            {
              "name": "checkbox"
            },
            {
              "name": "radio"
            }
          ]
        },
        {
          "name": "price-slider-currency",
          "description": "The currency to show in the price slider"
        },
        {
          "name": "t-all",
          "description": ""
        },
        {
          "name": "t-more",
          "description": ""
        },
        {
          "name": "use-color-swatch",
          "description": "Converts the color filters to swatches"
        }
      ]
    },
    {
      "name": "klevu-facet-list",
      "description": {
        "kind": "markdown",
        "value": "Render all facets of filter manager"
      },
      "attributes": [
        {
          "name": "accordion",
          "description": "Should use accordions to for facets"
        },
        {
          "name": "apply-button-text",
          "description": "Button text for Apply button when using `useApplyButton`"
        },
        {
          "name": "clear-button-text",
          "description": "Button text for Clear button when using `useApplyButton`"
        },
        {
          "name": "default-price-label",
          "description": "Default price label for sliders"
        },
        {
          "name": "mode",
          "description": "Set mode for facets or if object is passed then define per key",
          "values": [
            {
              "name": "checkbox"
            },
            {
              "name": "radio"
            }
          ]
        },
        {
          "name": "price-slider-currency",
          "description": "The currency to show in the price slider"
        },
        {
          "name": "should-update-url-for-facets",
          "description": "To set the facet selection value in the url"
        },
        {
          "name": "use-apply-button",
          "description": "Display \"apply filters\" button in the end. And do not apply filters until this button is pressed"
        }
      ]
    },
    {
      "name": "klevu-icon",
      "description": {
        "kind": "markdown",
        "value": "Klevu icon component. Uses Google Material Icons."
      },
      "attributes": [
        {
          "name": "name",
          "description": "Name of the icon. Please use tokens of material icons"
        }
      ]
    },
    {
      "name": "klevu-init",
      "description": {
        "kind": "markdown",
        "value": "\n`klevu-init` is the most important component of the whole library. Place one in your document. It should be\none of the first ones in the `<body>` tag. Currently only one `klevu-init` per page is supported. It is used to define\nconfiguration for all components on the page and provide few global settings for all components:\n\n- **onItemClick:** what happens when product is clicked. Typically this places default action of\n  _klevu-product_ click. For example you can make your own frontend router to act in this function. Is\n  provided with product and click event as attributes. Remember to preventDefault and return false to prevent anchor\n  link following.\n- **generateProductUrl:** what kind of URL's should be generated for products. If _onItemClick_\n  is not used this can be used for it. Has product as attribute.\n- **renderPrice:** generic function for price rendering. If you wish to have your own formatting for price\n  rendering then this is the place. Has two attribute amount and currency of item.\nInitializes components to fetch data from correct Klevu backend\n\n\n**Note: All global CSS variables are documented in `klevu-init` even thought they are not defined in it.**"
      },
      "attributes": [
        {
          "name": "api-key",
          "description": "Read only API key to Klevu"
        },
        {
          "name": "assets-path",
          "description": "Override the default assets path. Will use format of `${assetsPath}/assets/${resource}`"
        },
        {
          "name": "consent-given",
          "description": "Data read consent given"
        },
        {
          "name": "disable-user-session",
          "description": "disableUserSession and stop making calls to visitor service when this is true, defaults to false."
        },
        {
          "name": "enable-klaviyo-connector",
          "description": "Enable Klaviyo integration"
        },
        {
          "name": "events-v-1-url",
          "description": "Override the default events v1 URL"
        },
        {
          "name": "events-v-2-url",
          "description": "Override the default events v2 URL"
        },
        {
          "name": "ipv-4-service-url",
          "description": "Ipv4 ServiceUrl for ipv4 retrieval used in analytics"
        },
        {
          "name": "ipv-6-service-url",
          "description": "Ipv6 ServiceUrl for ipv6 retrieval used in analytics"
        },
        {
          "name": "kmc-load-defaults",
          "description": ""
        },
        {
          "name": "language",
          "description": "Which language to load",
          "values": [
            {
              "name": "en"
            },
            {
              "name": "fi"
            }
          ]
        },
        {
          "name": "moi-api-url",
          "description": "Override the default moi API URL"
        },
        {
          "name": "recommendations-api-url",
          "description": "Override the default recommendations API URL"
        },
        {
          "name": "settings-url",
          "description": ""
        },
        {
          "name": "translation-url-prefix",
          "description": "Override the default translation URL prefix. Will use format of\n`${translationUrlPrefix}/translations/${lang}.json`"
        },
        {
          "name": "url",
          "description": "Klevu Server URL"
        },
        {
          "name": "use-consent",
          "description": "Enable Data Protection"
        },
        {
          "name": "visitor-service-url",
          "description": "Override the default session API URL"
        }
      ]
    },
    {
      "name": "klevu-latest-searches",
      "description": {
        "kind": "markdown",
        "value": "Lists latest searches user has made on the site"
      },
      "attributes": [
        {
          "name": "t-caption",
          "description": "Caption of the list"
        }
      ]
    },
    {
      "name": "klevu-layout-results",
      "description": {
        "kind": "markdown",
        "value": "Generic layout used in merchansiding and search landing page"
      },
      "attributes": []
    },
    {
      "name": "klevu-list",
      "description": {
        "kind": "markdown",
        "value": "Single list item for listing things."
      },
      "attributes": [
        {
          "name": "condensed",
          "description": "Condensed version of the list item."
        },
        {
          "name": "icon",
          "description": "Icon to be displayed in the list item. Cannot be used with image."
        },
        {
          "name": "image",
          "description": "Image to be displayed in the list item. Cannot be used with icon."
        },
        {
          "name": "no-x-padding",
          "description": ""
        },
        {
          "name": "primary-text",
          "description": "To render primary text with default styling"
        },
        {
          "name": "secondary-text",
          "description": "To render secondary text with default styling"
        },
        {
          "name": "url",
          "description": "Make the whole thing clickable and navigate to this url."
        }
      ]
    },
    {
      "name": "klevu-loading-indicator",
      "description": {
        "kind": "markdown",
        "value": "Simple loading indicator"
      },
      "attributes": []
    },
    {
      "name": "klevu-merchandising",
      "description": {
        "kind": "markdown",
        "value": "Full merchandising app to power up your product grid pages"
      },
      "attributes": [
        {
          "name": "auto-update-url",
          "description": "To update the pagination and filters to the url automatically"
        },
        {
          "name": "category",
          "description": "Which category products"
        },
        {
          "name": "category-title",
          "description": "Category title"
        },
        {
          "name": "filter-count",
          "description": "How many filters per facet to show"
        },
        {
          "name": "hide-brand",
          "description": "Hides brand from merchandising"
        },
        {
          "name": "hide-description",
          "description": "Hides description from merchandising"
        },
        {
          "name": "hide-hover-image",
          "description": "Hides hover image from merchandising"
        },
        {
          "name": "hide-image",
          "description": "Hides image from merchandising"
        },
        {
          "name": "hide-name",
          "description": "Hides name from merchandising"
        },
        {
          "name": "hide-price",
          "description": "Hides price from merchandising"
        },
        {
          "name": "hide-swatches",
          "description": "Do not show swatches in products in merchandising"
        },
        {
          "name": "limit",
          "description": "Count of products for page"
        },
        {
          "name": "out-of-stock-caption",
          "description": "Caption to show if product is out of stock in products in merchandising"
        },
        {
          "name": "show-add-to-cart",
          "description": "Show add to cart button in products in merchandising"
        },
        {
          "name": "show-product-code",
          "description": "To show the product code next to product name in merchandising"
        },
        {
          "name": "show-ratings",
          "description": "Show ratings"
        },
        {
          "name": "show-ratings-count",
          "description": "Show ratings count"
        },
        {
          "name": "show-variants-count",
          "description": "Show variants count in merchandising"
        },
        {
          "name": "sort",
          "description": "Order of results"
        },
        {
          "name": "t-add-to-cart",
          "description": "Text for add to cart button in merchandising"
        },
        {
          "name": "t-load-more",
          "description": "Text for load more button"
        },
        {
          "name": "use-a-b-test",
          "description": "Overrides KMC setting to use ABtest for results"
        },
        {
          "name": "use-infinite-scroll",
          "description": "Should use infinite scroll component to trigger load next"
        },
        {
          "name": "use-loading-indicator",
          "description": "Used to enable loading indicator"
        },
        {
          "name": "use-pagination",
          "description": "Should display pagination instead of load next"
        },
        {
          "name": "use-personalisation",
          "description": "Enable personalisation"
        },
        {
          "name": "vat-caption",
          "description": "Text to be added after the price. Usually used to indicate that does the price include VAT or not in merchandising."
        }
      ]
    },
    {
      "name": "klevu-modal",
      "description": {
        "kind": "markdown",
        "value": "Stylized modal dialog."
      },
      "attributes": [
        {
          "name": "start-open",
          "description": "Should show the modal on load."
        }
      ]
    },
    {
      "name": "klevu-moi",
      "description": {
        "kind": "markdown",
        "value": "Klevu MOI Application"
      },
      "attributes": [
        {
          "name": "api-key",
          "description": "Override default API key"
        },
        {
          "name": "start-open",
          "description": "Start the MOI window open"
        }
      ]
    },
    {
      "name": "klevu-pagination",
      "description": {
        "kind": "markdown",
        "value": "Pagination component. Either provide numbers or query result to display the component."
      },
      "attributes": [
        {
          "name": "current",
          "description": "Current page"
        },
        {
          "name": "max",
          "description": "Max page"
        },
        {
          "name": "min",
          "description": "Min page"
        },
        {
          "name": "should-update-url-for-page",
          "description": "To set the page selection value in the url"
        }
      ]
    },
    {
      "name": "klevu-popular-searches",
      "description": {
        "kind": "markdown",
        "value": "Fetches and displays most popular searches from Klevu Merchant center"
      },
      "attributes": [
        {
          "name": "t-caption",
          "description": "Caption of the list"
        }
      ]
    },
    {
      "name": "klevu-popup",
      "description": {
        "kind": "markdown",
        "value": "Popup component where clicking origin component popups the the content"
      },
      "attributes": [
        {
          "name": "anchor",
          "description": "Anchor popup to left or right of page",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "close-at-outside-click",
          "description": "Close popup when clicking outside content area"
        },
        {
          "name": "elevation",
          "description": "Elevation of the popup. 0-3."
        },
        {
          "name": "full-width-origin",
          "description": "Sets origin element to full width of the container"
        },
        {
          "name": "fullscreen-on-mobile-size",
          "description": "Expand popup to full size of the screen when popup is smaller that requested width"
        },
        {
          "name": "offset",
          "description": "How many pixels to offset the popup from origin"
        },
        {
          "name": "open-at-focus",
          "description": "Open content when origin component is focused"
        },
        {
          "name": "start-open",
          "description": "Initially show the popup"
        },
        {
          "name": "toggle",
          "description": "Clicking origin again will close the popup"
        },
        {
          "name": "use-background",
          "description": "Darken background when popup is open"
        }
      ]
    },
    {
      "name": "klevu-product",
      "description": {
        "kind": "markdown",
        "value": "Generic product component that renders product based on KlevuRecord of klevu/core\nAll parts of the component can be replaced with slots.\n\nBy default the products fill the whole space, but it can be limited\nwith --klevu-product-width and --klevu-product-small-width css variables."
      },
      "attributes": [
        {
          "name": "fallback-product-image-url",
          "description": "Fallback image url to be used when the product image fails to load."
        },
        {
          "name": "fixed-width",
          "description": "Force certain width for product. Do not use max-width"
        },
        {
          "name": "hide-brand",
          "description": "Hides brand information"
        },
        {
          "name": "hide-description",
          "description": "Hides description from info"
        },
        {
          "name": "hide-hover-image",
          "description": "When mousing over product, show hover image if available"
        },
        {
          "name": "hide-image",
          "description": "Hides image"
        },
        {
          "name": "hide-name",
          "description": "Hides name from info"
        },
        {
          "name": "hide-price",
          "description": "Hides price from info"
        },
        {
          "name": "hide-swatches",
          "description": "Do not show swatches in products"
        },
        {
          "name": "is-wrapper",
          "description": "Turns the component into a product wrapper that handles events\nautomatically. It assumes that whole product is clickable.\n\nComponent has only one main slot that can contain any content.\n\nTo prevent product clicking use `event.stopPropagation()` in your\nevents.\n\nComponent still requires the product parameter as it's data is used\nsend correct data to Klevu analytics"
        },
        {
          "name": "key-brand",
          "description": "What key to use for brand value"
        },
        {
          "name": "key-description",
          "description": "What key to use for description value"
        },
        {
          "name": "key-name",
          "description": "What key to use for name value"
        },
        {
          "name": "out-of-stock-caption",
          "description": "Caption to show if product is out of stock"
        },
        {
          "name": "show-add-to-cart",
          "description": "Show add to cart button"
        },
        {
          "name": "show-product-code",
          "description": "To show the product code next to product name."
        },
        {
          "name": "show-ratings",
          "description": "Show ratings"
        },
        {
          "name": "show-ratings-count",
          "description": "Show ratings"
        },
        {
          "name": "show-variants-count",
          "description": "Show variants count"
        },
        {
          "name": "t-add-to-cart",
          "description": "Text for add to cart button"
        },
        {
          "name": "variant",
          "description": "What variant of product to render",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "line"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "vat-caption",
          "description": "Text to be added after the price. Usually used to indicate that does the price include VAT or not."
        }
      ]
    },
    {
      "name": "klevu-product-grid",
      "description": {
        "kind": "markdown",
        "value": "Component to place products on grid. Very simple container for products."
      },
      "attributes": [
        {
          "name": "items-per-row",
          "description": "Force to place products in grid with given number of columns."
        }
      ]
    },
    {
      "name": "klevu-product-query",
      "description": {
        "kind": "markdown",
        "value": "Button that is placed on the site to start a product query session"
      },
      "attributes": [
        {
          "name": "additionaldata",
          "description": ""
        },
        {
          "name": "ask-button-text",
          "description": "Text of the button for asking a question"
        },
        {
          "name": "button-text",
          "description": "Text of the button to open the popup"
        },
        {
          "name": "channel-id",
          "description": "Channel Id to be used in analytics\neg: Shopify, BigCommerce"
        },
        {
          "name": "disable-close-outside-click",
          "description": "Disable closing the popup when clicking outside of it"
        },
        {
          "name": "fine-print",
          "description": "Fine print of the popup under the title"
        },
        {
          "name": "hide-embedded-title",
          "description": "Set to true if you want to hide the embedded title"
        },
        {
          "name": "item-group-id",
          "description": "Product Group Id to be used in analytics, in case of multiple variants"
        },
        {
          "name": "item-id",
          "description": "Product Id to be used in analytics"
        },
        {
          "name": "item-variant-id",
          "description": "Optional Product Variant Id to be used in analytics"
        },
        {
          "name": "locale",
          "description": "Locale to be used in analytics\neg: en_US"
        },
        {
          "name": "popup-anchor",
          "description": "Anchor popup to which side of the origin",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "popup-offset",
          "description": "How many pixels to offset the popup from origin"
        },
        {
          "name": "popup-title",
          "description": "Title of the popup"
        },
        {
          "name": "pqa-widget-id",
          "description": "Instead of Klevu API-key use a widget id to start a session"
        },
        {
          "name": "pqa-widget-layout",
          "description": "Set to false if you want to show the popup in place instead of dialog box",
          "values": [
            {
              "name": "embedded"
            },
            {
              "name": "popup"
            }
          ]
        },
        {
          "name": "product-id",
          "description": "Alternative to url, productId can be used to start a session"
        },
        {
          "name": "product-info-generator",
          "description": "Pass function to call that will return the product info\neg: pass function call as string - \"getProductInfo()\" or function itself"
        },
        {
          "name": "text-field-placeholder",
          "description": "Placeholder of the textfield"
        },
        {
          "name": "text-field-variant",
          "description": "Variant of the textfield how does it look like",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "pill"
            }
          ]
        },
        {
          "name": "url",
          "description": "Url of the page where the product is"
        },
        {
          "name": "use-background",
          "description": "Use dark background with the popup"
        },
        {
          "name": "use-native-scrollbars",
          "description": "Use native scrollbars instead of custom ones"
        }
      ]
    },
    {
      "name": "klevu-product-query-popup",
      "description": {
        "kind": "markdown",
        "value": "Klevu Product Query popup application that shows a popup for asking questions about a product"
      },
      "attributes": [
        {
          "name": "additionaldata",
          "description": "Pass any additional data you would want the AI to use for context"
        },
        {
          "name": "ask-button-text",
          "description": "Text of the button for asking a question"
        },
        {
          "name": "channel-id",
          "description": "Channel Id to be used in analytics\neg: Shopify, Bigcommerce"
        },
        {
          "name": "disable-close-outside-click",
          "description": "Disable closing the popup when clicking outside of it"
        },
        {
          "name": "hide-embedded-title",
          "description": "Set to true if you want to hide the embedded title"
        },
        {
          "name": "item-group-id",
          "description": "Product Group Id to be used in analytics, in case of multiple variants"
        },
        {
          "name": "item-id",
          "description": "Product Id to be used in analytics"
        },
        {
          "name": "item-variant-id",
          "description": "Optional Product Variant Id to be used in analytics"
        },
        {
          "name": "locale",
          "description": "Locale to be used in analytics\neg: en_US"
        },
        {
          "name": "popup-anchor",
          "description": "Anchor popup to which side of the origin",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "popup-offset",
          "description": "How many pixels to offset the popup from origin"
        },
        {
          "name": "pqa-widget-id",
          "description": "Instead of Klevu API-key use a widget id to start a session"
        },
        {
          "name": "pqa-widget-layout",
          "description": "Set to false if you want to show this in place instead of dialog box",
          "values": [
            {
              "name": "embedded"
            },
            {
              "name": "popup"
            }
          ]
        },
        {
          "name": "product-id",
          "description": "Alternative to url, productId can be used to start a session"
        },
        {
          "name": "product-info-generator",
          "description": "Pass function to call that will return the product info\neg: pass function call as string - \"getProductInfo()\" or function"
        },
        {
          "name": "remove-asklo-branding",
          "description": "Set to true if you want to remove the powered by ribbon"
        },
        {
          "name": "t-answer-error",
          "description": "When sending a message fails, show this text"
        },
        {
          "name": "t-button-text",
          "description": "Text of the button to open the popup"
        },
        {
          "name": "t-data-protection-notice",
          "description": "Data protection notice when user registering is enabled"
        },
        {
          "name": "t-fine-print",
          "description": "Fine print of the popup under the title"
        },
        {
          "name": "t-loading-sorry",
          "description": "When loading takes a bit longer, show this text"
        },
        {
          "name": "t-popup-title",
          "description": "Title of the popup"
        },
        {
          "name": "t-rate-experience-text",
          "description": "Description of the feedback section when closing the popup"
        },
        {
          "name": "t-rate-experience-title",
          "description": "Title of the feedback section when closing the popup"
        },
        {
          "name": "t-text-field-placeholder",
          "description": "Placeholder of the textfield"
        },
        {
          "name": "text-field-variant",
          "description": "Variant of the textfield how does it look like",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "pill"
            }
          ]
        },
        {
          "name": "url",
          "description": "Url of the page where the product is"
        },
        {
          "name": "use-background",
          "description": "Use dark background with the popup"
        },
        {
          "name": "use-native-scrollbars",
          "description": "Use native scrollbars instead of custom ones"
        }
      ]
    },
    {
      "name": "klevu-query",
      "description": {
        "kind": "markdown",
        "value": "__klevu-query__ component is a special kind of component that makes queries to Klevu defined by the\n__type__ parameter. It also listens to clicks to __klevu-product__ -component and sends analytical data to Klevu\nbased on that. This components gives you ability to create any kind of UI with Klevu components or by using your own\ncomponents! Just use __klevu-query__ to fetch the data and __klevu-product__ to render the product\ncards. Whole content of __klevu-product__ can be replaced with your content."
      },
      "attributes": [
        {
          "name": "category",
          "description": "Which category to do merchandising. Required for \"merchandising\" type"
        },
        {
          "name": "category-title",
          "description": "Which category title to have on page. Required for \"merchandising\" type"
        },
        {
          "name": "disable-initial-fetch",
          "description": "By default component will fetch results on init or on property change. This can be disabled with this prop."
        },
        {
          "name": "filter-count",
          "description": "To how many filters limit results to"
        },
        {
          "name": "filter-get",
          "description": "Fetch filters on the request"
        },
        {
          "name": "filter-with-prices",
          "description": "Should get price filters"
        },
        {
          "name": "limit",
          "description": "What's the limit on page"
        },
        {
          "name": "offset",
          "description": "Offset of results"
        },
        {
          "name": "recommendation-category-path",
          "description": "Which category path to use for recommendation. Required for some recommendation types"
        },
        {
          "name": "recommendation-current-product-id",
          "description": "Which product is currently being viewed. Required for some recommendation types"
        },
        {
          "name": "recommendation-id",
          "description": "Which recommendation to fetch from Klevu Merchant Center. Required for \"recommendation\" type"
        },
        {
          "name": "recommendation-item-group-id",
          "description": "What is the item group id of the product being viewed. Required for some recommendation types"
        },
        {
          "name": "search-suggestions",
          "description": "When searching should search suggestions be fetched"
        },
        {
          "name": "search-term",
          "description": "What to search. Required for \"search\" type."
        },
        {
          "name": "send-search-view-event",
          "description": "Should search view event be sent. View event is important for analytical cases.\nIn case of a search this should be used only when creating a landing page for search."
        },
        {
          "name": "sort",
          "description": "How to sort"
        },
        {
          "name": "type",
          "description": "What kind of query",
          "values": [
            {
              "name": "merchandising"
            },
            {
              "name": "recommendation"
            },
            {
              "name": "search"
            }
          ]
        },
        {
          "name": "update-on-filter-change",
          "description": "Should component listen to changes to filters"
        }
      ]
    },
    {
      "name": "klevu-quicksearch",
      "description": {
        "kind": "markdown",
        "value": "Full app to create search bar that popups trending products and search results."
      },
      "attributes": [
        {
          "name": "fallback-term",
          "description": "What term should be used if there isn't enough results"
        },
        {
          "name": "full-result-count",
          "description": "How many products to show in full variant"
        },
        {
          "name": "hide-popular-keywords-on-no-results-page",
          "description": "Hide popular keywords on no results page"
        },
        {
          "name": "hide-popular-searches",
          "description": "Hide popular keywords"
        },
        {
          "name": "hide-recent-searches",
          "description": "Hide recent searches"
        },
        {
          "name": "hide-recently-viewed-products",
          "description": "Hide recently viewed products"
        },
        {
          "name": "hide-trending-products",
          "description": "Hide trending products"
        },
        {
          "name": "hide-trending-products-on-no-results-page",
          "description": "HHide trending products on no results page"
        },
        {
          "name": "placeholder",
          "description": "Placeholder for input text"
        },
        {
          "name": "popular-products-count",
          "description": "How many products to show in Popular products section"
        },
        {
          "name": "popup-anchor",
          "description": "Anchor popup to witch side",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "result-variant",
          "description": "Change variant of the search results",
          "values": [
            {
              "name": "full"
            },
            {
              "name": "simple"
            }
          ]
        },
        {
          "name": "search-categories",
          "description": "Should component search for categories too"
        },
        {
          "name": "search-cms-pages",
          "description": "Should component search for CMS pages too"
        },
        {
          "name": "search-field-variant",
          "description": "Change variant of the search field",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "default-no-button"
            },
            {
              "name": "pill"
            }
          ]
        },
        {
          "name": "search-text",
          "description": "Text of search button"
        },
        {
          "name": "show-ratings",
          "description": "Show ratings"
        },
        {
          "name": "show-ratings-count",
          "description": "Show ratings count"
        },
        {
          "name": "show-variants-count",
          "description": "Show variants count"
        },
        {
          "name": "simple-result-count",
          "description": "How many products to show in simple variant"
        },
        {
          "name": "t-categories-caption",
          "description": "Title of categories section"
        },
        {
          "name": "t-last-clicked-products-caption",
          "description": "Recently clicked tab caption\nSupports showing the count in place of %s in the value\neg: `Recently Searched (%s)` with count of 2 will lead to `Recently Searched (2)`."
        },
        {
          "name": "t-no-results-message",
          "description": "Message to show when no results found"
        },
        {
          "name": "t-popular-products-title",
          "description": "Popular products section heading"
        },
        {
          "name": "t-popular-products-title-on-no-results-page",
          "description": "Popular products section heading shown on no results page"
        },
        {
          "name": "t-search-results",
          "description": "Title of search results"
        },
        {
          "name": "t-trending-caption",
          "description": "Trending tab caption\nSupports showing the count in place of %s in the value\neg: `Trending (%s)` with count of 2 will lead to `Trending (2)`."
        },
        {
          "name": "term",
          "description": "Load with default term"
        },
        {
          "name": "use-klaviyo",
          "description": "Enables Klaviyo click tracking"
        },
        {
          "name": "use-loading-indicator",
          "description": "Used to enable loading indicator"
        },
        {
          "name": "use-personalisation",
          "description": "Enable personalisation"
        }
      ]
    },
    {
      "name": "klevu-rating",
      "description": {
        "kind": "markdown",
        "value": "Klevu ratings component"
      },
      "attributes": [
        {
          "name": "rating",
          "description": "Rating value"
        },
        {
          "name": "rating-range",
          "description": "Number of stars to show"
        }
      ]
    },
    {
      "name": "klevu-recommendations",
      "description": {
        "kind": "markdown",
        "value": "Full recommendation banner solution"
      },
      "attributes": [
        {
          "name": "category-path",
          "description": "For category product recommendation you need to provide categery path"
        },
        {
          "name": "current-product-id",
          "description": "For similiar products recommendation you need to provide productId and itemGroupId"
        },
        {
          "name": "item-group-id",
          "description": "For similiar products recommendation you need to provide productId and itemGroupId"
        },
        {
          "name": "recommendation-id",
          "description": "The ID of the recommendation"
        },
        {
          "name": "recommendation-title",
          "description": "Title of the recommendation"
        }
      ]
    },
    {
      "name": "klevu-search-field",
      "description": {
        "kind": "markdown",
        "value": "Plain textfield that does the searching. It queries Klevu and returns the results\nin a custom event. Then you can decide what to do with the results."
      },
      "attributes": [
        {
          "name": "fallback-term",
          "description": "Fallback term to use if there are no results"
        },
        {
          "name": "limit",
          "description": "Maximum amount of results"
        },
        {
          "name": "search-categories",
          "description": "Should try to find categories as well"
        },
        {
          "name": "search-cms-pages",
          "description": "Should try to find cms pages as well"
        },
        {
          "name": "search-products",
          "description": "Should search products"
        },
        {
          "name": "search-suggestions",
          "description": "Should search suggestions"
        },
        {
          "name": "send-analytics",
          "description": "Sends analytics when making query"
        },
        {
          "name": "sort",
          "description": "In case you want to sort the results"
        },
        {
          "name": "t-placeholder",
          "description": "The placeholder text to display in the search field."
        },
        {
          "name": "t-search-text",
          "description": "Button text"
        },
        {
          "name": "term",
          "description": ""
        },
        {
          "name": "use-klaviyo",
          "description": "Enable Klaviyo integration for search terms and clicks"
        },
        {
          "name": "use-loading-indicator",
          "description": "Used to enable loading indicator"
        },
        {
          "name": "use-personalisation",
          "description": "Enable personalisation on the query"
        },
        {
          "name": "variant",
          "description": "Variant of the search field",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "default-no-button"
            },
            {
              "name": "pill"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-search-landing-page",
      "description": {
        "kind": "markdown",
        "value": "Full app component for search landing page"
      },
      "attributes": [
        {
          "name": "auto-update-url",
          "description": "To update the pagination and filters to the url automatically"
        },
        {
          "name": "filter-count",
          "description": "How many products to display in filters"
        },
        {
          "name": "hide-brand",
          "description": "Hides brand from search results"
        },
        {
          "name": "hide-description",
          "description": "Hides description from search results"
        },
        {
          "name": "hide-filters",
          "description": "Hide filters on results page"
        },
        {
          "name": "hide-hover-image",
          "description": "Hides hover image from search results"
        },
        {
          "name": "hide-image",
          "description": "Hides image from search results"
        },
        {
          "name": "hide-name",
          "description": "Hides name from search results"
        },
        {
          "name": "hide-price",
          "description": "Hides price from search results"
        },
        {
          "name": "hide-swatches",
          "description": "Do not show swatches in products in search results"
        },
        {
          "name": "limit",
          "description": "How many results to display on a page"
        },
        {
          "name": "out-of-stock-caption",
          "description": "Caption to show if product is out of stock in products in search results"
        },
        {
          "name": "popular-products-result-count",
          "description": "How many products to show in popular products"
        },
        {
          "name": "price-interval",
          "description": "The factor to use to generate the ranges"
        },
        {
          "name": "show-add-to-cart",
          "description": "Show add to cart button in products in search results"
        },
        {
          "name": "show-price-as-slider",
          "description": "Show price as options"
        },
        {
          "name": "show-product-code",
          "description": "To show the product code next to product name in search results"
        },
        {
          "name": "show-ratings",
          "description": "Show ratings"
        },
        {
          "name": "show-ratings-count",
          "description": "Show ratings count"
        },
        {
          "name": "show-search",
          "description": "Show the quick search box at the top of the page"
        },
        {
          "name": "show-variants-count",
          "description": "Show variants count"
        },
        {
          "name": "sort",
          "description": "In which order to set the products"
        },
        {
          "name": "t-add-to-cart",
          "description": "Text for add to cart button in search results"
        },
        {
          "name": "t-load-more",
          "description": "Text of load more button"
        },
        {
          "name": "t-search-title",
          "description": "The title of the page"
        },
        {
          "name": "term",
          "description": "What term was used for search"
        },
        {
          "name": "use-infinite-scroll",
          "description": "Should use infinite scroll component to trigger load next"
        },
        {
          "name": "use-klaviyo",
          "description": "Enable Klaviyo integration"
        },
        {
          "name": "use-loading-indicator",
          "description": "Used to enable loading indicator"
        },
        {
          "name": "use-multi-select-filters",
          "description": "Specify whether to show checkboxes or radio buttons for filters"
        },
        {
          "name": "use-pagination",
          "description": "Use pagination instead of loading more"
        },
        {
          "name": "use-personalisation",
          "description": "Enable personalization"
        },
        {
          "name": "vat-caption",
          "description": "Text to be added after the price. Usually used to indicate that does the price include VAT or not in search results."
        }
      ]
    },
    {
      "name": "klevu-slider",
      "description": {
        "kind": "markdown",
        "value": "Horizontal slider component. By default used for price range in this package. But can\nbe used for other purposes as well."
      },
      "attributes": [
        {
          "name": "end",
          "description": "Current end value of the range"
        },
        {
          "name": "max",
          "description": "Max value of the range"
        },
        {
          "name": "min",
          "description": "Min value of the range"
        },
        {
          "name": "show-tooltips",
          "description": "Show tooltips on top of slider"
        },
        {
          "name": "start",
          "description": "Current start value of the range"
        }
      ]
    },
    {
      "name": "klevu-slides",
      "description": {
        "kind": "markdown",
        "value": "Horizontal slides component. Can be used to display a list of items horizontally. Has optional title and next/prev buttons."
      },
      "attributes": [
        {
          "name": "center-next-prev",
          "description": "center position next and previous buttons"
        },
        {
          "name": "heading",
          "description": "Heading for the slides component"
        },
        {
          "name": "hide-next-prev",
          "description": "Hides next and previous buttons"
        },
        {
          "name": "slide-full-width",
          "description": "When clicking next/prev buttons should scroll full width of container"
        }
      ]
    },
    {
      "name": "klevu-sort",
      "description": {
        "kind": "markdown",
        "value": "Sort dropdown. User can select what kind of sorting they want"
      },
      "attributes": [
        {
          "name": "variant",
          "description": "Dropdown variant",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-suggestions-list",
      "description": {
        "kind": "markdown",
        "value": "Simple component to list suggestions. Takes in a parameter suggestions that will be rendered as a list"
      },
      "attributes": [
        {
          "name": "caption",
          "description": "Caption on the list"
        }
      ]
    },
    {
      "name": "klevu-tab",
      "description": {
        "kind": "markdown",
        "value": "Very simple tab component. Use like a button, but with a caption.\nUse standard onClick event to handle click."
      },
      "attributes": [
        {
          "name": "active",
          "description": "Whether the tab is active"
        },
        {
          "name": "caption",
          "description": "Title of the tab"
        },
        {
          "name": "disabled",
          "description": "Whether the tab is disabled"
        }
      ]
    },
    {
      "name": "klevu-textfield",
      "description": {
        "kind": "markdown",
        "value": "Branded text field component"
      },
      "attributes": [
        {
          "name": "clear-button",
          "description": "Display a button to clear field value on the right side of the field"
        },
        {
          "name": "disabled",
          "description": "Is field disabled"
        },
        {
          "name": "error",
          "description": "Is field in error state"
        },
        {
          "name": "icon",
          "description": "Icon to display in textfield start of the field. Please use tokens of material icons"
        },
        {
          "name": "placeholder",
          "description": "Placeholder value of the field"
        },
        {
          "name": "value",
          "description": "Current value of the field"
        },
        {
          "name": "variant",
          "description": "Variant of textfield",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "pill"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-typography",
      "description": {
        "kind": "markdown",
        "value": "Klevu typography component. This component is used in most places to set correct font in component pieces."
      },
      "attributes": [
        {
          "name": "full-width",
          "description": "Display the text in full width. Usefull when typography needs to be used as a block element."
        },
        {
          "name": "variant",
          "description": "Variant of heading",
          "values": [
            {
              "name": "body-l"
            },
            {
              "name": "body-l-bold"
            },
            {
              "name": "body-m"
            },
            {
              "name": "body-m-bold"
            },
            {
              "name": "body-s"
            },
            {
              "name": "body-s-bold"
            },
            {
              "name": "body-xs"
            },
            {
              "name": "body-xs-bold"
            },
            {
              "name": "h1"
            },
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            }
          ]
        }
      ]
    },
    {
      "name": "klevu-util-dom-events",
      "description": {
        "kind": "markdown",
        "value": "Utility compoenent that simplifies listening Klevu SDK Dom events\nhttps://docs.klevu.com/headless-sdk/events-analytics#dhk6Y"
      },
      "attributes": []
    },
    {
      "name": "klevu-util-infinite-scroll",
      "description": {
        "kind": "markdown",
        "value": "Component that triggers event when intercepted on scroll of page."
      },
      "attributes": [
        {
          "name": "enabled",
          "description": "Whether infinite scrolling is enabled"
        },
        {
          "name": "infinite-scroll-pause-threshold",
          "description": "The number of pages after which triggers infiniteScrollingPaused event.\nListen to this event to allow further loading on user input."
        }
      ]
    },
    {
      "name": "klevu-util-portal",
      "description": {
        "kind": "markdown",
        "value": "Portal component to move content to end of body instead of normal DOM position. Typically used for popups\nto prevent problems with CSS stylings.\n\nDoes not move styles, so create a child component that has styles defined in shadow DOM."
      },
      "attributes": []
    },
    {
      "name": "klevu-util-scrollbars",
      "description": {
        "kind": "markdown",
        "value": "Utility that replaces the default browser scrollbar with a custom one."
      },
      "attributes": [
        {
          "name": "overflow-x",
          "description": "The overflow behavior of the horizontal scrollbar.",
          "values": [
            {
              "name": "hidden"
            },
            {
              "name": "scroll"
            },
            {
              "name": "visible"
            },
            {
              "name": "visible-hidden"
            },
            {
              "name": "visible-scroll"
            }
          ]
        },
        {
          "name": "overflow-y",
          "description": "The overflow behavior of the vertical scrollbar.",
          "values": [
            {
              "name": "hidden"
            },
            {
              "name": "scroll"
            },
            {
              "name": "visible"
            },
            {
              "name": "visible-hidden"
            },
            {
              "name": "visible-scroll"
            }
          ]
        },
        {
          "name": "use-native",
          "description": "Disables the custom scrollbar and use native scrollbars instead."
        }
      ]
    },
    {
      "name": "klevu-util-ssr-provider",
      "description": {
        "kind": "markdown",
        "value": "KlevuUtilSsrProvider component stores the Klevu SSR response as a string\nthat can be hydrated in the client side."
      },
      "attributes": [
        {
          "name": "html",
          "description": ""
        },
        {
          "name": "identifier",
          "description": ""
        },
        {
          "name": "packed",
          "description": ""
        }
      ]
    },
    {
      "name": "klevu-util-viewport",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": []
    }
  ]
}