@tylertech/forge 2.0.0

package/esm/autocomplete/autocomplete-adapter.js

@@ -0,0 +1,222 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
+import { TEXT_FIELD_CONSTANTS } from '../text-field';
+import { ListDropdown } from '../list-dropdown';
+import { CHIP_FIELD_CONSTANTS } from '../chip-field';
+import { POPUP_CONSTANTS } from '../popup';
+/**
+ * The DOM adapter for the `<forge-autocomplete>` element.
+ */
+export class AutocompleteAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this.setInputElement();
+    }
+    setInputElement() {
+        const inputElements = deepQuerySelectorAll(this._component, AUTOCOMPLETE_CONSTANTS.selectors.INPUT, false);
+        if (inputElements.length) {
+            this._inputElement = inputElements[0];
+        }
+        return this._inputElement;
+    }
+    setInputAttribute(name, value) {
+        this._inputElement.setAttribute(name, value);
+    }
+    addInputListener(type, listener) {
+        this._inputElement.addEventListener(type, listener);
+    }
+    removeInputListener(type, listener) {
+        this._inputElement.removeEventListener(type, listener);
+    }
+    intializeInputAccessibility(identifier) {
+        this._inputElement.setAttribute('autocomplete', 'off');
+        this._inputElement.setAttribute('role', 'combobox');
+        this._inputElement.setAttribute('aria-live', 'polite');
+        this._inputElement.setAttribute('aria-atomic', 'true');
+        this._inputElement.setAttribute('aria-haspopup', 'true');
+        this._inputElement.setAttribute('aria-expanded', 'false');
+        this._inputElement.setAttribute('aria-autocomplete', 'list');
+    }
+    isWrappingChipField() {
+        return !!this._component.querySelector(CHIP_FIELD_CONSTANTS.elementName);
+    }
+    show(config, popupTarget) {
+        this._targetElement = this._getTargetElement(popupTarget);
+        if (!this._targetElement) {
+            return;
+        }
+        this._listDropdown = new ListDropdown(this._targetElement, config);
+        this._listDropdown.open();
+        this._inputElement.setAttribute('aria-expanded', 'true');
+        this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
+        this._tryToggleDropdownIconRotation(true);
+    }
+    hide(listener) {
+        if (!this._listDropdown) {
+            return;
+        }
+        const { targetElement } = this._listDropdown.dropdownElement;
+        targetElement.removeEventListener(POPUP_CONSTANTS.events.BLUR, listener);
+        this.setBusyVisibility(false);
+        this._tryToggleDropdownIconRotation(false);
+        this._inputElement.removeAttribute('aria-activedescendant');
+        this._inputElement.removeAttribute('aria-controls');
+        this._inputElement.setAttribute('aria-expanded', 'false');
+        this._listDropdown.close();
+        this._listDropdown = undefined;
+    }
+    setBusyVisibility(isVisible) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.setBusyVisibility(isVisible);
+    }
+    toggleOptionMultiple(index, selected) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.toggleOptionMultiple(index, selected);
+    }
+    setDismissListener(listener) {
+        if (!this._listDropdown || !this._listDropdown.dropdownElement) {
+            return;
+        }
+        const dropdownElement = this._listDropdown.dropdownElement;
+        if (dropdownElement.targetElement) {
+            dropdownElement.targetElement.addEventListener(POPUP_CONSTANTS.events.BLUR, listener);
+        }
+    }
+    focus() {
+        window.requestAnimationFrame(() => this._inputElement.focus());
+    }
+    setOptions(options) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.setOptions(options);
+    }
+    appendOptions(options) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.appendOptions(options);
+    }
+    setSelectedText(value) {
+        this._inputElement.value = value;
+    }
+    getInputValue() {
+        return this._inputElement.value;
+    }
+    selectInputValue() {
+        window.requestAnimationFrame(() => this._inputElement.select());
+    }
+    isFocusWithinPopup(target) {
+        if (!this._listDropdown || !this._listDropdown.dropdownElement) {
+            return false;
+        }
+        return this._listDropdown.dropdownElement.contains(target);
+    }
+    hasFocus() {
+        const activeElement = getActiveElement();
+        return activeElement === this._inputElement || this.isFocusWithinPopup(activeElement);
+    }
+    hasInputElement() {
+        return !!this._inputElement;
+    }
+    setDropdownIconListener(type, listener) {
+        window.requestAnimationFrame(() => {
+            const dropdownIcon = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.DROPDOWN_ICON);
+            if (dropdownIcon) {
+                dropdownIcon.addEventListener(type, listener);
+            }
+        });
+    }
+    removeDropdownIconListener(type, listener) {
+        const dropdownIcon = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.DROPDOWN_ICON);
+        if (dropdownIcon) {
+            dropdownIcon.removeEventListener(type, listener);
+        }
+    }
+    setClearButtonListener(type, listener) {
+        window.requestAnimationFrame(() => {
+            const clearButton = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.CLEAR_BUTTON);
+            if (clearButton) {
+                clearButton.addEventListener(type, listener);
+            }
+        });
+    }
+    removeClearButtonListener(type, listener) {
+        const clearButton = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.CLEAR_BUTTON);
+        if (clearButton) {
+            clearButton.removeEventListener(type, listener);
+        }
+    }
+    propagateKey(key) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.handleKey(key);
+    }
+    updateActiveDescendant(id) {
+        if (!this._targetElement) {
+            return;
+        }
+        toggleAttribute(this._inputElement, !!id, 'aria-activedescendant', id);
+    }
+    getTargetElementWidth(selector) {
+        if (!this._targetElement) {
+            this._targetElement = this._getTargetElement(selector);
+        }
+        return this._targetElement.getBoundingClientRect().width;
+    }
+    getPopupElement() {
+        var _a, _b;
+        return (_b = (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.dropdownElement) !== null && _b !== void 0 ? _b : null;
+    }
+    activateFirstOption() {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.activateFirstOption();
+    }
+    activateOptionByIndex(value) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.activateOption(value);
+    }
+    getActiveOptionIndex() {
+        var _a, _b;
+        return (_b = (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.getActiveOptionIndex()) !== null && _b !== void 0 ? _b : null;
+    }
+    clearActiveOption() {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.clearActiveOption();
+    }
+    setSelectedOptions(options) {
+        if (this._listDropdown) {
+            const values = options.map(o => o.value);
+            this._listDropdown.setSelectedValues(values);
+        }
+    }
+    _getTargetElement(selector) {
+        return selector ? this._component.querySelector(selector) || this._getDefaultTargetElement() : this._getDefaultTargetElement();
+    }
+    _getDefaultTargetElement() {
+        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignnment
+        const textField = this._component.querySelector('forge-text-field');
+        if (textField && textField.shadowRoot) {
+            const textFieldRoot = getShadowElement(textField, TEXT_FIELD_CONSTANTS.selectors.ROOT);
+            if (textFieldRoot) {
+                return textFieldRoot;
+            }
+        }
+        // This component is often used with the chip-field, if so, let's target our popup around one if its internal elements for proper alignnment
+        const chipField = this._component.querySelector('forge-chip-field');
+        if (chipField && chipField.shadowRoot) {
+            const chipFieldRoot = getShadowElement(chipField, CHIP_FIELD_CONSTANTS.selectors.ROOT);
+            if (chipFieldRoot) {
+                return chipFieldRoot;
+            }
+        }
+        return this._component.querySelector('input') || this._component;
+    }
+    _tryToggleDropdownIconRotation(state) {
+        const dropdownIcon = this._component.querySelector(AUTOCOMPLETE_CONSTANTS.selectors.DROPDOWN_ICON);
+        if (dropdownIcon) {
+            toggleAttribute(dropdownIcon, state, AUTOCOMPLETE_CONSTANTS.attributes.DROPDOWN_ICON_OPEN);
+        }
+    }
+}

package/esm/autocomplete/autocomplete-component-delegate.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
+import { TextFieldComponentDelegate } from '../text-field';
+import { IAutocompleteComponent } from './autocomplete';
+import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
+import { ITextFieldComponentDelegateConfig } from '../text-field/text-field-component-delegate';
+export declare type AutocompleteComponentDelegateProps = Partial<IAutocompleteComponent>;
+export interface IAutocompleteComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    useDropdownIcon?: boolean;
+    textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;
+}
+export interface IAutocompleteComponentDelegateConfig extends IBaseComponentDelegateConfig<IAutocompleteComponent, IAutocompleteComponentDelegateOptions> {
+}
+export declare class AutocompleteComponentDelegate extends FormFieldComponentDelegate<IAutocompleteComponent, IAutocompleteComponentDelegateOptions> {
+    private _textFieldDelegate;
+    constructor(config?: IAutocompleteComponentDelegateConfig);
+    protected _build(): IAutocompleteComponent;
+    get textFieldDelegate(): TextFieldComponentDelegate;
+    get value(): any;
+    set value(value: any);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    onChange(listener: (value: string) => void): void;
+    onFocus(listener: (evt: FocusEvent) => void): void;
+    onBlur(listener: (evt: FocusEvent) => void): void;
+    private _attachTextField;
+    private _createDropdownIconElement;
+}

