import { type VNode, EventEmitter } from '../../stencil-public-runtime';
import type { MultiDimensionType, DimensionRows, DimensionCols, DimensionTypeCol, RowHeaders, ColumnRegular, ColumnGrouping, DataType, RowDefinition, ColumnType, FocusTemplateFunc, PositionItem, ColumnProp, ViewPortScrollEvent, InitialHeaderClick, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeRangeSaveDataDetails, Cell, ChangedRange, RangeArea, AfterEditEvent, Theme, PluginBaseComponent, PluginProviders, FocusAfterRenderEvent, ExtraNodeFuncConfig, RowDragStartDetails, AdditionalData } from "../../types/index";
import ColumnDataProvider from '../../services/column.data.provider';
import { DataProvider } from '../../services/data.provider';
import { DSourceState } from "../../store/index";
import DimensionProvider from '../../services/dimension.provider';
import ViewportProvider from '../../services/viewport.provider';
import ThemeService from '../../themeManager/theme.service';
import { type AutoSizeColumnConfig } from '../../plugins/column.auto-size.plugin';
import { DataInput } from '../../plugins/export/types';
import type { GroupingOptions } from '../../plugins/groupingRow/grouping.row.types';
import ViewportService, { FocusedData } from './viewport.service';
import GridScrollingService from './viewport.scrolling.service';
import { SelectionStoreConnector } from '../../services/selection.store.connector';
import { OrdererService } from '../order/order-renderer';
import type { Observable } from '../../utils';
import type { GridPlugin } from '../../plugins/base.plugin';
import { ColumnCollection } from '../../utils/column.utils';
import { ColumnFilterConfig, FilterCollectionItem } from '../../plugins/filter/filter.types';
import { PluginService } from './plugin.service';
import { SortingConfig, SortingOrder } from '../../plugins';
/**
 * Revogrid - High-performance, customizable grid library for managing large datasets.
 * ### Events guide
 *
 * For a comprehensive events guide, check the [Events API Page](/guide/api/events).
 * All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
 *
 * ### Type definitions
 *
 * Read [type definition file](https://github.com/revolist/revogrid/blob/master/src/interfaces.d.ts) for the full interface information.
 *
 * All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
 *
 * ### HTMLRevoGridElement
 *
 * @slot data-{column-type}-{row-type}. @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
 * @slot focus-{column-type}-{row-type}. @example focus-rgCol-rgRow - focus layer for main data. Applies extra elements in <revogr-focus />.
 * @slot viewport - Viewport slot.
 * @slot header - Header slot.
 * @slot footer - Footer slot.
*/
export declare class RevoGridComponent {
    /** Excel like functionality.
     * Show row numbers.
     * Also can be used for custom row header render if object provided.
     */
    rowHeaders: RowHeaders | boolean;
    /**
     * Defines how many rows/columns should be rendered outside visible area.
     */
    frameSize: number;
    /**
     * Indicates default rgRow size.
     * By default 0, means theme package size will be applied
     *
     * Alternatively you can use `rowSize` to reset viewport
     */
    rowSize: number;
    /** Indicates default column size. */
    colSize: number;
    /** When true, user can range selection. */
    range: boolean;
    /** When true, grid in read only mode. */
    readonly: boolean;
    /** When true, columns are resizable. */
    resize: boolean;
    /**
     * Prevents horizontal scroll state from being mirrored across viewport sections.
     */
    noHorizontalScrollTransfer: boolean;
    /** When true cell focus appear. */
    canFocus: boolean;
    /** When true enable clipboard. */
    useClipboard: boolean;
    /**
     * Columns - defines an array of grid columns.
     * Can be column or grouped column.
     */
    columns: (ColumnRegular | ColumnGrouping)[];
    /**
     * Source - defines main data source.
     * Can be an Object or 2 dimensional array([][]);
     * Keys/indexes referenced from columns Prop.
     */
    source: DataType[];
    /** Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. */
    pinnedTopSource: DataType[];
    /** Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. */
    pinnedBottomSource: DataType[];
    /** Custom row properies to be applied. See `RowDefinition` for more info. */
    rowDefinitions: RowDefinition[];
    /** Custom editors register. */
    editors: Editors;
    /**
     * Apply changes in editor when closed except 'Escape' cases.
     * If custom editor in use method getValue required.
     * Check interfaces.d.ts `EditorBase` for more info.
     */
    applyOnClose: boolean;
    /**
     * Custom grid plugins. Can be added or removed at runtime.
     * Every plugin should be inherited from BasePlugin class.
     *
     * For more details check [Plugin guide](https://rv-grid.com/guide/plugin/)
     */
    plugins: GridPlugin[];
    /**
     * Column Types Format.
     * Every type represent multiple column properties.
     * Types will be merged but can be replaced with column properties.
     * Types were made as separate objects to be reusable per multiple columns.
     */
    columnTypes: {
        [name: string]: ColumnType;
    };
    /** Theme name. */
    theme: Theme;
    /**
     * Row class property mapping.
     * Map custom classes to rows from row object data.
     * Define this property in rgRow object and this will be mapped as rgRow class.
     */
    rowClass: string;
    /**
     * Autosize config.
     * Enables columns autoSize.
     * For more details check `autoSizeColumn` plugin.
     * By default disabled, hence operation is not performance efficient.
     * `true` to enable with default params (double header separator click for autosize).
     * Or define config. See `AutoSizeColumnConfig` for more details.
     */
    autoSizeColumn: boolean | AutoSizeColumnConfig;
    /**
     * Enables filter plugin.
     * Can be boolean.
     * Or can be filter collection See `FilterCollection` for more info.
     */
    filter: boolean | ColumnFilterConfig;
    /**
     * Alternative way to set sorting.
     * `{columns: [{prop: 'name', order: 'asc'}]}`
     * Use SortingPlugin to get current sorting state
     */
    sorting?: SortingConfig;
    /**
     * Apply changes typed in editor on editor close except Escape cases.
     * If custom editor in use method `getValue` required.
     * Check `interfaces.d.ts` `EditorBase` for more info.
     */
    focusTemplate: FocusTemplateFunc;
    /**
     * Enable column move plugin.
     */
    canMoveColumns: boolean;
    /**
     * Trimmed rows.
     * Functionality which allows to hide rows from main data set.
     * `trimmedRows` are physical `rgRow` indexes to hide.
     */
    trimmedRows: Record<number, boolean>;
    /**
     * Enable export plugin.
     */
    exporting: boolean;
    /**
     * Group rows based on this property.
     * Define properties to be groped by grouping plugin See `GroupingOptions`.
     */
    grouping: GroupingOptions;
    /**
     * Stretch strategy for columns by `StretchColumn` plugin.
     * For example if there are more space on the right last column size would be increased.
     */
    stretch: boolean | string;
    /**
     * Additional data to be passed to plugins, renders or editors.
     * For example if you need to pass Vue component instance.
     */
    additionalData: AdditionalData;
    /**
     * Disable lazy rendering mode for the `X axis`.
     * Use when not many columns present and you don't need rerenader cells during scroll.
     * Can be used for initial rendering performance improvement.
     */
    disableVirtualX: boolean;
    /**
     * Disable lazy rendering mode for the `Y axis`.
     * Use when not many rows present and you don't need rerenader cells during scroll.
     * Can be used for initial rendering performance improvement.
     */
    disableVirtualY: boolean;
    /**
     * Please only hide the attribution if you are subscribed to Pro version
     */
    hideAttribution: boolean;
    /**
     * Prevent rendering until job is done.
     * Can be used for initial rendering performance improvement.
     * When several plugins require initial rendering this will prevent double initial rendering.
     */
    jobsBeforeRender: Promise<any>[];
    /**
     * Register new virtual node inside of grid.
     * Used for additional items creation such as plugin elements.
     * Should be set before grid render inside of plugins.
     * Can return VNode result of h() function or a function that returns VNode.
     * Function can be used for performance improvement and additional renders.
     */
    registerVNode: (VNode | ((c: ExtraNodeFuncConfig) => VNode))[];
    /**
     * Enable accessibility. If disabled, the grid will not be accessible.
     * @default true
     */
    accessible: boolean;
    /**
     * Enable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left.
     * @default false
     */
    rtl: boolean;
    /**
     * Disable native drag&drop plugin.
     */
    canDrag: boolean;
    /**
     * New content size has been applied. The size excludes the header.
     * Currently, the event responsible for applying the new content size does not provide the actual size.
     * To retrieve the actual content size, you can utilize the `getContentSize` function after the event has been triggered.
     */
    contentsizechanged: EventEmitter<MultiDimensionType>;
    /**
     * Before the data is edited.
     * To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`.
     * To override the edit result with your own value, set the `e.val` property to your desired value.
     */
    beforeedit: EventEmitter<BeforeSaveDataDetails>;
    /**
     * Before applying range data, specifically when a range selection occurs.
     * To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
     */
    beforerangeedit: EventEmitter<BeforeRangeSaveDataDetails>;
    /**
     * After data applied or range changed.
     */
    afteredit: EventEmitter<AfterEditEvent>;
    /**
     * Before autofill is applied.
     * To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
     */
    beforeautofill: EventEmitter<ChangedRange>;
    /**
     * Before autofill is applied. Runs before beforeautofill event.
     * Use e.preventDefault() to prevent range.
     */
    beforerange: EventEmitter<ChangedRange>;
    /**
     * After focus render finished.
     * Can be used to access a focus element through `event.target`.
     * This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
     */
    afterfocus: EventEmitter<FocusAfterRenderEvent>;
    /**
     * Before the order of `rgRow` is applied.
     * To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
     */
    roworderchanged: EventEmitter<{
        from: number;
        to: number;
    }>;
    /**
     * By `SortingPlugin`
     * <br>Triggered immediately after header click.
     * <br>First in sorting event sequence. Ff this event stops no other event called.
     * <br>Use `e.preventDefault()` to prevent sorting.
     */
    beforesorting: EventEmitter<{
        column: ColumnRegular;
        order: 'desc' | 'asc';
        additive: boolean;
    }>;
    /**
     * By `SortingPlugin`
     * <br>Same as `beforesorting` but triggered after `beforeanysource` (when source is changed).
     * <br>Use `e.preventDefault()` to prevent sorting data change.
     */
    beforesourcesortingapply: EventEmitter<{
        type: DimensionRows;
        sorting?: SortingOrder;
    }>;
    /**
     * By `SortingPlugin`
     * <br> After `beforesorting`
     * <br>Triggered after column data updated with new sorting order.
     * <br>Use `e.preventDefault()` to prevent sorting data change.
     */
    beforesortingapply: EventEmitter<{
        column: ColumnRegular;
        order: 'desc' | 'asc';
        additive: boolean;
    }>;
    /**
     * This event is triggered when the row order change is started.
     * To prevent the default behavior of changing the row order, you can call `e.preventDefault()`.
     * To change the item name at the start of the row order change, you can set `e.text` to the desired new name.
     */
    rowdragstart: EventEmitter<RowDragStartDetails>;
    /**
     * On header click.
     */
    headerclick: EventEmitter<ColumnRegular>;
    /**
     * Before the cell focus is changed.
     * To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
     */
    beforecellfocus: EventEmitter<BeforeSaveDataDetails>;
    /**
     * Before the grid focus is lost.
     * To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
     */
    beforefocuslost: EventEmitter<FocusedData | null>;
    /**
     * Before main source/rows data apply.
     * You can override data source here
     */
    beforesourceset: EventEmitter<{
        type: DimensionRows;
        source: DataType[];
    }>;
    /**
     * Before data apply on any source type. Can be source from pinned and main viewport.
     * You can override data source here
     */
    beforeanysource: EventEmitter<{
        type: DimensionRows;
        source: DataType[];
    }>;
    /**
     * After main source/rows updated
     */
    aftersourceset: EventEmitter<{
        type: DimensionRows;
        source: DataType[];
    }>;
    /**
     * Emitted after each source update, whether from the pinned or main viewport.
     * Useful for tracking all changes originating from sources in both the pinned and main viewports.
     */
    afteranysource: EventEmitter<{
        type: DimensionRows;
        source: DataType[];
    }>;
    /**
     * Emitted before user column definitions are gathered into the internal column collection.
     * Listeners can replace `detail.columns` to rewrite the raw column set before RevoGrid normalizes it.
     */
    beforecolumnsgather: EventEmitter<{
        columns: (ColumnGrouping | ColumnRegular)[];
    }>;
    /**
     * Emitted before a column update is applied.
     * Listeners can use this event to perform any necessary actions or modifications before the column update is finalized.
     */
    beforecolumnsset: EventEmitter<ColumnCollection>;
    /**
     * Emitted before a column update is applied, after the column set is gathered and the viewport is updated.
     * Useful for performing actions or modifications before the final application of the column update.
     */
    beforecolumnapplied: EventEmitter<ColumnCollection>;
    /**  Column updated */
    aftercolumnsset: EventEmitter<{
        columns: ColumnCollection;
        order: SortingOrder;
    }>;
    /**
     * Emitted before applying a filter to the data source.
     * Use e.preventDefault() to prevent cell focus change.
     * Modify if you need to change filters.
     */
    beforefilterapply: EventEmitter<{
        collection: Record<ColumnProp, FilterCollectionItem>;
    }>;
    /**
     * Emitted before applying a filter to the data source.
     * Use e.preventDefault() to prevent the default behavior of trimming values and applying the filter.
     * Modify the `collection` property if you want to change the filters.
     * Modify the `itemsToFilter` property if you want to filter the indexes for trimming.
     */
    beforefiltertrimmed: EventEmitter<{
        collection: Record<ColumnProp, FilterCollectionItem>;
        itemsToFilter: Record<number, boolean>;
    }>;
    /**
     * Emitted before trimming values.
     * Use e.preventDefault() to prevent the default behavior of trimming values.
     * Modify the `trimmed` property if you want to filter the indexes for trimming.
     */
    beforetrimmed: EventEmitter<{
        trimmed: Record<number, boolean>;
        trimmedType: string;
        type: string;
    }>;
    /**
     * Emitted after trimmed values have been applied.
     * Useful for notifying when trimming of values has taken place.
     */
    aftertrimmed: EventEmitter;
    /**
     * Emitted when the viewport is scrolled.
     * Useful for tracking viewport scrolling events.
     */
    viewportscroll: EventEmitter<ViewPortScrollEvent>;
    /**
     * Before export
     * Use e.preventDefault() to prevent export
     * Replace data in Event in case you want to modify it in export
     */
    beforeexport: EventEmitter<DataInput>;
    /**
     * Emitted before editing starts.
     * Use e.preventDefault() to prevent the default edit behavior.
     */
    beforeeditstart: EventEmitter<BeforeSaveDataDetails>;
    /**
     * Emitted after column resizing.
     * Useful for retrieving the resized columns.
     */
    aftercolumnresize: EventEmitter<{
        [index: number]: ColumnRegular;
    }>;
    /**
     * Emitted before the row definition is applied.
     * Useful for modifying or preventing the default row definition behavior.
     */
    beforerowdefinition: EventEmitter<{
        vals: any;
        oldVals: any;
    }>;
    /**
     * Emitted when the filter configuration is changed
     */
    filterconfigchanged: EventEmitter;
    /**
     * Emitted when the sorting configuration is changed
     * SortingPlugin subsribed to this event
     */
    sortingconfigchanged: EventEmitter<SortingConfig>;
    /**
     * Emmited when the row headers are changed.
     */
    rowheaderschanged: EventEmitter;
    /**
     * Emmited before the grid is rendered.
     */
    beforegridrender: EventEmitter;
    /**
     * Emmited after the grid is rendered.
     */
    aftergridrender: EventEmitter;
    /**
     * Emmited after the grid is initialized. Connected to the DOM.
     */
    aftergridinit: EventEmitter;
    /**
     * Emmited after the additional data is changed
     */
    additionaldatachanged: EventEmitter<any>;
    /**
     * Emmited after the theme is changed
     */
    afterthemechanged: EventEmitter<Theme>;
    /**
     * Emmited after grid created
     */
    created: EventEmitter;
    /**
     * Refreshes data viewport.
     * Can be specific part as rgRow or pinned rgRow or 'all' by default.
     */
    refresh(type?: DimensionRows | 'all'): Promise<void>;
    /**
     * Refreshes data at specified cell.
     * Useful for performance optimization.
     * No viewport update will be triggered.
     *
     * @example
     * const grid = document.querySelector('revo-grid');
     * grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
     */
    setDataAt({ row, col, colType, rowType, val, skipDataUpdate }: {
        row: number;
        col: number;
        val?: any;
        skipDataUpdate?: boolean;
    } & AllDimensionType): Promise<void | undefined>;
    /**
     * Scrolls viewport to specified row by index.
     */
    scrollToRow(coordinate?: number): Promise<void>;
    /**
     * Scrolls viewport to specified column by index.
     */
    scrollToColumnIndex(coordinate?: number): Promise<void>;
    /**
     * Scrolls viewport to specified column by prop
     */
    scrollToColumnProp(prop: ColumnProp, dimension?: DimensionTypeCol): Promise<void>;
    /** Update columns */
    updateColumns(cols: ColumnRegular[]): Promise<void>;
    /** Add trimmed by type */
    addTrimmed(trimmed: Record<number, boolean>, trimmedType?: string, type?: DimensionRows): Promise<CustomEvent<{
        trimmed: Record<number, boolean>;
        trimmedType: string;
        type: string;
    }>>;
    /**  Scrolls view port to coordinate */
    scrollToCoordinate(cell: Partial<Cell>): Promise<void>;
    /**  Open editor for cell. */
    setCellEdit(rgRow: number, prop: ColumnProp, rowSource?: DimensionRows): Promise<void>;
    /**  Set focus range. */
    setCellsFocus(cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string): Promise<void>;
    /**  Get data from source */
    getSource(type?: DimensionRows): Promise<DataType[]>;
    /**
     * Get data from visible part of source
     * Trimmed/filtered rows will be excluded
     * @param type - type of source
     */
    getVisibleSource(type?: DimensionRows): Promise<any[]>;
    /**
     * Provides access to rows internal store observer
     * Can be used for plugin support
     * @param type - type of source
     */
    getSourceStore(type?: DimensionRows): Promise<Observable<DSourceState<DataType, DimensionRows>>>;
    /**
     * Provides access to column internal store observer
     * Can be used for plugin support
     * @param type - type of column
     */
    getColumnStore(type?: DimensionCols): Promise<Observable<DSourceState<ColumnRegular, DimensionCols>>>;
    /**
     * Update column sorting
     * @param column - column prop and cellCompare
     * @param order - order to apply
     * @param additive - if false will replace current order
     *
     * later passed to SortingPlugin
     */
    updateColumnSorting(column: Pick<ColumnRegular, 'prop' | 'cellCompare'>, order: 'asc' | 'desc' | undefined, additive: boolean): Promise<void>;
    /**
     * Clears column sorting
     */
    clearSorting(): Promise<void>;
    /**
     * Receive all columns in data source
     */
    getColumns(): Promise<ColumnRegular[]>;
    /**
     * Clear current grid focus. Grid has no longer focus on it.
     */
    clearFocus(): Promise<void>;
    /**
     * Get all active plugins instances
     */
    getPlugins(): Promise<PluginBaseComponent[]>;
    /**
     * Get the currently focused cell.
     */
    getFocused(): Promise<FocusedData | null>;
    /**
     * Get size of content
     * Including all pinned data
     */
    getContentSize(): Promise<Cell>;
    /**
     * Get the currently selected Range.
     */
    getSelectedRange(): Promise<RangeArea & AllDimensionType | null>;
    /**
     * Refresh extra elements. Triggers re-rendering of extra elements and functions.
     * Part of extraElements and registerVNode methods.
     * Useful for plugins.
     */
    refreshExtraElements(): Promise<void>;
    /**
     * Get all providers for grid
     * Useful for external grid integration
     */
    getProviders(): Promise<PluginProviders | undefined>;
    private clickTrackForFocusClear?;
    mousedownHandle(event: MouseEvent | TouchEvent): void;
    /**
     * To keep your elements from losing focus use mouseup/touchend e.preventDefault();
     */
    mouseupHandle(event: MouseEvent | TouchEvent): Promise<void>;
    /** Drag events */
    onRowDragStarted(e: CustomEvent<HTMLRevogrOrderEditorElementEventMap['rowdragstartinit']>): void;
    onRowDragEnd(): void;
    onRowOrderChange(e: CustomEvent<HTMLRevogrOrderEditorElementEventMap['roworderchange']>): void;
    onRowDrag({ detail }: CustomEvent<PositionItem>): void;
    onRowMouseMove(e: CustomEvent<Cell>): void;
    onCellEdit(e: CustomEvent<BeforeSaveDataDetails>): Promise<void>;
    onRangeEdit(e: CustomEvent<HTMLRevogrOverlaySelectionElementEventMap['rangeeditapply']>): void;
    onRangeChanged(e: CustomEvent<HTMLRevogrOverlaySelectionElementEventMap['selectionchangeinit']>): void;
    onRowDropped(e: CustomEvent<{
        from: number;
        to: number;
    }>): void;
    onHeaderClick(e: CustomEvent<InitialHeaderClick>): void;
    onCellFocus(e: CustomEvent<BeforeSaveDataDetails>): void;
    element: HTMLRevoGridElement;
    extraElements: HTMLRevogrExtraElement['nodes'];
    /**
     * Service for rendering extra elements as virtual nodes
     * Part of extraElements and registerVNode methods
     */
    extraService?: HTMLRevogrExtraElement;
    columnProvider?: ColumnDataProvider;
    dataProvider?: DataProvider;
    dimensionProvider?: DimensionProvider;
    viewportProvider?: ViewportProvider;
    themeService: ThemeService;
    pluginService: PluginService;
    viewport: ViewportService | null;
    isInited: boolean;
    orderService: OrdererService;
    selectionStoreConnector?: SelectionStoreConnector;
    scrollingService: GridScrollingService;
    columnTypesChanged(): void;
    columnChanged(newVal?: (ColumnGrouping | ColumnRegular)[], _prevVal?: (ColumnGrouping | ColumnRegular)[] | undefined, __watchName?: string, init?: boolean): void;
    disableVirtualXChanged(newVal?: boolean, prevVal?: boolean): void;
    rowSizeChanged(s: number): void;
    themeChanged(t: Theme, _?: Theme, __?: string, init?: boolean): void;
    dataSourceChanged<T extends DataType>(newVal: T[] | undefined, _: T[] | undefined, watchName: string): void;
    disableVirtualYChanged(newVal?: boolean, prevVal?: boolean): void;
    rowDefChanged(after: RowDefinition[], before?: RowDefinition[], _watchName?: string, forceUpdate?: boolean): void;
    trimmedRowsChanged(newVal?: Record<number, boolean>): void;
    /**
     * Grouping
     */
    groupingChanged(newVal?: GroupingOptions): void;
    /**
     * Stretch Plugin Apply
     */
    applyStretch(isStretch: boolean | string): void;
    applyFilter(cfg: boolean | ColumnFilterConfig): void;
    applySorting(cfg?: SortingConfig): void;
    rowHeadersChange(rowHeaders?: RowHeaders | boolean): void;
    /**
     * Register external VNodes
     */
    registerOutsideVNodes(elements?: HTMLRevogrExtraElement['nodes']): void;
    additionalDataChanged(data: any): void;
    /**
     * Watch for RTL changes and reapply column ordering
     */
    rtlChanged(): void;
    /**
     * User can add plugins via plugins property
     */
    pluginsChanged(plugins?: GridPlugin[], prevPlugins?: GridPlugin[]): void;
    private setPlugins;
    private setCorePlugins;
    getPluginData(): PluginProviders | undefined;
    private removePlugins;
    connectedCallback(): void;
    /**
     * Called once just after the component is first connected to the DOM.
     * Since this method is only called once, it's a good place to load data asynchronously and to setup the state
     * without triggering extra re-renders.
     * A promise can be returned, that can be used to wait for the first render().
     */
    componentWillLoad(): void;
    componentWillRender(): false | Promise<any[]>;
    componentDidRender(): void;
    render(): any;
    disconnectedCallback(): void;
}
