| 1 | import WUPBaseElement from "./baseElement";
|
| 2 | import WUPPopupElement from "./popup/popupElement";
|
| 3 | import { Animations, HideCases, ShowCases } from "./popup/popupElement.types";
|
| 4 | declare const tagName = "wup-dropdown";
|
| 5 | declare global {
|
| 6 | namespace WUP.Dropdown {
|
| 7 | interface Defaults extends WUP.Popup.Defaults, Pick<WUP.Popup.Options, "minWidthByTarget" | "minHeightByTarget"> {
|
| 8 | /** Animation that applied to popup;
|
| 9 | * @defaultValue `Animations.drawer`
|
| 10 | * @tutorial Troubleshooting
|
| 11 | * * to change option for specific element change it for `<wup-popup/>` direclty after timeout
|
| 12 | * @example setTimeout(() => this.$refPopup.$options.animation = Animations.stack) */
|
| 13 | animation: Animations;
|
| 14 | /** Case when popup need to show;
|
| 15 | * @defaultValue `ShowCases.onClick | ShowCases.onFocus`
|
| 16 | * @tutorial Troubleshooting
|
| 17 | * * to change option for specific element change it for `<wup-popup/>` directly after timeout
|
| 18 | * @example setTimeout(() => this.$refPopup.$options.showCase = ShowCases.onFocus | ShowCases.onClick) */
|
| 19 | showCase: ShowCases;
|
| 20 | /** Hide on popup click
|
| 21 | * @defaultValue true */
|
| 22 | hideOnPopupClick: boolean;
|
| 23 | /** Placement rules relative to target;
|
| 24 | * @defaultValue `[
|
| 25 | WUPPopupElement.$placements.$bottom.$start,
|
| 26 | WUPPopupElement.$placements.$bottom.$end,
|
| 27 | WUPPopupElement.$placements.$top.$start,
|
| 28 | WUPPopupElement.$placements.$top.$end,
|
| 29 | WUPPopupElement.$placements.$bottom.$start.$resizeHeight,
|
| 30 | WUPPopupElement.$placements.$bottom.$end.$resizeHeight,
|
| 31 | WUPPopupElement.$placements.$top.$start.$resizeHeight,
|
| 32 | WUPPopupElement.$placements.$top.$end.$resizeHeight ]` */
|
| 33 | placement: Array<WUP.Popup.Place.PlaceFunc>;
|
| 34 | /** Sets minWidth 100% of targetWidth; it can't be more than css-style min-width
|
| 35 | * @defaultValue true */
|
| 36 | minWidthByTarget: boolean;
|
| 37 | /** Sets minHeight 100% of targetWidth; it can't be more than css-style min-height
|
| 38 | * @defaultValue true */
|
| 39 | minHeightByTarget: boolean;
|
| 40 | }
|
| 41 | interface Options extends Defaults {
|
| 42 | }
|
| 43 | interface Attributes {
|
| 44 | }
|
| 45 | interface JSXProps<C = WUPDropdownElement> extends WUP.Base.JSXProps<C>, Attributes {
|
| 46 | }
|
| 47 | }
|
| 48 | interface HTMLElementTagNameMap {
|
| 49 | [tagName]: WUPDropdownElement;
|
| 50 | }
|
| 51 | namespace JSX {
|
| 52 | interface IntrinsicElements {
|
| 53 | /** Dropdown element
|
| 54 | * @see {@link WUPDropdownElement} */
|
| 55 | [tagName]: WUP.Dropdown.JSXProps;
|
| 56 | }
|
| 57 | }
|
| 58 | }
|
| 59 | /** Dropdown element
|
| 60 | * @example
|
| 61 | * ```html
|
| 62 | <wup-dropdown class="custom">
|
| 63 | <button type="button">Click Me</button>
|
| 64 | <wup-popup placement="bottom-middle" animation="stack">
|
| 65 | <ul>
|
| 66 | <li><button type="button">A</button></li>
|
| 67 | <li><button type="button">B</button></li>
|
| 68 | <li><button type="button">C</button></li>
|
| 69 | </ul>
|
| 70 | </wup-popup>
|
| 71 | </wup-dropdown>
|
| 72 | * ```
|
| 73 | * @tutorial Troubleshooting
|
| 74 | * * in comparison with Combobox Dropdown doesn't contain input but can contain in popup any items (like nav-menu etc.) */
|
| 75 | export default class WUPDropdownElement<TOptions extends WUP.Dropdown.Options = WUP.Dropdown.Options> extends WUPBaseElement<TOptions> {
|
| 76 | #private;
|
| 77 | static get $style(): string;
|
| 78 | /** Default options applied to every element. Change it to configure default behavior
|
| 79 | * * @tutorial Troubleshooting
|
| 80 | * * Popup-related options are not observed so to change it use `WUPDropdownElement.$defaults` or `element.$refPopup.$options` direclty */
|
| 81 | static $defaults: WUP.Dropdown.Defaults;
|
| 82 | /** Reference to nested HTMLElement tied with $options.label */
|
| 83 | $refTitle: HTMLElement;
|
| 84 | /** Reference to popupMenu */
|
| 85 | $refPopup: WUPPopupElement<WUP.Popup.Options, WUP.Popup.EventMap>;
|
| 86 | /** Reference to list */
|
| 87 | $refMenu: HTMLElement;
|
| 88 | protected gotReady(): void;
|
| 89 | /** Custom function to override default `WUPPopupElement.prototype.goHide` */
|
| 90 | protected goShowPopup(showCase: ShowCases, ev: MouseEvent | FocusEvent | null): boolean | Promise<boolean>;
|
| 91 | /** Custom function to override default `WUPPopupElement.prototype.goHide` */
|
| 92 | protected goHidePopup(hideCase: HideCases, ev: MouseEvent | FocusEvent | KeyboardEvent | null): boolean | Promise<boolean>;
|
| 93 | }
|
| 94 | export {};
|