text: "use strict";
  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]; };
          return extendStatics(d, b);
      };
      return function (d, b) {
          extendStatics(d, b);
          function __() { this.constructor = d; }
          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
      };
  })();
  var __assign = (this && this.__assign) || function () {
      __assign = Object.assign || function(t) {
          for (var s, i = 1, n = arguments.length; i < n; i++) {
              s = arguments[i];
              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                  t[p] = s[p];
          }
          return t;
      };
      return __assign.apply(this, arguments);
  };
  Object.defineProperty(exports, "__esModule", { value: true });
  var React = require("react");
  var PropTypes = require("prop-types");
  var masking_service_1 = require("./masking.service");
  var utils_1 = require("./utils");
  var kendo_react_common_1 = require("@progress/kendo-react-common");
  var kendo_react_labels_1 = require("@progress/kendo-react-labels");
  var kendo_react_common_2 = require("@progress/kendo-react-common");
  var package_metadata_1 = require("../package-metadata");
  /** @hidden */
  var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
      __extends(MaskedTextBoxWithoutContext, _super);
      function MaskedTextBoxWithoutContext(props) {
          var _this = _super.call(this, props) || this;
          /**
           * @hidden
           */
          _this.state = {};
          _this._inputId = "k-" + kendo_react_common_1.guid();
          _this._service = new masking_service_1.MaskingService();
          _this._isPasted = false;
          _this._selection = [null, null];
          _this._input = null;
          /**
           * @hidden
           */
          _this.focus = function () {
              if (_this._input) {
                  _this._input.focus();
              }
          };
          _this.pasteHandler = function (event) {
              var _a = event.target, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd;
              if (selectionEnd === selectionStart) {
                  return;
              }
              _this._isPasted = true;
              _this._selection = [selectionStart || 0, selectionEnd || 0];
          };
          _this.onChangeHandler = function (event) {
              var input = event.currentTarget;
              var value = input.value;
              var start = _this._selection[0] || 0;
              var end = _this._selection[1] || 0;
              if (!_this.props.mask) {
                  _this._isPasted = false;
                  _this._selection = [null, null];
                  _this.triggerOnChange(value, event);
                  return;
              }
              var maskedValue = _this.value;
              var result;
              if (_this._isPasted) {
                  _this._isPasted = false;
                  var rightPart = maskedValue.length - end;
                  var to = value.length - rightPart;
                  result = _this._service.maskInRange(value.slice(start, to), maskedValue, start, end);
              }
              else {
                  result = _this._service.maskInput(value, maskedValue, input.selectionStart || 0);
              }
              _this._selection = [result.selection, result.selection];
              _this.triggerOnChange(result.value, event);
          };
          _this.focusHandler = function (event) {
              if (!_this.state.focused) {
                  _this.setState({ focused: true });
                  if (_this.props.onFocus) {
                      _this.props.onFocus.call(undefined, {
                          target: _this,
                          syntheticEvent: event,
                          nativeEvent: event.nativeEvent
                      });
                  }
              }
          };
          _this.blurHandler = function (event) {
              if (_this.state.focused) {
                  _this.setState({ focused: false });
                  if (_this.props.onBlur) {
                      _this.props.onBlur.call(undefined, {
                          target: _this,
                          syntheticEvent: event,
                          nativeEvent: event.nativeEvent
                      });
                  }
              }
          };
          _this.setValidity = function () {
              if (_this.element) {
                  _this.element.setCustomValidity(_this.validity.valid
                      ? ''
                      : _this.props.validationMessage || '');
              }
          };
          kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
          return _this;
      }
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "element", {
          /**
           * Gets the element of the MaskedTextBox.
           *
           * @return - An `HTMLInputElement`.
           *
           * @example
           * ```jsx
           * class App extends React.Component {
           *     constructor(props) {
           *         super(props);
           *     }
           *     element = null;
           *     render() {
           *         return (
           *             <div>
           *                 <MaskedTextBox
           *                     ref={(component) =>
           *                         this.element = component ? component.element : null}
           *                 />
           *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
           *             </div>
           *         );
           *     }
           * }
           *
           * ReactDOM.render(
           *     <App />,
           *     document.getElementsByTagName('my-app')[0]
           * );
           * ```
           */
          get: function () {
              return this._input;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "value", {
          /**
           * Gets the value with the mask of the MaskedTextBox.
           */
          get: function () {
              if (this._valueDuringOnChange !== undefined) {
                  return this._valueDuringOnChange;
              }
              else if (this.props.value !== undefined) {
                  return this.props.value;
              }
              else if (this.state.value !== undefined) {
                  return this.state.value;
              }
              else if (this.props.defaultValue !== undefined) {
                  return this.props.defaultValue;
              }
              return '';
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "rawValue", {
          /**
           * Gets the raw value without the mask of the MaskedTextBox.
           */
          get: function () {
              return this._service.rawValue(this.value);
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validity", {
          /**
           * Represents the validity state into which the MaskedTextBox is set.
           */
          get: function () {
              var maskedValue = this.value;
              var value = this._service.validationValue(maskedValue);
              var customError = this.props.validationMessage !== undefined;
              var valid = (this.props.valid !== undefined ?
                  this.props.valid : ((!this.required || !!value)) &&
                  (!this.props.maskValidation || !this.props.prompt || maskedValue.indexOf(this.props.prompt) === -1));
              return {
                  customError: customError,
                  valid: valid,
                  valueMissing: !value
              };
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validityStyles", {
          /**
           * @hidden
           */
          get: function () {
              return this.props.validityStyles !== undefined
                  ? this.props.validityStyles
                  : MaskedTextBoxWithoutContext.defaultProps.validityStyles;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "required", {
          /**
           * @hidden
           */
          get: function () {
              return this.props.required !== undefined
                  ? this.props.required
                  : MaskedTextBoxWithoutContext.defaultProps.required;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "name", {
          /**
           * Gets the `name` property of the MaskedTextBox.
           */
          get: function () {
              return this.props.name;
          },
          enumerable: true,
          configurable: true
      });
      /**
       * @hidden
       */
      MaskedTextBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
          if (this.element && this.state.focused && prevState.focused) {
              var _a = this._selection, start = _a[0], end = _a[1];
              var prevSelection = prevProps.selection;
              var nextSelection = this.props.selection;
              if ((!prevSelection && nextSelection) ||
                  (prevSelection && nextSelection &&
                      (prevSelection.start !== nextSelection.start || prevSelection.end !== nextSelection.end))) {
                  start = nextSelection.start;
                  end = nextSelection.end;
              }
              if (start !== null && end !== null) {
                  this.element.setSelectionRange(start, end);
              }
          }
          if (utils_1.maskingChanged(prevProps, this.props)) {
              this.updateService();
          }
          this.setValidity();
      };
      /**
       * @hidden
       */
      MaskedTextBoxWithoutContext.prototype.componentDidMount = function () {
          this.updateService();
          this.setValidity();
      };
      /**
       * @hidden
       */
      MaskedTextBoxWithoutContext.prototype.render = function () {
          var _this = this;
          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-widget k-maskedtextbox', this.props.className, {
                  'k-state-focused': this.state.focused,
                  'k-state-disabled': this.props.disabled,
                  'k-state-invalid': !isValid
              }), 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-textbox", 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 })));
          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;
      };
      MaskedTextBoxWithoutContext.prototype.triggerOnChange = function (maskedValue, event) {
          this.setState({
              value: maskedValue
          });
          if (this.props.onChange) {
              this._valueDuringOnChange = maskedValue;
              this.props.onChange.call(undefined, {
                  syntheticEvent: event,
                  nativeEvent: event.nativeEvent,
                  selectionStart: this._selection[0],
                  selectionEnd: this._selection[1],
                  target: this,
                  value: this.value
              });
              this._valueDuringOnChange = undefined;
          }
      };
      MaskedTextBoxWithoutContext.prototype.updateService = function (extra) {
          var config = Object.assign({
              includeLiterals: this.props.includeLiterals,
              mask: this.props.mask,
              prompt: this.props.prompt,
              promptPlaceholder: this.props.promptPlaceholder,
              rules: this.rules
          }, extra); // tslint:disable-line:align
          this._service.update(config);
      };
      Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "rules", {
          get: function () {
              return Object.assign({}, utils_1.defaultRules, this.props.rules);
          },
          enumerable: true,
          configurable: true
      });
      MaskedTextBoxWithoutContext.displayName = 'MaskedTextBox';
      /**
       * @hidden
       */
      MaskedTextBoxWithoutContext.propTypes = {
          value: PropTypes.string,
          defaultValue: PropTypes.string,
          placeholder: PropTypes.string,
          title: PropTypes.string,
          dir: PropTypes.string,
          id: PropTypes.string,
          style: PropTypes.object,
          className: PropTypes.string,
          ariaLabelledBy: PropTypes.string,
          ariaDescribedBy: PropTypes.string,
          width: PropTypes.oneOfType([
              PropTypes.string,
              PropTypes.number
          ]),
          tabIndex: PropTypes.number,
          accessKey: PropTypes.string,
          disabled: PropTypes.bool,
          readonly: PropTypes.bool,
          prompt: PropTypes.string,
          promptPlaceholder: PropTypes.string,
          includeLiterals: PropTypes.bool,
          maskValidation: PropTypes.bool,
          mask: PropTypes.string,
          rules: function (props, propName, componentName) {
              var rules = props.rules;
              if (rules !== undefined) {
                  var valid = Object.entries(rules)
                      .some(function (e) { return typeof e !== 'string' || !(rules[e] instanceof RegExp); });
                  if (!valid) {
                      return new Error('Invalid prop `' + propName + '` supplied to' +
                          ' `' + componentName + '`. Validation failed.');
                  }
              }
              return null;
          },
          selection: PropTypes.shape({
              start: PropTypes.number.isRequired,
              end: PropTypes.number.isRequired
          }),
          name: PropTypes.string,
          label: PropTypes.string,
          validationMessage: PropTypes.string,
          required: PropTypes.bool,
          valid: PropTypes.bool,
          validityStyles: PropTypes.bool,
          onChange: PropTypes.func
      };
      /**
       * @hidden
       */
      MaskedTextBoxWithoutContext.defaultProps = {
          prompt: '_',
          promptPlaceholder: ' ',
          includeLiterals: false,
          maskValidation: true,
          rules: utils_1.defaultRules,
          required: false,
          validityStyles: true
      };
      return MaskedTextBoxWithoutContext;
  }(React.Component));
  exports.MaskedTextBoxWithoutContext = MaskedTextBoxWithoutContext;
  /**
   * Represents the PropsContext of the `MaskedTextBox` component.
   * Used for global configuration of all `MaskedTextBox` instances.
   *
   * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
   */
  exports.MaskedTextBoxPropsContext = 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 %}).
   *
   * 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.displayName = 'KendoReactMaskedTextBox';
  