/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FormComponentProps } from '@progress/kendo-vue-common'; import { ChipProps } from './Chip'; import { ChipListChangeEvent, ChipListDataChangeEvent } from '../models/events'; /** * Represents the properties of [ChipList]({% slug overview_chiplist %}) component. */ export interface ChipListProps extends FormComponentProps, ChipProps { /** * Sets the `id` property of the top div element of the ChipList. */ id?: string; /** * Sets additional classes to the ChipList. */ className?: string; /** * Sets the `tabIndex` attribute. */ tabIndex?: number; /** * Represents Chip component. */ chip?: any; /** * Represents the data about the child Chips. */ dataItems?: any; /** * Represents the default data about the child Chips. */ defaultDataItems?: any[]; /** * Triggered after Chip data change. */ onDatachange?: (event: ChipListDataChangeEvent) => void; /** * Represents the selection state of Chip component. */ value?: any | any[]; /** * Represents the default value of the selection state of Chip component. */ defaultValue?: any | any[]; /** * Triggered after value change. */ onChange?: (event: ChipListChangeEvent) => void; /** * Configures the `size` of the Chip. * * The available options are: * - small * - medium * - large * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Chip. * * The available options are: * - none * - small * - medium * - large * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Chip. * * The available options are: * - solid * - outline * - flat * * @default `undefined` */ fillMode?: 'solid' | 'outline' | 'flat'; /** * Represents the selection state of Chip component. */ selection?: string; /** * Represents the `text` field of Chip, defaults to 'text'. */ textField?: string; /** * Represents the `value` field of the Chip, defaults to 'value'. */ valueField?: string; /** * Represents the 'avatar' field in the Chip, defaults to 'avatar'. */ avatarField?: object; /** * Determines of ChipList is disabled. */ disabled?: boolean; /** * The ChipList direction 'ltr' as default or 'rtl'. */ dir?: string; /** * Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; } /** * Represents the target(element and props) of the ChipListChangeEvent. */ export interface ChipListHandle { /** * The current element or `null` if there is no one. */ element: HTMLDivElement | null; /** * The props values of the ChipList. */ props: ChipListProps; } /** * @hidden */ declare const ChipList: import('vue').DefineComponent any[]; }; value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[]; defaultValue: { type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[]; default: () => any; }; size: StringConstructor; rounded: StringConstructor; fillMode: { type: StringConstructor; validator: (value: string) => boolean; }; selection: { type: StringConstructor; default: () => "none"; }; textField: { type: StringConstructor; default: () => "text"; }; valueField: { type: StringConstructor; default: () => "value"; }; avatarField: { type: StringConstructor; default: () => "avatar"; }; disabled: { type: BooleanConstructor; default: boolean; }; dir: { type: StringConstructor; default: () => "ltr"; }; chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[]; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; }>, { chipListRef: import('vue').Ref; }, { currentDataItems: any[]; currentDir: string; isRtl: boolean; currentFocused: { value: boolean; }; currentValue: { value: any; }; }, { computedDataItems(): any; computedValue(): any; items(): any; }, { handleDispatchSelection(action: any): void; handleDispatchFocus(action: any): void; handleDispatchDataItems(action: any): void; handleChange(newValue: any, event: any): void; handleDataChange(newData: any, event: any): void; itemsReducer(acc: any, current: any): any; }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { change: (event: ChipListChangeEvent) => true; datachange: (event: ChipListDataChangeEvent) => true; }, string, import('vue').PublicProps, Readonly any[]; }; value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[]; defaultValue: { type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[]; default: () => any; }; size: StringConstructor; rounded: StringConstructor; fillMode: { type: StringConstructor; validator: (value: string) => boolean; }; selection: { type: StringConstructor; default: () => "none"; }; textField: { type: StringConstructor; default: () => "text"; }; valueField: { type: StringConstructor; default: () => "value"; }; avatarField: { type: StringConstructor; default: () => "avatar"; }; disabled: { type: BooleanConstructor; default: boolean; }; dir: { type: StringConstructor; default: () => "ltr"; }; chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[]; ariaLabelledBy: StringConstructor; ariaDescribedBy: StringConstructor; }>> & Readonly<{ onChange?: (event: ChipListChangeEvent) => any; onDatachange?: (event: ChipListDataChangeEvent) => any; }>, { dir: string; disabled: boolean; defaultDataItems: unknown[]; defaultValue: string | number | Record | unknown[]; selection: string; textField: string; valueField: string; avatarField: string; }, {}, {}, {}, string, () => { kendoSelection: any; kendoFocused: any; kendoDataItems: any; handleDispatchDataItems: any; handleDispatchSelection: any; handleDispatchFocus: any; }, true, {}, any>; export { ChipList };