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

package/colors/interfaces/ColorPaletteProps.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileSize } from '../models/tile-size';
+import { ColorPaletteChangeEvent } from './ColorPaletteChangeEvent';
+/**
+ * Represents the props of the [KendoVue ColorPalette component]({% slug overview_colorpalette %}).
+ */
+export interface ColorPaletteProps {
+    /**
+     * The color palette that will be displayed.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string array.
+     */
+    palette?: string[] | string;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     */
+    columns?: number;
+    /**
+     * Specifies the size of a color cell in px.
+     * Defaults to `24`.
+     */
+    tileSize?: number | TileSize;
+    /**
+     * The default value of the ColorPalette.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the ColorPalette.
+     */
+    value?: string;
+    /**
+     * The model value of the ColorPalette.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorPalette.
+     */
+    modelRgbaValue?: string;
+    /**
+     * Determines whether the ColorPalette is disabled
+     * ([more information and example]({% slug disabled_colorpalette %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorPalette.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS classes to the ColorPalette.
+     */
+    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 ColorPalette.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPaletteChangeEvent) => void;
+    /**
+     * Represent the focus event of the ColorPalette.
+     */
+    onFocus?: (event: FocusEvent) => void;
+}

package/colors/interfaces/ColorPickerActiveColorClick.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 `onActiveColorClick` ColorPicker event.
+ */
+export interface ColorPickerActiveColorClick {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * The native Event from the DOM.
+     */
+    event: Event;
+    /**
+     * The ColorPicker component instance.
+     */
+    target?: any;
+}

package/colors/interfaces/ColorPickerBlurEvent.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` ColorPicker event.
+ */
+export interface ColorPickerBlurEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/ColorPickerChangeEvent.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` ColorPicker event.
+ */
+export interface ColorPickerChangeEvent {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * The current value of the ColorPicker in RGBA format.
+     */
+    rgbaValue: string;
+    /**
+     * The event from the child component (ColorPalette or FlatColorPicker).
+     */
+    event: any;
+    /**
+     * The ColorPicker component instance.
+     */
+    target?: any;
+}

