@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
165 lines (164 loc) • 5.8 kB
TypeScript
import type { CSSResultGroup, PropertyValues } from 'lit';
import SynDivider from '../divider/divider.component.js';
import SynIcon from '../icon/icon.component.js';
import SynergyElement from '../../internal/synergy-element.js';
/**
* @summary Flexible button / link component that can be used to quickly build navigations.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
* Takes one of 3 forms:
* - button (default),
* - link (overrides button if a 'href' is provided),
* - or accordion (overrides all other if 'children' slot is defined).
*
* @status stable
* @since 1.14.0
*
* @dependency syn-divider
* @dependency syn-icon
*
* @event syn-show - Emitted when the navigation item:
* - has children,
* - and is clicked while HTML details are hidden.
*
* @event syn-hide - Emitted when the navigation item:
* - has children,
* - and is clicked while HTML details are shown.
*
* @event syn-blur - Emitted when the button loses focus.
* @event syn-focus - Emitted when the button gains focus.
*
* @slot - The navigation item's label.
* @slot prefix - A presentational prefix icon or similar element.
* @slot suffix - A presentational suffix icon or similar element.
* @slot children - Slot used to provide nested child navigation elements.
* If provided, details and summary elements will be used.
* A chevron will be shown on the right side regardless of the chevron property.
*
* @csspart base - The component's base wrapper including children.
* @csspart children - The wrapper that holds the children
* @csspart content-wrapper - The component's content wrapper.
* @csspart content - The component's content excluding children.
* @csspart current-indicator - The indicator used when current is set to true
* @csspart chevron - The container that wraps the chevron.
* @csspart details - The details element rendered when there are children available
* @csspart divider - The components optional top divider.
* @csspart prefix - The container that wraps the prefix.
* @csspart suffix - The container that wraps the suffix.
*
* @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
* @cssproperty --indentation-stepping - The amount of pixels each level will indent.
* @cssproperty --display-children - Display property of the children. Defaults to "contents"
*/
export default class SynNavItem extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-divider': typeof SynDivider;
'syn-icon': typeof SynIcon;
};
private readonly hasSlotController;
private resizeObserver;
private mutationObserver;
/**
* The current focus state
*/
private hasFocus;
/**
* Only the prefix should be displayed
*/
private showPrefixOnly;
/**
* A nested nav-item is marked as current
*/
private currentMarkedChild;
/**
* The content area is multiline
*/
private isMultiLine;
/**
* Reference to the children slot
*/
childrenSlot: HTMLSlotElement;
/**
* Reference to the outermost button
*/
control: HTMLButtonElement | HTMLLinkElement | HTMLElement;
/**
* The navigation item's href target.
* If provided, the navigation item will use an anchor tag otherwise it will use a button tag.
*
* If the 'children' slot is provided, the navigation item will ignore the 'href' and use
* accordion behavior.
*/
href: string;
/** Tells the browser where to open the link. Only used when `href` is present. */
target: '_blank' | '_parent' | '_self' | '_top';
/**
* When using `href`, this attribute will map to the underlying link's `rel` attribute.
* Unlike regular links, the default is `noreferrer noopener` to prevent security exploits.
*
* However, if you're using `target` to point to a specific tab/window,
* this will prevent that from working correctly.
*
* You can remove or change the default value by setting the attribute
* to an empty string or a value of your choice, respectively.
*/
rel: string;
current: boolean;
/**
* Disables the navigation item.
*/
disabled: boolean;
/**
* The navigation item's orientation.
*/
horizontal: boolean;
/**
* Appends a chevron to the right side of a navigation item.
* Only used if `horizontal` is false.
*/
chevron: boolean;
/**
* Reflects HTML details element state and allows control from parent.
* Only used if `horizontal` is false and `children` is defined.
*/
open: boolean;
/**
* Toggle to true to show a divider above the element.
* Only available when horizontal is false.
*/
divider: boolean;
private isButton;
private isLink;
private isAccordion;
private getNavItemChildren;
private getAllNestedNavItems;
private handleCurrentMarkedChild;
private handleClickButton;
private handleClickSummary;
private hideDetails;
private showDetails;
/**
* Automatically add the correct level of indentation for sub items if none is provided
*/
private handleSlotChange;
private handleBlur;
private handleFocus;
private handleWidth;
handleHorizontalChange(): void;
connectedCallback(): void;
firstUpdated(_changedProperties: PropertyValues): void;
disconnectedCallback(): void;
/**
* Removes focus from the button.
*/
blur(): void;
/**
* Simulates a click on the nav-items button, link or summary.
*/
click(): void;
/**
* Sets focus on the nav-item
*/
focus(options?: FocusOptions): void;
render(): import("lit").TemplateResult;
}