import { PropertyValueMap } from "lit";
import { FRoot } from "../../mixins/components/f-root/f-root";
import { Picker } from "emoji-mart";
import { FDiv } from "../f-div/f-div";
import { FPopover } from "../f-popover/f-popover";
export type FEmojiPickerState = "primary" | "default" | "success" | "warning" | "danger";
export type FEmojiPickerCategories = "activity" | "flags" | "foods" | "frequent" | "nature" | "objects" | "people" | "places" | "symbols";
export type FEmojiPickerIncludesCategories = FEmojiPickerCategories[];
export type FEmojiPickerExcludesCategories = FEmojiPickerCategories[];
export type EmojiSkins = {
    src: string;
};
export type Emoji = {
    emoticons?: string[];
    id: string;
    keywords?: string[];
    name: string;
    native?: string | undefined;
    shortcodes?: string;
    unified?: string;
    skins?: EmojiSkins[];
    src?: string;
};
export type FEmojiPickerCustomEmoji = {
    id: string;
    name?: string;
    emojis: string[];
};
export type FEmojiPickerCustomEmojiData = FEmojiPickerCustomEmoji[];
export type RecentEmojis = string[];
export type ExcludeEmojis = string[];
export declare class FEmojiPicker extends FRoot {
    /**
     * css loaded from scss file
     */
    static styles: import("lit").CSSResult[];
    /**
     * @attribute Variants are various visual representations of emoji picker.
     */
    variant?: "curved" | "round" | "block";
    /**
     * @attribute Categories are various visual representations of emoji picker.
     */
    category?: "fill" | "outline" | "transparent";
    /**
     * @attribute Defines the value of f-emoji-picker
     */
    value?: string;
    /**
     * @attribute Defines the placeholder of f-emoji-picker
     */
    placeholder?: string;
    /**
     * @attribute Defines the size of f-emoji-picker. size can be two types - `medium` | `small`
     */
    size?: "medium" | "small";
    /**
     * @attribute States are used to communicate purpose and connotations.
     */
    state?: FEmojiPickerState;
    /**
     * @attribute recent decides the emojis that are frequenlt added inside emoji picker.
     */
    recent?: RecentEmojis;
    /**
     * @attribute Only load included categories.
     */
    include?: FEmojiPickerIncludesCategories;
    /**
     * @attribute remove excluded categories
     */
    exclude?: FEmojiPickerExcludesCategories;
    /**
     * @attribute List of emoji IDs that will be excluded from the picker
     */
    ["exclude-emojis"]?: ExcludeEmojis;
    /**
     * @attribute add custom emojis array
     */
    custom?: FEmojiPickerCustomEmojiData;
    /**
     * @attribute if true close picker popover on value select
     */
    ["close-on-select"]?: boolean;
    /**
     * @attribute show/remove clear icon
     */
    clear?: boolean;
    /**
     * @attribute Sets the f-emoji-picker to disabled state.
     */
    disabled?: boolean;
    /**
     * @attribute assigned elements inside slot label
     */
    _labelNodes: NodeListOf<HTMLElement>;
    /**
     * @attribute assigned elements inside slot description
     */
    _descriptionNodes: NodeListOf<HTMLElement>;
    /**
     * @attribute assigned elements inside slot help
     */
    _helpNodes: NodeListOf<HTMLElement>;
    emojiPickerHeader: FDiv;
    emojiPickerError: FDiv;
    labelSlot: HTMLElement;
    descriptionSlot: HTMLElement;
    helpSlot: HTMLElement;
    emojiPicker: FDiv;
    emojiPickerPopover: FPopover;
    picker?: Picker;
    categories: string[];
    /**
     * has label slot
     */
    get hasLabel(): boolean;
    /**
     * has description slot
     */
    get hasDescription(): boolean;
    /**
     * has help slot
     */
    get hasHelperText(): boolean;
    /**
     * icon size
     */
    get iconSize(): "small" | "x-small" | undefined;
    /**
     * exclude categories
     */
    get excludeCategories(): string[];
    /**
     * categories to be displayed for picker according to inclide amd exclude
     */
    get categroiesToDisplay(): string[];
    /**
     * header slot display
     */
    headerSectionDisplay(): void;
    /**
     * help section display
     */
    helpSectionDisplay(): void;
    /**
     * open/close picker
     * @param value boolean
     */
    toggleEmojiPicker(value: boolean): void;
    /**
     *
     * @param valuePicked emoji as value
     */
    handleSelectEmoji(valuePicked?: Emoji): void;
    /**
     * clear emoji value
     * @param e MouseEvent
     */
    clearValue(e: MouseEvent): void;
    /**
     * add recently used emojis
     */
    handleFrequentEmojiCategory(): void;
    /**
     * handle custom emoji insertion
     */
    handleCustomEmoji(): void;
    /**
     * validation for placeolder
     */
    validateProperties(): void;
    /**
     *
     * @param e mMouseEvent
     * @param element emoji-picker component
     */
    closeEmojiPicker(e: MouseEvent, element: FEmojiPicker): void;
    outsideClick: (e: MouseEvent) => void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): import("lit-html").TemplateResult<1>;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
}
/**
 * Required for typescript
 */
declare global {
    interface HTMLElementTagNameMap {
        "f-emoji-picker": FEmojiPicker;
    }
}