package/esm/autocomplete/autocomplete-component-delegate.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
+import { TextFieldComponentDelegate } from '../text-field';
+import { AUTOCOMPLETE_CONSTANTS } from './autocomplete-constants';
+import { IconComponentDelegate } from '../icon';
+export class AutocompleteComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        const autocomplete = document.createElement(AUTOCOMPLETE_CONSTANTS.elementName);
+        this._attachTextField(autocomplete);
+        return autocomplete;
+    }
+    get textFieldDelegate() {
+        return this._textFieldDelegate;
+    }
+    get value() {
+        return this._element.value;
+    }
+    set value(value) {
+        this._element.value = value;
+    }
+    get disabled() {
+        return this._textFieldDelegate.inputElement.disabled;
+    }
+    set disabled(value) {
+        this._textFieldDelegate.inputElement.disabled = value;
+    }
+    get invalid() {
+        return this._textFieldDelegate.invalid || false;
+    }
+    set invalid(value) {
+        this._textFieldDelegate.invalid = value;
+    }
+    onChange(listener) {
+        this._element.addEventListener(AUTOCOMPLETE_CONSTANTS.events.CHANGE, (evt) => listener(evt.detail));
+    }
+    onFocus(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('focus', (evt) => listener(evt));
+    }
+    onBlur(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('blur', (evt) => listener(evt));
+    }
+    _attachTextField(autocomplete) {
+        var _a, _b, _c, _d, _e, _f;
+        const textFieldConfig = {
+            props: Object.assign({}, (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.textFieldDelegateConfig) === null || _b === void 0 ? void 0 : _b.props),
+            options: Object.assign({}, (_d = (_c = this._config.options) === null || _c === void 0 ? void 0 : _c.textFieldDelegateConfig) === null || _d === void 0 ? void 0 : _d.options)
+        };
+        if (!textFieldConfig.options) {
+            textFieldConfig.options = {};
+        }
+        if (((_e = this._config.options) === null || _e === void 0 ? void 0 : _e.useDropdownIcon) !== false && !((_f = textFieldConfig.options) === null || _f === void 0 ? void 0 : _f.trailingElement)) {
+            textFieldConfig.options.trailingElement = this._createDropdownIconElement();
+        }
+        this._textFieldDelegate = new TextFieldComponentDelegate(textFieldConfig);
+        autocomplete.appendChild(this._textFieldDelegate.element);
+    }
+    _createDropdownIconElement() {
+        const config = {
+            props: {
+                slot: 'trailing',
+                name: 'arrow_drop_down'
+            },
+            options: {
+                attributes: { 'forge-dropdown-icon': '' }
+            }
+        };
+        return new IconComponentDelegate(config).element;
+    }
+}

