import type { CSSResultGroup, PropertyValues } from 'lit';
import SynergyElement from '../../internal/synergy-element.js';
import SynDrawer from '../drawer/drawer.component.js';
import SynDivider from '../divider/divider.component.js';
import SynIcon from '../icon/icon.component.js';
import SynNavItem from '../nav-item/nav-item.component.js';
/**
 * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
 * It can be used to group multiple navigation items (<syn-nav-item />s) together.
 *
 * @example
 * <syn-side-nav open>
 *  <syn-nav-item >Item 1</syn-nav-item>
 *  <syn-nav-item divider>Item 2</syn-nav-item>
 * </syn-side-nav>
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
 * @status stable
 * @since 1.14.0
 *
 * @dependency syn-divider
 * @dependency syn-drawer
 * @dependency syn-icon
 * @dependency syn-nav-item
 *
 * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
 * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
 *    Please avoid having to many nav-items as it can massively influence the user experience.
 * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
 * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
 * for variant="sticky".
 *
 * @event syn-show - Emitted when the side-nav opens.
 * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
 * @event syn-hide - Emitted when the side-nav closes.
 * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
 *
 * @csspart base - The components base wrapper
 * @csspart drawer - The drawer that is used under the hood for creating the side-nav
 * @csspart content-container - The components main content container
 * @csspart content - The components main content
 * @csspart footer-container - The components footer content container
  (where the footer slot content is rendered)
 * @csspart footer-divider - The components footer divider
 * @csspart footer - The components footer content
 * @csspart overlay - The overlay that covers the screen behind the side-nav.
 * @csspart panel - The side-nav's panel (where the whole content is rendered).
 * @csspart body - The side-nav's body (where the default slot content is rendered)
 * @csspart drawer__base - The drawer's base wrapper
 * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
 * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
 * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".

 * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
 *
 * @animation sideNav.showNonRail - The animation to use when showing the side-nav
 *  in variant="default".
 * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
 *  and variant="sticky".
 * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
 *  in variant="default".
 * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
 *  and variant="sticky".
 * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
 * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
 */
export default class SynSideNav extends SynergyElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'syn-divider': typeof SynDivider;
        'syn-drawer': typeof SynDrawer;
        'syn-icon': typeof SynIcon;
        'syn-nav-item': typeof SynNavItem;
    };
    private readonly hasSlotController;
    private readonly localize;
    private timeout;
    /**
     * Current animation active state
     */
    private isAnimationActive;
    /**
     * Reference to the drawer
     */
    private drawer;
    /**
     * Indicates whether or not the side-nav is open.
     * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
     * `hide()` methods and this attribute will reflect the side-nav's open state.
     *
     * Depending on the "variant" attribute, the behavior will differ.
     *
     * __Default__:
     * With `open` will show the side-nav with an overlay.
     * Without `open`, the side-nav will be hidden.
     *
     * __Rail__:
     * With `open` will show the whole side-nav with an overlay for touch devices
     * or without an overlay for non-touch devices.
     * Without `open`, the side-nav will only show the prefix of nav-item's.
     *
     * __Sticky__:
     * With `open` will show the whole side-nav with an overlay for touch devices
     * or without an overlay for non-touch devices.
     * Without `open`, the side-nav will only show the prefix of nav-item's.
     *
     */
    open: boolean;
    /**
     * Use the rail attribute to only show the prefix of navigation items in closed state.
     * This will open on hover on the rail navigation.
     * On touch devices the navigation opens on click and shows an overlay.
     *
     * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
     * If this is not the case you should use a burger navigation.
     *
     * @deprecated Use the `variant` attribute with `rail` instead.
     * Will be removed in synergy version 3.0
     */
    rail: boolean;
    /**
     * The variant that should be used to show the side navigation.
     *
     * The following variants are supported:
     * - **default** (default): Always shows the whole content and additionally an overlay.
     * This makes especially sense for applications, where you navigate to a place and stay
     * there for a longer time.
     * - **rail**: Only show the prefix of navigation items in closed state.
     * This will open on hover on the rail navigation.
     * On touch devices the navigation opens on click and shows an overlay.
     * Note: The rail variant is only an option if all Navigation Items on the first level
     * have an Icon.
     * If this is not the case you should use a burger navigation.
     * - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
     * and full width. This variant is only possible for non-nested navigation items.
     * Note: The sticky variant is only an option if all Navigation Items on the first level
     * have an Icon and if there are only "first level" items.
     */
    variant: 'default' | 'rail' | 'sticky';
    /**
     * By default, the side-nav traps the focus if in variant="default" and open.
     * To disable the focus trapping, set this attribute.
     */
    noFocusTrapping: boolean;
    private setDelayedCallback;
    private handleMouseEnter;
    private handleMouseLeave;
    private handleRequestClose;
    private addMouseListener;
    private removeMouseListener;
    private setDrawerAnimations;
    handleVariantChange(): void;
    handleOpenChange(): void;
    handleFocusTrapping(): void;
    /** Shows the side-nav. */
    show(): Promise<void>;
    /** Hides the side-nav */
    hide(): Promise<void>;
    constructor();
    /**
     * Initial setup for first render like special variant="rail" and variant="sticky" handling
     * and drawer animations.
     * */
    firstUpdated(): void;
    disconnectedCallback(): void;
    protected willUpdate(changedProperties: PropertyValues): void;
    private toggleOpenState;
    render(): import("lit").TemplateResult;
}