import { KlevuRecord } from "@klevu/core";
import { EventEmitter } from "../../stencil-public-runtime";
export type KlevuProductOnProductClick = {
  product: Partial<KlevuRecord>;
  originalEvent: MouseEvent;
};
export type KlevuProductVariant = "line" | "small" | "default";
export type KlevuProductSlots = "top" | "image" | "info" | "bottom";
/**
 * 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 --kleu-product-width and --klevu-product-small-width css variables.
 *
 * @slot top - Empty are before any product content
 * @slot image - Image region of component
 * @slot info - Swatches, titles, brands and prices slot
 * @slot bottom - Empty are after product content
 *
 * @csspart product-image - The image element of component
 * @csspart product-container - The container element of whole
 * @csspart product-swatch - Single swatch element under the image
 *
 * @cssprop --klevu-product-width - Width of the product
 * @cssprop --klevu-product-small-width - Width of the product when small variant is used
 * @cssprop --klevu-product-image-aspect-ratio - On what aspect the background image will be
 * @cssprop --klevu-product-image-fill - How to fill image to it's space.
 */
export declare class KlevuProduct {
  #private;
  /**
   * What variant of product to render
   */
  variant: KlevuProductVariant;
  /**
   * Product data
   */
  product?: Partial<KlevuRecord>;
  /**
   * Do not show swatches in products
   */
  hideSwatches?: boolean;
  /**
   * Hides price from info
   */
  hidePrice?: boolean;
  /**
   * Hides description from info
   */
  hideDescription?: boolean;
  /**
   * Hides name from info
   */
  hideName?: boolean;
  /**
   * Hides image
   */
  hideImage?: boolean;
  /**
   * Hides brand information
   */
  hideBrand?: boolean;
  /**
   * Force certain width for product. Do not use max-width
   */
  fixedWidth?: boolean;
  /**
   * What key to use for brand value
   */
  keyBrand: string;
  /**
   * What key to use for name value
   */
  keyName: string;
  /**
   * What key to use for description value
   */
  keyDescription: string;
  hoverImage?: string;
  /**
   * When products has been clicked
   */
  klevuProductClick: EventEmitter<KlevuProductOnProductClick>;
  render(): any;
}
