import { Spacing } from "../../global/mixins";
/**
 * @uiName Hero Image
 * @uiOrder ["image-url", "image-alt", "min-height", "layout", "header", "description", "button-text", "button-link", "button-new-tab", "*"]
 * @validParents ["sqm-portal-container","sqm-brand", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section", "sqm-titled-section", "sqm-tab", "template"]
 * @exampleGroup Common Components
 * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right"></sqm-hero-image>
 * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
 * @csspart sqm-base - The base container for the hero image
 * @csspart sqm-overlay - The image overlay
 * @csspart sqm-columns-image - The image column
 * @csspart sqm-columns-text-area - The text column
 * @csspart sqm-columns-header - The header in the text column
 * @csspart sqm-columns-description - The description in the text column
 * @csspart primarybutton-base - The primary button base
 * @csspart secondarybutton-base - The secondary button base
 * @csspart sqm-hero-image-button - The hero image button
 */
export declare class HeroImage {
  /**
   * @uiWidget ImageUpload
   * @format url
   * @uiName Image
   */
  imageUrl: string;
  /**
   * @uiName Overlay color
   * @uiWidget color
   * @format color
   * @uiGroup Style
   */
  overlayColor?: string;
  /**
   * @uiName Overlay opacity
   * @uiGroup Style
   */
  overlayOpacity: string;
  /**
   * @uiName Text color
   * @uiWidget color
   * @format color
   * @uiGroup Style
   */
  textColor?: string;
  /**
   * @uiName Background color
   * @uiWidget color
   * @format color
   * @uiGroup Style
   */
  backgroundColor?: string;
  /**
   * @uiName Image layout
   * @uiType string
   * @uiEnum ["overlay", "columns"]
   * @uiEnumNames ["Overlay", "Two-column"]
   * @uiGroup Style
   */
  layout: "overlay" | "columns";
  /**
   * @uiName Image percentage
   * @uiType number
   * @uiGroup Style
   */
  imagePercentage: number;
  /**
   * @uiName Image position
   * @uiType string
   * @uiEnum ["left", "center", "right"]
   * @uiEnumNames ["Left", "Center", "Right"]
   * @uiGroup Style
   */
  imagePos: "left" | "center" | "right";
  /**
   * @uiName Image mobile position
   * @uiType string
   * @uiEnum ["top", "bottom"]
   * @uiEnumNames ["Top", "Bottom"]
   * @uiGroup Style
   */
  imageMobilePos: "top" | "bottom";
  /**
   * @uiName Title
   */
  header?: string;
  /**
   * @uiName Description
   * @uiWidget textArea
   */
  description?: string;
  /**
   * @uiName Button text
   */
  buttonText?: string;
  /**
   * @uiName Button link
   */
  buttonLink?: string;
  /**
   * @uiName Open link in new tab
   * @default
   */
  buttonNewTab?: boolean;
  /**
   * @uiName Text padding
   * @uiType string
   * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
   * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
   * @uiGroup Style
   */
  paddingText: Spacing;
  /**
   * @uiName Image padding
   * @uiType string
   * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
   * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
   * @uiGroup Style
   */
  paddingImage: Spacing;
  /**
   * The type of the button that is used (primary or secondary).
   * @uiName Button Type
   * @uiType string
   * @uiEnum ["primary", "secondary"]
   * @uiEnumNames ["Primary", "Secondary"]
   * @uiGroup Style
   */
  buttonType?: "primary" | "secondary";
  /**
   * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
   *
   * @uiName Minimum height (px)
   */
  minHeight?: number;
  /**
   * Alt text for the hero image (columns layout). Leave empty for decorative images.
   *
   * @uiName Image alt text
   */
  imageAlt?: string;
  constructor();
  disconnectedCallback(): void;
  render(): any;
}