@progress/kendo-react-inputs 4.11.0-dev.202111050839 → 4.11.0-dev.202111060921

package/dist/es/colors/ColorContrastLabels.js

@@ -44,8 +44,7 @@ var ColorContrastLabels = /** @class */ (function (_super) {
             failMessage,
             " ",
             React.createElement("span", { className: "k-icon k-i-close" })));
-        return (React.createElement("div", { className: "k-vbox k-color-contrast" },
-            React.createElement("span", { className: "k-separator" }),
+        return (React.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" },
             React.createElement("div", { className: "k-contrast-ratio" },
                 React.createElement("span", { className: "k-contrast-ratio-text" }, contrastText),
                 contrast >= 4.5 ? (React.createElement("span", { className: "k-contrast-validation k-text-success" },

package/dist/es/colors/ColorGradient.js

@@ -169,7 +169,7 @@ var ColorGradient = /** @class */ (function (_super) {
             style.top = top_1 + "px";
             style.left = left + "px";
         }
-        return React.createElement("div", { className: "k-draghandle", style: style });
+        return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
     };
     /**
      * @hidden
@@ -236,17 +236,18 @@ var ColorGradient = /** @class */ (function (_super) {
      */
     ColorGradient.prototype.render = function () {
         var _this = this;
-        var className = classNames('k-widget k-flatcolorpicker', { 'k-state-disabled': this.props.disabled });
+        var className = classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
         return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy },
-            React.createElement("div", { className: "k-hbox k-hsv-wrap" },
+            React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
                         React.createElement("div", { className: "k-hsv-gradient", style: { touchAction: 'none' }, onClick: this.onGradientWrapperClick }, this.renderRectangleDragHandle())),
                     this.props.backgroundColor && !this.state.isFirstRender &&
                         React.createElement(ColorContrastSvg, { metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined, hsva: this.state.hsva, backgroundColor: this.props.backgroundColor })),
-                React.createElement("div", { className: "k-hbox k-sliders-wrap" },
-                    React.createElement(Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider", disabled: this.props.disabled }),
-                    this.props.opacity && React.createElement(Slider, { value: isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
+                React.createElement("div", { className: "k-hsv-controls k-hstack" },
+                    React.createElement(Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled }),
+                    this.props.opacity &&
+                        React.createElement(Slider, { value: isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
             React.createElement(ColorInput, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels, { bgColor: getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };

package/dist/es/colors/ColorInput.d.ts

@@ -16,10 +16,14 @@ export interface ColorInputProps {
  * @hidden
  */
 export default class ColorInput extends React.Component<ColorInputProps, {}> {
+    state: {
+        inputMode: string;
+    };
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;
     private onRgbaBChange;
     private onRgbaAChange;
     private dispatchRgbaChange;
+    private onToggleModeChange;
 }

package/dist/es/colors/ColorInput.js

@@ -25,8 +25,14 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import { NumericTextBox } from '../main';
 import HexInput from './HexInput';
+import { Button } from '@progress/kendo-react-buttons';
+import { Label } from '@progress/kendo-react-labels';
 import { registerForIntl, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG } from '../messages';
+/**
+ * @hidden
+ */
+var modes = ['rgb', 'rgba', 'hex'];
 /**
  * @hidden
  */
@@ -34,6 +40,9 @@ var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
     function ColorInput() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            inputMode: modes[1]
+        };
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -55,19 +64,30 @@ var ColorInput = /** @class */ (function (_super) {
         var gMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientG]);
         var bMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientB]);
         var aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
-        return (React.createElement("div", { className: "k-colorinputs" },
-            React.createElement("div", { className: "k-hbox k-gradient-values" },
-                React.createElement(HexInput, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled }),
-                React.createElement(NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
-                React.createElement(NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
-                React.createElement(NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
-                this.props.opacity && React.createElement(NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled })),
-            React.createElement("div", { className: "k-hbox k-gradient-values" },
-                React.createElement("div", { className: "k-hex-value" }, hexMessage),
-                React.createElement("div", null, rMessage),
-                React.createElement("div", null, gMessage),
-                React.createElement("div", null, bMessage),
-                this.props.opacity && (React.createElement("div", null, aMessage)))));
+        return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
+            React.createElement("div", { className: "k-vstack" },
+                React.createElement(Button, { look: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+            this.state.inputMode === 'hex' &&
+                React.createElement("div", { className: "k-vstack k-flex-1" },
+                    React.createElement("span", { className: "k-hex-value k-textbox" },
+                        React.createElement(HexInput, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled })),
+                    React.createElement(Label, { className: "k-colorgradient-input-label" }, hexMessage)),
+            (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&
+                React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
+                        React.createElement(Label, { className: "k-colorgradient-input-label" }, rMessage)),
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
+                        React.createElement(Label, { className: "k-colorgradient-input-label" }, gMessage)),
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
+                        React.createElement(Label, { className: "k-colorgradient-input-label" }, bMessage))),
+            this.state.inputMode === 'rgba' &&
+                React.createElement("div", { className: "k-vstack" },
+                    this.props.opacity &&
+                        React.createElement(NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
+                    this.props.opacity && (React.createElement(Label, { className: "k-colorgradient-input-label" }, aMessage)))));
     };
     ColorInput.prototype.dispatchRgbaChange = function (newValue, event) {
         var rgba = __assign({}, this.props.rgba);
@@ -85,6 +105,17 @@ var ColorInput = /** @class */ (function (_super) {
         }
         this.props.onRgbaChange(rgba, event);
     };
+    ;
+    ColorInput.prototype.onToggleModeChange = function () {
+        var index = modes.length - 1 === modes.indexOf(this.state.inputMode) ? 0 : modes.indexOf(this.state.inputMode) + 1;
+        if (!this.props.opacity) {
+            var nextIndex = modes[index] === 'rgba' ? index + 1 : index;
+            this.setState({ inputMode: modes[nextIndex] });
+        }
+        else {
+            this.setState({ inputMode: modes[index] });
+        }
+    };
     return ColorInput;
 }(React.Component));
 export default ColorInput;

package/dist/es/colors/ColorPalette.js

@@ -116,11 +116,11 @@ var ColorPalette = /** @class */ (function (_super) {
         svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
         var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
-        var className = classNames('k-widget k-colorpalette', { 'k-state-disabled': this.props.disabled });
+        var className = classNames('k-colorpalette', { 'k-state-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
             return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("div", { role: "grid" },
-                    React.createElement("table", { className: "k-palette k-reset", role: "presentation" },
+                React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
+                    React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", null, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }
         else {
@@ -215,9 +215,9 @@ var ColorPalette = /** @class */ (function (_super) {
         var height = tileSize.height + 'px';
         return columns.map(function (color, i) {
             var isSelected = rowIsSelected && selectedColumn === i;
-            var className = classNames('k-item', {
+            var className = classNames('k-colorpalette-tile', {
                 'k-state-selected': isSelected,
-                'k-state-focused': rowIsFocused && focusedColumn === i
+                'k-state-focus': rowIsFocused && focusedColumn === i
             });
             return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
         });

package/dist/es/colors/HexInput.js

@@ -38,7 +38,7 @@ var HexInput = /** @class */ (function (_super) {
         return _this;
     }
     HexInput.prototype.render = function () {
-        return (React.createElement("input", { value: this.state.hex, className: "k-textbox k-hex-value", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
+        return (React.createElement("input", { value: this.state.hex, className: "k-input", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
     };
     HexInput.getDerivedStateFromProps = function (props, state) {
         if (props.hex !== state.originalHex) {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1636100312,
+    publishDate: 1636189475,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/colors/ColorContrastLabels.js

@@ -46,8 +46,7 @@ var ColorContrastLabels = /** @class */ (function (_super) {
             failMessage,
             " ",
             React.createElement("span", { className: "k-icon k-i-close" })));
-        return (React.createElement("div", { className: "k-vbox k-color-contrast" },
-            React.createElement("span", { className: "k-separator" }),
+        return (React.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" },
             React.createElement("div", { className: "k-contrast-ratio" },
                 React.createElement("span", { className: "k-contrast-ratio-text" }, contrastText),
                 contrast >= 4.5 ? (React.createElement("span", { className: "k-contrast-validation k-text-success" },

package/dist/npm/colors/ColorGradient.js

@@ -171,7 +171,7 @@ var ColorGradient = /** @class */ (function (_super) {
             style.top = top_1 + "px";
             style.left = left + "px";
         }
-        return React.createElement("div", { className: "k-draghandle", style: style });
+        return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
     };
     /**
      * @hidden
@@ -238,17 +238,18 @@ var ColorGradient = /** @class */ (function (_super) {
      */
     ColorGradient.prototype.render = function () {
         var _this = this;
-        var className = kendo_react_common_1.classNames('k-widget k-flatcolorpicker', { 'k-state-disabled': this.props.disabled });
+        var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
         return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy },
-            React.createElement("div", { className: "k-hbox k-hsv-wrap" },
+            React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(kendo_react_common_1.Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
                         React.createElement("div", { className: "k-hsv-gradient", style: { touchAction: 'none' }, onClick: this.onGradientWrapperClick }, this.renderRectangleDragHandle())),
                     this.props.backgroundColor && !this.state.isFirstRender &&
                         React.createElement(ColorContrastSvg_1.ColorContrastSvg, { metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined, hsva: this.state.hsva, backgroundColor: this.props.backgroundColor })),
-                React.createElement("div", { className: "k-hbox k-sliders-wrap" },
-                    React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider", disabled: this.props.disabled }),
-                    this.props.opacity && React.createElement(main_1.Slider, { value: misc_1.isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
+                React.createElement("div", { className: "k-hsv-controls k-hstack" },
+                    React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled }),
+                    this.props.opacity &&
+                        React.createElement(main_1.Slider, { value: misc_1.isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
             React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: color_parser_1.getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };

package/dist/npm/colors/ColorInput.d.ts

@@ -16,10 +16,14 @@ export interface ColorInputProps {
  * @hidden
  */
 export default class ColorInput extends React.Component<ColorInputProps, {}> {
+    state: {
+        inputMode: string;
+    };
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;
     private onRgbaBChange;
     private onRgbaAChange;
     private dispatchRgbaChange;
+    private onToggleModeChange;
 }

package/dist/npm/colors/ColorInput.js

@@ -27,8 +27,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var main_1 = require("../main");
 var HexInput_1 = require("./HexInput");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
+/**
+ * @hidden
+ */
+var modes = ['rgb', 'rgba', 'hex'];
 /**
  * @hidden
  */
@@ -36,6 +42,9 @@ var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
     function ColorInput() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            inputMode: modes[1]
+        };
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -57,19 +66,30 @@ var ColorInput = /** @class */ (function (_super) {
         var gMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientG]);
         var bMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientB]);
         var aMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientA]);
-        return (React.createElement("div", { className: "k-colorinputs" },
-            React.createElement("div", { className: "k-hbox k-gradient-values" },
-                React.createElement(HexInput_1.default, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled }),
-                React.createElement(main_1.NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
-                React.createElement(main_1.NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
-                React.createElement(main_1.NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
-                this.props.opacity && React.createElement(main_1.NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled })),
-            React.createElement("div", { className: "k-hbox k-gradient-values" },
-                React.createElement("div", { className: "k-hex-value" }, hexMessage),
-                React.createElement("div", null, rMessage),
-                React.createElement("div", null, gMessage),
-                React.createElement("div", null, bMessage),
-                this.props.opacity && (React.createElement("div", null, aMessage)))));
+        return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
+            React.createElement("div", { className: "k-vstack" },
+                React.createElement(kendo_react_buttons_1.Button, { look: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+            this.state.inputMode === 'hex' &&
+                React.createElement("div", { className: "k-vstack k-flex-1" },
+                    React.createElement("span", { className: "k-hex-value k-textbox" },
+                        React.createElement(HexInput_1.default, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled })),
+                    React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, hexMessage)),
+            (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&
+                React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.r, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaRChange, disabled: this.props.disabled }),
+                        React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, rMessage)),
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.g, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaGChange, disabled: this.props.disabled }),
+                        React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, gMessage)),
+                    React.createElement("div", { className: "k-vstack" },
+                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.b, min: 0, max: 255, spinners: false, format: "n", onChange: this.onRgbaBChange, disabled: this.props.disabled }),
+                        React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, bMessage))),
+            this.state.inputMode === 'rgba' &&
+                React.createElement("div", { className: "k-vstack" },
+                    this.props.opacity &&
+                        React.createElement(main_1.NumericTextBox, { value: this.props.rgba.a, min: 0, max: 1, step: 0.01, spinners: false, format: "n2", onChange: this.onRgbaAChange, disabled: this.props.disabled }),
+                    this.props.opacity && (React.createElement(kendo_react_labels_1.Label, { className: "k-colorgradient-input-label" }, aMessage)))));
     };
     ColorInput.prototype.dispatchRgbaChange = function (newValue, event) {
         var rgba = __assign({}, this.props.rgba);
@@ -87,6 +107,17 @@ var ColorInput = /** @class */ (function (_super) {
         }
         this.props.onRgbaChange(rgba, event);
     };
+    ;
+    ColorInput.prototype.onToggleModeChange = function () {
+        var index = modes.length - 1 === modes.indexOf(this.state.inputMode) ? 0 : modes.indexOf(this.state.inputMode) + 1;
+        if (!this.props.opacity) {
+            var nextIndex = modes[index] === 'rgba' ? index + 1 : index;
+            this.setState({ inputMode: modes[nextIndex] });
+        }
+        else {
+            this.setState({ inputMode: modes[index] });
+        }
+    };
     return ColorInput;
 }(React.Component));
 exports.default = ColorInput;

package/dist/npm/colors/ColorPalette.js

@@ -118,11 +118,11 @@ var ColorPalette = /** @class */ (function (_super) {
         svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
         var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
-        var className = kendo_react_common_1.classNames('k-widget k-colorpalette', { 'k-state-disabled': this.props.disabled });
+        var className = kendo_react_common_1.classNames('k-colorpalette', { 'k-state-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
             return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("div", { role: "grid" },
-                    React.createElement("table", { className: "k-palette k-reset", role: "presentation" },
+                React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
+                    React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", null, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }
         else {
@@ -217,9 +217,9 @@ var ColorPalette = /** @class */ (function (_super) {
         var height = tileSize.height + 'px';
         return columns.map(function (color, i) {
             var isSelected = rowIsSelected && selectedColumn === i;
-            var className = kendo_react_common_1.classNames('k-item', {
+            var className = kendo_react_common_1.classNames('k-colorpalette-tile', {
                 'k-state-selected': isSelected,
-                'k-state-focused': rowIsFocused && focusedColumn === i
+                'k-state-focus': rowIsFocused && focusedColumn === i
             });
             return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
         });

package/dist/npm/colors/HexInput.js

@@ -40,7 +40,7 @@ var HexInput = /** @class */ (function (_super) {
         return _this;
     }
     HexInput.prototype.render = function () {
-        return (React.createElement("input", { value: this.state.hex, className: "k-textbox k-hex-value", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
+        return (React.createElement("input", { value: this.state.hex, className: "k-input", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
     };
     HexInput.getDerivedStateFromProps = function (props, state) {
         if (props.hex !== state.originalHex) {

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1636100312,
+    publishDate: 1636189475,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };