@progress/kendo-vue-buttons 8.0.3-develop.2 → 8.0.3-develop.4

package/Chip/Chip.d.ts

@@ -0,0 +1,351 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-vue-common';
+import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
+import { PropType } from 'vue';
+/**
+ * Represents the properties of the Avatar in the Chip.
+ */
+export interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    imageUrl: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar. Default is set to 'medium'.
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: object;
+}
+/**
+ * Represents the properties of [Chip]({% slug overview_chip %}) component.
+ */
+export interface ChipProps {
+    /**
+     * Sets the `id` property of the top div element of the Chip.
+     */
+    id?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the label text of the Chip.
+     */
+    text?: string;
+    /**
+     * Sets the `id` value of the Chip.
+     */
+    value?: any;
+    /**
+     * The Chip direction 'ltr' as default or 'rtl'.
+     */
+    dir?: string;
+    /**
+     * Determines if the Chip could be removed.
+     */
+    removable?: boolean;
+    /**
+     * Determines if the Chip has custom `removeIcon`.
+     */
+    removeIcon?: string;
+    /**
+     * Defines an remove SVGIcon to be rendered within the chip.
+     */
+    removeSvgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the Chip has an `icon`.
+     */
+    icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the chip.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has custom selection `icon`.
+     */
+    selectedIcon?: string;
+    /**
+     * Defines an selection SVGIcon to be rendered within the chip.
+     */
+    selectedSvgIcon?: SVGIcon;
+    /**
+     * If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
+     * defines the avatar template that will be shown.
+     */
+    avatar?: string | Function | Object;
+    /**
+     * 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';
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     *
+     * @default `undefined`
+     */
+    themeColor?: 'base' | 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Triggered on Chip removing.
+     */
+    onRemove?: (event: ChipRemoveEvent) => void;
+    /**
+     * Triggered on onClick event.
+     */
+    onClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on onKeyDown event.
+     */
+    onKeydown?: (event: ChipKeyboardEvent) => void;
+    /**
+     * Triggered on onFocus event.
+     */
+    onFocus?: (event: ChipFocusEvent) => void;
+    /**
+     * Triggered on onBlur event.
+     */
+    onBlur?: (event: ChipFocusEvent) => void;
+    /**
+     * Represents the item data, coming from the `ChipList` component.
+     */
+    dataItem?: any;
+    /**
+     * Determines if the Chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * 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;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * @hidden
+     */
+    onMousedown?: (event: any) => void;
+}
+/**
+ * Represents the target(element and props) of the ChipRemoveEvent.
+ */
+export interface ChipHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Chip.
+     */
+    props: ChipProps;
+}
+/**
+ * @hidden
+ */
+declare const Chip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    text: PropType<string>;
+    avatar: {
+        type: PropType<string | Object | Function>;
+        default: () => any;
+    };
+    value: PropType<any>;
+    dir: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    removable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    removeIcon: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    removeSvgIcon: {
+        type: PropType<SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    icon: PropType<string>;
+    svgIcon: PropType<SVGIcon>;
+    selectedIcon: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    selectedSvgIcon: {
+        type: PropType<SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    size: PropType<"small" | "medium" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    themeColor: {
+        type: PropType<"base" | "info" | "success" | "warning" | "error">;
+        validator: (value: string) => boolean;
+    };
+    dataItem: PropType<any>;
+    selected: PropType<boolean>;
+    ariaDescribedBy: PropType<string>;
+    role: {
+        type: PropType<string>;
+        default: string;
+    };
+    tabIndex: PropType<number>;
+    onMousedown: PropType<(event: any) => void>;
+}>, {
+    chipRef: import('vue').Ref<any, any>;
+}, {}, {
+    currentSelected(): any;
+    chipLabelClass(): {
+        'k-chip-label': boolean;
+    };
+}, {
+    computedFocused(): boolean;
+    handleMouseDown(event: any): void;
+    handleClick(event: any): void;
+    handleRemove(event: any): void;
+    handleKeyDown(event: any): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: FocusEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: ChipMouseEvent) => true;
+    keydown: (event: ChipKeyboardEvent) => true;
+    blur: (event: ChipFocusEvent) => true;
+    focus: (event: ChipFocusEvent) => true;
+    remove: (event: ChipRemoveEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    text: PropType<string>;
+    avatar: {
+        type: PropType<string | Object | Function>;
+        default: () => any;
+    };
+    value: PropType<any>;
+    dir: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    removable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    removeIcon: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    removeSvgIcon: {
+        type: PropType<SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    icon: PropType<string>;
+    svgIcon: PropType<SVGIcon>;
+    selectedIcon: {
+        type: PropType<string>;
+        default: () => string;
+    };
+    selectedSvgIcon: {
+        type: PropType<SVGIcon>;
+        default: () => import('@progress/kendo-svg-icons').SVGIcon;
+    };
+    size: PropType<"small" | "medium" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    themeColor: {
+        type: PropType<"base" | "info" | "success" | "warning" | "error">;
+        validator: (value: string) => boolean;
+    };
+    dataItem: PropType<any>;
+    selected: PropType<boolean>;
+    ariaDescribedBy: PropType<string>;
+    role: {
+        type: PropType<string>;
+        default: string;
+    };
+    tabIndex: PropType<number>;
+    onMousedown: PropType<(event: any) => void>;
+}>> & Readonly<{
+    onClick?: (event: ChipMouseEvent) => any;
+    onBlur?: (event: ChipFocusEvent) => any;
+    onFocus?: (event: ChipFocusEvent) => any;
+    onKeydown?: (event: ChipKeyboardEvent) => any;
+    onRemove?: (event: ChipRemoveEvent) => any;
+}>, {
+    role: string;
+    disabled: boolean;
+    dir: string;
+    avatar: string | Object | Function;
+    removable: boolean;
+    removeIcon: string;
+    removeSvgIcon: SVGIcon;
+    selectedIcon: string;
+    selectedSvgIcon: SVGIcon;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Chip };

package/Chip/ChipList.d.ts

@@ -0,0 +1,278 @@
+/**
+ * @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;
+}>, {
+    disabled: boolean;
+    dir: string;
+    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 };

package/Chip/ChipList.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as r, createVNode as i, h as l, ref as n } from "vue";
-import { classNames as u, getTabIndex as p, setRef as d, kendoThemeMaps as o, templateRendering as h, getListeners as c, getTemplate as m, validatePackage as f } from "@progress/kendo-vue-common";
+import { classNames as u, kendoThemeMaps as p, getTabIndex as d, setRef as o, templateRendering as h, getListeners as c, getTemplate as m, validatePackage as f } from "@progress/kendo-vue-common";
 import { selectionReducer as $ } from "./selection-reducer.mjs";
 import { focusReducer as v } from "./focus-reducer.mjs";
 import { dataReducer as g } from "./data-reducer.mjs";
@@ -174,14 +174,14 @@ const V = /* @__PURE__ */ r({
       size: e
     } = this.$props;
     return i("div", {
-      ref: d(this, "chipList"),
+      ref: o(this, "chipList"),
       role: "listbox",
       id: this.$props.id,
       dir: this.currentDir,
       style: this.$attrs.style,
-      tabindex: p(this.$props.tabIndex, this.$props.disabled, void 0),
+      tabindex: d(this.$props.tabIndex, this.$props.disabled, void 0),
       class: u("k-chip-list", {
-        [`k-chip-list-${o.sizeMap[e] || e}`]: e,
+        [`k-chip-list-${p.sizeMap[e] || e}`]: e,
         "k-rtl": this.currentDir === "rtl",
         "k-selection-single": this.$props.selection === "single",
         "k-selection-multiple": this.$props.selection === "multiple",

package/Chip/data-reducer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare enum DATA_ACTION {
+    remove = "remove",
+    add = "add",
+    reorder = "reorder"
+}
+/**
+ * @hidden
+ */
+export type DataAction = {
+    type: DATA_ACTION;
+    payload?: any;
+    valueField: string;
+    event?: any;
+};
+/**
+ * @hidden
+ */
+export declare const dataReducer: (state: any, action: DataAction) => any;

package/Chip/data-reducer.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let r=function(e){return e.remove="remove",e.add="add",e.reorder="reorder",e}({});const t=(e,d)=>{switch(d.type){case r.add:break;case r.remove:return e.filter(a=>a[d.valueField]!==d.payload);case r.reorder:break;default:return e}};exports.DATA_ACTION=r;exports.dataReducer=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let r=(function(e){return e.remove="remove",e.add="add",e.reorder="reorder",e})({});const t=(e,d)=>{switch(d.type){case r.add:break;case r.remove:return e.filter(a=>a[d.valueField]!==d.payload);case r.reorder:break;default:return e}};exports.DATA_ACTION=r;exports.dataReducer=t;

package/Chip/data-reducer.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-let d = /* @__PURE__ */ function(e) {
+let d = /* @__PURE__ */ (function(e) {
   return e.remove = "remove", e.add = "add", e.reorder = "reorder", e;
-}({});
+})({});
 const o = (e, r) => {
   switch (r.type) {
     case d.add: