import { EventEmitter } from '../../stencil-public-runtime';
import { DockItem } from './dock.types';
/**
 * @exampleComponent limel-example-dock-basic
 * @exampleComponent limel-example-dock-custom-component
 * @exampleComponent limel-example-dock-notification
 * @exampleComponent limel-example-dock-mobile
 * @exampleComponent limel-example-dock-expanded
 * @exampleComponent limel-example-dock-colors-css
 */
export declare class Dock {
    /**
     * Items that are placed in the dock.
     */
    dockItems: DockItem[];
    /**
     * Items that are placed at the bottom of the dock. (Or at the end in mobile
     * layout.)
     */
    dockFooterItems?: DockItem[];
    /**
     * A label used to describe the purpose of the navigation element to users
     * of assistive technologies, like screen readers. Especially useful when
     * there are multiple navigation elements in the user interface.
     * Example value: "Primary navigation"
     */
    accessibleLabel?: string;
    /**
     * Defines the width of the component, when it loads.
     * - `true`: shows both icons and labels of the Dock items.
     * - `false`: only shows icons of the doc items, and displays
     * their labels as tooltip.
     *
     * Note: when `useMobileLayout` is `true`, labels will always
     * be shown as tooltips. Read more below…
     */
    expanded?: boolean;
    /**
     * Set to `false` if you do not want to allow end-users
     * to exapnd or shrink the Dock. This will hide the
     * expand/shrink button, and the only things that defines
     * the layout will be the `expanded` property, and
     * the `mobileBreakPoint`.
     */
    allowResize?: boolean;
    /**
     * Defines the breakpoint in pixles, at which the component will be rendered
     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
     * when the screen size is smaller than `700px`, the component will automatically
     * switch to a horizontal layout.
     */
    mobileBreakPoint?: number;
    /**
     * Fired when a dock item has been selected from the dock.
     */
    itemSelected: EventEmitter<DockItem>;
    /**
     * Fired when a dock menu is opened.
     */
    menuOpen: EventEmitter<DockItem>;
    /**
     * Fired when the popover is closed.
     */
    close: EventEmitter<void>;
    /**
     * Fired when a Dock is expanded or collapsed.
     */
    private dockExpanded;
    /**
     * Is used to render the component horizontally, and place
     * the Dock items in a row.
     */
    private useMobileLayout;
    private resizeObserver;
    componentDidLoad(): void;
    disconnectedCallback(): void;
    render(): any;
    private renderSeparator;
    private renderDockItem;
    private handleResize;
    private renderExpandShrinkToggle;
    private toggleDockWidth;
}
//# sourceMappingURL=dock.d.ts.map