import { IEventEmitter } from '@breadstone/mosaik-elements'; import { IClearable } from '../../../Behaviors/Clearable'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { InputBaseElement } from '../Abstracts/InputBase'; import type { ChipTransformFn } from './ChipTransformFn'; import type { IChipBoxElementProps } from './IChipBoxElementProps'; declare const ChipBoxElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof InputBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Chip Box - A multi-selection input control for creating and managing collections of chip elements. * * @description * The Chip Box component provides an interactive interface for creating, managing, and displaying collections * of chip elements representing multiple selections or tags. Users can add new chips by typing and pressing * enter, remove existing chips with close buttons or backspace, and manage collections of related items. * Features include keyboard navigation, chip transformation functions, validation support, customizable * appearance and behavior, drag-and-drop reordering, and comprehensive accessibility features. The component * handles dynamic chip creation from text input, supports custom chip rendering, and integrates with form * validation systems. Perfect for tag inputs, multi-select filters, contact lists, skill collections, * and any interface requiring multiple item selection and management. * * @name Chip Box * @element mosaik-chipbox * @category Inputs * * @slot prefix - Content placed before the chip collection. * @slot suffix - Content placed after the chip collection. * * @csspart focusRing - The focus ring indicator. * @csspart prefix - The prefix content container. * @csspart inner - The inner container wrapper. * @csspart label - The floating label element. * @csspart wrapper - The wrapper containing chips and input. * @csspart chip - Individual chip elements. * @csspart input - The text input field for adding new chips. * @csspart suffix - The suffix content container. * * @cssprop {Color} --chip-box-background-color - The background color. * @cssprop {Color} --chip-box-border-color - The border color. * @cssprop {String} --chip-box-border-radius - The border radius. * @cssprop {String} --chip-box-border-style - The border style. * @cssprop {String} --chip-box-border-width - The border width. * @cssprop {Color} --chip-box-foreground-color - The foreground color. * @cssprop {String} --chip-box-gap - The gap between elements. * @cssprop {String} --chip-box-height - The height. * @cssprop {String} --chip-box-padding-bottom - The padding bottom. * @cssprop {String} --chip-box-padding-left - The padding left. * @cssprop {String} --chip-box-padding-right - The padding right. * @cssprop {String} --chip-box-padding-top - The padding top. * @cssprop {String} --chip-box-shadow - The shadow. * * @dependency mosaik-focus-ring - Used for focus indication. * @dependency mosaik-chip - Used for individual chip elements. * * @fires cleared {ClearedEvent} - Fired when the value is cleared. * @fires chipAdded {ChipAddedEvent} - Fired when a chip is added. * @fires chipRemoved {ChipRemovedEvent} - Fired when a chip is removed. * * @example * Basic chip box with label and placeholder: * ```html * * * ``` * * @example * Chip box pre-populated with chips: * ```html * * * ``` * * @example * Chip box with clearable option and variant styling: * ```html * * * ``` * * @public */ export declare class ChipBoxElement extends ChipBoxElement_base implements IChipBoxElementProps, IInvalidable, IClearable, ISlottable { private _chipElements; private _inputElement; private readonly _keyboardController; private readonly _chipAdded; private readonly _chipRemoved; private _isEditable; private _readonly; private _pressBackspaceToRemove; private _chips; private _separatorKeys; private _transform; private _value; private _required; private _autofocus; private _name; private _pattern; private _placeholder; private _autocomplete; /** * @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 `value` property. * * @public * @override */ get value(): string; set value(value: string); /** * Gets or sets the `required` property. * * @public * @attr */ get required(): boolean; set required(value: boolean); /** * Gets or sets the `autofocus` property. * * @public * @override */ get autofocus(): boolean; set autofocus(value: boolean); /** * Gets or sets the `name` property. * * @public * @attr */ get name(): string; set name(value: string); /** * Gets or sets the `pattern` property. * * @public * @attr */ get pattern(): string; set pattern(value: string); /** * Gets or sets the `placeholder` property. * * @public * @attr */ get placeholder(): string; set placeholder(value: string); /** * Gets or sets the `autocomplete` property. * * @public * @attr */ get autocomplete(): boolean; set autocomplete(value: boolean); /** * Gets or sets the `isEditable` property. * * @public * @attr */ get isEditable(): boolean; set isEditable(value: boolean); /** * Gets or sets the `readonly` property. * * @public * @attr */ get readonly(): boolean; set readonly(value: boolean); /** * Gets or sets the `pressBackspaceToRemove` property. * * @public * @attr */ get pressBackspaceToRemove(): boolean; set pressBackspaceToRemove(value: boolean); /** * Gets or sets the `chips` property. * * @public * @attr */ get chips(): Array; set chips(value: Array); /** * Gets or sets the `separatorKeys` property. * * @public * @attr */ get separatorKeys(): Array; set separatorKeys(value: Array); /** * Gets or sets the `transform` property. * * @public * @attr */ get transform(): ChipTransformFn | null; set transform(value: ChipTransformFn | null); /** * Determines whether the element has a prefix or not. * The Prefix is a slot that is displayed before the input. * * @private * @readonly * @attr */ get hasPrefix(): boolean; /** * Determines whether the element has a suffix or not. * The Suffix is a slot that is displayed after the input. * * @private * @readonly * @attr */ get hasSuffix(): boolean; /** * Called when a chip is added. * Provides reference to `{chip:unknown}` as event argument. * * @public * @readonly * @eventProperty */ get chipAdded(): IEventEmitter<{ chip: unknown; }>; /** * Called when a chip is removed. * Provides reference to `{chip: unknown}` as event argument. * * @public * @readonly * @eventProperty */ get chipRemoved(): IEventEmitter<{ chip: unknown; }>; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ focus(): void; /** * @public * @override */ blur(): void; /** * Clears the value of the element but not the validation. * * @public * @override */ clear(force?: boolean): boolean; /** * Resets the value, all kinds of validation and errors. * * @public * @override */ reset(): void; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * @public */ add(chip: unknown): void; /** * @public */ delete(chip: unknown): void; /** * @protected * @template */ onKeyUp(event: KeyboardEvent): void; /** * @protected * @template */ onKeyDown(event: KeyboardEvent): void; /** * @protected * @template */ onPaste(event: ClipboardEvent): void; /** * @protected */ onChipClosed(chip: unknown): void; /** * Emits the `chipAdded` event. * * @protected */ protected onChipAdded(args: { chip: unknown; }): void; /** * Emits the `chipRemoved` event. * * @protected */ protected onChipRemoved(args: { chip: unknown; }): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @template * @protected */ onChange(event: Event): void; /** * @template * @protected * @override */ onInput(event: InputEvent): void; /** * @template * @protected * @override */ onFocus(event: FocusEvent): void; /** * @template * @protected * @override */ onBlur(event: FocusEvent): void; } /** * @public */ export declare namespace ChipBoxElement { type Props = IChipBoxElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-chipbox': ChipBoxElement; } } export {}; //# sourceMappingURL=ChipBoxElement.d.ts.map