import { default as CxDivider } from '../../../atoms/src/components/divider/divider.ts';
import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxResizeObserver } from '../../../atoms/src/components/resize-observer/resize-observer.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { SidebarLocation } from '../../../types/src/sidebar';
import { HasSlotController } from '../../../utils/src/custom-element/slot';
import { CSSResultGroup } from 'lit';

export type CxAfterResizeEvent = CustomEvent<{
    /**
     * Side of the sidebar
     */
    side: SidebarLocation;
    /**
     * Size in pixels
     */
    size: number;
}>;
declare global {
    interface GlobalEventHandlersEventMap {
        'cx-after-resize': CxAfterResizeEvent;
    }
}
/**
 * @summary Represents a sidebar in a sidebar layout.
 *
 * @slot - The main content.
 * @slot header - The header.
 * @slot open_trigger - The label of the open trigger.
 *
 * @event cx-after-resize {{ side: 'left' | 'right', size: number }} - Emitted after the sidebar is resized.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The container that wraps the header.
 * @csspart content - The container that wraps the main content.
 */
export default class CxSidebar extends CortexElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cx-divider': typeof CxDivider;
        'cx-icon': typeof CxIcon;
        'cx-icon-button': typeof CxIconButton;
        'cx-resize-observer': typeof CxResizeObserver;
    };
    header: HTMLElement;
    /**
     * Sets the side for the component.
     */
    side: SidebarLocation;
    /**
     * Is the sidebar open?
     */
    open: boolean;
    /**
     * Whether the sidebar can be collapsed/expanded via triggers.
     * When false, sidebar stays open and triggers are hidden.
     * @default false
     */
    collapsible: boolean;
    /**
     * Whether the sidebar can be resized by dragging the divider.
     * When false, divider is visible but not interactive.
     * @default false
     */
    resizable: boolean;
    /**
     * Sets the dragging state for the component. This allows us to control the style in CSS.
     */
    private state;
    readonly hasSlotController: HasSlotController;
    handleStateChange(): void;
    handleCollapsibleChange(): void;
    constructor();
    connectedCallback(): void;
    private handleDrag;
    private handleSizeChange;
    private handleResize;
    private handleCloseTriggerClick;
    private handleOpenTriggerClick;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-sidebar': CxSidebar;
    }
}
