q2-tecton-elements 1.47.0 → 1.47.2

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,127 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+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("../../util").ResolvedMenuItem[]>;
+    orchestrateResolvedMenuItems(): void;
+    removeResolvedElements(): void;
+    resolveMenuItemElements(): Promise<HTMLQ2DropdownItemElement[]>;
+    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;
+}

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

@@ -0,0 +1,45 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { JSX } from '../../components';
+export declare class Q2DropdownItem implements ComponentInterface {
+    /** Disables interaction with the item and blocks its click event. */
+    disabled: boolean;
+    /**
+     * The text that appears within the dropdown item.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Renders an icon button in the item.
+     * Clicking on this button will change the `type` emitting on the item's click event detail to "remove".
+     */
+    removable: boolean;
+    /**
+     * Renders a line in the item instead of text.
+     * Click events from these items will not have details provided.
+     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
+     */
+    separator: boolean;
+    /** A static reference value for the item. This value is returned in the click event detail. */
+    value: string;
+    /** @deprecated */
+    ariaLabel: string;
+    hostElement: HTMLElement;
+    componentWillLoad(): void;
+    ariaLabelObserver(): void;
+    get removeLabel(): string;
+    get dropdownItemBtn(): HTMLQ2BtnElement;
+    get innerLabel(): string;
+    get removeBtn(): HTMLQ2BtnElement;
+    onHostElementFocus(): void;
+    focusItem(): void;
+    focusRemoveBtn(): void;
+    onItemClick: (event: MouseEvent) => void;
+    onItemKeydown: (event: KeyboardEvent) => void;
+    onItemFocus: (event: FocusEvent) => void;
+    onRemoveBtnClick: (event: MouseEvent) => void;
+    onRemoveBtnKeydown: (event: KeyboardEvent) => void;
+    onRemoveBtnFocus: (event: FocusEvent) => void;
+    render(): JSX.IntrinsicElements;
+    separatorDOM(): JSX.IntrinsicElements;
+    itemDOM(): JSX.IntrinsicElements;
+}

package/dist/types/components/q2-editable-field/q2-editable-field.d.ts

