@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
109 lines (108 loc) • 4.73 kB
TypeScript
/**
* ---------------------------------------------------------------------
* 🔒 AUTOGENERATED BY VENDORISM
* Removing this comment will prevent it from being managed by it.
* ---------------------------------------------------------------------
*/
import SynergyElement from '../../internal/synergy-element.js';
import SynPopup from '../popup/popup.component.js';
import type { CSSResultGroup } from 'lit';
import type SynMenu from '../menu/menu.js';
/**
* @summary Dropdowns expose additional content that "drops down" in a panel.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
* @status stable
* @since 2.0
*
* @dependency syn-popup
*
* @slot - The dropdown's main content.
* @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
*
* @event syn-show - Emitted when the dropdown opens.
* @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
* @event syn-hide - Emitted when the dropdown closes.
* @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
*
* @csspart base - The component's base wrapper, an `<syn-popup>` element.
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
* @csspart trigger - The container that wraps the trigger.
* @csspart panel - The panel that gets shown when the dropdown is open.
*
* @animation dropdown.show - The animation to use when showing the dropdown.
* @animation dropdown.hide - The animation to use when hiding the dropdown.
*/
export default class SynDropdown extends SynergyElement {
static styles: CSSResultGroup;
static dependencies: {
'syn-popup': typeof SynPopup;
};
popup: SynPopup;
trigger: HTMLSlotElement;
panel: HTMLSlotElement;
private readonly localize;
private closeWatcher;
/**
* Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
* can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
*/
open: boolean;
/**
* The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
* inside of the viewport.
*/
placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
/** Disables the dropdown so the panel will not open. */
disabled: boolean;
/**
* By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
* dropdowns that allow for multiple interactions.
*/
stayOpenOnSelect: boolean;
/**
* The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
* components that use a dropdown internally.
*/
containingElement?: HTMLElement;
/** The distance in pixels from which to offset the panel away from its trigger. */
distance: number;
/** The distance in pixels from which to offset the panel along its trigger. */
skidding: number;
/**
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
* `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
* @deprecated This property is deprecated and will be removed in the next major version.
*/
hoist: boolean;
/**
* Syncs the popup width or height to that of the trigger element.
*/
sync: 'width' | 'height' | 'both' | undefined;
connectedCallback(): void;
firstUpdated(): void;
disconnectedCallback(): void;
focusOnTrigger(): void;
getMenu(): SynMenu | undefined;
private handleKeyDown;
private handleDocumentKeyDown;
private handleDocumentMouseDown;
private handlePanelSelect;
handleTriggerClick(): void;
handleTriggerKeyDown(event: KeyboardEvent): Promise<void>;
handleTriggerKeyUp(event: KeyboardEvent): void;
handleTriggerSlotChange(): void;
updateAccessibleTrigger(): void;
/** Shows the dropdown panel. */
show(): Promise<void>;
/** Hides the dropdown panel */
hide(): Promise<void>;
/**
* Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
* is activated.
*/
reposition(): void;
addOpenListeners(): void;
removeOpenListeners(): void;
handleOpenChange(): Promise<void>;
render(): import("lit").TemplateResult<1>;
}