@progress/kendo-vue-inputs 8.0.3-develop.2 → 8.0.3-develop.3

package/colors/FlatColorPicker.d.ts

@@ -0,0 +1,286 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerChangeEvent } from '..';
+import { FlatColorPickerViewChangeEvent } from './interfaces/FlatColorPickerViewChangeEvent';
+import { FlatColorPickerFocusEvent } from './interfaces/FlatColorPickerFocusEvent';
+import { FlatColorPickerBlurEvent } from './interfaces/FlatColorPickerBlurEvent';
+import { FlatColorPickerFocusoutEvent } from './interfaces/FlatColorPickerFocusoutEvent';
+import { ColorGradientProps } from './interfaces/ColorGradientProps';
+import { ColorPickerPaletteSettings } from './interfaces/ColorPickerPaletteSettings';
+import { PropType } from 'vue';
+/**
+ * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpickerprops %) component.
+ */
+export interface FlatColorPickerProps {
+    /**
+     * Sets the `id` property of the top `div` element of the FlatColorPicker.
+     */
+    id?: string;
+    /**
+     * Sets the color model value.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the FlatColorPicker.
+     */
+    modelRgbaValue?: string;
+    /**
+     * Sets the color value.
+     */
+    value?: string;
+    /**
+     * Sets the previous color value.
+     */
+    prevValue?: string;
+    /**
+     * Sets the `tabIndex` property of the FlatColorPicker.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the FlatColorPicker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the FlatColorPicker view. The default is `combo`.
+     */
+    view?: 'combo' | 'gradient' | 'palette' | string;
+    /**
+     * Sets the FlatColorPicker selected view index. The default is `0`.
+     */
+    selectedView?: number;
+    /**
+     * Sets custom header component.
+     */
+    header?: any;
+    /**
+     * Sets custom footer component.
+     */
+    footer?: any;
+    /**
+     * Specifies whether clear button will be rendered in the header.
+     */
+    showClearButton?: boolean;
+    /**
+     * Specifies whether preview and revert color boxes will be rendered in the header.
+     */
+    showPreview?: boolean;
+    /**
+     * Specifies whether action buttons will be rendered in the footer.
+     */
+    showButtons?: boolean;
+    /**
+     * Configures the ColorPalette that is displayed in the ColorPicker popup.
+     */
+    paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup.
+     */
+    gradientSettings?: ColorGradientProps;
+    /**
+     * Configures the `size` of the FlatColorPicker.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The event handler that will be fired when the view is changed.
+     */
+    onViewchange?: (event: FlatColorPickerViewChangeEvent) => void;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPickerChangeEvent) => void;
+    /**
+     * @hidden
+     * Internal prop that determines whether the ColorGradient is in adaptive state.
+     */
+    adaptive?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the FlatColorPicker.
+     */
+    props: FlatColorPickerProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+declare const FlatColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    value: PropType<string>;
+    prevValue: PropType<string>;
+    tabIndex: PropType<number>;
+    disabled: PropType<boolean>;
+    view: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    selectedView: {
+        type: PropType<number>;
+        default: any;
+    };
+    header: PropType<any>;
+    footer: PropType<any>;
+    showClearButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showButtons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    gradientSettings: {
+        type: PropType<ColorGradientProps>;
+        default: () => {
+            opacity: boolean;
+        };
+    };
+    paletteSettings: {
+        type: PropType<ColorPickerPaletteSettings>;
+        default: () => {
+            palette: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    adaptive: PropType<boolean>;
+}>, {}, {
+    currentView: string;
+    colorValue: string | Function;
+    currentPrevColor: string | Function;
+    focused: boolean;
+}, {
+    isColorGradient(): boolean;
+    computedColor(): any;
+    computedPrevColor(): any;
+    previewClass(): {
+        'k-coloreditor-preview-color': boolean;
+        'k-color-preview': boolean;
+        'k-no-color': boolean;
+    };
+    currentClass(): {
+        'k-coloreditor-current-color': boolean;
+        'k-color-preview': boolean;
+        'k-no-color': boolean;
+    };
+    computedTabIndex(): 0 | -1;
+}, {
+    focus(): void;
+    onKeyDownHandler(e: any): void;
+    handleViewChange(event: any, viewType: any): void;
+    handleResetColor(): void;
+    handleColorChange(event: any): void;
+    handlePaletteColorChange(event: any): void;
+    triggerChange(event: any): void;
+    innerKeyDown(event: any): void;
+    gradientKeyDown(event: any): void;
+    handleButtonKeydown(e: any): void;
+    handleCancelBtnClick(): void;
+    handlePrevColorClick(): void;
+    onFocus(event: FocusEvent): void;
+    onBlur(event: FocusEvent): void;
+    onFocusout(event: FocusEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    viewchange: (event: FlatColorPickerViewChangeEvent) => true;
+    changemodel: (value: string) => true;
+    'update:modelValue': (value: string) => true;
+    'update:modelRgbaValue': (value: string) => true;
+    focus: (event: FlatColorPickerFocusEvent) => true;
+    blur: (event: FlatColorPickerBlurEvent) => true;
+    focusout: (event: FlatColorPickerFocusoutEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    change: (event: ColorPickerChangeEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: PropType<string>;
+    modelRgbaValue: PropType<string>;
+    value: PropType<string>;
+    prevValue: PropType<string>;
+    tabIndex: PropType<number>;
+    disabled: PropType<boolean>;
+    view: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    selectedView: {
+        type: PropType<number>;
+        default: any;
+    };
+    header: PropType<any>;
+    footer: PropType<any>;
+    showClearButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    showButtons: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    gradientSettings: {
+        type: PropType<ColorGradientProps>;
+        default: () => {
+            opacity: boolean;
+        };
+    };
+    paletteSettings: {
+        type: PropType<ColorPickerPaletteSettings>;
+        default: () => {
+            palette: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    adaptive: PropType<boolean>;
+}>> & Readonly<{
+    onBlur?: (event: FlatColorPickerBlurEvent) => any;
+    onChange?: (event: ColorPickerChangeEvent) => any;
+    onFocus?: (event: FlatColorPickerFocusEvent) => any;
+    onFocusout?: (event: FlatColorPickerFocusoutEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onChangemodel?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+    "onUpdate:modelRgbaValue"?: (value: string) => any;
+    onViewchange?: (event: FlatColorPickerViewChangeEvent) => any;
+}>, {
+    view: string;
+    showClearButton: boolean;
+    selectedView: number;
+    showPreview: boolean;
+    showButtons: boolean;
+    gradientSettings: ColorGradientProps;
+    paletteSettings: ColorPickerPaletteSettings;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { FlatColorPicker };

package/colors/FlatColorPicker.mjs

@@ -7,7 +7,7 @@
  */
 import { defineComponent as T, h as l, createVNode as t, isVNode as z } from "vue";
 import { dropletSliderIcon as F, paletteIcon as L, dropletSlashIcon as R } from "@progress/kendo-svg-icons";
-import { Keys as c, focusContainer as M, focusFirstFocusableChild as G, templateRendering as h, getListeners as p, getTemplate as g, classNames as D, getTabIndex as j, kendoThemeMaps as N, Icon as u, validatePackage as E, setRef as m } from "@progress/kendo-vue-common";
+import { Keys as c, focusContainer as M, focusFirstFocusableChild as G, templateRendering as h, getListeners as p, getTemplate as g, classNames as D, kendoThemeMaps as j, getTabIndex as N, Icon as u, validatePackage as E, setRef as m } from "@progress/kendo-vue-common";
 import { ButtonGroup as O, Button as a } from "@progress/kendo-vue-buttons";
 import { DEFAULT_PRESET as A, ColorPalette as _ } from "./ColorPalette.mjs";
 import { ColorGradient as H } from "./ColorGradient.mjs";
@@ -162,13 +162,13 @@ const ne = /* @__PURE__ */ T({
       });
     };
     return t("div", {
-      tabindex: j(this.$props.tabIndex, this.$props.disabled),
+      tabindex: N(this.$props.tabIndex, this.$props.disabled),
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onFocusout: this.onFocusout,
       onKeydown: this.onKeyDownHandler,
       class: D("k-flatcolorpicker k-coloreditor", {
-        [`k-coloreditor-${N.sizeMap[e] || e}`]: e,
+        [`k-coloreditor-${j.sizeMap[e] || e}`]: e,
         "k-disabled": this.$props.disabled
       }),
       "aria-disabled": this.$props.disabled

package/colors/HexInput.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { HexInputFocusEvent } from './interfaces/HexInputFocusEvent';
+import { HexInputBlurEvent } from './interfaces/HexInputBlurEvent';
+/**
+ * @hidden
+ */
+export interface HexInputProps {
+    tabIndex: number;
+    hex: string;
+    onHexChange?: any;
+    disabled?: boolean;
+    id?: string;
+    size?: 'small' | 'medium' | 'large' | null;
+}
+/**
+ * @hidden
+ */
+declare const HexInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabIndex: PropType<number>;
+    hex: PropType<string>;
+    disabled: PropType<boolean>;
+    id: PropType<string>;
+    size: PropType<"small" | "medium" | "large">;
+}>, {}, {
+    currentHex: string;
+    originalHex: string;
+}, {
+    isHexValid(): boolean;
+}, {
+    onChange(event: any): void;
+    onBlur(event: FocusEvent): void;
+    onFocus(event: FocusEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    hexchange: (hex: string) => true;
+    blur: (event: HexInputBlurEvent) => true;
+    focus: (event: HexInputFocusEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabIndex: PropType<number>;
+    hex: PropType<string>;
+    disabled: PropType<boolean>;
+    id: PropType<string>;
+    size: PropType<"small" | "medium" | "large">;
+}>> & Readonly<{
+    onBlur?: (event: HexInputBlurEvent) => any;
+    onFocus?: (event: HexInputFocusEvent) => any;
+    onHexchange?: (hex: string) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { HexInput };

package/colors/Picker.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Align } from '@progress/kendo-vue-popup';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const Picker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    popupSettings: PropType<import('./interfaces/PickerPopupSettings').PickerPopupSettings>;
+    dir: PropType<string>;
+    open: PropType<boolean>;
+    popupAnchor: PropType<String>;
+    id: PropType<String>;
+    onOpen: PropType<() => void>;
+}>, {}, {}, {
+    horizontalAlign(): 'right' | 'left';
+    anchorAlign(): Align;
+    popupAlign(): Align;
+}, {
+    handleOpen(): void;
+    handleClose(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    popupSettings: PropType<import('./interfaces/PickerPopupSettings').PickerPopupSettings>;
+    dir: PropType<string>;
+    open: PropType<boolean>;
+    popupAnchor: PropType<String>;
+    id: PropType<String>;
+    onOpen: PropType<() => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Picker };

package/colors/common/ColorsAdaptiveMode.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/** @hidden */
+export interface AdaptiveModeProps {
+    expand?: boolean;
+    animationStyles?: object;
+    classNameAdaptive?: string;
+    title?: string;
+    componentToRender?: object;
+    applyText?: string;
+    cancelText?: string;
+}
+/**
+ * @hidden
+ */
+declare const ColorsAdaptiveMode: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    expand: PropType<boolean>;
+    animationStyles: PropType<object>;
+    classNameAdaptive: PropType<string>;
+    title: PropType<string>;
+    componentToRender: PropType<object>;
+    applyText: PropType<string>;
+    cancelText: PropType<string>;
+}>, {}, {}, {}, {
+    onClose(): void;
+    onCancel(): void;
+    onApply(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("actionSheetClose" | "cancelBtnClick" | "applyBtnClick")[], "actionSheetClose" | "cancelBtnClick" | "applyBtnClick", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    expand: PropType<boolean>;
+    animationStyles: PropType<object>;
+    classNameAdaptive: PropType<string>;
+    title: PropType<string>;
+    componentToRender: PropType<object>;
+    applyText: PropType<string>;
+    cancelText: PropType<string>;
+}>> & Readonly<{
+    onActionSheetClose?: (...args: any[]) => any;
+    onCancelBtnClick?: (...args: any[]) => any;
+    onApplyBtnClick?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ColorsAdaptiveMode };

package/colors/interfaces/ColorGradientBlurEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onBlur` ColorGradient event.
+ */
+export interface ColorGradientBlurEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/ColorGradientChangeEvent.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onChange` ColorGradient event.
+ */
+export interface ColorGradientChangeEvent {
+    /**
+     * The current value of the ColorGradient.
+     */
+    value: string;
+    /**
+     * The current value of the ColorGradient in RGBA format.
+     */
+    rgbaValue: string;
+    /**
+     * The native Event from the DOM.
+     */
+    event: Event;
+    /**
+     * The ColorGradient component instance.
+     */
+    target?: any;
+}

package/colors/interfaces/ColorGradientFocusEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` ColorGradient event.
+ */
+export interface ColorGradientFocusEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/ColorGradientProps.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorGradientChangeEvent } from './ColorGradientChangeEvent';
+/**
+ * Represents the props of the [Kendo UI for Vue ColorGradient component]({% slug overview_colorgradient %}).
+ */
+export interface ColorGradientProps {
+    /**
+     * The model value of the ColorGradient.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorGradient.
+     */
+    modelRgbaValue?: string;
+    /**
+     * The default value of the ColorGradient.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorGradient.
+     */
+    value?: string;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorGradientChangeEvent) => void;
+    /**
+     * Represents the focus event.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     */
+    opacity?: boolean;
+    /**
+     * Enables the color contrast tool.
+     * Sets the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between two colors.
+     * Currently, only the RGBA format is supported.
+     */
+    backgroundColor?: string;
+    /**
+     * Determines whether the ColorGradient is disabled
+     * ([more information and example]({% slug disabled_colorgradient %})).
+     *
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorGradient.
+     */
+    tabIndex?: number;
+    /**
+     * Sets tabindex of the inner components of the ColorGradient.
+     */
+    innerTabIndex?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS classes to the ColorGradient.
+     */
+    class?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_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;
+    /**
+     * Configures the `size` of the ColorGradient.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     * Internal prop that determines whether the ColorGradient is in adaptive state.
+     */
+    adaptive?: boolean;
+}

package/colors/interfaces/ColorPaletteBlurEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onBlur` ColorPalette event.
+ */
+export interface ColorPaletteBlurEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/ColorPaletteChangeEvent.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onChange` ColorPalette event.
+ */
+export interface ColorPaletteChangeEvent {
+    /**
+     * The current value of the ColorPalette.
+     */
+    value: string;
+    /**
+     * The current value of the ColorPalette in RGBA format.
+     */
+    rgbaValue: string;
+    /**
+     * The native Event from the DOM.
+     */
+    event: Event;
+    /**
+     * The ColorPalette component instance.
+     */
+    component?: any;
+}

package/colors/interfaces/ColorPaletteFocusEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` ColorPalette event.
+ */
+export interface ColorPaletteFocusEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}