package/colors/interfaces/ColorPickerFocusEvent.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` ColorPicker event.
+ */
+export interface ColorPickerFocusEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/ColorPickerPaletteSettings.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TileSize } from '../models/tile-size';
+/**
+ * The settings of the ColorPalette that is nested inside the popup of the ColorPicker
+ * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
+ */
+export interface ColorPickerPaletteSettings {
+    /**
+     * Specifies the set of colors.
+     * Provides a set of predefined palette presets (for example, `office`, `basic`, and `apex`)
+     * and enables you to implement a custom color palette.
+     * Defaults to the `office` preset.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string with comma-separated colors.
+     * * A string array.
+     */
+    palette?: string | Array<string>;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     */
+    columns?: number;
+    /**
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `24`
+     * * `{ width: number, height: number }`
+     */
+    tileSize?: number | TileSize;
+}

package/colors/interfaces/ColorPickerPopupSettings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * The settings of the popup container of the ColorPicker.
+ */
+export interface ColorPickerPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+}

package/colors/interfaces/ColorPickerProps.d.ts

@@ -0,0 +1,190 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerBlurEvent } from './ColorPickerBlurEvent';
+import { ColorPickerFocusEvent } from './ColorPickerFocusEvent';
+import { ColorPickerChangeEvent } from './ColorPickerChangeEvent';
+import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
+import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
+import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
+import { ColorPickerView } from './ColorPickerView';
+import { ColorGradientProps } from './ColorGradientProps';
+import { FlatColorPickerProps } from '../FlatColorPicker';
+import { SVGIcon } from '@progress/kendo-vue-common';
+/**
+ * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
+ */
+export interface ColorPickerProps {
+    /**
+     * The default value of the ColorPicker
+     * ([see example]({% slug default_value_colorpicker %})).
+     */
+    defaultValue?: string;
+    /**
+     * Specifies the model value of the ColorPicker.
+     */
+    modelValue?: string;
+    /**
+     * The model rgba value of the ColorPicker.
+     */
+    modelRgbaValue?: string;
+    /**
+     * Specifies the value of the ColorPicker.
+     */
+    value?: string;
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     */
+    valid?: boolean;
+    /**
+     * Sets the disabled state of the ColorPicker
+     * ([see example]({% slug disabled_colorpicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `tabIndex` property of the ColorPicker.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `title` property of the ColorPicker.
+     */
+    title?: string;
+    /**
+     * Sets the ColorPicker selected view index. The default is `0`.
+     */
+    selectedView?: number;
+    /**
+     * Sets the view which the ColorPicker will render in the popup
+     * ([see example]({% slug combinedview_colorpicker %})).
+     */
+    view?: ColorPickerView | string;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * 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;
+    /**
+     * Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the ColorPicker button.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * The class name which displays an icon in the ColorPicker button
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).
+     */
+    iconClassName?: string;
+    /**
+     * Configures the ColorPalette that is displayed in the ColorPicker popup
+     * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
+     */
+    paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup.
+     */
+    gradientSettings?: ColorGradientProps;
+    /**
+     * Configures the FlatColorPicker that is displayed in the ColorPicker popup.
+     */
+    flatColorPickerSettings?: FlatColorPickerProps;
+    /**
+     * Configures the popup of the ColorPicker.
+     */
+    popupSettings?: ColorPickerPopupSettings;
+    /**
+     * Sets the open and close state of the ColorPicker.
+     */
+    open?: boolean;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: 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;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPickerChangeEvent) => void;
+    /**
+     * The event handler that will be fired when ColorPicker is focused.
+     */
+    onFocus?: (event: ColorPickerFocusEvent) => void;
+    /**
+     * The event handler that will be fired when ColorPicker is blurred.
+     */
+    onBlur?: (event: ColorPickerBlurEvent) => void;
+    /**
+     * The event handler that will be fired when the left side of the ColorPicker is clicked.
+     */
+    onActivecolorclick?: (event: ColorPickerActiveColorClick) => void;
+    /**
+     * Configures the `size` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ColorPicker.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ColorPicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     *
+     * @default undefined
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+}

package/colors/interfaces/ColorPickerView.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the view which the ColorPicker will render in the popup
+ * ([see example]({% slug combinedview_colorpicker %})).
+ *
+ * The possible values are:
+ * * (Default) `palette`
+ * * `gradient`
+ * * `combo`
+ */
+export type ColorPickerView = 'gradient' | 'palette' | 'combo';

package/colors/interfaces/FlatColorPickerBlurEvent.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` event of the FlatColorPicker.
+ */
+export interface FlatColorPickerBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/FlatColorPickerFocusEvent.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` event of the FlatColorPicker.
+ */
+export interface FlatColorPickerFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/FlatColorPickerFocusoutEvent.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 `onFocusout` event of the FlatColorPicker.
+ */
+export interface FlatColorPickerFocusoutEvent {
+    /**
+     * The native browser focusout event.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/FlatColorPickerViewChangeEvent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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` ColorPicker event.
+ */
+export interface FlatColorPickerViewChangeEvent {
+    /**
+     * The current value of the ColorPicker.
+     */
+    value: string;
+    /**
+     * The viewType of the selected view.
+     */
+    viewType: 'gradient' | 'palette';
+}

package/colors/interfaces/HexInputBlurEvent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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` event of the HexInput.
+ * @hidden
+ */
+export interface HexInputBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/HexInputFocusEvent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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` event of the HexInput.
+ * @hidden
+ */
+export interface HexInputFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}

package/colors/interfaces/PickerPopupSettings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupAnimation } from '@progress/kendo-vue-popup';
+/**
+ * @hidden
+ */
+export interface PickerPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that will be added to the Popup element.
+     */
+    className?: string | Array<string>;
+}

package/colors/interfaces/PickerProps.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PickerPopupSettings } from './PickerPopupSettings';
+/**
+ * @hidden
+ */
+export interface PickerProps {
+    /**
+     * The popup settings.
+     */
+    popupSettings: PickerPopupSettings;
+    /**
+     * The rendered input element.
+     */
+    input?: any;
+    /**
+     * The rendered button element.
+     */
+    button?: any;
+    /**
+     * The content of the popup.
+     */
+    content?: any;
+    /**
+     * The `direction` CSS property of the popup content.
+     */
+    dir?: string;
+    /**
+     * The open state of the popup.
+     */
+    open: boolean;
+    /**
+     * Specifies the element which will be used as an anchor for the popup. The popup opens next to that element.
+     */
+    popupAnchor?: String;
+    /**
+     * Specifies the id for the popup.
+     */
+    id?: String;
+    /**
+     * @hidden
+     */
+    onOpen?: () => void;
+    /**
+     * @hidden
+     */
+    onClose?: () => void;
+}

package/colors/models/hsva.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface HSVA {
+    h?: number;
+    s?: number;
+    v?: number;
+    a?: number;
+}

package/colors/models/output-format.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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 type OutputFormat = 'hex' | 'rgba';