@progress/kendo-react-inputs 5.4.0-dev.202205271059 → 5.4.0-dev.202206061009

package/dist/es/rating/Rating.js

@@ -100,11 +100,12 @@ export var Rating = React.forwardRef(function (directProps, ref) {
             dispatchStateValue({ type: RATING_ACTION.select, payload: event.target.value, event: event.syntheticEvent });
         }
         if (props.onClick) {
-            props.onClick.call(undefined, {
+            var ev = {
                 value: value,
                 target: target.current,
                 syntheticEvent: event.syntheticEvent
-            });
+            };
+            props.onClick.call(undefined, ev);
         }
     }, [props.onClick, dispatchStateValue, value]);
     var handleKeyDown = React.useCallback(function (syntheticEvent) {
@@ -155,18 +156,20 @@ export var Rating = React.forwardRef(function (directProps, ref) {
     }, [props.onKeyDown, dispatchStateValue, value]);
     var handleFocus = React.useCallback(function (syntheticEvent) {
         if (props.onFocus) {
-            props.onFocus.call(undefined, {
+            var ev = {
                 target: target.current,
                 syntheticEvent: syntheticEvent
-            });
+            };
+            props.onFocus.call(undefined, ev);
         }
     }, [props.onFocus]);
     var handleBlur = React.useCallback(function (syntheticEvent) {
         if (props.onBlur) {
-            props.onBlur.call(undefined, {
+            var ev = {
                 target: target.current,
                 syntheticEvent: syntheticEvent
-            });
+            };
+            props.onBlur.call(undefined, ev);
         }
     }, [props.onBlur]);
     var handleItemMouseMove = React.useCallback(function (event) {
@@ -201,21 +204,21 @@ export var Rating = React.forwardRef(function (directProps, ref) {
                 React.createElement("span", { className: classNames('k-icon', (_b = {
                             'k-i-star-outline': !props.icon
                         },
-                        _b[props.icon + "-outline"] = props.icon,
+                        _b["".concat(props.icon, "-outline")] = props.icon,
                         _b)) }))),
             half && (React.createElement("span", { className: 'k-rating-precision-part', style: { width: '12px' } },
                 React.createElement("span", { className: classNames('k-icon', (_c = {
                             'k-i-star': !props.icon
                         },
-                        _c["" + props.icon] = props.icon,
+                        _c["".concat(props.icon)] = props.icon,
                         _c)) }))),
             half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
             !half && (React.createElement("span", { className: classNames('k-icon', (_d = {
                         'k-i-star': !props.icon && (hovered || (selected && !hovered)),
                         'k-i-star-outline': !props.icon && (!hovered)
                     },
-                    _d["" + props.icon] = props.icon && (hovered || (selected && !hovered)),
-                    _d[props.icon + "-outline"] = props.icon && (!hovered),
+                    _d["".concat(props.icon)] = props.icon && (hovered || (selected && !hovered)),
+                    _d["".concat(props.icon, "-outline")] = props.icon && (!hovered),
                     _d)) }))));
     }
     return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating k-widget', {
@@ -239,7 +242,7 @@ var propTypes = {
                 ? isCorrectValue(props.min, props.max, props.step / 2, props.value)
                 : isCorrectValue(props.min, props.max, props.step, props.value);
             if (!correctValue && props.precision === 'half') {
-                return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                    The value of the { value } property is not correct, please check your values.\n                    ");
+                return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                    The value of the { value } property is not correct, please check your values.\n                    "));
             }
         }
         return null;
@@ -249,7 +252,7 @@ var propTypes = {
     max: PropTypes.number,
     step: function (props, propName, componentName) {
         if (props.step !== undefined && props.step <= 0) {
-            return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                The value of the { step } property is cannot be equal or less than \"0\", please check your values.\n                ");
+            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                The value of the { step } property is cannot be equal or less than \"0\", please check your values.\n                "));
         }
         return null;
     },

package/dist/es/rating/RatingItem.d.ts

@@ -101,4 +101,4 @@ export interface RatingItemHandle {
 /**
  * Represents the RatingItem component.
  */
-export declare const RatingItem: React.ForwardRefExoticComponent<RatingItemProps & React.RefAttributes<RatingItemHandle>>;
+export declare const RatingItem: React.ForwardRefExoticComponent<RatingItemProps & React.RefAttributes<RatingItemHandle | null>>;

package/dist/es/rating/models/index.d.ts

@@ -13,6 +13,10 @@ export interface RatingItemMouseEvent {
      * The event of the RatingItemMouseEvent.
      */
     syntheticEvent: React.MouseEvent<any>;
+    /**
+     * @hidden
+     */
+    value?: number | null;
 }
 /**
  * Represents the return type of the RatingItemKeyboardEvent.

package/dist/es/slider/Slider.d.ts

@@ -121,14 +121,14 @@ export declare class SliderWithoutContext extends React.Component<SliderProps, S
      */
     static getDerivedStateFromProps(props: SliderProps, state: SliderState): {
         value: number;
-    };
+    } | null;
     /**
      * @hidden
      */
     state: {
         value: number;
         focused: boolean;
-        dir: Direction;
+        dir: Direction | undefined;
     };
     private _sliderTrack;
     private _element;

package/dist/es/slider/Slider.js

@@ -46,6 +46,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
             focused: false,
             dir: _this.props.dir
         };
+        _this._sliderTrack = null;
+        _this._element = null;
         /**
          * @hidden
          */

package/dist/es/slider/SliderLabel.js

@@ -23,8 +23,8 @@ export var SliderLabel = function (props) {
     var sliderLabelRef = React.useRef(null);
     var dir = useDir(sliderLabelRef);
     var style = props.vertical
-        ? { bottom: props.position + "%", height: '1px', width: '100%' }
-        : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = props.position + "%", _a.width = '1px', _a.height = '-webkit-fill-available', _a);
+        ? { bottom: "".concat(props.position, "%"), height: '1px', width: '100%' }
+        : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a.width = '1px', _a.height = '-webkit-fill-available', _a);
     return (React.createElement("li", { ref: sliderLabelRef, role: "presentation", className: "k-tick k-tick-large", title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
         React.createElement("span", __assign({}, (_b = {}, _b[SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
 };

package/dist/es/switch/Switch.d.ts

@@ -174,9 +174,9 @@ export declare class SwitchWithoutContext extends React.Component<SwitchProps, S
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         defaultChecked: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        trackRounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        thumbRounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        trackRounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        thumbRounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
         dir: PropTypes.Requireable<string>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
@@ -198,9 +198,9 @@ export declare class SwitchWithoutContext extends React.Component<SwitchProps, S
     static defaultProps: {
         disabled: boolean;
         defaultChecked: boolean;
-        size: "small" | "medium" | "large";
-        trackRounded: "small" | "medium" | "full" | "large";
-        thumbRounded: "small" | "medium" | "full" | "large";
+        size: "small" | "medium" | "large" | null | undefined;
+        trackRounded: "small" | "medium" | "full" | "large" | null | undefined;
+        thumbRounded: "small" | "medium" | "full" | "large" | null | undefined;
         offLabel: string;
         onBlur: () => void;
         onFocus: () => void;

package/dist/es/switch/Switch.js

@@ -67,6 +67,9 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
             dispatchEvent(_this.props.onChange, event, _this, { value: value });
             _this.valueDuringOnChange = undefined;
         };
+        _this._element = null;
+        _this._wrapper = null;
+        _this._input = null;
         _this._id = guid();
         _this.defaultValidationMessage = provideLocalizationService(_this);
         /**
@@ -238,8 +241,8 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
         this.dir = dir || (this._wrapper && getComputedStyle(this._wrapper).direction) || undefined;
         var isValid = !this.validityStyles || this.validity.valid;
         var switchClassName = classNames('k-switch', (_a = {},
-            _a["k-switch-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
+            _a["k-switch-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
             _a['k-switch-on'] = this.value,
             _a['k-switch-off'] = !this.value,
             _a['k-focus'] = focused,
@@ -254,7 +257,7 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
                 _this._wrapper = span;
             }, className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus },
             React.createElement("span", __assign({ className: classNames('k-switch-track', (_b = {},
-                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
+                    _b["k-rounded-".concat(kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
                     _b)), id: id || this._id, role: 'switch' }, ariaAttributes, { "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, ref: function (span) {
                     _this._element = span;
                 }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
@@ -263,7 +266,7 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
                 React.createElement("span", { className: 'k-switch-label-off' }, offLabel),
                 React.createElement("span", { className: 'k-switch-thumb-wrap' },
                     React.createElement("span", { className: classNames('k-switch-thumb', (_c = {},
-                            _c["k-rounded-" + thumbRounded] = thumbRounded,
+                            _c["k-rounded-".concat(thumbRounded)] = thumbRounded,
                             _c)) })))));
     };
     SwitchWithoutContext.displayName = 'Switch';

package/dist/es/textarea/TextArea.d.ts

@@ -32,4 +32,4 @@ export declare const TextAreaPropsContext: React.Context<(p: TextAreaProps) => T
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaHandle>>;
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaHandle | null>>;

package/dist/es/textarea/TextArea.js

@@ -87,7 +87,7 @@ export var TextArea = React.forwardRef(function (directProps, target) {
     }, [isValid, validationMessage]);
     React.useLayoutEffect(function () {
         if (elementRef.current) {
-            setTextAreaHeight(elementRef.current.scrollHeight + "px");
+            setTextAreaHeight("".concat(elementRef.current.scrollHeight, "px"));
         }
     }, [currentValue]);
     var handleChange = React.useCallback(function (event) {
@@ -112,9 +112,9 @@ export var TextArea = React.forwardRef(function (directProps, target) {
     }, [onBlur, disabled]);
     var textAreaProps = __assign(__assign({ id: id || calculatedId, name: name, className: 'k-input-inner !k-overflow-auto', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others), { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
     return (React.createElement("span", { className: classNames('k-input', 'k-textarea', (_a = {},
-            _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-input-" + fillMode] = fillMode,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-input-".concat(fillMode)] = fillMode,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
             _a['k-required'] = required,
             _a['k-disabled'] = disabled,

package/dist/es/utils.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 // Polyfill for PropTypes.null
 /**
@@ -17,7 +21,7 @@ export function nullable(subRequirement) {
             return null;
         }
         var sub = required ? subRequirement.isRequired : subRequirement;
-        return sub.apply(void 0, __spreadArray([props, key], rest));
+        return sub.apply(void 0, __spreadArray([props, key], rest, false));
     };
     var fn = check.bind(null, false);
     fn.isRequired = check.bind(null, true);

package/dist/npm/checkbox/Checkbox.d.ts

@@ -29,4 +29,4 @@ export declare const CheckboxPropsContext: React.Context<(p: CheckboxProps) => C
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxHandle>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxHandle | null>>;

package/dist/npm/checkbox/Checkbox.js

@@ -36,7 +36,7 @@ var messages_1 = require("./../messages");
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.CheckboxPropsContext = kendo_react_common_1.createPropsContext();
+exports.CheckboxPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /**
  * Represents the [KendoReact Checkbox component]({% slug overview_checkbox %}).
  *
@@ -52,8 +52,8 @@ exports.CheckboxPropsContext = kendo_react_common_1.createPropsContext();
  */
 exports.Checkbox = React.forwardRef(function (directProps, target) {
     var _a;
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    var props = kendo_react_common_1.usePropsContext(exports.CheckboxPropsContext, directProps);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.CheckboxPropsContext, directProps);
     var _b = props, ariaDescribedBy = _b.ariaDescribedBy, ariaLabelledBy = _b.ariaLabelledBy, checked = _b.checked, className = _b.className, children = _b.children, defaultChecked = _b.defaultChecked, disabled = _b.disabled, defaultValue = _b.defaultValue, id = _b.id, size = _b.size, rounded = _b.rounded, label = _b.label, labelPlacement = _b.labelPlacement, name = _b.name, labelOptional = _b.labelOptional, onChange = _b.onChange, onFocus = _b.onFocus, onBlur = _b.onBlur, tabIndex = _b.tabIndex, value = _b.value, required = _b.required, valid = _b.valid, validationMessage = _b.validationMessage, validityStyles = _b.validityStyles, 
     // Removed to support direct use in Form Field component
     visited = _b.visited, touched = _b.touched, modified = _b.modified, others = __rest(_b, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "size", "rounded", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);
@@ -80,8 +80,8 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
     var checkedProp = useValueAsChecked ? currentValue : currentChecked;
     var valueProp = (useValueAsChecked || isValueControlled) ? (value === null ? value : undefined) : value || currentValue;
     var indeterminateProp = checkedProp === null || valueProp === null;
-    var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
-    var localizationService = kendo_react_intl_1.useLocalization();
+    var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
     var localizeMessage = function (message) {
         return localizationService.toLanguageString(message, messages_1.messages[message]);
     };
@@ -107,7 +107,7 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
             }
         }
         if (onChange && !disabled) {
-            kendo_react_common_1.dispatchEvent(onChange, e, __assign(__assign({}, getImperativeHandle()), { value: val }), { value: val });
+            (0, kendo_react_common_1.dispatchEvent)(onChange, e, __assign(__assign({}, getImperativeHandle()), { value: val }), { value: val });
         }
     }, [isCheckedControlled, disabled, onChange, isValueControlled, getImperativeHandle]);
     var handleChange = React.useCallback(function (e) {
@@ -137,22 +137,22 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
     }, [disabled]);
     var handleFocus = React.useCallback(function (e) {
         if (onFocus && !disabled) {
-            kendo_react_common_1.dispatchEvent(onFocus, e, getImperativeHandle(), undefined);
+            (0, kendo_react_common_1.dispatchEvent)(onFocus, e, getImperativeHandle(), undefined);
         }
     }, [onFocus, disabled, getImperativeHandle]);
     var handleBlur = React.useCallback(function (e) {
         if (onBlur && !disabled) {
-            kendo_react_common_1.dispatchEvent(onBlur, e, getImperativeHandle(), undefined);
+            (0, kendo_react_common_1.dispatchEvent)(onBlur, e, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled, getImperativeHandle]);
-    var dir = kendo_react_common_1.useDir(elementRef, props.dir);
-    var checkboxClasses = kendo_react_common_1.classNames({ 'k-disabled': disabled }, className);
-    var inputProps = __assign(__assign({ type: 'checkbox', className: kendo_react_common_1.classNames('k-checkbox', (_a = {},
-            _a["k-checkbox-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+    var dir = (0, kendo_react_common_1.useDir)(elementRef, props.dir);
+    var checkboxClasses = (0, kendo_react_common_1.classNames)({ 'k-disabled': disabled }, className);
+    var inputProps = __assign(__assign({ type: 'checkbox', className: (0, kendo_react_common_1.classNames)('k-checkbox', (_a = {},
+            _a["k-checkbox-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-indeterminate'] = indeterminateProp,
             _a['k-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
-            _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
+            _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
             true :
             indeterminateProp ?
                 'mixed' :

package/dist/npm/colors/ColorContrastLabels.js

@@ -29,18 +29,18 @@ var ColorContrastLabels = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ColorContrastLabels.prototype.render = function () {
-        var localizationService = kendo_react_intl_1.provideLocalizationService(this);
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var contrastRatioMessage = localizationService.toLanguageString(messages_1.colorGradientContrastRatio, messages_1.messages[messages_1.colorGradientContrastRatio]);
         var AALevelMessage = localizationService.toLanguageString(messages_1.colorGradientAALevel, messages_1.messages[messages_1.colorGradientAALevel]);
         var AAALevelMessage = localizationService.toLanguageString(messages_1.colorGradientAAALevel, messages_1.messages[messages_1.colorGradientAAALevel]);
         var passMessage = localizationService.toLanguageString(messages_1.colorGradientPass, messages_1.messages[messages_1.colorGradientPass]);
         var failMessage = localizationService.toLanguageString(messages_1.colorGradientFail, messages_1.messages[messages_1.colorGradientFail]);
-        var contrast = color_parser_1.getContrastFromTwoRGBAs(this.props.rgba, this.props.bgColor);
+        var contrast = (0, color_parser_1.getContrastFromTwoRGBAs)(this.props.rgba, this.props.bgColor);
         var requiredAAContrast = (4.5).toFixed(1);
         var requiredAAAContrast = (7.0).toFixed(1);
-        var contrastText = contrastRatioMessage + ": " + contrast.toFixed(2);
-        var aaText = AALevelMessage + ": " + requiredAAContrast;
-        var aaaText = AAALevelMessage + ": " + requiredAAAContrast;
+        var contrastText = "".concat(contrastRatioMessage, ": ").concat(contrast.toFixed(2));
+        var aaText = "".concat(AALevelMessage, ": ").concat(requiredAAContrast);
+        var aaaText = "".concat(AAALevelMessage, ": ").concat(requiredAAAContrast);
         var success = (React.createElement("span", { className: "k-contrast-validation k-text-success" },
             passMessage,
             " ",
@@ -66,4 +66,4 @@ var ColorContrastLabels = /** @class */ (function (_super) {
     return ColorContrastLabels;
 }(React.Component));
 exports.ColorContrastLabels = ColorContrastLabels;
-kendo_react_intl_1.registerForLocalization(ColorContrastLabels);
+(0, kendo_react_intl_1.registerForLocalization)(ColorContrastLabels);

package/dist/npm/colors/ColorContrastSvg.js

@@ -37,7 +37,7 @@ var ColorContrastSvg = /** @class */ (function (_super) {
         var findValue = function (contrast, saturation, low, high, comparer) {
             var mid = (low + high) / 2;
             var hsva = Object.assign({}, _this.props.hsva, { s: saturation / gradientRectMetrics.width, v: 1 - mid / gradientRectMetrics.height });
-            var currentContrast = color_parser_1.getContrastFromTwoRGBAs(color_parser_1.getRGBA(color_parser_1.getColorFromHSV(hsva)), color_parser_1.getRGBA(_this.props.backgroundColor || ''));
+            var currentContrast = (0, color_parser_1.getContrastFromTwoRGBAs)((0, color_parser_1.getRGBA)((0, color_parser_1.getColorFromHSV)(hsva)), (0, color_parser_1.getRGBA)(_this.props.backgroundColor || ''));
             if (low + 0.5 > high) {
                 if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
                     return mid;
@@ -62,11 +62,11 @@ var ColorContrastSvg = /** @class */ (function (_super) {
             }
             return points;
         };
-        var bezierCommandCalc = svg_calc_1.bezierCommand(svg_calc_1.controlPoint(svg_calc_1.line));
-        return svg_calc_1.svgPath(getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
-            svg_calc_1.svgPath(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) +
-            svg_calc_1.svgPath(getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
-            svg_calc_1.svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
+        var bezierCommandCalc = (0, svg_calc_1.bezierCommand)((0, svg_calc_1.controlPoint)(svg_calc_1.line));
+        return (0, svg_calc_1.svgPath)(getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
+            (0, svg_calc_1.svgPath)(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) +
+            (0, svg_calc_1.svgPath)(getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
+            (0, svg_calc_1.svgPath)(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
     };
     ColorContrastSvg.prototype.shouldComponentUpdate = function (nextProps) {
         if (nextProps.hsva.h === this.props.hsva.h &&

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

@@ -56,7 +56,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         backgroundColor: string;
         rgba: any;
         hex: any;
-    };
+    } | null;
     /**
      * @hidden
      */

package/dist/npm/colors/ColorGradient.js

@@ -35,16 +35,20 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
     __extends(ColorGradientWithoutContext, _super);
     function ColorGradientWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        /**
+         * @hidden
+         */
+        _this.wrapper = null;
         /**
          * @hidden
          */
         _this.onHexChange = function (hex, value, event) {
             if (_this.isUncontrolled) {
-                var hsva = color_parser_1.getHSV(value);
-                _this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: color_parser_1.getRGBA(value), hex: hex });
+                var hsva = (0, color_parser_1.getHSV)(value);
+                _this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: (0, color_parser_1.getRGBA)(value), hex: hex });
             }
             else {
-                color_cache_1.cacheHex(_this.state.guid, value, hex);
+                (0, color_cache_1.cacheHex)(_this.state.guid, value, hex);
             }
             _this.dispatchChangeEvent(value, event, event.nativeEvent);
         };
@@ -52,14 +56,14 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.onRgbaChange = function (rgba, event) {
-            var value = color_parser_1.getColorFromRGBA(rgba);
+            var value = (0, color_parser_1.getColorFromRGBA)(rgba);
             if (_this.isUncontrolled) {
-                var hsva = color_parser_1.getHSV(value);
-                var hex = color_parser_1.parseColor(value, 'hex');
-                _this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: rgba, hex: hex });
+                var hsva = (0, color_parser_1.getHSV)(value);
+                var hex = (0, color_parser_1.parseColor)(value, 'hex');
+                _this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: rgba, hex: hex });
             }
             else {
-                color_cache_1.cacheRgba(_this.state.guid, value, rgba);
+                (0, color_cache_1.cacheRgba)(_this.state.guid, value, rgba);
             }
             _this.dispatchChangeEvent(value, event.syntheticEvent, event.nativeEvent);
         };
@@ -101,8 +105,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             var gradientRectMetrics = _this.getGradientRectMetrics();
             var deltaX = event.clientX - gradientRectMetrics.left;
             var deltaY = event.clientY - gradientRectMetrics.top;
-            var left = misc_1.fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
-            var top = misc_1.fitIntoBounds(deltaY, 0, gradientRectMetrics.height);
+            var left = (0, misc_1.fitIntoBounds)(deltaX, 0, gradientRectMetrics.width);
+            var top = (0, misc_1.fitIntoBounds)(deltaY, 0, gradientRectMetrics.height);
             var hsva = Object.assign({}, _this.state.hsva, { s: left / gradientRectMetrics.width, v: 1 - top / gradientRectMetrics.height });
             _this.handleHsvaChange(hsva, event, event.nativeEvent);
         };
@@ -118,11 +122,11 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.focus = function () {
-            kendo_react_common_1.focusFirstFocusableChild(_this.wrapper);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(_this.wrapper);
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-        var value = props.value || props.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
-        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: kendo_react_common_1.guid() });
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+        var value = props.value || props.defaultValue || (0, color_parser_1.parseColor)(DEFAULT_SELECTED_COLOR, FORMAT);
+        _this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: (0, kendo_react_common_1.guid)() });
         return _this;
     }
     /**
@@ -148,7 +152,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.prototype.componentWillUnmount = function () {
-        color_cache_1.removeCachedColor(this.state.guid);
+        (0, color_cache_1.removeCachedColor)(this.state.guid);
     };
     /**
      * @hidden
@@ -167,8 +171,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             var gradientRectMetrics = this.getGradientRectMetrics();
             var top_1 = (1 - this.state.hsva.v) * gradientRectMetrics.height;
             var left = this.state.hsva.s * gradientRectMetrics.width;
-            style.top = top_1 + "px";
-            style.left = left + "px";
+            style.top = "".concat(top_1, "px");
+            style.left = "".concat(left, "px");
         }
         return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
     };
@@ -176,13 +180,13 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.prototype.handleHsvaChange = function (hsva, syntheticEvent, nativeEvent) {
-        var value = color_parser_1.getColorFromHSV(hsva);
+        var value = (0, color_parser_1.getColorFromHSV)(hsva);
         if (this.isUncontrolled) {
-            var hex = color_parser_1.parseColor(value, 'hex');
-            this.setState({ hsva: hsva, backgroundColor: color_parser_1.getColorFromHue(hsva.h), rgba: color_parser_1.getRGBA(value), hex: hex });
+            var hex = (0, color_parser_1.parseColor)(value, 'hex');
+            this.setState({ hsva: hsva, backgroundColor: (0, color_parser_1.getColorFromHue)(hsva.h), rgba: (0, color_parser_1.getRGBA)(value), hex: hex });
         }
         else {
-            color_cache_1.cacheHsva(this.state.guid, value, hsva);
+            (0, color_cache_1.cacheHsva)(this.state.guid, value, hsva);
         }
         this.dispatchChangeEvent(value, syntheticEvent, nativeEvent);
     };
@@ -198,14 +202,14 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.getStateFromValue = function (value, componentGuid) {
-        if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex'))) {
+        if (!(0, misc_1.isPresent)((0, color_parser_1.parseColor)(value, 'hex'))) {
             // Validate/sanitize the input.
             value = DEFAULT_SELECTED_COLOR;
         }
-        var hsva = color_cache_1.getCachedHsva(componentGuid, value) || color_parser_1.getHSV(value);
-        var rgba = color_cache_1.getCachedRgba(componentGuid, value) || color_parser_1.getRGBA(value);
-        var hex = color_cache_1.getCachedHex(componentGuid, value) || color_parser_1.parseColor(value, 'hex');
-        var backgroundColor = color_parser_1.getColorFromHue(hsva.h);
+        var hsva = (0, color_cache_1.getCachedHsva)(componentGuid, value) || (0, color_parser_1.getHSV)(value);
+        var rgba = (0, color_cache_1.getCachedRgba)(componentGuid, value) || (0, color_parser_1.getRGBA)(value);
+        var hex = (0, color_cache_1.getCachedHex)(componentGuid, value) || (0, color_parser_1.parseColor)(value, 'hex');
+        var backgroundColor = (0, color_parser_1.getColorFromHue)(hsva.h);
         return { hsva: hsva, backgroundColor: backgroundColor, rgba: rgba, hex: hex };
     };
     /**
@@ -213,7 +217,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.setAlphaSliderBackground = function (backgroundColor) {
         if (this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
-            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, " + backgroundColor + ")";
+            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, ".concat(backgroundColor, ")");
         }
     };
     Object.defineProperty(ColorGradientWithoutContext.prototype, "isUncontrolled", {
@@ -237,8 +241,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.render = function () {
         var _this = this;
-        var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-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, onFocus: this.onFocus },
+        var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-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: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             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; } },
@@ -248,9 +252,9 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                 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(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, 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 }))));
+            this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: (0, color_parser_1.getRGBA)(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
     /**
@@ -284,7 +288,7 @@ exports.ColorGradientWithoutContext = ColorGradientWithoutContext;
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.ColorGradientPropsContext = kendo_react_common_1.createPropsContext();
+exports.ColorGradientPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
@@ -302,5 +306,5 @@ exports.ColorGradientPropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.ColorGradient = kendo_react_common_1.withPropsContext(exports.ColorGradientPropsContext, ColorGradientWithoutContext);
+exports.ColorGradient = (0, kendo_react_common_1.withPropsContext)(exports.ColorGradientPropsContext, ColorGradientWithoutContext);
 exports.ColorGradient.displayName = 'KendoReactColorGradient';

package/dist/npm/colors/ColorInput.js

@@ -62,7 +62,7 @@ var ColorInput = /** @class */ (function (_super) {
         return _this;
     }
     ColorInput.prototype.render = function () {
-        var localizationService = kendo_react_intl_1.provideLocalizationService(this);
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var hexMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientHex]);
         var rMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientR]);
         var gMessage = localizationService.toLanguageString(messages_1.colorGradientR, messages_1.messages[messages_1.colorGradientG]);
@@ -123,5 +123,5 @@ var ColorInput = /** @class */ (function (_super) {
     return ColorInput;
 }(React.Component));
 exports.default = ColorInput;
-kendo_react_intl_1.registerForIntl(ColorInput);
-kendo_react_intl_1.registerForLocalization(ColorInput);
+(0, kendo_react_intl_1.registerForIntl)(ColorInput);
+(0, kendo_react_intl_1.registerForLocalization)(ColorInput);