@progress/kendo-react-inputs 5.13.0-dev.202304211031 → 5.13.0-dev.202304251156

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

@@ -29,6 +29,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         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>;
@@ -43,6 +44,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
     static defaultProps: {
         opacity: boolean;
         role: string;
+        format: "rgb" | "hex" | "rgba";
     };
     /**
      * @hidden

package/dist/es/colors/ColorGradient.js

@@ -253,7 +253,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     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, ariaLabel: lS.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]) }),
                     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, ariaLabel: lS.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]), 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 }),
+            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, defaultInputMode: this.props.format }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels, { bgColor: getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
@@ -267,6 +267,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
+        format: PropTypes.any,
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
@@ -280,7 +281,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.defaultProps = {
         opacity: true,
-        role: 'textbox'
+        role: 'textbox',
+        format: 'rgb'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

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

@@ -11,14 +11,15 @@ export interface ColorInputProps {
     onHexChange: any;
     opacity: boolean;
     disabled?: boolean;
+    defaultInputMode?: 'rgba' | 'rgb' | 'hex';
 }
 /**
  * @hidden
  */
-export default class ColorInput extends React.Component<ColorInputProps, {}> {
-    state: {
-        inputMode: string;
-    };
+export default class ColorInput extends React.Component<ColorInputProps, {
+    inputMode: string;
+}> {
+    constructor(props: ColorInputProps);
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;

package/dist/es/colors/ColorInput.js

@@ -41,11 +41,8 @@ var modes = ['rgba', 'rgb', 'hex'];
  */
 var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
-    function ColorInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            inputMode: modes[1]
-        };
+    function ColorInput(props) {
+        var _this = _super.call(this, props) || this;
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -58,6 +55,7 @@ var ColorInput = /** @class */ (function (_super) {
         _this.onRgbaAChange = function (event) {
             _this.dispatchRgbaChange({ a: event.value }, event);
         };
+        _this.state = { inputMode: props.defaultInputMode || modes[1] };
         return _this;
     }
     ColorInput.prototype.render = function () {

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

@@ -17,7 +17,7 @@ export interface FlatColorPickerChangeEvent {
     nativeEvent: any;
 }
 /**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ * Represents the properties of [FlatColorPicker]({% slug api_inputs_flatcolorpicker %}) component.
  */
 export interface FlatColorPickerProps {
     /**
@@ -44,6 +44,18 @@ export interface FlatColorPickerProps {
      * The event handler that will be fired when the user edits the value.
      */
     onChange?: (event: FlatColorPickerChangeEvent) => void;
+    /**
+     * Specifies whether we should display the opacity slider to allow selection of transparency.
+     *
+     * @default true
+     */
+    opacity?: boolean;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'hex' | 'rgba' | 'rgb';
     /**
      * Sets the `tabIndex` property of the FlatColorPicker.
      */

package/dist/es/colors/FlatColorPicker.js

@@ -118,7 +118,7 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus, opacity: props.opacity, format: props.format })
                 : React.createElement(ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
             showButtons &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
@@ -132,6 +132,8 @@ var propTypes = {
     value: PropTypes.string,
     defaultValue: PropTypes.string,
     onChange: PropTypes.func,
+    opacity: PropTypes.bool,
+    format: PropTypes.any,
     tabIndex: PropTypes.number,
     ariaLabel: PropTypes.string,
     ariaLabelledBy: PropTypes.string,

package/dist/es/colors/interfaces/ColorGradientProps.d.ts

@@ -85,4 +85,10 @@ export interface ColorGradientProps {
      * Represents the text rendered inside the `hsv` drag handle.
      */
     ariaValueText?: string;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'rgba' | 'rgb' | 'hex';
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1682071582,
+    publishDate: 1682422527,
     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/ColorGradient.d.ts

@@ -29,6 +29,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         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>;
@@ -43,6 +44,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
     static defaultProps: {
         opacity: boolean;
         role: string;
+        format: "rgb" | "hex" | "rgba";
     };
     /**
      * @hidden

package/dist/npm/colors/ColorGradient.js

@@ -256,7 +256,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     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, ariaLabel: lS.toLanguageString(messages_1.colorGradientHueSliderLabel, messages_1.messages[messages_1.colorGradientHueSliderLabel]) }),
                     this.props.opacity &&
                         React.createElement(main_1.Slider, { value: (0, misc_1.isPresent)(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, ariaLabel: lS.toLanguageString(messages_1.colorGradientAlphaSliderLabel, messages_1.messages[messages_1.colorGradientAlphaSliderLabel]), 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 }),
+            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, defaultInputMode: this.props.format }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: (0, color_parser_1.getRGBA)(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
@@ -270,6 +270,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
+        format: PropTypes.any,
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
@@ -283,7 +284,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.defaultProps = {
         opacity: true,
-        role: 'textbox'
+        role: 'textbox',
+        format: 'rgb'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

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

@@ -11,14 +11,15 @@ export interface ColorInputProps {
     onHexChange: any;
     opacity: boolean;
     disabled?: boolean;
+    defaultInputMode?: 'rgba' | 'rgb' | 'hex';
 }
 /**
  * @hidden
  */
-export default class ColorInput extends React.Component<ColorInputProps, {}> {
-    state: {
-        inputMode: string;
-    };
+export default class ColorInput extends React.Component<ColorInputProps, {
+    inputMode: string;
+}> {
+    constructor(props: ColorInputProps);
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;

package/dist/npm/colors/ColorInput.js

@@ -43,11 +43,8 @@ var modes = ['rgba', 'rgb', 'hex'];
  */
 var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
-    function ColorInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            inputMode: modes[1]
-        };
+    function ColorInput(props) {
+        var _this = _super.call(this, props) || this;
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -60,6 +57,7 @@ var ColorInput = /** @class */ (function (_super) {
         _this.onRgbaAChange = function (event) {
             _this.dispatchRgbaChange({ a: event.value }, event);
         };
+        _this.state = { inputMode: props.defaultInputMode || modes[1] };
         return _this;
     }
     ColorInput.prototype.render = function () {

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

@@ -17,7 +17,7 @@ export interface FlatColorPickerChangeEvent {
     nativeEvent: any;
 }
 /**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ * Represents the properties of [FlatColorPicker]({% slug api_inputs_flatcolorpicker %}) component.
  */
 export interface FlatColorPickerProps {
     /**
@@ -44,6 +44,18 @@ export interface FlatColorPickerProps {
      * The event handler that will be fired when the user edits the value.
      */
     onChange?: (event: FlatColorPickerChangeEvent) => void;
+    /**
+     * Specifies whether we should display the opacity slider to allow selection of transparency.
+     *
+     * @default true
+     */
+    opacity?: boolean;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'hex' | 'rgba' | 'rgb';
     /**
      * Sets the `tabIndex` property of the FlatColorPicker.
      */

package/dist/npm/colors/FlatColorPicker.js

@@ -121,7 +121,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus, opacity: props.opacity, format: props.format })
                 : React.createElement(main_1.ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
             showButtons &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
@@ -135,6 +135,8 @@ var propTypes = {
     value: PropTypes.string,
     defaultValue: PropTypes.string,
     onChange: PropTypes.func,
+    opacity: PropTypes.bool,
+    format: PropTypes.any,
     tabIndex: PropTypes.number,
     ariaLabel: PropTypes.string,
     ariaLabelledBy: PropTypes.string,

package/dist/npm/colors/interfaces/ColorGradientProps.d.ts

@@ -85,4 +85,10 @@ export interface ColorGradientProps {
      * Represents the text rendered inside the `hsv` drag handle.
      */
     ariaValueText?: string;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'rgba' | 'rgb' | 'hex';
 }

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1682071582,
+    publishDate: 1682422527,
     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'
 };