@progress/kendo-vue-buttons/Chip/ChipList.d.ts

TODO

/**
 * @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<import('vue').ExtractPropTypes<{
    id: StringConstructor;
    tabIndex: NumberConstructor;
    dataItems: ArrayConstructor;
    defaultDataItems: {
        type: ArrayConstructor;
        default: () => 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<any, any>;
}, {
    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<import('vue').ExtractPropTypes<{
    id: StringConstructor;
    tabIndex: NumberConstructor;
    dataItems: ArrayConstructor;
    defaultDataItems: {
        type: ArrayConstructor;
        default: () => 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<string, any> | 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 };