@progress/kendo-react-inputs 13.3.0-develop.9 → 13.4.0-develop.1

package/colors/ColorGradient.d.ts

@@ -0,0 +1,215 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { DraggableDragEvent } from '@progress/kendo-react-common';
+import { SliderChangeEvent } from './../slider/Slider.js';
+import { NumericTextBoxChangeEvent } from './../numerictextbox/interfaces/NumericTextBoxChangeEvent.js';
+import { HSVA } from './models/hsva.js';
+import { RGBA } from './models/rgba.js';
+import { ColorGradientProps } from './interfaces/ColorGradientProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ColorGradientState {
+    hsva: HSVA;
+    backgroundColor: string;
+    rgba: RGBA;
+    hex: string;
+    isFirstRender: boolean;
+    guid: string;
+}
+/** @hidden */
+export declare class ColorGradientWithoutContext extends React.Component<ColorGradientProps, ColorGradientState> {
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        defaultValue: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        opacity: PropTypes.Requireable<boolean>;
+        backgroundColor: PropTypes.Requireable<string>;
+        format: PropTypes.Requireable<any>;
+        disabled: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<any>;
+        id: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string | null>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        opacity: boolean;
+        role: string;
+        format: "hex" | "rgba" | "rgb";
+        size: undefined;
+    };
+    /**
+     * @hidden
+     */
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * @hidden
+     */
+    hsvGradientRef: React.RefObject<HTMLDivElement | null>;
+    private gradientWrapper;
+    private alphaSlider;
+    private navigation?;
+    private hsvNavigation?;
+    private readonly showLicenseWatermark;
+    private resizeObserver;
+    private readonly licenseMessage?;
+    constructor(props: ColorGradientProps);
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState): {
+        hsva: any;
+        backgroundColor: string;
+        rgba: any;
+        hex: any;
+    } | null;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(_: ColorGradientProps, prevState: ColorGradientState): void;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    onHexChange: (hex: string, value: string, event: any) => void;
+    /**
+     * @hidden
+     */
+    onRgbaChange: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onAlphaSliderChange: (event: SliderChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onHueSliderChange: (event: SliderChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onDrag: (e: DraggableDragEvent) => void;
+    /**
+     * @hidden
+     */
+    onRelease: () => void;
+    /**
+     * @hidden
+     */
+    onGradientWrapperClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onHsvGradientValueChange: (element: HTMLElement, moveX: number, moveY: number) => void;
+    /**
+     * @hidden
+     */
+    renderRectangleDragHandle(): React.JSX.Element;
+    /**
+     * @hidden
+     */
+    changePosition: (event: any) => void;
+    /**
+     * @hidden
+     */
+    moveDragHandle(positionX: number, positionY: number): void;
+    /**
+     * @hidden
+     */
+    handleHsvaChange(hsva: HSVA, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any): void;
+    /**
+     * @hidden
+     */
+    dispatchChangeEvent(value: string, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any): void;
+    /**
+     * @hidden
+     */
+    onFocus: (nativeEvent: any) => void;
+    /**
+     * @hidden
+     */
+    static getStateFromValue(value: string, componentGuid?: string): {
+        hsva: any;
+        backgroundColor: string;
+        rgba: any;
+        hex: any;
+    };
+    /**
+     * @hidden
+     */
+    setAlphaSliderBackground(backgroundColor: string): void;
+    /**
+     * @hidden
+     */
+    get isUncontrolled(): boolean;
+    /**
+     * @hidden
+     */
+    getGradientRectMetrics(): DOMRect;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private onKeyDown;
+}
+/**
+ * Represents the PropsContext of the `ColorGradient` component.
+ * Used for global configuration of all `ColorGradient` instances.
+ *
+ * For more information, refer to the [Inputs Props Context](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const ColorGradientPropsContext: React.Context<(p: ColorGradientProps) => ColorGradientProps>;
+/**
+ * Represent the `ref` of the ColorGradient component.
+ */
+export interface ColorGradientHandle extends Pick<ColorGradientWithoutContext, keyof ColorGradientWithoutContext> {
+}
+/** @hidden */
+export type ColorGradient = ColorGradientHandle;
+/**
+ * Represents the [KendoReact ColorGradient component](https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient).
+ *
+ * Accepts properties of type [ColorGradientProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorgradientprops).
+ * Obtaining the `ref` returns an object of type [ColorGradientHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/colorgradienthandle).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *     return <ColorGradient />;
+ * }
+ * ```
+ */
+export declare const ColorGradient: React.ForwardRefExoticComponent<ColorGradientProps & React.RefAttributes<any>>;

package/colors/ColorGradient.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"});const w=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),m=require("../package-metadata.js"),k=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),H=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),L=require("./ColorContrastSvg.js"),G=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(w),A="rgba",S="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(m.packageMetadata,{component:"ColorGradient"}),this.licenseMessage=r.getLicenseMessage(m.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(S,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.gradientWrapper&&(this.resizeObserver=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(()=>{this.forceUpdate()}),this.resizeObserver&&this.resizeObserver.observe(this.gradientWrapper)),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),E=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(E,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=S);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=G.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.element:void 0}},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(k.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(k.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(H,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,{message:this.licenseMessage}))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const R=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(R,f));y.displayName="KendoReactColorGradient";exports.ColorGradient=y;exports.ColorGradientPropsContext=R;exports.ColorGradientWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),m=require("../package-metadata.js"),k=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),H=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),L=require("./ColorContrastSvg.js"),G=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(w),A="rgba",S="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(m.packageMetadata,{component:"ColorGradient"}),this.licenseMessage=r.getLicenseMessage(m.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(S,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.gradientWrapper&&(this.resizeObserver=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(()=>{this.forceUpdate()}),this.resizeObserver&&this.resizeObserver.observe(this.gradientWrapper)),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),E=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(E,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=S);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=G.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.element:void 0}},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(k.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(k.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(H,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,{message:this.licenseMessage}))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:void 0};let f=c;const R=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(R,f));y.displayName="KendoReactColorGradient";exports.ColorGradient=y;exports.ColorGradientPropsContext=R;exports.ColorGradientWithoutContext=f;

package/colors/ColorGradient.mjs

@@ -7,11 +7,11 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { validatePackage as F, getLicenseMessage as G, canUseDOM as M, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, keepFocusInContainer as A, TABBABLE_ELEMENTS as N, focusFirstFocusableChild as I, enableNavigatableContainer as _, getTabIndex as k, classNames as T, kendoThemeMaps as O, Draggable as z, WatermarkOverlay as B, createPropsContext as P, withIdHOC as V, withPropsContext as K } from "@progress/kendo-react-common";
+import { withIdHOC as F, createPropsContext as G, withPropsContext as M, validatePackage as A, getLicenseMessage as N, canUseDOM as I, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, focusFirstFocusableChild as _, enableNavigatableContainer as T, keepFocusInContainer as O, TABBABLE_ELEMENTS as z, getTabIndex as k, classNames as B, kendoThemeMaps as P, Draggable as V, WatermarkOverlay as K } from "@progress/kendo-react-common";
 import { packageMetadata as R } from "../package-metadata.mjs";
 import { Slider as S } from "../slider/Slider.mjs";
 import { isPresent as y, fitIntoBounds as E } from "./utils/misc.mjs";
-import { getHSV as u, getColorFromHue as p, getRGBA as c, getColorFromRGBA as U, parseColor as d, getColorFromHSV as W } from "./utils/color-parser.mjs";
+import { getHSV as u, getRGBA as p, getColorFromHue as c, getColorFromRGBA as U, parseColor as d, getColorFromHSV as W } from "./utils/color-parser.mjs";
 import { cacheHex as $, cacheRgba as j, removeCachedColor as X, cacheHsva as Y, getCachedHsva as q, getCachedRgba as J, getCachedHex as Q } from "./utils/color-cache.mjs";
 import Z from "./ColorInput.mjs";
 import { ColorContrastLabels as ee } from "./ColorContrastLabels.mjs";
@@ -25,7 +25,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
         const n = u(s);
-        this.setState({ hsva: n, backgroundColor: p(n.h), rgba: c(s), hex: e });
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
         $(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
@@ -33,7 +33,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       const i = U(e);
       if (this.isUncontrolled) {
         const n = u(i), l = d(i, "hex");
-        this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
+        this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
         j(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
@@ -69,7 +69,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, this.showLicenseWatermark = !F(R, { component: "ColorGradient" }), this.licenseMessage = G(R);
+    }, this.showLicenseWatermark = !A(R, { component: "ColorGradient" }), this.licenseMessage = N(R);
     const a = t.value || t.defaultValue || d(L, ae);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
@@ -86,7 +86,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   componentDidMount() {
-    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = M && window.ResizeObserver && new window.ResizeObserver(() => {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = I && window.ResizeObserver && new window.ResizeObserver(() => {
       this.forceUpdate();
     }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
@@ -119,10 +119,10 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            b(document) === t ? C(t) : A(e, t, N);
+            b(document) === t ? C(t) : O(e, t, z);
           },
           Enter: (t, a, e) => {
-            b(document) === t && (I(t), _(t));
+            b(document) === t && (_(t), T(t));
           },
           Escape: (t, a, e) => {
             b(document) !== t && (t.focus(), C(t));
@@ -184,7 +184,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    */
   handleHsvaChange(t, a, e) {
     const s = W(t), i = d(s, "hex");
-    this.isUncontrolled || Y(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
+    this.isUncontrolled || Y(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -202,7 +202,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    */
   static getStateFromValue(t, a) {
     y(d(t, "hex")) || (t = L);
-    const e = q(a, t) || u(t), s = J(a, t) || c(t), i = Q(a, t) || d(t, "hex"), n = p(e.h);
+    const e = q(a, t) || u(t), s = J(a, t) || p(t), i = Q(a, t) || d(t, "hex"), n = c(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -233,10 +233,10 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       {
         id: this.props.id,
         role: this.props.role,
-        className: T(
+        className: B(
           "k-colorgradient",
           {
-            [`k-colorgradient-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${P.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -252,7 +252,7 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         onKeyDown: this.onKeyDown
       },
       /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        z,
+        V,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -325,11 +325,12 @@ const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           disabled: this.props.disabled,
           defaultInputMode: this.props.format,
           size: this.props.size,
-          fillMode: this.props.fillMode
+          fillMode: this.props.fillMode,
+          rounded: this.props.rounded
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ee, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(B, { message: this.licenseMessage })
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ee, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(K, { message: this.licenseMessage })
     );
   }
 };
@@ -354,11 +355,11 @@ h.displayName = "ColorGradient", h.propTypes = {
   opacity: !0,
   role: "textbox",
   format: "rgb",
-  size: "medium"
+  size: void 0
 };
 let m = h;
-const ie = P(), re = V(
-  K(
+const ie = G(), re = F(
+  M(
     ie,
     m
   )

package/colors/ColorInput.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { NumericTextBoxChangeEvent } from '../numerictextbox/interfaces/NumericTextBoxChangeEvent.js';
+import { RGBA } from './models/rgba.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ColorInputProps {
+    rgba: RGBA;
+    onRgbaChange: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    hex: string;
+    onHexChange: any;
+    opacity: boolean;
+    disabled?: boolean;
+    defaultInputMode?: 'rgba' | 'rgb' | 'hex';
+    size?: 'small' | 'medium' | 'large';
+    fillMode?: 'solid' | 'outline' | 'flat';
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+}
+/**
+ * @hidden
+ */
+export default class ColorInput extends React.Component<ColorInputProps, {
+    inputMode: string;
+}> {
+    constructor(props: ColorInputProps);
+    render(): React.JSX.Element;
+    private onRgbaRChange;
+    private onRgbaGChange;
+    private onRgbaBChange;
+    private onRgbaAChange;
+    private dispatchRgbaChange;
+    private onToggleModeChange;
+}

package/colors/ColorInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const b=require("react"),n=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),u=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function x(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=x(b),o=["rgba","rgb","hex"];class g extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||o[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),i=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),c=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),p=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),d=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(u.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:f.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",size:this.props.size,onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},i)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},c)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),a.createElement("label",{className:"k-colorgradient-input-label"},p))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(n.NumericTextBox,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},d)))}dispatchRgbaChange(e,t){const i={...this.props.rgba};e.r!==void 0&&(i.r=e.r),e.g!==void 0&&(i.g=e.g),e.b!==void 0&&(i.b=e.b),e.a!==void 0&&(i.a=e.a),this.props.onRgbaChange(i,t)}onToggleModeChange(){const e=o.length-1===o.indexOf(this.state.inputMode)?0:o.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:o[e]});else{const t=o[e]==="rgba"?e+1:e;this.setState({inputMode:o[t]})}}}l.registerForIntl(g);l.registerForLocalization(g);module.exports=g;
+"use strict";const u=require("react"),n=require("../numerictextbox/NumericTextBox.js"),b=require("./HexInput.js"),m=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function x(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=x(u),i=["rgba","rgb","hex"];class g extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||i[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientHex,s.messages[s.colorGradientHex]),o=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),c=e.toLanguageString(s.colorGradientG,s.messages[s.colorGradientG]),d=e.toLanguageString(s.colorGradientB,s.messages[s.colorGradientB]),p=e.toLanguageString(s.colorGradientA,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(m.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:f.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement(b,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},o)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},c)),a.createElement("div",{className:"k-vstack"},a.createElement(n.NumericTextBox,{value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),a.createElement("label",{className:"k-colorgradient-input-label"},d))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(n.NumericTextBox,{value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},p)))}dispatchRgbaChange(e,t){const o={...this.props.rgba};e.r!==void 0&&(o.r=e.r),e.g!==void 0&&(o.g=e.g),e.b!==void 0&&(o.b=e.b),e.a!==void 0&&(o.a=e.a),this.props.onRgbaChange(o,t)}onToggleModeChange(){const e=i.length-1===i.indexOf(this.state.inputMode)?0:i.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:i[e]});else{const t=i[e]==="rgba"?e+1:e;this.setState({inputMode:i[t]})}}}l.registerForIntl(g);l.registerForLocalization(g);module.exports=g;

package/colors/ColorInput.mjs

@@ -11,9 +11,9 @@ import M from "./HexInput.mjs";
 import { Button as v } from "@progress/kendo-react-buttons";
 import { caretAltExpandIcon as x } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as C, registerForIntl as k, registerForLocalization as E } from "@progress/kendo-react-intl";
-import { colorGradientHex as n, messages as o, colorGradientR as l, colorGradientG as g, colorGradientB as p, colorGradientA as h, colorGradientToggleInputsButton as c } from "../messages/index.mjs";
+import { colorGradientHex as n, messages as o, colorGradientR as l, colorGradientG as p, colorGradientB as g, colorGradientA as d, colorGradientToggleInputsButton as h } from "../messages/index.mjs";
 const i = ["rgba", "rgb", "hex"];
-class d extends t.Component {
+class c extends t.Component {
   constructor(e) {
     super(e), this.onRgbaRChange = (a) => {
       this.dispatchRgbaChange({ r: a.value }, a);
@@ -26,19 +26,18 @@ class d extends t.Component {
     }, this.state = { inputMode: e.defaultInputMode || i[1] };
   }
   render() {
-    const e = C(this), a = e.toLanguageString(n, o[n]), s = e.toLanguageString(l, o[l]), m = e.toLanguageString(g, o[g]), b = e.toLanguageString(p, o[p]), f = e.toLanguageString(h, o[h]), u = e.toLanguageString(
-      c,
-      o[c]
+    const e = C(this), a = e.toLanguageString(n, o[n]), s = e.toLanguageString(l, o[l]), m = e.toLanguageString(p, o[p]), b = e.toLanguageString(g, o[g]), u = e.toLanguageString(d, o[d]), f = e.toLanguageString(
+      h,
+      o[h]
     );
     return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
       v,
       {
-        "aria-label": u,
+        "aria-label": f,
         fillMode: "flat",
         icon: "caret-alt-expand",
         svgIcon: x,
         className: "k-colorgradient-toggle-mode",
-        size: this.props.size,
         onClick: this.onToggleModeChange.bind(this)
       }
     )), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement(
@@ -48,7 +47,8 @@ class d extends t.Component {
         onHexChange: this.props.onHexChange,
         disabled: this.props.disabled,
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
     ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, a)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
       r,
@@ -62,7 +62,8 @@ class d extends t.Component {
         onChange: this.onRgbaRChange,
         disabled: this.props.disabled,
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
     ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
       r,
@@ -76,7 +77,8 @@ class d extends t.Component {
         onChange: this.onRgbaGChange,
         disabled: this.props.disabled,
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
     ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, m)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
       r,
@@ -90,7 +92,8 @@ class d extends t.Component {
         onChange: this.onRgbaBChange,
         disabled: this.props.disabled,
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
     ), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, b))), this.state.inputMode === "rgba" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ t.createElement(
       r,
@@ -105,9 +108,10 @@ class d extends t.Component {
         onChange: this.onRgbaAChange,
         disabled: this.props.disabled,
         size: this.props.size,
-        fillMode: this.props.fillMode
+        fillMode: this.props.fillMode,
+        rounded: this.props.rounded
       }
-    ), this.props.opacity && /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, f)));
+    ), this.props.opacity && /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, u)));
   }
   dispatchRgbaChange(e, a) {
     const s = { ...this.props.rgba };
@@ -123,8 +127,8 @@ class d extends t.Component {
     }
   }
 }
-k(d);
-E(d);
+k(c);
+E(c);
 export {
-  d as default
+  c as default
 };