import { EventEmitter } from "../../stencil-public-runtime";
import { DuetAnalyticsEvent, DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
import { ThemeableComponent } from "../../common/themeable-component";
import { DuetLangObject } from "../../utils/language-utils";
export type DuetHeroIconSize = "medium" | "large";
export type DuetHeroVariation = "default" | "light" | "gray" | "image" | "minimal" | "campaign" | "section" | "product" | "content";
export type DuetHeroBackData = {
    analyticsId?: string;
    id?: string;
    href: string;
    label: string;
};
export type DuetHeroClickEvent = {
    originalEvent: Event;
    component: "duet-hero";
    data: any;
};
export type DuetHeroAnalyticsEvent = DuetAnalyticsEvent<"duet-hero">;
export type DuetHeroButtonData = {
    analyticsId?: string;
    [key: string]: any;
};
export type DuetHeroListItem = {
    label: string;
    value: string;
};
export type DuetHeroActionItem = {
    label: string;
    href: string;
    icon: string;
    id?: string;
    analyticsId?: string;
    external?: boolean;
};
/**
 * @part duet-hero - piercing selector for styling the hero container
 * @part duet-hero-text - piercing selector for styling the hero text container
 * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
 * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
 * @slot bottom - This is a slot for content under the main hero content.
 * @slot pre-heading - This is a slot for pre-heading content inside the hero component. Only usable with gray variation. Only span should be used in this slot.
 * @slot heading - This is a slot for heading content inside the hero component. Only span should be used in this slot.
 * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations. Only span should be used in this slot.
 */
export declare class DuetHero implements ThemeableComponent {
    /**
     * Reference to host HTML element.
     */
    element: HTMLElement;
    private hasPreHeadingSlot;
    private hasHeadingSlot;
    private hasHeadingSlotNative;
    private hasSubHeadingSlot;
    private hasSubHeadingSlotNative;
    /**
     * State() variables
     * Inlined decorator, alphabetical order.
     */
    processedListItems: DuetHeroListItem[];
    processedActions: DuetHeroActionItem[];
    processedBack: DuetHeroBackData;
    /**
     * Theme of the hero area.
     */
    theme: DuetTheme;
    /**
     * The heading of the hero area, rendered in an H1 tag. P.S. you can control
     * the level of the HTML heading by using “level” prop. If empty, heading
     * will be hidden. There is also a heading slot that can be used.
     */
    heading: string;
    /**
     * The headline shown before heading.
     */
    preHeading: string;
    /**
     * The level of the heading.
     */
    level: DuetHeadingLevel;
    /**
     * The level of the heading. Only usable with campaign, section variations.
     */
    subHeadingLevel: DuetHeadingLevel;
    /**
     * The description of the hero area, rendered in a P tag. If empty, description
     * will be hidden.
     */
    description: string;
    /**
     * Icon to display to the left of the button content. If empty, icon will be hidden.
     */
    icon: DuetIconName;
    /**
     * Icon size for the button.
     */
    iconSize: DuetHeroIconSize;
    /**
     * Show icon on the right side of the button content.
     */
    iconRight: boolean;
    /**
     * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
     */
    categoryIcon: DuetIconName;
    /**
     * Icon color to use for the category icon that can be used in gray hero area variation.
     */
    categoryIconColor: DuetColor;
    /**
     * Text label shown inside the button. If empty, button will be hidden.
     */
    buttonLabel: string;
    /**
     * The currently active language. This setting changes the accessible labels to match the
     * chosen language.
     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
     * @default "fi"
     */
    language: DuetLanguage;
    /**
     * Defaults for accessibleLabelExternal
     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
     */
    accessibleLabelExternalDefaults: DuetLangObject | string;
    /**
     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
     */
    accessibleLabelExternal: string;
    /**
     * URL that the button links to.
     */
    buttonUrl: string;
    /**
     * ID for the button.
     */
    buttonId: string;
    /**
     * An object that includes any data you want to pass to the button. This data
     * will be emitted when the button is clicked. If property analyticsId is present,
     * then a separate duetAnalytics event will be emitted.
     */
    buttonData: DuetHeroButtonData;
    /**
     * Centers the text in hero area.
     */
    textCenter: boolean;
    /**
     * Forces all items in the header to be leftAligned
     * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
     * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
     * this nullifies textCenter prop
     */
    leftAlign: boolean;
    /**
     * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image
     * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
     * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
     * property is left empty, image will be hidden.
     */
    image: string;
    /**
     * Image sizing.
     */
    imageSize: "auto" | "cover";
    /**
     * Image position.
     */
    imagePosition: "auto" | "center";
    /**
     * Alt attribute text for the image. If not provided, image is assigned presentation role.
     */
    imageAlt: string;
    /**
     * Style variation of the hero area.
     */
    variation: DuetHeroVariation;
    /**
     * An object that includes mandatory "label" and "href" fields for the back link.
     * Additionally, you can pass an "id" that is added as an HTML identifier for the
     * element. If nothing is passed, back link won’t be shown. **NOTE: The back link
     * can be ONLY used in combination with "gray" style variation.**
     */
    back: any;
    /**
     * An array of items for the definition list inside hero. Items have to
     * include mandatory "label" and "value" fields to work.
     */
    listItems: any;
    /**
     * An array of items for the main actions. Items have to include mandatory
     * "label", "href" and "icon" fields to work. Additionally, you can pass an "id"
     * that is added as an HTML identifier for the anchor tag.
     */
    actions: any;
    /**
     * Layout.
     */
    layout: "narrow" | "fluid";
    /**
     * Callback for when an user clicks the hero area's action button. You can prevent
     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
     * inside your listener. Additionally, the passed data is available via
     * **event.detail.data**.
     */
    duetClick: EventEmitter<DuetHeroClickEvent>;
    /**
     * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be
     * accessed via **event.detail.analyticsId**
     */
    duetAnalytics: EventEmitter<DuetHeroAnalyticsEvent>;
    /**
     * Component lifecycle events.
     */
    componentWillLoad(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Component event handling.
     */
    private handleClick;
    /**
     * Local methods.
     */
    private refresh;
    private emitChange;
    private getPreHeadingText;
    private getHeadingText;
    private getAccessibleHeading;
    /**
     * render() function
     * Always the last one in the class.
     */
    render(): any;
}