@scania/tegel
Version:
Tegel Design System
53 lines (52 loc) • 2.47 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
export type CollapseEvent = {
collapsed: boolean;
};
type Props = {
collapsed: boolean;
};
export type InternalTdsSideMenuPropChange = {
changed: Array<keyof Props>;
} & Partial<Props>;
/**
* @slot overlay - Used of injection of tds-side-menu-overlay
* @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
* @slot <default> - <b>Unnamed slot.</b> For primary content of the side menu - like buttons.
* Used for nesting main content of Side Menu, e.g. <code><tds-side-menu-item></code> and <code><tds-side-menu-dropdown></code> components
* @slot end - Used for items that are presented at the bottom of the Side Menu, e.g. profile settings
* @slot sticky-end - Used for tds-side-menu-collapse-button component
* */
export declare class TdsSideMenu {
host: HTMLTdsSideMenuElement;
/** Applicable only for mobile. If the Side Menu is open or not. */
open: boolean;
/** Applicable only for desktop. If the Side Menu should always be shown. */
persistent: boolean;
/** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
* NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
collapsed: boolean;
isUpperSlotEmpty: boolean;
isCollapsed: boolean;
initialCollapsedState: boolean;
/** @internal Tracks the currently focused element index for keyboard navigation */
activeElementIndex: number;
private matchesLgBreakpointMq;
handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void;
handleKeyDown(event: KeyboardEvent): void;
connectedCallback(): void;
componentDidLoad(): void;
disconnectedCallback(): void;
onCollapsedChange(newVal: boolean): void;
onOpenChange(newVal: boolean): void;
private getFocusableElements;
handleFocusTrap(event: KeyboardEvent): void;
/** Event that is emitted when the Side Menu is collapsed. */
tdsCollapse: EventEmitter<CollapseEvent>;
/** @internal Broadcasts collapsed state to child components. */
internalTdsCollapse: EventEmitter<CollapseEvent>;
/** @internal Broadcasts collapsed state to child components. */
internalTdsSideMenuPropChange: EventEmitter<InternalTdsSideMenuPropChange>;
collapsedSideMenuEventHandler(event: CustomEvent<CollapseEvent>): void;
render(): any;
}
export {};