@progress/kendo-react-inputs 5.4.0-dev.202205250548 → 5.4.0-dev.202206081230

package/dist/npm/input/Input.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -28,11 +30,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.InputPropsContext = exports.InputWithoutContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -44,7 +49,8 @@ var InputWithoutContext = /** @class */ (function (_super) {
     __extends(InputWithoutContext, _super);
     function InputWithoutContext(props) {
         var _this = _super.call(this, props) || this;
-        _this._inputId = kendo_react_common_1.guid();
+        _this._input = null;
+        _this._inputId = (0, kendo_react_common_1.guid)();
         /**
          * @hidden
          */
@@ -57,7 +63,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
             var result = false;
             for (var prop in state) {
                 if (state.hasOwnProperty(prop)) {
-                    result = result || state[prop];
+                    result = result || Boolean(state[prop]);
                 }
             }
             return result;
@@ -101,7 +107,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
                 }
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         _this.state = {
             value: _this.props.defaultValue || InputWithoutContext.defaultProps.defaultValue
         };
@@ -114,7 +120,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._input;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InputWithoutContext.prototype, "value", {
@@ -128,7 +134,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
                     ? this.props.value
                     : this.state.value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InputWithoutContext.prototype, "name", {
@@ -138,7 +144,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this.props.name;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InputWithoutContext.prototype, "validity", {
@@ -158,13 +164,13 @@ var InputWithoutContext = /** @class */ (function (_super) {
                 typeMismatch: this._input ? this._input.validity.typeMismatch : false,
                 valueMissing: this._input ? this._input.validity.valueMissing : false
             };
-            return __assign({}, result, { customError: this.props.validationMessage !== undefined, valid: this.props.valid !== undefined
+            return __assign(__assign({}, result), { customError: this.props.validationMessage !== undefined, valid: this.props.valid !== undefined
                     ? this.props.valid
                     : this._input
                         ? !this.isInvalid(result)
                         : true });
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InputWithoutContext.prototype, "validityStyles", {
@@ -176,7 +182,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
                 ? this.props.validityStyles
                 : InputWithoutContext.defaultProps.validityStyles;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -201,7 +207,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
         visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style"]);
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
-        var inputClassName = kendo_react_common_1.classNames(className, 'k-input k-input-md k-rounded-md k-input-solid');
+        var inputClassName = (0, kendo_react_common_1.classNames)(className, 'k-input k-input-md k-rounded-md k-input-solid');
         var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, props, { style: !label
                 ? style
                 : undefined, value: this.value, id: inputId, className: inputClassName, onChange: this.handleChange, onAnimationStart: this.handleAutoFill, ref: function (el) {
@@ -241,7 +247,7 @@ exports.InputWithoutContext = InputWithoutContext;
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.InputPropsContext = kendo_react_common_1.createPropsContext();
+exports.InputPropsContext = (0, kendo_react_common_1.createPropsContext)();
 ;
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
@@ -250,5 +256,5 @@ exports.InputPropsContext = kendo_react_common_1.createPropsContext();
  * Accepts properties of type [InputProps]({% slug api_inputs_inputprops %}).
  * Obtaining the `ref` returns an object of type [InputHandle]({% slug api_inputs_inputhandle %}).
  */
-exports.Input = kendo_react_common_1.withPropsContext(exports.InputPropsContext, InputWithoutContext);
+exports.Input = (0, kendo_react_common_1.withPropsContext)(exports.InputPropsContext, InputWithoutContext);
 exports.Input.displayName = 'KendoReactInput';

package/dist/npm/main.js

@@ -1,34 +1,77 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchPropsContext = exports.Switch = exports.SliderPropsContext = exports.Slider = exports.MaskedTextBoxPropsContext = exports.MaskedTextBox = exports.InputPropsContext = exports.Input = exports.ColorPalettePropsContext = exports.ColorPalette = exports.ColorGradientPropsContext = exports.ColorGradient = void 0;
 var ColorGradient_1 = require("./colors/ColorGradient");
-exports.ColorGradient = ColorGradient_1.ColorGradient;
-exports.ColorGradientPropsContext = ColorGradient_1.ColorGradientPropsContext;
+Object.defineProperty(exports, "ColorGradient", { enumerable: true, get: function () { return ColorGradient_1.ColorGradient; } });
+Object.defineProperty(exports, "ColorGradientPropsContext", { enumerable: true, get: function () { return ColorGradient_1.ColorGradientPropsContext; } });
 var ColorPalette_1 = require("./colors/ColorPalette");
-exports.ColorPalette = ColorPalette_1.ColorPalette;
-exports.ColorPalettePropsContext = ColorPalette_1.ColorPalettePropsContext;
-__export(require("./colors/ColorPicker"));
-__export(require("./colors/FlatColorPicker"));
+Object.defineProperty(exports, "ColorPalette", { enumerable: true, get: function () { return ColorPalette_1.ColorPalette; } });
+Object.defineProperty(exports, "ColorPalettePropsContext", { enumerable: true, get: function () { return ColorPalette_1.ColorPalettePropsContext; } });
+__exportStar(require("./colors/ColorPicker"), exports);
+__exportStar(require("./colors/interfaces/ColorGradientChangeEvent"), exports);
+__exportStar(require("./colors/interfaces/ColorGradientProps"), exports);
+__exportStar(require("./colors/interfaces/ColorPaletteChangeEvent"), exports);
+__exportStar(require("./colors/interfaces/ColorPaletteProps"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerBlurEvent"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerChangeEvent"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerFocusEvent"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerGradientSettings"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerPaletteSettings"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerPopupSettings"), exports);
+__exportStar(require("./colors/interfaces/ColorPickerProps"), exports);
+__exportStar(require("./colors/FlatColorPicker"), exports);
 var Input_1 = require("./input/Input");
-exports.Input = Input_1.Input;
-exports.InputPropsContext = Input_1.InputPropsContext;
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+Object.defineProperty(exports, "InputPropsContext", { enumerable: true, get: function () { return Input_1.InputPropsContext; } });
 var MaskedTextBox_1 = require("./maskedtextbox/MaskedTextBox");
-exports.MaskedTextBox = MaskedTextBox_1.MaskedTextBox;
-exports.MaskedTextBoxPropsContext = MaskedTextBox_1.MaskedTextBoxPropsContext;
-__export(require("./numerictextbox/NumericTextBox"));
+Object.defineProperty(exports, "MaskedTextBox", { enumerable: true, get: function () { return MaskedTextBox_1.MaskedTextBox; } });
+Object.defineProperty(exports, "MaskedTextBoxPropsContext", { enumerable: true, get: function () { return MaskedTextBox_1.MaskedTextBoxPropsContext; } });
+__exportStar(require("./maskedtextbox/MaskedTextBoxProps"), exports);
+__exportStar(require("./numerictextbox/NumericTextBox"), exports);
+__exportStar(require("./numerictextbox/interfaces/NumericTextBoxHandle"), exports);
+__exportStar(require("./numerictextbox/interfaces/NumericTextBoxChangeEvent"), exports);
+__exportStar(require("./numerictextbox/interfaces/NumericTextBoxBlurEvent"), exports);
+__exportStar(require("./numerictextbox/interfaces/NumericTextBoxFocusEvent"), exports);
+__exportStar(require("./numerictextbox/interfaces/NumericTextBoxProps"), exports);
 var Slider_1 = require("./slider/Slider");
-exports.Slider = Slider_1.Slider;
-exports.SliderPropsContext = Slider_1.SliderPropsContext;
-__export(require("./slider/SliderLabel"));
-__export(require("./range-slider/RangeSlider"));
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+Object.defineProperty(exports, "SliderPropsContext", { enumerable: true, get: function () { return Slider_1.SliderPropsContext; } });
+__exportStar(require("./slider/SliderLabel"), exports);
+__exportStar(require("./range-slider/RangeSlider"), exports);
+__exportStar(require("./interfaces/ToggleBaseProps"), exports);
 var Switch_1 = require("./switch/Switch");
-exports.Switch = Switch_1.Switch;
-exports.SwitchPropsContext = Switch_1.SwitchPropsContext;
-__export(require("./checkbox/Checkbox"));
-__export(require("./radiobutton/RadioGroup"));
-__export(require("./radiobutton/RadioButton"));
-__export(require("./textarea/TextArea"));
-__export(require("./rating/Rating"));
-__export(require("./rating/RatingItem"));
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
+Object.defineProperty(exports, "SwitchPropsContext", { enumerable: true, get: function () { return Switch_1.SwitchPropsContext; } });
+__exportStar(require("./checkbox/interfaces/CheckboxProps"), exports);
+__exportStar(require("./checkbox/interfaces/CheckboxChangeEvent"), exports);
+__exportStar(require("./checkbox/interfaces/CheckboxFocusEvent"), exports);
+__exportStar(require("./checkbox/Checkbox"), exports);
+__exportStar(require("./radiobutton/RadioGroup"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioGroupProps"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioGroupChangeEvent"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioGroupFocusEvent"), exports);
+__exportStar(require("./radiobutton/RadioButton"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioButtonProps"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioButtonChangeEvent"), exports);
+__exportStar(require("./radiobutton/interfaces/RadioButtonFocusEvent"), exports);
+__exportStar(require("./textarea/TextArea"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaProps"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaChangeEvent"), exports);
+__exportStar(require("./textarea/interfaces/TextAreaFocusEvent"), exports);
+__exportStar(require("./rating/Rating"), exports);
+__exportStar(require("./rating/RatingItem"), exports);
+__exportStar(require("./rating/models/index"), exports);

package/dist/npm/maskedtextbox/MaskedTextBox.d.ts

@@ -36,7 +36,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         includeLiterals: PropTypes.Requireable<boolean>;
         maskValidation: PropTypes.Requireable<boolean>;
         mask: PropTypes.Requireable<string>;
-        rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error;
+        rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error | null;
         selection: PropTypes.Requireable<PropTypes.InferProps<{
             start: PropTypes.Validator<number>;
             end: PropTypes.Validator<number>;
@@ -48,9 +48,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         valid: PropTypes.Requireable<boolean>;
         validityStyles: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
-        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
     };
     /**
      * @hidden
@@ -65,9 +65,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "large" | "full";
-        fillMode: "solid" | "flat" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @hidden
@@ -115,31 +115,31 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
      * );
      * ```
      */
-    readonly element: HTMLInputElement | null;
+    get element(): HTMLInputElement | null;
     /**
      * Gets the value with the mask of the MaskedTextBox.
      */
-    readonly value: string;
+    get value(): string;
     /**
      * Gets the raw value without the mask of the MaskedTextBox.
      */
-    readonly rawValue: string;
+    get rawValue(): string;
     /**
      * Represents the validity state into which the MaskedTextBox is set.
      */
-    readonly validity: FormComponentValidity;
+    get validity(): FormComponentValidity;
     /**
      * @hidden
      */
-    protected readonly validityStyles: boolean;
+    protected get validityStyles(): boolean;
     /**
      * @hidden
      */
-    protected readonly required: boolean;
+    protected get required(): boolean;
     /**
      * Gets the `name` property of the MaskedTextBox.
      */
-    readonly name: string | undefined;
+    get name(): string | undefined;
     /**
      * @hidden
      */
@@ -158,7 +158,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
     private blurHandler;
     private triggerOnChange;
     private updateService;
-    private readonly rules;
+    private get rules();
     private setValidity;
 }
 /**

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskedTextBox = exports.MaskedTextBoxPropsContext = exports.MaskedTextBoxWithoutContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var masking_service_1 = require("./masking.service");
@@ -41,7 +44,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.state = {};
-        _this._inputId = "k-" + kendo_react_common_1.guid();
+        _this._inputId = "k-".concat((0, kendo_react_common_1.guid)());
         _this._service = new masking_service_1.MaskingService();
         _this._isPasted = false;
         _this._selection = [null, null];
@@ -118,7 +121,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                     : _this.props.validationMessage || '');
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "element", {
@@ -156,7 +159,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._input;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "value", {
@@ -178,7 +181,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
             }
             return '';
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "rawValue", {
@@ -188,7 +191,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._service.rawValue(this.value);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validity", {
@@ -208,7 +211,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 valueMissing: !value
             };
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validityStyles", {
@@ -220,7 +223,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 ? this.props.validityStyles
                 : MaskedTextBoxWithoutContext.defaultProps.validityStyles;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "required", {
@@ -232,7 +235,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 ? this.props.required
                 : MaskedTextBoxWithoutContext.defaultProps.required;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "name", {
@@ -242,7 +245,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this.props.name;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -263,7 +266,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 this.element.setSelectionRange(start, end);
             }
         }
-        if (utils_1.maskingChanged(prevProps, this.props)) {
+        if ((0, utils_1.maskingChanged)(prevProps, this.props)) {
             this.updateService();
         }
         this.setValidity();
@@ -279,22 +282,22 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     MaskedTextBoxWithoutContext.prototype.render = function () {
-        var _this = this;
         var _a;
+        var _this = this;
         var _b = this.props, _c = _b.size, size = _c === void 0 ? MaskedTextBoxWithoutContext.defaultProps.size : _c, _d = _b.fillMode, fillMode = _d === void 0 ? MaskedTextBoxWithoutContext.defaultProps.fillMode : _d, _e = _b.rounded, rounded = _e === void 0 ? MaskedTextBoxWithoutContext.defaultProps.rounded : _e;
         var inputId = this.props.id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
-        var component = (React.createElement("span", { dir: this.props.dir, className: kendo_react_common_1.classNames('k-maskedtextbox k-input', (_a = {},
-                _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-input-" + fillMode] = fillMode,
-                _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+        var component = (React.createElement("span", { dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-maskedtextbox k-input', (_a = {},
+                _a["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-input-".concat(fillMode)] = fillMode,
+                _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                 _a['k-invalid'] = !isValid,
                 _a['k-required'] = this.required,
                 _a['k-disabled'] = this.props.disabled,
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse })));
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse })));
         return this.props.label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))
             : component;
@@ -305,14 +308,15 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         });
         if (this.props.onChange) {
             this._valueDuringOnChange = maskedValue;
-            this.props.onChange.call(undefined, {
+            var ev = {
                 syntheticEvent: event,
                 nativeEvent: event.nativeEvent,
                 selectionStart: this._selection[0],
                 selectionEnd: this._selection[1],
                 target: this,
                 value: this.value
-            });
+            };
+            this.props.onChange.call(undefined, ev);
             this._valueDuringOnChange = undefined;
         }
     };
@@ -330,7 +334,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return Object.assign({}, utils_1.defaultRules, this.props.rules);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     MaskedTextBoxWithoutContext.displayName = 'MaskedTextBox';
@@ -412,7 +416,7 @@ exports.MaskedTextBoxWithoutContext = MaskedTextBoxWithoutContext;
  *
  * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
  */
-exports.MaskedTextBoxPropsContext = kendo_react_common_1.createPropsContext();
+exports.MaskedTextBoxPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).
@@ -420,5 +424,5 @@ exports.MaskedTextBoxPropsContext = kendo_react_common_1.createPropsContext();
  * Accepts properties of type [MaskedTextBoxProps]({% slug api_inputs_maskedtextboxprops %}).
  * Obtaining the `ref` returns an object of type [MaskedTextBoxHandle]({% slug api_inputs_maskedtextboxhandle %}).
  */
-exports.MaskedTextBox = kendo_react_common_1.withPropsContext(exports.MaskedTextBoxPropsContext, MaskedTextBoxWithoutContext);
+exports.MaskedTextBox = (0, kendo_react_common_1.withPropsContext)(exports.MaskedTextBoxPropsContext, MaskedTextBoxWithoutContext);
 exports.MaskedTextBox.displayName = 'KendoReactMaskedTextBox';

package/dist/npm/maskedtextbox/masking.service.d.ts

@@ -25,16 +25,16 @@ export declare class MaskingService {
     private maskRemoved;
     private adjustPosition;
     private maskInserted;
-    protected readonly maskTokenCreator: {
+    protected get maskTokenCreator(): {
         [key: string]: Function;
     };
-    protected readonly unmaskTokenCreator: {
+    protected get unmaskTokenCreator(): {
         [key: string]: Function;
     };
-    protected readonly rawTokenCreator: {
+    protected get rawTokenCreator(): {
         [key: string]: Function;
     };
-    protected readonly validationTokenCreator: {
+    protected get validationTokenCreator(): {
         [key: string]: Function;
     };
     private tokenize;