import { IClearable } from '../../../Behaviors/Clearable'; import { type IDropDownable } from '../../../Behaviors/DropDownable'; import { IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { Appearance } from '../../../Types/Appearance'; import { SelectionMode } from '../../../Types/SelectionMode'; import { TextAlignment } from '../../../Types/TextAlignment'; import { Variant } from '../../../Types/Variant'; import { MultiSelectorElement } from '../Abstracts/MultiSelector/MultiSelectorElement'; import { ComboElementIntl } from './ComboElementIntl'; import { ComboItemElement } from './ComboItemElement'; import type { IComboElementProps } from './IComboElementProps'; declare const ComboElement_base: import("../../../../Index").ControlBehaviorReturn) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new () => MultiSelectorElement) & import("../../../Behaviors/Themeable").IThemeableCtor, import("../../../Behaviors/Valueable").IValueableProps>, import("../../../Behaviors/Disableable").IDisableableProps>, IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps>, import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable>, import("../../../Behaviors/Labelable").ILabelableProps>, import("../../../Behaviors/Variantable").IVariantableProps>, import("../../../Behaviors/Appearanceable").IAppearanceableProps>, import("../../../Behaviors/DropDownable").IDropDownableProps & IDropDownable>, import("../../../Behaviors/Slottable").ISlottableProps & ISlottable>; /** * Combo - A dropdown selection component that combines text input with a list of selectable options. * * Provides users with a searchable dropdown interface for selecting from predefined options * or entering custom values. Supports single and multiple selection modes with filtering, * autocomplete functionality, and customizable dropdown positioning. * * @name ComboElement * @element mosaik-combo * @category Selectors * * @slot - Default content area for combo items and options * @slot prefix - Leading content before the input (icons, labels) * @slot suffix - Trailing content after the input (actions, indicators) * @slot dropdown-header - Header content at the top of the dropdown * @slot dropdown-footer - Footer content at the bottom of the dropdown * * @csspart input - Text input field for typing and selection display * @csspart dropdown - Dropdown container for options list * @csspart options - Options list container within the dropdown * @csspart trigger - Dropdown trigger button or indicator * @csspart selected - Container for displaying selected items (multi-select) * @csspart clear - Clear button for removing selections * * @cssprop {String} --combo-input-padding - Internal padding for the input field * @cssprop {String} --combo-dropdown-max-height - Maximum height for the dropdown list * @cssprop {String} --combo-option-padding - Padding for individual dropdown options * @cssprop {String} --combo-selected-item-margin - Margin between selected items * @cssprop {String} --combo-border-radius - Border radius for the combo component * @cssprop {Color} --combo-focus-ring-color - Focus ring color for accessibility * * @fires cleared {ClearedEvent} - Dispatched when the selection is cleared by user action * @fires selectionChanged {SelectionChangedEvent} - Dispatched when the selected value(s) change * * @keyhandle UpArrow - Navigates to the previous option in the dropdown * @keyhandle DownArrow - Navigates to the next option in the dropdown * @keyhandle Space - Opens the dropdown or selects the focused option * @keyhandle Enter - Selects the focused option and closes dropdown * @keyhandle Escape - Closes the dropdown without selection * @keyhandle Home - Navigates to the first option * @keyhandle End - Navigates to the last option * * @dependency TextBoxElement - For text input and editing functionality * @dependency FloatingElement - For dropdown positioning and overlay management * @dependency ComboItemElement - For individual selectable options * @dependency ButtonElement - For dropdown trigger and action buttons * @dependency EmptyStateElement - For displaying no options available state * @dependency PortalElement - For dropdown portal rendering * * @example * ```html * * * United States * Canada * United Kingdom * * * * * HTML * CSS * JavaScript * React * Angular * * * * *
* Frontend Frameworks *
* React * Angular * Vue.js *
* ``` * * @public */ export declare class ComboElement extends ComboElement_base implements IComboElementProps, IDropDownable, IClearable, IInvalidable, ISlottable { private readonly _provider; private _inputElement; private _floatingElement; private readonly _clickOutsideController; private readonly _intl; private readonly _projectionController; private readonly _itemsClickSubscriptions; private _selectionMode; private _value; private _placeholder; private _required; private _textAlign; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `selectionMode` property. * * @public * @attr */ get selectionMode(): SelectionMode; set selectionMode(value: SelectionMode); /** * Gets or sets the `value` property. * * @override * @public * @attr */ get value(): Array | null; set value(value: Array | null); /** * Gets or sets the `placeholder` property. * * @public */ get placeholder(): string; set placeholder(value: string); /** * Determines whether the component is required or not. * If `true`, the component will require a value when submitted. * * @public * @attr */ get required(): boolean; set required(value: boolean); /** * Determines the text alignment of the component. * * @public * @attr */ get textAlign(): TextAlignment; set textAlign(value: TextAlignment); /** * Gets the items of the Combo. * * @remark * It is important to override the base class property to ensure that only * `ComboItemElement` instances are returned. * * @public * @readonly * @ignore */ get items(): Array; /** * Returns the `intl` property. * * @public * @readonly */ get intl(): ComboElementIntl; /** * Resets the value, all kinds of validation and errors. * * @public */ reset(): void; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * Clears the value of the element but not the validation. * Also clears the selected items and resets the active state. * * @public * @override */ clear(force?: boolean): boolean; /** * @public * @override */ connectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected onItemsChanged(): void; /** * @protected * @override */ protected onSelectionChanged(oldIndex: number, newIndex: number): void; /** * @protected */ protected onSelectionModePropertyChanged(prev?: SelectionMode, next?: SelectionMode): void; /** * @protected */ protected onVariantPropertyChanged(_prev?: Variant, next?: Variant): void; /** * @protected */ protected onAppearancePropertyChanged(_prev?: Appearance, _next?: Appearance): void; /** * @protected */ protected onDisabledPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @param active - A value indicating whether the floating is active. * * @private * @template */ onFloatingActiveChanged(active: boolean): void; /** * @param item - The item to select. * @param force - A value indicating whether to force the selection. * * @private */ private onSelectItem; /** * Deselects the given item and clears the value. * * @param item - The item to deselect. * * @private */ private deselectItem; /** * @private */ private initialSelection; } /** * @public */ export declare namespace ComboElement { type Props = IComboElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-combo': ComboElement; } } export {}; //# sourceMappingURL=ComboElement.d.ts.map