q2-tecton-elements 1.45.3 → 1.45.5

package/dist/types/components/q2-calendar/q2-calendar.d.ts

@@ -0,0 +1,324 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ISelectedMonthYear, CalendarDay, IDateValidators } from './q2-calendar-types';
+import { IMomentLikeObject } from './q2-calendar-helpers';
+import { DateList } from './q2-calendar-validation';
+import { IEventDetail } from '../q2-input/q2-input-types';
+import { Q2InputCustomEvent } from "../../components";
+export declare class Q2Calendar implements ComponentInterface {
+    /**
+     * Detects the year automatically based on today's date when the user presses the `Escape` key or the `Blur` mouse event occurs.
+     * Setting `future` or `past` as the value will increase or decrease the year by one, respectively.
+     */
+    assume: 'current' | 'future' | 'past';
+    /** A label shown at the top of the popover date picker. */
+    calendarLabel: string;
+    /** Display a button in the input field allowing the user to clear their selection. */
+    clearable: boolean;
+    /**
+     * Specifies a time of day after which a date is no longer valid.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    cutoffTime: string;
+    /**
+     * The most concise way to define valid days of the week for calendar. Each day of the week has a checksum value:
+     *
+     * - Sunday = 1
+     * - Monday = 2
+     * - Tuesday = 4
+     * - Wednesday = 8
+     * - Thursday = 16
+     * - Friday = 32
+     * - Saturday = 64
+     *
+     * Add the checksum values of your desired valid days together, and set `daysOfWeekChecksum` to that summed value.
+     *
+     * **Example:**
+     * @snippet
+     * element.daysOfWeekChecksum = 127 // All days of the week are valid
+     * element.daysOfWeekChecksum = 62; // Only weekdays are valid
+     * element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid
+     *
+     */
+    daysOfWeekChecksum: number;
+    /** Disable the input field. */
+    disabled: boolean;
+    /**
+     * Text that displays as the placeholder when the field is marked `disabled`.
+     * @localizable
+     */
+    disabledMsg: string;
+    /** Text that appears at the bottom of the popover date picker. */
+    disclaimer: string;
+    /**
+     * Determines the display format of the date field value.
+     *
+     * Must follow the [date-fns](https://date-fns.org/v2.28.0/docs/format) token specification.
+     */
+    displayFormat: string;
+    /**
+     * Defines the last selectable date in the date picker popover.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    endDate: string;
+    /**
+     * Each item in the `errors` array will appear below the input field when the field is focused and `typeable` is `true`.
+     * @localizable
+     */
+    errors: string[];
+    /** Hide the input field's ` <label> ` element from view. */
+    hideLabel: boolean;
+    /**
+     * Each item in the `hints` array will appear below the input field when the field is focused and `typeable` is true.
+     * @localizable
+     */
+    hints: string[];
+    /** Show error styles when the calendar is in an errant state. */
+    invalid: boolean;
+    /**
+     * Defines an explicit date blacklist.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     *
+     * @info
+     * When explicit date definitions like `invalidDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
+     */
+    invalidDates: string[];
+    /** The visible label for the `q2-calendar` input field. */
+    label: string;
+    /** Determine whether the popover is open or closed. */
+    open: boolean;
+    /** Appends "(optional)" to the label and sets `aria-required="false"`. */
+    optional: boolean;
+    /**
+     * Text that appears within the input field when it is blurred and empty.
+     * Placeholder text disappears when the user focuses on the field and provides input.
+     */
+    placeholder: string;
+    /** Aligns the popover date picker to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /**
+     * Force the direction of the popover date picker when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
+     */
+    popoverDirection: 'up' | 'down';
+    /**
+     * Determines the display mode of the popover.
+     *
+     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+     *
+     * @info
+     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
+     * when nested inside of elements with transform properties. This will be removed once the popover API is available
+     * for use.
+     */
+    popoverMode: 'legacy';
+    /** @deprecated */
+    popoverMinHeight: number;
+    /**
+     * The field's content is not editable, but the field remains focusable.
+     *
+     * Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
+     */
+    readonly: boolean;
+    /**
+     * Defines the first selectabe date in the date picker popover.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    startDate: string;
+    /** The user can type in the field. Only available in desktop browsers. */
+    typeable: boolean;
+    /**
+     * Defines an explicit date whitelist.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     *
+     * @info
+     * When explicit date definitions like `validDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
+     */
+    validDates: string[];
+    /**
+     * The value of the `q2-calendar` element, e.g. the selected date.
+     *
+     * **How to change or clear the value with javascript:**
+     * @snippet
+     * // change date
+     * element.value = '2022-12-21';
+     * // clear date
+     * element.value = null;
+     */
+    value: string | {
+        toDate(): Date;
+    };
+    /** @deprecated */
+    popDirection: 'up' | 'down';
+    /** @deprecated */
+    onsuccess: (e: CustomEvent) => void;
+    /** @deprecated */
+    buttonLabel: string;
+    /** @deprecated */
+    ariaLabel: string;
+    hostElement: HTMLElement;
+    keyboardSelection: boolean;
+    typedValue: string;
+    dateList: CalendarDay[];
+    hintMessage: string;
+    hintMessageType: 'info' | 'error';
+    formatModifier: string;
+    hintMessageElement: HTMLQ2MessageElement;
+    controlElement: HTMLQ2InputElement;
+    btnCalendarToggle: HTMLQ2BtnElement;
+    calendarTable: HTMLTableElement;
+    btnPrevMonth: HTMLQ2BtnElement;
+    btnNextMonth: HTMLQ2BtnElement;
+    btnPrevYear: HTMLQ2BtnElement;
+    btnNextYear: HTMLQ2BtnElement;
+    calendarBody: HTMLDivElement;
+    defaultFormatString: string;
+    selectedMonthYear: ISelectedMonthYear;
+    scheduledAfterRender: (() => void)[];
+    privatePopDirection: 'up' | 'down';
+    popoverElement?: HTMLQ2PopoverElement;
+    internalError: string;
+    valueOnBlur: string | {
+        toDate(): Date;
+    };
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    dayAbbrStrings: string[];
+    dayStrings: string[];
+    monthStrings: string[];
+    get selectedDate(): Date;
+    get innerInputField(): HTMLInputElement | HTMLButtonElement;
+    get innerInputContainer(): HTMLElement;
+    get defaultHintMessage(): string;
+    get canClear(): boolean;
+    get currentWeeks(): CalendarDay[][];
+    get formattedValue(): string;
+    get computedPlaceholder(): string;
+    get dateValue(): Date | undefined;
+    get dateValidators(): IDateValidators;
+    get isTypeable(): boolean;
+    get errorList(): any[];
+    get hintList(): string[];
+    defaultChangeHandler(event: CustomEvent): void;
+    defaultErrorHandler(event: CustomEvent): void;
+    defaultSuccessHandler(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    handleClear(): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    _togglePopover(): void;
+    /**
+     * Emulates clicking the `<input>` to display the popover if it is hidden.
+     *
+     * @testOnly
+     */
+    openPopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to hide the popover if it is visible.
+     *
+     * @testOnly
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the
+     * provided date.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @testOnly
+     */
+    setValue(value: string | Date): Promise<void>;
+    /**
+     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @warning
+     * Only applicable when the input is typeable.
+     *
+     * @testOnly
+     */
+    typeValue(value: string | Date): Promise<void>;
+    popDirectionHandler(): void;
+    ariaLabelObserver(): void;
+    typeableChanged(): void;
+    valueObserver(newValue: string | IMomentLikeObject): void;
+    daysOfWeekChecksumObserver(): void;
+    validDatesObserver(): void;
+    invalidDatesObserver(): void;
+    startDateObserver(): void;
+    endDateObserver(): void;
+    cutoffTimeObserver(): void;
+    /**
+     * Emitted when a date is selected or typed in the input field.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        value: string | null;
+    }>;
+    /**
+     * Emitted when an invalid date is entered into the field.
+     */
+    error: EventEmitter<{
+        errors: {
+            message: string;
+            errorCode: string;
+        }[];
+    }>;
+    /**
+     * Emitted when a valid date is entered or selected.
+     */
+    success: EventEmitter<{
+        value: string;
+    }>;
+    buildDateList(monthYear: ISelectedMonthYear): DateList;
+    validateDate(): void;
+    focusInput(): void;
+    closeCalendar: () => void;
+    openCalendar: () => void;
+    toggleCalendar: () => void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    onPopupKeyup: (event: KeyboardEvent) => void;
+    onInputInput: ({ detail: { value } }: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
+    onInputKeydown: (event: KeyboardEvent) => void;
+    onInputKeyup: (event: KeyboardEvent) => void;
+    onInputChange: (event: Event) => void;
+    onInputBlur: () => void;
+    onInputFocus: (event: FocusEvent) => void;
+    onInputClick: () => void;
+    onRefocus: () => void;
+    goToMonthYear: (monthIndex: number, year: number) => void;
+    checkActiveCellForBlankness(): void;
+    selectDate: (newDate: Date) => void;
+    onDateSelection: (event: MouseEvent) => void;
+    generateDateFromDay(day: number): Date;
+    onHeaderControlKeydown: (event: KeyboardEvent) => void;
+    onDateKeydown: (event: KeyboardEvent) => void;
+    activateDay(date: Date): void;
+    focusDay(date: Date): Promise<void>;
+    render(): any;
+    hintField(): any;
+    setHints({ isValid, message, messageType }: {
+        isValid: any;
+        message: any;
+        messageType: any;
+    }): Promise<void>;
+    setCompleteInput(inputDate: Date): void;
+    inputField(): any;
+    calendarPopover(): any;
+    calendarDays(): any;
+}

package/dist/types/components/q2-carousel/q2-carousel.d.ts

@@ -47,8 +47,8 @@ export declare class Q2Carousel implements ComponentInterface {
     get paginationBtns(): NodeListOf<HTMLButtonElement>;
     get activeCarouselOptions(): SwiperOptions;
     get dynamicPaginationDots(): boolean;
-    get paneCollection(): NodeListOf<Element>;
-    get paneArray(): Element[];
+    get paneCollection(): NodeListOf<HTMLQ2CarouselPaneElement>;
+    get paneArray(): HTMLQ2CarouselPaneElement[];
     get paneCount(): number;
     get insufficientPanes(): boolean;
     onHostElementChange(event: CustomEvent): void;

package/dist/types/components/q2-data-table/q2-data-table.d.ts

@@ -0,0 +1,221 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export type Q2DataTableCellAlignOptions = 'start' | 'center' | 'end';
+export type Q2DataTableCellType = {
+    type?: 'text' | 'number' | 'icon' | 'boolean' | 'code';
+} | {
+    type?: 'badge';
+    badgeStatus?: HTMLQ2BadgeElement['status'];
+    badgeTheme?: HTMLQ2BadgeElement['theme'];
+};
+export type Q2DataTableHeader = {
+    title: string;
+    align?: Q2DataTableCellAlignOptions;
+    key?: string;
+    sortable?: boolean;
+    width?: string;
+    backgroundColor?: string;
+    sorted?: 'ASC' | 'DESC';
+    ariaLabel?: string;
+    lineClamp?: number;
+    verticalAlign?: 'top' | 'bottom';
+} & Partial<Q2DataTableCellType>;
+export type Q2DataTableCell = {
+    value: string | number | boolean;
+    align?: Q2DataTableCellAlignOptions;
+    ariaLabel?: string;
+    lineClamp?: number;
+    verticalAlign?: 'top' | 'bottom';
+} & Q2DataTableCellType;
+export type Q2DataTableBaseRow = {
+    id: string | number;
+    selected?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+};
+export type Q2DataTableCells = Record<string, string | number | Q2DataTableCell>;
+export type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;
+export type Q2DataTableRow = Q2DataTableBaseRow & {
+    cells: Q2DataTableCells;
+};
+export type Q2DataTableSerializedRow = Q2DataTableBaseRow & {
+    cells: Q2DataTableSerializedCells;
+};
+export declare class Q2DataTable implements ComponentInterface {
+    /** Adds a border between each row for the table. */
+    bordered: boolean;
+    /** Adds the ability to click a row and have the table emit an event with the selected row's data. */
+    clickable: boolean;
+    /** Provides a caption for the data table. */
+    caption: string;
+    /** Determines the amount of padding for each of the cells in the table. */
+    density: 'compact' | 'normal' | 'comfortable';
+    /** Determines the `q2-icon` that will display when `rows` has no value. */
+    emptyIcon: string;
+    /** Determines the message that will display when `rows` has no value.
+     * @localizable
+     */
+    emptyMessage: string;
+    /**
+     * Defines the headers of the table.
+     *
+     * @snippet
+     * element.headers = [
+     *  {
+     *    title: 'Day of the Week',
+     *    key: 'day',
+     *  },
+     *  {
+     *    title: 'Sales',
+     *    key: 'sales',
+     *    align: 'end',
+     *  }
+     * ]
+     *
+     */
+    headers: Q2DataTableHeader[];
+    /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. */
+    hideCaption: boolean;
+    /**
+     * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.
+     *
+     * @info
+     * Use of this property requires `clickable` to be set to `true`.
+     */
+    hideClickable: boolean;
+    /** Displays a loading state on the table to indicate background activity. */
+    loading: boolean;
+    /**
+     * Defines the rows of the table.
+     *
+     * @snippet
+     * element.rows = [
+     *  {
+     *    id: 1,
+     *    cells: {
+     *      day: 'Monday',
+     *      sales: 93
+     *    }
+     *  },
+     *  {
+     *    id: 2,
+     *    cells: {
+     *      day: 'Tuesday',
+     *      sales: 127
+     *    }
+     *  },
+     *  {
+     *    id: 3,
+     *    cells: {
+     *      day: 'Wednesday',
+     *      sales: 121
+     *    }
+     * ]
+     */
+    rows: Q2DataTableRow[];
+    /** Adds a checkbox to each row of the table making it selectable. */
+    selectable: boolean;
+    /**
+     * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled.
+     * See the documentation on the `select` event for how to handle selections.
+     *
+     * @warning
+     * Use of this property requires `selectable` to be set to `true`.
+     */
+    selectMode: 'multiple' | 'single';
+    /** Adds a shadow to the table */
+    shadowed: boolean;
+    hostElement: HTMLElement;
+    serializedHeaders: Q2DataTableHeader[];
+    serializedRows: Q2DataTableSerializedRow[];
+    hasExpandableRows: boolean;
+    hasDropdowns: boolean;
+    allRowsSelected: boolean;
+    someRowsSelected: boolean;
+    hasRowData: boolean;
+    checkSlotCount: number;
+    /**
+     * Emitted when a row is selected.
+     *
+     * Requires the `selectable` prop to be set to `true`.
+     *
+     * Call `event.preventDefault()` to prevent the default selection behavior.
+     */
+    select: EventEmitter<{
+        row: Q2DataTableSerializedRow;
+        rows: Q2DataTableSerializedRow[];
+        allSelected: boolean;
+    }>;
+    /**
+     * Emitted when a row is clicked.
+     *
+     * Requires the `clickable` prop to be set to `true`.
+     *
+     * Call `event.preventDefault()` to prevent the default click behavior.
+     */
+    click: EventEmitter<{
+        row: Q2DataTableSerializedRow;
+    }>;
+    /**
+     * Emitted when an expandable row is toggled.
+     *
+     * Requires content in the `row-{id}-expandable-content` slot.
+     *
+     * Call `event.preventDefault()` to prevent the default toggling behavior.
+     */
+    toggle: EventEmitter<{
+        row: Q2DataTableSerializedRow;
+    }>;
+    /**
+     * Emitted when a column is sorted.
+     *
+     * Requires the `sortable` prop to be set to `true` on the column.
+     *
+     * Call `event.preventDefault()` to prevent the default sorting behavior.
+     */
+    sort: EventEmitter<{
+        header: Q2DataTableHeader;
+        direction: 'ASC' | 'DESC';
+    }>;
+    /**
+     * Emitted when the select-all checkbox is toggled.
+     *
+     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.
+     *
+     * Call `event.preventDefault()` to prevent the default behavior.
+     */
+    selectAllRows: EventEmitter<{
+        checked: boolean;
+    }>;
+    mutationObserver: MutationObserver;
+    resizeObserver: ResizeObserver;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    get selectedRows(): Q2DataTableSerializedRow[];
+    get selectedRow(): Q2DataTableSerializedRow;
+    get numberOfColumns(): number;
+    get mappedHeaders(): Record<string, Q2DataTableHeader>;
+    sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader): Q2DataTableSerializedRow[];
+    checkSlots: () => void;
+    headersHandler(headers?: Q2DataTableHeader[]): void;
+    rowsHandler(rows?: Q2DataTableRow[]): void;
+    selectableHandler(): void;
+    onClickListener(event: MouseEvent): void;
+    onSelectAllRows(event: CustomEvent<{
+        checked: boolean;
+    }>): void;
+    onSort: (header: Q2DataTableHeader) => void;
+    onSelectRow: (event: CustomEvent<{
+        checked: boolean;
+    }>, row: Q2DataTableSerializedRow) => void;
+    onClickTableRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
+    onClickRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
+    onToggleRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
+    onControlContainerClick: (event: MouseEvent) => void;
+    render(): any;
+    renderTableColGroup(): any;
+    renderTableHeader(): any;
+    renderEmptyState(): any;
+    renderTableRows(): any;
+    renderCellContent(cell: Q2DataTableCell): any;
+}

package/dist/types/components/q2-dropdown/q2-dropdown.d.ts

@@ -0,0 +1,130 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { IDict } from "../../util";
+export declare class Q2Dropdown implements ComponentInterface {
+    additionalContext: string;
+    /** If `true`, component expands to fill the width of its parent element. */
+    block: boolean;
+    /**
+     * Tells the outlet what the type of object being passed in as contextValue.
+     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.
+     *
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    context: string;
+    /**
+     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).
+     *
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    contextValue: string;
+    /** Indicates the menu cannot be focused or interacted with. */
+    disabled: boolean;
+    /**
+     * Hide's the field's `<label>` element from view.
+     * @warning
+     * Only use when a visible label is impractical.
+     */
+    hideLabel: boolean;
+    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */
+    icon: string;
+    /**
+     * The text that appears within the button.
+     * @warning
+     * This property should not be used if the `type` is `icon`.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    name: string;
+    /** Determine whether the popover is open or closed. */
+    open: boolean;
+    /**
+     * Force the direction of the popover dropdown when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
+     */
+    popoverDirection: 'up' | 'down';
+    /** Aligns the popover dropdown to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /**
+     * Determines the display mode of the popover.
+     *
+     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+     *
+     * @info
+     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
+     * when nested inside of elements with transform properties. This will be removed once the popover API is available
+     * for use.
+     */
+    popoverMode: 'legacy';
+    /** @deprecated */
+    popoverMinHeight: number;
+    /**
+     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
+     * @info
+     * Only applicable when using `<q2-dropdown>` for outlets.
+     */
+    resolvedType: string;
+    /** The type of button used as the menu toggle. */
+    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
+    /** @deprecated */
+    alignment: 'left' | 'right';
+    /** @deprecated */
+    popDirection: 'up' | 'down';
+    /** @deprecated */
+    ariaLabel: string;
+    hostElement: HTMLElement;
+    privatePopDirection: 'down' | 'up';
+    controlElement?: HTMLQ2BtnElement;
+    popoverElement?: HTMLQ2PopoverElement;
+    dropdownItemSelector: string;
+    resolveMenu(): Promise<import("src/util").ResolvedMenuItem[]>;
+    orchestrateResolvedMenuItems(): void;
+    removeResolvedElements(): void;
+    resolveMenuItemElements(): Promise<HTMLQ2DropdownItemElement[]>;
+    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>): void;
+    showOverpanel(overpanelPath: string, params: IDict<string>): Promise<unknown>;
+    get hasCustomButton(): boolean;
+    get determineDropdownItemCount(): number;
+    get toggleButtonProps(): {
+        icon: boolean;
+        fab: boolean;
+        intent: any;
+        active: boolean;
+        disabled: boolean;
+        ariaExpanded: boolean;
+        className: string;
+        custom: boolean;
+    };
+    popDirectionHandler(): void;
+    alignmentHandler(): void;
+    ariaLabelHandler(): void;
+    nameHandler(): void;
+    contextHandler(): void;
+    contextValueHandler(): void;
+    resolvedTypeHandler(): void;
+    additionalContextHandler(): void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    focusToggle: () => void;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    onClickElsewhere: (event: CustomEvent) => void;
+    onToggleClick: () => void;
+    onToggleKeydown: (event: KeyboardEvent) => void;
+    onDropdownMenuClick: (event: MouseEvent | CustomEvent) => Promise<void>;
+    focusFirstItem(): void;
+    focusLastItem(): void;
+    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev'): void;
+    onDropdownMenuKeydown: (event: KeyboardEvent) => void;
+    render(): any;
+}