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) * * @csspart empty - The empty part. * @csspart icon - The icon part. * @csspart input - Text input field for typing and selection display * @csspart popup - The popup part. * @csspart portal - The portal part. * @csspart projection - The projection part. * * @cssprop {String} --combo-focus-ring-active-width - The focus ring active width CSS custom property. * @cssprop {Color} --combo-focus-ring-color - Focus ring color for accessibility * @cssprop {String} --combo-focus-ring-inward-offset - The focus ring inward offset CSS custom property. * @cssprop {String} --combo-focus-ring-outward-offset - The focus ring outward offset CSS custom property. * @cssprop {String} --combo-font-family - The font family CSS custom property. * @cssprop {String} --combo-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --combo-font-line-height - The font line height CSS custom property. * @cssprop {String} --combo-font-size - The font size CSS custom property. * @cssprop {String} --combo-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --combo-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --combo-font-weight - The font weight CSS custom property. * @cssprop {String} --combo-foreground-color - The foreground color CSS custom property. * @cssprop {String} --combo-gap - The gap CSS custom property. * @cssprop {String} --combo-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --combo-padding-left - The padding left CSS custom property. * @cssprop {String} --combo-padding-right - The padding right CSS custom property. * @cssprop {String} --combo-padding-top - The padding top CSS custom property. * @cssprop {String} --combo-shadow - The shadow CSS custom property. * @cssprop {String} --combo-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --combo-shadow-color - The shadow color CSS custom property. * @cssprop {String} --combo-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --combo-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --combo-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --combo-transition-duration - The transition duration CSS custom property. * @cssprop {String} --combo-transition-mode - The transition mode CSS custom property. * @cssprop {String} --combo-transition-property - The transition property CSS custom property. * @cssprop {String} --combo-translate - The translate CSS custom property. * * @fires cleared {ClearedEvent} - Dispatched when the selection is cleared by user action * @fires selectionChanged {SelectionChangedEvent} - Dispatched when the selected value(s) change * * @dependency mosaik-button - The Button element. * @dependency mosaik-empty-state - The Empty State element. * @dependency mosaik-floating - The Floating element. * @dependency mosaik-portal - The Portal element. * @dependency mosaik-textbox - The Textbox element. * * @example * ```html * * * United States * Canada * United Kingdom * * * * * HTML * CSS * JavaScript * React * Angular * * * * *
* Frontend Frameworks *
* React * Angular * Vue.js *
* ``` * * @public * * @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 */ 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