import { EventEmitter } from '../../stencil-public-runtime';
import { Icon } from '../../global/shared-types/icon.types';
import { Languages } from '../date-picker/date.types';
import { Link } from '../../global/shared-types/link.types';
import { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';
import { Image } from '../../global/shared-types/image.types';
import { ListSeparator } from '../list-item/list-item.types';
import { MenuItem } from '../../components';
interface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {
    /**
     * Identifier for the chip. Must be unique.
     */
    identifier?: number | string;
    /**
     * The value of the badge.
     */
    badge?: string | number;
}
/**
 * Chips and buttons are both interactive elements in UI design,
 * but they serve different purposes and are used in different contexts.
 *
 * :::warning
 * Do not use the chip component carelessly, as an alternative for
 * [`limel-button`](#/component/limel-button/) in the UI design!
 *
 * **Buttons:**
 * Buttons are used to trigger actions. They are typically used to
 * submit forms, open dialogs, initiate a process, or perform any action
 * that changes the state of the application.
 * Buttons' labels usually contain action words, in other words, the labels is
 * a _verb in imperative mood_ such as "Submit" or "Delete".
 * Buttons are placed in areas where it's clear they will initiate
 * an action when clicked.
 *
 * **Chips:**
 * Chips however are elements which may look like buttons, but they are
 * representing choices, filters, or tags, in a small block
 * or clearly bundled into a group. Chips are rarely used alone in the
 * user interface.
 * They are often used in a so called "chip-set", or placed together in
 * a section of the UI, where the user can expect more than one chip to be present.
 *
 * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
 * or an item in a shopping list.
 * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
 * or opening a page with all posts tagged with the tag represented by the chip,
 * or navigating to a page with more information about the item in the shopping list.
 * :::
 *
 * @exampleComponent limel-example-chip-button
 * @exampleComponent limel-example-chip-link
 * @exampleComponent limel-example-chip-icon-colors
 * @exampleComponent limel-example-chip-image
 * @exampleComponent limel-example-chip-badge
 * @exampleComponent limel-example-chip-filter
 * @exampleComponent limel-example-chip-removable
 * @exampleComponent limel-example-chip-menu
 * @exampleComponent limel-example-chip-loading
 * @exampleComponent limel-example-chip-progress
 * @exampleComponent limel-example-chip-size
 * @exampleComponent limel-example-chip-readonly-border
 * @exampleComponent limel-example-chip-aria-role
 */
export declare class Chip implements ChipInterface {
    /**
     * Defines the language for translations.
     * Will translate the translatable strings on the components.
     */
    language: Languages;
    /**
     * Label displayed on the chip
     */
    text: string;
    /**
     * Icon of the chip.
     */
    icon?: string | Icon;
    /**
     * A picture to be displayed instead of the icon on the chip.
     */
    image?: Image;
    /**
     * If supplied, the chip will become a clickable link.
     */
    link?: Omit<Link, 'text'>;
    /**
     * The value of the badge, displayed on the chip.
     */
    badge?: string | number;
    /**
     * Set to `true` to disable the chip.
     */
    disabled: boolean;
    /**
     * Set to `true` to render the chip as a static UI element.
     * Useful when the parent component has a `readonly` state.
     */
    readonly: boolean;
    /**
     * Set to `true` to visualize the chip in a "selected" state.
     * This is typically used when the chip is used in a chip-set
     * along with other chips.
     */
    selected: boolean;
    /**
     * Set to `true` to visualize the chip in an "invalid" or "error" state.
     */
    invalid: boolean;
    /**
     * Set to `true` to render a remove button on the chip.
     */
    removable: boolean;
    /**
     * Set to `filter` to render the chip with a distinct style
     * suitable for visualizing filters.
     *
     */
    type?: ChipType;
    /**
     * Set to `true` to put the component in the `loading` state,
     * and render an indeterminate progress indicator inside the chip.
     * This does _not_ disable the interactivity of the chip!
     */
    loading?: boolean;
    /**
     * Reflects the current value of a progress bar on the chip,
     * visualizing the percentage of an ongoing process.
     * Must be a number between `0` and `100`.
     */
    progress?: number;
    /**
     * Identifier for the chip. Must be unique.
     */
    identifier?: number | string;
    /**
     * Defines the size of the chip.
     */
    size: 'small' | 'default';
    /**
     * When provided, the chip will render an ellipsis menu with the supplied items.
     * Also, this will hide the "remove button" when `removable={true}`, as
     * the remove button will automatically become the last item in the menu.
     */
    menuItems?: Array<MenuItem | ListSeparator>;
    /**
     * Fired when clicking on the remove button of a `removable` chip.
     * The value of `identifier` is emitted as the event detail.
     */
    remove: EventEmitter<number | string>;
    /**
     * Emitted when a menu item is selected from the actions menu.
     */
    menuItemSelected: EventEmitter<MenuItem>;
    private host;
    componentWillLoad(): void;
    disconnectedCallback(): void;
    render(): any;
    private renderAsButton;
    private renderAsLink;
    private renderLabel;
    private renderPicture;
    private renderBadge;
    private renderRemoveButton;
    private renderActionsMenu;
    private getMenuItems;
    private filterClickWhenDisabled;
    private handleRemoveClick;
    private handleDeleteKeyDown;
    private removeChipLabel;
    private actionMenuLabel;
    private getTranslation;
    private renderSpinner;
    private renderProgressBar;
    private handleActionMenuSelect;
    private handleActionMenuCancel;
}
export {};
//# sourceMappingURL=chip.d.ts.map