@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
170 lines (168 loc) • 7.6 kB
TypeScript
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;
}