97 lines
4 KiB
TypeScript
97 lines
4 KiB
TypeScript
|
import ShoelaceElement from '../../internal/shoelace-element.js';
|
||
|
|
import SlPopup from '../popup/popup.component.js';
|
||
|
|
import type { CSSResultGroup } from 'lit';
|
||
|
|
import type SlMenu from '../menu/menu.js';
|
||
|
|
/**
|
||
|
|
* @summary Dropdowns expose additional content that "drops down" in a panel.
|
||
|
|
* @documentation https://shoelace.style/components/dropdown
|
||
|
|
* @status stable
|
||
|
|
* @since 2.0
|
||
|
|
*
|
||
|
|
* @dependency sl-popup
|
||
|
|
*
|
||
|
|
* @slot - The dropdown's main content.
|
||
|
|
* @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.
|
||
|
|
*
|
||
|
|
* @event sl-show - Emitted when the dropdown opens.
|
||
|
|
* @event sl-after-show - Emitted after the dropdown opens and all animations are complete.
|
||
|
|
* @event sl-hide - Emitted when the dropdown closes.
|
||
|
|
* @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.
|
||
|
|
*
|
||
|
|
* @csspart base - The component's base wrapper.
|
||
|
|
* @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 SlDropdown extends ShoelaceElement {
|
||
|
|
static styles: CSSResultGroup;
|
||
|
|
static dependencies: {
|
||
|
|
'sl-popup': typeof SlPopup;
|
||
|
|
};
|
||
|
|
popup: SlPopup;
|
||
|
|
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.
|
||
|
|
*/
|
||
|
|
hoist: boolean;
|
||
|
|
connectedCallback(): void;
|
||
|
|
firstUpdated(): void;
|
||
|
|
disconnectedCallback(): void;
|
||
|
|
focusOnTrigger(): void;
|
||
|
|
getMenu(): SlMenu | 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-html").TemplateResult<1>;
|
||
|
|
}
|