import * as DG from 'datagrok-api/dg';
import { Subject, Observable } from 'rxjs';
export type ItemType = {
    [_: string]: any;
};
export type ItemsGridOptions = {
    removeButtonTooltip?: string;
    addButtonTooltip?: string;
    allowRemove?: boolean;
    allowAdd?: boolean;
    horizontalInputNames?: boolean;
    newItemFunction?: () => ItemType;
    customInputs?: {
        [key: string]: (item: ItemType) => InputType;
    };
    validators?: {
        [key: string]: (value: string) => string | null;
    };
    customLabels?: {
        [key: string]: string;
    };
    inputOptions?: {
        [key: string]: HTMLElement;
    };
};
export type InputType = {
    input?: HTMLElement;
    root: HTMLElement;
    value: any;
    onChanged: Observable<any>;
    addOptions?: (el: HTMLElement) => void;
    addValidator: (validator: (value: string) => string | null) => void;
};
/** Editor for predefined properties in a grid form. Supports adding, removing and editing of props. */
export declare class ItemsGrid {
    private _root;
    private _items;
    /** Observable for when the added item is change */
    onItemChanged: Subject<{
        item: ItemType;
        fieldName: string;
    }>;
    /** Observable for when the adding item is change */
    onAddingItemChanged: Subject<{
        item: ItemType;
        fieldName: string;
    }>;
    /** Observable for when the item is added */
    onItemAdded: Subject<ItemType>;
    /** Observable for when the item is removed */
    onItemRemoved: Subject<ItemType>;
    properties: DG.Property[];
    options: ItemsGridOptions;
    /**
     * Creates an instance of ItemsGrid which is a grid form for editing properties.
     * @param {DG.Property[]}properties - properties to be edited
     * @param {ItemTypep[]}items - items to be edited
     * @param {ItemsGridOptions}options - options for the grid
     * Options include:
     * removeButtonTooltip - tooltip for the remove button - default is 'Remove item'
     * addButtonTooltip - tooltip for the add button - default is 'Add item'
     * allowRemove - whether to allow removing items - default is true
     * allowAdd - whether to allow adding items - default is true
     * horizontalInputNames - Show the input names next to intput - default is false, names are shown above the grid.
     * newItemFunction - function that returns new item - default is undefind, in which case an empty object is created.
     */
    constructor(properties: DG.Property[], items?: ItemType[], options?: ItemsGridOptions);
    get root(): HTMLDivElement;
    get items(): {
        [key: string]: any;
    }[];
    set items(value: {
        [key: string]: any;
    }[]);
    addItem(item: ItemType, notify?: boolean): void;
    removeItem(item: ItemType, notify?: boolean): void;
    removeAtIndex(index: number, notify?: boolean): void;
    removeAllItems(): void;
    render(): void;
    private addingItemInputs;
    get addingItem(): ItemType;
    private getItemDiv;
    private hideLabel;
    hasErrors(): boolean;
}
/** Usage example:
 * const props = [DG.Property.js('name2', DG.TYPE.STRING),
      DG.Property.js('name3', DG.TYPE.NUM),
      DG.Property.fromOptions({name: 'name4', type: DG.TYPE.DATE_TIME, nullable: true})];
    const itemsGrid = new ItemsGrid(props);
 * the component has a root property that can be added to the page
    ui.dialog('dialog').add(itemsGrid.root).show();
    at any point, filled fields can be accessed via itemsGrid.items
 */
//# sourceMappingURL=items-grid.d.ts.map