import { TemplateResult } from 'lit';
import BaseElement from 'gmfapi/elements/BaseElement';
import { Configuration } from 'gmfapi/store/config';
/**
 * Interface for panel resizing:
 * Store mouse initial position, handles of the elements to move or resize
 * and their original width
 */
export interface PanelResize {
    /**
     * Mouse down event to store coordinates from
     */
    event: MouseEvent;
    /**
     * Initial mouse horizontal offset
     */
    offsetLeft: number;
    /**
     * Element separating the elements to resize
     */
    separator: HTMLElement;
    /**
     * Left element to resize
     */
    leftElement: HTMLElement;
    /**
     * Right element to resize
     */
    rightElement: HTMLElement;
    /**
     * Initial width of left element
     */
    leftWidth: number;
    /**
     * Initial width of right element
     */
    rightWidth: number;
}
/**
 * Component used for the desktop layout.
 *
 * Available slots:
 * - `header`: Header of the component.
 * - `data`: for the left panel
 * - `tool-button`: for the right panel tools button
 * - `tool-button-separate`: for the right panel tools button like the shared button
 * - `tool-panel-<name>`: for the right panels
 * - `infobar-left`: for the left components of the infobar
 * - `infobar-right`: for the right components of the infobar
 * - `infobar-footer`: for the footer of the infobar
 * - `footer-<name>`: for the footer components.
 *
 * CSS variable to configure the panel sizes:
 * - `--right-panel-width-<name>`: width of the tool panel
 * - `--footer-panel-height-<name>`: height of the footer panel
 */
export default class GmfDesktopCanvas extends BaseElement {
    private toolPanel_;
    private footerPanel_;
    private showDatapanel_;
    private showInfobar_;
    private customCSS_;
    private map_;
    private resizeObserver_;
    private mapElement_;
    private mapElementQuery_;
    private datapanelWidth_;
    private minDatapanelWidth_;
    private minToolpanelWidth_;
    private toolsPanelWidth_;
    static styles: import("lit").CSSResult[];
    connectedCallback(): void;
    disconnectedCallback(): void;
    initConfig(configuration: Configuration): void;
    toggleShowInfobar_(): void;
    toggleBackgroundSelector(): void;
    toggleShowDatapanel_(): void;
    /**
     * Panel resizing:
     * Store initial mouse position, listen to drag event and resize elements.
     * @param {PanelResize} panelResizeEvent Interface to store the details of the drag event
     * @param {HTMLElement} separator Element separating the elements to resize
     * @param {HTMLElement} leftElement Left element to resize
     * @param {HTMLElement} rightElement Right element to resize
     * @returns {void}
     */
    onMouseDown: (panelResizeEvent: PanelResize, separator: HTMLElement, leftElement: HTMLElement, rightElement: HTMLElement) => (event: MouseEvent) => void;
    /**
     * Panel resizing:
     * Compute drag offset, change element position or width accordingly.
     * @param {PanelResize} panelResizeEvent Interface to store the details of the mouse down event
     * @returns {MouseEvent} The drag event
     */
    onMouseMove: (panelResizeEvent: PanelResize) => (event: MouseEvent) => MouseEvent;
    /**
     * Resize the data (left) panel when dragging the separator
     * @param {MouseEvent} event The mouse down event
     * @param {ShadowRoot} desktopCanvas The desktop canvas
     * @returns {MouseEvent} The mouse down event
     */
    resizeDataPanel(event: MouseEvent, desktopCanvas: ShadowRoot): MouseEvent;
    /**
     * Resize the tool (right) panel when dragging the separator
     * @param {MouseEvent} event The mouse down event
     * @param {ShadowRoot} desktopCanvas The desktop canvas
     * @returns {MouseEvent} The mouse down event
     */
    resizeToolPanel(event: MouseEvent, desktopCanvas: ShadowRoot): MouseEvent;
    render(): TemplateResult;
    updated(): void;
}