package/esm/autocomplete/autocomplete-constants.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IOption } from '../select';
+import { IListItemComponent } from '../list';
+import { IListDropdownConfig } from '../list-dropdown';
+import { IPopupPosition } from '../popup';
+export declare const AUTOCOMPLETE_CONSTANTS: {
+    elementName: "forge-autocomplete";
+    attributes: {
+        MODE: string;
+        MULTIPLE: string;
+        DEBOUNCE: string;
+        FILTER_ON_FOCUS: string;
+        ALLOW_UNMATCHED: string;
+        POPUP_TARGET: string;
+        POPUP_CLASSES: string;
+        OPTION_LIMIT: string;
+        OBSERVE_SCROLL: string;
+        OBSERVE_SCROLL_THRESHOLD: string;
+        SYNC_POPUP_WIDTH: string;
+        OPEN: string;
+        MATCH_KEY: string;
+        DROPDOWN_ICON_OPEN: string;
+    };
+    selectors: {
+        INPUT: string;
+        DROPDOWN_ICON: string;
+        CLEAR_BUTTON: string;
+    };
+    numbers: {
+        DEFAULT_DEBOUNCE_TIME: number;
+        NUM_SKELETON_ITEMS: number;
+    };
+    events: {
+        CHANGE: string;
+        SELECT: string;
+        SCROLLED_BOTTOM: string;
+    };
+};
+export declare type AutocompleteOptionBuilder<T = any> = (option: IOption<T>, filterText: string, parentElement: IListItemComponent) => HTMLElement;
+export declare type AutocompleteOptionGroupBuilder<T = any> = (option: IAutocompleteOptionGroup<T>) => HTMLElement;
+export declare type AutocompleteFilterCallback<T = any> = (filterText: string, value: T | null) => Array<IOption<T>> | IAutocompleteOptionGroup[] | Promise<Array<IOption<T>> | IAutocompleteOptionGroup[]>;
+export declare type AutocompleteSelectedTextBuilder<T = any> = (selectedOptions: Array<IOption<T>>) => string;
+export declare enum AutocompleteMode {
+    Default = "default",
+    Stateless = "stateless"
+}
+export interface IAutocompleteOptionGroup<T = any> {
+    text?: string;
+    builder?: AutocompleteOptionGroupBuilder;
+    options: Array<IOption<T>>;
+}
+export interface IAutocompletePopupConfiguration {
+    filterText: string;
+    popupTarget: string;
+    dropdownConfig: IListDropdownConfig;
+    popupClasses: string[];
+    popupOffset: IPopupPosition;
+    syncPopupWidth: boolean;
+    listener: (value: string) => void;
+    scrollEndListener: () => void;
+}
+export interface IAutocompleteSelectEventData {
+    value: any;
+}

