ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
59 lines (58 loc) • 2.42 kB
TypeScript
import { RanElement } from '../../utils';
export declare enum ARROW_TYPE {
TOP = "top",
BOTTOM = "bottom",
LEFT = "left",
RIGHT = "right"
}
export declare class Dropdown extends RanElement {
dropdown: HTMLElement;
_slot: HTMLSlotElement;
_shadowDom: ShadowRoot;
arrowIcon?: HTMLElement;
container: HTMLElement;
static get observedAttributes(): string[];
constructor();
get transit(): string;
set transit(value: string);
get arrow(): string;
set arrow(value: string);
get sheet(): string;
set sheet(value: string);
handlerExternalCss: () => void;
/** The class currently mirrored onto the panel, so it can be taken off again. */
private appliedTransit;
/**
* Mirror the `transit` attribute onto the panel as a class, and nothing else.
*
* It used to add the class and set a 300ms timer to take it off — a fourth
* copy of a duration the stylesheet already owns, and one that removed
* `this.transit` as read *at that moment* rather than the class it had
* actually added. Change direction inside that window (open, close, open) and
* the timer took off the new class while the old one stayed on forever: a
* panel could sit with both `-in` and `-out` applied, playing whichever the
* stylesheet happened to order last.
*
* The class now lives exactly as long as the attribute does. Whoever sets the
* attribute decides when the animation is over — for r-select and r-popover
* that is the shared floating controller, which waits on the animation itself
* rather than on a number.
*/
handlerTransit: () => void;
/**
* The element the panel's own animations run on.
*
* The animation is applied to a class inside this shadow root, so
* `getAnimations()` on the host reports nothing — and `{ subtree: true }` does
* not cross a shadow boundary either (verified). A caller that needs to wait
* for the panel's transition asks for this rather than reaching into the
* shadow tree and depending on a class name.
*/
getAnimationTarget: () => Element;
handlerArrow: () => void;
stopPropagation: (e: Event) => void;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}
export default Dropdown;