@emuanalytics/flow-rdf-ui 4.1.3 → 4.1.5

package/dist/index.d.mts

@@ -1925,6 +1925,216 @@ declare global {
     }
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-icon': FlowUiIcon;
+    }
+}
+
+/**
+ * @tagname flow-ui-autocomplete
+ * @summary The Autocomplete is a Text input enhanced by a panel of suggested options.
+ *
+ * @dependency flow-ui-popup
+ * @dependency flow-ui-icon
+ *
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event flow-ui-input - Emitted when the display value changes.
+ * @event flow-ui-change - Emitted when the input value changes.
+ * @event flow-ui-focus - Emitted when the input is focused.
+ * @event flow-ui-blur - Emitted when the input is blurred.
+ * @event flow-ui-show - Emitted when the dropdown is shown.
+ * @event flow-ui-after-show - Emitted when the dropdown is shown.
+ * @event flow-ui-hide - Emitted when the dropdown is hidden.
+ * @event flow-ui-after-hide - Emitted when the dropdown is hidden.
+ * @event flow-ui-invalid - Emitted when the input is invalid.
+ * @event flow-ui-valid - Emitted when the input is valid.
+ * @event flow-ui-validate - Emitted when the input is validated.
+ * @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
+ * @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
+ * @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart clear-button - The clear button.
+ */
+declare class FlowUiAutocomplete extends FlowRdfFormControl {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'flow-ui-popup': typeof FlowUiPopup;
+        'flow-ui-icon': typeof FlowUiIcon;
+    };
+    private readonly hasSlotController;
+    private readonly localize;
+    /** @internal Last time when the mousedown event was fired */
+    private mouseDownAt;
+    private debouncedInput;
+    private pendingChangeEvent;
+    private pendingInputEvent;
+    private hasOptions;
+    private readonly formControlController;
+    /** The autocomplete's size */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a filled autocomplete input */
+    filled: boolean;
+    /** Draws a pill-style autocomplete input with rounded edges */
+    pill: boolean;
+    /** The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead */
+    label: string;
+    /** The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead */
+    helpText: string;
+    /** The autocomplete input's placeholder text */
+    placeholder: string;
+    /** Disables the autocomplete */
+    disabled: boolean;
+    /**
+     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+     * value of this attribute must be an id of a form in the same document or shadow root as the button.
+     */
+    form: string;
+    /** Makes the autocomplete a required field */
+    required: boolean;
+    /** Display the autocomplete in the 'inline' form control style */
+    inline: boolean;
+    /** Indicates that the control should display a divider */
+    divider: boolean;
+    /**
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    /**
+     * The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
+     */
+    placement: 'top' | 'bottom';
+    /** Current value of the control, selected from one of the valid options available */
+    value: string;
+    /**
+     * Function for determining the `displayValue` for a given `value`.
+     * By default, it will show the `value` itself.
+     */
+    displayWith: ((value: string) => string) | ((value: string) => Promise<string>);
+    /** Debounce delay */
+    debounceDelay: number;
+    /** Show the option to clear input */
+    clearable: boolean;
+    /** Current value displayed by the control; this can be what the user is typing or the label of the selected option */
+    private inputText;
+    /** @internal Is the listbox open or not */
+    private open;
+    private selectedOption;
+    private currentOption;
+    /** @internal Is the component in focus or not */
+    hasFocus: boolean;
+    private input;
+    private popup;
+    connectedCallback(): void;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Gets the validity state object.*/
+    get validity(): ValidityState;
+    /** Gets the validation message. */
+    get validationMessage(): string;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(_: string): void;
+    /** @internal Gets an array of all <flow-ui-option> elements */
+    private getAllOptions;
+    /** @internal Gets the first <flow-ui-option> element */
+    private getFirstOption;
+    /**
+     * @internal
+     * Un-highlights currently highlighted option
+     * and highlights the given option
+     */
+    private setCurrentOption;
+    /**
+     * @internal
+     * Unselects currently selected option
+     * and selects the given option
+     */
+    private setSelectedOption;
+    /**
+     * @internal
+     * Sets the value of the control.
+     * Should trigger {@link handleValueChange} when value is set.
+     * By default, it will emit a `flow-ui-change` event.
+     *
+     * @param value - The value to set.
+     * @param emitChangeEvent - A change event will be emitted if true.
+     */
+    private setValue;
+    /** @internal Updates the debounced input emitter if `{@link debounceDelay} is changed. */
+    updateDebounceDelay(): void;
+    /** @internal Handle the `flow-ui-input` event from the input box. */
+    private handleInput;
+    /** @internal Handle the `flow-ui-change` event from the input box */
+    private handleInputChange;
+    /** @internal Handle `flow-ui-focus` event from the input box. */
+    private handleInputFocus;
+    /** @internal Handle `flow-ui-focus` event from the input box. */
+    private handleInputBlur;
+    handleClearClick(event: MouseEvent): void;
+    /** @internal Handle the `mousedown` event from the clear button */
+    handleClearMouseDown(event: MouseEvent): void;
+    /** @internal Handle option selection when an option is clicked on */
+    private handleListboxClick;
+    /** @internal Handle mouse and keyboard events in the document, outside the control. */
+    private handleDocumentEvent;
+    /** @internal */
+    private handleKeyDown;
+    /** @internal Add event listeners to the document when the dropdown is opened. */
+    private addListenersForDropdown;
+    /** @internal Remove event listeners from the document when the dropdown is closed. */
+    private removeListenersForDropdown;
+    /** @internal Handles changes in the default slot */
+    private handleDefaultSlotChange;
+    /** @internal Toggles listbox based on focus and options in the default slot. */
+    toggleListbox(): void;
+    /**
+     * @internal
+     * Syncs the {@link displayValue} by applying {@link displayWith} based on the current {@link value}.
+     */
+    private syncDisplayValue;
+    /** @internal */
+    handleValueChange(oldValue: string, value: string): Promise<void>;
+    /** Focuses on the control */
+    focus(): void;
+    /** Blurs from the control. */
+    blur(): void;
+    /** Shows the listbox. */
+    show(): Promise<void>;
+    /** Hides the listbox. */
+    hide(): Promise<void>;
+    /** Gets the current value of the text input */
+    getInputText(): string;
+    /** @internal */
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-autocomplete': FlowUiAutocomplete;
+    }
+}
+
 /**
  * @tagname flow-ui-avatar
  * @summary Avatars are used to represent a person or object.
@@ -4411,12 +4621,6 @@ declare global {
     }
 }
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'flow-ui-icon': FlowUiIcon;
-    }
-}
-
 /**
  * @tagname flow-ui-list-item
  * @summary A list item.
@@ -6488,4 +6692,4 @@ declare global {
     }
 }
 
-export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };
+export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAutocomplete, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };

package/dist/index.d.ts

@@ -1925,6 +1925,216 @@ declare global {
     }
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-icon': FlowUiIcon;
+    }
+}
+
+/**
+ * @tagname flow-ui-autocomplete
+ * @summary The Autocomplete is a Text input enhanced by a panel of suggested options.
+ *
+ * @dependency flow-ui-popup
+ * @dependency flow-ui-icon
+ *
+ * @slot - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event flow-ui-input - Emitted when the display value changes.
+ * @event flow-ui-change - Emitted when the input value changes.
+ * @event flow-ui-focus - Emitted when the input is focused.
+ * @event flow-ui-blur - Emitted when the input is blurred.
+ * @event flow-ui-show - Emitted when the dropdown is shown.
+ * @event flow-ui-after-show - Emitted when the dropdown is shown.
+ * @event flow-ui-hide - Emitted when the dropdown is hidden.
+ * @event flow-ui-after-hide - Emitted when the dropdown is hidden.
+ * @event flow-ui-invalid - Emitted when the input is invalid.
+ * @event flow-ui-valid - Emitted when the input is valid.
+ * @event flow-ui-validate - Emitted when the input is validated.
+ * @event flow-ui-validate-complete - Emitted when the input is validated and the validity state is updated.
+ * @event flow-ui-validate-error - Emitted when the input is validated and an error occurs.
+ * @event flow-ui-validate-success - Emitted when the input is validated and no errors occur.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The select's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
+ * @csspart listbox - The listbox container where options are slotted.
+ * @csspart clear-button - The clear button.
+ */
+declare class FlowUiAutocomplete extends FlowRdfFormControl {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'flow-ui-popup': typeof FlowUiPopup;
+        'flow-ui-icon': typeof FlowUiIcon;
+    };
+    private readonly hasSlotController;
+    private readonly localize;
+    /** @internal Last time when the mousedown event was fired */
+    private mouseDownAt;
+    private debouncedInput;
+    private pendingChangeEvent;
+    private pendingInputEvent;
+    private hasOptions;
+    private readonly formControlController;
+    /** The autocomplete's size */
+    size: 'small' | 'medium' | 'large';
+    /** Draws a filled autocomplete input */
+    filled: boolean;
+    /** Draws a pill-style autocomplete input with rounded edges */
+    pill: boolean;
+    /** The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead */
+    label: string;
+    /** The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead */
+    helpText: string;
+    /** The autocomplete input's placeholder text */
+    placeholder: string;
+    /** Disables the autocomplete */
+    disabled: boolean;
+    /**
+     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+     * value of this attribute must be an id of a form in the same document or shadow root as the button.
+     */
+    form: string;
+    /** Makes the autocomplete a required field */
+    required: boolean;
+    /** Display the autocomplete in the 'inline' form control style */
+    inline: boolean;
+    /** Indicates that the control should display a divider */
+    divider: boolean;
+    /**
+     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    /**
+     * The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox
+     * inside of the viewport.
+     */
+    placement: 'top' | 'bottom';
+    /** Current value of the control, selected from one of the valid options available */
+    value: string;
+    /**
+     * Function for determining the `displayValue` for a given `value`.
+     * By default, it will show the `value` itself.
+     */
+    displayWith: ((value: string) => string) | ((value: string) => Promise<string>);
+    /** Debounce delay */
+    debounceDelay: number;
+    /** Show the option to clear input */
+    clearable: boolean;
+    /** Current value displayed by the control; this can be what the user is typing or the label of the selected option */
+    private inputText;
+    /** @internal Is the listbox open or not */
+    private open;
+    private selectedOption;
+    private currentOption;
+    /** @internal Is the component in focus or not */
+    hasFocus: boolean;
+    private input;
+    private popup;
+    connectedCallback(): void;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Gets the validity state object.*/
+    get validity(): ValidityState;
+    /** Gets the validation message. */
+    get validationMessage(): string;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(_: string): void;
+    /** @internal Gets an array of all <flow-ui-option> elements */
+    private getAllOptions;
+    /** @internal Gets the first <flow-ui-option> element */
+    private getFirstOption;
+    /**
+     * @internal
+     * Un-highlights currently highlighted option
+     * and highlights the given option
+     */
+    private setCurrentOption;
+    /**
+     * @internal
+     * Unselects currently selected option
+     * and selects the given option
+     */
+    private setSelectedOption;
+    /**
+     * @internal
+     * Sets the value of the control.
+     * Should trigger {@link handleValueChange} when value is set.
+     * By default, it will emit a `flow-ui-change` event.
+     *
+     * @param value - The value to set.
+     * @param emitChangeEvent - A change event will be emitted if true.
+     */
+    private setValue;
+    /** @internal Updates the debounced input emitter if `{@link debounceDelay} is changed. */
+    updateDebounceDelay(): void;
+    /** @internal Handle the `flow-ui-input` event from the input box. */
+    private handleInput;
+    /** @internal Handle the `flow-ui-change` event from the input box */
+    private handleInputChange;
+    /** @internal Handle `flow-ui-focus` event from the input box. */
+    private handleInputFocus;
+    /** @internal Handle `flow-ui-focus` event from the input box. */
+    private handleInputBlur;
+    handleClearClick(event: MouseEvent): void;
+    /** @internal Handle the `mousedown` event from the clear button */
+    handleClearMouseDown(event: MouseEvent): void;
+    /** @internal Handle option selection when an option is clicked on */
+    private handleListboxClick;
+    /** @internal Handle mouse and keyboard events in the document, outside the control. */
+    private handleDocumentEvent;
+    /** @internal */
+    private handleKeyDown;
+    /** @internal Add event listeners to the document when the dropdown is opened. */
+    private addListenersForDropdown;
+    /** @internal Remove event listeners from the document when the dropdown is closed. */
+    private removeListenersForDropdown;
+    /** @internal Handles changes in the default slot */
+    private handleDefaultSlotChange;
+    /** @internal Toggles listbox based on focus and options in the default slot. */
+    toggleListbox(): void;
+    /**
+     * @internal
+     * Syncs the {@link displayValue} by applying {@link displayWith} based on the current {@link value}.
+     */
+    private syncDisplayValue;
+    /** @internal */
+    handleValueChange(oldValue: string, value: string): Promise<void>;
+    /** Focuses on the control */
+    focus(): void;
+    /** Blurs from the control. */
+    blur(): void;
+    /** Shows the listbox. */
+    show(): Promise<void>;
+    /** Hides the listbox. */
+    hide(): Promise<void>;
+    /** Gets the current value of the text input */
+    getInputText(): string;
+    /** @internal */
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'flow-ui-autocomplete': FlowUiAutocomplete;
+    }
+}
+
 /**
  * @tagname flow-ui-avatar
  * @summary Avatars are used to represent a person or object.
@@ -4411,12 +4621,6 @@ declare global {
     }
 }
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'flow-ui-icon': FlowUiIcon;
-    }
-}
-
 /**
  * @tagname flow-ui-list-item
  * @summary A list item.
@@ -6488,4 +6692,4 @@ declare global {
     }
 }
 
-export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };
+export { type BaseColorMapperField, type BaseColorStopOptions, type ColorMapperField, type ColorMapperOptions, type ColorMapperValue, type ColorStopOptions, type ColorStopValue, type FlowQueryBuilderConfig, type FlowQueryBuilderConverter, type FlowQueryBuilderConverterOptions, type FlowQueryBuilderDateField, type FlowQueryBuilderDateTimeField, type FlowQueryBuilderDateTimeFieldBase, type FlowQueryBuilderField, type FlowQueryBuilderFieldBase, type FlowQueryBuilderFieldDefinition, type FlowQueryBuilderFieldMap, type FlowQueryBuilderFieldType, type FlowQueryBuilderFieldTypeMap, type FlowQueryBuilderNumberField, type FlowQueryBuilderOption, type FlowQueryBuilderRule, type FlowQueryBuilderRuleSet, type FlowQueryBuilderSelectField, type FlowQueryBuilderStringField, type FlowQueryBuilderTemplateFn, type FlowQueryBuilderTimeField, type FlowAfterCollapseEvent as FlowUiAfterCollapseEvent, type FlowAfterExpandEvent as FlowUiAfterExpandEvent, type FlowAfterHideEvent as FlowUiAfterHideEvent, type FlowAfterShowEvent as FlowUiAfterShowEvent, FlowUiAlert, FlowUiAnimation, type FlowApplyEvent as FlowUiApplyEvent, FlowUiAutocomplete, FlowUiAvatar, FlowUiBadge, FlowUiBaseControl, type FlowBlurEvent as FlowUiBlurEvent, FlowUiBreadcrumb, FlowUiBreadcrumbItem, FlowUiBusyOverlay, FlowUiButton, FlowUiButtonGroup, FlowUiCalendar, type FlowCancelEvent as FlowUiCancelEvent, FlowUiCard, FlowUiCarousel, FlowUiCarouselItem, type FlowChangeEvent as FlowUiChangeEvent, FlowUiChart, FlowUiCheckbox, FlowUiCheckboxGroup, type FlowClearEvent as FlowUiClearEvent, type FlowCloseEvent as FlowUiCloseEvent, type FlowCollapseEvent as FlowUiCollapseEvent, type FlowCollapseTreeEvent as FlowUiCollapseSplitViewEvent, FlowUiColorMapper, FlowUiColorPicker, FlowUiColorStop, FlowUiDateTimePicker, FlowUiDetails, FlowUiDialog, FlowUiDivider, type FlowDragDropEvent as FlowUiDragDrop, type FlowDragEndEvent as FlowUiDragEndEvent, type FlowDragEvent as FlowUiDragEvent, type FlowDragOverEvent as FlowUiDragOverEvent, type FlowDragStartEvent as FlowUiDragStartEvent, FlowUiDrawer, FlowUiDropdown, type FlowErrorEvent as FlowUiErrorEvent, type FlowExpandEvent as FlowUiExpandEvent, type FlowExpandTreeEvent as FlowUiExpandSplitViewEvent, type FlowFinishEvent as FlowUiFinishEvent, type FlowFocusEvent as FlowUiFocusEvent, FlowUiFormGroup, FlowUiGauge, type FlowHideEvent as FlowUiHideEvent, type FlowHoverEvent as FlowUiHoverEvent, FlowUiIcon, FlowUiIconButton, type FlowInitialFocusEvent as FlowUiInitialFocusEvent, FlowUiInput, type FlowInputEvent as FlowUiInputEvent, type FlowInvalidEvent as FlowUiInvalidEvent, type FlowLazyChangeEvent as FlowUiLazyChangeEvent, type FlowLazyLoadEvent as FlowUiLazyLoadEvent, FlowUiList, FlowUiListItem, type FlowLoadEvent as FlowUiLoadEvent, FlowUiMap, type FlowMapLoadEvent as FlowUiMapLoadEvent, FlowUiMenu, FlowUiMenuItem, FlowUiMenuLabel, type FlowMutationEvent as FlowUiMutationEvent, FlowUiMutationObserver, FlowUiOption, FlowUiPanel, FlowUiPanelHeader, type FlowPanelToggleEvent as FlowUiPanelToggleEvent, FlowUiPopup, FlowUiProgressBar, FlowUiProgressRing, FlowUiQueryBuilder, FlowUiRadio, FlowUiRadioGroup, FlowUiRange, type FlowRemoveEvent as FlowUiRemoveEvent, type FlowRepositionEvent as FlowUiRepositionEvent, type FlowRequestCloseEvent as FlowUiRequestCloseEvent, type FlowResizeEvent as FlowUiResizeEvent, FlowUiResizeObserver, FlowUiScrollView, FlowUiSelect, type FlowSelectEvent as FlowUiSelectEvent, type FlowShowEvent as FlowUiShowEvent, type FlowSlideChange as FlowUiSlideChange, FlowUiSplitView, FlowUiSplitViewDivider, FlowUiSplitViewPane, FlowUiSplitViewToggleButton, type FlowStartEvent as FlowUiStartEvent, FlowUiStepper, FlowUiStepperPanel, FlowUiSwitch, FlowUiTab, FlowUiTabGroup, type FlowTabHideEvent as FlowUiTabHideEvent, FlowUiTabPanel, type FlowTabShowEvent as FlowUiTabShowEvent, FlowUiTag, FlowUiTextarea, FlowUiTimer, FlowUiToolButton, FlowUiToolButtonGroup, FlowUiTooltip, FlowUiTree, FlowUiTreeItem, FlowUiVisuallyHidden, JavaScriptFilterError, type JavaScriptFilterFn, LocalizeController, type NumberColorMapperField, type NumberColorStopOptions, type SelectColorMapperField, type SelectColorStopOptions, type StringColorMapperField, type StringColorStopOptions, type Translation, addIcons, colorMapperValueToMaplibreExpression, countRuleSet, escapeMaplibreString, filterRuleSet, converter$2 as flowQueryConverter, getAnimationNames, getEasingNames, initialize, initializeChartJs, isRule, isRuleOrRuleset, isRuleSet, converter$1 as javascriptFilterConverter, converter as mapLayerFilterConverter, registerChartComponent, registerComponents, registerIconLibrary, registerTranslation, renameRuleSetFields, setDefaultLocale, setDefaultTimeZone, transformRuleSet, unregisterIconLibrary };

package/dist/index.mjs

@@ -1,6 +1,7 @@
 export { initialize } from './public-api.mjs';
 export { default as FlowUiAlert } from './components/alert/alert.component.mjs';
 export { default as FlowUiAnimation } from './components/animation/animation.component.mjs';
+export { default as FlowUiAutocomplete } from './components/autocomplete/autocomplete.component.mjs';
 export { default as FlowUiAvatar } from './components/avatar/avatar.component.mjs';
 export { default as FlowUiBadge } from './components/badge/badge.component.mjs';
 export { default as FlowUiBaseControl } from './components/base-control/base-control.component.mjs';

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.1.3";
+const version = "4.1.5";
 
 export { version };

package/dist/utilities/register-components.mjs

@@ -1,5 +1,6 @@
 import FlowUiAlert from '../components/alert/alert.component.mjs';
 import FlowUiAnimation from '../components/animation/animation.component.mjs';
+import FlowUiAutocomplete from '../components/autocomplete/autocomplete.component.mjs';
 import FlowUiAvatar from '../components/avatar/avatar.component.mjs';
 import FlowUiBadge from '../components/badge/badge.component.mjs';
 import FlowUiBaseControl from '../components/base-control/base-control.component.mjs';
@@ -72,6 +73,7 @@ import FlowUiVisuallyHidden from '../components/visually-hidden/visually-hidden.
 async function registerComponents() {
   FlowUiAlert.define("flow-ui-alert");
   FlowUiAnimation.define("flow-ui-animation");
+  FlowUiAutocomplete.define("flow-ui-autocomplete");
   FlowUiAvatar.define("flow-ui-avatar");
   FlowUiBadge.define("flow-ui-badge");
   FlowUiBaseControl.define("flow-ui-base-control");