package/esm/autocomplete/autocomplete-constants.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX, KEYSTROKE_DEBOUNCE_THRESHOLD } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}autocomplete`;
+const attributes = {
+    MODE: 'mode',
+    MULTIPLE: 'multiple',
+    DEBOUNCE: 'debounce',
+    FILTER_ON_FOCUS: 'filter-on-focus',
+    ALLOW_UNMATCHED: 'allow-unmatched',
+    POPUP_TARGET: 'popup-target',
+    POPUP_CLASSES: 'popup-classes',
+    OPTION_LIMIT: 'option-limit',
+    OBSERVE_SCROLL: 'observe-scroll',
+    OBSERVE_SCROLL_THRESHOLD: 'observe-scroll-threshold',
+    SYNC_POPUP_WIDTH: 'sync-popup-width',
+    OPEN: 'open',
+    MATCH_KEY: 'match-key',
+    DROPDOWN_ICON_OPEN: 'data-forge-dropdown-icon-open'
+};
+const selectors = {
+    INPUT: 'input,textarea',
+    DROPDOWN_ICON: '[data-forge-dropdown-icon],[data-forge-dropdown-icon],[forge-dropdown-icon],.forge-dropdown-icon',
+    CLEAR_BUTTON: '[data-forge-autocomplete-clear],[forge-autocomplete-clear]'
+};
+const numbers = {
+    DEFAULT_DEBOUNCE_TIME: KEYSTROKE_DEBOUNCE_THRESHOLD,
+    NUM_SKELETON_ITEMS: 3
+};
+const events = {
+    CHANGE: `${elementName}-change`,
+    SELECT: `${elementName}-select`,
+    SCROLLED_BOTTOM: `${elementName}-scrolled-bottom`
+};
+export const AUTOCOMPLETE_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    numbers,
+    events
+};
+export var AutocompleteMode;
+(function (AutocompleteMode) {
+    AutocompleteMode["Default"] = "default";
+    AutocompleteMode["Stateless"] = "stateless";
+})(AutocompleteMode || (AutocompleteMode = {}));

package/esm/autocomplete/autocomplete-foundation.d.ts

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ListDropdownFooterBuilder, ListDropdownHeaderBuilder } from '../list-dropdown';
+import { IListDropdownAwareFoundation, ListDropdownAwareFoundation } from '../list-dropdown/list-dropdown-aware-foundation';
+import { IOption } from '../select';
+import { IAutocompleteAdapter } from './autocomplete-adapter';
+import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, IAutocompleteOptionGroup } from './autocomplete-constants';
+export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
+    mode: AutocompleteMode;
+    multiple: boolean;
+    value: string | string[] | IOption | IOption[] | null;
+    debounce: number;
+    filterOnFocus: boolean;
+    allowUnmatched: boolean;
+    popupTarget: string;
+    optionBuilder: AutocompleteOptionBuilder;
+    filter: AutocompleteFilterCallback;
+    selectedTextBuilder: AutocompleteSelectedTextBuilder;
+    isInitialized: boolean;
+    open: boolean;
+    matchKey: string | null;
+    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    beforeValueChange: (value: any) => boolean | Promise<boolean>;
+}
+/**
+ * The foundation class behind the `<forge-autocomplete>` element.
+ */
+export declare class AutocompleteFoundation extends ListDropdownAwareFoundation implements IAutocompleteFoundation {
+    private _adapter;
+    private _isInitialized;
+    private _isDropdownOpen;
+    private _mode;
+    private _multiple;
+    private _debounce;
+    private _allowUnmatched;
+    private _popupTarget;
+    private _filterOnFocus;
+    private _optionBuilder;
+    private _filter;
+    private _selectedTextBuilder;
+    private _options;
+    private _filterText;
+    private _selectedOptions;
+    private _values;
+    private _pendingFilterPromises;
+    private _identifier;
+    private _matchKey;
+    private _filterFn;
+    private _clickListener;
+    private _focusListener;
+    private _blurListener;
+    private _inputListener;
+    private _keydownListener;
+    private _dropdownIconClickListener;
+    private _dropdownIconMouseDownListener;
+    private _clearButtonListener;
+    private _dropdownScrollEndListener;
+    private _dismissListener;
+    private _activeChangeListener;
+    private _targetWidthCallback;
+    private _optionBuilderCallback;
+    private _beforeValueChange;
+    private _valueChanging;
+    constructor(_adapter: IAutocompleteAdapter);
+    initialize(): Promise<void>;
+    disconnect(): void;
+    private _attachListeners;
+    private _detachListeners;
+    private _setInputListener;
+    private _setFilterCallback;
+    private _initializeAccessibility;
+    private get _flatOptions();
+    private _onClick;
+    private _onDropdownIconMouseDown;
+    private _onDropdownIconClick;
+    private _onClear;
+    private _onDropdownScrollEnd;
+    private _onFocus;
+    private _onBlur;
+    private _applyBlur;
+    private _onInput;
+    private _debounceFilter;
+    private _onKeydown;
+    private _executeFilter;
+    private _onFilterComplete;
+    private _clearValue;
+    private _showDropdown;
+    private _dropdownReady;
+    private _closeDropdown;
+    private _sortSelectedOptions;
+    /**
+     * Handles selecting an item in the dropdown.
+     * @param {string} selectedValue The string value to select.
+     */
+    private _onSelect;
+    private _selectActiveOption;
+    private _emitChangeEvent;
+    /**
+     * Retrieves the current value(s) from the selected options array based on whether
+     * we are in multi-select mode or not.
+     */
+    private _getValue;
+    /**
+     * Creates the selected text value from the selected label values.
+     */
+    private _getSelectedText;
+    /**
+       * Handles the user dismissing the dropdown. This is only called if the blur event was triggered
+       * from within the popup element itself (in a custom template most likely).
+       * @param keepFocus Keep focus on the dropdown or not.
+       */
+    private _onDismiss;
+    private _applyValue;
+    private _updateSelectedOptions;
+    /** Gets/sets the mode state. */
+    get mode(): AutocompleteMode;
+    set mode(value: AutocompleteMode);
+    /** Gets/sets the multi-select state. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /** Gets/sets the value of the component. */
+    get value(): string | string[] | IOption | IOption[] | null;
+    set value(value: string | string[] | IOption | IOption[] | null);
+    /** Gets/sets filter on focus settings which controls whether the dropdown displays automatically when focused. */
+    get filterOnFocus(): boolean;
+    set filterOnFocus(value: boolean);
+    /** Controls whether unmatched text entered by the user will stay visible an option in the dropdown is not found. */
+    get allowUnmatched(): boolean;
+    set allowUnmatched(value: boolean);
+    /** Gets/sets the property key to match the value to an option.  */
+    get matchKey(): string | null;
+    set matchKey(value: string | null);
+    /** Gets/sets the selector that will be used to find an element to attach the popup to. Defaults to the input element. */
+    get popupTarget(): string;
+    set popupTarget(value: string);
+    /** Gets/sets the list of classes to apply to the popup element. */
+    get popupClasses(): string | string[];
+    set popupClasses(value: string | string[]);
+    /** Gets/sets the builder callback to use for the popup header. */
+    set popupHeaderBuilder(value: ListDropdownHeaderBuilder);
+    /** Gets/sets the builder callback to use for the popup footer. */
+    set popupFooterBuilder(value: ListDropdownFooterBuilder);
+    /** Gets/sets whether the popup width is synchronized with the popup target. */
+    get syncPopupWidth(): boolean;
+    set syncPopupWidth(value: boolean);
+    /** Gets/sets the maximum number of options to display in the dropdown. */
+    get optionLimit(): number;
+    set optionLimit(value: number);
+    /** Gets/sets the debounce delay (milliseconds) for keyboard events. */
+    get debounce(): number;
+    set debounce(value: number);
+    /** Sets the item builder callback that will be executed when building the option list in the dropdown. */
+    get optionBuilder(): AutocompleteOptionBuilder;
+    set optionBuilder(fn: AutocompleteOptionBuilder);
+    /** Sets the filter callback that will be executed when fetching options for the autocomplete dropdown. */
+    get filter(): AutocompleteFilterCallback;
+    set filter(cb: AutocompleteFilterCallback);
+    /** Sets the selected text builder callback that will be executed when getting the selected text. */
+    get selectedTextBuilder(): AutocompleteSelectedTextBuilder;
+    set selectedTextBuilder(fn: AutocompleteSelectedTextBuilder);
+    get observeScroll(): boolean;
+    set observeScroll(value: boolean);
+    get observeScrollThreshold(): number;
+    set observeScrollThreshold(value: number);
+    appendOptions(options: IOption[] | IAutocompleteOptionGroup[]): void;
+    get isInitialized(): boolean;
+    get open(): boolean;
+    set open(value: boolean);
+    get beforeValueChange(): (value: any) => boolean | Promise<boolean>;
+    set beforeValueChange(value: (value: any) => boolean | Promise<boolean>);
+    get popupElement(): HTMLElement | null;
+}