import { type IClearable } from '../../../Behaviors/Clearable'; import { IDropDownable } from '../../../Behaviors/DropDownable'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { TextAlignment } from '../../../Types/TextAlignment'; import { SelectorElement } from '../../Selectors/Abstracts/Selector/SelectorElement'; import type { ISelectElementProps } from './ISelectElementProps'; import { SelectElementIntl } from './SelectElementIntl'; import { SelectItemElement } from './SelectItemElement'; declare const SelectElement_base: import("../../../../Index").ControlBehaviorReturn) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Filterable").IFilterableProps) & (abstract new () => SelectorElement) & 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>; /** * Select - A dropdown input control for choosing from a predefined list of options. * * @description * The Select component provides a compact way for users to choose from a list of predefined options. * It displays the selected value in a closed state and reveals all available options when opened. * Features include filtering, grouping, custom display templates, keyboard navigation, and accessibility support. * The component supports both single and multiple selection modes and can be used for forms, configuration panels, * and data filtering interfaces. * * @name Select * @element mosaik-select * @category Inputs * * @slot prefix - Content placed before the input value. * @slot suffix - Content placed after the input value. * @slot filter - Custom filter input for the dropdown. * @slot - Default slot for select items and groups. * * @csspart input - The input field that displays the selected value. * @csspart caret - The dropdown arrow indicator. * @csspart portal - The portal container for the dropdown. * @csspart popup - The floating dropdown container. * @csspart filter - The filter input container. * @csspart projection - The dropdown content projection area. * @csspart empty - The empty state when no items are available. * * @cssprop {Color} --select-background-color - The background color. * @cssprop {Color} --select-border-color - The border color. * @cssprop {String} --select-border-radius - The border radius. * @cssprop {String} --select-border-style - The border style. * @cssprop {String} --select-border-width - The border width. * @cssprop {String} --select-font-family - The font family. * @cssprop {String} --select-font-size - The font size. * @cssprop {String} --select-font-weight - The font weight. * @cssprop {Color} --select-foreground-color - The foreground color. * @cssprop {String} --select-gap - The gap between elements. * @cssprop {String} --select-padding-bottom - The padding bottom. * @cssprop {String} --select-padding-left - The padding left. * @cssprop {String} --select-padding-right - The padding right. * @cssprop {String} --select-padding-top - The padding top. * @cssprop {String} --select-shadow - The shadow. * @cssprop {String} --select-transition-duration - The transition duration. * @cssprop {String} --select-width - The width. * * @dependency mosaik-textbox - Used for the input field. * @dependency mosaik-button - Used for the dropdown caret. * @dependency mosaik-portal - Used for dropdown positioning. * @dependency mosaik-floating - Used for dropdown positioning. * @dependency mosaik-spacer - Used for spacing in filter. * @dependency mosaik-empty-state - Used when no items are available. * * @fires cleared {ClearedEvent} - Fired when the value is cleared. * @fires selectionChanged {SelectionChangedEvent} - Fired when the selection has changed. * * @example * ```html * * * * * * ``` * * @public */ export declare class SelectElement extends SelectElement_base implements ISelectElementProps, IClearable, IInvalidable, IDropDownable, ISlottable { private readonly _clickOutsideController; private readonly _intlController; private readonly _projectionController; private readonly _itemsClickSubscriptions; private _inputElement; private _floatingElement; private _isEditable; private _isReadOnly; 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 `isEditable` property. * * @public * @attr */ get isEditable(): boolean; set isEditable(value: boolean); /** * Gets or sets the `isReadOnly` property. * * @public * @attr */ get isReadOnly(): boolean; set isReadOnly(value: boolean); /** * Gets or sets the `value` property. * * @public * @override */ get value(): string | null; set value(value: string | 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 Select. * * @remark * It is important to override the base class property to ensure that only * `SelectItemElement` instances are returned. * * @public * @readonly * @ignore */ get items(): Array; /** * Returns the `intl` property. * * @public * @readonly */ get intl(): SelectElementIntl; /** * 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. * * @public * @override */ clear(force?: boolean): boolean; /** * @public * @override */ connectedCallback(): void; /** * @protected * @template * * @param active - A value indicating whether the floating is active. */ onFloatingActiveChanged(active: boolean): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected onItemsChanged(): void; /** * @protected * @override */ protected onSelectionChanged(oldIndex: number, newIndex: number): void; /** * @protected */ protected onValuePropertyChanged(_prev?: string | null, next?: string | null): void; /** * @protected */ protected onDisabledPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onFilterPropertyChanged(_?: string, next?: string): void; /** * @private * * @param item - The item to select. * @param force - A value indicating whether to force the selection. */ private onSelectItem; /** * @private */ private initialSelection; } /** * @public */ export declare namespace SelectElement { type Props = ISelectElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-select': SelectElement; } } export {}; //# sourceMappingURL=SelectElement.d.ts.map