(\n * \n * \n * \n * Submit\n * \n *
\n * )}\n * />\n * );\n * };\n *\n * ReactDOM.render(, document.querySelector('my-app'));\n * ```\n */\nvar Form = /** @class */ (function (_super) {\n __extends(Form, _super);\n /**\n * @hidden\n */\n function Form(props) {\n var _this = _super.call(this, props) || this;\n _this._id = guid();\n _this._touched = {};\n _this._visited = {};\n _this._modified = {};\n _this._validatorsByField = {};\n _this._values = {};\n _this._fields = {};\n _this._unmounted = false;\n _this._submitted = false;\n /**\n * @hidden\n */\n _this.isValid = function () {\n return _this.isFormValid(_this.errors);\n };\n /**\n * @hidden\n */\n _this.accumulatedForceUpdate = function () {\n // IMPORTANT:\n // Should only be used for updates not comming from editors as it\n // will cause cursor jump as react will reset the editor to old value\n if (_this._accumulatorTimeout) {\n clearTimeout(_this._accumulatorTimeout);\n }\n _this._accumulatorTimeout = window.setTimeout(function () {\n _this._accumulatorTimeout = undefined;\n _this.forceUpdate();\n }, FORCEUPDATE_ACCUMULATOR_TIMEOUT);\n };\n /**\n * @hidden\n */\n _this.resetForm = function () {\n _this.values = clone(_this.props.initialValues);\n _this._id = guid();\n _this._touched = {};\n _this._visited = {};\n _this._modified = {};\n _this._validatorsByField = {};\n _this._fields = {};\n _this._submitted = false;\n _this.forceUpdate();\n };\n /**\n * Method for resetting the form state outside the form component.\n *\n * > Use `onReset` only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.\n */\n _this.onReset = function () { return _this.resetForm(); };\n /**\n * @hidden\n */\n _this.addField = function (field) {\n _this._fields[field] = true;\n };\n /**\n * @hidden\n */\n _this.onSubmit = function (event) {\n var touchedVisited = {};\n var fields = _this.fields;\n if (event) {\n if (typeof event.preventDefault === 'function') {\n event.preventDefault();\n }\n if (typeof event.stopPropagation === 'function') {\n event.stopPropagation();\n }\n }\n fields.forEach(function (fieldName) {\n touchedVisited[fieldName] = true;\n });\n // show validations\n _this.visited = __assign({}, touchedVisited);\n _this.touched = __assign({}, touchedVisited);\n var values = _this.values;\n var isValid = _this.isFormValid(_this.errors);\n var isModified = _this.isFormModified(_this.modified, fields);\n if (_this.props.onSubmitClick) {\n _this.props.onSubmitClick.call(undefined, {\n values: values,\n isValid: isValid,\n isModified: isModified,\n event: event\n });\n }\n if (isValid && (_this.props.ignoreModified || isModified) && _this.props.onSubmit) {\n _this._submitted = true;\n _this.props.onSubmit.call(undefined, values, event);\n }\n _this.forceUpdate();\n };\n /**\n * Method for emiting changes to a specific field outside the form component.\n *\n * > Use `onChange` only if you cannot achieve the desired behavior through the Field component by FormRenderProps.\n */\n _this.onChange = function (name, options) {\n var _a;\n var value = options.value;\n _this.addField(name);\n if (!_this.modified[name]) {\n _this.modified = __assign({}, _this.modified, (_a = {}, _a[name] = true, _a));\n }\n _this.valueSetter(name, value);\n _this.forceUpdate();\n };\n /**\n * @hidden\n */\n _this.onFocus = function (name, skipForceUpdate) {\n var _a;\n if (_this.visited[name]) {\n return;\n }\n _this.visited = __assign({}, _this.visited, (_a = {}, _a[name] = true, _a));\n if (!skipForceUpdate) {\n _this.forceUpdate();\n }\n };\n /**\n * @hidden\n */\n _this.onBlur = function (name, skipForceUpdate) {\n var _a;\n if (_this.touched[name]) {\n return;\n }\n _this.onFocus(name, skipForceUpdate);\n _this.touched = __assign({}, _this.touched, (_a = {}, _a[name] = true, _a));\n if (!skipForceUpdate) {\n _this.forceUpdate();\n }\n };\n /**\n * @hidden\n */\n _this.onFieldRegister = function (name, validator) {\n var _a;\n _this.addField(name);\n // The sole reason for using class props over state - nextIndex, needed for destroying validators\n var oldValidators = (_this.validatorsByField[name] || []);\n var nextIndex = oldValidators.length;\n _this.validatorsByField = __assign({}, _this.validatorsByField, (_a = {}, _a[name] = oldValidators.concat([validator]), _a));\n _this.accumulatedForceUpdate();\n return function () {\n var _a;\n // onFieldUnregister:\n if (_this._unmounted) {\n return;\n }\n var newValidators = (_this.validatorsByField[name] || []).slice();\n var validatorIsUnregistered = Boolean(newValidators[nextIndex]);\n newValidators[nextIndex] = undefined;\n _this.validatorsByField = __assign({}, _this.validatorsByField, (_a = {}, _a[name] = newValidators, _a));\n if (validatorIsUnregistered) {\n _this.accumulatedForceUpdate();\n }\n };\n };\n /**\n * @hidden\n */\n _this.isFormValid = function (errors) {\n return !Object.keys(errors).some(function (fieldName) { return Boolean(errors[fieldName]); });\n };\n /**\n * @hidden\n */\n _this.isFormModified = function (modified, fields) {\n return fields.some(function (fieldName) { return modified[fieldName]; });\n };\n /**\n * @hidden\n */\n _this.isFormHasNotTouched = function (touched, fields) {\n return fields.some(function (fieldName) { return !touched[fieldName]; });\n };\n /**\n * @hidden\n */\n _this.isFormTouched = function (touched, fields) {\n return fields.some(function (fieldName) { return touched[fieldName]; });\n };\n /**\n * @hidden\n */\n _this.isFormVisited = function (visited, fields) {\n return fields.some(function (fieldName) { return visited[fieldName]; });\n };\n /**\n * @hidden\n */\n _this.valueGetter = function (fieldName) {\n return getter(fieldName)(_this.values);\n };\n /**\n * @hidden\n */\n _this.valueSetter = function (fieldName, value) {\n return setter(fieldName)(_this.values, value);\n };\n /**\n * @hidden\n */\n _this.onArrayAction = function (name) {\n var _a;\n _this.addField(name);\n if (!_this.modified[name]) {\n _this.modified = __assign({}, _this.modified, (_a = {}, _a[name] = true, _a));\n }\n _this.onBlur(name, true);\n };\n /**\n * @hidden\n */\n _this.onInsert = function (name, options) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).slice();\n newArray.splice(options.index, 0, options.value);\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n };\n /**\n * @hidden\n */\n _this.onUnshift = function (name, options) {\n _this.onInsert(name, {\n value: options.value,\n index: 0\n });\n };\n /**\n * @hidden\n */\n _this.onPush = function (name, options) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).concat([options.value]);\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n };\n /**\n * @hidden\n */\n _this.onPop = function (name) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).slice();\n var value = newArray.pop();\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n return value;\n };\n /**\n * @hidden\n */\n _this.onRemove = function (name, options) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).slice();\n var value = newArray.splice(options.index, 1);\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n return value;\n };\n /**\n * @hidden\n */\n _this.onReplace = function (name, options) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).slice();\n newArray.splice(options.index, 1, options.value);\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n };\n /**\n * @hidden\n */\n _this.onMove = function (name, options) {\n _this.onArrayAction(name);\n var newArray = (_this.valueGetter(name) || []).slice();\n var value = newArray[options.prevIndex];\n newArray.splice(options.prevIndex, 1);\n newArray.splice(options.nextIndex, 0, value);\n _this.valueSetter(name, newArray);\n _this.forceUpdate();\n };\n validatePackage(packageMetadata);\n _this.values = clone(props.initialValues);\n return _this;\n }\n Object.defineProperty(Form.prototype, \"touched\", {\n /**\n * @hidden\n */\n get: function () {\n return this._touched;\n },\n /**\n * @hidden\n */\n set: function (value) {\n this._touched = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"visited\", {\n /**\n * @hidden\n */\n get: function () {\n return this._visited;\n },\n /**\n * @hidden\n */\n set: function (value) {\n this._visited = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"modified\", {\n /**\n * @hidden\n */\n get: function () {\n return this._modified;\n },\n /**\n * @hidden\n */\n set: function (value) {\n this._modified = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"validatorsByField\", {\n /**\n * @hidden\n */\n get: function () {\n return this._validatorsByField;\n },\n /**\n * @hidden\n */\n set: function (value) {\n this._validatorsByField = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"values\", {\n /**\n * @hidden\n */\n get: function () {\n return this._values;\n },\n /**\n * @hidden\n */\n set: function (value) {\n this._values = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"fields\", {\n /**\n * @hidden\n */\n get: function () {\n return Object.keys(this._fields);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"formErrors\", {\n /**\n * @hidden\n */\n get: function () {\n if (this.props.validator) {\n return this.props.validator(this.values, this.valueGetter);\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Form.prototype, \"errors\", {\n /**\n * @hidden\n */\n get: function () {\n var _this = this;\n var errors = {};\n var fields = this.fields;\n var validatorsByField = this.validatorsByField;\n fields.forEach(function (fieldName) {\n errors[fieldName] = '';\n if (validatorsByField[fieldName]) {\n var validators_1 = [];\n validatorsByField[fieldName].forEach(function (validator) {\n if (Array.isArray(validator)) {\n validators_1.push.apply(validators_1, validator);\n }\n else {\n validators_1.push(validator);\n }\n });\n // find first validation error\n validators_1.find(function (validator) {\n if (validator) {\n var result = validator(_this.valueGetter(fieldName), _this.valueGetter, { name: fieldName });\n if (result) {\n errors[fieldName] = result;\n return true;\n }\n }\n return false;\n });\n }\n });\n var formErrors = this.formErrors;\n if (formErrors) {\n cloneObject(this.formErrors, errors);\n }\n return errors;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n Form.prototype.componentWillUnmount = function () {\n this._unmounted = true;\n if (this._accumulatorTimeout) {\n clearTimeout(this._accumulatorTimeout);\n }\n };\n /**\n * @hidden\n */\n Form.prototype.render = function () {\n var render = this.props.render;\n var touched = this.touched;\n var visited = this.visited;\n var modified = this.modified;\n var fields = this.fields;\n var errors = this.errors;\n var formValid = this.isFormValid(errors);\n var formModified = this.isFormModified(modified, fields);\n var formTouched = this.isFormTouched(touched, fields);\n var formVisited = this.isFormVisited(visited, fields);\n var formHasNotTouched = this.isFormHasNotTouched(touched, fields);\n // 1. The form is not touched, but has errors - allow submit to force validation.\n // 2. The form is valid and modified - if not modified, disable submit.\n var allowSubmit = (formHasNotTouched && !formValid) || (formValid && (this.props.ignoreModified || formModified));\n return (React.createElement(FormContext.Provider, { key: this._id, value: {\n id: this._id,\n valueGetter: this.valueGetter,\n errors: errors,\n modified: modified,\n touched: touched,\n visited: visited,\n registerField: this.onFieldRegister,\n onSubmit: this.onSubmit,\n onChange: this.onChange,\n onFocus: this.onFocus,\n onBlur: this.onBlur,\n onUnshift: this.onUnshift,\n onPush: this.onPush,\n onInsert: this.onInsert,\n onPop: this.onPop,\n onRemove: this.onRemove,\n onReplace: this.onReplace,\n onMove: this.onMove\n } }, render({\n valid: formValid,\n modified: formModified,\n touched: formTouched,\n visited: formVisited,\n submitted: this._submitted,\n valueGetter: this.valueGetter,\n errors: errors,\n allowSubmit: allowSubmit,\n onChange: this.onChange,\n onSubmit: this.onSubmit,\n onFormReset: this.resetForm\n })));\n };\n /**\n * @hidden\n */\n Form.displayName = 'KendoReactForm';\n /**\n * @hidden\n */\n Form.propTypes = {\n initialValues: PropTypes.any,\n onSubmit: PropTypes.func,\n onSubmitClick: PropTypes.func,\n render: PropTypes.func.isRequired\n };\n return Form;\n}(React.Component));\nexport { Form };\n","import * as licensing from '@progress/kendo-licensing';\n/**\n * @hidden\n */\nexport function validatePackage(packageMetadata) {\n if (typeof licensing !== 'undefined') {\n licensing.validatePackage(packageMetadata);\n }\n else {\n var message = \"License activation failed for \" + packageMetadata.name + \"\\n\";\n message += 'The @progress/kendo-licensing script is not loaded.\\n';\n message += \"See \" + packageMetadata.licensingDocsUrl + \" for more information.\\n\";\n console.warn(message);\n }\n}\n","import { intersect } from \"./algorithms\";\nimport { getWindow, autoScrollVelocity, scrollableViewPort, getScrollableParent, isPointerInsideContainer, getDocument } from \"./utils\";\n/** @hidden */\nexport var DRAG_AND_DROP_DISPATCH_ACTION;\n(function (DRAG_AND_DROP_DISPATCH_ACTION) {\n DRAG_AND_DROP_DISPATCH_ACTION[\"POINTER_DOWN\"] = \"pointerdown\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"POINTER_MOVE\"] = \"pointermove\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"POINTER_UP\"] = \"pointerup\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"POINTER_CANCEL\"] = \"pointercancel\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"MOUSE_DOWN\"] = \"mousedown\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"MOUSE_MOVE\"] = \"mousemove\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"MOUSE_UP\"] = \"mouseup\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"CONTEXT_MENU\"] = \"contextmenu\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"TOUCH_START\"] = \"touchstart\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"TOUCH_MOVE\"] = \"touchmove\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"TOUCH_END\"] = \"touchend\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"TOUCH_CANCEL\"] = \"touchcancel\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"SCROLL\"] = \"scroll\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"START\"] = \"KENDO_DRAG_AND_DROP_START\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"MOVE\"] = \"KENDO_DRAG_AND_DROP_MOVE\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"END\"] = \"KENDO_DRAG_AND_DROP_END\";\n DRAG_AND_DROP_DISPATCH_ACTION[\"CANCEL\"] = \"KENDO_DRAG_AND_DROP_CANCEL\";\n})(DRAG_AND_DROP_DISPATCH_ACTION || (DRAG_AND_DROP_DISPATCH_ACTION = {}));\nvar isTouchEvent = function (event) { return /^touch/.test(event.type); };\nvar isScrollEvent = function (event) { return /^(scroll)/.test(event.type); };\n/** @hidden */\nexport var normalizeEvent = function (event, state) { return (isTouchEvent(event)\n ? ({\n pageX: event.changedTouches[0].pageX,\n pageY: event.changedTouches[0].pageY,\n clientX: event.changedTouches[0].clientX,\n clientY: event.changedTouches[0].clientY,\n scrollX: state.scrollOffset.x,\n scrollY: state.scrollOffset.y,\n offsetX: state.offset.x,\n offsetY: state.offset.y,\n type: event.type,\n originalEvent: event,\n isTouch: true,\n altKey: false,\n ctrlKey: false,\n shiftKey: false,\n metaKey: false\n })\n : isScrollEvent(event)\n ? ({\n pageX: state.pageOffset.x,\n pageY: state.pageOffset.y,\n clientX: state.clientOffset.x,\n clientY: state.clientOffset.y,\n scrollX: state.scrollOffset.x,\n scrollY: state.scrollOffset.y,\n offsetX: state.offset.x,\n offsetY: state.offset.y,\n type: event.type,\n originalEvent: event,\n altKey: false,\n ctrlKey: false,\n shiftKey: false,\n metaKey: false\n })\n : ({\n pageX: event.pageX,\n pageY: event.pageY,\n clientX: event.clientX,\n clientY: event.clientY,\n offsetX: event.offsetX,\n offsetY: event.offsetY,\n scrollX: state.scrollOffset.x,\n scrollY: state.scrollOffset.y,\n type: event.type,\n ctrlKey: event.ctrlKey,\n shiftKey: event.shiftKey,\n altKey: event.altKey,\n metaKey: event.metaKey,\n originalEvent: event\n })); };\nvar noop = function () { };\n/** @hidden */\nexport var dispatchDragAndDrop = function (state, action, callbacks) {\n if (callbacks === void 0) { callbacks = {}; }\n var _a = callbacks.onIsPressedChange, onIsPressedChange = _a === void 0 ? noop : _a, _b = callbacks.onIsScrollingChange, onIsScrollingChange = _b === void 0 ? noop : _b, _c = callbacks.onVelocityChange, onVelocityChange = _c === void 0 ? noop : _c, _d = callbacks.onOffsetChange, onOffsetChange = _d === void 0 ? noop : _d, _e = callbacks.onPageOffsetChange, onPageOffsetChange = _e === void 0 ? noop : _e, _f = callbacks.onClientOffsetChange, onClientOffsetChange = _f === void 0 ? noop : _f, _g = callbacks.onScrollOffsetChange, onScrollOffsetChange = _g === void 0 ? noop : _g, _h = callbacks.onInitialScrollOffsetChange, onInitialScrollOffsetChange = _h === void 0 ? noop : _h;\n var drag = action.payload;\n var element = drag.element;\n var hint = drag.hint;\n var autoScrollDirection = state.autoScrollDirection;\n var overrideScrollableParent = state.scrollableParent;\n var event = normalizeEvent(action.event, state);\n switch (event.type) {\n case DRAG_AND_DROP_DISPATCH_ACTION.POINTER_DOWN:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.POINTER_DOWN\n && (!event.originalEvent.isPrimary\n || event.originalEvent.button !== 0)) {\n break;\n }\n // In rare cases where the `which` attribute is available in the mouse event\n // we check if the `left button` is explicitly clicked:\n // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which#return_value\n case DRAG_AND_DROP_DISPATCH_ACTION.MOUSE_DOWN:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.MOUSE_DOWN\n && (event.originalEvent.which\n && event.originalEvent.which > 1)\n || state.ignoreMouse) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_START:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_START\n && event.originalEvent.touches.length !== 1) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.START: {\n var scrollableParent_1 = overrideScrollableParent || getScrollableParent(action.payload.element);\n onInitialScrollOffsetChange(scrollableParent_1 instanceof Window\n ? { x: scrollableParent_1.scrollX, y: scrollableParent_1.scrollY }\n : { x: scrollableParent_1.scrollLeft, y: scrollableParent_1.scrollTop });\n onClientOffsetChange({\n x: event.clientX,\n y: event.clientY\n });\n onPageOffsetChange({\n x: event.pageX,\n y: event.pageY\n });\n onOffsetChange({\n x: event.offsetX,\n y: event.offsetY\n });\n onIsPressedChange(true);\n if (drag.onPress) {\n drag.onPress(event);\n }\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.SCROLL:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.SCROLL && !state.pressed) {\n break;\n }\n var scrollableParent = overrideScrollableParent || getScrollableParent(element);\n var scrollOffset = scrollableParent instanceof Window\n ? { x: scrollableParent.scrollX, y: scrollableParent.scrollY }\n : { x: scrollableParent.scrollLeft, y: scrollableParent.scrollTop };\n event.scrollX = scrollOffset.x - state.initialScrollOffset.x;\n event.scrollY = scrollOffset.y - state.initialScrollOffset.y;\n onScrollOffsetChange({\n x: event.scrollX,\n y: event.scrollY\n });\n case DRAG_AND_DROP_DISPATCH_ACTION.POINTER_MOVE:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.POINTER_MOVE && !event.originalEvent.isPrimary) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.MOUSE_MOVE:\n case DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_MOVE:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_MOVE && event.originalEvent.touches.length !== 1) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.MOVE: {\n if (state.pressed) {\n if (state.autoScroll && event.originalEvent.type !== 'scroll') {\n if (element) {\n var document_1 = getDocument(element);\n var scrollableParent_2 = overrideScrollableParent || getScrollableParent(document_1.elementFromPoint(event.clientX, event.clientY));\n var newVelocity = autoScrollVelocity(event.pageX, event.pageY, scrollableViewPort(scrollableParent_2, getWindow(element)));\n onVelocityChange({\n x: (autoScrollDirection && autoScrollDirection.horizontal === false) ? 0 : newVelocity.x,\n y: (autoScrollDirection && autoScrollDirection.vertical === false) ? 0 : newVelocity.y\n });\n onIsScrollingChange(newVelocity.y !== 0 || newVelocity.x !== 0);\n }\n }\n if (!state.drag && drag.onDragStart) {\n drag.onDragStart(event);\n }\n if (drag.onDrag) {\n drag.onDrag(event);\n }\n var dropElement_1 = intersect(hint || element, state.drops.map(function (drop) { return drop && drop.element; }).filter(function (d) { return d !== (hint || element); }));\n var drop = state.drops.find(function (drop) { return drop.element === dropElement_1; });\n if (drop\n && dropElement_1\n && isPointerInsideContainer(event.clientX, event.clientY, overrideScrollableParent || getScrollableParent(dropElement_1))\n && dropElement_1 !== element) {\n if ((state.drop && state.drop.element) !== dropElement_1) {\n if (state.drop && state.drop.onDragLeave) {\n state.drop.onDragLeave(event);\n }\n if (drop.onDragEnter) {\n drop.onDragEnter(event);\n }\n }\n else {\n if (drop.onDragOver) {\n drop.onDragOver(event);\n }\n }\n }\n else if (state.drop && state.drop.onDragLeave) {\n state.drop.onDragLeave(event);\n }\n }\n onClientOffsetChange({\n x: event.clientX,\n y: event.clientY\n });\n onPageOffsetChange({\n x: event.pageX,\n y: event.pageY\n });\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.POINTER_UP:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.POINTER_UP && !event.originalEvent.isPrimary) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.MOUSE_UP:\n // the last finger has been lifted, and the user is not doing gesture.\n // there might be a better way to handle this.\n case DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_END:\n if (event.type === DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_END && event.originalEvent.touches.length !== 1) {\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.END: {\n onIsPressedChange(false);\n onIsScrollingChange(false);\n if (drag.onRelease) {\n drag.onRelease(event);\n }\n if (state.drop && state.drop.onDrop) {\n state.drop.onDrop(event);\n }\n if (drag.onDragEnd) {\n drag.onDragEnd(event);\n }\n break;\n }\n case DRAG_AND_DROP_DISPATCH_ACTION.POINTER_CANCEL:\n case DRAG_AND_DROP_DISPATCH_ACTION.CONTEXT_MENU:\n case DRAG_AND_DROP_DISPATCH_ACTION.TOUCH_CANCEL:\n case DRAG_AND_DROP_DISPATCH_ACTION.CANCEL: {\n onIsPressedChange(false);\n onIsScrollingChange(false);\n if (drag.onDragEnd) {\n drag.onDragEnd(event);\n }\n if (state.drop && state.drop.onDragLeave) {\n state.drop.onDragLeave(event);\n }\n break;\n }\n default:\n break;\n }\n};\n","var getRatio = function (element, target) {\n var elementRect = element.getBoundingClientRect();\n var targetRect = target.getBoundingClientRect();\n var top = Math.max(targetRect.top, elementRect.top);\n var left = Math.max(targetRect.left, elementRect.left);\n var right = Math.min(targetRect.left + targetRect.width, elementRect.left + elementRect.width);\n var bottom = Math.min(targetRect.top + targetRect.height, elementRect.top + elementRect.height);\n var width = right - left;\n var height = bottom - top;\n if (left < right && top < bottom) {\n var targetArea = targetRect.width * targetRect.height;\n var entryArea = elementRect.width * elementRect.height;\n var intersectionArea = width * height;\n var intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);\n return Number(intersectionRatio.toFixed(4));\n }\n return 0;\n};\n/** @hidden */\nexport var intersect = function (element, candidates) {\n var max = 0;\n var result = null;\n candidates.forEach(function (candidate) {\n if (candidate && element) {\n var ration = getRatio(element, candidate);\n if (ration > max) {\n max = ration;\n result = candidate;\n }\n }\n });\n return result;\n};\n","var detectBrowser = function () {\n var ua = window && window.navigator.userAgent;\n if (!ua) {\n return false;\n }\n var browser = false;\n var match = [];\n var browserRxs = {\n edge: /(edge)[ \\/]([\\w.]+)/i,\n webkit: /(chrome|crios)[ \\/]([\\w.]+)/i,\n safari: /(webkit)[ \\/]([\\w.]+)/i,\n opera: /(opera)(?:.*version|)[ \\/]([\\w.]+)/i,\n msie: /(msie\\s|trident.*? rv:)([\\w.]+)/i,\n mozilla: /(mozilla)(?:.*? rv:([\\w.]+)|)/i\n };\n for (var agent in browserRxs) {\n if (browserRxs.hasOwnProperty(agent)) {\n match = ua.match(browserRxs[agent]);\n if (match) {\n browser = {};\n browser[agent] = true;\n browser[match[1].toLowerCase().split(\" \")[0].split(\"/\")[0]] = true;\n browser.version = parseInt(document.DOCUMENT_NODE || match[2], 10);\n break;\n }\n }\n }\n return browser;\n};\n/** @hidden */\nexport var getDocument = function (element) {\n return element ? element.ownerDocument || window.document : window.document;\n};\n/** @hidden */\nexport var getWindow = function (element) {\n var document = getDocument(element);\n return document\n ? document.defaultView || window\n : window;\n};\n/** @hidden */\nexport var scrollableRoot = function (element) {\n var support = { browser: detectBrowser() };\n var document = getDocument(element);\n return (support.browser.edge || support.browser.safari) ? document.body : document.documentElement;\n};\n/** @hidden */\nexport var isScrollable = function (el) {\n if (el && el.className && typeof (el.className) === 'string' && el.className.indexOf('k-auto-scrollable') > -1) {\n return true;\n }\n var overflow = window.getComputedStyle(el, 'overflow').overflow;\n return overflow.indexOf('auto') > -1 || overflow.indexOf('scroll') > -1;\n};\n/** @hidden */\nexport var getScrollableParent = function (el) {\n var root = scrollableRoot(el);\n if (!el || el === document.body || el === document.documentElement) {\n return root;\n }\n var parent = el;\n while (parent && parent !== document.body && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && !isScrollable(parent)) {\n parent = parent.parentNode;\n }\n if (parent === document.body || parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n return root;\n }\n return parent;\n};\n/** @hidden */\nexport var autoScrollVelocity = function (mouseX, mouseY, rect) {\n var velocity = { x: 0, y: 0 };\n var AUTO_SCROLL_AREA = 50;\n if (mouseX - rect.left < AUTO_SCROLL_AREA) {\n velocity.x = -(AUTO_SCROLL_AREA - (mouseX - rect.left));\n }\n else if (rect.right - mouseX < AUTO_SCROLL_AREA) {\n velocity.x = AUTO_SCROLL_AREA - (rect.right - mouseX);\n }\n if (mouseY - rect.top < AUTO_SCROLL_AREA) {\n velocity.y = -(AUTO_SCROLL_AREA - (mouseY - rect.top));\n }\n else if (rect.bottom - mouseY < AUTO_SCROLL_AREA) {\n velocity.y = AUTO_SCROLL_AREA - (rect.bottom - mouseY);\n }\n return velocity;\n};\n/** @hidden */\nexport var scrollableViewPort = function (el, window) {\n var root = scrollableRoot(el);\n if (el === root) {\n return {\n top: root.scrollTop,\n left: root.scrollLeft,\n bottom: root.scrollTop + window.innerHeight,\n right: root.scrollLeft + window.innerWidth\n };\n }\n else {\n var rect = el.getBoundingClientRect();\n return {\n bottom: rect.top + rect.height,\n right: rect.left + rect.width,\n left: rect.left,\n top: rect.top\n };\n }\n};\n/** @hidden */\nexport var isPointerInsideContainer = function (x, y, container) {\n var rect = container.getBoundingClientRect();\n return (rect.top <= y &&\n rect.left <= x &&\n y <= rect.bottom &&\n x <= rect.right);\n};\n","import { scrollableRoot } from './utils';\n/** @hidden */\nexport var autoScroll = function (scrollableParent, vel) {\n if (!scrollableParent) {\n return;\n }\n var yIsScrollable;\n var xIsScrollable;\n var isRootNode = scrollableParent === scrollableRoot(scrollableParent);\n if (isRootNode) {\n yIsScrollable = document.body.scrollHeight > window.innerHeight;\n xIsScrollable = document.body.scrollWidth > window.innerWidth;\n }\n else {\n yIsScrollable = scrollableParent.offsetHeight <= scrollableParent.scrollHeight;\n xIsScrollable = scrollableParent.offsetWidth <= scrollableParent.scrollWidth;\n }\n var yDelta = scrollableParent.scrollTop + vel.y;\n var yInBounds = yIsScrollable && yDelta > 0 && yDelta < scrollableParent.scrollHeight;\n var xDelta = scrollableParent.scrollLeft + vel.x;\n var xInBounds = xIsScrollable && xDelta > 0 && xDelta < scrollableParent.scrollWidth;\n if (yInBounds) {\n scrollableParent.scrollTop += vel.y;\n }\n else if (yIsScrollable && yDelta < 0) {\n scrollableParent.scrollTop = 0;\n }\n if (xInBounds) {\n scrollableParent.scrollLeft += vel.x;\n }\n else if (xIsScrollable && xDelta < 0) {\n scrollableParent.scrollLeft = 0;\n }\n};\n","import * as React from 'react';\n/**\n * @hidden\n */\nexport var useInheritedState = function (context, defaultValue) {\n var _a = React.useContext(context), contextValue = _a[0], contextSetter = _a[1];\n var _b = React.useState(defaultValue), localValue = _b[0], localSetter = _b[1];\n var value = contextValue !== undefined ? contextValue : localValue;\n var handleValueChange = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n contextValue !== undefined\n ? contextSetter.apply(void 0, args) : localSetter(args[0]);\n };\n return [\n value,\n handleValueChange\n ];\n};\n","import * as React from 'react';\nimport { noop } from '../../noop';\n/**\n * @hidden\n */\nexport var DragContext = React.createContext([\n undefined,\n noop\n]);\n/**\n * @hidden\n */\nexport var DropContext = React.createContext([\n undefined,\n noop\n]);\n/**\n * @hidden\n */\nexport var DragsContext = React.createContext([[], noop, noop]);\n/**\n * @hidden\n */\nexport var DropsContext = React.createContext([[], noop, noop]);\n","import * as React from 'react';\nimport { dispatchDragAndDrop, autoScroll as autoScrollElement, getScrollableParent } from '@progress/kendo-draggable-common';\nimport { noop } from '../noop';\nimport { useInheritedState } from '../hooks/useInheritedState';\nimport { DragContext, DropContext, DragsContext, DropsContext } from '../drag-n-drop/context';\nvar IGNORE_MOUSE_TIMEOUT = 2000;\n/**\n * Represents the KendoReact `useDraggable` hook.\n * Use it to attach `drag` events to a native HTML DOM elements, or custom React Components.\n *\n * For more information, refer to the [KendoReact Draggable]({% slug draggable_drag-and-drop %}) article.\n *\n * @param ref - The `ref` of the HTML Element or React Component which will enable the `draggable` functionality.\n * @param callbacks - A collection of callbacks, called by the `useDraggable` hook when a specific action occurs.\n * @param options - Additional configuration of the `useDraggable` hook.\n */\nexport function useDraggable(ref, callbacks, options) {\n if (options === void 0) { options = {}; }\n var _a = callbacks.onPress, onPress = _a === void 0 ? noop : _a, _b = callbacks.onRelease, onRelease = _b === void 0 ? noop : _b, _c = callbacks.onDragStart, onDragStart = _c === void 0 ? noop : _c, _d = callbacks.onDrag, onDrag = _d === void 0 ? noop : _d, _e = callbacks.onDragEnd, onDragEnd = _e === void 0 ? noop : _e;\n var _f = options.hint, hint = _f === void 0 ? null : _f, _g = options.mouseOnly, mouseOnly = _g === void 0 ? false : _g, _h = options.autoScroll, autoScroll = _h === void 0 ? true : _h, _j = options.scrollContainer, scrollContainer = _j === void 0 ? null : _j;\n var _k = React.useState(false), pressed = _k[0], setPressed = _k[1];\n var _l = React.useState(false), scrolling = _l[0], setScrolling = _l[1];\n var drop = useInheritedState(DropContext)[0];\n var _m = useInheritedState(DragContext), drag = _m[0], setDrag = _m[1];\n var drops = React.useContext(DropsContext)[0];\n var _o = React.useContext(DragsContext), drags = _o[0], registerDrag = _o[1], deregisterDrag = _o[2];\n var velocity = React.useRef({ x: 0, y: 0 });\n var scrollInterval = React.useRef();\n var ignoreMouse = React.useRef(false);\n var restoreMouseTimeout = React.useRef();\n var scrollable = React.useRef(null);\n var unmount = React.useRef(false);\n var offset = React.useRef({ x: 0, y: 0 });\n var pageOffset = React.useRef({ x: 0, y: 0 });\n var clientOffset = React.useRef({ x: 0, y: 0 });\n var initialClientOffset = React.useRef({ x: 0, y: 0 });\n var scrollOffset = React.useRef({ x: 0, y: 0 });\n var initialScrollOffset = React.useRef({ x: 0, y: 0 });\n var supportPointerEvent = Boolean(window && (typeof window !== 'undefined') && window.PointerEvent);\n var pointers = !mouseOnly && supportPointerEvent;\n var getElement = React.useCallback(function () { return ref.current && ref.current.element\n ? ref.current.element\n : ref.current; }, [ref]);\n var getHintElement = React.useCallback(function () { return hint && hint.current && hint.current.element\n ? hint.current.element\n : hint\n ? hint.current\n : null; }, [hint]);\n var getScrollContainer = React.useCallback(function () { return scrollContainer && scrollContainer.current && scrollContainer.current.element\n ? scrollContainer.current.element\n : scrollContainer\n ? scrollContainer.current\n : null; }, [scrollContainer]);\n var getAutoScrollContainer = React.useCallback(function () { return typeof autoScroll === 'object' && autoScroll.boundaryElementRef\n && autoScroll.boundaryElementRef.current && autoScroll.boundaryElementRef.current.element\n ? autoScroll.boundaryElementRef.current.element\n : typeof autoScroll === 'object' && autoScroll.boundaryElementRef && autoScroll.boundaryElementRef.current\n ? autoScroll.boundaryElementRef.current\n : null; }, [autoScroll]);\n var target = React.useRef(null);\n React.useImperativeHandle(target, function () { return ({\n element: getElement(),\n hint: getHintElement(),\n onPress: handlePress,\n onDragStart: handleDragStart,\n onDrag: handleDrag,\n onDragEnd: handleDragEnd,\n onRelease: handleRelease,\n data: ref.current\n }); });\n var getDocument = React.useCallback(function () {\n var element = getElement();\n return element ? element.ownerDocument || document : document;\n }, [getElement]);\n var getWindow = React.useCallback(function () {\n var document = getDocument();\n return document\n ? document.defaultView || window\n : window;\n }, [getDocument]);\n var getState = React.useCallback(function () { return ({\n drag: drag ? drag.current : null,\n drop: drop ? drop.current : null,\n drags: drags.map(function (d) { return d.current; }),\n drops: drops.map(function (d) { return d.current; }),\n pressed: pressed,\n ignoreMouse: ignoreMouse.current,\n scrollOffset: scrollOffset.current,\n offset: offset.current,\n pageOffset: pageOffset.current,\n initialScrollOffset: initialScrollOffset.current,\n clientOffset: clientOffset.current,\n initialClientOffset: initialClientOffset.current,\n velocity: velocity.current,\n autoScroll: Boolean(typeof autoScroll === 'object' ? autoScroll.enabled !== false : autoScroll),\n scrollableParent: getAutoScrollContainer(),\n autoScrollDirection: typeof autoScroll === 'object' ? autoScroll.direction : { horizontal: true, vertical: true },\n isScrolling: scrolling\n }); }, [drag, drop, drags, drops, pressed, autoScroll, getAutoScrollContainer, scrolling]);\n var handlePressedChange = React.useCallback(function (value) {\n setPressed(value);\n }, []);\n var handleScrollingChange = React.useCallback(function (value) {\n setScrolling(value);\n }, []);\n var handleVelocityChange = React.useCallback(function (value) {\n velocity.current = value;\n }, []);\n var handleOffsetChange = React.useCallback(function (value) {\n offset.current = value;\n }, []);\n var handleClientOffsetChange = React.useCallback(function (value) {\n clientOffset.current = value;\n }, []);\n var handlePageOffsetChange = React.useCallback(function (value) {\n pageOffset.current = value;\n }, []);\n var handleInitialClientOffsetChange = React.useCallback(function (value) {\n initialClientOffset.current = value;\n }, []);\n var handleScrollOffsetChange = React.useCallback(function (value) {\n scrollOffset.current = value;\n }, []);\n var handleInitialScrollOffsetChange = React.useCallback(function (value) {\n initialScrollOffset.current = value;\n }, []);\n // Drag Events\n var handlePress = React.useCallback(function (event) {\n onPress(event);\n }, [onPress]);\n var handleRelease = React.useCallback(function (event) {\n onRelease(event);\n }, [onRelease]);\n var handleDragStart = React.useCallback(function (event) {\n setDrag(target, { target: ref.current, event: event });\n onDragStart(event);\n }, [setDrag, ref, onDragStart]);\n var handleDrag = React.useCallback(function (event) {\n onDrag(event);\n }, [onDrag]);\n var handleDragEnd = React.useCallback(function (event) {\n if (unmount.current) {\n return;\n }\n setDrag(null, { target: ref.current, event: event });\n onDragEnd(event);\n }, [onDragEnd, setDrag, ref]);\n var dispatchDragEvent = React.useCallback(function (event) {\n dispatchDragAndDrop(getState(), { event: event, payload: target.current }, {\n onVelocityChange: handleVelocityChange,\n onOffsetChange: handleOffsetChange,\n onClientOffsetChange: handleClientOffsetChange,\n onPageOffsetChange: handlePageOffsetChange,\n onInitialClientOffsetChange: handleInitialClientOffsetChange,\n onScrollOffsetChange: handleScrollOffsetChange,\n onInitialScrollOffsetChange: handleInitialScrollOffsetChange,\n onIsPressedChange: handlePressedChange,\n onIsScrollingChange: handleScrollingChange\n });\n }, [\n getState,\n handleVelocityChange,\n handleOffsetChange,\n handlePageOffsetChange,\n handleClientOffsetChange,\n handleInitialClientOffsetChange,\n handleInitialScrollOffsetChange,\n handlePressedChange,\n handleScrollOffsetChange,\n handleScrollingChange\n ]);\n // Pointer Events\n var handlePointerDown = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handlePointerMove = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handlePointerCancel = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handlePointerUp = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n // Mouse Events\n var handleMouseDown = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handleMouseMove = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handleMouseUp = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handleContextMenu = React.useCallback(function (event) {\n event.preventDefault();\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n // Touch Events\n var handleTouchStart = React.useCallback(function (event) {\n event.preventDefault();\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handleTouchMove = React.useCallback(function (event) {\n event.preventDefault();\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n var handleTouchEnd = React.useCallback(function (event) {\n if (event.touches.length === 0 && event.changedTouches.length === 1) {\n var currentWindow = getWindow();\n ignoreMouse.current = true;\n restoreMouseTimeout.current = currentWindow.setTimeout(function () { ignoreMouse.current = false; }, IGNORE_MOUSE_TIMEOUT);\n }\n dispatchDragEvent(event);\n }, [dispatchDragEvent, getWindow]);\n var handleScroll = React.useCallback(function (event) {\n dispatchDragEvent(event);\n }, [dispatchDragEvent]);\n // Misc\n var prerequisites = React.useCallback(function () {\n var element = getElement();\n if (element) {\n var initialTouchAction_1 = element.style.touchAction;\n element.style.touchAction = 'none';\n return function () {\n element.style.touchAction = initialTouchAction_1;\n };\n }\n }, [getElement]);\n var register = React.useCallback(function () {\n registerDrag(target);\n return function () {\n deregisterDrag(target);\n };\n }, [deregisterDrag, registerDrag]);\n var init = function () {\n var window = getWindow();\n var element = getElement();\n var document = getDocument();\n if (pointers) {\n if (element) {\n scrollable.current = getScrollableParent(element);\n if (scrollable.current) {\n scrollable.current.addEventListener('scroll', handleScroll, { passive: true });\n }\n element.addEventListener('pointerdown', handlePointerDown, { passive: true });\n }\n if (pressed) {\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp, true);\n document.addEventListener('contextmenu', handleContextMenu);\n document.addEventListener('pointercancel', handlePointerCancel, { passive: true });\n }\n }\n else {\n // Hacky-hacky iOS Safari\n window.addEventListener('touchmove', noop, { capture: false, passive: false });\n if (element) {\n element.addEventListener('mousedown', handleMouseDown, { passive: true });\n if (!mouseOnly) {\n element.addEventListener('touchstart', handleTouchStart, { passive: true });\n if (pressed) {\n element.addEventListener('touchmove', handleTouchMove, { passive: true });\n element.addEventListener('touchend', handleTouchEnd, { passive: true });\n }\n }\n }\n if (pressed) {\n document.addEventListener('mousemove', handleMouseMove, { passive: true });\n document.addEventListener('mouseup', handleMouseUp, { passive: true });\n }\n }\n return function () {\n if (scrollable.current) {\n scrollable.current.removeEventListener('scroll', handleScroll);\n }\n if (element) {\n element.removeEventListener('pointerdown', handlePointerDown);\n element.removeEventListener('mousedown', handleMouseDown);\n element.removeEventListener('touchstart', handleTouchStart);\n element.removeEventListener('touchmove', handleTouchMove);\n element.removeEventListener('touchend', handleTouchEnd);\n }\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp, true);\n document.removeEventListener('contextmenu', handleContextMenu);\n document.removeEventListener('pointercancel', handlePointerCancel);\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n window.removeEventListener('touchmove', noop);\n window.clearTimeout(restoreMouseTimeout.current);\n };\n };\n React.useEffect(function () {\n var window = getWindow();\n if (scrolling) {\n var scrollableParent_1 = getScrollContainer()\n || getScrollableParent(document.elementFromPoint(clientOffset.current.x, clientOffset.current.y));\n window.clearInterval(scrollInterval.current);\n scrollInterval.current = window.setInterval(function () {\n autoScrollElement(scrollableParent_1, { x: velocity.current.x, y: velocity.current.y });\n }, 50);\n }\n return function () {\n window.clearInterval(scrollInterval.current);\n };\n }, [getElement, getScrollContainer, getWindow, scrolling]);\n React.useEffect(prerequisites, [prerequisites]);\n React.useEffect(init, [\n pressed,\n getWindow,\n getElement,\n getDocument,\n mouseOnly,\n pointers,\n handleContextMenu,\n handleMouseDown,\n handleMouseMove,\n handleMouseUp,\n handlePointerCancel,\n handlePointerDown,\n handlePointerMove,\n handlePointerUp,\n handleTouchEnd,\n handleTouchMove,\n handleTouchStart,\n handleScroll\n ]);\n React.useEffect(function () {\n return function () {\n unmount.current = true;\n };\n }, []);\n React.useLayoutEffect(register, [register]);\n}\n","/**\n * @hidden\n */\nexport var ResultType;\n(function (ResultType) {\n ResultType[ResultType[\"Literal\"] = 0] = \"Literal\";\n ResultType[ResultType[\"Mask\"] = 1] = \"Mask\";\n ResultType[ResultType[\"Undefined\"] = 2] = \"Undefined\";\n})(ResultType || (ResultType = {}));\n/**\n * @hidden\n */\nvar Result = /** @class */ (function () {\n function Result(value, rest, type) {\n if (type === void 0) { type = ResultType.Undefined; }\n this.value = value;\n this.rest = rest;\n this.type = type;\n }\n // map :: Functor f => f a ~> (a -> b) -> f b\n Result.prototype.map = function (fn) {\n return new Result(fn(this.value), this.rest);\n };\n // chain :: Chain m => m a ~> (a -> m b) -> m b\n Result.prototype.chain = function (fn) {\n return fn(this.value, this.rest);\n };\n Result.prototype.fold = function (s, _ /* we don't need it*/) {\n return s(this.value, this.rest);\n };\n Result.prototype.concat = function (r) {\n return this.map(function (vs, _) { return r.chain(function (v, __) { return vs.concat([v]); }); });\n };\n Result.prototype.toString = function () {\n return \"Result({ value: '\" + this.value + \"', rest: \" + this.rest + \" })\";\n };\n return Result;\n}());\nexport { Result };\n","/**\n * @hidden\n */\nvar Stream = /** @class */ (function () {\n function Stream(input, control) {\n if (input === void 0) { input = []; }\n if (control === void 0) { control = []; }\n this.input = input;\n this.control = control;\n this.inputCursor = 0;\n this.controlCursor = 0;\n }\n Stream.prototype.eof = function () {\n return this.inputCursor >= this.input.length;\n };\n // Get the first value from the input.\n Stream.prototype.next = function () {\n return {\n char: this.input[this.inputCursor++],\n control: this.control[this.controlCursor++]\n };\n };\n Stream.prototype.peek = function () {\n return {\n char: this.input[this.inputCursor],\n control: this.control[this.controlCursor]\n };\n };\n Stream.prototype.eat_input = function () {\n this.inputCursor++;\n };\n Stream.prototype.eat_control = function () {\n this.controlCursor++;\n };\n Stream.prototype.eat = function () {\n this.inputCursor++;\n this.controlCursor++;\n };\n return Stream;\n}());\nexport { Stream };\n","import { Result, ResultType } from './result';\nimport { Stream } from './stream';\nvar toArray = function (value) { return (value || '').split(''); };\nvar ESCAPE_CHARACTER = '\\\\';\n/**\n * @hidden\n */\nvar Parser = /** @class */ (function () {\n function Parser(parse) {\n this.parse = parse;\n }\n Parser.prototype.run = function (input, control) {\n if (control === void 0) { control = ''; }\n if (input instanceof Stream) {\n return this.parse(input);\n }\n else {\n return this.parse(new Stream(toArray(input), toArray(control)));\n }\n };\n // map :: Functor f => f a ~> (a -> b) -> f b\n Parser.prototype.map = function (f) {\n var _this = this;\n return new Parser(function (stream) { return _this.parse(stream).map(f); });\n };\n // chain :: Chain m => m a ~> (a -> m b) -> m b\n Parser.prototype.chain = function (f) {\n var _this = this;\n return new Parser(function (stream) { return _this.parse(stream).chain(function (v, s) { return f(v).run(s); }); });\n };\n Parser.prototype.isLiteral = function (c) {\n return this.run(c).type === ResultType.Literal;\n };\n return Parser;\n}());\nexport { Parser };\n/**\n * @hidden\n */\nexport var mask = function (_a) {\n var prompt = _a.prompt, promptPlaceholder = _a.promptPlaceholder;\n return function (rule) { return new Parser(function (stream) {\n while (!stream.eof()) {\n var _a = stream.peek(), char = _a.char, control = _a.control;\n if (char === control && control === prompt) {\n stream.eat();\n return new Result(prompt, stream, ResultType.Mask);\n }\n if (rule.test(char)) {\n stream.eat();\n return new Result(char, stream, ResultType.Mask);\n }\n if (char === promptPlaceholder) {\n stream.eat();\n return new Result(prompt, stream, ResultType.Mask);\n }\n stream.eat_input();\n }\n stream.eat();\n return new Result(prompt, stream, ResultType.Mask);\n }); };\n};\n/**\n * @hidden\n */\nexport var literal = function (_token) { return new Parser(function (stream) {\n // let {char, control} = stream.peek();\n var char = stream.peek().char;\n if (char === _token) {\n stream.eat();\n return new Result(_token, stream, ResultType.Literal);\n }\n // if (control === _token) {\n // while (!stream.eof() && char !== _token) {\n // stream.eat_input();\n // char = stream.peek().char;\n // }\n // }\n //\n // if (control !== undefined) {\n // stream.eat();\n // }\n return new Result(_token, stream, ResultType.Literal);\n}); };\n/**\n * @hidden\n */\nexport var unmask = function (prompt) { return function (rule) { return new Parser(function (stream) {\n while (!stream.eof()) {\n var _a = stream.peek(), char = _a.char, control = _a.control;\n if (char === prompt && control === prompt) {\n stream.eat();\n return new Result(char, stream);\n }\n if (rule.test(char)) {\n stream.eat();\n return new Result(char, stream);\n }\n stream.eat_input();\n }\n stream.eat();\n return new Result('', stream);\n}); }; };\n/**\n * @hidden\n */\nexport var unliteral = function (_token) { return new Parser(function (stream) {\n if (stream.eof()) {\n return new Result('', stream);\n }\n var char = stream.peek().char;\n if (char === _token) {\n stream.eat();\n }\n return new Result(_token, stream);\n}); };\n/**\n * @hidden\n */\nexport var token = function (rules, creator) { return new Parser(function (stream) {\n var char = stream.next().char;\n var rule = rules[char];\n if (char === ESCAPE_CHARACTER) {\n char = stream.next().char;\n return new Result(creator.literal(char), stream);\n }\n if (!rule) {\n return new Result(creator.literal(char), stream);\n }\n return new Result(creator.mask(rule), stream);\n}); };\n/**\n * @hidden\n */\nexport var rawMask = function (_a) {\n var prompt = _a.prompt, promptPlaceholder = _a.promptPlaceholder;\n return new Parser(function (stream) {\n var char = stream.next().char;\n if (char === prompt) {\n return new Result(promptPlaceholder, stream);\n }\n return new Result(char, stream);\n });\n};\n/**\n * @hidden\n */\nexport var rawLiteral = function (includeLiterals) { return new Parser(function (stream) {\n var char = stream.next().char;\n if (includeLiterals) {\n return new Result(char, stream);\n }\n return new Result('', stream);\n}); };\n","import { Parser } from './parsers';\nimport { Result } from './result';\n/**\n * @hidden\n */\nvar always = function (value) { return new Parser(function (stream) { return new Result(value, stream); }); };\n/**\n * @hidden\n */\nvar append = function (p1, p2) { return p1.chain(function (vs) { return p2.map(function (v) { return vs.concat([v]); }); }); };\n/**\n * @hidden\n */\nexport var sequence = function (list) { return list.reduce(function (acc, parser) { return append(acc, parser); }, always([])); };\n/**\n * @hidden\n */\nexport var greedy = function (parser) { return new Parser(function (stream) {\n var result = new Result([], stream);\n while (!stream.eof()) {\n result = result.concat(parser.run(stream));\n }\n return result;\n}); };\n","import { greedy, sequence } from './parsing/combinators';\nimport { literal, mask as maskParser, rawLiteral, rawMask, token, unliteral, unmask } from './parsing/parsers';\n/**\n * @hidden\n */\nvar MaskingService = /** @class */ (function () {\n function MaskingService() {\n this.rules = {};\n this.prompt = '_';\n this.mask = '';\n this.promptPlaceholder = ' ';\n this.includeLiterals = false;\n this.maskTokens = [];\n this.unmaskTokens = [];\n this.rawTokens = [];\n this.validationTokens = [];\n }\n MaskingService.prototype.update = function (_a) {\n var _b = _a.mask, mask = _b === void 0 ? '' : _b, _c = _a.prompt, prompt = _c === void 0 ? '' : _c, _d = _a.promptPlaceholder, promptPlaceholder = _d === void 0 ? ' ' : _d, _e = _a.rules, rules = _e === void 0 ? {} : _e, _f = _a.includeLiterals, includeLiterals = _f === void 0 ? false : _f;\n this.mask = mask;\n this.prompt = prompt;\n this.promptPlaceholder = promptPlaceholder;\n this.rules = rules;\n this.includeLiterals = includeLiterals;\n this.tokenize();\n };\n MaskingService.prototype.validationValue = function (maskedValue) {\n if (maskedValue === void 0) { maskedValue = ''; }\n var value = maskedValue;\n sequence(this.validationTokens)\n .run(maskedValue)\n .fold(function (unmasked) {\n value = unmasked.join('');\n });\n return value;\n };\n MaskingService.prototype.rawValue = function (maskedValue) {\n if (maskedValue === void 0) { maskedValue = ''; }\n var value = maskedValue;\n if (!this.rawTokens.length) {\n return value;\n }\n sequence(this.rawTokens)\n .run(maskedValue)\n .fold(function (unmasked) {\n value = unmasked.join('');\n });\n return value;\n };\n /**\n * @hidden\n */\n MaskingService.prototype.maskRaw = function (rawValue) {\n if (rawValue === void 0) { rawValue = ''; }\n var value = rawValue;\n if (!this.maskTokens.length) {\n return value;\n }\n sequence(this.maskTokens)\n .run(rawValue)\n .fold(function (masked) {\n value = masked.join('');\n });\n return value;\n };\n MaskingService.prototype.maskInput = function (input, control, splitPoint) {\n if (input.length < control.length) {\n return this.maskRemoved(input, control, splitPoint);\n }\n return this.maskInserted(input, control, splitPoint);\n };\n MaskingService.prototype.maskInRange = function (pasted, oldValue, start, end) {\n var value = '';\n var selection = end;\n var beforeChange = oldValue.split('').slice(0, start);\n var afterChange = oldValue.split('').slice(end);\n sequence(this.maskTokens.slice(start, end))\n .run(pasted)\n .fold(function (masked) {\n value = beforeChange\n .concat(masked)\n .concat(afterChange)\n .join('');\n });\n return {\n selection: selection,\n value: value\n };\n };\n MaskingService.prototype.maskRemoved = function (input, control, splitPoint) {\n var _this = this;\n var value = '';\n var selection = splitPoint;\n var unchanged = input.split('').slice(splitPoint);\n var changed = input.split('').slice(0, splitPoint).join('');\n var take = this.maskTokens.length - (input.length - splitPoint);\n sequence(this.maskTokens.slice(0, take))\n .run(changed, control)\n .fold(function (masked) {\n selection = _this.adjustPosition(masked, selection);\n value = masked.concat(unchanged).join('');\n });\n return {\n selection: selection,\n value: value\n };\n };\n MaskingService.prototype.adjustPosition = function (input, selection) {\n var caretChar = input[selection];\n var isLiteral = this.maskTokens[selection].isLiteral(caretChar);\n if (!isLiteral && caretChar !== this.prompt) {\n return selection + 1;\n }\n return selection;\n };\n MaskingService.prototype.maskInserted = function (input, control, splitPoint) {\n var _this = this;\n var value = '';\n var selection = splitPoint;\n var changed = input.slice(0, splitPoint);\n sequence(this.unmaskTokens)\n .run(changed, control)\n .chain(function (unmasked) {\n selection = unmasked.join('').length;\n var unchanged = control.slice(selection);\n return sequence(_this.maskTokens)\n .run(unmasked.join('') + unchanged, control);\n })\n .fold(function (masked) {\n value = masked.join('');\n });\n return {\n selection: selection,\n value: value\n };\n };\n Object.defineProperty(MaskingService.prototype, \"maskTokenCreator\", {\n get: function () {\n var _a = this, prompt = _a.prompt, promptPlaceholder = _a.promptPlaceholder;\n return {\n literal: function (rule) { return literal(rule); },\n mask: function (rule) { return maskParser({ prompt: prompt, promptPlaceholder: promptPlaceholder })(rule); }\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskingService.prototype, \"unmaskTokenCreator\", {\n get: function () {\n var _this = this;\n return {\n literal: function (rule) { return unliteral(rule); },\n mask: function (rule) { return unmask(_this.prompt)(rule); }\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskingService.prototype, \"rawTokenCreator\", {\n get: function () {\n var _a = this, prompt = _a.prompt, promptPlaceholder = _a.promptPlaceholder, includeLiterals = _a.includeLiterals;\n return {\n literal: function (_) { return rawLiteral(includeLiterals); },\n mask: function (_) { return rawMask({ prompt: prompt, promptPlaceholder: promptPlaceholder }); }\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskingService.prototype, \"validationTokenCreator\", {\n get: function () {\n var prompt = this.prompt;\n return {\n literal: function (_) { return rawLiteral(false); },\n mask: function (_) { return rawMask({ prompt: prompt, promptPlaceholder: '' }); }\n };\n },\n enumerable: true,\n configurable: true\n });\n MaskingService.prototype.tokenize = function () {\n var _this = this;\n greedy(token(this.rules, this.maskTokenCreator))\n .run(this.mask)\n .fold(function (tokens, _) {\n _this.maskTokens = tokens;\n });\n greedy(token(this.rules, this.unmaskTokenCreator))\n .run(this.mask)\n .fold(function (tokens, _) {\n _this.unmaskTokens = tokens;\n });\n greedy(token(this.rules, this.rawTokenCreator))\n .run(this.mask)\n .fold(function (tokens, _) {\n _this.rawTokens = tokens;\n });\n greedy(token(this.rules, this.validationTokenCreator))\n .run(this.mask)\n .fold(function (tokens, _) {\n _this.validationTokens = tokens;\n });\n };\n return MaskingService;\n}());\nexport { MaskingService };\n","/**\n * @hidden\n */\nvar defaultRules = {\n '#': /[\\d\\s\\+\\-]/,\n '&': /[\\S]/,\n '0': /[\\d]/,\n '9': /[\\d\\s]/,\n '?': /[a-zA-Z\\s]/,\n 'A': /[a-zA-Z0-9]/,\n 'C': /./,\n 'L': /[a-zA-Z]/,\n 'a': /[a-zA-Z0-9\\s]/\n};\n/**\n * @hidden\n */\nvar returnFalse = function () { return false; };\n/**\n * @hidden\n */\nvar maskingChanged = function (prev, next) {\n return prev.includeLiterals !== next.includeLiterals ||\n prev.mask !== next.mask ||\n prev.prompt !== next.prompt ||\n prev.promptPlaceholder !== next.promptPlaceholder ||\n !sameRules(prev.rules, next.rules);\n};\n/**\n * @hidden\n */\nvar sameRules = function (rules1, rules2) {\n if (!!rules1 !== !!rules2) {\n return false;\n }\n if (rules1 === rules2 || (!rules1 || !rules2)) {\n return true;\n }\n var same = true;\n for (var key in rules1) {\n if (rules1[key] !== rules2[key]) {\n same = false;\n break;\n }\n }\n if (same) {\n for (var key in rules2) {\n if (!rules1.hasOwnProperty(key)) {\n same = false;\n break;\n }\n }\n }\n return same;\n};\nexport { defaultRules, maskingChanged, returnFalse };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { MaskingService } from './masking.service';\nimport { defaultRules, maskingChanged, returnFalse } from './utils';\nimport { guid, classNames, getTabIndex, withPropsContext, createPropsContext } from '@progress/kendo-react-common';\nimport { FloatingLabel } from '@progress/kendo-react-labels';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\n/** @hidden */\nvar MaskedTextBoxWithoutContext = /** @class */ (function (_super) {\n __extends(MaskedTextBoxWithoutContext, _super);\n function MaskedTextBoxWithoutContext(props) {\n var _this = _super.call(this, props) || this;\n /**\n * @hidden\n */\n _this.state = {};\n _this._inputId = \"k-\" + guid();\n _this._service = new MaskingService();\n _this._isPasted = false;\n _this._selection = [null, null];\n _this._input = null;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this._input) {\n _this._input.focus();\n }\n };\n _this.pasteHandler = function (event) {\n var _a = event.target, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd;\n if (selectionEnd === selectionStart) {\n return;\n }\n _this._isPasted = true;\n _this._selection = [selectionStart || 0, selectionEnd || 0];\n };\n _this.onChangeHandler = function (event) {\n var input = event.currentTarget;\n var value = input.value;\n var start = _this._selection[0] || 0;\n var end = _this._selection[1] || 0;\n if (!_this.props.mask) {\n _this._isPasted = false;\n _this._selection = [null, null];\n _this.triggerOnChange(value, event);\n return;\n }\n var maskedValue = _this.value;\n var result;\n if (_this._isPasted) {\n _this._isPasted = false;\n var rightPart = maskedValue.length - end;\n var to = value.length - rightPart;\n result = _this._service.maskInRange(value.slice(start, to), maskedValue, start, end);\n }\n else {\n result = _this._service.maskInput(value, maskedValue, input.selectionStart || 0);\n }\n _this._selection = [result.selection, result.selection];\n _this.triggerOnChange(result.value, event);\n };\n _this.focusHandler = function (event) {\n if (!_this.state.focused) {\n _this.setState({ focused: true });\n if (_this.props.onFocus) {\n _this.props.onFocus.call(undefined, {\n target: _this,\n syntheticEvent: event,\n nativeEvent: event.nativeEvent\n });\n }\n }\n };\n _this.blurHandler = function (event) {\n if (_this.state.focused) {\n _this.setState({ focused: false });\n if (_this.props.onBlur) {\n _this.props.onBlur.call(undefined, {\n target: _this,\n syntheticEvent: event,\n nativeEvent: event.nativeEvent\n });\n }\n }\n };\n _this.setValidity = function () {\n if (_this.element) {\n _this.element.setCustomValidity(_this.validity.valid\n ? ''\n : _this.props.validationMessage || '');\n }\n };\n validatePackage(packageMetadata);\n return _this;\n }\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"element\", {\n /**\n * Gets the element of the MaskedTextBox.\n *\n * @return - An `HTMLInputElement`.\n *\n * @example\n * ```jsx\n * class App extends React.Component {\n * constructor(props) {\n * super(props);\n * }\n * element = null;\n * render() {\n * return (\n * \n * \n * this.element = component ? component.element : null}\n * />\n * \n *
\n * );\n * }\n * }\n *\n * ReactDOM.render(\n * ,\n * document.getElementsByTagName('my-app')[0]\n * );\n * ```\n */\n get: function () {\n return this._input;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"value\", {\n /**\n * Gets the value with the mask of the MaskedTextBox.\n */\n get: function () {\n if (this._valueDuringOnChange !== undefined) {\n return this._valueDuringOnChange;\n }\n else if (this.props.value !== undefined) {\n return this.props.value;\n }\n else if (this.state.value !== undefined) {\n return this.state.value;\n }\n else if (this.props.defaultValue !== undefined) {\n return this.props.defaultValue;\n }\n return '';\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"rawValue\", {\n /**\n * Gets the raw value without the mask of the MaskedTextBox.\n */\n get: function () {\n return this._service.rawValue(this.value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"validity\", {\n /**\n * Represents the validity state into which the MaskedTextBox is set.\n */\n get: function () {\n var maskedValue = this.value;\n var value = this._service.validationValue(maskedValue);\n var customError = this.props.validationMessage !== undefined;\n var valid = (this.props.valid !== undefined ?\n this.props.valid : ((!this.required || !!value)) &&\n (!this.props.maskValidation || !this.props.prompt || maskedValue.indexOf(this.props.prompt) === -1));\n return {\n customError: customError,\n valid: valid,\n valueMissing: !value\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : MaskedTextBoxWithoutContext.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : MaskedTextBoxWithoutContext.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"name\", {\n /**\n * Gets the `name` property of the MaskedTextBox.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n MaskedTextBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {\n if (this.element && this.state.focused && prevState.focused) {\n var _a = this._selection, start = _a[0], end = _a[1];\n var prevSelection = prevProps.selection;\n var nextSelection = this.props.selection;\n if ((!prevSelection && nextSelection) ||\n (prevSelection && nextSelection &&\n (prevSelection.start !== nextSelection.start || prevSelection.end !== nextSelection.end))) {\n start = nextSelection.start;\n end = nextSelection.end;\n }\n if (start !== null && end !== null) {\n this.element.setSelectionRange(start, end);\n }\n }\n if (maskingChanged(prevProps, this.props)) {\n this.updateService();\n }\n this.setValidity();\n };\n /**\n * @hidden\n */\n MaskedTextBoxWithoutContext.prototype.componentDidMount = function () {\n this.updateService();\n this.setValidity();\n };\n /**\n * @hidden\n */\n MaskedTextBoxWithoutContext.prototype.render = function () {\n var _this = this;\n var inputId = this.props.id || this._inputId;\n var isValid = !this.validityStyles || this.validity.valid;\n var style = this.props.style || {};\n var component = (React.createElement(\"span\", { dir: this.props.dir, className: classNames('k-widget k-maskedtextbox', this.props.className, {\n 'k-state-focused': this.state.focused,\n 'k-state-disabled': this.props.disabled,\n 'k-state-invalid': !isValid\n }), style: !this.props.label\n ? __assign({ width: this.props.width }, style) : style },\n 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: 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: returnFalse, onDrop: returnFalse })));\n return this.props.label\n ? (React.createElement(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 }))\n : component;\n };\n MaskedTextBoxWithoutContext.prototype.triggerOnChange = function (maskedValue, event) {\n this.setState({\n value: maskedValue\n });\n if (this.props.onChange) {\n this._valueDuringOnChange = maskedValue;\n this.props.onChange.call(undefined, {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n selectionStart: this._selection[0],\n selectionEnd: this._selection[1],\n target: this,\n value: this.value\n });\n this._valueDuringOnChange = undefined;\n }\n };\n MaskedTextBoxWithoutContext.prototype.updateService = function (extra) {\n var config = Object.assign({\n includeLiterals: this.props.includeLiterals,\n mask: this.props.mask,\n prompt: this.props.prompt,\n promptPlaceholder: this.props.promptPlaceholder,\n rules: this.rules\n }, extra); // tslint:disable-line:align\n this._service.update(config);\n };\n Object.defineProperty(MaskedTextBoxWithoutContext.prototype, \"rules\", {\n get: function () {\n return Object.assign({}, defaultRules, this.props.rules);\n },\n enumerable: true,\n configurable: true\n });\n MaskedTextBoxWithoutContext.displayName = 'MaskedTextBox';\n /**\n * @hidden\n */\n MaskedTextBoxWithoutContext.propTypes = {\n value: PropTypes.string,\n defaultValue: PropTypes.string,\n placeholder: PropTypes.string,\n title: PropTypes.string,\n dir: PropTypes.string,\n id: PropTypes.string,\n style: PropTypes.object,\n className: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n width: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n tabIndex: PropTypes.number,\n accessKey: PropTypes.string,\n disabled: PropTypes.bool,\n readonly: PropTypes.bool,\n prompt: PropTypes.string,\n promptPlaceholder: PropTypes.string,\n includeLiterals: PropTypes.bool,\n maskValidation: PropTypes.bool,\n mask: PropTypes.string,\n rules: function (props, propName, componentName) {\n var rules = props.rules;\n if (rules !== undefined) {\n var valid = Object.entries(rules)\n .some(function (e) { return typeof e !== 'string' || !(rules[e] instanceof RegExp); });\n if (!valid) {\n return new Error('Invalid prop `' + propName + '` supplied to' +\n ' `' + componentName + '`. Validation failed.');\n }\n }\n return null;\n },\n selection: PropTypes.shape({\n start: PropTypes.number.isRequired,\n end: PropTypes.number.isRequired\n }),\n name: PropTypes.string,\n label: PropTypes.string,\n validationMessage: PropTypes.string,\n required: PropTypes.bool,\n valid: PropTypes.bool,\n validityStyles: PropTypes.bool,\n onChange: PropTypes.func\n };\n /**\n * @hidden\n */\n MaskedTextBoxWithoutContext.defaultProps = {\n prompt: '_',\n promptPlaceholder: ' ',\n includeLiterals: false,\n maskValidation: true,\n rules: defaultRules,\n required: false,\n validityStyles: true\n };\n return MaskedTextBoxWithoutContext;\n}(React.Component));\nexport { MaskedTextBoxWithoutContext };\n/**\n * Represents the PropsContext of the `MaskedTextBox` component.\n * Used for global configuration of all `MaskedTextBox` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var MaskedTextBoxPropsContext = createPropsContext();\n/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */\n/**\n * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).\n *\n * Accepts properties of type [MaskedTextBoxProps]({% slug api_inputs_maskedtextboxprops %}).\n * Obtaining the `ref` returns an object of type [MaskedTextBoxHandle]({% slug api_inputs_maskedtextboxhandle %}).\n */\nexport var MaskedTextBox = withPropsContext(MaskedTextBoxPropsContext, MaskedTextBoxWithoutContext);\nMaskedTextBox.displayName = 'KendoReactMaskedTextBox';\n","var clearSlide = function (element) {\n element.style.transitionDuration = '';\n Array.from(element.classList).forEach(function (c) {\n if (c.startsWith('k-slide-')) {\n element.classList.remove(c);\n }\n });\n};\nvar firefox = typeof window !== 'undefined' &&\n /Firefox/.test(window.navigator.userAgent);\n/**\n * @hidden\n */\nexport var slide = function (element, direction, duration, type, callback) {\n if (duration === 0) {\n return callback();\n }\n var slideClass = 'k-slide-' + direction + '-' + type;\n var slideActiveClass = slideClass + '-active';\n var transitionend = function (e) {\n // if event is attached using react,\n // the animation does not work well in firefox,\n // when the show/hide button is toggled quickly.\n if (e.target === element) {\n element.removeEventListener('transitionend', transitionend);\n clearSlide(element);\n callback();\n }\n };\n element.addEventListener('transitionend', transitionend);\n var ownerDocument = element.ownerDocument;\n if (!ownerDocument) {\n return;\n }\n var defaultView = ownerDocument.defaultView;\n if (!defaultView) {\n return;\n }\n var animate = function () {\n clearSlide(element);\n element.classList.add(slideClass);\n defaultView.requestAnimationFrame(function () {\n element.style.transitionDuration = duration + 'ms';\n element.classList.add(slideActiveClass);\n });\n };\n if (firefox) {\n defaultView.requestAnimationFrame(animate);\n }\n else {\n animate();\n }\n};\n","import * as React from 'react';\n/** @hidden */\nexport var ZIndexContext = React.createContext(0);\n/** @hidden */\nexport var useZIndexContext = function () { return React.useContext(ZIndexContext); };\nZIndexContext.displayName = 'KendoReactZIndexContext';\n","/**\n * @hidden\n */\nexport var packageMetadata = {\n name: '@progress/kendo-react-popup',\n productName: 'KendoReact',\n productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],\n publishDate: 1649314148,\n version: '',\n 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'\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport * as PropTypes from 'prop-types';\nimport { slide } from './animation';\nimport { canUseDOM, ZIndexContext, validatePackage, classNames } from '@progress/kendo-react-common';\nimport { AlignPoint, alignElement, domUtils, positionElement, Collision as CollisionEnum } from '@progress/kendo-popup-common';\nimport { throttle, FRAME_DURATION } from './util';\nimport { packageMetadata } from './package-metadata';\nvar DEFAULT_POPUP_ZINDEX = 100;\nvar ZINDEX_POPUP_STEP = 1;\nfunction isEquivalent(a, b) {\n if (a === b) {\n return true;\n }\n if (!!a !== !!b) {\n return false;\n }\n var aProps = Object.getOwnPropertyNames(a);\n var bProps = Object.getOwnPropertyNames(b);\n if (aProps.length !== bProps.length) {\n return false;\n }\n for (var i = 0; i < aProps.length; i++) {\n var propName = aProps[i];\n if (a[propName] !== b[propName]) {\n return false;\n }\n }\n return true;\n}\nvar DEFAULT_OFFSET = {\n left: -1000,\n top: 0\n};\nvar Status;\n(function (Status) {\n Status[\"hiding\"] = \"hiding\";\n Status[\"hidden\"] = \"hidden\";\n Status[\"showing\"] = \"showing\";\n Status[\"shown\"] = \"shown\";\n Status[\"reposition\"] = \"reposition\";\n})(Status || (Status = {}));\nvar ANIMATION_CONTAINER = 'k-animation-container';\nvar ANIMATION_CONTAINER_SHOWN = 'k-animation-container-shown';\nvar ANIMATION_CONTAINER_RELATIVE = 'k-animation-container-relative';\nvar ANIMATION_CONTAINER_CHILD = 'k-child-animation-container';\nvar K_POPUP = 'k-popup';\n/**\n * @hidden\n */\nvar PopupWithoutContext = /** @class */ (function (_super) {\n __extends(PopupWithoutContext, _super);\n function PopupWithoutContext(props) {\n var _this = _super.call(this, props) || this;\n /**\n * @hidden\n */\n _this.state = { current: Status.hidden, previous: Status.hidden, props: {} };\n _this._popup = null;\n _this.show = function (popup) {\n _this.setPosition(popup);\n _this.animate(popup.firstChild, 'enter', _this.onOpened);\n _this.setState({ current: Status.shown, previous: _this.state.current });\n };\n _this.setPosition = function (popup) {\n var _a = _this.props, anchorAlign = _a.anchorAlign, popupAlign = _a.popupAlign, collision = _a.collision, offset = _a.offset, anchor = _a.anchor, margin = _a.margin, scale = _a.scale, positionMode = _a.positionMode;\n var alignedOffset = alignElement({\n anchor: anchor,\n anchorAlign: anchorAlign,\n element: popup,\n elementAlign: popupAlign,\n offset: offset,\n margin: margin,\n positionMode: positionMode,\n scale: scale\n });\n var position = positionElement({\n anchor: anchor,\n anchorAlign: anchorAlign,\n element: popup,\n elementAlign: popupAlign,\n collisions: collision,\n currentLocation: alignedOffset,\n margin: _this.props.margin\n });\n popup.style.top = position.offset.top + 'px';\n popup.style.left = position.offset.left + 'px';\n _this._collisions = {\n fit: position.fit,\n fitted: position.fitted,\n flip: position.flip,\n flipped: position.flipped\n };\n if (_this.props.onPosition) {\n var event_1 = {\n target: _this,\n flipped: position.flipped,\n fitted: position.fitted\n };\n _this.props.onPosition.call(undefined, event_1);\n }\n };\n _this.onOpened = function () {\n var element = _this._popup;\n if (!element) {\n return;\n }\n if (_this.props.show) {\n element.classList.add(ANIMATION_CONTAINER_SHOWN);\n }\n _this.attachRepositionHandlers(element);\n if (_this.props.onOpen) {\n _this.props.onOpen.call(undefined, { target: _this });\n }\n };\n _this.animate = function (element, type, callback) {\n if (!_this.props.popupAlign) {\n return;\n }\n var animationDirection;\n var _a = _this.props.popupAlign, horizontal = _a.horizontal, vertical = _a.vertical;\n if (horizontal === 'left' && vertical === 'center') {\n animationDirection = 'right';\n }\n else if (horizontal === 'right' && vertical === 'center') {\n animationDirection = 'left';\n }\n else if (vertical === 'top') {\n animationDirection = 'down';\n }\n else {\n animationDirection = 'up';\n }\n var flipPositions = {\n down: 'up',\n up: 'down',\n left: 'right',\n right: 'left'\n };\n if (_this._collisions && _this._collisions.flipped) {\n animationDirection = flipPositions[animationDirection];\n }\n slide(element, animationDirection, _this.animationDuration[type], type, callback);\n };\n _this.onClosing = function (popup) {\n if (!_this.props.show) {\n popup.classList.remove(ANIMATION_CONTAINER_SHOWN);\n }\n _this.detachRepositionHandlers();\n };\n _this.onClosed = function () {\n if (_this.state.current === Status.hiding && _this.state.previous === Status.shown) {\n _this.setState({ current: Status.hidden, previous: _this.state.current });\n }\n if (_this.props.onClose) {\n _this.props.onClose.call(undefined, { target: _this });\n }\n };\n _this.getCurrentZIndex = function () {\n return _this.context ? _this.context + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;\n };\n validatePackage(packageMetadata);\n _this.reposition = throttle(_this.reposition.bind(_this), FRAME_DURATION);\n return _this;\n }\n /**\n * @hidden\n */\n PopupWithoutContext.getDerivedStateFromProps = function (props, state) {\n var show = props.show, anchor = props.anchor, anchorAlign = props.anchorAlign, appendTo = props.appendTo, collision = props.collision, popupAlign = props.popupAlign, className = props.className, popupClass = props.popupClass, style = props.style, offset = props.offset, contentKey = props.contentKey;\n var nextState = __assign({}, state, { props: {\n show: show, anchor: anchor, anchorAlign: anchorAlign, appendTo: appendTo, collision: collision, popupAlign: popupAlign, className: className, popupClass: popupClass, style: style, offset: offset, contentKey: contentKey\n } });\n if (props.show) {\n if (state.current === Status.hidden || state.current === Status.hiding) {\n return __assign({}, nextState, { current: Status.showing, previous: state.current });\n }\n if (state.current === Status.showing) {\n return __assign({}, nextState, { current: Status.shown, previous: state.current });\n }\n if (state.current === Status.shown &&\n (!isEquivalent(offset, state.props.offset) ||\n !isEquivalent(anchorAlign, state.props.anchorAlign) ||\n !isEquivalent(appendTo, state.props.appendTo) ||\n !isEquivalent(collision, state.props.collision) ||\n !isEquivalent(popupAlign, state.props.popupAlign) ||\n !isEquivalent(style, state.props.style) ||\n anchor !== state.props.anchor ||\n popupClass !== state.props.popupClass ||\n className !== state.props.className)) {\n return __assign({}, nextState, { current: Status.reposition, previous: state.current });\n }\n return nextState;\n }\n if (state.current === Status.hiding || state.current === Status.hidden) {\n return __assign({}, nextState, { current: Status.hidden, previous: state.current });\n }\n return __assign({}, nextState, { current: Status.hiding, previous: state.current });\n };\n /**\n * @hidden\n */\n PopupWithoutContext.prototype.componentDidUpdate = function (prevProps) {\n if (this.state.current === Status.showing && this._popup) {\n this.show(this._popup);\n }\n else if (this.state.current === Status.hiding && this._popup) {\n this.onClosing(this._popup);\n this.animate(this._popup.firstChild, 'exit', this.onClosed);\n }\n else if (this.state.current === Status.reposition && this.state.previous === Status.shown) {\n this.setState({ current: Status.shown, previous: this.state.current });\n }\n else if (this.state.current === Status.shown &&\n prevProps.contentKey !== this.props.contentKey && this._popup) {\n this.setPosition(this._popup);\n }\n };\n /**\n * @hidden\n */\n PopupWithoutContext.prototype.componentDidMount = function () {\n if (this.state.current === Status.showing && this._popup) {\n this.show(this._popup);\n }\n };\n /**\n * @hidden\n */\n PopupWithoutContext.prototype.componentWillUnmount = function () {\n this.detachRepositionHandlers();\n };\n /**\n * @hidden\n */\n PopupWithoutContext.prototype.render = function () {\n var _this = this;\n var _a = this.props, children = _a.children, className = _a.className, popupClass = _a.popupClass, show = _a.show, id = _a.id, positionMode = _a.positionMode;\n var calculatedAppendTo = this.props.appendTo ?\n this.props.appendTo :\n canUseDOM ?\n (this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body)\n : undefined;\n if (this.state.current === Status.reposition && this.state.previous === Status.shown && this._popup) {\n this.setPosition(this._popup);\n }\n var style = Object.assign({}, { position: positionMode, top: 0, left: -10000 }, this.props.style || {});\n var closing = this.state.current === Status.hiding;\n if ((show || closing) && calculatedAppendTo) {\n var currentZIndex = this.getCurrentZIndex();\n var popupElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },\n React.createElement(\"div\", { className: classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_RELATIVE, className), id: id, ref: function (e) { return _this._popup = e; }, style: __assign({ zIndex: currentZIndex }, style) },\n React.createElement(\"div\", { className: classNames(K_POPUP, popupClass, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children))));\n return this.props.appendTo !== null ?\n ReactDOM.createPortal(popupElement, calculatedAppendTo) :\n popupElement;\n }\n return null;\n };\n Object.defineProperty(PopupWithoutContext.prototype, \"animationDuration\", {\n get: function () {\n var animate = this.props.animate;\n var enter = 0;\n var exit = 0;\n if (animate) {\n if (animate === true) {\n enter = exit = 300;\n }\n else {\n enter = animate.openDuration || 0;\n exit = animate.closeDuration || 0;\n }\n }\n return { enter: enter, exit: exit };\n },\n enumerable: true,\n configurable: true\n });\n PopupWithoutContext.prototype.attachRepositionHandlers = function (element) {\n var _this = this;\n this.detachRepositionHandlers();\n this._scrollableParents = domUtils.scrollableParents(this.props.anchor || element);\n this._scrollableParents.map(function (p) { return p.addEventListener('scroll', _this.reposition); });\n window.addEventListener('resize', this.reposition);\n };\n PopupWithoutContext.prototype.detachRepositionHandlers = function () {\n var _this = this;\n if (this._scrollableParents) {\n this._scrollableParents.map(function (p) { return p.removeEventListener('scroll', _this.reposition); });\n this._scrollableParents = undefined;\n }\n window.removeEventListener('resize', this.reposition);\n };\n PopupWithoutContext.prototype.reposition = function () {\n this.setState({ current: Status.reposition, previous: this.state.current });\n };\n /**\n * @hidden\n */\n PopupWithoutContext.propTypes = {\n anchor: function (props) {\n var anchor = props.anchor;\n if (anchor && typeof anchor.nodeType !== 'number') {\n return new Error('Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.');\n }\n return null;\n },\n appendTo: function (props) {\n var element = props.appendTo;\n if (element && typeof element.nodeType !== 'number') {\n return new Error('Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.');\n }\n return null;\n },\n className: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.object\n ]),\n id: PropTypes.string,\n popupClass: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.object\n ]),\n collision: PropTypes.shape({\n horizontal: PropTypes.oneOf([\n CollisionEnum.fit,\n CollisionEnum.flip,\n CollisionEnum.none\n ]),\n vertical: PropTypes.oneOf([\n CollisionEnum.fit,\n CollisionEnum.flip,\n CollisionEnum.none\n ])\n }),\n anchorAlign: PropTypes.shape({\n horizontal: PropTypes.oneOf([\n AlignPoint.left,\n AlignPoint.center,\n AlignPoint.right\n ]),\n vertical: PropTypes.oneOf([\n AlignPoint.top,\n AlignPoint.center,\n AlignPoint.bottom\n ])\n }),\n popupAlign: PropTypes.shape({\n horizontal: PropTypes.oneOf([\n AlignPoint.left,\n AlignPoint.center,\n AlignPoint.right\n ]),\n vertical: PropTypes.oneOf([\n AlignPoint.top,\n AlignPoint.center,\n AlignPoint.bottom\n ])\n }),\n offset: PropTypes.shape({\n left: PropTypes.number,\n top: PropTypes.number\n }),\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.node\n ]),\n show: PropTypes.bool,\n animate: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.shape({\n openDuration: PropTypes.number,\n closeDuration: PropTypes.number\n })\n ]),\n margin: PropTypes.shape({\n horizontal: PropTypes.number,\n vertical: PropTypes.number\n }),\n positionMode: PropTypes.oneOf([\n 'fixed',\n 'absolute'\n ]),\n scale: PropTypes.number,\n style: PropTypes.object,\n onClose: PropTypes.func,\n onPosition: PropTypes.func,\n onOpen: PropTypes.func\n };\n /**\n * @hidden\n */\n PopupWithoutContext.defaultProps = {\n collision: {\n horizontal: CollisionEnum.fit,\n vertical: CollisionEnum.flip\n },\n anchorAlign: {\n horizontal: AlignPoint.left,\n vertical: AlignPoint.bottom\n },\n popupAlign: {\n horizontal: AlignPoint.left,\n vertical: AlignPoint.top\n },\n offset: DEFAULT_OFFSET,\n animate: true,\n show: false,\n margin: {\n horizontal: 0,\n vertical: 0\n },\n positionMode: 'absolute'\n };\n /**\n * @hidden\n */\n PopupWithoutContext.contextType = ZIndexContext;\n /**\n * @hidden\n */\n PopupWithoutContext.displayName = 'PopupComponent';\n return PopupWithoutContext;\n}(React.Component));\nexport { PopupWithoutContext };\n","/**\n * @hidden\n */\nexport var isDifferentOffset = function (oldOffset, newOffset) {\n var oldLeft = oldOffset.left, oldTop = oldOffset.top;\n var newLeft = newOffset.left, newTop = newOffset.top;\n return Math.abs(oldLeft - newLeft) >= 1 || Math.abs(oldTop - newTop) >= 1;\n};\n/**\n * @hidden\n */\nexport var hasBoundingRect = function (elem) { return !!elem.getBoundingClientRect; };\n/**\n * @hidden\n */\nexport var FRAME_DURATION = 1000 / 60; // 1000ms divided by 60fps\n/**\n * @hidden\n */\nexport var throttle = function (func, wait, options) {\n if (options === void 0) { options = {}; }\n var timeout, context, args, result;\n var previous = 0;\n options = options || {};\n var later = function () {\n previous = options.leading === false ? 0 : new Date().getTime();\n timeout = null;\n result = func.apply(context, args);\n if (!timeout) {\n context = args = null;\n }\n };\n var throttled = function () {\n var now = new Date().getTime();\n if (!previous && options.leading === false) {\n previous = now;\n }\n var remaining = wait - (now - previous);\n context = this;\n args = arguments;\n if (remaining <= 0 || remaining > wait) {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n previous = now;\n result = func.apply(context, args);\n if (!timeout) {\n context = args = null;\n }\n }\n else if (!timeout && options.trailing !== false) {\n timeout = window.setTimeout(later, remaining);\n }\n return result;\n };\n return throttled;\n};\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport { PopupWithoutContext } from './PopupWithoutContext';\n/**\n * The PopupPropsContext. It allows to configure the Popup props from a wrapper component.\n *\n * @example\n * ```jsx-no-run\n * ({ ...props, appendTo: document.querySelector('myPopupsContainer') })}>\n * \n * \n * \n * ```\n */\nexport var PopupPropsContext = React.createContext(function (props) { return props; });\n/**\n * The KendoReact Popup component.\n */\nexport var Popup = React.forwardRef(function (props, ref) {\n var contextPropsCallback = React.useContext(PopupPropsContext);\n var popupProps = contextPropsCallback.call(undefined, props);\n return (React.createElement(PopupWithoutContext, __assign({ ref: ref }, popupProps)));\n});\nPopup.displayName = 'Popup';\n","/**\n * @hidden\n */\nexport var classNames = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var result = {};\n var addLeafKeys = function (arg) { return typeof arg === 'object' ? Object\n .keys(arg)\n .forEach(function (key) {\n result[key] = arg[key];\n }) : result[arg] = true; };\n ;\n var addKeys = function (list) { return list\n .filter(function (arg) { return arg !== true && !!arg; })\n .map(function (arg) {\n return Array.isArray(arg) ?\n addKeys(arg) :\n addLeafKeys(arg);\n }); };\n ;\n addKeys(args);\n return Object\n .keys(result)\n .map(function (key) { return (result[key] && key) || null; })\n .filter(function (el) { return el !== null; })\n .join(' ');\n};\n","/**\n * @hidden\n */\nexport var packageMetadata = {\n name: '@progress/kendo-react-buttons',\n productName: 'KendoReact',\n productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],\n publishDate: 1642516028,\n version: '',\n 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'\n};\n","/**\n * @hidden\n */\nvar styles = {\n button: 'k-button',\n 'flat': 'k-flat',\n 'outline': 'k-outline',\n 'clear': 'k-button-clear',\n 'primary': 'k-primary',\n 'state-selected': 'k-state-selected',\n 'button-icon': 'k-button-icon',\n 'button-icontext': 'k-button-icontext',\n 'state-disabled': 'k-state-disabled',\n 'group-start': 'k-group-start',\n 'group-end': 'k-group-end',\n 'button-group': 'k-button-group',\n 'button-group-stretched': 'k-button-group-stretched',\n 'ltr': 'k-ltr',\n 'rtl': 'k-rtl'\n};\nvar notDisabled = ':not(.k-state-disabled):not([disabled]):not([disabled=\"true\"])';\n/**\n * @hidden\n */\nexport var toolbarButtons = [\n 'button' + notDisabled,\n '.k-button-group > button' + notDisabled,\n '.k-dropdown > .k-dropdown-wrap' + notDisabled,\n '.k-colorpicker > .k-picker-wrap' + notDisabled\n];\n/**\n * @hidden\n */\nexport default {\n styles: styles\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\n t[p[i]] = s[p[i]];\n return t;\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { classNames } from '@progress/kendo-react-common';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from './package-metadata';\nimport util from './util';\nvar styles = util.styles;\n/**\n * @hidden\n */\nfunction iconElement(_a) {\n var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;\n if (imageUrl) {\n return (React.createElement(\"img\", { role: \"presentation\", className: 'k-image', alt: imageAlt, src: imageUrl }));\n }\n else if (icon) {\n var iconClasses = classNames('k-icon', 'k-i-' + icon);\n return (React.createElement(\"span\", { role: \"presentation\", className: iconClasses }));\n }\n else if (iconClass) {\n return (React.createElement(\"span\", { role: \"presentation\", className: iconClass }));\n }\n return null;\n}\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n function Button(props) {\n var _this = _super.call(this, props) || this;\n _this._element = null;\n _this.handleClick = function (event) {\n _this.toggleIfApplicable();\n if (_this.props.onClick) {\n _this.props.onClick.call(undefined, event);\n }\n };\n validatePackage(packageMetadata);\n _this.state = { selected: _this.props.togglable === true && _this.props.selected === true };\n return _this;\n }\n Object.defineProperty(Button.prototype, \"element\", {\n /**\n * Gets the DOM element of the Button component.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Button.prototype, \"selected\", {\n /**\n * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).\n * Otherwise, returns `false`.\n */\n get: function () {\n return this._selectedTemp !== undefined ? this._selectedTemp : this.state.selected;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n Button.getDerivedStateFromProps = function (props, state) {\n if (props.togglable && props.selected !== undefined && props.selected !== state.selected) {\n return { selected: props.selected };\n }\n return null;\n };\n /**\n * @hidden\n */\n Button.prototype.render = function () {\n var _this = this;\n var _a;\n var _b = this.props, children = _b.children, look = _b.look, primary = _b.primary, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, htmlAttributes = __rest(_b, [\"children\", \"look\", \"primary\", \"togglable\", \"icon\", \"iconClass\", \"imageUrl\", \"imageAlt\", \"className\", \"onClick\"]);\n var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);\n var hasChildren = children !== undefined;\n var buttonClasses = classNames([styles.button], (_a = {},\n _a[styles[\"\" + look]] = look !== 'default',\n _a[styles.primary] = primary,\n _a[styles['state-disabled']] = this.props.disabled,\n _a[styles['state-selected']] = this.state.selected,\n _a[styles['button-icon']] = !hasChildren && hasIcon,\n _a[styles['button-icontext']] = hasChildren && hasIcon,\n _a), [styles[\"\" + this.props.dir]], className);\n var buttonProps = {\n className: buttonClasses,\n onClick: this.handleClick,\n // Accessibility properties\n role: togglable ? 'checkbox' : undefined,\n 'aria-disabled': this.props.disabled || undefined,\n 'aria-checked': togglable ? this.state.selected : undefined\n };\n var iconEl = iconElement({\n icon: icon,\n iconClass: iconClass,\n imageUrl: imageUrl,\n imageAlt: imageAlt\n });\n return (React.createElement(\"button\", __assign({}, buttonProps, htmlAttributes, { ref: function (button) { return _this._element = button; } }),\n iconEl,\n children));\n };\n Button.prototype.toggleIfApplicable = function () {\n var _this = this;\n if (this.props.togglable && this.props.selected === undefined) {\n var selected = !this.state.selected;\n this._selectedTemp = selected;\n this.setState({ selected: selected }, function () { return _this._selectedTemp = undefined; });\n }\n };\n /**\n * @hidden\n */\n Button.propTypes = {\n children: PropTypes.node,\n look: PropTypes.oneOf(['default', 'flat', 'outline', 'clear']),\n primary: PropTypes.bool,\n selected: PropTypes.bool,\n togglable: PropTypes.bool,\n icon: PropTypes.string,\n iconClass: PropTypes.string,\n imageUrl: PropTypes.string,\n imageAlt: PropTypes.string\n };\n /**\n * @hidden\n */\n Button.defaultProps = {\n look: 'default',\n primary: false,\n togglable: false\n };\n return Button;\n}(React.Component));\nexport default Button;\n","import * as licensing from '@progress/kendo-licensing';\n/**\n * @hidden\n */\nexport function validatePackage(packageMetadata) {\n if (typeof licensing !== 'undefined') {\n licensing.validatePackage(packageMetadata);\n }\n else {\n var message = \"License activation failed for \" + packageMetadata.name + \"\\n\";\n message += 'The @progress/kendo-licensing script is not loaded.\\n';\n message += \"See \" + packageMetadata.licensingDocsUrl + \" for more information.\\n\";\n console.warn(message);\n }\n}\n","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation. Also,\n // find the complete implementation of crypto (msCrypto) on IE11.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}","export default /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nvar byteToHex = [];\n\nfor (var i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).substr(1));\n}\n\nfunction stringify(arr) {\n var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\nexport default stringify;","import REGEX from './regex.js';\n\nfunction validate(uuid) {\n return typeof uuid === 'string' && REGEX.test(uuid);\n}\n\nexport default validate;","import rng from './rng.js';\nimport stringify from './stringify.js';\n\nfunction v4(options, buf, offset) {\n options = options || {};\n var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (var i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return stringify(rnds);\n}\n\nexport default v4;","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\n t[p[i]] = s[p[i]];\n return t;\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { guid, classNames, dispatchEvent, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\n/**\n * Represents the PropsContext of the `RadioButton` component.\n * Used for global configuration of all `RadioButton` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var RadioButtonPropsContext = createPropsContext();\n/**\n * Represents the [KendoReact RadioButton component]({% slug overview_radiobutton %}).\n *\n * Accepts properties of type [RadioButtonProps]({% slug api_inputs_radiobuttonprops %}).\n * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).\n */\nexport var RadioButton = React.forwardRef(function (directProps, target) {\n validatePackage(packageMetadata);\n var props = usePropsContext(RadioButtonPropsContext, directProps);\n var ariaDescribedBy = props.ariaDescribedBy, checked = props.checked, children = props.children, className = props.className, disabled = props.disabled, id = props.id, label = props.label, labelPlacement = props.labelPlacement, name = props.name, style = props.style, tabIndex = props.tabIndex, value = props.value, valid = props.valid, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, others = __rest(props, [\"ariaDescribedBy\", \"checked\", \"children\", \"className\", \"disabled\", \"id\", \"label\", \"labelPlacement\", \"name\", \"style\", \"tabIndex\", \"value\", \"valid\", \"onChange\", \"onFocus\", \"onBlur\"]);\n var elementRef = React.useRef(null);\n var focusElement = React.useCallback(function () {\n if (elementRef.current) {\n elementRef.current.focus();\n }\n }, []);\n var getImperativeHandle = React.useCallback(function () { return ({\n element: elementRef.current,\n focus: focusElement\n }); }, [focusElement]);\n React.useImperativeHandle(target, getImperativeHandle);\n var calculatedId = React.useMemo(function () { return guid(); }, []);\n var handleChange = React.useCallback(function (event) {\n dispatchEvent(onChange, event, getImperativeHandle(), { value: value });\n }, [onChange, value, disabled]);\n var handleFocus = React.useCallback(function (event) {\n if (onFocus && !disabled) {\n dispatchEvent(onFocus, event, getImperativeHandle(), undefined);\n }\n }, [onFocus, disabled]);\n var handleBlur = React.useCallback(function (event) {\n if (onBlur && !disabled) {\n dispatchEvent(onBlur, event, getImperativeHandle(), undefined);\n }\n }, [onBlur, disabled]);\n var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: classNames({\n 'k-radio': true,\n 'k-state-invalid': valid === false,\n 'k-invalid': valid === false\n }, className), ref: elementRef, disabled: disabled, tabIndex: getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);\n var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement(\"label\", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, \"aria-label\": label }, label)) : null));\n var radio = React.createElement(\"input\", __assign({}, inputProps));\n return (labelPlacement === 'before'\n ? (React.createElement(React.Fragment, null,\n radioButtonLabel,\n radio,\n children)) : (React.createElement(React.Fragment, null,\n radio,\n radioButtonLabel,\n children)));\n});\nRadioButton.propTypes = {\n ariaDescribedBy: PropTypes.string,\n checked: PropTypes.bool,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n id: PropTypes.string,\n label: PropTypes.string,\n labelPlacement: PropTypes.string,\n name: PropTypes.string,\n style: PropTypes.object,\n tabIndex: PropTypes.number,\n value: PropTypes.any,\n valid: PropTypes.bool,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func\n};\nRadioButton.displayName = 'KendoRadioButton';\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { RadioButton } from './RadioButton';\nimport { useRtl, guid, classNames, focusFirstFocusableChild, dispatchEvent, createPropsContext, usePropsContext } from '@progress/kendo-react-common';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\n/**\n * Represents the PropsContext of the `RadioGroup` component.\n * Used for global configuration of all `RadioGroup` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var RadioGroupPropsContext = createPropsContext();\n/**\n * Represents the [KendoReact RadioGroup component]({% slug overview_radiogroup %}).\n *\n * Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).\n * Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).\n */\nexport var RadioGroup = React.forwardRef(function (directProps, target) {\n validatePackage(packageMetadata);\n var props = usePropsContext(RadioGroupPropsContext, directProps);\n var ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, className = props.className, data = props.data, defaultValue = props.defaultValue, disabled = props.disabled, name = props.name, labelPlacement = props.labelPlacement, layout = props.layout, style = props.style, value = props.value, valid = props.valid, _a = props.item, Item = _a === void 0 ? defaultProps.item : _a, onChange = props.onChange, onFocus = props.onFocus;\n var elementRef = React.useRef(null);\n var focusElement = React.useCallback(function () {\n if (elementRef.current) {\n focusFirstFocusableChild(elementRef.current);\n }\n }, []);\n var getImperativeHandle = React.useCallback(function () { return ({\n element: elementRef.current,\n focus: focusElement\n }); }, [focusElement]);\n React.useImperativeHandle(target, getImperativeHandle);\n var _b = React.useState(defaultValue), stateChecked = _b[0], setStateChecked = _b[1];\n var isControlled = value !== undefined;\n var checkedRadioValue = isControlled ? value : stateChecked;\n var handleChange = React.useCallback(function (event) {\n var currentValue = event.value;\n if (!isControlled && !disabled) {\n setStateChecked(currentValue);\n }\n if (onChange && !disabled) {\n dispatchEvent(onChange, event.syntheticEvent, getImperativeHandle(), { value: currentValue });\n }\n }, [setStateChecked, onChange, disabled]);\n var handleFocus = React.useCallback(function (event) {\n if (onFocus && !disabled) {\n dispatchEvent(onFocus, event.syntheticEvent, getImperativeHandle(), undefined);\n }\n }, [onFocus, disabled]);\n var radioGroupName = React.useMemo(function () { return guid(); }, []);\n var radioGroupClasses = classNames('k-radio-list', {\n 'k-list-horizontal': layout === 'horizontal',\n 'k-list-vertical': layout === 'vertical' || layout === undefined\n }, className);\n var dir = useRtl(elementRef, props.dir);\n var radioOptions = (data && data.map(function (option, index) {\n var isCurrentlyChecked = checkedRadioValue === option.value;\n var noOptionChecked = checkedRadioValue === null || checkedRadioValue === undefined;\n var radioButtonProps = __assign({}, option, { valid: valid, checked: isCurrentlyChecked, disabled: (option.disabled || disabled) ? true : false, labelPlacement: option.labelPlacement ? option.labelPlacement : labelPlacement, tabIndex: option.tabIndex\n ? option.tabIndex\n : (noOptionChecked && index === 0) || isCurrentlyChecked\n ? 0\n : -1, index: index, name: name || radioGroupName, onChange: handleChange, onFocus: handleFocus });\n return (React.createElement(Item, { className: classNames('k-radio-item', { 'k-state-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },\n React.createElement(RadioButton, __assign({}, radioButtonProps))));\n }));\n return (React.createElement(\"ul\", { role: \"radiogroup\", className: radioGroupClasses, ref: elementRef, dir: dir, style: style, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy }, radioOptions));\n});\nvar defaultProps = {\n item: function (props) { return React.createElement(\"li\", __assign({}, props)); }\n};\nRadioGroup.propTypes = {\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n className: PropTypes.string,\n data: PropTypes.arrayOf(PropTypes.object),\n defaultValue: PropTypes.any,\n dir: PropTypes.string,\n disabled: PropTypes.bool,\n labelPlacement: PropTypes.string,\n layout: PropTypes.string,\n name: PropTypes.string,\n style: PropTypes.object,\n value: PropTypes.any,\n onChange: PropTypes.func,\n onFocus: PropTypes.func\n};\nRadioGroup.defaultProps = defaultProps;\nRadioGroup.displayName = 'KendoRadioGroup';\n","/**\n * @hidden\n */\nexport var focusFirstFocusableChild = function (target) {\n if (target) {\n if ((target instanceof HTMLInputElement || target.tabIndex !== -1) && target.focus) {\n target.focus();\n return;\n }\n var element = target.querySelector('input, [tabindex]:not([tabindex=\"-1\"])');\n if (element && element.focus) {\n element.focus();\n }\n }\n};\n","import * as React from 'react';\n// Same as 'useDir'. Export to avoid breaking change.\n// 'useRtl' is incorrect naming, since applies that the returned value is `true` or `false`.\n// but instead, it is returning `ltr` or `rtl`.\n/**\n * @hidden\n */\nexport function useRtl(elementRef, initialDir, args) {\n // Dir prop is read only on initial rendering due to specifics of getComputedStyles - see below\n var _a = React.useState(initialDir), dir = _a[0], setDir = _a[1];\n React.useEffect(function () {\n if (!dir && window && elementRef.current) {\n // Note: getComputedStyle forces reflow\n var rtlCandidate = window.getComputedStyle(elementRef.current).direction;\n if (rtlCandidate) {\n // rerender is needed as DOM is read after first render\n setDir(rtlCandidate);\n }\n }\n }, args);\n return dir;\n}\n","/* eslint-disable radix */\n/**\n * @hidden\n */\nvar DISABLED_TABINDEX = -1;\n/**\n * @hidden\n */\nvar DEFAULT_TABINDEX = 0;\n/**\n * @hidden\n */\nexport var getTabIndex = function (tabIndex, disabled, useDefaultTabIndexWhenDisabled) {\n var parsedTabIndex = typeof tabIndex === 'string' ? parseInt(tabIndex, undefined) : tabIndex;\n if (parsedTabIndex === NaN) {\n return undefined;\n }\n return parsedTabIndex !== undefined\n ? parsedTabIndex\n : disabled ?\n (useDefaultTabIndexWhenDisabled ? undefined : DISABLED_TABINDEX)\n : DEFAULT_TABINDEX;\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\n/**\n * @hidden\n */\nvar ListFilter = /** @class */ (function (_super) {\n __extends(ListFilter, _super);\n function ListFilter() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ListFilter.prototype.render = function () {\n var _this = this;\n return (React.createElement(\"span\", { className: \"k-list-filter\" },\n React.createElement(\"input\", { ref: function (input) { return _this.input = input; }, value: this.props.value || '', className: \"k-textbox\", onChange: this.props.onChange, onKeyDown: this.props.onKeyDown }),\n React.createElement(\"span\", { className: \"k-icon k-i-search\" })));\n };\n return ListFilter;\n}(React.Component));\nexport default ListFilter;\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { classNames } from '@progress/kendo-react-common';\nimport { getItemValue } from './utils';\nvar preventDefault = function (e) { return e.preventDefault(); };\n/**\n * @hidden\n */\nvar ListDefaultItem = /** @class */ (function (_super) {\n __extends(ListDefaultItem, _super);\n function ListDefaultItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ListDefaultItem.prototype.render = function () {\n var _a = this.props, selected = _a.selected, defaultItem = _a.defaultItem, textField = _a.textField;\n return (React.createElement(\"div\", { onClick: this.props.onClick, onMouseDown: preventDefault, className: classNames('k-list-optionlabel', {\n 'k-state-selected': selected\n }) }, getItemValue(defaultItem, textField) || ''));\n };\n return ListDefaultItem;\n}(React.Component));\nexport default ListDefaultItem;\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { classNames, Keys, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';\nimport { FloatingLabel } from '@progress/kendo-react-labels';\nimport ListContainer from '../common/ListContainer';\nimport ListFilter from '../common/ListFilter';\nimport ListDefaultItem from '../common/ListDefaultItem';\nimport List from '../common/List';\nimport DropDownBase from '../common/DropDownBase';\nimport { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nvar VALIDATION_MESSAGE = 'Please select a value from the list!';\n/**\n * @hidden\n */\nvar DropDownListWithoutContext = /** @class */ (function (_super) {\n __extends(DropDownListWithoutContext, _super);\n function DropDownListWithoutContext(props) {\n var _this = _super.call(this, props) || this;\n /**\n * @hidden\n */\n _this.state = {};\n _this.base = new DropDownBase(_this);\n _this.searchState = { word: '', last: '' };\n _this._skipFocusEvent = false;\n _this._filterInput = null;\n _this._navigated = false;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this.base.wrapper) {\n _this.base.wrapper.focus();\n }\n };\n /**\n * @hidden\n */\n _this.handleItemSelect = function (index, state) {\n var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, virtual = _a.virtual, dataItemKey = _a.dataItemKey, defaultItem = _a.defaultItem;\n var skip = virtual ? virtual.skip : 0;\n var item = (index === -1 && defaultItem !== undefined) ?\n defaultItem : data[index - skip];\n var newSelected = !areSame(item, _this.value, dataItemKey);\n _this.triggerOnChange(item, state);\n if (newSelected) {\n _this.base.triggerPageChangeCornerItems(item, state);\n }\n };\n _this.renderDropDownWrapper = function () {\n var _a = _this.props, dataItemKey = _a.dataItemKey, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, disabled = _a.disabled, tabIndex = _a.tabIndex, loading = _a.loading, iconClassName = _a.iconClassName, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, valueRender = _a.valueRender;\n var focused = _this.state.focused;\n var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;\n var value = _this.value;\n var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });\n var text = getItemValue(value, textField);\n var valueDefaultRendering = (React.createElement(\"span\", { className: \"k-input\" }, text));\n var valueElement = valueRender !== undefined ?\n valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;\n return (React.createElement(\"span\", { ref: function (el) { return _this.base.wrapper = el; }, role: 'listbox', tabIndex: getTabIndex(tabIndex, disabled), accessKey: _this.props.accessKey, className: classNames('k-dropdown-wrap', {\n 'k-state-focused': focused,\n 'k-state-disabled': disabled\n }), onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, onClick: disabled ? undefined : _this.handleWrapperClick, \"aria-disabled\": disabled || undefined, \"aria-haspopup\": true, \"aria-expanded\": opened || false, \"aria-owns\": _this.base.listBoxId, \"aria-activedescendant\": opened ? ('option-' + _this.base.guid + '-' + (selectedIndex + virtual.skip)) : undefined, \"aria-label\": _this.props.label, \"aria-labelledby\": _this.props.ariaLabelledBy, \"aria-describedby\": _this.props.ariaDescribedBy, id: _this.props.id, title: _this.props.title },\n valueElement,\n React.createElement(\"span\", { className: \"k-select\" },\n React.createElement(\"span\", { className: classNames('k-icon', iconClassName, {\n 'k-i-arrow-s': !loading && !iconClassName,\n 'k-i-loading': loading && !iconClassName\n }) })),\n _this.dummySelect(value)));\n };\n _this.dummySelect = function (value) {\n /* Dummy component to support forms */\n return (React.createElement(\"select\", { name: _this.props.name, ref: function (el) { _this._select = el; }, tabIndex: -1, \"aria-hidden\": true, title: _this.props.label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },\n React.createElement(\"option\", { value: _this.props.valueMap ? _this.props.valueMap.call(undefined, value) : value })));\n };\n _this.renderListContainer = function () {\n var _a = _this.props, header = _a.header, footer = _a.footer, dir = _a.dir, _b = _a.data, data = _b === void 0 ? [] : _b;\n var base = _this.base;\n var popupSettings = base.getPopupSettings();\n var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;\n var virtual = _this.props.virtual !== undefined;\n var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;\n var listContainerProps = {\n dir: dir !== undefined ? dir : base.dirCalculated,\n width: popupWidth,\n popupSettings: {\n popupClass: popupSettings.popupClass,\n className: classNames('k-list-container k-reset', popupSettings.className),\n animate: popupSettings.animate,\n anchor: _this.element,\n show: opened,\n onOpen: _this.onPopupOpened,\n onClose: _this.onPopupClosed,\n appendTo: popupSettings.appendTo\n },\n itemsCount: [data.length]\n };\n return (React.createElement(ListContainer, __assign({}, listContainerProps),\n _this.renderListFilter(),\n virtual && _this.renderDefaultItem(),\n virtual && header,\n _this.base.renderScrollWrapper(React.createElement(React.Fragment, null,\n !virtual && _this.renderDefaultItem(),\n !virtual && header,\n _this.renderList(),\n !virtual && footer,\n _this.base.renderScrollElement())),\n virtual && footer));\n };\n _this.renderList = function () {\n var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;\n var vs = _this.base.vs;\n var skip = virtual.skip;\n var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;\n var popupSettings = _this.base.getPopupSettings();\n var translate = \"translateY(\" + vs.translate + \"px)\";\n return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: !vs.enabled ?\n { maxHeight: popupSettings.height } : { float: 'left', width: '100%' }, wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined, listStyle: vs.enabled ?\n { transform: translate } : undefined, key: \"listkey\", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender }));\n };\n _this.renderListFilter = function () {\n var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;\n return _this.props.filterable && (React.createElement(ListFilter, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.input; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown }));\n };\n _this.renderDefaultItem = function () {\n var _a = _this.props, textField = _a.textField, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey;\n return defaultItem !== undefined && (React.createElement(ListDefaultItem, { defaultItem: defaultItem, textField: textField, selected: areSame(_this.value, defaultItem, dataItemKey), key: \"defaultitemkey\", onClick: _this.handleDefaultItemClick }));\n };\n _this.search = function (event) {\n clearTimeout(_this._typingTimeout);\n if (!_this.props.filterable) {\n _this._typingTimeout = window.setTimeout(function () { return _this.searchState.word = ''; }, _this.props.delay);\n _this.selectNext(event);\n }\n };\n _this.selectNext = function (event) {\n var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey;\n var mappedData = data.map(function (item, idx) {\n return { item: item, itemIndex: idx };\n });\n var word = _this.searchState.word;\n var last = _this.searchState.last;\n var isInLoop = sameCharsOnly(word, last);\n var dataLength = mappedData.length;\n var startIndex = Math.max(0, data.findIndex(function (i) { return areSame(i, _this.value, dataItemKey); }));\n var defaultItem;\n if (_this.props.defaultItem) {\n defaultItem = { item: _this.props.defaultItem, itemIndex: -1 };\n dataLength += 1;\n startIndex += 1;\n }\n startIndex += isInLoop ? 1 : 0;\n mappedData = shuffleData(mappedData, startIndex, defaultItem);\n var text, loopMatch, nextMatch, index = 0;\n var _c = _this.props, textField = _c.textField, ignoreCase = _c.ignoreCase;\n for (; index < dataLength; index++) {\n text = getItemValue(mappedData[index].item, textField);\n loopMatch = isInLoop && matchText(text, last, ignoreCase);\n nextMatch = matchText(text, word, ignoreCase);\n if (loopMatch || nextMatch) {\n index = mappedData[index].itemIndex;\n break;\n }\n }\n if (index !== dataLength) {\n var state = _this.base.initState();\n state.syntheticEvent = event;\n _this.handleItemSelect(index, state);\n _this.applyState(state);\n _this._valueDuringOnChange = undefined;\n }\n };\n _this.handleKeyDown = function (event) {\n var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, filterable = _a.filterable, disabled = _a.disabled, _c = _a.leftRightKeysNavigation, leftRightKeysNavigation = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _d;\n var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;\n var keyCode = event.keyCode;\n var homeOrEndKeys = keyCode === Keys.home || keyCode === Keys.end;\n var upOrDownKeys = keyCode === Keys.up || keyCode === Keys.down;\n var shouldOpen = !opened &&\n ((event.altKey && keyCode === Keys.down) || keyCode === Keys.enter || keyCode === Keys.space);\n var shouldClose = opened && ((event.altKey && keyCode === Keys.up) || keyCode === Keys.esc);\n var leftOrRightKeys = leftRightKeysNavigation && (keyCode === Keys.left || keyCode === Keys.right);\n var shouldNavigate = upOrDownKeys || (!filterable && (leftOrRightKeys || homeOrEndKeys));\n var state = _this.base.initState();\n state.syntheticEvent = event;\n if (disabled) {\n return;\n }\n else if (homeOrEndKeys && _this.base.vs.enabled) {\n if (keyCode === Keys.home) {\n if (virtual.skip !== 0) {\n _this.base.triggerOnPageChange(state, 0, virtual.pageSize);\n _this._navigated = true;\n }\n else {\n _this.triggerOnChange(data[0], state);\n }\n }\n else {\n if (virtual.skip < virtual.total - virtual.pageSize) {\n _this.base.triggerOnPageChange(state, virtual.total - virtual.pageSize, virtual.pageSize);\n _this._navigated = true;\n }\n else {\n _this.triggerOnChange(data[data.length - 1], state);\n }\n }\n }\n else if (opened && keyCode === Keys.enter) {\n var focusedIndex = _this.focusedIndex();\n if (focusedIndex !== undefined) {\n _this.handleItemSelect(focusedIndex, state);\n }\n _this.base.togglePopup(state);\n event.preventDefault();\n }\n else if (shouldOpen || shouldClose) {\n _this.base.togglePopup(state);\n event.preventDefault();\n }\n else if (shouldNavigate) {\n _this.onNavigate(state, keyCode);\n event.preventDefault();\n }\n _this.applyState(state);\n };\n _this.handleItemClick = function (index, event) {\n _this.base.handleItemClick(index, event);\n _this._valueDuringOnChange = undefined;\n };\n _this.handleFocus = function (event) {\n if (_this._skipFocusEvent) {\n return;\n }\n _this.base.handleFocus(event);\n };\n _this.handleBlur = function (event) {\n if (_this._skipFocusEvent || !_this.state.focused) {\n return;\n }\n var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;\n var state = _this.base.initState();\n state.syntheticEvent = event;\n state.data.focused = false;\n state.events.push({ type: 'onBlur' });\n if (opened) {\n _this.base.togglePopup(state);\n }\n _this.applyState(state);\n };\n _this.handleDefaultItemClick = function (event) {\n var state = _this.base.initState();\n state.syntheticEvent = event;\n _this.base.togglePopup(state);\n _this.triggerOnChange(_this.props.defaultItem, state);\n _this.applyState(state);\n };\n _this.handleWrapperClick = function (event) {\n var state = _this.base.initState();\n state.syntheticEvent = event;\n if (!_this.state.focused) {\n state.data.focused = true;\n }\n _this.base.togglePopup(state);\n _this.applyState(state);\n };\n _this.handleKeyPress = function (event) {\n if (_this.props.filterable || event.which === 0 || event.keyCode === Keys.enter) {\n return;\n }\n var character = String.fromCharCode(event.charCode || event.keyCode);\n if (_this.props.ignoreCase) {\n character = character.toLowerCase();\n }\n if (character === ' ') {\n event.preventDefault();\n }\n _this.searchState = {\n word: _this.searchState.word + character,\n last: _this.searchState.last + character\n };\n _this.search(event);\n };\n _this.handleListFilterChange = function (event) {\n var state = _this.base.initState();\n state.syntheticEvent = event;\n if (_this.props.filter === undefined) {\n state.data.text = event.target.value;\n }\n _this.base.filterChanged(event.target.value, state);\n _this.applyState(state);\n };\n _this.onPopupOpened = function () {\n if (_this._filterInput) {\n _this.focusElement(_this._filterInput);\n }\n };\n _this.onPopupClosed = function () {\n if (_this.state.focused) {\n window.setTimeout(function () {\n if (_this.state.focused && _this.base.wrapper) {\n _this.focusElement(_this.base.wrapper);\n }\n });\n }\n };\n _this.setValidity = function () {\n if (_this._select && _this._select.setCustomValidity) {\n _this._select.setCustomValidity(_this.validity.valid\n ? ''\n : _this.props.validationMessage || VALIDATION_MESSAGE);\n }\n };\n validatePackage(packageMetadata);\n return _this;\n }\n Object.defineProperty(DropDownListWithoutContext.prototype, \"element\", {\n /**\n * @hidden\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"actionElement\", {\n /**\n * @hidden\n */\n get: function () {\n return this.base.wrapper;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"value\", {\n /**\n * The value of the DropDownList.\n */\n get: function () {\n var value;\n if (this._valueDuringOnChange !== undefined) {\n value = this._valueDuringOnChange;\n }\n else if (this.props.value !== undefined) {\n value = this.props.value;\n }\n else if (this.state.value !== undefined) {\n value = this.state.value;\n }\n else if (this.props.defaultValue !== undefined) {\n value = this.props.defaultValue;\n }\n if (!isPresent(value) && this.props.defaultItem !== undefined) {\n value = this.props.defaultItem;\n }\n return value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"index\", {\n /**\n * The index of the selected item.\n */\n get: function () {\n var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey;\n var value = this.value;\n // TO DO: deprecate it!\n return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"name\", {\n /**\n * Gets the `name` property of the DropDownList.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"validity\", {\n /**\n * Represents the validity state into which the DropDownList is set.\n */\n get: function () {\n var customError = this.props.validationMessage !== undefined;\n var isValid = (!this.required\n || (this.value !== null && this.value !== '' && this.value !== undefined));\n var valid = this.props.valid !== undefined ? this.props.valid : isValid;\n return {\n customError: customError,\n valid: valid,\n valueMissing: this.value === null\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"validityStyles\", {\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : DropDownListWithoutContext.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DropDownListWithoutContext.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : DropDownListWithoutContext.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DropDownListWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {\n var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;\n var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;\n var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;\n var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;\n var opening = !prevOpened && opened;\n var closing = prevOpened && !opened;\n if (!this.base.getPopupSettings().animate) {\n if (opening) {\n this.onPopupOpened();\n }\n else if (closing) {\n // this.onPopupClosed();\n }\n }\n if (virtual && virtual.total !== prevTotal) {\n this.base.vs.calcScrollElementHeight();\n this.base.vs.reset();\n }\n else {\n var selectedItem_1 = this.value;\n var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;\n var selectedItemIndex = data.findIndex(function (i) { return areSame(i, selectedItem_1, dataItemKey); });\n var selectedItemChanged = !areSame(prevSelectedItem, selectedItem_1, dataItemKey);\n if (opening && virtual) {\n this.base.scrollToVirtualItem(virtual, selectedItemIndex);\n }\n else if (opening && !virtual) {\n this.base.scrollToItem(selectedItemIndex);\n }\n else if (opened && prevOpened && selectedItem_1 && selectedItemChanged && !this._navigated) {\n this.base.scrollToItem(selectedItemIndex);\n }\n else if (opened && prevOpened && this._navigated) {\n if (this._navigated && virtual && virtual.skip === 0) {\n this.base.vs.reset();\n }\n else if (this._navigated && virtual && virtual.skip === virtual.total - virtual.pageSize) {\n this.base.vs.scrollToEnd();\n }\n }\n }\n this._navigated = false;\n this.setValidity();\n };\n /**\n * @hidden\n */\n DropDownListWithoutContext.prototype.componentDidMount = function () {\n this.base.didMount();\n this.setValidity();\n };\n /**\n * @hidden\n */\n DropDownListWithoutContext.prototype.render = function () {\n var _this = this;\n var _a = this.props, style = _a.style, className = _a.className, label = _a.label, dir = _a.dir, virtual = _a.virtual;\n var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;\n var text = getItemValue(this.value, this.props.textField);\n var isValid = !this.validityStyles || this.validity.valid;\n var base = this.base;\n var vs = base.vs;\n vs.enabled = virtual !== undefined;\n if (virtual !== undefined) {\n base.vs.skip = virtual.skip;\n base.vs.total = virtual.total;\n base.vs.pageSize = virtual.pageSize;\n }\n var dropdownlist = (React.createElement(\"span\", { ref: function (dropdown) { return _this._element = dropdown; }, className: classNames('k-widget k-dropdown', {\n 'k-state-invalid': !isValid\n }, className), style: !label\n ? style\n : __assign({}, style, { width: undefined }), dir: dir, onMouseDown: opened ? preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur },\n this.renderDropDownWrapper(),\n this.renderListContainer()));\n return label ? (React.createElement(FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;\n };\n /**\n * @hidden\n */\n DropDownListWithoutContext.prototype.onNavigate = function (state, keyCode) {\n var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _c;\n var vs = this.base.vs;\n var value = this.value;\n var index = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });\n var newIndex = this.base.navigation.navigate({\n current: virtual.skip + index,\n max: (vs.enabled ? virtual.total : data.length) - 1,\n min: defaultItem !== undefined ? -1 : 0,\n keyCode: keyCode\n });\n if (newIndex !== undefined) {\n this.handleItemSelect(newIndex, state);\n }\n this.applyState(state);\n };\n DropDownListWithoutContext.prototype.focusedIndex = function () {\n var filterText = isPresent(this.props.filter) ? this.props.filter : this.state.text;\n var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, dataItemKey = _a.dataItemKey, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;\n var value = this.value;\n var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });\n var hasSelected = !(selectedIndex < 0 && !this.props.defaultItem);\n if (!hasSelected && filterText && virtual.skip === 0) {\n return focusedItemIndex ? focusedItemIndex(data, filterText, textField) :\n data.indexOf(getFocusedItem(data, filterText, textField));\n }\n else {\n return !hasSelected && virtual.skip === 0 ? 0 : undefined;\n }\n };\n DropDownListWithoutContext.prototype.focusElement = function (element) {\n var _this = this;\n this._skipFocusEvent = true;\n element.focus();\n window.setTimeout(function () { return _this._skipFocusEvent = false; }, 30);\n };\n DropDownListWithoutContext.prototype.triggerOnChange = function (item, state) {\n if (areSame(this.value, item, this.props.dataItemKey)) {\n return;\n }\n if (this.props.value === undefined) {\n state.data.value = item;\n }\n this._valueDuringOnChange = item;\n state.events.push({ type: 'onChange' });\n };\n DropDownListWithoutContext.prototype.applyState = function (state) {\n this.base.applyState(state);\n this._valueDuringOnChange = undefined;\n };\n DropDownListWithoutContext.displayName = 'DropDownList';\n /**\n * @hidden\n */\n DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);\n /**\n * @hidden\n */\n DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase.defaultProps, { required: false });\n return DropDownListWithoutContext;\n}(React.Component));\nexport { DropDownListWithoutContext };\n/**\n * Represents the PropsContext of the `DropDownList` component.\n * Used for global configuration of all `DropDownList` instances.\n *\n * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.\n */\nexport var DropDownListPropsContext = createPropsContext();\n/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */\n/**\n * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).\n *\n * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).\n * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).\n *\n * @example\n * ```jsx\n * class App extends React.Component {\n * dropdownlist = null;\n * render() {\n * return (\n * \n * this.dropdownlist = component}\n * />\n * \n *
\n * );\n * }\n * }\n * ReactDOM.render(, document.querySelector('my-app'));\n * ```\n */\nexport var DropDownList = withPropsContext(DropDownListPropsContext, DropDownListWithoutContext);\nDropDownList.displayName = 'KendoReactDropDownList';\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar DEFAULT_NUMBER = 1111111.1111111;\nvar MAX_DECIMAL = 0.31111111111111117;\nvar MIN_DECIMAL = 1;\nvar ONE_NUMBER = 1;\nvar ZERO_NUMBER = 0;\nvar DIGITS_REGEX = /\\d/;\nvar MAX_PRECISION = 15;\n/**\n * @hidden\n */\nexport var getInitialState = function () { return ({\n eventValue: null,\n prevLooseValue: '',\n currentLooseValue: '',\n focused: false,\n selectionStart: undefined,\n selectionEnd: undefined,\n decimalSelect: false,\n valueIsCorrected: false,\n valueIsOutOfRange: false\n}); };\n/**\n * @hidden\n */\nexport var getStateOrPropsValue = function (value, stateValue) {\n return value !== undefined ? value : stateValue;\n};\n/**\n * @hidden\n */\nexport var formatValue = function (value, format, intlService) {\n if (value === null && value === undefined) {\n return '';\n }\n if (typeof value === 'string') {\n return value;\n }\n return intlService.formatNumber(value, format);\n};\n/**\n * @hidden\n */\nexport var fractionLength = function (value) {\n return (String(value).split('.')[1] || '').length;\n};\n/**\n * @hidden\n */\nvar maxFractionLength = function (value1, value2) {\n return Math.max(fractionLength(value1), fractionLength(value2));\n};\n/**\n * @hidden\n */\nexport var limitPrecision = function (precision) { return Math.min(precision, MAX_PRECISION); };\n/**\n * @hidden\n */\nexport var toFixedPrecision = function (value, precision) {\n var maxPrecision = limitPrecision(precision);\n return parseFloat(value.toFixed(maxPrecision));\n};\n/**\n * @hidden\n */\nexport var increaseValue = function (value, newState, step, min, max, format, intlService) {\n var maxPrecision = maxFractionLength(value || 0, step || 0);\n var increasedValue = rangeValue(toFixedPrecision((value || 0) + (step || 0), maxPrecision), min, max);\n newState.eventValue = increasedValue;\n newState.currentLooseValue = formatValue(increasedValue, format, intlService);\n newState.selectionStart = newState.selectionEnd = getLastNumberIndex(newState.currentLooseValue, DIGITS_REGEX);\n};\n/**\n * @hidden\n */\nexport var decreaseValue = function (value, newState, step, min, max, format, intlService) {\n var maxPrecision = maxFractionLength(value || 0, step || 0);\n var decreasedValue = rangeValue(toFixedPrecision((value || 0) - (step || 0), maxPrecision), min, max);\n newState.eventValue = decreasedValue;\n newState.currentLooseValue = formatValue(decreasedValue, format, intlService);\n newState.selectionStart = newState.selectionEnd = getLastNumberIndex(newState.currentLooseValue, DIGITS_REGEX);\n};\n/**\n * @hidden\n */\nexport var rangeValue = function (value, min, max) {\n if (value == null) {\n return value;\n }\n if (!(value > 1 || value < 1 || value === 1)) {\n // null, undefined or NaN\n return null;\n }\n if (max !== undefined && min !== undefined && max < min) {\n return null;\n }\n if (max !== undefined && value > max) {\n value = max;\n }\n if (min !== undefined && value < min) {\n value = min;\n }\n return value;\n};\n/**\n * @hidden\n */\nexport var getMaxCursorPosition = function (nextValue, formatInfo) {\n var formatSuffixIndex = formatInfo.findIndex(function (_a) {\n var _ = _a[0], currSuffix = _a[1];\n return Boolean(currSuffix) && nextValue.indexOf(currSuffix) === nextValue.length - currSuffix.length;\n });\n if (formatSuffixIndex === -1) {\n return -1;\n }\n var suffix = formatInfo[formatSuffixIndex][1];\n return nextValue.length - suffix.length;\n};\n/**\n * @hidden\n */\nexport var getMinCursorPosition = function (nextValue, formatInfo) {\n var formatPrefixIndex = formatInfo.findIndex(function (_a) {\n var currPrefix = _a[0], _ = _a[1];\n return Boolean(currPrefix) && nextValue.indexOf(currPrefix) === 0;\n });\n if (formatPrefixIndex === -1) {\n return -1;\n }\n var prefix = formatInfo[formatPrefixIndex][0];\n return prefix.length;\n};\n/**\n * @hidden\n */\nexport var rangeSelection = function (nextLooseValue, formatInfo, newState) {\n var maxPosition = getMaxCursorPosition(nextLooseValue, formatInfo);\n if (maxPosition !== -1 && newState.selectionStart > maxPosition) {\n newState.selectionStart = newState.selectionEnd = maxPosition;\n return;\n }\n if (newState.selectionStart > nextLooseValue.length) {\n newState.selectionStart = newState.selectionEnd = nextLooseValue.length;\n }\n var minPosition = getMinCursorPosition(nextLooseValue, formatInfo);\n if (minPosition !== -1 && newState.selectionStart < minPosition) {\n newState.selectionStart = newState.selectionEnd = minPosition;\n }\n if (newState.selectionStart === -1) {\n newState.selectionStart = newState.selectionEnd = 0;\n }\n};\n/**\n * @hidden\n */\nexport var setSelection = function (newState, newIndex, nextLooseValue, formatInfo) {\n newState.selectionStart = newState.selectionEnd = newIndex;\n rangeSelection(nextLooseValue, formatInfo, newState);\n};\n/**\n * @hidden\n */\nexport var setInvalid = function (newState, format, formatInfo, intlService) {\n newState.eventValue = intlService.parseNumber(newState.prevLooseValue, format);\n newState.currentLooseValue = newState.prevLooseValue;\n newState.valueIsCorrected = true;\n setSelection(newState, newState.selectionStart, newState.currentLooseValue, formatInfo);\n};\n/**\n * @hidden\n */\nexport var isMinusSymbolAdded = function (newState, symbols) {\n var newText = String(newState.currentLooseValue);\n var oldText = String(newState.prevLooseValue);\n return (newText.split(symbols.minusSign).length !== oldText.split(symbols.minusSign).length &&\n newText.length === oldText.length + symbols.minusSign.length);\n};\n/**\n * @hidden\n */\nexport var isMinusSymbolRemoved = function (newState, symbols) {\n var newText = String(newState.currentLooseValue);\n var oldText = String(newState.prevLooseValue);\n return (newText.indexOf(symbols.minusSign) === -1 && oldText.indexOf(symbols.minusSign) !== -1);\n};\n/**\n * @hidden\n */\nexport var isDecimalDuplicated = function (newState, symbols) {\n var newText = String(newState.currentLooseValue);\n return newText.split(symbols.decimal).length > 2;\n};\n/**\n * @hidden\n */\nexport var getFormatPrefixSufix = function (format, intlService) {\n var positiveResult = intlService.formatNumber(DEFAULT_NUMBER, format);\n var negativeResult = intlService.formatNumber(-DEFAULT_NUMBER, format);\n var zeroResult = intlService.formatNumber(ZERO_NUMBER, format);\n var oneResult = intlService.formatNumber(ONE_NUMBER, format);\n var positivePrefix = getPrefix(positiveResult);\n var negativePrefix = getPrefix(negativeResult);\n var zeroPrefix = getPrefix(zeroResult);\n var onePrefix = getPrefix(oneResult);\n var positiveSuffix = getSuffix(positiveResult);\n var negativeSuffix = getSuffix(negativeResult);\n var zeroSuffix = getSuffix(zeroResult);\n var oneSuffix = getSuffix(oneResult);\n return {\n positiveInfo: [positivePrefix, positiveSuffix],\n negativeInfo: [negativePrefix, negativeSuffix],\n zeroInfo: [zeroPrefix, zeroSuffix],\n oneInfo: [onePrefix, oneSuffix]\n };\n};\n/**\n * @hidden\n */\nexport var getFormatSymbols = function (format, intlService) {\n var positiveResult = intlService.formatNumber(DEFAULT_NUMBER, format);\n var negativeResult = intlService.formatNumber(-DEFAULT_NUMBER, format);\n var zeroResult = intlService.formatNumber(ZERO_NUMBER, format);\n var oneResult = intlService.formatNumber(ONE_NUMBER, format);\n var symbols = intlService.numberSymbols();\n var sanitizeRegex = new RegExp(\"[\\\\d\\\\\" + symbols.decimal + symbols.group + \"]\", 'g');\n var resultWithDuplicates = [positiveResult, negativeResult, zeroResult, oneResult]\n .map(function (result) { return result.replace(sanitizeRegex, ''); })\n .join('');\n return resultWithDuplicates\n .split('')\n .filter(function (x, n, s) { return s.indexOf(x) === n; })\n .join('');\n};\n/**\n * @hidden\n */\nexport var getInitialPosition = function (nextLooseValue, symbols) {\n var decimalIdex = nextLooseValue.indexOf(symbols.decimal);\n if (decimalIdex > -1) {\n return decimalIdex;\n }\n return getLastNumberIndex(nextLooseValue, DIGITS_REGEX);\n};\n/**\n * @hidden\n */\nexport var reverseString = function (str) {\n return str.split('').reverse().join('');\n};\n/**\n * @hidden\n */\nexport var getLastNumberIndex = function (currentLooseValue, inputRegex) {\n return currentLooseValue.length - reverseString(currentLooseValue).search(inputRegex);\n};\n/**\n * @hidden\n */\nexport var getPrefix = function (str) {\n return str.split(str[str.search(DIGITS_REGEX)])[0];\n};\n/**\n * @hidden\n */\nexport var getSuffix = function (str) {\n var reversedString = reverseString(str);\n return reverseString(reversedString.split(reversedString[reversedString.search(DIGITS_REGEX)])[0]);\n};\n/**\n * @hidden\n */\nexport var getFirstNumberIndex = function (prevLooseValue, inputRegex) {\n return prevLooseValue.search(inputRegex);\n};\n/**\n * @hidden\n */\nexport var getDecimalCount = function (value, decimal) {\n var currentDecimalPlace = value.indexOf(decimal);\n return currentDecimalPlace > -1 ? value.length - currentDecimalPlace - 1 : 0;\n};\n/**\n * @hidden\n */\nexport var changeBasedSelection = function (currentValue, nextValue, selectionPosition, isDelete, sanitizeRegex) {\n var isCurrentLeadingZero = currentValue.replace(sanitizeRegex, '')[0] === '0';\n var isNextLeadingZero = nextValue.replace(sanitizeRegex, '')[0] === '0';\n if (isCurrentLeadingZero && !isNextLeadingZero) {\n return selectionPosition - 1;\n }\n if (isNextLeadingZero && isDelete) {\n return selectionPosition + 1;\n }\n var numberCounter = 0;\n for (var idx = 0; idx < selectionPosition; idx++) {\n if (DIGITS_REGEX.test(currentValue.charAt(idx))) {\n numberCounter++;\n }\n }\n var newSelection = 0;\n while (numberCounter > 0 && nextValue.length > newSelection) {\n if (DIGITS_REGEX.test(nextValue.charAt(newSelection))) {\n numberCounter--;\n }\n newSelection++;\n }\n return newSelection;\n};\n/**\n * @hidden\n */\nexport var sanitizeNumber = function (state, format, intlService) {\n var newState = __assign({}, state);\n var prevLooseValue = newState.prevLooseValue;\n var symbols = intlService.numberSymbols();\n var restrictedSymbols = getFormatSymbols(format, intlService);\n var currentLooseValueAsString = String(newState.currentLooseValue);\n var prevLooseValueAsString = String(prevLooseValue);\n var sanitizeRegex = new RegExp(\"[^\\\\d\\\\\" + symbols.decimal + \"]\", 'g');\n var sanitizeGroupRegex = new RegExp(\"[^\\\\d\\\\\" + symbols.decimal + \"\\\\\" + symbols.group + \"]\", 'g');\n var allSymbolsRegex = new RegExp(\"[\\\\d\\\\\" + symbols.decimal + \"\\\\\" + symbols.group + \"]\");\n var sanitizedString = currentLooseValueAsString.replace(sanitizeRegex, '');\n var numberStart = getFirstNumberIndex(currentLooseValueAsString, DIGITS_REGEX);\n var numberEnd = numberStart === -1 ? -1 : getLastNumberIndex(currentLooseValueAsString, DIGITS_REGEX);\n var decimalIndex = currentLooseValueAsString.indexOf(symbols.decimal);\n var sanitizedFormattedString = (currentLooseValueAsString.substring(0, numberStart) +\n currentLooseValueAsString.substring(numberStart, numberEnd).replace(sanitizeGroupRegex, '') +\n currentLooseValueAsString.substring(numberEnd, currentLooseValueAsString.length))\n .split('')\n .filter(function (s) { return restrictedSymbols.indexOf(s) !== -1 || s.search(allSymbolsRegex) !== -1; })\n .join('');\n var formattedMax = intlService.formatNumber(MAX_DECIMAL, format).replace(sanitizeRegex, '');\n var maxDecimalIndex = formattedMax.indexOf(symbols.decimal);\n var maxDecimalCount = maxDecimalIndex > -1 ? formattedMax.length - maxDecimalIndex - 1 : 0;\n var formattedMin = intlService.formatNumber(MIN_DECIMAL, format).replace(sanitizeRegex, '');\n var minDecimalIndex = formattedMin.indexOf(symbols.decimal);\n var minDecimalCount = minDecimalIndex > -1 ? formattedMin.length - minDecimalIndex - 1 : 0;\n var _a = getFormatPrefixSufix(format, intlService), positiveInfo = _a.positiveInfo, negativeInfo = _a.negativeInfo, zeroInfo = _a.zeroInfo, oneInfo = _a.oneInfo;\n var formatInfo = [positiveInfo, negativeInfo, zeroInfo, oneInfo];\n var isFormatContainPrefixSuffix = formatInfo.findIndex(function (info) { return info.findIndex(function (nestedInfo) { return Boolean(nestedInfo); }) !== -1; }) !== 1;\n var isDelete = currentLooseValueAsString.length > 0 && currentLooseValueAsString.length < prevLooseValueAsString.length;\n var isPercentFormat = format &&\n format[0] === 'p' &&\n currentLooseValueAsString &&\n currentLooseValueAsString.indexOf(symbols.percentSign) === -1;\n if (!newState.isPaste) {\n // 1. Empty input\n if (currentLooseValueAsString === '') {\n newState.eventValue = null;\n newState.currentLooseValue = '';\n return newState;\n }\n // 2. Check is minus sign\n if (newState.currentLooseValue === symbols.minusSign && intlService.formatNumber(-0, format) !== prevLooseValueAsString) {\n newState.eventValue = -0;\n newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);\n setSelection(newState, getInitialPosition(newState.currentLooseValue, symbols), newState.currentLooseValue, formatInfo);\n return newState;\n }\n // 3. Minus sign toggle\n if (isMinusSymbolAdded(newState, symbols)) {\n var nextValue = intlService.parseNumber(prevLooseValue, format);\n newState.eventValue = -(nextValue !== null ? nextValue : 0);\n newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);\n var currentNumberStart = getFirstNumberIndex(newState.currentLooseValue, DIGITS_REGEX);\n var oldNumberStart = getFirstNumberIndex(prevLooseValueAsString, DIGITS_REGEX);\n setSelection(newState, newState.selectionEnd - 1 + (currentNumberStart - oldNumberStart), newState.currentLooseValue, formatInfo);\n return newState;\n }\n if (isMinusSymbolRemoved(newState, symbols)) {\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n setSelection(newState, newState.selectionStart, newState.currentLooseValue, formatInfo);\n return newState;\n }\n // 4. Check is decimal symbol\n if (newState.currentLooseValue === symbols.decimal) {\n newState.eventValue = 0;\n var valueCandidate = formatValue(newState.eventValue, format, intlService);\n if (minDecimalCount === 0 && maxDecimalCount > 0) {\n var currentLastNumberIndex = getLastNumberIndex(valueCandidate, DIGITS_REGEX);\n newState.currentLooseValue = valueCandidate.substring(0, currentLastNumberIndex) +\n symbols.decimal +\n valueCandidate.substring(currentLastNumberIndex);\n }\n else {\n newState.currentLooseValue = valueCandidate;\n }\n setSelection(newState, getInitialPosition(newState.currentLooseValue, symbols) + 1, newState.currentLooseValue, formatInfo);\n return newState;\n }\n // 5. Duplicate decimal - it's possible only as trailing\n if (isDecimalDuplicated(newState, symbols)) {\n setInvalid(newState, format, formatInfo, intlService);\n return newState;\n }\n // 6. Percent format\n if (isPercentFormat) {\n newState.eventValue = intlService.parseNumber(currentLooseValueAsString, format) / 100;\n newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);\n return newState;\n }\n // 7. More than 15 numeric symbols\n var numericSymbols = String(newState.currentLooseValue).replace(/[^\\d]/g, '');\n if (numericSymbols.length > MAX_PRECISION) {\n setInvalid(newState, format, formatInfo, intlService);\n return newState;\n }\n // 8. Check prefix / suffix for modifications\n if (sanitizedString !== currentLooseValueAsString &&\n currentLooseValueAsString &&\n isFormatContainPrefixSuffix) {\n var formatInfoIndex = formatInfo.findIndex(function (_a) {\n var prefix = _a[0], suffix = _a[1];\n var prefixIndex = currentLooseValueAsString.indexOf(prefix);\n var suffixIndex = currentLooseValueAsString.indexOf(suffix);\n var prefixFound = prefixIndex === 0;\n var suffixFound = suffixIndex === currentLooseValueAsString.length - suffix.length;\n var prefixGap = prefixIndex + prefix.length !== numberStart &&\n numberStart !== -1 &&\n currentLooseValueAsString[prefixIndex + prefix.length] !== symbols.decimal;\n var suffixGap = suffixIndex !== numberEnd &&\n numberEnd !== -1 &&\n currentLooseValueAsString[suffixIndex - 1] !== symbols.decimal;\n if (prefix && suffix) {\n if (prefixGap || suffixGap) {\n return false;\n }\n return prefixFound && suffixFound;\n }\n if (prefix) {\n if (prefixGap) {\n return false;\n }\n return prefixFound;\n }\n if (suffix) {\n if (suffixGap) {\n return false;\n }\n return suffixFound;\n }\n return false;\n });\n if (formatInfoIndex === -1) {\n setInvalid(newState, format, formatInfo, intlService);\n return newState;\n }\n }\n // 9. Value ending on decimal separator (here as decimal might be typed inside format)\n if (sanitizedString[sanitizedString.length - 1] === symbols.decimal && maxDecimalCount > 0) {\n newState.eventValue = intlService.parseNumber(currentLooseValueAsString, format);\n newState.currentLooseValue = sanitizedFormattedString;\n return newState;\n }\n // 10. prevent deleting decimal and group symbols\n if (newState.currentLooseValue && prevLooseValue) {\n var isSpecialSymbolDeleted = (restrictedSymbols + symbols.decimal + symbols.group)\n .split('')\n .findIndex(function (s) {\n if (currentLooseValueAsString.split('').filter(function (x) { return x === s; }).length <\n prevLooseValueAsString.split('').filter(function (x) { return x === s; }).length &&\n currentLooseValueAsString.length + 1 === prevLooseValueAsString.length) {\n if (s === symbols.decimal &&\n getDecimalCount(prevLooseValueAsString.replace(sanitizeRegex, ''), symbols.decimal) === 0) {\n return false;\n }\n return true;\n }\n return false;\n }) > -1;\n if (isSpecialSymbolDeleted) {\n newState.eventValue = intlService.parseNumber(state.prevLooseValue, format);\n newState.currentLooseValue = state.prevLooseValue;\n return newState;\n }\n }\n var currentDecimalCount = getDecimalCount(sanitizedString, symbols.decimal);\n var endsOnDecimal = sanitizedString[sanitizedString.length - 1] === '0';\n // 11. Deleting more decimals than allowed\n if (isDelete && endsOnDecimal && currentDecimalCount < minDecimalCount) {\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);\n return newState;\n }\n // 12. Ending on zero OR more decimals than allowed\n if (currentDecimalCount > 0) {\n var valueUntillDecimal = currentLooseValueAsString.substring(0, decimalIndex);\n if (endsOnDecimal && (!valueUntillDecimal || prevLooseValueAsString.indexOf(valueUntillDecimal) !== 0)) {\n // ending on zero but typing before decimal separator\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n var nextLooseValue = formatValue(newState.eventValue, format, intlService);\n setSelection(newState, changeBasedSelection(currentLooseValueAsString, nextLooseValue, newState.selectionEnd, isDelete, sanitizeRegex), nextLooseValue, formatInfo);\n newState.currentLooseValue = nextLooseValue;\n return newState;\n }\n if (currentDecimalCount > maxDecimalCount) {\n // typing more symbols than format allows\n var looseDecimalPlace = currentLooseValueAsString.indexOf(symbols.decimal);\n var result = currentLooseValueAsString.substring(0, looseDecimalPlace) +\n currentLooseValueAsString.substring(looseDecimalPlace, looseDecimalPlace + 1 + maxDecimalCount) +\n currentLooseValueAsString.substring(numberEnd, String(newState.currentLooseValue).length);\n newState.eventValue = intlService.parseNumber(result, format);\n newState.currentLooseValue = result;\n setSelection(newState, newState.selectionStart, result, formatInfo);\n return newState;\n }\n if (minDecimalCount !== maxDecimalCount && currentDecimalCount <= maxDecimalCount && endsOnDecimal) {\n // adding trailing zeroes\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n newState.currentLooseValue = sanitizedFormattedString;\n return newState;\n }\n if (currentDecimalCount < minDecimalCount) {\n // deleting more decimals than allowed\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n newState.currentLooseValue = formatValue(newState.eventValue, format, intlService);\n return newState;\n }\n }\n }\n // X. All other values should be parsed\n newState.eventValue = intlService.parseNumber(newState.currentLooseValue, format);\n if (isPercentFormat) {\n newState.eventValue = newState.eventValue / 100;\n }\n if (typeof newState.eventValue === 'number') {\n var nextLooseValue = formatValue(newState.eventValue, format, intlService);\n // First digit add\n if (currentLooseValueAsString.length === 1) {\n setSelection(newState, getInitialPosition(nextLooseValue, symbols), nextLooseValue, formatInfo);\n }\n else {\n setSelection(newState, changeBasedSelection(currentLooseValueAsString, nextLooseValue, newState.selectionEnd, isDelete, sanitizeRegex), nextLooseValue, formatInfo);\n }\n newState.currentLooseValue = nextLooseValue;\n }\n else {\n // Case when deleting last number\n newState.currentLooseValue = formatValue(intlService.parseNumber(sanitizedString), format, intlService);\n }\n return newState;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { useInternationalization, useLocalization } from '@progress/kendo-react-intl';\nimport { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext } from '@progress/kendo-react-common';\nimport { FloatingLabel } from '@progress/kendo-react-labels';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { numericIncreaseValue, messages, numericDecreaseValue } from '../messages';\nimport { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue, getInitialState } from './utils';\nvar VALIDATION_MESSAGE = 'Please enter a valid value!';\n/**\n * Represents the PropsContext of the `NumericTextBox` component.\n * Used for global configuration of all `NumericTextBox` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var NumericTextBoxPropsContext = createPropsContext();\n/**\n * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).\n */\nexport var NumericTextBox = React.forwardRef(function (directProps, target) {\n validatePackage(packageMetadata);\n var props = usePropsContext(NumericTextBoxPropsContext, directProps);\n var calculatedId = React.useMemo(function () { return guid(); }, []);\n var inputId = props.id || calculatedId;\n var intlService = useInternationalization();\n var localizationService = useLocalization();\n var elementRef = React.useRef(null);\n var elementWrapperRef = React.useRef(null);\n var valueDuringChangeRef = React.useRef();\n var _a = React.useState(false), forceUpdate = _a[0], setForceUpdate = _a[1];\n var stateRef = React.useRef(getInitialState());\n var isPasteRef = React.useRef(false);\n var prevLooseValueRef = React.useRef();\n var stateValueRef = React.useRef(props.defaultValue);\n var looseValue = formatValue(stateRef.current.focused && !props.disabled ?\n stateRef.current.currentLooseValue :\n getStateOrPropsValue(props.value, stateValueRef.current), props.format, intlService);\n prevLooseValueRef.current = looseValue;\n React.useEffect(function () {\n if (elementRef.current && elementRef.current.setCustomValidity) {\n elementRef.current.setCustomValidity(validityGetter().valid\n ? ''\n : props.validationMessage || VALIDATION_MESSAGE);\n }\n });\n var focusElement = React.useCallback(function () {\n if (elementRef.current) {\n elementRef.current.focus();\n }\n }, []);\n var valueGetter = React.useCallback(function () {\n if (valueDuringChangeRef.current !== undefined) {\n return valueDuringChangeRef.current;\n }\n else {\n return getStateOrPropsValue(props.value, stateValueRef.current);\n }\n }, [props.value]);\n var nameGetter = React.useCallback(function () {\n return props.name;\n }, [props.name]);\n var requiredGetter = React.useCallback(function () {\n return props.required;\n }, [props.required]);\n var validityGetter = React.useCallback(function () {\n var customError = props.validationMessage !== undefined;\n var currentValue = valueGetter();\n var valid = props.valid !== undefined ?\n props.valid :\n !stateRef.current.valueIsOutOfRange &&\n (!requiredGetter() || (currentValue !== null && currentValue !== undefined));\n return {\n customError: customError,\n valid: valid,\n valueMissing: currentValue === null || currentValue === undefined\n };\n }, [props.validationMessage, props.valid, valueGetter, requiredGetter]);\n var validityStylesGetter = React.useCallback(function () {\n return props.validityStyles;\n }, [props.validityStyles]);\n var propsGetter = React.useCallback(function () {\n return props;\n }, [props]);\n var getImperativeHandle = React.useCallback(function () {\n var options = {\n element: elementRef.current,\n focus: focusElement\n };\n Object.defineProperty(options, 'name', { get: nameGetter });\n Object.defineProperty(options, 'value', { get: valueGetter });\n Object.defineProperty(options, 'validity', { get: validityGetter });\n Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });\n Object.defineProperty(options, 'required', { get: requiredGetter });\n Object.defineProperty(options, 'props', { get: propsGetter });\n return options;\n }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]);\n React.useImperativeHandle(target, getImperativeHandle);\n var getCurrentState = React.useCallback(function () {\n return {\n eventValue: getStateOrPropsValue(props.value, stateValueRef.current),\n prevLooseValue: prevLooseValueRef.current,\n currentLooseValue: elementRef.current.value,\n selectionStart: elementRef.current.selectionStart,\n selectionEnd: elementRef.current.selectionEnd,\n decimalSelect: false,\n valueIsCorrected: false,\n valueIsOutOfRange: false,\n isPaste: isPasteRef.current,\n focused: stateRef.current.focused\n };\n }, [props.value]);\n var triggerChange = React.useCallback(function (event, newState) {\n if (props.disabled) {\n return;\n }\n valueDuringChangeRef.current = newState.eventValue;\n stateValueRef.current = newState.eventValue;\n var formattedValue = formatValue(rangeValue(newState.eventValue, props.min, props.max), props.format, intlService);\n var rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);\n if (rangedValue !== newState.eventValue) {\n newState.valueIsOutOfRange = true;\n newState.eventValue = rangedValue;\n stateValueRef.current = rangedValue;\n }\n if (newState.valueIsCorrected) {\n var wrapper_1 = elementWrapperRef.current;\n if (wrapper_1 && wrapper_1.className.indexOf('k-state-invalid') === -1) {\n wrapper_1.className += ' k-state-invalid';\n window.setTimeout(function () { return wrapper_1.className = wrapper_1.className.replace(' k-state-invalid', ''); }, 50);\n }\n }\n var shouldFireEvent = props.value !== newState.eventValue;\n if (shouldFireEvent) {\n dispatchEvent(props.onChange, event, getImperativeHandle(), { value: newState.eventValue });\n }\n valueDuringChangeRef.current = undefined;\n stateRef.current = newState;\n setForceUpdate(function (_x) { return !_x; });\n }, [props.value, props.onChange, props.disabled, setForceUpdate, getImperativeHandle]);\n var onChangeHandler = React.useCallback(function (event) {\n var stateCandidate = getCurrentState();\n isPasteRef.current = false;\n triggerChange(event, sanitizeNumber(stateCandidate, props.format, intlService));\n }, [props.format, props.onChange, intlService, triggerChange, getCurrentState]);\n var onKeyDown = React.useCallback(function (event) {\n var newState = getCurrentState();\n var currentValue = intlService.parseNumber(String(newState.currentLooseValue), props.format);\n // Select All\n if (newState.selectionEnd > newState.selectionStart &&\n newState.selectionEnd - newState.selectionStart === String(newState.currentLooseValue).length) {\n isPasteRef.current = true;\n return;\n }\n switch (event.keyCode) {\n case 38:\n // Arrow up\n increaseValue(currentValue, newState, props.step, props.min, props.max, props.format, intlService);\n break;\n case 40:\n // Arrow down\n decreaseValue(currentValue, newState, props.step, props.min, props.max, props.format, intlService);\n break;\n case 13:\n // Enter - range values\n if (props.rangeOnEnter === false) {\n return;\n }\n var formattedValue = formatValue(rangeValue(currentValue, props.min, props.max), props.format, intlService);\n var rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);\n newState.eventValue = rangedValue;\n newState.currentLooseValue = formatValue(rangedValue, props.format, intlService);\n newState.selectionStart = newState.selectionEnd = newState.currentLooseValue.length;\n break;\n case 110:\n // Numpad decimal key\n var element = elementRef.current;\n var symbols = intlService.numberSymbols();\n if (element) {\n newState.currentLooseValue = newState.currentLooseValue.slice(0, newState.selectionStart) +\n symbols.decimal +\n newState.currentLooseValue.slice(newState.selectionEnd);\n newState.selectionStart = newState.selectionEnd = newState.selectionStart + 1;\n newState = sanitizeNumber(newState, props.format, intlService);\n }\n break;\n default:\n return;\n }\n event.preventDefault();\n triggerChange(event, newState);\n }, [props.format, props.min, props.max, props.step, props.onChange, props.rangeOnEnter, triggerChange, getCurrentState]);\n var onPasteHandler = React.useCallback(function () {\n isPasteRef.current = true;\n }, []);\n var onIncrease = React.useCallback(function (event) {\n if (props.readOnly ||\n props.disabled) {\n return;\n }\n var newState = getCurrentState();\n increaseValue(intlService.parseNumber(String(newState.currentLooseValue), props.format), newState, props.step, props.min, props.max, props.format, intlService);\n triggerChange(event, newState);\n }, [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]);\n var onDecrease = React.useCallback(function (event) {\n if (props.readOnly ||\n props.disabled) {\n return;\n }\n var newState = getCurrentState();\n decreaseValue(intlService.parseNumber(String(newState.currentLooseValue), props.format), newState, props.step, props.min, props.max, props.format, intlService);\n triggerChange(event, newState);\n }, [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]);\n var onWheelHandler = React.useCallback(function (event) {\n if (!document ||\n document.activeElement !== elementRef.current ||\n !elementRef.current ||\n props.readOnly ||\n props.disabled) {\n return;\n }\n if (event.nativeEvent.deltaY < 0) {\n onIncrease(event);\n }\n if (event.nativeEvent.deltaY > 0) {\n onDecrease(event);\n }\n }, [onIncrease, onDecrease, props.disabled, props.readOnly]);\n var onFocus = React.useCallback(function (event) {\n stateRef.current.currentLooseValue = prevLooseValueRef.current;\n stateRef.current.focused = true;\n dispatchEvent(props.onFocus, event, getImperativeHandle(), {});\n setForceUpdate(function (x) { return !x; });\n }, [props.onFocus, setForceUpdate, getImperativeHandle]);\n var onBlur = React.useCallback(function (event) {\n stateRef.current = getInitialState();\n dispatchEvent(props.onBlur, event, getImperativeHandle(), {});\n setForceUpdate(function (x) { return !x; });\n }, [props.onBlur, setForceUpdate, getImperativeHandle]);\n var onMouseDown = React.useCallback(function (e) {\n if (document && elementRef.current) {\n e.preventDefault();\n if (document.activeElement !== elementRef.current) {\n elementRef.current.focus();\n }\n }\n }, []);\n React.useLayoutEffect(function () {\n if (elementRef.current && stateRef.current.selectionStart !== undefined && stateRef.current.selectionEnd !== undefined) {\n elementRef.current.selectionStart = stateRef.current.selectionStart;\n elementRef.current.selectionEnd = stateRef.current.selectionEnd;\n stateRef.current.selectionStart = undefined;\n stateRef.current.selectionEnd = undefined;\n }\n }, [forceUpdate]);\n var isValid = !validityStylesGetter() || validityGetter().valid;\n var numerictextbox = (React.createElement(\"span\", { dir: props.dir, style: !props.label\n ? { width: props.width }\n : undefined, className: 'k-widget k-numerictextbox' + (props.className ? ' ' + props.className : ''), \"aria-disabled\": props.disabled ? 'true' : undefined },\n React.createElement(\"span\", { className: classNames('k-numeric-wrap', {\n 'k-state-disabled': props.disabled,\n 'k-state-invalid': !isValid,\n 'k-state-focused': stateRef.current.focused\n }), ref: elementWrapperRef },\n React.createElement(\"input\", { value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, \"aria-valuemin\": props.min, \"aria-valuemax\": props.max, \"aria-labelledby\": props.ariaLabelledBy, \"aria-describedby\": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input k-formatted-value', id: inputId, name: props.name, readOnly: props.readOnly, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),\n props.children,\n props.spinners &&\n (React.createElement(\"span\", { className: \"k-select\", onMouseDown: onMouseDown },\n React.createElement(\"span\", { className: \"k-link k-link-increase\", \"aria-label\": localizationService\n .toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService\n .toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease },\n React.createElement(\"span\", { className: \"k-icon k-i-arrow-n\" })),\n React.createElement(\"span\", { className: \"k-link k-link-decrease\", \"aria-label\": localizationService\n .toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService\n .toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease },\n React.createElement(\"span\", { className: \"k-icon k-i-arrow-s\" })))))));\n return props.label\n ? (React.createElement(FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))\n : numerictextbox;\n});\nNumericTextBox.propTypes = {\n value: PropTypes.number,\n defaultValue: PropTypes.number,\n step: PropTypes.number,\n format: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.shape({\n style: PropTypes.oneOf(['decimal', 'currency', 'percent', 'scientific', 'accounting']),\n currency: PropTypes.string,\n currencyDisplay: PropTypes.oneOf(['symbol', 'code', 'name']),\n useGrouping: PropTypes.bool,\n minimumIntegerDigits: PropTypes.number,\n minimumFractionDigits: PropTypes.number,\n maximumFractionDigits: PropTypes.number\n })\n ]),\n width: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n tabIndex: PropTypes.number,\n accessKey: PropTypes.string,\n title: PropTypes.string,\n placeholder: PropTypes.string,\n min: PropTypes.number,\n max: PropTypes.number,\n spinners: PropTypes.bool,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n dir: PropTypes.string,\n name: PropTypes.string,\n label: PropTypes.string,\n validationMessage: PropTypes.string,\n required: PropTypes.bool,\n id: PropTypes.string,\n rangeOnEnter: PropTypes.bool,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func\n};\nNumericTextBox.displayName = 'KendoNumericTextBox';\nNumericTextBox.defaultProps = {\n step: 1,\n spinners: true,\n disabled: false,\n required: false,\n validityStyles: true,\n rangeOnEnter: true,\n onChange: function (_) { return; },\n onFocus: function (_) { return; },\n onBlur: function (_) { return; }\n};\n","import * as React from 'react';\nimport { GlobalizationContext } from '../globalization/GlobalizationContext';\n/**\n * A custom [React Hook](https://reactjs.org/docs/hooks-intro.html) providing access to an [IntlService]({% slug api_intl_intlservice %}).\n */\nexport var useInternationalization = function () { return React.useContext(GlobalizationContext).intl; };\n","import { Button } from '@progress/kendo-react-buttons';\n/**\n * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).\n */\nexport var ToggleButton = Button;\n","import * as React from 'react';\nimport { classNames } from '@progress/kendo-react-common';\n/**\n * @hidden\n * @deprecated\n */\nexport var PickerWrap = React.forwardRef(function (props, ref) {\n var _ref = props._ref;\n var element = React.useRef(null);\n React.useImperativeHandle(ref, function () { return element.current; });\n React.useImperativeHandle(_ref, function () { return element.current; });\n var className = React.useMemo(function () { return classNames(props.className, 'k-picker-wrap'); }, [props.className]);\n return (React.createElement(\"span\", { ref: element, id: props.id, style: props.style, className: className, tabIndex: props.tabIndex }, props.children));\n});\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)\n t[p[i]] = s[p[i]];\n return t;\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { Popup } from '@progress/kendo-react-popup';\nimport { getDate, cloneDate } from '@progress/kendo-date-math';\nimport { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, validatePackage, kendoThemeMaps } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { DateInput } from '../dateinput/DateInput';\nimport { Calendar } from '../calendar/components/Calendar';\nimport { MIN_DATE, MAX_DATE, setTime } from '../utils';\nimport { isInDateRange } from '../utils';\nimport { messages, toggleCalendar } from '../messages';\nimport { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { ToggleButton } from './ToggleButton';\nimport { PickerWrap } from '../common/PickerWrap';\nimport { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';\n/** @hidden */\nvar DatePickerWithoutContext = /** @class */ (function (_super) {\n __extends(DatePickerWithoutContext, _super);\n function DatePickerWithoutContext(props) {\n var _this = _super.call(this, props) || this;\n _this._popupId = guid();\n _this._element = null;\n _this._dateInput = React.createRef();\n _this._calendar = null;\n _this.shouldFocusDateInput = false;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this.dateInput) {\n _this.dateInput.focus();\n }\n };\n _this.setCalendarRef = function (calendar) {\n _this._calendar = calendar;\n };\n _this.nextValue = function (nextProps, nextState) {\n return nextProps.value !== undefined\n ? nextProps.value\n : nextState.value;\n };\n _this.nextShow = function (nextProps, nextState) {\n return nextProps.show !== undefined\n ? nextProps.show\n : nextState.show;\n };\n _this.handleInputValueChange = function (event) {\n _this.handleValueChange(event.value, event);\n };\n _this.handleCalendarValueChange = function (event) {\n var value = _this.mergeTime(event.value);\n _this.handleValueChange(value, event);\n };\n _this.handleValueChange = function (value, event) {\n _this.setState({\n value: cloneDate(value || undefined),\n show: false\n });\n _this.valueDuringOnChange = value;\n _this.showDuringOnChange = false;\n _this.shouldFocusDateInput = true;\n var onChange = _this.props.onChange;\n if (onChange) {\n onChange.call(undefined, {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: _this.value,\n show: _this.show,\n target: _this\n });\n }\n _this.valueDuringOnChange = undefined;\n _this.showDuringOnChange = undefined;\n };\n _this.handleFocus = function () {\n _this.setState({ focused: true });\n };\n _this.handleBlur = function () {\n _this.setState({ focused: false });\n _this.setShow(false);\n };\n _this.handleIconClick = function () {\n if (_this.props.disabled) {\n return;\n }\n _this.shouldFocusDateInput = true;\n _this.setShow(!_this.show);\n };\n _this.handleIconMouseDown = function (event) {\n event.preventDefault();\n };\n _this.handleKeyDown = function (event) {\n var altKey = event.altKey, keyCode = event.keyCode;\n if (keyCode === Keys.esc) {\n _this.shouldFocusDateInput = true;\n _this.setShow(false);\n return;\n }\n if (altKey && (keyCode === Keys.up || keyCode === Keys.down)) {\n event.preventDefault();\n event.stopPropagation();\n _this.shouldFocusDateInput = keyCode === Keys.up;\n _this.setShow(keyCode === Keys.down);\n }\n };\n validatePackage(packageMetadata);\n _this.state = {\n value: _this.props.defaultValue || DatePickerWithoutContext.defaultProps.defaultValue,\n show: _this.props.defaultShow || DatePickerWithoutContext.defaultProps.defaultShow,\n focused: false\n };\n return _this;\n }\n Object.defineProperty(DatePickerWithoutContext.prototype, \"element\", {\n /**\n * Gets the wrapping element of the DatePickerWithoutContext.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"dateInput\", {\n /**\n * Gets the DateInput component inside the DatePicker component.\n */\n get: function () {\n return this._dateInput.current;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"calendar\", {\n /**\n * Gets the Calendar component inside the DatePicker component.\n */\n get: function () {\n return this._calendar;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"value\", {\n /**\n * Gets the value of the DatePickerWithoutContext.\n */\n get: function () {\n var value = this.valueDuringOnChange !== undefined\n ? this.valueDuringOnChange\n : this.props.value !== undefined\n ? this.props.value\n : this.state.value;\n return (value !== null) ? cloneDate(value) : null;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"show\", {\n /**\n * Gets the popup state of the DatePickerWithoutContext.\n */\n get: function () {\n return this.showDuringOnChange !== undefined\n ? this.showDuringOnChange\n : this.props.show !== undefined\n ? this.props.show\n : this.state.show;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"name\", {\n /**\n * Gets the `name` property of the DatePickerWithoutContext.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : DatePickerWithoutContext.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : DatePickerWithoutContext.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"dateInputComp\", {\n get: function () {\n return this.props.dateInput || DatePickerWithoutContext.defaultProps.dateInput;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"toggleButtonComp\", {\n get: function () {\n return this.props.toggleButton || DatePickerWithoutContext.defaultProps.toggleButton;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"calendarComp\", {\n get: function () {\n return this.props.calendar || DatePickerWithoutContext.defaultProps.calendar;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"popupComp\", {\n get: function () {\n return this.props.popup || DatePickerWithoutContext.defaultProps.popup;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"pickerWrapComp\", {\n get: function () {\n return this.props.pickerWrap || DatePickerWithoutContext.defaultProps.pickerWrap;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"validity\", {\n /**\n * Represents the validity state into which the DatePicker is set.\n */\n get: function () {\n var inRange = isInDateRange(this.value, this.min, this.max);\n var customError = this.props.validationMessage !== undefined;\n var isValid = (!this.required || this.value !== null) && inRange;\n var valid = this.props.valid !== undefined ? this.props.valid : isValid;\n return {\n customError: customError,\n rangeOverflow: (this.value && this.max.getTime() < this.value.getTime()) || false,\n rangeUnderflow: (this.value && this.value.getTime() < this.min.getTime()) || false,\n valid: valid,\n valueMissing: this.value === null\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : DatePickerWithoutContext.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePickerWithoutContext.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : DatePickerWithoutContext.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DatePickerWithoutContext.prototype.componentDidMount = function () {\n if (this.show) {\n // If defaultShow is true during the initial render, the popup is not aligned.\n this.forceUpdate();\n }\n };\n /**\n * @hidden\n */\n DatePickerWithoutContext.prototype.componentDidUpdate = function () {\n if (this._calendar && this._calendar.element && this.show && !this.prevShow) {\n this._calendar.element.focus({ preventScroll: true });\n }\n if (this.dateInput\n && this.dateInput.element\n && !this.show\n && this.shouldFocusDateInput) {\n this.dateInput.element.focus({ preventScroll: true });\n }\n this.prevShow = this.show;\n this.shouldFocusDateInput = false;\n };\n /**\n * @hidden\n */\n DatePickerWithoutContext.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n DatePickerWithoutContext.prototype.render = function () {\n var _this = this;\n var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel;\n var _e = this.props.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, [\"popupClass\"]);\n var show = this.show;\n var value = this.value;\n var sanitizedValue = value && getDate(value);\n var isValid = !this.validityStyles || this.validity.valid;\n var popupClassNames = classNames('k-calendar-container k-group k-reset', popupClass);\n var dateInputProps = {\n disabled: disabled,\n format: format,\n formatPlaceholder: formatPlaceholder,\n id: id,\n ariaLabelledBy: ariaLabelledBy,\n ariaDescribedBy: ariaDescribedBy,\n ariaLabel: ariaLabel,\n max: max,\n min: min,\n name: name,\n onChange: this.handleInputValueChange,\n required: required,\n tabIndex: !show ? tabIndex : -1,\n title: title,\n valid: this.validity.valid,\n validationMessage: validationMessage,\n validityStyles: validityStyles,\n value: value,\n label: undefined,\n placeholder: !this.state.focused ? this.props.placeholder : null,\n ariaHasPopup: true,\n ariaExpanded: this.show,\n size: null,\n fillMode: null,\n rounded: null\n };\n var popupProps = __assign({ show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {\n horizontal: 'left',\n vertical: 'bottom'\n }, popupAlign: {\n horizontal: 'left',\n vertical: 'top'\n } }, otherPopupSettings);\n var calendarProps = {\n disabled: disabled,\n value: sanitizedValue,\n min: min,\n max: max,\n weekNumber: weekNumber,\n focusedDate: focusedDate,\n onChange: this.handleCalendarValueChange\n };\n var toggleButtonTitle = provideLocalizationService(this)\n .toLanguageString(toggleCalendar, messages[toggleCalendar]);\n var datepicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {\n var onFocus = _a.onFocus, onBlur = _a.onBlur;\n var _b;\n return (React.createElement(\"span\", { role: \"group\", \"aria-expanded\": _this.show, ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-datepicker', (_b = {},\n _b[\"k-input-\" + (kendoThemeMaps.sizeMap[size] || size)] = size,\n _b[\"k-rounded-\" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,\n _b[\"k-input-\" + fillMode] = fillMode,\n _b['k-valid'] = isValid,\n _b['k-invalid'] = !isValid,\n _b['k-required'] = _this.required,\n _b['k-disabled'] = _this.props.disabled,\n _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },\n React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),\n React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: \"button\", icon: \"calendar\", title: toggleButtonTitle, className: \"k-input-button\", onClick: _this.handleIconClick, \"aria-label\": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),\n React.createElement(_this.popupComp, __assign({}, popupProps),\n React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));\n }));\n return this.props.label\n ? (React.createElement(PickerFloatingLabel, { dateInput: this._dateInput, label: this.props.label, editorId: id, editorValid: isValid, editorDisabled: this.props.disabled, children: datepicker, style: { width: this.props.width } }))\n : datepicker;\n };\n DatePickerWithoutContext.prototype.setShow = function (show) {\n if (this.show === show) {\n return;\n }\n this.setState({ show: show });\n };\n DatePickerWithoutContext.prototype.mergeTime = function (value) {\n return this.value && value ? setTime(value, this.value) : value;\n };\n DatePickerWithoutContext.prototype.nextTick = function (f) {\n // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.\n // XXX: https://github.com/facebook/react/issues/3751\n // Handles multiple focus events happening at the same time.\n clearTimeout(this.nextTickId);\n this.nextTickId = window.setTimeout(function () { return f(); });\n };\n /**\n * @hidden\n */\n DatePickerWithoutContext.displayName = 'DatePicker';\n /**\n * @hidden\n */\n DatePickerWithoutContext.propTypes = {\n className: PropTypes.string,\n defaultShow: PropTypes.bool,\n defaultValue: PropTypes.instanceOf(Date),\n disabled: PropTypes.bool,\n focusedDate: PropTypes.instanceOf(Date),\n format: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.shape({\n skeleton: PropTypes.string,\n pattern: PropTypes.string,\n date: PropTypes.oneOf(['short', 'medium', 'long', 'full']),\n time: PropTypes.oneOf(['short', 'medium', 'long', 'full']),\n datetime: PropTypes.oneOf(['short', 'medium', 'long', 'full']),\n era: PropTypes.oneOf(['narrow', 'short', 'long']),\n year: PropTypes.oneOf(['numeric', '2-digit']),\n month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),\n day: PropTypes.oneOf(['numeric', '2-digit']),\n weekday: PropTypes.oneOf(['narrow', 'short', 'long']),\n hour: PropTypes.oneOf(['numeric', '2-digit']),\n hour12: PropTypes.bool,\n minute: PropTypes.oneOf(['numeric', '2-digit']),\n second: PropTypes.oneOf(['numeric', '2-digit']),\n timeZoneName: PropTypes.oneOf(['short', 'long'])\n })\n ]),\n formatPlaceholder: PropTypes.oneOfType([\n PropTypes.oneOf(['wide', 'narrow', 'short', 'formatPattern']),\n PropTypes.shape({\n year: PropTypes.string,\n month: PropTypes.string,\n day: PropTypes.string,\n hour: PropTypes.string,\n minute: PropTypes.string,\n second: PropTypes.string\n })\n ]),\n id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n ariaLabel: PropTypes.string,\n min: PropTypes.instanceOf(Date),\n max: PropTypes.instanceOf(Date),\n name: PropTypes.string,\n popupSettings: PropTypes.shape({\n animate: PropTypes.bool,\n appendTo: PropTypes.any,\n popupClass: PropTypes.string\n }),\n show: PropTypes.bool,\n tabIndex: PropTypes.number,\n title: PropTypes.string,\n value: PropTypes.instanceOf(Date),\n weekNumber: PropTypes.bool,\n width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n validationMessage: PropTypes.string,\n required: PropTypes.bool,\n validate: PropTypes.bool,\n valid: PropTypes.bool,\n size: PropTypes.oneOf([null, 'small', 'medium', 'large']),\n rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),\n fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])\n };\n /**\n * @hidden\n */\n DatePickerWithoutContext.defaultProps = {\n defaultShow: false,\n defaultValue: null,\n dateInput: DateInput,\n calendar: Calendar,\n toggleButton: ToggleButton,\n popup: Popup,\n pickerWrap: PickerWrap,\n disabled: false,\n format: 'd',\n max: MAX_DATE,\n min: MIN_DATE,\n popupSettings: {},\n tabIndex: 0,\n weekNumber: false,\n required: false,\n validityStyles: true,\n size: 'medium',\n rounded: 'medium',\n fillMode: 'solid'\n };\n return DatePickerWithoutContext;\n}(React.Component));\nexport { DatePickerWithoutContext };\n/**\n * Represents the PropsContext of the `DatePicker` component.\n * Used for global configuration of all `DatePicker` instances.\n *\n * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.\n */\nexport var DatePickerPropsContext = createPropsContext();\n/* eslint-disable @typescript-eslint/no-redeclare */\n/**\n * Represents the KendoReact DatePicker Component.\n *\n * Accepts properties of type [DatePickerProps]({% slug api_dateinputs_datepickerprops %}).\n * Obtaining the `ref` returns an object of type [DatePickerHandle]({% slug api_dateinputs_datepickerhandle %}).\n */\nexport var DatePicker = withPropsContext(DatePickerPropsContext, DatePickerWithoutContext);\nDatePicker.displayName = 'KendoReactDatePicker';\nregisterForLocalization(DatePickerWithoutContext);\n","import * as React from 'react';\nimport { useDraggable } from './hooks';\n/**\n * Represents the KendoReact Draggable component.\n *\n * Accepts properties of type [DraggableProps]({% slug api_common_draggableprops %}),\n * and returns an object of type [DraggableHandle]({% slug api_common_draggablehandle %}) when the `ref` is obtained.\n */\nexport var Draggable = React.forwardRef(function (props, ref) {\n var childRef = React.useRef(null);\n var target = React.useRef(null);\n var getElement = React.useCallback(function () { return childRef.current && childRef.current.element\n ? childRef.current.element\n : childRef.current; }, [childRef]);\n React.useImperativeHandle(target, function () { return ({ element: getElement() || null }); });\n React.useImperativeHandle(ref, function () { return target.current; });\n React.useImperativeHandle(props.childRef, function () { return childRef.current; });\n var handlePress = React.useCallback(function (event) {\n if (!props.onPress) {\n return;\n }\n props.onPress({\n element: getElement(),\n target: target.current,\n event: event\n });\n }, [getElement, props.onPress]);\n var handleRelease = React.useCallback(function (event) {\n if (!props.onRelease) {\n return;\n }\n props.onRelease({\n element: getElement(),\n target: target.current,\n event: event\n });\n }, [getElement, props.onRelease]);\n var handleDragStart = React.useCallback(function (event) {\n if (!props.onDragStart) {\n return;\n }\n props.onDragStart({\n element: getElement(),\n target: target.current,\n event: event\n });\n }, [props, getElement]);\n var handleDrag = React.useCallback(function (event) {\n if (!props.onDrag) {\n return;\n }\n props.onDrag({\n element: getElement(),\n target: target.current,\n event: event\n });\n }, [getElement, props.onDrag]);\n var handleDragEnd = React.useCallback(function (event) {\n if (!props.onDragEnd) {\n return;\n }\n props.onDragEnd({\n element: getElement(),\n target: target.current,\n event: event\n });\n }, [getElement, props.onDragEnd]);\n useDraggable(childRef, {\n onPress: handlePress,\n onRelease: handleRelease,\n onDragStart: handleDragStart,\n onDrag: handleDrag,\n onDragEnd: handleDragEnd\n }, {\n mouseOnly: props.mouseOnly,\n autoScroll: props.autoScroll,\n hint: props.hint,\n scrollContainer: props.scrollContainer\n });\n return props.children\n ? (React.cloneElement(React.Children.only(props.children), { ref: childRef }))\n : null;\n});\nDraggable.displayName = 'KendoReactDraggable';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { dispatchEvent, Keys, classNames, Draggable, getTabIndex, createPropsContext, withPropsContext } from '@progress/kendo-react-common';\nimport { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages';\nimport { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { Button } from '@progress/kendo-react-buttons';\n/** @hidden */\nvar SliderWithoutContext = /** @class */ (function (_super) {\n __extends(SliderWithoutContext, _super);\n function SliderWithoutContext(props) {\n var _this = _super.call(this, props) || this;\n /**\n * @hidden\n */\n _this.state = {\n value: _this.props.defaultValue === undefined ? _this.props.min : _this.props.defaultValue,\n focused: false,\n dir: _this.props.dir\n };\n /**\n * @hidden\n */\n _this.buttons = function (props) {\n if (!props.enabled) {\n return props.children;\n }\n return (React.createElement(React.Fragment, null,\n React.createElement(Button, { className: \"k-button-decrease k-rounded-full\", \n // rounded={'full'}\n icon: _this.props.vertical ? 'arrow-s' : 'arrow-w', title: props.decrementTitle, onClick: props.decrement }),\n props.children,\n React.createElement(Button, { className: \"k-button-increase k-rounded-full\", \n // rounded={'full'}\n icon: _this.props.vertical ? 'arrow-n' : 'arrow-e', title: props.incrementTitle, onClick: props.increment })));\n };\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this._element) {\n _this._element.focus();\n }\n };\n _this.isLabel = function (target) {\n var currentTarget = target;\n while (currentTarget) {\n if (Boolean(currentTarget.getAttribute(SLIDER_LABEL_ATTRIBUTE))) {\n return true;\n }\n currentTarget = currentTarget.parentElement;\n }\n return false;\n };\n _this.onFocus = function () {\n _this.setState({ focused: true });\n };\n _this.onBlur = function () {\n _this.setState({ focused: false });\n };\n _this.onKeyDown = function (e) {\n var newValue = undefined;\n if (e.keyCode === Keys.left || e.keyCode === Keys.down) {\n newValue = _this.state.value - (_this.props.step || 0);\n }\n else if (e.keyCode === Keys.right || e.keyCode === Keys.up) {\n newValue = _this.state.value + (_this.props.step || 0);\n }\n else if (e.keyCode === Keys.home) {\n newValue = _this.props.min;\n }\n else if (e.keyCode === Keys.end) {\n newValue = _this.props.max;\n }\n if (newValue !== undefined) {\n e.preventDefault();\n _this.change(e, newValue);\n }\n };\n _this.decrement = function (e) {\n e.preventDefault();\n _this.change(e, _this.state.value - (_this.props.step || 0));\n };\n _this.increment = function (e) {\n e.preventDefault();\n _this.change(e, _this.state.value + (_this.props.step || 0));\n };\n _this.dragStart = function (e) {\n if (!_this.isLabel(e.event.originalEvent.target)) {\n if (e.event.isTouch) {\n e.event.originalEvent.preventDefault();\n }\n _this.drag(e);\n }\n };\n _this.dragOver = function (e) {\n e.event.originalEvent.preventDefault();\n _this.drag(e);\n };\n _this.drag = function (e) {\n var computed = e.element.getBoundingClientRect();\n var distance = _this.props.vertical\n ? (computed.bottom - e.event.clientY)\n : (_this.state.dir === 'rtl'\n ? computed.right - e.event.clientX\n : e.event.clientX - computed.left);\n var size = _this.props.vertical ? computed.height : computed.width;\n var percentage = (distance / size);\n _this.change(e, _this.props.min + percentage * (_this.props.max - _this.props.min));\n };\n validatePackage(packageMetadata);\n return _this;\n }\n /**\n * @hidden\n */\n SliderWithoutContext.getDerivedStateFromProps = function (props, state) {\n var value = props.value !== undefined ? props.value : state.value;\n var min = props.min, max = props.max;\n return value === undefined ? null :\n { value: Math.min(Math.max(value, min), max) };\n };\n /**\n * @hidden\n */\n SliderWithoutContext.prototype.componentDidMount = function () {\n if (!this.state.dir && window && this._element) {\n // Note: getComputedStyle forces reflow\n var direction = window.getComputedStyle(this._element).direction;\n if (direction) {\n this.setState({ dir: direction });\n }\n }\n };\n /**\n * @hidden\n */\n SliderWithoutContext.prototype.render = function () {\n var _this = this;\n var _a;\n var lS = provideLocalizationService(this);\n var percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;\n var trackStyles = this.props.vertical\n ? { marginTop: '0.5rem', marginBottom: '0.5rem' }\n : { marginLeft: '0.5rem', marginRight: '0.5rem' };\n var sliderItemsStyle = this.props.vertical\n ? { paddingTop: 0, height: '100%' }\n : {};\n return (React.createElement(\"div\", { ref: function (el) { return _this._element = el; }, \"aria-valuemin\": this.props.min, \"aria-valuemax\": this.props.max, \"aria-valuenow\": this.state.value, \"aria-disabled\": this.props.disabled ? 'true' : undefined, \"aria-labelledby\": this.props.ariaLabelledBy, \"aria-describedby\": this.props.ariaDescribedBy, dir: this.state.dir, role: \"slider\", id: this.props.id, style: __assign({ gap: 0 }, this.props.style), tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {\n 'k-state-focused': this.state.focused,\n 'k-state-disabled': this.props.disabled,\n 'k-slider-horizontal': !this.props.vertical,\n 'k-slider-vertical': this.props.vertical\n }, this.props.className) },\n React.createElement(this.buttons, { enabled: this.props.buttons, decrement: this.decrement, increment: this.increment, incrementTitle: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue]), decrementTitle: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue]) },\n React.createElement(Draggable, { onDrag: this.dragOver, onPress: this.dragStart },\n React.createElement(\"div\", { className: \"k-slider-track-wrap\", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },\n this.props.children && (React.createElement(\"ul\", { className: \"k-reset k-slider-items\", style: __assign({ margin: 0 }, sliderItemsStyle) }, React.Children.map(this.props.children, function (child) {\n return child && React.cloneElement(child, {\n position: 100 * (child.props.position - _this.props.min) /\n (_this.props.max - _this.props.min),\n vertical: _this.props.vertical\n }, child.props.children);\n }))),\n React.createElement(\"div\", { className: \"k-slider-track\", style: this.props.vertical\n ? { bottom: 0, height: '100%' }\n : (_a = {}, _a[this.state.dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a), ref: function (el) { return _this._sliderTrack = el; } },\n React.createElement(\"div\", { className: \"k-slider-selection\", style: this.props.vertical\n ? { height: percentValue + '%' }\n : { width: percentValue + '%' } }),\n React.createElement(\"a\", { className: \"k-draghandle\", title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: this.props.vertical\n ? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }\n : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }\n : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));\n };\n Object.defineProperty(SliderWithoutContext.prototype, \"sliderTrack\", {\n /**\n * @hidden\n */\n get: function () {\n return this._sliderTrack;\n },\n enumerable: true,\n configurable: true\n });\n SliderWithoutContext.prototype.change = function (e, value) {\n value = Math.min(Math.max(value, this.props.min), this.props.max);\n this.setState({ value: value });\n dispatchEvent(this.props.onChange, e, this, { value: value });\n };\n SliderWithoutContext.displayName = 'Slider';\n /**\n * @hidden\n */\n SliderWithoutContext.propTypes = {\n min: PropTypes.number.isRequired,\n max: PropTypes.number.isRequired,\n value: PropTypes.number,\n vertical: PropTypes.bool,\n id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string\n // TODO: validation when buttons is set to true, but no step is provided\n };\n return SliderWithoutContext;\n}(React.Component));\nexport { SliderWithoutContext };\n/**\n * Represents the PropsContext of the `Slider` component.\n * Used for global configuration of all `Slider` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var SliderPropsContext = createPropsContext();\n/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */\n/**\n * Represents the [KendoReact Slider component]({% slug overview_slider %}).\n *\n * Accepts properties of type [SliderProps]({% slug api_inputs_sliderprops %}).\n * Obtaining the `ref` returns an object of type [SliderHandle]({% slug api_inputs_sliderhandle %}).\n */\nexport var Slider = withPropsContext(SliderPropsContext, SliderWithoutContext);\nSlider.displayName = 'KendoReactSlider';\nregisterForLocalization(SliderWithoutContext);\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\n/**\n * @hidden\n */\nexport var RANGE_ACTION;\n(function (RANGE_ACTION) {\n RANGE_ACTION[\"start\"] = \"start\";\n RANGE_ACTION[\"end\"] = \"end\";\n RANGE_ACTION[\"min\"] = \"min\";\n RANGE_ACTION[\"max\"] = \"max\";\n RANGE_ACTION[\"increase\"] = \"increase\";\n RANGE_ACTION[\"decrease\"] = \"decrease\";\n})(RANGE_ACTION || (RANGE_ACTION = {}));\n/**\n * @hidden\n */\nexport var rangeReducer = function (state, action) {\n var newState;\n var newValue;\n switch (action.type) {\n case RANGE_ACTION.start:\n if (action.payload === undefined) {\n return state;\n }\n newState = {\n start: action.payload > state.end ? state.end : Math.max(action.payload, action.min),\n end: state.end\n };\n break;\n case RANGE_ACTION.end:\n if (action.payload === undefined) {\n return state;\n }\n newState = {\n start: state.start,\n end: action.payload < state.start ? state.start : Math.min(action.payload, action.max)\n };\n break;\n case RANGE_ACTION.min:\n if (action.key === 'start') {\n newState = __assign({}, state, { start: action.min });\n }\n else {\n newState = __assign({}, state, { end: Math.max(action.min, state.start) });\n }\n break;\n case RANGE_ACTION.max:\n if (action.key === 'start') {\n newState = __assign({}, state, { start: Math.min(action.max, state.end) });\n }\n else {\n newState = __assign({}, state, { end: action.max });\n }\n break;\n case RANGE_ACTION.increase:\n if (action.step === undefined || action.key === undefined) {\n return state;\n }\n newValue = state[action.key] + action.step;\n if (action.key === 'start') {\n if (newValue < action.min) {\n newState = __assign({}, state, { start: action.min });\n }\n else {\n newState = __assign({}, state, { start: Math.min(newValue, state.end) });\n }\n }\n else {\n if (newValue > action.max) {\n newState = __assign({}, state, { end: action.max });\n }\n else {\n newState = __assign({}, state, { end: Math.max(newValue, state.start) });\n }\n }\n break;\n case RANGE_ACTION.decrease:\n if (action.step === undefined || action.key === undefined) {\n return state;\n }\n newValue = state[action.key] - action.step;\n if (action.key === 'start') {\n if (newValue < action.min) {\n newState = __assign({}, state, { start: action.min });\n }\n else {\n newState = __assign({}, state, { start: Math.min(newValue, state.end) });\n }\n }\n else {\n if (newValue > action.max) {\n newState = __assign({}, state, { end: action.max });\n }\n else {\n newState = __assign({}, state, { end: Math.max(newValue, state.start) });\n }\n }\n break;\n default:\n newState = state;\n break;\n }\n return newState;\n};\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { classNames, Keys, useDir, useDraggable, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';\nimport { messages, sliderDragTitle } from './../messages';\nimport { useLocalization } from '@progress/kendo-react-intl';\nimport { rangeReducer, RANGE_ACTION } from './range-raducer';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\n/**\n * @hidden\n */\nvar useRange = function (defaultValue, args, callback) {\n var _a = React.useState(defaultValue), state = _a[0], setState = _a[1];\n var handleDispatchAction = React.useCallback(function (action) {\n var newState = rangeReducer(args.state || state, __assign({}, action, args));\n if (callback) {\n callback(newState, action.event);\n }\n setState(newState);\n }, [args, callback]);\n return [state, handleDispatchAction];\n};\n/**\n * Represents the PropsContext of the `RangeSlider` component.\n * Used for global configuration of all `RangeSlider` instances.\n *\n * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.\n */\nexport var RangeSliderPropsContext = createPropsContext();\n/**\n * Represents the [KendoReact RangeSlider component]({% slug overview_rangeslider %}).\n *\n * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).\n * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).\n */\nexport var RangeSlider = React.forwardRef(function (directProps, ref) {\n var _a, _b;\n validatePackage(packageMetadata);\n var props = usePropsContext(RangeSliderPropsContext, directProps);\n var target = React.useRef(null);\n var sliderRef = React.useRef(null);\n var sliderSelectionRef = React.useRef(null);\n var startHandle = React.useRef(null);\n var endHandle = React.useRef(null);\n var focus = React.useCallback(function () {\n if (startHandle.current) {\n startHandle.current.focus();\n }\n }, [startHandle]);\n React.useImperativeHandle(target, function () { return ({\n element: sliderRef.current,\n focus: focus,\n props: props\n }); });\n React.useImperativeHandle(ref, function () { return target.current; });\n var min = React.useMemo(function () { return props.min; }, [props.min]);\n var max = React.useMemo(function () { return props.max; }, [props.max]);\n var step = React.useMemo(function () { return props.step !== undefined ? props.step : defaultProps.step; }, [props.step, defaultProps.step]);\n var dir = useDir(sliderRef, props.dir);\n var handleChange = function (newValue, event) {\n if (props.onChange && target.current) {\n props.onChange.call(undefined, {\n value: newValue,\n target: target.current,\n syntheticEvent: event\n });\n }\n };\n var _c = React.useState(''), currentDrag = _c[0], setCurrentDrag = _c[1];\n var _d = useRange(props.defaultValue || defaultProps.defaultValue, {\n min: min,\n max: max,\n step: step,\n state: props.value\n }, handleChange), stateValue = _d[0], dispatchStateValue = _d[1];\n var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);\n var sliderTrackRef = React.useRef(null);\n var sliderTrackWrapRef = React.useRef(null);\n var percentStart = React.useMemo(function () { return ((value.start - min) / (max - min)) * 100; }, [value.start, min, max]);\n var percentEnd = React.useMemo(function () { return ((value.end - min) / (max - min)) * 100; }, [value.end, min, max]);\n var sliderItemsStyle = React.useMemo(function () { return props.vertical ? { paddingTop: 0, height: '100%' } : {}; }, [props.vertical]);\n var trackStyles = React.useMemo(function () { return props.vertical\n ? { marginTop: '0.5rem', marginBottom: '0.5rem' }\n : { marginLeft: '0.5rem', marginRight: '0.5rem' }; }, [props.vertical]);\n var localization = useLocalization();\n var calcNewDistance = React.useCallback(function (event) {\n if (!sliderTrackWrapRef.current) {\n return;\n }\n event.originalEvent.preventDefault();\n var computed = sliderTrackWrapRef.current.getBoundingClientRect();\n var distance = props.vertical\n ? (computed.bottom - event.clientY)\n : dir === 'rtl'\n ? (computed.right - event.clientX)\n : (event.clientX - computed.left);\n var size = props.vertical ? computed.height : computed.width;\n var percentage = (distance / size);\n var payload = (min + percentage * (max - min));\n return payload;\n }, [\n sliderTrackWrapRef,\n props.vertical,\n dir,\n min,\n max,\n stateValue.start,\n stateValue.end,\n props.value && props.value.start,\n props.value && props.value.end\n ]);\n var calcKey = React.useCallback(function (payload) {\n if (payload <= value.start) {\n return 'start';\n }\n if (payload >= value.end) {\n return 'end';\n }\n return (2 * payload < value.end + value.start) ? 'start' : 'end';\n }, [\n stateValue.start, stateValue.end,\n props.value && props.value.start,\n props.value && props.value.end\n ]);\n var handleStartKeyDown = React.useCallback(function (event) {\n switch (event.keyCode) {\n case Keys.right:\n event.preventDefault();\n dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.decrease : RANGE_ACTION.increase, key: 'start', event: event });\n break;\n case Keys.up:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.increase, key: 'start', event: event });\n break;\n case Keys.left:\n event.preventDefault();\n dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.increase : RANGE_ACTION.decrease, key: 'start', event: event });\n break;\n case Keys.down:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.decrease, key: 'start', event: event });\n break;\n case Keys.home:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.min, key: 'start', event: event });\n break;\n case Keys.end:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.max, key: 'start', event: event });\n break;\n default:\n break;\n }\n }, [dispatchStateValue]);\n var handleEndKeyDown = React.useCallback(function (event) {\n switch (event.keyCode) {\n case Keys.right:\n event.preventDefault();\n dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.decrease : RANGE_ACTION.increase, key: 'end', event: event });\n break;\n case Keys.up:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.increase, key: 'end', event: event });\n break;\n case Keys.left:\n event.preventDefault();\n dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.increase : RANGE_ACTION.decrease, key: 'end', event: event });\n break;\n case Keys.down:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.decrease, key: 'end', event: event });\n break;\n case Keys.home:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.min, key: 'end', event: event });\n break;\n case Keys.end:\n event.preventDefault();\n dispatchStateValue({ type: RANGE_ACTION.max, key: 'end', event: event });\n break;\n default:\n break;\n }\n }, [dispatchStateValue, dir]);\n var handleTrackPress = React.useCallback(function (event) {\n var payload = calcNewDistance(event);\n var key = calcKey(payload);\n setCurrentDrag(key);\n key === 'end' ? endHandle.current.focus() : startHandle.current.focus();\n var action = (key === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start);\n dispatchStateValue({ type: action, payload: payload, event: event });\n }, [props.vertical, min, max, dispatchStateValue]);\n var handleTrackDrag = function (event) {\n var payload = calcNewDistance(event);\n var action = currentDrag === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start;\n dispatchStateValue({ type: action, payload: payload, event: event });\n };\n var handleTrackRelease = function (event) {\n var payload = calcNewDistance(event);\n var action = currentDrag === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start;\n dispatchStateValue({ type: action, payload: payload, event: event });\n setCurrentDrag('');\n };\n useDraggable(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });\n return (React.createElement(\"div\", { role: \"slider\", id: props.id, style: props.style, ref: sliderRef, dir: dir, className: classNames('k-widget k-slider', {\n 'k-rtl': dir === 'rtl',\n 'k-state-disabled': props.disabled,\n 'k-slider-vertical': props.vertical,\n 'k-slider-horizontal': !props.vertical\n }, props.className), \"aria-labelledby\": props.ariaLabelledBy, \"aria-describedby\": props.ariaDescribedBy },\n React.createElement(\"div\", { ref: sliderTrackWrapRef, className: \"k-slider-track-wrap\", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },\n props.children && (React.createElement(\"ul\", { className: \"k-reset k-slider-items\", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {\n return child && React.cloneElement(child, {\n position: 100 * (child.props.position - props.min) /\n (props.max - props.min),\n vertical: props.vertical\n }, child.props.children);\n }))),\n React.createElement(\"div\", { ref: sliderTrackRef, className: \"k-slider-track\", style: props.vertical\n ? { bottom: 0, height: '100%' }\n : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },\n (percentStart !== null && percentEnd !== null) && React.createElement(\"div\", { \"data-selection\": true, ref: sliderSelectionRef, title: value.start + \" - \" + value.end, className: \"k-slider-selection\", style: props.vertical\n ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }\n : (_b = {},\n _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',\n _b.width = (percentEnd - percentStart) + '%',\n _b) }),\n React.createElement(\"a\", { ref: startHandle, role: \"slider\", tabIndex: getTabIndex(props.startTabIndex, props.disabled, undefined), \"aria-valuemin\": min, \"aria-valuemax\": Math.max(max, value.end), \"aria-valuenow\": value.start, \"aria-disabled\": props.disabled ? 'true' : undefined, className: \"k-draghandle\", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical\n ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }\n : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }\n : { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),\n React.createElement(\"a\", { ref: endHandle, role: \"slider\", tabIndex: getTabIndex(props.endTabIndex, props.disabled, undefined), \"aria-valuemin\": Math.min(min, value.start), \"aria-valuemax\": max, \"aria-valuenow\": value.end, \"aria-disabled\": props.disabled ? 'true' : undefined, className: \"k-draghandle\", title: localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle]), style: props.vertical\n ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }\n : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }\n : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));\n});\nvar propTypes = {\n value: function (props, propName, componentName) {\n if (props.value) {\n var start = props.value.start;\n var end = props.value.end;\n var min = props.min;\n var max = props.max;\n if (start > end || start > max || start < min || end > max || end < min || end < start) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n The { start, end } value must be between the min & max value and { start, end } must be start < end.\\n \");\n }\n }\n return null;\n },\n defaultValue: function (props, propName, componentName) {\n if (props.defaultValue) {\n var start = props.defaultValue.start;\n var end = props.defaultValue.end;\n var min = props.min;\n var max = props.max;\n if (start > end || start > max || start < min || end > max || end < min || end < start) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n The { start, end } value must be between the min & max value and { start, end } must be start < end.\\n \");\n }\n }\n return null;\n },\n onChange: PropTypes.func,\n step: PropTypes.number,\n min: function (props, propName, componentName) {\n var prop = props[propName];\n var min = props.min;\n var max = props.max;\n if (min === undefined) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n \" + propName + \" value can not be undefined.\\n \");\n }\n if (prop && min >= max) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n \" + propName + \" value can not be equal to or bigger than the max value.\\n \");\n }\n return null;\n },\n max: function (props, propName, componentName) {\n var prop = props[propName];\n var min = props.min;\n var max = props.max;\n if (max === undefined) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n \" + propName + \" value can not be undefined.\\n \");\n }\n if (prop && max <= min) {\n return new Error(\"Invalid prop + \" + propName + \" supplied to \" + componentName + \".\\n \" + propName + \" value can not be equal to or smaller than the min value.\\n \");\n }\n return null;\n },\n vertical: PropTypes.bool,\n disabled: PropTypes.bool,\n dir: PropTypes.oneOf(['ltr', 'rtl'])\n};\nvar defaultProps = {\n step: 1,\n defaultValue: {\n start: 0,\n end: 0\n },\n vertical: false,\n disabled: false\n};\nRangeSlider.displayName = 'KendoReactRangeSlider';\n// TODO: delete casting when @types/react is updated!\nRangeSlider.propTypes = propTypes;\nRangeSlider.defaultProps = defaultProps;\n","/**\n * @hidden\n */\nexport var packageMetadata = {\n name: '@progress/kendo-react-notification',\n productName: 'KendoReact',\n productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],\n publishDate: 1642517153,\n version: '',\n 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'\n};\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport * as licensing from '@progress/kendo-licensing';\nimport { packageMetadata } from './package-metadata';\nvar buttonTitle = 'Close';\n/**\n * Represents the [KendoReact Notification component]({% slug overview_notification %}).\n */\nvar Notification = /** @class */ (function (_super) {\n __extends(Notification, _super);\n function Notification(props) {\n var _this = _super.call(this, props) || this;\n if (typeof licensing !== 'undefined') {\n licensing.validatePackage(packageMetadata);\n }\n else {\n var message = \"License activation failed for \" + packageMetadata.name + \"\\n\";\n message += 'The @progress/kendo-licensing script is not loaded.\\n';\n message += \"See \" + packageMetadata.licensingDocsUrl + \" for more information.\\n\";\n console.warn(message);\n }\n return _this;\n }\n /**\n * @hidden\n */\n Notification.prototype.render = function () {\n var _this = this;\n var _a = this.props, onClose = _a.onClose, className = _a.className, _b = _a.closable, closable = _b === void 0 ? Notification.defaultProps.closable : _b, _c = _a.type, type = _c === void 0 ? Notification.defaultProps.type : _c;\n return (React.createElement(\"div\", { dir: this.props.dir, className: \"k-notification-container\" },\n React.createElement(\"div\", { className: 'k-widget k-notification' +\n (className ? \" \" + className : '') +\n (type.style === 'none' ? '' : \" k-notification-\" + type.style) +\n (closable ? ' k-notification-closable' : ''), style: this.props.style },\n React.createElement(\"div\", { className: \"k-notification-wrap\" },\n type.icon && React.createElement(\"span\", { className: \"k-icon k-i-\" + type.style }),\n React.createElement(\"div\", { className: \"k-notification-content\" }, this.props.children),\n closable && (React.createElement(\"a\", __assign({ className: \"k-icon k-i-close\", title: buttonTitle, onClick: function (event) {\n if (onClose) {\n onClose.call(undefined, {\n target: _this,\n syntheticEvent: event,\n nativeEvent: event.nativeEvent\n });\n }\n } }, (typeof closable !== 'boolean' ? closable : {}))))))));\n };\n /**\n * @hidden\n */\n Notification.propTypes = {\n className: PropTypes.string,\n closable: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),\n dir: PropTypes.string,\n style: PropTypes.object,\n type: PropTypes.shape({\n style: PropTypes.oneOf(['none', 'success', 'error', 'warning', 'info']),\n icon: PropTypes.bool\n }),\n onClose: PropTypes.func\n };\n /**\n * @hidden\n */\n Notification.defaultProps = {\n closable: false,\n type: {\n style: 'none',\n icon: true\n }\n };\n return Notification;\n}(React.Component));\nexport default Notification;\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport { useAsyncFocusBlur } from '../hooks/useAsyncFocusBlur';\n/**\n * An utility High-order Component for asynchronous focus/blur handling.\n *\n * By default, the `onFocus` and `onBlur` callbacks are called every time a child components receives/loses focus.\n * Use this utility HOC for scenarios where you need to know if the parent has received focus for the first time, or completely lost focus.\n *\n * @returns\n */\nexport var AsyncFocusBlur = function (_a) {\n var children = _a.children, onFocus = _a.onFocus, onBlur = _a.onBlur, onSyncFocus = _a.onSyncFocus, onSyncBlur = _a.onSyncBlur;\n var args = useAsyncFocusBlur({ onFocus: onFocus, onBlur: onBlur, onSyncFocus: onSyncFocus, onSyncBlur: onSyncBlur });\n return children.call(undefined, __assign({}, args));\n};\n","import * as React from 'react';\n/**\n * An utility function for asynchronous focus/blur handling.\n *\n * By default, the `onFocus` and `onBlur` callbacks are called every time a child components receives/loses focus.\n * Use this utility hook for scenarios where you need to know if the parent has received focus for the first time, or completely lost focus.\n *\n * @returns\n */\nexport function useAsyncFocusBlur(_a) {\n var onFocus = _a.onFocus, onBlur = _a.onBlur, onSyncFocus = _a.onSyncFocus, onSyncBlur = _a.onSyncBlur;\n var focused = React.useRef(false);\n var tick = React.useRef(0);\n var nextTick = React.useCallback(function (f) {\n clearTimeout(tick.current);\n tick.current = window.setTimeout(function () { return f(); });\n }, [tick]);\n var handleFocus = React.useCallback(function () {\n var event = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n event[_i] = arguments[_i];\n }\n clearTimeout(tick.current);\n if (onSyncFocus) {\n onSyncFocus.call.apply(onSyncFocus, [undefined].concat(event));\n }\n if (focused.current) {\n return;\n }\n ;\n focused.current = true;\n if (onFocus) {\n onFocus.call.apply(onFocus, [undefined].concat(event));\n }\n }, [focused, onFocus, onSyncFocus]);\n var handleBlur = React.useCallback(function () {\n var event = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n event[_i] = arguments[_i];\n }\n if (onSyncBlur) {\n onSyncBlur.call.apply(onSyncBlur, [undefined].concat(event));\n }\n nextTick(function () {\n if (!focused.current) {\n return;\n }\n if (onBlur) {\n focused.current = false;\n onBlur.call.apply(onBlur, [undefined].concat(event));\n }\n });\n }, [focused, nextTick, onBlur, onSyncBlur]);\n React.useEffect(function () {\n return function () {\n clearTimeout(tick.current);\n };\n }, []);\n return {\n onFocus: handleFocus,\n onBlur: handleBlur\n };\n}\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport * as React from 'react';\nimport { usePropsContext } from '../hooks/usePropsContext';\n/** @hidden */\nexport var createPropsContext = function () { return React.createContext(function (props) { return props; }); };\n/** @hidden */\nexport var withPropsContext = function (context, Component\n// eslint-disable-next-line react/display-name\n) { return React.forwardRef(function (props, ref) {\n var contextProps = usePropsContext(context, props);\n return (React.createElement(Component, __assign({}, contextProps, { ref: ref })));\n}); };\n","import * as React from 'react';\n/** @hidden */\nexport var usePropsContext = function (context, props) {\n var contextPropsCallback = React.useContext(context);\n var contextProps = contextPropsCallback(props);\n return contextProps;\n};\n"],"sourceRoot":""}