@@ -0,0 +1,138 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IEventDetail, Q2InputCustomEvent } from "../../components";
+import { Q2Input } from '../q2-input/q2-input';
+import { IFormatterValueObject } from '../q2-input/q2-input-types';
+export declare class Q2EditableField {
+    /** If `true`, component expands to fill the width of its parent element. */
+    block: boolean;
+    /** Disables the edit button and field. */
+    disabled: boolean;
+    /** Controls the edit state of the element. */
+    editing: boolean;
+    /**
+     * Determines the `errors` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.
+     */
+    errors: string[];
+    /**
+     * Determines the `formatModifier` applied to the `q2-input` element.
+     * @info
+     * Only applicable when `type="currency"`.
+     *
+     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.
+     */
+    formatModifier: string;
+    /** Hide's the field's `<label>` element from view. */
+    hideLabel: boolean;
+    /**
+     * Determines the `hints` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.
+     */
+    hints: string[];
+    /**
+     * The visible descriptor for the element.
+     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+     * @localizable
+     */
+    label: string;
+    /**
+     * Determines the `maxLength` applied to the `q2-input`.
+     *
+     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for more information.
+     */
+    maxlength: number;
+    /** Displays the provided label in the read state. */
+    persistentLabel: boolean;
+    /** Shortens long values with ellipses instead of splitting into multiple lines. */
+    truncated: boolean;
+    /**
+     * Determines the `type` applied to the `q2-input` element.
+     *
+     * See [q2-input](https://tecton.q2developer.com/ui/q2-input/) for all `type` values.
+     */
+    type: Q2Input['type'];
+    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */
+    value: string;
+    /** @deprecated */
+    ariaLabel: string;
+    scheduledAfterRender: (() => void)[];
+    hostElement: HTMLElement;
+    inputElement: HTMLQ2InputElement;
+    editBtnElement: HTMLQ2BtnElement;
+    cancelBtnElement: HTMLQ2BtnElement;
+    saveBtnElement: HTMLQ2BtnElement;
+    formattedValue: string;
+    innerValue: string;
+    defaultValue: string;
+    get locLabel(): string;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    errorsObserver(): void;
+    ariaLabelObserver(): void;
+    observesEditing(newValue: boolean, oldValue: boolean): void;
+    get wrapperClass(): string;
+    onHostElementChange(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    inputFormatted(event: CustomEvent<IFormatterValueObject>): void;
+    /**
+     * Emitted when the user updates the `q2-input` element in the editing state.
+     */
+    input: EventEmitter<{
+        formattedValue: string;
+        value: string;
+    }>;
+    /**
+     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.
+     *
+     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+     */
+    change: EventEmitter<{
+        editing: boolean;
+        name: 'edit' | 'cancel' | 'save';
+        value?: string;
+        formattedValue?: string;
+    }>;
+    /**
+     * Emulates clicking the edit button, which will display the `<q2-input>` field.
+     *
+     * @testOnly
+     */
+    clickEdit(): void;
+    /**
+     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+     *
+     * @testOnly
+     */
+    clickCancel(): void;
+    /**
+     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+     *
+     * @testOnly
+     */
+    clickSave(): void;
+    /**
+     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
+     *
+     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
+     * `change` event will be emitted.
+     *
+     * @testOnly
+     */
+    setValue(value: string, options?: {
+        clickSave?: boolean;
+    }): Promise<void>;
+    inputInput: (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
+    inputChange: (e: CustomEvent) => void;
+    inputKeyDown: (e: KeyboardEvent) => void;
+    inputClick: (event: MouseEvent) => void;
+    saveClick: (event?: MouseEvent) => void;
+    editClick: (event: MouseEvent) => void;
+    cancelClick: (event?: MouseEvent) => void;
+    render(): any;
+    generateEditStateDOM(): any;
+    generateReadStateDOM(): any;
+    generateEditBtn(): any;
+}

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

@@ -12,6 +12,7 @@ export declare class Q2Icon implements ComponentInterface {
     spriteUse: SVGElement;
     componentWillLoad(): void;
     componentDidRender(): void;
+    disconnectedCallback(): void;
     handleIcon(): void;
     get isCustom(): boolean;
     get spriteFileName(): any;

package/dist/types/components/q2-loading/skeleton/shapes.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from './../../../components';
 interface AtomOptions {
     width?: string;
     height?: string;

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

@@ -12,7 +12,7 @@ export declare class Q2Optgroup implements ComponentInterface {
     disconnectedCallback(): void;
     setHidden: () => void;
     get headerId(): string;
-    get options(): Element[];
+    get options(): HTMLQ2OptionElement[];
     disabledWatcher(disabled: boolean): void;
     render(): any;
 }

package/dist/types/components/q2-option-list/q2-option-list.d.ts

@@ -0,0 +1,99 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export interface IOptionValue {
+    value: string;
+    display?: string;
+}
+export declare class Q2OptionList implements ComponentInterface {
+    align: 'left' | 'right';
+    /** Indicates a custom search is being implemented for the option list. */
+    customSearch: boolean;
+    /** Disables the option list. */
+    disabled: boolean;
+    /** Determines the label that is applied to the option list for accessibility purposes. */
+    label: string;
+    /**
+     * Enables the multi-select ability for the option list.
+     * @info
+     * Only applicable when options are provided.
+     */
+    multiple: boolean;
+    /** Disables the logic that handles selecting and focusing an option in the option list. */
+    noSelect: boolean;
+    /** A list of the selected options on the element. */
+    selectedOptions: IOptionValue[];
+    /** Applies focus to the selected option. */
+    showSelected: boolean;
+    /** Translates to the role of the option list */
+    type: 'menu' | 'listbox';
+    /**
+     * Emitted when an option is selected or deselected.
+     *
+     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property
+     * will contain the selected option values.
+     */
+    change: EventEmitter<{
+        value: string;
+        values: IOptionValue[];
+    }>;
+    /**
+     * Emitted to indicate the intended state of the popover.
+     * @private
+     */
+    popoverState: EventEmitter<{
+        open: boolean;
+        action: 'close' | 'select' | 'open';
+    }>;
+    /**
+     * Emitted when the component has finished rendering.
+     * @private
+     */
+    ready: EventEmitter<undefined>;
+    hasOptions: boolean;
+    contentElement: HTMLElement;
+    activeIndex: number;
+    pivotIndex: number;
+    scheduledAfterRender: (() => void)[];
+    searchString: string;
+    searchStringTimer: number;
+    keyStore: {
+        queue: string[];
+        lastPressedAt: Date;
+    };
+    hostElement: HTMLElement;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    get allContents(): (HTMLQ2OptgroupElement | HTMLQ2OptionElement)[];
+    get allOptions(): HTMLQ2OptionElement[];
+    get allVisibleOptions(): HTMLQ2OptionElement[];
+    checkOptions(): Promise<void>;
+    getRootSlot(element: Element): Element[];
+    scrollToActiveOption(): void;
+    openDropdownWithActiveElement(activeIndex: number): Promise<void>;
+    getDefaultActiveIndex(): number;
+    updateSingleOptionAttrs(): void;
+    updateMultipleOptionAttrs(): void;
+    setActiveOption(): void;
+    setFocusedOption(): void;
+    getNextVisibleIndex(direction: any): number;
+    focusSelectedSibling(option: HTMLQ2OptionElement): void;
+    selectOption(selectedOption: HTMLQ2OptionElement): void;
+    adjustActiveOptionAndScroll(numToAdd: number): void;
+    resetTimer(): void;
+    searchAndFocus: (keyValue: string, shouldSelect: boolean) => void;
+    searchOptions(key: string, shouldSelect?: boolean): void;
+    showSelectedUpdated(showSelected: boolean): void;
+    selectedOptionsUpdated(): void;
+    delegateFocus(event: FocusEvent): void;
+    handleClick(event: MouseEvent): void;
+    setDefaultActiveElement(): Promise<void>;
+    setActiveElement(index: number): Promise<void>;
+    handleExternalKeydown(event: KeyboardEvent): Promise<void>;
+    getContents(): Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>;
+    getOptions(): Promise<HTMLQ2OptionElement[]>;
+    externalKeydownHandler: (event: KeyboardEvent) => void;
+    internalKeydownHandler: (event: KeyboardEvent) => void;
+    focusoutHandler: (event: FocusEvent) => void;
+    clickHandler: (event: Event) => void;
+    render(): any;
+}