import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { ButtonVariant } from '../../../../types/src/button';
import { IconButtonSize } from '../../../../types/src/icon-button';
import { CSSResultGroup } from 'lit';
import { default as CxIcon } from '../icon/icon';
import { default as CxSpinner } from '../spinner/spinner';

/**
 * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
 *
 * @description For a full list of icons that come bundled with Orange Logic Design System, refer to the [icon component](?s=atoms&id=/icon).
 *
 * @event cx-blur - Emitted when the icon button loses focus.
 * @event cx-focus - Emitted when the icon button gains focus.
 *
 * @slot badge - A badge to show on top right corner.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --group-divider-color - The color of the divider between icon buttons in a group.
 */
export default class CxIconButton extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-icon': typeof CxIcon;
        'cx-spinner': typeof CxSpinner;
    };
    private readonly localize;
    button: HTMLButtonElement | HTMLLinkElement;
    icon: CxIcon;
    private hasFocus;
    /**
     * The name of the icon to draw.
     */
    name?: string;
    /**
     * The variant of the icon to draw.
     */
    variant: 'outlined' | 'filled' | 'round' | 'sharp' | 'two-tone' | 'fa';
    /** The variant of the button. */
    buttonVariant: ButtonVariant;
    /**
     * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can
     * result in XSS attacks.
     */
    src?: string;
    /**
     * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
     */
    href?: string;
    /**
     * Tells the browser where to open the link. Only used when `href` is set.
     */
    target?: '_blank' | '_parent' | '_self' | '_top';
    /**
     * Tells the browser to download the linked file as this filename. Only used when `href` is set.
     */
    download?: string;
    /**
     * A description that gets read by assistive devices. For optimal accessibility, you should always include a label that
     * describes what the icon button does.
     */
    label: string;
    /**
     * Disables the button.
     */
    disabled: boolean;
    /** Draws the button in a loading state. */
    loading: boolean;
    /**
     * The class of the Font Awesome icon to draw
     */
    iconClass: string;
    /**
     * The button's size.
     */
    size: IconButtonSize;
    /**
     * Draws an outlined button.
     */
    outline: boolean;
    /**
     * Draws a circular icon button.
     */
    circle: boolean;
    private styleObserver?;
    connectedUpdatedCallback(): void;
    disconnectedCallback(): void;
    syncStyles(): void;
    private handleBlur;
    private handleFocus;
    private handleClick;
    /** Simulates a click on the icon button. */
    click(): void;
    /** Sets focus on the icon button. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the icon button. */
    blur(): void;
    render(): import('lit').TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-icon-button': CxIconButton;
    }
}
