\n * );\n * };\n * ReactDOM.render(, document.querySelector('my-app'));\n * ```\n */\nexport var FloatingActionButton = React.forwardRef(function (props, ref) {\n validatePackage(packageMetadata);\n var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.shape, shape = _c === void 0 ? defaultProps.shape : _c, _d = props.size, size = _d === void 0 ? defaultProps.size : _d, style = props.style, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, [\"align\", \"alignOffset\", \"className\", \"disabled\", \"icon\", \"iconClass\", \"id\", \"items\", \"item\", \"text\", \"positionMode\", \"shape\", \"size\", \"style\", \"themeColor\", \"tabIndex\", \"accessKey\", \"popupSettings\", \"onClick\", \"onItemClick\", \"onFocus\", \"onBlur\", \"onKeyDown\", \"onOpen\", \"onClose\"]);\n var target = React.useRef(null);\n var elementRef = React.useRef(null);\n var listRef = React.useRef(null);\n var popupRef = 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 React.useImperativeHandle(ref, function () { return target.current; });\n var _g = React.useState(false), open = _g[0], setOpen = _g[1];\n var _h = React.useState(false), focused = _h[0], setFocused = _h[1];\n var _j = React.useState(-1), focusedIndex = _j[0], setFocusedIndex = _j[1];\n var buttonId = React.useMemo(function () { return guid(); }, []);\n var dir = useDir(elementRef, props.dir);\n var isRtl = dir === 'rtl';\n var listId = React.useMemo(function () { return guid(); }, []);\n React.useEffect(function () {\n position(elementRef, align, alignOffset, isRtl);\n }, [elementRef, align, alignOffset, isRtl]);\n React.useEffect(function () {\n if (focused && elementRef && elementRef.current) {\n // firefox in mac does not focus on mouse-down, next line fixes this\n elementRef.current.focus();\n }\n }, [focused, elementRef]);\n var dispatchPopupEvent = React.useCallback(function (dispatchedEvent, isOpen) {\n if (!items) {\n return;\n }\n dispatchEvent(isOpen ? onOpen : onClose, dispatchedEvent, getImperativeHandle(), undefined);\n }, [onOpen, onClose, items]);\n var handleClick = React.useCallback(function (event) {\n if (!event.target || disabled) {\n return;\n }\n if (!items && onClick) {\n dispatchEvent(onClick, event, getImperativeHandle(), undefined);\n }\n else {\n setOpen(!open);\n setFocused(true);\n setFocusedIndex(!open ? 0 : -1);\n dispatchPopupEvent(event, !open);\n }\n }, [setOpen, setFocused, setFocusedIndex, onClick, dispatchPopupEvent,\n open, items, disabled]);\n var handleFocus = React.useCallback(function (event) {\n setFocused(true);\n setFocusedIndex(open ? 0 : -1);\n if (onFocus) {\n dispatchEvent(onFocus, event, getImperativeHandle(), undefined);\n }\n }, [onFocus, setFocused, setFocusedIndex]);\n var handleBlur = React.useCallback(function (event) {\n setFocused(false);\n setOpen(false);\n setFocusedIndex(-1);\n dispatchEvent(onBlur, event, getImperativeHandle(), undefined);\n var fireCloseEvent = open;\n if (fireCloseEvent) {\n dispatchPopupEvent(event, false);\n }\n }, [onBlur, setFocused, setOpen, setFocusedIndex, dispatchPopupEvent]);\n var handleMouseDown = React.useCallback(function (event) {\n event.preventDefault();\n }, []);\n var dispatchItemClickEvent = React.useCallback(function (dispatchedEvent, index) {\n if (!items) {\n return;\n }\n if (!items[index].disabled) {\n dispatchEvent(onItemClick, dispatchedEvent, getImperativeHandle(), {\n itemProps: items[index],\n itemIndex: index\n });\n }\n }, [onItemClick]);\n var handleItemClick = React.useCallback(function (event, clickedItemIndex) {\n if (!event.target || !items) {\n return;\n }\n setFocusedIndex(clickedItemIndex);\n setOpen(false);\n dispatchItemClickEvent(event, clickedItemIndex);\n dispatchPopupEvent(event, false);\n }, [setFocusedIndex, setOpen, dispatchItemClickEvent, dispatchPopupEvent]);\n var handleItemDown = React.useCallback(function (event) {\n if (document.activeElement === elementRef.current) {\n event.preventDefault();\n }\n }, [elementRef, document.activeElement]);\n var handleKeyDown = React.useCallback(function (event) {\n var currIndex = focusedIndex;\n var maxNavIndex = items ? items.length - 1 : -1;\n var isAtBottom = align.vertical === 'bottom';\n switch (event.keyCode) {\n case Keys.enter:\n case Keys.space:\n if (currIndex >= 0) {\n dispatchItemClickEvent(event, currIndex);\n }\n event.preventDefault();\n setOpen(!open);\n setFocusedIndex(!open ? 0 : -1);\n break;\n case Keys.esc:\n event.preventDefault();\n setOpen(false);\n setFocusedIndex(-1);\n break;\n case Keys.home:\n event.preventDefault();\n setFocusedIndex(0);\n break;\n case Keys.end:\n event.preventDefault();\n setFocusedIndex(maxNavIndex);\n break;\n case Keys.down:\n case Keys.right:\n event.preventDefault();\n if (currIndex < maxNavIndex && !isAtBottom) {\n setFocusedIndex(currIndex + 1);\n }\n if (currIndex > 0 && isAtBottom) {\n setFocusedIndex(currIndex - 1);\n }\n break;\n case Keys.up:\n case Keys.left:\n event.preventDefault();\n if (currIndex > 0 && !isAtBottom) {\n setFocusedIndex(currIndex - 1);\n }\n if (currIndex < maxNavIndex && isAtBottom) {\n setFocusedIndex(currIndex + 1);\n }\n break;\n default:\n break;\n }\n dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);\n }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);\n var buttonClassNames = React.useMemo(function () { return classNames('k-fab', \"k-fab-\" + themeColor, \"k-fab-\" + shape, {\n 'k-fab-sm': size === 'small',\n 'k-fab-md': size === 'medium',\n 'k-fab-lg': size === 'large',\n 'k-state-disabled': disabled,\n 'k-pos-absolute': positionMode === 'absolute',\n 'k-pos-fixed': positionMode === 'fixed',\n 'k-state-focus': focused\n }, \"k-\" + align.vertical + \"-\" + align.horizontal, className); }, [themeColor, size, shape, disabled, positionMode, align, focused, className]);\n var fabItems = (items && (items.map(function (element, index) {\n return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: listId + \"-\" + index, disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));\n })));\n var isIconFab = icon && !text;\n var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;\n var iconWidth = 32;\n var spacing = (fabWidth / 2) - (iconWidth / 2);\n return (React.createElement(React.Fragment, null,\n React.createElement(\"button\", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', \"aria-disabled\": disabled, \"aria-expanded\": items ? open : undefined, \"aria-haspopup\": items ? true : false, \"aria-label\": (text || '') + \" floatingactionbutton\", \"aria-owns\": items ? listId : undefined, \"aria-activedescendant\": focusedIndex >= 0 && items ? listId + \"-\" + focusedIndex : undefined, tabIndex: getTabIndex(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),\n icon ?\n React.createElement(\"span\", { role: \"presentation\", className: classNames(\"k-fab-icon k-icon k-i-\" + icon) }) :\n iconClass ?\n React.createElement(\"span\", { role: \"presentation\", className: iconClass }) :\n null,\n text && React.createElement(\"span\", { className: \"k-fab-text\" }, text)),\n React.createElement(Popup, { ref: popupRef, anchor: elementRef.current, show: open, animate: popupSettings.animate, popupClass: classNames('k-popup-transparent k-fab-popup', popupSettings.popupClass), anchorAlign: popupSettings.anchorAlign || getAnchorAlign(align, isRtl), popupAlign: popupSettings.popupAlign || getPopupAlign(align, isRtl), style: { boxShadow: 'none' } },\n React.createElement(\"ul\", { ref: listRef, role: 'menu', \"aria-labelledby\": id, id: listId, className: classNames('k-fab-items', {\n 'k-fab-items-bottom': align.vertical !== 'bottom',\n 'k-fab-items-top': align.vertical === 'bottom'\n }), style: {\n paddingLeft: isIconFab ? spacing : undefined,\n paddingRight: isIconFab ? spacing : undefined\n } }, fabItems))));\n});\nFloatingActionButton.propTypes = {\n className: PropTypes.string,\n style: PropTypes.object,\n id: PropTypes.string,\n dir: PropTypes.string,\n tabIndex: PropTypes.number,\n accessKey: PropTypes.string,\n disabled: PropTypes.bool,\n icon: PropTypes.string,\n iconClass: PropTypes.string,\n text: PropTypes.string,\n alignOffset: PropTypes.shape({\n x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n y: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n }),\n align: PropTypes.shape({\n vertical: PropTypes.oneOf(['top', 'middle', 'bottom']),\n horizontal: PropTypes.oneOf(['start', 'center', 'end'])\n }),\n positionMode: PropTypes.oneOf(['absolute', 'fixed']),\n shape: PropTypes.oneOf(['rectangle', 'rounded', 'pill']),\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n themeColor: PropTypes.oneOf([\n 'primary', 'secondary', 'tertiary',\n 'info', 'success', 'warning',\n 'error', 'dark', 'light', 'inverse'\n ])\n};\nvar defaultProps = {\n align: { vertical: 'bottom', horizontal: 'end' },\n shape: 'pill',\n size: 'medium',\n themeColor: 'primary',\n positionMode: 'fixed'\n};\nFloatingActionButton.displayName = 'KendoFloatingActionButton';\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 { Button } from '@progress/kendo-react-buttons';\nimport * as React from 'react';\n/**\n * The `CalendarHeaderTitle` component is internally used for rendering the title of the current calendar view. Also used as a custom `headerTitle` for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle) components.\n *\n * * [Customizing the title for the current Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)\n * * [Customizing the title for the current MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view)\n */\nvar CalendarHeaderTitle = /** @class */ (function (_super) {\n __extends(CalendarHeaderTitle, _super);\n function CalendarHeaderTitle() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * @return\n * Returns a `` element with the [`value`]({% slug api_dateinputs_calendarheadertitleprops %}#toc-value) of the title as a child.\n */\n CalendarHeaderTitle.prototype.render = function () {\n var _a = this.props, view = _a.view, props = __rest(_a, [\"view\"]);\n return (React.createElement(Button, __assign({ type: \"button\", look: \"flat\" }, props), this.props.children));\n };\n return CalendarHeaderTitle;\n}(React.PureComponent));\nexport { CalendarHeaderTitle };\n","var _a;\n/**\n * @hidden\n */\nexport var prevView = 'multiviewcalendar.prevView';\n/**\n * @hidden\n */\nexport var nextView = 'multiviewcalendar.nextView';\n/**\n * @hidden\n */\nexport var increaseValue = 'dateinput.increment';\n/**\n * @hidden\n */\nexport var decreaseValue = 'dateinput.decrement';\n/**\n * @hidden\n */\nexport var today = 'calendar.today';\n/**\n * @hidden\n */\nexport var toggleCalendar = 'datepicker.toggleCalendar';\n/**\n * @hidden\n */\nexport var swapStartEnd = 'daterangepicker.swapStartEnd';\n/**\n * @hidden\n */\nexport var start = 'daterangepicker.start';\n/**\n * @hidden\n */\nexport var end = 'daterangepicker.end';\n/**\n * @hidden\n */\nexport var separator = 'daterangepicker.separator';\n/**\n * @hidden\n */\nexport var toggleDateTimeSelector = 'datetimepicker.toggleDateTimeSelector';\n/**\n * @hidden\n */\nexport var now = 'timepicker.now';\n/**\n * @hidden\n */\nexport var selectNow = 'timepicker.selectNow';\n/**\n * @hidden\n */\nexport var timePickerCancel = 'timepicker.cancel';\n/**\n * @hidden\n */\nexport var timePickerSet = 'timepicker.set';\n/**\n * @hidden\n */\nexport var toggleTimeSelector = 'timepicker.toggleTimeSelector';\n/**\n * @hidden\n */\nexport var toggleClock = 'timepicker.toggleClock';\n/**\n * @hidden\n */\nexport var date = 'datetimepicker.date';\n/**\n * @hidden\n */\nexport var time = 'datetimepicker.time';\n/**\n * @hidden\n */\nexport var dateTimePickerCancel = 'datetimepicker.cancel';\n/**\n * @hidden\n */\nexport var dateTimePickerSet = 'datetimepicker.set';\n/**\n * @hidden\n */\nexport var messages = (_a = {},\n _a[today] = 'TODAY',\n _a[now] = 'NOW',\n _a[timePickerSet] = 'Set',\n _a[timePickerCancel] = 'Cancel',\n _a[date] = 'Date',\n _a[time] = 'Time',\n _a[dateTimePickerCancel] = 'Cancel',\n _a[dateTimePickerSet] = 'Set',\n _a[start] = 'Start',\n _a[end] = 'End',\n _a[separator] = ' ',\n _a[selectNow] = 'Select Now',\n _a[toggleTimeSelector] = 'Toggle TimeSelector',\n _a[toggleClock] = 'Toggle Clock',\n _a[increaseValue] = 'Increase value',\n _a[decreaseValue] = 'Decrease value',\n _a[toggleCalendar] = 'Toggle calendar',\n _a[prevView] = 'Navigate to previous view',\n _a[nextView] = 'Navigate to next view',\n _a[swapStartEnd] = 'Swap start and end values',\n _a[toggleDateTimeSelector] = 'Toggle date-time selector',\n _a);\n","/**\n * @hidden\n */\nexport var MIDNIGHT_DATE = new Date(1980, 0, 1);\n/**\n * @hidden\n */\nexport var MIN_DATE = new Date(1900, 0, 1);\n/**\n * @hidden\n */\nexport var MAX_DATE = new Date(2099, 11, 31);\n/**\n * @hidden\n */\nexport var MIN_TIME = new Date(1980, 0, 1);\n/**\n * @hidden\n */\nexport var MAX_TIME = new Date(1980, 0, 1, 23, 59, 59);\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 { registerForLocalization } from '@progress/kendo-react-intl';\nimport { classNames } from '@progress/kendo-react-common';\nimport { CalendarHeaderTitle } from './CalendarHeaderTitle';\nimport { MIN_DATE, MAX_DATE } from '../../defaults';\n/**\n * @hidden\n */\nvar Header = /** @class */ (function (_super) {\n __extends(Header, _super);\n function Header() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.getTitle = function () {\n if (!_this.props.currentDate) {\n return '';\n }\n var take = _this.rangeLength - 1;\n var title = _this.props.service.title(_this.props.currentDate);\n var nextDate = _this.props.service.addToDate(_this.props.currentDate, take);\n if (take < 1 || !_this.props.service.isInRange(nextDate, _this.min, _this.max)) {\n return title;\n }\n return title + \" - \" + _this.props.service.title(nextDate);\n };\n _this.handleTitleClick = function (event) {\n if (!_this.canMoveUp) {\n return;\n }\n _this.props.bus.moveUp(_this.props.activeView, event);\n };\n return _this;\n }\n Object.defineProperty(Header.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : Header.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Header.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : Header.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Header.prototype, \"rangeLength\", {\n get: function () {\n return this.props.rangeLength !== undefined ? this.props.rangeLength : Header.defaultProps.rangeLength;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Header.prototype, \"canMoveUp\", {\n get: function () {\n return this.props.bus.canMoveUp(this.props.activeView);\n },\n enumerable: true,\n configurable: true\n });\n Header.prototype.render = function () {\n var title = this.getTitle();\n var titleClassNames = classNames('k-calendar-title');\n var headerTitleProps = {\n children: title,\n value: title,\n view: this.props.activeView,\n className: titleClassNames,\n onClick: this.handleTitleClick,\n disabled: !this.canMoveUp\n };\n var headerTitle = this.props.headerTitle\n ? React.createElement(this.props.headerTitle, __assign({}, headerTitleProps), title)\n : React.createElement(CalendarHeaderTitle, __assign({}, headerTitleProps), title);\n return (React.createElement(\"div\", { className: \"k-calendar-header k-hstack\" },\n headerTitle,\n React.createElement(\"span\", { className: \"k-spacer\" }),\n React.createElement(\"span\", { className: \"k-calendar-nav k-hstack\" }, this.props.commands)));\n };\n Header.propTypes = {\n activeView: PropTypes.number.isRequired,\n currentDate: PropTypes.instanceOf(Date).isRequired,\n max: PropTypes.instanceOf(Date).isRequired,\n min: PropTypes.instanceOf(Date).isRequired,\n rangeLength: PropTypes.number\n };\n Header.defaultProps = {\n rangeLength: 1,\n min: MIN_DATE,\n max: MAX_DATE\n };\n return Header;\n}(React.Component));\nexport { Header };\nregisterForLocalization(Header);\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 * as PropTypes from 'prop-types';\nimport { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';\nimport { classNames } from '@progress/kendo-react-common';\nimport { getDate } from '@progress/kendo-date-math';\nimport { messages, today } from '../../messages';\nimport { dateInRange, getToday, isInRange } from '../../utils';\nimport { MIN_DATE, MAX_DATE } from '../../defaults';\nvar TodayCommand = /** @class */ (function (_super) {\n __extends(TodayCommand, _super);\n function TodayCommand() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.handleClick = function (syntheticEvent) {\n if (!_this.todayIsInRange) {\n return;\n }\n if (_this.props.onClick) {\n _this.props.onClick.call(undefined, {\n syntheticEvent: syntheticEvent,\n nativeEvent: syntheticEvent.nativeEvent,\n value: dateInRange(getToday(), _this.min, _this.max),\n target: _this,\n isTodayClick: true\n });\n }\n };\n return _this;\n }\n Object.defineProperty(TodayCommand.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : TodayCommand.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TodayCommand.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : TodayCommand.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TodayCommand.prototype, \"todayIsInRange\", {\n get: function () {\n return isInRange(getToday(), getDate(this.min), getDate(this.max));\n },\n enumerable: true,\n configurable: true\n });\n TodayCommand.prototype.render = function () {\n this.localization = provideLocalizationService(this);\n var todayMessage = this.localization.toLanguageString(today, messages[today]);\n var todayClassNames = classNames('k-nav-today', {\n 'k-state-disabled': this.props.disabled\n });\n return (React.createElement(\"span\", { className: todayClassNames, onClick: this.handleClick }, todayMessage));\n };\n TodayCommand.propTypes = {\n max: PropTypes.instanceOf(Date).isRequired,\n min: PropTypes.instanceOf(Date).isRequired,\n onClick: PropTypes.func,\n disabled: PropTypes.bool\n };\n TodayCommand.defaultProps = {\n min: MIN_DATE,\n max: MAX_DATE\n };\n return TodayCommand;\n}(React.Component));\nexport { TodayCommand };\nregisterForLocalization(TodayCommand);\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 * as PropTypes from 'prop-types';\nimport { classNames } from '@progress/kendo-react-common';\nimport { cloneDate, getDate, isEqualDate } from '@progress/kendo-date-math';\nimport { registerForIntl, provideIntlService } from '@progress/kendo-react-intl';\nimport { Virtualization } from '../../virtualization/Virtualization';\nimport { View } from './View';\nimport { Header } from './Header';\nimport { dateInRange, getToday, isInRange, shiftWeekNames } from '../../utils';\nimport { CalendarViewEnum } from '../models';\nimport { TodayCommand } from './TodayCommand';\nvar VIEWS_COUNT = 5;\n/**\n * @hidden\n */\nvar ViewList = /** @class */ (function (_super) {\n __extends(ViewList, _super);\n function ViewList(props) {\n var _this = _super.call(this, props) || this;\n _this.isActive = false;\n _this.animateToIndex = true;\n _this.shouldScroll = false;\n _this.focusActiveDate = function () {\n if (!_this._element) {\n return;\n }\n var focusedCell = _this._element.querySelector('td.k-state-focused');\n var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');\n if (focusedCell && focusedCell[0]) {\n focusedCell[0].classList.remove('k-state-focused');\n }\n if (nextActiveCell) {\n nextActiveCell.classList.add('k-state-focused');\n }\n _this.isActive = true;\n };\n _this.blurActiveDate = function () {\n if (!_this._element) {\n return;\n }\n var focusedCell = _this._element.querySelector('td.k-state-focused');\n if (focusedCell) {\n focusedCell.classList.remove('k-state-focused');\n }\n _this.isActive = false;\n };\n _this.handleVirtualizationMount = function (virtualization) {\n _this.virtualization = virtualization;\n if (_this.virtualization && _this.table) {\n _this.table.style.transform = \"translateY(\" + _this.viewOffset + \"px)\";\n var viewDate = dateInRange(_this.props.focusedDate, _this.props.min, _this.props.max);\n var indexToScroll = _this.props.service.skip(viewDate, _this.props.min);\n _this.virtualization.scrollToIndex(indexToScroll);\n }\n };\n _this.buildMonthView = function (cols, weekNames) {\n return (React.createElement(\"table\", { key: \"calendar-view-list-weekdays\", className: \"k-calendar-table k-calendar-weekdays\" },\n React.createElement(\"colgroup\", null, cols.map(function (_, idx) { return (React.createElement(\"col\", { key: idx })); })),\n React.createElement(\"thead\", { className: \"k-calendar-thead\" },\n React.createElement(\"tr\", { className: \"k-calendar-tr\" }, weekNames.map(function (name, idx) { return (React.createElement(\"th\", { key: idx, className: \"k-calendar-th\" }, name)); })))));\n };\n _this.buildDates = function (cols, dates) {\n var cellUID = _this.props.cellUID;\n return (React.createElement(\"table\", { className: \"k-calendar-table\", ref: function (table) { return _this.table = table; } },\n React.createElement(\"colgroup\", null, cols.map(function (_, idx) { return (React.createElement(\"col\", { key: idx })); })),\n dates.map(function (date) { return (React.createElement(View, { ref: function (el) { if (!_this.calendarView) {\n _this.calendarView = el;\n } }, key: date.getTime(), activeView: _this.props.activeView, viewDate: date, min: _this.props.min, max: _this.props.max, cellUID: cellUID, focusedDate: _this.props.focusedDate, cell: _this.props.cell, selectedDate: _this.props.value, showWeekNumbers: _this.weekNumber, onChange: _this.handleDateChange, bus: _this.props.bus, service: _this.props.service, weekCell: _this.props.weekCell })); })));\n };\n _this.calculateHeights = function () {\n if (!_this.props.dom) {\n return;\n }\n var scrollableHeight = _this.props.activeView === CalendarViewEnum.month ?\n _this.props.dom.scrollableContentHeight :\n _this.props.dom.scrollableYearContentHeight;\n _this.bottomOffset = scrollableHeight - _this.props.dom.viewHeight(_this.props.activeView);\n _this.viewOffset = -1 * _this.props.dom.headerHeight;\n _this.viewHeight = _this.props.dom.viewHeight(_this.props.activeView) || 1;\n };\n _this.getTake = function (skip, total) {\n return Math.min(total - skip, _this.take);\n };\n _this.handleScrollAction = function (_a) {\n var index = _a.index, scrollAction = _a.scrollAction, pageAction = _a.pageAction;\n var skip = pageAction ? pageAction.skip : _this.state.skip;\n if (_this.state.index !== index || _this.state.skip !== skip) {\n _this.setState({ index: index, skip: skip });\n }\n if (_this.table && scrollAction) {\n var translate = \"translateY(\" + scrollAction.offset + \"px)\";\n _this.table.style.transform = translate;\n }\n };\n _this.handleTodayClick = function (event) {\n _this.shouldScroll = true;\n _this.handleDateChange.call(undefined, event, true);\n };\n _this.handleDateChange = function (event, isTodayClick) {\n if (isTodayClick === void 0) { isTodayClick = false; }\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: cloneDate(event.value),\n target: _this,\n isTodayClick: isTodayClick\n };\n onChange.call(undefined, args);\n }\n };\n _this.lastView = _this.props.activeView;\n _this.lastFocus = _this.props.focusedDate;\n _this.state = {\n skip: _this.props.service.skip(_this.props.focusedDate, _this.props.min),\n index: _this.props.service.skip(_this.props.focusedDate, _this.props.min)\n };\n return _this;\n }\n Object.defineProperty(ViewList.prototype, \"element\", {\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ViewList.prototype, \"weekNames\", {\n get: function () {\n this.intl = provideIntlService(this);\n var weekNames = shiftWeekNames(this.intl.dateFormatNames({ nameType: 'short', type: 'days' }), this.intl.firstDay());\n return this.weekNumber ? [''].concat(weekNames) : weekNames;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ViewList.prototype, \"weekNumber\", {\n get: function () {\n return Boolean(this.props.showWeekNumbers && this.props.activeView === CalendarViewEnum.month);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ViewList.prototype, \"take\", {\n get: function () {\n return this.props.take !== undefined ? this.props.take : ViewList.defaultProps.take;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ViewList.prototype, \"animate\", {\n get: function () {\n return Boolean(this.props.smoothScroll && this.animateToIndex);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ViewList.prototype, \"todayIsInRange\", {\n get: function () {\n return isInRange(getToday(), getDate(this.props.min), getDate(this.props.max));\n },\n enumerable: true,\n configurable: true\n });\n ViewList.prototype.componentDidUpdate = function (_prevProps, _prevState) {\n this.shouldScroll = false;\n if (this.indexToScroll !== undefined && this.virtualization) {\n this.virtualization[this.animate ? 'animateToIndex' : 'scrollToIndex'](this.indexToScroll);\n }\n if (this.isActive) {\n this.focusActiveDate();\n }\n this.lastView = this.props.activeView;\n // this.lastFocus = this.props.focusedDate;\n this.indexToScroll = undefined;\n };\n ViewList.prototype.render = function () {\n var _this = this;\n this.calculateHeights();\n var didViewChange = this.lastView !== this.props.activeView;\n var focusedDate = dateInRange(this.props.focusedDate, this.props.min, this.props.max);\n var skip = !didViewChange ? this.state.skip : this.props.service.skip(focusedDate, this.props.min);\n var total = this.props.service.total(this.props.min, this.props.max);\n var take = this.getTake(skip, total);\n var viewDate = this.props.service.addToDate(this.props.min, skip);\n var activeDate = this.props.service.addToDate(this.props.min, this.state.index);\n var cols = new Array(this.props.service.rowLength(this.weekNumber)).fill('');\n var didViewChanged = this.props.activeView !== this.lastView;\n this.animateToIndex = !didViewChanged;\n if (didViewChanged\n || !isEqualDate(this.lastFocus, focusedDate)\n || this.shouldScroll\n || (!this.props.shouldScroll || this.props.shouldScroll())) {\n this.indexToScroll = this.props.service.skip(focusedDate, this.props.min);\n }\n this.lastFocus = focusedDate;\n var rootClassNames = classNames('k-calendar-view k-vstack', {\n 'k-calendar-monthview': this.props.activeView === CalendarViewEnum.month,\n 'k-calendar-yearview': this.props.activeView === CalendarViewEnum.year,\n 'k-calendar-decadeview': this.props.activeView === CalendarViewEnum.decade,\n 'k-calendar-centuryview': this.props.activeView === CalendarViewEnum.century\n });\n var dates = this.buildDates(cols, this.props.service.datesList(viewDate, take));\n var viewListBody = (React.createElement(React.Fragment, null,\n React.createElement(Header, { key: \"calendar-view-list-header\", currentDate: activeDate, min: this.props.min, max: this.props.max, activeView: this.props.activeView, bus: this.props.bus, service: this.props.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,\n React.createElement(TodayCommand, { min: this.props.min, max: this.props.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }))) }),\n this.props.activeView === CalendarViewEnum.month && this.buildMonthView(cols, this.weekNames),\n React.createElement(Virtualization, { key: \"calendar-view-list-content\", skip: skip, take: this.take, total: total, itemHeight: this.viewHeight, topOffset: this.viewOffset, bottomOffset: this.bottomOffset, scrollOffsetSize: this.viewOffset, maxScrollDifference: this.viewHeight, onScroll: this.props.onScroll, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount, children: dates })));\n return (React.createElement(\"div\", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dom.didCalculate ? viewListBody : null));\n };\n ViewList.propTypes = {\n activeView: PropTypes.number.isRequired,\n bottomOffset: PropTypes.number,\n cellUID: PropTypes.string.isRequired,\n focusedDate: PropTypes.instanceOf(Date).isRequired,\n max: PropTypes.instanceOf(Date).isRequired,\n min: PropTypes.instanceOf(Date).isRequired,\n onChange: PropTypes.func,\n showWeekNumbers: PropTypes.bool,\n smoothScroll: PropTypes.bool,\n take: PropTypes.number,\n value: PropTypes.instanceOf(Date),\n viewHeight: PropTypes.number,\n viewOffset: PropTypes.number\n };\n ViewList.defaultProps = {\n take: VIEWS_COUNT,\n showWeekNumbers: false,\n smoothScroll: true\n };\n return ViewList;\n}(React.Component));\nexport { ViewList };\nregisterForIntl(ViewList);\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 { classNames } from '@progress/kendo-react-common';\n/**\n * The `CalendarNavigationItem` component is internally used for rendering the items in the side navigation of the Calendar. Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem) ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).\n */\nvar CalendarNavigationItem = /** @class */ (function (_super) {\n __extends(CalendarNavigationItem, _super);\n function CalendarNavigationItem() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.handleClick = function (event) {\n var _a = _this.props, onClick = _a.onClick, value = _a.value;\n if (onClick) {\n onClick.call(undefined, value, event);\n }\n };\n return _this;\n }\n /**\n * @return\n * Returns a `` element with a `` inside. The text inside represents the [`value`]({% slug api_dateinputs_calendarnavigationitemprops %}#toc-value) of the `navigationItem`.\n */\n CalendarNavigationItem.prototype.render = function () {\n var _a = this.props, isRangeStart = _a.isRangeStart, value = _a.value, text = _a.text, other = __rest(_a, [\"isRangeStart\", \"value\", \"text\"]);\n return (React.createElement(\"li\", __assign({}, other, { onClick: this.handleClick }),\n React.createElement(\"span\", { className: classNames({ 'k-calendar-navigation-marker': isRangeStart }) }, this.props.children)));\n };\n return CalendarNavigationItem;\n}(React.Component));\nexport { CalendarNavigationItem };\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 { cloneDate, isEqual } from '@progress/kendo-date-math';\nimport { CalendarNavigationItem } from './CalendarNavigationItem';\nimport { dateInRange } from '../../utils';\nimport { Virtualization } from '../../virtualization/Virtualization';\nvar ITEMS_COUNT = 30;\n/**\n * @hidden\n */\nvar Navigation = /** @class */ (function (_super) {\n __extends(Navigation, _super);\n function Navigation(props) {\n var _this = _super.call(this, props) || this;\n _this.topOffset = 0;\n _this.handleVirtualizationMount = function (virtualization) {\n _this.virtualization = virtualization;\n if (_this.virtualization && _this.list) {\n _this.list.style.transform = \"translateY(\" + _this.topOffset + \"px)\";\n var viewDate = dateInRange(_this.props.focusedDate, _this.props.min, _this.props.max);\n var indexToScroll = _this.props.service.skip(viewDate, _this.props.min);\n _this.virtualization.scrollToIndex(indexToScroll);\n }\n };\n _this.buildNavigationItem = function (date) {\n var text = _this.props.service.navigationTitle(date);\n var isRangeStart = _this.props.service.isRangeStart(date);\n var uniqueID = \"kendo-react-calendar-nav-item-\" + date.getTime();\n var navigationItemProps = {\n text: text,\n value: date,\n isRangeStart: isRangeStart,\n view: _this.props.activeView,\n onClick: _this.handleDateChange\n };\n return _this.props.navigationItem\n ? (React.createElement(_this.props.navigationItem, __assign({}, navigationItemProps, { key: uniqueID }), text))\n : (React.createElement(CalendarNavigationItem, __assign({}, navigationItemProps, { key: uniqueID }), text));\n };\n _this.calculateHeights = function () {\n var calendarHeight = _this.props.dom.calendarHeight;\n _this.itemHeight = _this.props.dom.navigationItemHeight || 1;\n _this.maxViewHeight = _this.props.dom.monthViewHeight;\n _this.topOffset = (calendarHeight - _this.itemHeight) / 2;\n _this.bottomOffset = calendarHeight - _this.itemHeight;\n };\n _this.handleDateChange = function (value, event) {\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n value: cloneDate(value),\n target: _this,\n nativeEvent: event && event.nativeEvent,\n syntheticEvent: event\n };\n onChange.call(undefined, args);\n }\n };\n _this.handleScrollAction = function (_a) {\n var scrollAction = _a.scrollAction, pageAction = _a.pageAction;\n var skip = pageAction ? pageAction.skip : _this.state.skip;\n if (_this.state.skip !== skip) {\n _this.setState({ skip: skip });\n }\n if (_this.list && scrollAction) {\n var translate = \"translateY(\" + scrollAction.offset + \"px)\";\n _this.list.style.transform = translate;\n }\n };\n _this.lastView = _this.props.activeView;\n _this.lastFocus = _this.props.focusedDate;\n var skip = _this.props.service.skip(_this.props.focusedDate, _this.props.min);\n var total = _this.props.service.total(_this.props.min, _this.props.max);\n _this.state = {\n skip: (skip - _this.getTake(skip, total) > 0) ? skip : 0\n };\n return _this;\n }\n Object.defineProperty(Navigation.prototype, \"take\", {\n get: function () {\n return this.props.take !== undefined\n ? this.props.take\n : Navigation.defaultProps.take;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n Navigation.prototype.componentDidUpdate = function (_prevProps, _prevState) {\n if (this.indexToScroll !== undefined && this.virtualization) {\n this.virtualization.scrollToIndex(this.indexToScroll);\n }\n this.lastView = this.props.activeView;\n this.lastFocus = this.props.focusedDate;\n this.indexToScroll = undefined;\n };\n Navigation.prototype.render = function () {\n var _this = this;\n this.calculateHeights();\n var didViewChange = this.lastView !== this.props.activeView;\n var focusedDate = dateInRange(this.props.focusedDate, this.props.min, this.props.max);\n var skip = !didViewChange ? this.state.skip : this.props.service.skip(focusedDate, this.props.min);\n var total = this.props.service.total(this.props.min, this.props.max);\n var take = this.getTake(skip, total);\n var viewDate = this.props.service.addToDate(this.props.min, skip);\n var dates = this.props.service.datesList(viewDate, take);\n if (this.props.activeView !== this.lastView\n || !isEqual(focusedDate, this.lastFocus)) {\n this.indexToScroll = this.props.service.skip(focusedDate, this.props.min);\n }\n var navigationBody = (React.createElement(Virtualization, { skip: skip, take: this.take, total: total, itemHeight: this.itemHeight, topOffset: this.topOffset, bottomOffset: this.bottomOffset, onScroll: this.props.onScroll, maxScrollDifference: this.maxViewHeight, onScrollAction: this.handleScrollAction, onMount: this.handleVirtualizationMount },\n React.createElement(\"ul\", { ref: function (el) { _this.list = el; }, className: \"k-reset\" }, dates.map(function (date) { return (_this.buildNavigationItem(date)); }))));\n return (React.createElement(\"div\", { className: \"k-calendar-navigation\" },\n React.createElement(\"span\", { className: \"k-calendar-navigation-highlight\" }),\n this.props.dom.didCalculate ? navigationBody : null));\n };\n Navigation.prototype.getTake = function (skip, total) {\n return Math.min(total - skip, this.take);\n };\n Navigation.propTypes = {\n activeView: PropTypes.number.isRequired,\n focusedDate: PropTypes.instanceOf(Date).isRequired,\n max: PropTypes.instanceOf(Date).isRequired,\n min: PropTypes.instanceOf(Date).isRequired,\n onChange: PropTypes.func,\n take: PropTypes.number\n };\n Navigation.defaultProps = {\n take: ITEMS_COUNT\n };\n return Navigation;\n}(React.Component));\nexport { Navigation };\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, guid, Keys } from '@progress/kendo-react-common';\nimport { cloneDate, getDate, isEqualDate } from '@progress/kendo-date-math';\nimport { provideIntlService, registerForIntl } from '@progress/kendo-react-intl';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../../package-metadata';\nimport { ViewList } from './ViewList';\nimport { Navigation } from './Navigation';\nimport { MIN_DATE, MAX_DATE } from '../../defaults';\nimport { CalendarViewEnum } from '../models';\nimport { getToday, dateInRange, isInRange, viewInRange } from '../../utils';\nimport { BusViewService, DOMService, ScrollSyncService, NavigationService } from '../services';\nvar virtualizationProp = function (x) { return x ? x.virtualization : null; };\nvar calculateValue = function (min, max, stateValue, propValue) {\n if (min === void 0) { min = Calendar.defaultProps.min; }\n if (max === void 0) { max = Calendar.defaultProps.max; }\n return propValue !== undefined\n ? propValue !== null && isInRange(getDate(propValue), min, max)\n ? propValue\n : null\n : stateValue !== null && isInRange(getDate(stateValue), min, max)\n ? stateValue\n : null;\n};\nvar Calendar = /** @class */ (function (_super) {\n __extends(Calendar, _super);\n function Calendar(props) {\n var _this = _super.call(this, props) || this;\n _this.cellUID = guid();\n _this.id = guid();\n _this.isActive = false;\n _this.didNavigationChange = false;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this._element) {\n _this._element.focus();\n }\n };\n _this.shouldScroll = function () { return _this.didNavigationChange; };\n _this.handleScroll = function (event) {\n if (!_this.scrollSyncService) {\n return;\n }\n _this.scrollSyncService.sync(virtualizationProp(_this.Navigation), virtualizationProp(_this.calendarViewList), event);\n };\n _this.handleNavigationChange = function (event) {\n if (_this.props.disabled) {\n return;\n }\n _this.didNavigationChange = true;\n var focusedDate = cloneDate(event.value);\n _this.setState({ focusedDate: focusedDate });\n };\n _this.handleViewChange = function (_a) {\n var view = _a.view;\n _this.scrollSyncService.configure(view);\n _this.setState({ activeView: view });\n };\n _this.handleDateChange = function (event) {\n var value = cloneDate(event.value);\n var focusedDate = cloneDate(event.value);\n var canNavigateDown = _this.bus.canMoveDown(_this.state.activeView);\n if (_this.props.disabled) {\n return;\n }\n if (canNavigateDown) {\n if (event.isTodayClick) {\n _this.bus.moveToBottom(_this.state.activeView);\n }\n else {\n _this.bus.moveDown(_this.state.activeView, event.syntheticEvent);\n _this.setState({ focusedDate: focusedDate });\n return;\n }\n }\n _this.setState({ value: value, focusedDate: focusedDate });\n _this.valueDuringOnChange = value;\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: value,\n target: _this\n };\n onChange.call(undefined, args);\n }\n _this.valueDuringOnChange = undefined;\n };\n _this.handleFocus = function (event) {\n _this.isActive = true;\n if (!_this.calendarViewList) {\n return;\n }\n _this.calendarViewList.focusActiveDate();\n var onFocus = _this.props.onFocus;\n if (onFocus) {\n onFocus.call(undefined, event);\n }\n };\n _this.handleBlur = function (event) {\n _this.isActive = false;\n if (!_this.calendarViewList) {\n return;\n }\n _this.calendarViewList.blurActiveDate();\n var onBlur = _this.props.onBlur;\n if (onBlur) {\n onBlur.call(undefined, event);\n }\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode;\n if (keyCode === Keys.enter) {\n if (_this.value !== null\n && isEqualDate(_this.focusedDate, _this.value)) {\n var viewDate = dateInRange(_this.focusedDate, _this.min, _this.max);\n virtualizationProp(_this.calendarViewList).scrollToIndex(_this.service.skip(viewDate, _this.min));\n }\n var args = {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: _this.focusedDate,\n target: _this\n };\n _this.handleDateChange.call(undefined, args);\n }\n else {\n var candidate = dateInRange(_this.navigation.move(_this.focusedDate, _this.navigation.action(event), _this.state.activeView, _this.service, event), _this.min, _this.max);\n if (isEqualDate(_this.focusedDate, candidate)) {\n return;\n }\n _this.setState({ focusedDate: candidate });\n }\n event.preventDefault();\n };\n _this.handleMouseDown = function (event) {\n event.preventDefault();\n };\n _this.handleClick = function (_) {\n if (_this._element) {\n _this._element.focus({ preventScroll: true });\n }\n };\n validatePackage(packageMetadata);\n var value = calculateValue(_this.min, _this.max, _this.props.defaultValue || Calendar.defaultProps.defaultValue, _this.props.value);\n _this.state = {\n value: value,\n activeView: viewInRange(CalendarViewEnum[props.defaultActiveView], _this.bottomView, _this.topView),\n focusedDate: dateInRange(props.focusedDate\n || value\n || getToday(), _this.min, _this.max)\n };\n _this.dom = new DOMService();\n _this.bus = new BusViewService(_this.handleViewChange);\n _this.navigation = new NavigationService(_this.bus);\n _this.oldValue = value;\n return _this;\n }\n Object.defineProperty(Calendar.prototype, \"element\", {\n /**\n * Gets the wrapping element of the Calendar.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Calendar.prototype, \"value\", {\n /**\n * Gets the value of the Calendar.\n */\n get: function () {\n return this.valueDuringOnChange !== undefined\n ? this.valueDuringOnChange\n : this.props.value !== undefined\n ? this.props.value\n : this.state.value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Calendar.prototype, \"min\", {\n get: function () {\n return getDate(this.props.min !== undefined\n ? this.props.min\n : Calendar.defaultProps.min);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Calendar.prototype, \"max\", {\n get: function () {\n return getDate(this.props.max !== undefined\n ? this.props.max\n : Calendar.defaultProps.max);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Calendar.prototype, \"bottomView\", {\n get: function () {\n return CalendarViewEnum[this.props.bottomView !== undefined\n ? this.props.bottomView\n : Calendar.defaultProps.bottomView];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Calendar.prototype, \"topView\", {\n get: function () {\n return CalendarViewEnum[this.props.topView !== undefined\n ? this.props.topView\n : Calendar.defaultProps.topView];\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n Calendar.prototype.componentDidMount = function () {\n var _this = this;\n // Async calculation of height to avoid animation cancellation\n Promise.resolve().then(function () {\n if (!_this._element) {\n return;\n }\n _this.dom.calculateHeights(_this._element);\n _this.scrollSyncService = new ScrollSyncService(_this.dom);\n _this.scrollSyncService.configure(_this.state.activeView);\n _this.forceUpdate();\n });\n };\n /**\n * @hidden\n */\n Calendar.prototype.componentDidUpdate = function (_, prevState) {\n if (prevState.activeView !== this.state.activeView) {\n this.scrollSyncService.configure(this.state.activeView);\n }\n if (this.calendarViewList) {\n (this.isActive ? this.calendarViewList.focusActiveDate : this.calendarViewList.blurActiveDate)();\n }\n this.didNavigationChange = false;\n this.oldValue = this.value;\n };\n /**\n * @hidden\n */\n Calendar.prototype.render = function () {\n var _this = this;\n if (this.props._ref) {\n this.props._ref(this);\n }\n var didValueChange = this.value !== null && this.oldValue !== null\n ? !isEqualDate(this.value, this.oldValue)\n : this.value !== this.oldValue;\n var activeView = viewInRange(this.state.activeView, CalendarViewEnum[this.props.bottomView !== undefined\n ? this.props.bottomView\n : Calendar.defaultProps.bottomView], CalendarViewEnum[this.props.topView !== undefined\n ? this.props.topView\n : Calendar.defaultProps.topView]);\n var value = calculateValue(this.min, this.max, this.value, this.value);\n var sanitizedValue = value ? getDate(value) : null;\n this.focusedDate = getDate(dateInRange(didValueChange && value !== null\n ? value\n : this.state.focusedDate, this.min, this.max));\n this.intl = provideIntlService(this);\n this.bus.configure(this.bottomView, this.topView);\n this.service = this.bus.service(activeView, this.intl);\n var rootClassNames = classNames('k-widget k-calendar k-calendar-infinite', {\n 'k-state-disabled': this.props.disabled,\n 'k-week-number': this.props.weekNumber\n }, this.props.className);\n var aria = {\n 'aria-disabled': this.props.disabled,\n 'aria-activedescendant': this.cellUID + this.focusedDate.getTime()\n };\n var calendarBody = [this.props.navigation && (React.createElement(Navigation, { key: 0, ref: function (el) { _this.Navigation = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, onScroll: this.handleScroll, onChange: this.handleNavigationChange, service: this.service, dom: this.dom, navigationItem: this.props.navigationItem })), (React.createElement(ViewList, { key: 1, ref: function (el) { _this.calendarViewList = el; }, activeView: this.state.activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, shouldScroll: this.shouldScroll, onScroll: this.handleScroll, service: this.service, cell: this.props.cell, weekCell: this.props.weekCell, dom: this.dom, smoothScroll: this.props.smoothScroll, showWeekNumbers: this.props.weekNumber, onChange: this.handleDateChange, value: sanitizedValue, cellUID: this.cellUID, headerTitle: this.props.headerTitle }))];\n return (React.createElement(\"div\", __assign({}, aria, { ref: function (el) { _this._element = el; }, className: rootClassNames, id: this.props.id || this.id, \"aria-labelledby\": this.props.ariaLabelledBy, \"aria-describedby\": this.props.ariaDescribedBy, role: \"grid\", tabIndex: !this.props.disabled ? this.props.tabIndex || 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, onClick: this.handleClick }), calendarBody));\n };\n /**\n * @hidden\n */\n Calendar.propTypes = {\n className: PropTypes.string,\n defaultActiveView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),\n defaultValue: PropTypes.instanceOf(Date),\n disabled: PropTypes.bool,\n focusedDate: PropTypes.instanceOf(Date),\n id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n navigation: PropTypes.bool,\n smoothScroll: PropTypes.bool,\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n tabIndex: PropTypes.number,\n value: PropTypes.instanceOf(Date),\n weekNumber: PropTypes.bool,\n topView: function (props, propName, componentName) {\n var prop = props[propName];\n var bottomView = props.bottomView;\n if (prop && bottomView && CalendarViewEnum[prop] < CalendarViewEnum[bottomView]) {\n return new Error(\"Invalid prop + \" + propName + \" suplied to \" + componentName + \".\\n \" + propName + \" can not be smaller than bottomView.\\n \");\n }\n return null;\n },\n bottomView: function (props, propName, componentName) {\n var prop = props[propName];\n var topView = props.topView;\n if (prop && topView && CalendarViewEnum[prop] > CalendarViewEnum[topView]) {\n return new Error(\"Invalid prop + \" + propName + \" suplied to \" + componentName + \".\\n \" + propName + \" can not be bigger than topView.\\n \");\n }\n return null;\n }\n };\n /**\n * @hidden\n */\n Calendar.defaultProps = {\n disabled: false,\n min: MIN_DATE,\n max: MAX_DATE,\n navigation: true,\n defaultActiveView: 'month',\n defaultValue: null,\n smoothScroll: true,\n topView: 'century',\n bottomView: 'month'\n };\n return Calendar;\n}(React.Component));\nexport { Calendar };\nregisterForIntl(Calendar);\n","/**\n * @hidden\n */\nvar Mask = /** @class */ (function () {\n function Mask() {\n this.symbols = '';\n }\n return Mask;\n}());\nexport { Mask };\n","var _a;\n/**\n * @hidden\n */\nexport var labelsOptional = 'labels.optional';\n/**\n * @hidden\n */\nexport var messages = (_a = {},\n _a[labelsOptional] = '(Optional)',\n _a);\n","/**\n * @hidden\n */\nexport var defaultFormat = 'd';\n/**\n * @hidden\n */\nexport var defaultFormatPlaceholder = 'wide';\n/**\n * @hidden\n */\nexport var padZero = function (length) { return new Array(Math.max(length, 0)).fill('0').join(''); };\n/**\n * @hidden\n */\nexport var approximateStringMatching = function (oldTextOrigin, oldFormat, newTextOrigin, selectionStart) {\n /*\n Remove the right part of the cursor.\n oldFormat = oldFormat.substring(0, caret + oldText.length - newText.length);\n */\n var oldTextSeparator = oldTextOrigin[selectionStart + oldTextOrigin.length - newTextOrigin.length];\n var oldText = oldTextOrigin.substring(0, selectionStart + oldTextOrigin.length - newTextOrigin.length);\n var newText = newTextOrigin.substring(0, selectionStart);\n var diff = [];\n /* Handle the typing of a single character over the same selection. */\n if (oldText === newText && selectionStart > 0) {\n diff.push([oldFormat[selectionStart - 1], newText[selectionStart - 1]]);\n return diff;\n }\n if (oldText.indexOf(newText) === 0 &&\n (newText.length === 0 || oldFormat[newText.length - 1] !== oldFormat[newText.length])) {\n /* Handle Delete/Backspace. */\n var deletedSymbol = '';\n /*\n The whole text is replaced by the same character.\n A nasty patch is required to keep the selection in the first segment.\n */\n if (newText.length === 1) {\n diff.push([oldFormat[0], newText[0]]);\n }\n for (var i = newText.length; i < oldText.length; i++) {\n if (oldFormat[i] !== deletedSymbol && oldFormat[i] !== '_') {\n deletedSymbol = oldFormat[i];\n diff.push([deletedSymbol, '']);\n }\n }\n return diff;\n }\n /*\n Handle the insertion of the text (the new text is longer than the previous one).\n Handle the typing over a literal as well.\n */\n if (newText.indexOf(oldText) === 0 || oldFormat[selectionStart - 1] === '_') {\n var symbol = oldFormat[0];\n for (var i = Math.max(0, oldText.length - 1); i < oldFormat.length; i++) {\n if (oldFormat[i] !== '_') {\n symbol = oldFormat[i];\n break;\n }\n }\n return [[symbol, newText[selectionStart - 1]]];\n }\n /* Handle the entering of a space or a separator for navigating to the next item. */\n if (newText[newText.length - 1] === ' ' || newText[newText.length - 1] === oldTextSeparator) {\n return [[oldFormat[selectionStart - 1], '_']];\n }\n /* Handle typing over a correctly selected part. */\n return [[oldFormat[selectionStart - 1], newText[selectionStart - 1]]];\n};\n/**\n * @hidden\n */\nexport var dateSymbolMap = function (map, part) { map[part.pattern[0]] = part.type; return map; };\n/**\n * @hidden\n */\nexport var isInRange = function (candidate, min, max) { return (candidate === null || !((min && min > candidate) || (max && max < candidate))); };\n/**\n * @hidden\n */\nexport var invalidClasses = ['k-state-invalid'];\n/** @hidden */\nexport var wrapperClasses = ['k-widget', 'k-dateinput'];\n","import { addMonths, cloneDate, createDate, isEqual, getDate, lastDayOfMonth } from '@progress/kendo-date-math';\nimport { Mask } from './mask';\nimport { dateSymbolMap } from './../utils';\n/**\n * @hidden\n */\nvar KendoDate = /** @class */ (function () {\n function KendoDate(intlProvider, formatPlaceholder, format) {\n this.year = true;\n this.month = true;\n this.date = true;\n this.hours = true;\n this.minutes = true;\n this.seconds = true;\n this.milliseconds = true;\n this.leadingZero = null;\n this.typedMonthPart = '';\n this.knownParts = 'adHhmMsEy';\n this.symbols = {\n 'E': 'E',\n 'H': 'H',\n 'M': 'M',\n 'a': 'a',\n 'd': 'd',\n 'h': 'h',\n 'm': 'm',\n 's': 's',\n 'y': 'y'\n };\n this._value = getDate(new Date());\n this.intlProvider = intlProvider;\n this.formatPlaceholder = formatPlaceholder;\n this.format = format;\n this.monthNames = this.allFormatedMonths();\n }\n Object.defineProperty(KendoDate.prototype, \"intl\", {\n get: function () {\n return this.intlProvider();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(KendoDate.prototype, \"value\", {\n get: function () {\n return this._value;\n },\n enumerable: true,\n configurable: true\n });\n KendoDate.prototype.setValue = function (value) {\n if (!value) {\n this._value = getDate(new Date());\n this.modifyExisting(false);\n }\n else if (!isEqual(value, this._value)) {\n this._value = cloneDate(value);\n this.modifyExisting(true);\n }\n };\n KendoDate.prototype.hasValue = function () {\n var _this = this;\n var pred = function (a, p) { return a || p.type !== 'literal' && p.type !== 'dayperiod' && _this.getExisting(p.pattern[0]); };\n return this.intl.splitDateFormat(this.format).reduce(pred, false);\n };\n KendoDate.prototype.getDateObject = function () {\n for (var i = 0; i < this.knownParts.length; i++) {\n if (!this.getExisting(this.knownParts[i])) {\n return null;\n }\n }\n return cloneDate(this.value);\n };\n KendoDate.prototype.getTextAndFormat = function () {\n return this.merge(this.intl.formatDate(this.value, this.format), this.dateFormatString(this.value, this.format));\n };\n KendoDate.prototype.modifyExisting = function (value) {\n var sampleFormat = this.dateFormatString(this.value, this.format).symbols;\n for (var i = 0; i < sampleFormat.length; i++) {\n this.setExisting(sampleFormat[i], value);\n }\n };\n KendoDate.prototype.getExisting = function (symbol) {\n switch (symbol) {\n case 'y': return this.year;\n case 'M':\n case 'L': return this.month;\n case 'd': return this.date;\n case 'E': return this.date && this.month && this.year;\n case 'h':\n case 'H': return this.hours;\n case 'm': return this.minutes;\n case 's': return this.seconds;\n default: return true;\n }\n };\n KendoDate.prototype.setExisting = function (symbol, value) {\n switch (symbol) {\n case 'y':\n // allow 2/29 dates\n this.year = value;\n if (value === false) {\n this._value.setFullYear(2000);\n }\n break;\n case 'M':\n // make sure you can type 31 in the day part\n this.month = value;\n if (value === false) {\n this._value.setMonth(0);\n }\n break;\n case 'd':\n this.date = value;\n break;\n case 'h':\n case 'H':\n this.hours = value;\n break;\n case 'm':\n this.minutes = value;\n break;\n case 's':\n this.seconds = value;\n break;\n default: return;\n }\n };\n KendoDate.prototype.modifyPart = function (symbol, offset) {\n var newValue = cloneDate(this.value);\n switch (symbol) {\n case 'y':\n newValue.setFullYear(newValue.getFullYear() + offset);\n break;\n case 'M':\n newValue = addMonths(this.value, offset);\n break;\n case 'd':\n case 'E':\n newValue.setDate(newValue.getDate() + offset);\n break;\n case 'h':\n case 'H':\n newValue.setHours(newValue.getHours() + offset);\n break;\n case 'm':\n newValue.setMinutes(newValue.getMinutes() + offset);\n break;\n case 's':\n newValue.setSeconds(newValue.getSeconds() + offset);\n break;\n case 'a':\n newValue.setHours(newValue.getHours() + (12 * offset));\n break;\n default: break;\n }\n this.setExisting(symbol, true);\n this._value = newValue;\n };\n KendoDate.prototype.parsePart = function (symbol, currentChar) {\n var _a;\n this.resetLeadingZero();\n if (!currentChar) {\n this.setExisting(symbol, false);\n return { value: null };\n }\n var baseDate = this.intl.formatDate(this.value, this.format);\n var dateParts = this.dateFormatString(this.value, this.format);\n var baseFormat = dateParts.symbols;\n var replaced = false;\n var prefix = '';\n var current = '';\n var suffix = '';\n for (var i = 0; i < baseDate.length; i++) {\n if (baseFormat[i] === symbol) {\n current += this.getExisting(symbol) ? baseDate[i] : '0';\n replaced = true;\n }\n else if (!replaced) {\n prefix += baseDate[i];\n }\n else {\n suffix += baseDate[i];\n }\n }\n var parsedDate = null;\n var month = this.matchMonth(currentChar);\n while (current.length > 0 && current.charAt(0) === '0') {\n current = current.slice(1);\n }\n if (current.length >= 4) {\n current = '';\n }\n for (var i = 0; i < 2; i++) {\n var middle = current + currentChar;\n var middleNumber = parseInt(middle, 10);\n parsedDate = this.intl.parseDate(prefix + middle + suffix, this.format);\n if (!parsedDate && !isNaN(middleNumber) && !isNaN(parseInt(currentChar, 10))) {\n if (symbol === 'M' && !month) {\n var monthNumber = middleNumber - 1;\n if (monthNumber > -1 && monthNumber < 12) {\n parsedDate = cloneDate(this.value);\n parsedDate.setMonth(monthNumber);\n if (parsedDate.getMonth() !== monthNumber) {\n parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));\n }\n }\n }\n if (symbol === 'y') {\n parsedDate = createDate(parseInt(middle, 10), this.month ? this.value.getMonth() : 0, this.date ? this.value.getDate() : 1, this.hours ? this.value.getHours() : 0, this.minutes ? this.value.getMinutes() : 0, this.seconds ? this.value.getSeconds() : 0, this.milliseconds ? this.value.getMilliseconds() : 0);\n if (this.date && parsedDate.getDate() !== this.value.getDate()) {\n parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));\n }\n }\n }\n if (parsedDate) {\n this._value = parsedDate;\n this.setExisting(symbol, true);\n return { value: this.value };\n }\n current = '';\n }\n if (month) {\n parsedDate = this.intl.parseDate(prefix + month + suffix, this.format);\n if (parsedDate) {\n this._value = parsedDate;\n this.setExisting(symbol, true);\n return { value: this.value };\n }\n }\n if (currentChar === '0') {\n this.leadingZero = !this.isAbbrMonth(dateParts.partMap, symbol) ? (_a = {}, _a[symbol] = true, _a) : null;\n this.setExisting(symbol, false);\n }\n return { value: null };\n };\n KendoDate.prototype.symbolMap = function (symbol) {\n return this.intl.splitDateFormat(this.format).reduce(dateSymbolMap, {})[symbol];\n };\n KendoDate.prototype.resetLeadingZero = function () {\n var hasLeadingZero = this.leadingZero !== null;\n this.leadingZero = null;\n return hasLeadingZero;\n };\n KendoDate.prototype.isAbbrMonth = function (parts, symbol) {\n var pattern = this.partPattern(parts, symbol);\n return pattern.type === 'month' && pattern.names;\n };\n KendoDate.prototype.partPattern = function (parts, symbol) {\n return parts.filter(function (part) { return part.pattern.indexOf(symbol) !== -1; })[0];\n };\n KendoDate.prototype.matchMonth = function (typedChar) {\n this.typedMonthPart += typedChar.toLowerCase();\n if (this.monthNames.length === 0) {\n return '';\n }\n while (this.typedMonthPart.length > 0) {\n for (var i = 0; i < this.monthNames.length; i++) {\n if (this.monthNames[i].toLowerCase().indexOf(this.typedMonthPart) === 0) {\n return this.monthNames[i];\n }\n }\n var monthAsNum = parseInt(this.typedMonthPart, 10);\n /* ensure they exact match */\n if (monthAsNum >= 1 && monthAsNum <= 12 && monthAsNum.toString() === this.typedMonthPart) {\n return this.monthNames[monthAsNum - 1];\n }\n this.typedMonthPart = this.typedMonthPart.substring(1, this.typedMonthPart.length);\n }\n return '';\n };\n KendoDate.prototype.allFormatedMonths = function () {\n var dateFormatParts = this.intl.splitDateFormat(this.format);\n for (var i = 0; i < dateFormatParts.length; i++) {\n if (dateFormatParts[i].type === 'month' && dateFormatParts[i].names) {\n return this.intl.dateFormatNames(dateFormatParts[i].names);\n }\n }\n return [];\n };\n KendoDate.prototype.dateFormatString = function (date, format) {\n var dateFormatParts = this.intl.splitDateFormat(format);\n var parts = [];\n var partMap = [];\n for (var i = 0; i < dateFormatParts.length; i++) {\n var partLength = this.intl.formatDate(date, { pattern: dateFormatParts[i].pattern }).length;\n while (partLength > 0) {\n parts.push(this.symbols[dateFormatParts[i].pattern[0]] || '_');\n partMap.push(dateFormatParts[i]);\n partLength--;\n }\n }\n var returnValue = new Mask();\n returnValue.symbols = parts.join('');\n returnValue.partMap = partMap;\n return returnValue;\n };\n KendoDate.prototype.merge = function (text, mask) {\n // Important: right to left.\n var resultText = '';\n var resultFormat = '';\n var format = mask.symbols;\n for (var r = format.length - 1; r >= 0; r--) {\n if (this.knownParts.indexOf(format[r]) === -1 || this.getExisting(format[r])) {\n resultText = text[r] + resultText;\n resultFormat = format[r] + resultFormat;\n }\n else {\n var currentSymbol = format[r];\n while (r >= 0 && currentSymbol === format[r]) {\n r--;\n }\n r++;\n if (this.leadingZero && this.leadingZero[currentSymbol]) {\n resultText = '0' + resultText;\n }\n else {\n resultText = this.dateFieldName(mask.partMap[r]) + resultText;\n }\n while (resultFormat.length < resultText.length) {\n resultFormat = format[r] + resultFormat;\n }\n }\n }\n return { text: resultText, format: resultFormat };\n };\n KendoDate.prototype.dateFieldName = function (part) {\n var formatPlaceholder = this.formatPlaceholder || 'wide';\n if (formatPlaceholder[part.type]) {\n return formatPlaceholder[part.type];\n }\n if (formatPlaceholder === 'formatPattern') {\n return part.pattern;\n }\n return this.intl.dateFieldName(Object.assign(part, { nameType: formatPlaceholder }));\n };\n return KendoDate;\n}());\nexport { KendoDate };\n","/**\n * @hidden\n */\nexport var packageMetadata = {\n name: '@progress/kendo-react-labels',\n productName: 'KendoReact',\n productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],\n publishDate: 1635344736,\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","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { classNames } from '@progress/kendo-react-common';\nimport { labelsOptional, messages } from './messages';\nimport { useLocalization } from '@progress/kendo-react-intl';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from './package-metadata';\n/**\n * Represents the KendoReact Label component.\n *\n * @example\n * ```jsx\n * const sizes = [\"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"2X-Large\"];\n * const App = () => {\n * const ddlRef = React.useRef(null);\n * const labelId = 'ddl-sizes-label';\n * const editorId = 'ddl-sizes';\n *\n * return (\n * \n * \n * \n *
\n *
\n * );\n * };\n *\n * ReactDOM.render(, document.querySelector('my-app'));\n * ```\n */\nexport var Label = function (props) {\n validatePackage(packageMetadata);\n var id = props.id, editorId = props.editorId, editorRef = props.editorRef, editorDisabled = props.editorDisabled, children = props.children, editorValid = props.editorValid, style = props.style, className = props.className, optional = props.optional;\n var localizationService = useLocalization();\n var localizedOptional = optional ? localizationService\n .toLanguageString(labelsOptional, messages[labelsOptional]) : '';\n var optionalElement = localizedOptional && (React.createElement(\"span\", { className: 'k-label-optional' }, localizedOptional));\n var onLabelClick = React.useCallback(function (e) {\n if (editorRef && editorRef.current && !editorDisabled) {\n if (editorRef.current.focus) {\n e.preventDefault();\n editorRef.current.focus();\n }\n var editorActionElement = editorRef.current.actionElement;\n if (editorActionElement) {\n e.preventDefault();\n editorActionElement.click();\n }\n }\n }, [editorRef]);\n var labelClassName = classNames({\n 'k-label': true,\n 'k-label-empty': !children,\n 'k-text-error': editorValid === false,\n 'k-text-disabled': editorDisabled === true\n }, className);\n return (React.createElement(\"label\", { id: id, htmlFor: editorId, onClick: onLabelClick, style: style, className: labelClassName },\n children,\n optionalElement));\n};\nLabel.propTypes = {\n id: PropTypes.string,\n editorId: PropTypes.string,\n editorRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.any })\n ]),\n editorValid: PropTypes.bool,\n editorDisabled: PropTypes.bool,\n style: PropTypes.object,\n className: PropTypes.string,\n optional: PropTypes.bool\n};\nLabel.displayName = 'KendoReactLabel';\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 [LocalizationService]({% slug api_intl_localizationservice %}).\n */\nexport var useLocalization = function () { return React.useContext(GlobalizationContext).localization; };\n","import * 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';\n/**\n * Represents the KendoReact Error component.\n * Render the error text that will be shown underneath the form editor after a validation.\n */\nexport var Error = function (props) {\n validatePackage(packageMetadata);\n var errorClassName = classNames({\n 'k-form-error': true,\n 'k-text-start': props.direction === 'start',\n 'k-text-end': props.direction === 'end'\n }, props.className);\n return (React.createElement(\"div\", { id: props.id, role: 'alert', style: props.style, className: errorClassName }, props.children));\n};\nError.propTypes = {\n id: PropTypes.string,\n direction: PropTypes.oneOf(['start', 'end']),\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.node\n ]),\n style: PropTypes.object,\n className: PropTypes.string\n};\nError.defaultProps = {\n direction: 'start'\n};\nError.displayName = 'KendoReactError';\n","import * 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';\n/**\n * Represents the KendoReact Hint component.\n * Render the hint text that will be shown underneath the form editor.\n */\nexport var Hint = function (props) {\n validatePackage(packageMetadata);\n var hintClassName = classNames({\n 'k-form-hint': true,\n 'k-text-start': props.direction === 'start',\n 'k-text-end': props.direction === 'end',\n 'k-text-disabled': props.editorDisabled === true\n }, props.className);\n return (React.createElement(\"div\", { id: props.id, style: props.style, className: hintClassName }, props.children));\n};\nHint.propTypes = {\n id: PropTypes.string,\n direction: PropTypes.oneOf(['start', 'end']),\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.node\n ]),\n style: PropTypes.object,\n className: PropTypes.string,\n editorDisabled: PropTypes.bool\n};\nHint.defaultProps = {\n direction: 'start'\n};\nHint.displayName = 'KendoReactHint';\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 * as PropTypes from 'prop-types';\nimport { classNames } from '@progress/kendo-react-common';\nimport { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';\nimport { labelsOptional, messages } from './messages';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from './package-metadata';\n/**\n * Represents the KendoReact FloatingLabel component.\n *\n * @example\n * ```jsx\n * const sizes = [\"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"2X-Large\"];\n * const App = () => {\n * const [ddlState, setDdlState] = React.useState();\n * const editorId = 'ddl-sizes';\n * return (\n * \n * setDdlState(e.target.value)}\n * />\n * \n * );\n * };\n *\n * ReactDOM.render(, document.querySelector('my-app'));\n * ```\n */\nvar FloatingLabel = /** @class */ (function (_super) {\n __extends(FloatingLabel, _super);\n function FloatingLabel(props) {\n var _this = _super.call(this, props) || this;\n /**\n * @hidden\n */\n _this.state = {\n focused: false\n };\n /**\n * @hidden\n */\n _this.handleFocus = function (_) {\n _this.setState({ focused: true });\n };\n /**\n * @hidden\n */\n _this.handleBlur = function (_) {\n _this.setState({ focused: false });\n };\n validatePackage(packageMetadata);\n return _this;\n }\n /**\n * @hidden\n */\n FloatingLabel.prototype.render = function () {\n var _a = this.props, label = _a.label, editorId = _a.editorId, className = _a.className, editorValue = _a.editorValue, editorPlaceholder = _a.editorPlaceholder, editorValid = _a.editorValid, editorDisabled = _a.editorDisabled, style = _a.style, id = _a.id, optional = _a.optional;\n var localizationService = provideLocalizationService(this);\n var localizedOptional = optional ? localizationService\n .toLanguageString(labelsOptional, messages[labelsOptional]) : '';\n var optionalElement = localizedOptional && (React.createElement(\"span\", { className: 'k-label-optional' }, localizedOptional));\n var spanClassNames = classNames({\n 'k-textbox-container': true,\n 'k-state-focused': this.state.focused,\n 'k-state-empty': !editorPlaceholder && !editorValue && (editorValue !== 0),\n 'k-text-disabled': editorDisabled,\n 'k-rtl': this.props.dir === 'rtl'\n }, className);\n var labelClassNames = classNames({\n 'k-label': true,\n 'k-text-error': editorValid === false,\n 'k-text-disabled': editorDisabled\n });\n return (React.createElement(\"span\", { className: spanClassNames, onFocus: this.handleFocus, onBlur: this.handleBlur, style: style, dir: this.props.dir },\n this.props.children,\n label\n ? editorId\n ? React.createElement(\"label\", { id: id, htmlFor: editorId, className: labelClassNames },\n label,\n optionalElement)\n : React.createElement(\"span\", { id: id, className: labelClassNames },\n label,\n optionalElement)\n : null));\n };\n /**\n * @hidden\n */\n FloatingLabel.propTypes = {\n label: PropTypes.string,\n editorId: PropTypes.string,\n editorValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),\n editorPlaceholder: PropTypes.string,\n editorValid: PropTypes.bool,\n editorDisabled: PropTypes.bool,\n id: PropTypes.string,\n style: PropTypes.object,\n className: PropTypes.string,\n optional: PropTypes.bool\n };\n return FloatingLabel;\n}(React.Component));\nexport { FloatingLabel };\nregisterForLocalization(FloatingLabel);\n","/**\n * @hidden\n */\nexport var TIME_PART = {\n dayperiod: 'dayperiod',\n hour: 'hour',\n millisecond: 'millisecond',\n minute: 'minute',\n second: 'second'\n};\n","import { cloneDate, addDays } from '@progress/kendo-date-math';\nimport { TIME_PART } from './models/TimePart';\nimport { MIDNIGHT_DATE, setTime } from '../utils';\nvar setter = function (method) { return function (date, value) {\n var clone = cloneDate(date);\n clone[method](value);\n return clone;\n}; };\nvar defaultGetters = [\n { type: TIME_PART.hour, getter: function (value) { return value.getHours(); } },\n { type: TIME_PART.minute, getter: function (value) { return value.getMinutes(); } },\n { type: TIME_PART.second, getter: function (value) { return value.getSeconds(); } },\n { type: TIME_PART.millisecond, getter: function (value) { return value.getMilliseconds(); } }\n];\nvar left = function (getter) { return function (origin, _) { return getter(origin); }; };\nvar right = function (getter) { return function (_, candidate) { return getter(candidate); }; };\nvar convertToObject = function (parts) { return parts.reduce(function (obj, p) { obj[p.type] = p.type; return obj; }, {}); };\nvar getterByPart = function (parts) { return function (g) { return parts[g.type] ? right(g.getter) : left(g.getter); }; };\nvar gettersFactory = function (getters) { return function (parts) { return (getters.map(getterByPart(convertToObject(parts)))); }; };\nvar snapValue = function (getter, step, min, type) { return function (date) {\n var value = getter(date);\n var minValue = getter(min);\n if (type === 'hour') {\n return value - ((value - minValue) % step);\n }\n if (date.getTime() <= min.getTime()\n && value !== 0\n && value <= minValue) {\n return (Math.ceil(value / step)) * step;\n }\n return value - (value % step);\n}; };\nvar snappersFactory = function (getters) { return function (steps, min) { return (getters.map(function (g) {\n var step = Math.floor(steps[g.type]);\n return step ? snapValue(g.getter, step, min, g.type) : g.getter;\n})); }; };\n/**\n * @hidden\n */\nexport var generateGetters = gettersFactory(defaultGetters);\n/**\n * @hidden\n */\nexport var generateSnappers = snappersFactory(defaultGetters);\n/**\n * @hidden\n */\nexport var valueMerger = function (getters) { return function (origin, candidate) {\n origin.setHours.apply(origin, getters.map(function (g) { return g(origin, candidate); }));\n return origin;\n}; };\n/**\n * @hidden\n */\nexport var snapTime = function (snappers) { return function (candidate) {\n var date = cloneDate(candidate);\n date.setHours.apply(date, snappers.map(function (s) { return s(date); }));\n return date;\n}; };\n/**\n * @hidden\n */\nexport var setHours = setter('setHours');\n/**\n * @hidden\n */\nexport var setMinutes = setter('setMinutes');\n/**\n * @hidden\n */\nexport var setSeconds = setter('setSeconds');\n/**\n * @hidden\n */\nexport var getNow = function () { return new Date(); };\n/**\n * @hidden\n */\nexport var range = function (start, end, step) {\n if (step === void 0) { step = 1; }\n var result = [];\n for (var i = start; i < end; i = i + step) {\n result.push(i);\n }\n return result;\n};\nvar normalizeTimes = function (candidate, min, max) { return ({\n candidateValue: setTime(MIDNIGHT_DATE, candidate),\n maxValue: addDays(setTime(MIDNIGHT_DATE, max), min.getHours() < max.getHours() ? 0 : 1),\n minValue: setTime(MIDNIGHT_DATE, min)\n}); };\n/**\n * @hidden\n */\nexport var timeInRange = function (candidate, min, max) {\n if (!candidate || !min || !max) {\n return candidate;\n }\n var _a = normalizeTimes(candidate, min, max), candidateValue = _a.candidateValue, minValue = _a.minValue, maxValue = _a.maxValue;\n if (candidateValue < minValue) {\n return setTime(candidate, min);\n }\n if (candidateValue > maxValue) {\n return setTime(candidate, max);\n }\n return candidate;\n};\n/**\n * @hidden\n */\nexport var isInTimeRange = function (candidate, min, max) {\n if (!candidate || !min || !max) {\n return true;\n }\n var _a = normalizeTimes(candidate, min, max), candidateValue = _a.candidateValue, minValue = _a.minValue, maxValue = _a.maxValue;\n return minValue <= candidateValue && candidateValue <= maxValue;\n};\n/**\n * @hidden\n */\nexport var isInRange = function (candidate, min, max) {\n if (candidate === null) {\n return true;\n }\n var _a = normalizeTimes(candidate, min, max), candidateValue = _a.candidateValue, minValue = _a.minValue, maxValue = _a.maxValue;\n return minValue <= candidateValue && candidateValue <= maxValue;\n};\n/**\n * @hidden\n */\nexport var isSmallerThanMin = function (val, min) {\n if (val === null || min === null) {\n return false;\n }\n var normalizedValue = setTime(MIDNIGHT_DATE, val);\n var normalizedMin = setTime(MIDNIGHT_DATE, min);\n return normalizedValue.getTime() < normalizedMin.getHours();\n};\n/**\n * @hidden\n */\nexport var isBiggerThanMax = function (val, max) {\n if (val === null || max === null) {\n return false;\n }\n var normalizedValue = setTime(MIDNIGHT_DATE, val);\n var normalizedMax = setTime(MIDNIGHT_DATE, max);\n return normalizedMax.getTime() < normalizedValue.getHours();\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 { isEqual, cloneDate } from '@progress/kendo-date-math';\nimport { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { KendoDate } from './models';\nimport { guid, AsyncFocusBlur, noop, classNames } 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 { approximateStringMatching, defaultFormat, defaultFormatPlaceholder, isInRange, wrapperClasses } from './utils';\nimport { MAX_DATE, MIN_DATE } from './../utils';\nimport { messages, increaseValue, decreaseValue } from './../messages';\nimport { isInTimeRange } from '../timepicker/utils';\nimport { MIN_TIME, MAX_TIME } from '../defaults';\nvar VALIDATION_MESSAGE = 'Please enter a valid value!';\n// tslint:enable:max-line-length\nvar DateInput = /** @class */ (function (_super) {\n __extends(DateInput, _super);\n function DateInput(props) {\n var _this = _super.call(this, props) || this;\n _this.kendoDate = null;\n _this.paste = false;\n _this._element = null;\n _this._wrapper = null;\n _this._inputId = guid();\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this._element) {\n _this._element.focus();\n }\n };\n /**\n * @hidden\n */\n _this.setValidity = function () {\n if (_this.element && _this.element.setCustomValidity) {\n _this.element.setCustomValidity(_this.validity.valid\n ? ''\n : _this.props.validationMessage || DateInput.defaultProps.validationMessage);\n }\n };\n _this.updateOnPaste = function (event) {\n if (!_this.element || !_this.kendoDate) {\n return;\n }\n var value = provideIntlService(_this).parseDate(_this.element.value, _this.props.format) || _this.value;\n var oldValue = _this.value;\n _this.kendoDate.setValue(value);\n _this.triggerChange(event, oldValue);\n };\n /* Handlers */\n _this.spinnersMouseDown = function (event) {\n /* do not steal focus from input when changing value with spinners */\n event.preventDefault();\n /* manually focus the input in case the user clicks the spinners first */\n if (_this.element && document.activeElement !== _this.element) {\n _this.element.focus({ preventScroll: true });\n }\n };\n _this.handlePaste = function () {\n _this.paste = true;\n };\n _this.elementChange = function (event) {\n if (!_this.element || !_this.kendoDate) {\n return;\n }\n if (_this.paste) {\n _this.updateOnPaste(event);\n _this.paste = false;\n return;\n }\n var _a = _this.kendoDate.getTextAndFormat(), text = _a.text, currentFormat = _a.format;\n _this.currentFormat = currentFormat;\n var dateBeforeChange = _this.value;\n var diff = approximateStringMatching(text, _this.currentFormat, _this.element.value, _this.selection.start);\n var navigationOnly = (diff.length === 1 && diff[0][1] === '_');\n if (!navigationOnly) {\n for (var i = 0; i < diff.length; i++) {\n _this.kendoDate.parsePart(diff[i][0], diff[i][1]);\n }\n }\n if (diff.length && diff[0][0] !== '_') {\n _this.setSelection(_this.selectionBySymbol(diff[0][0]));\n }\n if (navigationOnly) {\n _this.switchDateSegment(1);\n }\n _this.triggerChange(event, dateBeforeChange);\n };\n _this.elementClick = function (_) {\n _this.setSelection(_this.selectionByIndex(_this.selection.start));\n };\n _this.nativeWheel = function (event) {\n event.preventDefault();\n };\n _this.wheel = function (event) {\n if (document.activeElement !== _this.element) {\n return;\n }\n if (event.nativeEvent.deltaY < 0) {\n _this.increasePart(event);\n }\n if (event.nativeEvent.deltaY > 0) {\n _this.decreasePart(event);\n }\n };\n _this.increasePart = function (event) {\n _this.modifyDateSegmentValue(1, event);\n };\n _this.decreasePart = function (event) {\n _this.modifyDateSegmentValue(-1, event);\n };\n _this.elementKeyDown = function (event) {\n if (event.altKey) {\n return;\n }\n switch (event.keyCode) {\n case 37:\n /*\n * Key: `Left Arrow`\n * Action: Switches to previous logical* segment.\n * (*) https://www.w3.org/International/articles/inline-bidi-markup/uba-basics\n */\n _this.switchDateSegment(-1);\n break;\n case (38):\n /*\n * Key: `Up Arrow`\n * Action: Increases the currently selected segment value.\n */\n _this.modifyDateSegmentValue(1, event);\n break;\n case 39:\n /*\n * Key: `Right Arrow`\n * Action: Switches to the next logical segment.\n */\n _this.switchDateSegment(1);\n break;\n case 40:\n /*\n * Key: `Down Arrow`\n * Action: Decreases the currently selected segment value.\n */\n _this.modifyDateSegmentValue(-1, event);\n break;\n default:\n /*\n * Key: any\n * Action: Does not prevent the default behavior.\n */\n return;\n }\n event.preventDefault();\n };\n _this.elementOnFocus = function (_) {\n if (_this.wrapper) {\n _this.wrapper.classList.add('k-state-focused');\n }\n _this.setState({ focused: true });\n };\n _this.elementOnBlur = function (_) {\n if (_this.wrapper) {\n _this.wrapper.classList.remove('k-state-focused');\n }\n _this.setState({ focused: false });\n };\n validatePackage(packageMetadata);\n _this.state = {\n focused: false\n };\n return _this;\n }\n /**\n * @hidden\n */\n DateInput.prototype.componentDidMount = function () {\n this.setValidity();\n if (this.wrapper) {\n this.wrapper.addEventListener('wheel', this.nativeWheel, { passive: false });\n }\n };\n /**\n * @hidden\n */\n DateInput.prototype.componentDidUpdate = function (_, prevState) {\n if (this._lastSelectedSymbol && prevState.focused === this.state.focused) {\n this.setSelection(this.selectionBySymbol(this._lastSelectedSymbol));\n }\n else if (this.selection.start === this.selection.end) {\n this.setSelection({ start: 0, end: this.currentFormat.length });\n }\n this.setValidity();\n };\n /**\n * @hidden\n */\n DateInput.prototype.componentWillUnmount = function () {\n if (this.wrapper) {\n this.wrapper.removeEventListener('wheel', this.nativeWheel);\n }\n };\n /**\n * @hidden\n */\n DateInput.prototype.render = function () {\n var _this = this;\n if (this.props._ref) {\n this.props._ref.current = this;\n }\n var localizationService = provideLocalizationService(this);\n var props = __assign({}, DateInput.defaultProps, this.props);\n var min = props.min, max = props.max, name = props.name, label = props.label, id = props.id;\n var currentText = this.text;\n var text = currentText === this.props.placeholder ? '' : currentText;\n var placeholder = currentText === this.props.placeholder ? currentText : undefined;\n var inputId = id || this._inputId;\n var isValid = !this.validityStyles || this.validity.valid;\n var ariaProps = {\n 'aria-valuemin': min === null ? undefined : min.getTime(),\n 'aria-valuemax': max === null ? undefined : max.getTime(),\n 'aria-valuetext': text\n };\n if (this.value !== null) {\n ariaProps['aria-valuenow'] = this.value.getTime();\n }\n var wrapperClassesInstance = wrapperClasses.slice();\n if (this.props.className) {\n wrapperClassesInstance.push(this.props.className);\n }\n var dateinput = (React.createElement(AsyncFocusBlur, { onFocus: this.elementOnFocus, onBlur: this.elementOnBlur }, function (_a) {\n var onFocus = _a.onFocus, onBlur = _a.onBlur;\n return (React.createElement(\"span\", { style: !label\n ? { width: _this.props.width }\n : undefined, dir: _this.props.dir, className: wrapperClassesInstance.join(' '), onFocus: onFocus, onBlur: onBlur },\n React.createElement(\"span\", { className: classNames('k-dateinput-wrap', {\n 'k-state-disabled': _this.props.disabled,\n 'k-state-invalid': !isValid\n }), ref: function (span) { _this._wrapper = span; } },\n React.createElement(\"input\", __assign({ role: \"spinbutton\", tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: \"text\", spellCheck: false, autoComplete: \"off\", autoCorrect: \"off\", className: \"k-input\", id: inputId, \"aria-labelledby\": _this.props.ariaLabelledBy, \"aria-describedby\": _this.props.ariaDescribedBy, \"aria-expanded\": _this.props.ariaExpanded, \"aria-haspopup\": _this.props.ariaHasPopup, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: noop, value: text, placeholder: placeholder, name: name }, ariaProps, { ref: function (input) { return _this._element = input; } })),\n _this.props.children,\n _this.props.spinners &&\n React.createElement(\"span\", { className: \"k-select\", onMouseDown: _this.spinnersMouseDown },\n React.createElement(\"span\", { className: \"k-link k-link-increase\", \"aria-label\": localizationService\n .toLanguageString(increaseValue, messages[increaseValue]), title: localizationService\n .toLanguageString(increaseValue, messages[increaseValue]), onClick: _this.increasePart },\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(decreaseValue, messages[decreaseValue]), title: localizationService\n .toLanguageString(decreaseValue, messages[decreaseValue]), onClick: _this.decreasePart },\n React.createElement(\"span\", { className: \"k-icon k-i-arrow-s\" }))))));\n }));\n return label\n ? (React.createElement(FloatingLabel, { label: label, editorId: inputId, editorValue: currentText, editorValid: isValid, editorDisabled: this.props.disabled, children: dateinput, style: { width: this.props.width } }))\n : dateinput;\n };\n Object.defineProperty(DateInput.prototype, \"value\", {\n /* Public Getters */\n /**\n * Gets the value of the DateInput.\n */\n get: function () {\n if (this.valueDuringOnChange !== undefined) {\n return this.valueDuringOnChange;\n }\n return this.kendoDate && this.kendoDate.getDateObject();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"name\", {\n /**\n * Gets the `name` property of the DateInput.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : DateInput.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : DateInput.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"text\", {\n /**\n * @hidden\n */\n get: function () {\n var props = __assign({}, DateInput.defaultProps, this.props);\n var formatPlaceholder = props.formatPlaceholder, format = props.format, value = props.value, defaultValue = props.defaultValue;\n if (this.kendoDate === null) {\n this.kendoDate = new KendoDate(this.intl.bind(this), formatPlaceholder, format);\n this.kendoDate.setValue(value || defaultValue || null);\n }\n else {\n this.kendoDate.format = format;\n this.kendoDate.formatPlaceholder = formatPlaceholder;\n }\n if (value !== undefined && this.value !== value) {\n this.kendoDate.setValue(value);\n }\n var _a = this.kendoDate.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;\n this.currentFormat = currentFormat;\n return props.placeholder !== null\n && !this.state.focused\n && !this.kendoDate.hasValue()\n ? props.placeholder\n : currentText;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"validity\", {\n /**\n * Represents the validity state into which the DateInput is set.\n */\n get: function () {\n var inRange = isInRange(this.value, this.min, this.max)\n && isInTimeRange(this.value, this.props.minTime, this.props.maxTime);\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(DateInput.prototype, \"element\", {\n /**\n * Gets the element of the DateInput.\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 = dateInput ? dateInput.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._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : DateInput.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : DateInput.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateInput.prototype, \"wrapper\", {\n /**\n * @hidden\n */\n get: function () {\n return this._wrapper;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DateInput.prototype.intl = function () {\n return provideIntlService(this);\n };\n Object.defineProperty(DateInput.prototype, \"selection\", {\n /* end handlers */\n get: function () {\n var returnValue = { start: 0, end: 0 };\n if (this.element !== null && this.element.selectionStart !== undefined) {\n returnValue = { start: this.element.selectionStart, end: this.element.selectionEnd };\n }\n return returnValue;\n },\n enumerable: true,\n configurable: true\n });\n DateInput.prototype.setSelection = function (selection) {\n var _this = this;\n this._lastSelectedSymbol = this.currentFormat[selection.start];\n window.requestAnimationFrame(function () {\n if (_this.element && document.activeElement === _this.element) {\n _this.element.setSelectionRange(selection.start, selection.end);\n }\n });\n };\n DateInput.prototype.triggerChange = function (event, oldValue) {\n this.valueDuringOnChange = this.value;\n this.forceUpdate();\n if (this.props.onChange\n && !isEqual(oldValue, this.value)) {\n // isEqual works with null\n this.props.onChange.call(undefined, {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: this.value,\n target: this\n // inRange: this.props.min && this.props.max ? isInRange(value, this.props.min, this.props.max) : true\n });\n }\n this.valueDuringOnChange = undefined;\n };\n DateInput.prototype.selectionBySymbol = function (symbol) {\n var start = -1;\n var end = 0;\n for (var i = 0; i < this.currentFormat.length; i++) {\n if (this.currentFormat[i] === symbol) {\n end = i + 1;\n if (start === -1) {\n start = i;\n }\n }\n }\n if (start < 0) {\n start = 0;\n }\n return { start: start, end: end };\n };\n DateInput.prototype.selectionByIndex = function (index) {\n var selection = { start: index, end: index };\n for (var i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {\n if (i < this.currentFormat.length && this.currentFormat[i] !== '_') {\n selection = this.selectionBySymbol(this.currentFormat[i]);\n break;\n }\n if (j >= 0 && this.currentFormat[j] !== '_') {\n selection = this.selectionBySymbol(this.currentFormat[j]);\n break;\n }\n }\n return selection;\n };\n DateInput.prototype.switchDateSegment = function (offset) {\n var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;\n if (selectionStart < selectionEnd &&\n this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {\n this.setSelection(this.selectionByIndex(offset > 0 ? selectionStart : selectionEnd - 1));\n return;\n }\n var previousFormatSymbol = this.currentFormat[selectionStart];\n var a = selectionStart + offset;\n while (a > 0 && a < this.currentFormat.length) {\n if (this.currentFormat[a] !== previousFormatSymbol &&\n this.currentFormat[a] !== '_') {\n break;\n }\n a += offset;\n }\n if (this.currentFormat[a] === '_') {\n // no known symbol is found\n return;\n }\n var b = a;\n while (b >= 0 && b < this.currentFormat.length) {\n if (this.currentFormat[b] !== this.currentFormat[a]) {\n break;\n }\n b += offset;\n }\n if (a > b && (b + 1 !== selectionStart || a + 1 !== selectionEnd)) {\n this.setSelection({ start: b + 1, end: a + 1 });\n }\n else if (a < b && (a !== selectionStart || b !== selectionEnd)) {\n this.setSelection({ start: a, end: b });\n }\n };\n DateInput.prototype.modifyDateSegmentValue = function (offset, event) {\n if (!this.kendoDate) {\n return;\n }\n var oldValue = this.value;\n var symbol = this.currentFormat[this.selection.start];\n var currentStepSymbol = this.kendoDate.symbolMap(symbol);\n var step = ((this.props.steps || {})[currentStepSymbol] || 1) * offset;\n this.kendoDate.modifyPart(symbol, step);\n this.triggerChange(event, oldValue);\n };\n /**\n * @hidden\n */\n DateInput.propTypes = {\n value: 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 width: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n tabIndex: PropTypes.number,\n title: PropTypes.string,\n steps: PropTypes.shape({\n year: PropTypes.number,\n month: PropTypes.number,\n day: PropTypes.number,\n hour: PropTypes.number,\n minute: PropTypes.number,\n second: PropTypes.number\n }),\n min: PropTypes.instanceOf(Date),\n max: PropTypes.instanceOf(Date),\n disabled: PropTypes.bool,\n spinners: PropTypes.bool,\n name: PropTypes.string,\n dir: PropTypes.string,\n label: PropTypes.string,\n id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n ariaExpanded: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.string\n ]),\n onChange: PropTypes.func,\n validationMessage: PropTypes.string,\n required: PropTypes.bool,\n validate: PropTypes.bool,\n valid: PropTypes.bool\n };\n /**\n * @hidden\n */\n DateInput.defaultProps = {\n format: defaultFormat,\n formatPlaceholder: defaultFormatPlaceholder,\n // defaultValue: null as Date | null,\n spinners: false,\n disabled: false,\n max: cloneDate(MAX_DATE),\n min: cloneDate(MIN_DATE),\n minTime: cloneDate(MIN_TIME),\n maxTime: cloneDate(MAX_TIME),\n required: false,\n validityStyles: true,\n validationMessage: VALIDATION_MESSAGE,\n placeholder: null\n // the rest of the properties are undefined by default\n };\n return DateInput;\n}(React.Component));\nexport { DateInput };\nregisterForIntl(DateInput);\nregisterForLocalization(DateInput);\n","import * as React from 'react';\nimport { classNames } from '@progress/kendo-react-common';\n/**\n * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).\n */\nexport var ToggleButton = React.forwardRef(function (props, ref) {\n var className = classNames('k-select', props.className);\n return (React.createElement(\"a\", { ref: ref, id: props.id, role: \"button\", style: props.style, className: className, tabIndex: props.tabIndex, title: props.title, \"aria-label\": props.title, onMouseDown: props.onMouseDown, onClick: props.onClick, onMouseUp: props.onMouseUp }, props.children));\n});\n","import * as React from 'react';\nimport { classNames } from '@progress/kendo-react-common';\n/**\n * Represents the default `pickerWrap` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).\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 __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 { FloatingLabel } from '@progress/kendo-react-labels';\n/**\n * @hidden\n */\nexport var usePickerFloatingLabel = function (dateInput) {\n var _a = React.useState(false), show = _a[0], setShow = _a[1];\n var syncText = function () {\n if (dateInput.current) {\n setShow(Boolean(dateInput.current.text));\n }\n };\n React.useEffect(syncText);\n return {\n editorValue: show\n };\n};\n/**\n * @hidden\n */\nexport var PickerFloatingLabel = function (props) {\n var floatingLabelProps = usePickerFloatingLabel(props.dateInput);\n return (React.createElement(FloatingLabel, __assign({}, props, floatingLabelProps)));\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 } from '@progress/kendo-react-common';\nimport { validatePackage } 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';\nvar DatePicker = /** @class */ (function (_super) {\n __extends(DatePicker, _super);\n function DatePicker(props) {\n var _this = _super.call(this, props) || this;\n _this._popupId = guid();\n _this._element = null;\n _this._wrapper = 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 || DatePicker.defaultProps.defaultValue,\n show: _this.props.defaultShow || DatePicker.defaultProps.defaultShow,\n focused: false\n };\n return _this;\n }\n Object.defineProperty(DatePicker.prototype, \"element\", {\n /**\n * Gets the wrapping element of the DatePicker.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.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(DatePicker.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(DatePicker.prototype, \"value\", {\n /**\n * Gets the value of the DatePicker.\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(DatePicker.prototype, \"show\", {\n /**\n * Gets the popup state of the DatePicker.\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(DatePicker.prototype, \"name\", {\n /**\n * Gets the `name` property of the DatePicker.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : DatePicker.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : DatePicker.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"dateInputComp\", {\n get: function () {\n return this.props.dateInput || DatePicker.defaultProps.dateInput;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"toggleButtonComp\", {\n get: function () {\n return this.props.toggleButton || DatePicker.defaultProps.toggleButton;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"calendarComp\", {\n get: function () {\n return this.props.calendar || DatePicker.defaultProps.calendar;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"popupComp\", {\n get: function () {\n return this.props.popup || DatePicker.defaultProps.popup;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"pickerWrapComp\", {\n get: function () {\n return this.props.pickerWrap || DatePicker.defaultProps.pickerWrap;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.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(DatePicker.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : DatePicker.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DatePicker.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : DatePicker.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DatePicker.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 DatePicker.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 DatePicker.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n DatePicker.prototype.render = function () {\n var _this = this;\n var _a = this.props, 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;\n var _b = this.props.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, [\"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 rootClassName = classNames('k-widget k-datepicker', className);\n var wrapperClassNames = classNames('k-picker-wrap', {\n 'k-state-invalid': !isValid,\n 'k-state-disabled': disabled,\n 'k-state-focused': this.state.focused\n });\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 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 };\n var popupProps = __assign({ show: show, anchor: this._wrapper || 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 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 return (React.createElement(\"span\", { role: \"group\", \"aria-expanded\": _this.show, ref: function (span) { _this._element = span; }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },\n React.createElement(_this.pickerWrapComp, { _ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },\n React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),\n React.createElement(_this.toggleButtonComp, { onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: provideLocalizationService(_this)\n .toLanguageString(toggleCalendar, messages[toggleCalendar]), className: \"k-select\" },\n React.createElement(\"span\", { className: \"k-icon k-i-calendar\" }))),\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 DatePicker.prototype.setShow = function (show) {\n if (this.show === show) {\n return;\n }\n this.setState({ show: show });\n };\n DatePicker.prototype.mergeTime = function (value) {\n return this.value && value ? setTime(value, this.value) : value;\n };\n DatePicker.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 DatePicker.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 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 };\n /**\n * @hidden\n */\n DatePicker.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 };\n return DatePicker;\n}(React.Component));\nexport { DatePicker };\nregisterForLocalization(DatePicker);\n","import { cloneDate } from '@progress/kendo-date-math';\nvar setHours = function (date, hours) {\n var clone = cloneDate(date);\n clone.setHours(hours);\n return clone;\n};\nvar isAM = function (value) { return value !== null && value < 12; };\nvar isPM = function (value) { return value !== null && (!value || value > 11); };\nvar inRange = function (value, min, max) { return ((!min && !max) || (value >= min && value <= max)); };\nvar inReverseRange = function (value, min, max) { return ((!min && !max) || value >= min || value <= max); };\n/**\n * @hidden\n */\nvar DayPeriodService = /** @class */ (function () {\n function DayPeriodService(intl) {\n this.intl = intl;\n }\n /**\n * @hidden\n */\n DayPeriodService.prototype.apply = function (value, candidate) {\n var hour = value.getHours();\n var hourAM = isAM(hour);\n var candidateAM = isAM(candidate.getHours());\n if ((hourAM && candidateAM) || (!hourAM && !candidateAM)) {\n return value;\n }\n var _a = this.normalizedRange(), min = _a[0], _b = _a[1], max = _b === void 0 ? 24 : _b;\n var result = hour + (candidateAM ? -12 : 12);\n return setHours(value, Math.min(Math.max(min, result), (max || 24)));\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.configure = function (settings) {\n var _a = settings.min, min = _a === void 0 ? this.min : _a, _b = settings.max, max = _b === void 0 ? this.max : _b, _c = settings.part, part = _c === void 0 ? this.part : _c;\n this.min = min;\n this.max = max;\n this.part = part;\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.data = function (_) {\n var names = this.part.names;\n if (!names) {\n return [];\n }\n var data = [];\n var _a = this.normalizedRange(), min = _a[0], max = _a[1];\n var dayPeriod = this.intl.dateFormatNames(names);\n if (isAM(min)) {\n data.push({ text: dayPeriod.am, value: setHours(this.min, min) });\n }\n if (isPM(max)) {\n data.push({ text: dayPeriod.pm, value: setHours(this.min, Math.max(12, max)) });\n }\n return this.min.getHours() !== min ? data.reverse() : data;\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.isRangeChanged = function (_, __) {\n return false;\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.limitRange = function (min, max, _) {\n return [min, max];\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.total = function () {\n var _a = this.normalizedRange(), min = _a[0], max = _a[1];\n if (!min && !max) {\n return 2;\n }\n if (min > 11 || max < 12) {\n return 1;\n }\n return 2;\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.selectedIndex = function (value) {\n if (!this.valueInList(value)) {\n return -1;\n }\n var index = Math.floor(value.getHours() / 12);\n return this.min.getHours() === this.normalizedRange()[0] ? index : (index === 0 ? 1 : 0);\n };\n /**\n * @hidden\n */\n DayPeriodService.prototype.valueInList = function (value) {\n var reverse = this.min.getHours() !== this.normalizedRange()[0];\n var isInRange = reverse ? inReverseRange : inRange;\n return isInRange(value.getHours(), this.min.getHours(), this.max.getHours());\n };\n DayPeriodService.prototype.normalizedRange = function () {\n var minHour = this.min.getHours();\n var maxHour = this.max.getHours();\n return [\n Math.min(minHour, maxHour),\n Math.max(minHour, maxHour)\n ];\n };\n return DayPeriodService;\n}());\nexport { DayPeriodService };\n","import { getDate, isEqual } from '@progress/kendo-date-math';\nimport { MIDNIGHT_DATE } from '../../utils';\nimport { range, setHours } from '../utils';\nvar HOURS_IN_DAY = 24;\nvar clampToRange = function (rangeValue) { return function (value) { return value % rangeValue; }; };\nvar clamp = clampToRange(HOURS_IN_DAY);\nvar stepper = function (start, step) { return function (idx) { return clamp(start + (idx * step)); }; };\nvar distanceFromMin = function (value, min) { return clamp(HOURS_IN_DAY + value - min); };\nvar limit = function (borderValue) { return function (barrier, value) {\n var useBarrier = !value || getDate(barrier).getTime() === getDate(value).getTime();\n return useBarrier ? barrier : setHours(barrier, borderValue);\n}; };\nvar limitDown = limit(0);\nvar limitUp = limit(HOURS_IN_DAY - 1);\n/**\n * @hidden\n */\nvar HoursService = /** @class */ (function () {\n function HoursService(intl) {\n this.intl = intl;\n this.boundRange = false;\n this.insertUndividedMax = false;\n }\n HoursService.prototype.apply = function (value, candidate) {\n return setHours(value, candidate.getHours());\n };\n HoursService.prototype.configure = function (settings) {\n var _this = this;\n var _a = settings.boundRange, boundRange = _a === void 0 ? this.boundRange : _a, _b = settings.insertUndividedMax, insertUndividedMax = _b === void 0 ? this.insertUndividedMax : _b, _c = settings.min, min = _c === void 0 ? this.min : _c, _d = settings.max, max = _d === void 0 ? this.max : _d, part = settings.part, _e = settings.step, step = _e === void 0 ? this.step : _e;\n this.boundRange = boundRange;\n this.insertUndividedMax = insertUndividedMax;\n this.toListItem = function (hour) {\n var date = setHours(MIDNIGHT_DATE, hour);\n return {\n text: _this.intl.formatDate(date, part.pattern),\n value: date\n };\n };\n this.min = min;\n this.max = max;\n this.step = step;\n };\n HoursService.prototype.data = function (selectedValue) {\n var _this = this;\n var min = this.range(selectedValue)[0];\n var getHour = stepper(min, this.step);\n var convertToItem = function (idx) { return (_this.toListItem(getHour(idx))); };\n var data = range(0, this.countFromMin(selectedValue)).map(convertToItem);\n this.addLast(data);\n if (selectedValue) {\n this.addMissing(data, selectedValue);\n }\n return data;\n };\n HoursService.prototype.isRangeChanged = function (min, max) {\n return !isEqual(this.min, min) || !isEqual(this.max, max);\n };\n HoursService.prototype.limitRange = function (min, max, value) {\n return this.boundRange ? [limitDown(min, value), limitUp(max, value)] : [min, max];\n };\n HoursService.prototype.total = function (value) {\n var last = this.insertUndividedMax && this.isLastMissing(value) ? 1 : 0;\n var missing = this.isMissing(value) ? 1 : 0;\n return this.countFromMin(value) + missing + last;\n };\n HoursService.prototype.selectedIndex = function (value) {\n return Math.ceil(this.divideByStep(value));\n };\n HoursService.prototype.valueInList = function (value) {\n if (!value) {\n return true;\n }\n var matchMax = this.insertUndividedMax && this.lastHour(value) === value.getHours();\n return matchMax || !this.isMissing(value);\n };\n HoursService.prototype.addLast = function (data, value) {\n if (this.insertUndividedMax && this.isLastMissing(value)) {\n data.push(this.toListItem(this.lastHour(value)));\n }\n return data;\n };\n HoursService.prototype.addMissing = function (data, value) {\n if (this.valueInList(value)) {\n return data;\n }\n var missingItem = this.toListItem(value.getHours());\n data.splice(this.selectedIndex(value), 0, missingItem);\n return data;\n };\n HoursService.prototype.countFromMin = function (value) {\n var _a = this.range(value), min = _a[0], max = _a[1];\n return Math.floor(distanceFromMin(max, min) / this.step) + 1; /* include min */\n };\n HoursService.prototype.isMissing = function (value) {\n if (!value) {\n return false;\n }\n return this.selectedIndex(value) !== this.divideByStep(value);\n };\n HoursService.prototype.isLastMissing = function (value) {\n return this.isMissing(setHours(this.max, this.lastHour(value)));\n };\n HoursService.prototype.divideByStep = function (value) {\n return distanceFromMin(value.getHours(), this.min.getHours()) / this.step;\n };\n HoursService.prototype.lastHour = function (value) {\n return this.range(value)[1];\n };\n HoursService.prototype.range = function (value) {\n var _a = this.limitRange(this.min, this.max, value), min = _a[0], max = _a[1];\n return [min.getHours(), max.getHours()];\n };\n return HoursService;\n}());\nexport { HoursService };\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 _a, _b;\nimport * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { cloneDate } from '@progress/kendo-date-math';\nimport { Keys, noop } from '@progress/kendo-react-common';\nimport { provideIntlService, registerForIntl } from '@progress/kendo-react-intl';\nimport { Virtualization } from '../virtualization/Virtualization';\nimport { TIME_PART } from './models';\nimport { SecondsService, MinutesService, HoursService, DayPeriodService, DOMService } from './services';\nimport { MAX_TIME, MIDNIGHT_DATE } from '../utils';\nvar SCROLL_THRESHOLD = 2; // < 2px threshold\nvar SNAP_THRESHOLD = 0.05; // % of the item height\nvar SKIP = 0;\nvar getters = (_a = {},\n _a[Keys.end] = function (data, _) { return data[data.length - 1]; },\n _a[Keys.home] = function (data, _) { return data[0]; },\n _a[Keys.up] = function (data, index) { return data[index - 1]; },\n _a[Keys.down] = function (data, index) { return data[index + 1]; },\n _a);\nvar services = (_b = {},\n _b[TIME_PART.dayperiod] = DayPeriodService,\n _b[TIME_PART.hour] = HoursService,\n _b[TIME_PART.minute] = MinutesService,\n _b[TIME_PART.second] = SecondsService,\n _b);\n/**\n * @hidden\n */\nvar TimeList = /** @class */ (function (_super) {\n __extends(TimeList, _super);\n function TimeList(props) {\n var _this = _super.call(this, props) || this;\n _this.animateToIndex = false;\n _this.focus = function (args) {\n Promise.resolve().then(function () {\n if (!_this.element) {\n return;\n }\n _this.element.focus(args);\n });\n };\n _this.itemOffset = function (scrollTop) {\n if (!_this.virtualization) {\n return -1;\n }\n var valueIndex = _this.service.selectedIndex(_this.props.value);\n var activeIndex = _this.virtualization.activeIndex();\n var offset = _this.virtualization.itemOffset(activeIndex);\n var distance = Math.abs(Math.ceil(scrollTop) - offset);\n if (valueIndex === activeIndex && distance < SCROLL_THRESHOLD) {\n return offset;\n }\n var scrollUp = valueIndex > activeIndex;\n var moveToNext = scrollUp && distance >= _this.bottomThreshold || !scrollUp && distance > _this.topThreshold;\n return moveToNext ? _this.virtualization.itemOffset(activeIndex + 1) : offset;\n };\n _this.calculateHeights = function () {\n if (!_this.dom.didCalculate) {\n return;\n }\n _this.itemHeight = _this.dom.itemHeight;\n _this.listHeight = _this.dom.timeListHeight;\n _this.topOffset = (_this.listHeight - _this.itemHeight) / 2;\n _this.bottomOffset = _this.listHeight - _this.itemHeight;\n _this.topThreshold = _this.itemHeight * SNAP_THRESHOLD;\n _this.bottomThreshold = _this.itemHeight * (1 - SNAP_THRESHOLD);\n };\n _this.configureServices = function (_a) {\n var _b = _a === void 0 ? _this.props : _a, min = _b.min, max = _b.max, value = _b.value;\n var _c = _this.service.limitRange(min || _this.min, max || _this.max, value || _this.props.value), newMin = _c[0], newMax = _c[1];\n _this.service.configure(_this.serviceSettings({ min: newMin, max: newMax }));\n };\n _this.serviceSettings = function (settings) {\n var defaults = {\n boundRange: _this.props.boundRange || TimeList.defaultProps.boundRange,\n insertUndividedMax: false,\n min: cloneDate(_this.min),\n max: cloneDate(_this.max),\n part: _this.props.part,\n step: _this.step\n };\n var result = Object.assign({}, defaults, settings);\n result.boundRange = result.part.type !== 'hour' || _this.props.boundRange || TimeList.defaultProps.boundRange;\n return result;\n };\n _this.handleScrollAction = function (_a) {\n var target = _a.target, animationInProgress = _a.animationInProgress;\n if (!_this.virtualization) {\n return;\n }\n if (target && !animationInProgress) {\n _this.animateToIndex = false;\n var index = _this.virtualization.itemIndex(_this.itemOffset(target.scrollTop));\n var dataItem = _this.service.data(_this.props.value)[index];\n _this.handleChange(dataItem);\n }\n };\n _this.handleFocus = function (event) {\n var onFocus = _this.props.onFocus;\n if (onFocus) {\n onFocus.call(undefined, event);\n }\n };\n _this.handleBlur = function (event) {\n var onBlur = _this.props.onBlur;\n if (onBlur) {\n onBlur.call(undefined, event);\n }\n };\n _this.handleMouseOver = function () {\n if (!_this._element) {\n return;\n }\n if (document && document.activeElement !== _this._element) {\n _this._element.focus({ preventScroll: true });\n }\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode;\n if (keyCode === Keys.down\n || keyCode === Keys.up\n || keyCode === Keys.end\n || keyCode === Keys.home) {\n event.preventDefault();\n }\n var getter = getters[event.keyCode] || noop;\n var dataItem = getter(_this.service.data(_this.props.value), _this.service.selectedIndex(_this.props.value));\n if (dataItem) {\n _this.handleChange(dataItem);\n }\n };\n _this.handleChange = function (dataItem) {\n var candidate = _this.service.apply(_this.props.value, dataItem.value);\n if (_this.props.value.getTime() === candidate.getTime()) {\n return;\n }\n _this.setState({\n value: candidate\n });\n var onChange = _this.props.onChange;\n if (onChange) {\n onChange.call(undefined, candidate);\n }\n };\n _this.dom = new DOMService();\n return _this;\n }\n Object.defineProperty(TimeList.prototype, \"element\", {\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeList.prototype, \"animate\", {\n get: function () {\n return Boolean(this.props.smoothScroll && this.animateToIndex);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeList.prototype, \"min\", {\n get: function () {\n return this.props.min || TimeList.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeList.prototype, \"max\", {\n get: function () {\n return this.props.max || TimeList.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeList.prototype, \"step\", {\n get: function () {\n return this.props.step !== undefined && this.props.step !== 0\n ? Math.floor(this.props.step)\n : TimeList.defaultProps.step;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n TimeList.prototype.componentDidMount = function () {\n var _this = this;\n // Async calculation of height to avoid animation cancellation\n Promise.resolve().then(function () {\n if (!_this._element) {\n return;\n }\n _this.dom.calculateHeights(_this._element);\n _this.forceUpdate();\n });\n };\n /**\n * @hidden\n */\n TimeList.prototype.componentDidUpdate = function () {\n if (!this.virtualization) {\n return;\n }\n var index = this.service.selectedIndex(this.props.value);\n this.virtualization[this.animate ? 'animateToIndex' : 'scrollToIndex'](index);\n this.animateToIndex = true;\n };\n /**\n * @hidden\n */\n TimeList.prototype.render = function () {\n var _this = this;\n if (!this.props.part.type || !services[this.props.part.type]) {\n return;\n }\n this.calculateHeights();\n this.intl = provideIntlService(this);\n this.service = new services[this.props.part.type](this.intl);\n this.configureServices();\n var data = this.service.data(this.props.value);\n var transform = 'translateY(' + this.topOffset + 'px)';\n var total = this.service.total(this.props.value);\n var list = (React.createElement(\"ul\", { style: { transform: transform, msTransform: transform }, className: \"k-reset\" }, data.map(function (item, idx) {\n return (React.createElement(\"li\", { key: idx, className: \"k-item\", onClick: function () { _this.handleChange(item); } },\n React.createElement(\"span\", null, item.text)));\n })));\n return (React.createElement(\"div\", { className: \"k-time-list\", id: String(this.props.id || ''), tabIndex: this.props.disabled ? -1 : 0, ref: function (el) { _this._element = el; }, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseOver: this.handleMouseOver }, this.dom.didCalculate\n ? (React.createElement(Virtualization, { bottomOffset: this.bottomOffset, children: list, className: \"k-time-container\", itemHeight: this.itemHeight, maxScrollDifference: this.listHeight, onScrollAction: this.handleScrollAction, ref: function (el) { _this.virtualization = el; }, role: \"presentation\", skip: SKIP, tabIndex: -1, take: total, topOffset: this.topOffset, total: total }))\n : (React.createElement(\"div\", { className: \"k-time-container\" }, list))));\n };\n TimeList.propTypes = {\n id: PropTypes.number,\n max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n part: function (props, propName, componentName) {\n var prop = props[propName];\n if (!prop || !services[prop.type]) {\n throw new Error(\"\\n Invalid prop '\" + propName + \"' supplied to \" + componentName + \".\\n Supported part types are hour|minute|second|dayperiod.\\n \");\n }\n return null;\n },\n step: function (props, propName, componentName) {\n var prop = props[propName];\n if (prop !== undefined && prop <= 0) {\n throw new Error(\"\\n Invalid prop '\" + propName + \"' supplied to \" + componentName + \".\\n \" + propName + \" cannot be less than 1.\\n \");\n }\n return null;\n },\n value: PropTypes.instanceOf(Date),\n smoothScroll: PropTypes.bool\n };\n TimeList.defaultProps = {\n boundRange: false,\n max: MAX_TIME,\n min: MIDNIGHT_DATE,\n step: 1,\n smoothScroll: true\n };\n return TimeList;\n}(React.Component));\nexport { TimeList };\nregisterForIntl(TimeList);\n","import { domContainerFactory as containerFactory } from '../../utils';\nimport { canUseDOM } from '@progress/kendo-react-common';\n/**\n * @hidden\n */\nvar DOMService = /** @class */ (function () {\n function DOMService() {\n this.didCalculate = false;\n }\n DOMService.prototype.ensureHeights = function () {\n if (this.timeListHeight !== undefined) {\n return;\n }\n this.calculateHeights();\n };\n DOMService.prototype.calculateHeights = function (container) {\n if (!canUseDOM) {\n return;\n }\n var div = containerFactory('div');\n var ul = containerFactory('ul');\n var li = containerFactory('li');\n var listItem = function () { return li('02', 'k-item'); };\n var list = function () { return ul([listItem()], 'k-reset'); };\n var scrollable = function () { return (div([list()], 'k-time-container k-content k-scrollable')); };\n var timeListWrapper = function () {\n return div([div([scrollable()], 'k-time-list')], 'k-time-list-wrapper', { left: '-10000px', position: 'absolute' });\n };\n var timeWrapper = timeListWrapper();\n var listContainer = container && container.querySelector('.k-time-container');\n var hostContainer = listContainer || document.body;\n var wrapper = hostContainer.appendChild(timeWrapper);\n this.timeListHeight = wrapper.querySelector('.k-scrollable').offsetHeight;\n this.itemHeight = wrapper.querySelector('li').offsetHeight;\n hostContainer.removeChild(wrapper);\n this.didCalculate = true;\n };\n return DOMService;\n}());\nexport { DOMService };\n","import { isEqual } from '@progress/kendo-date-math';\nimport { MIDNIGHT_DATE } from '../../utils';\nimport { range, setMinutes } from '../utils';\nvar MINUTES_IN_HOUR = 60;\nvar clampToRange = function (rangeValue) { return function (value) { return value % rangeValue; }; };\nvar clamp = clampToRange(MINUTES_IN_HOUR);\nvar stepper = function (start, step) { return function (idx) { return clamp(start + (idx * step)); }; };\nvar distanceFromMin = function (value, min) { return clamp(MINUTES_IN_HOUR + value - min); };\nvar limit = function (borderValue) { return function (barrier, value) {\n var useBarrier = !value || barrier.getHours() === value.getHours();\n return useBarrier ? barrier : setMinutes(barrier, borderValue);\n}; };\nvar limitDown = limit(0);\nvar limitUp = limit(MINUTES_IN_HOUR - 1);\n/**\n * @hidden\n */\nvar MinutesService = /** @class */ (function () {\n function MinutesService(intl) {\n this.intl = intl;\n this.insertUndividedMax = false;\n }\n MinutesService.prototype.apply = function (value, candidate) {\n return setMinutes(value, candidate.getMinutes());\n };\n MinutesService.prototype.configure = function (settings) {\n var _this = this;\n var _a = settings.insertUndividedMax, insertUndividedMax = _a === void 0 ? this.insertUndividedMax : _a, _b = settings.min, min = _b === void 0 ? this.min : _b, _c = settings.max, max = _c === void 0 ? this.max : _c, part = settings.part, _d = settings.step, step = _d === void 0 ? this.step : _d;\n this.insertUndividedMax = insertUndividedMax;\n this.toListItem = function (minute) {\n var date = setMinutes(MIDNIGHT_DATE, minute);\n return {\n text: _this.intl.formatDate(date, part.pattern),\n value: date\n };\n };\n this.min = min;\n this.max = max;\n this.step = step;\n };\n MinutesService.prototype.data = function (selectedValue) {\n var _this = this;\n var min = this.range(selectedValue)[0];\n var getMinute = stepper(min, this.step);\n var convertToItem = function (idx) { return (_this.toListItem(getMinute(idx))); };\n var data = range(0, this.countFromMin(selectedValue)).map(convertToItem);\n this.addLast(data);\n if (selectedValue) {\n this.addMissing(data, selectedValue);\n }\n return data;\n };\n MinutesService.prototype.isRangeChanged = function (min, max) {\n return !isEqual(this.min, min) || !isEqual(this.max, max);\n };\n MinutesService.prototype.limitRange = function (min, max, value) {\n return [limitDown(min, value), limitUp(max, value)];\n };\n MinutesService.prototype.total = function (value) {\n var last = this.insertUndividedMax && this.isLastMissing(value) ? 1 : 0;\n var missing = this.isMissing(value) ? 1 : 0;\n return this.countFromMin(value) + missing + last;\n };\n MinutesService.prototype.selectedIndex = function (value) {\n return Math.ceil(this.divideByStep(value));\n };\n MinutesService.prototype.valueInList = function (value) {\n if (!value) {\n return true;\n }\n var matchMax = this.insertUndividedMax && this.lastMinute(value) === value.getMinutes();\n return matchMax || !this.isMissing(value);\n };\n MinutesService.prototype.addLast = function (data, value) {\n if (this.insertUndividedMax && this.isLastMissing(value)) {\n data.push(this.toListItem(this.lastMinute(value)));\n }\n return data;\n };\n MinutesService.prototype.addMissing = function (data, value) {\n if (this.valueInList(value)) {\n return data;\n }\n var missingItem = this.toListItem(value.getMinutes());\n data.splice(this.selectedIndex(value), 0, missingItem);\n return data;\n };\n MinutesService.prototype.countFromMin = function (value) {\n var _a = this.range(value), min = _a[0], max = _a[1];\n return Math.floor(distanceFromMin(max, min) / this.step) + 1; /* include min */\n };\n MinutesService.prototype.isMissing = function (value) {\n if (!value) {\n return false;\n }\n return this.selectedIndex(value) !== this.divideByStep(value);\n };\n MinutesService.prototype.isLastMissing = function (value) {\n return this.isMissing(setMinutes(this.max, this.lastMinute(value)));\n };\n MinutesService.prototype.divideByStep = function (value) {\n return distanceFromMin(value.getMinutes(), this.min.getMinutes()) / this.step;\n };\n MinutesService.prototype.lastMinute = function (value) {\n return this.range(value)[1];\n };\n MinutesService.prototype.range = function (value) {\n var _a = this.limitRange(this.min, this.max, value), min = _a[0], max = _a[1];\n return [min.getMinutes(), max.getMinutes()];\n };\n return MinutesService;\n}());\nexport { MinutesService };\n","import { isEqual } from '@progress/kendo-date-math';\nimport { MIDNIGHT_DATE } from '../../utils';\nimport { range, setSeconds } from '../utils';\nvar SECONDS_IN_HOUR = 60;\nvar clampToRange = function (rangeValue) { return function (value) { return value % rangeValue; }; };\nvar clamp = clampToRange(SECONDS_IN_HOUR);\nvar stepper = function (start, step) { return function (idx) { return clamp(start + (idx * step)); }; };\nvar distanceFromMin = function (value, min) { return clamp(SECONDS_IN_HOUR + value - min); };\nvar limit = function (borderValue) { return function (barrier, value) {\n var useBarrier = !value ||\n (barrier.getMinutes() === value.getMinutes() && barrier.getHours() === value.getHours());\n return useBarrier ? barrier : setSeconds(barrier, borderValue);\n}; };\nvar limitDown = limit(0);\nvar limitUp = limit(SECONDS_IN_HOUR - 1);\n/**\n * @hidden\n */\nvar SecondsService = /** @class */ (function () {\n function SecondsService(intl) {\n this.intl = intl;\n this.insertUndividedMax = false;\n }\n SecondsService.prototype.apply = function (value, candidate) {\n return setSeconds(value, candidate.getSeconds());\n };\n SecondsService.prototype.configure = function (settings) {\n var _this = this;\n var _a = settings.insertUndividedMax, insertUndividedMax = _a === void 0 ? this.insertUndividedMax : _a, _b = settings.min, min = _b === void 0 ? this.min : _b, _c = settings.max, max = _c === void 0 ? this.max : _c, part = settings.part, _d = settings.step, step = _d === void 0 ? this.step : _d;\n this.insertUndividedMax = insertUndividedMax;\n this.toListItem = function (minute) {\n var date = setSeconds(MIDNIGHT_DATE, minute);\n return {\n text: _this.intl.formatDate(date, part.pattern),\n value: date\n };\n };\n this.min = min;\n this.max = max;\n this.step = step;\n };\n SecondsService.prototype.data = function (selectedValue) {\n var _this = this;\n var min = this.range(selectedValue)[0];\n var getSecond = stepper(min, this.step);\n var convertToItem = function (idx) { return (_this.toListItem(getSecond(idx))); };\n var data = range(0, this.countFromMin(selectedValue)).map(convertToItem);\n this.addLast(data);\n if (selectedValue) {\n this.addMissing(data, selectedValue);\n }\n return data;\n };\n SecondsService.prototype.isRangeChanged = function (min, max) {\n return !isEqual(this.min, min) || !isEqual(this.max, max);\n };\n SecondsService.prototype.limitRange = function (min, max, value) {\n return [limitDown(min, value), limitUp(max, value)];\n };\n SecondsService.prototype.total = function (value) {\n var last = this.insertUndividedMax && this.isLastMissing(value) ? 1 : 0;\n var missing = this.isMissing(value) ? 1 : 0;\n return this.countFromMin(value) + missing + last;\n };\n SecondsService.prototype.selectedIndex = function (value) {\n return Math.ceil(this.divideByStep(value));\n };\n SecondsService.prototype.valueInList = function (value) {\n if (!value) {\n return true;\n }\n var matchMax = this.insertUndividedMax && this.lastSecond(value) === value.getSeconds();\n return matchMax || !this.isMissing(value);\n };\n SecondsService.prototype.divideByStep = function (value) {\n return distanceFromMin(value.getSeconds(), this.min.getSeconds()) / this.step;\n };\n SecondsService.prototype.addLast = function (data, value) {\n if (this.insertUndividedMax && this.isLastMissing(value)) {\n data.push(this.toListItem(this.lastSecond(value)));\n }\n return data;\n };\n SecondsService.prototype.addMissing = function (data, value) {\n if (this.valueInList(value)) {\n return data;\n }\n var missingItem = this.toListItem(value.getSeconds());\n data.splice(this.selectedIndex(value), 0, missingItem);\n return data;\n };\n SecondsService.prototype.countFromMin = function (value) {\n var _a = this.range(value), min = _a[0], max = _a[1];\n return Math.floor(distanceFromMin(max, min) / this.step) + 1; /* include min */\n };\n SecondsService.prototype.isMissing = function (value) {\n if (!value) {\n return false;\n }\n return this.selectedIndex(value) !== this.divideByStep(value);\n };\n SecondsService.prototype.isLastMissing = function (value) {\n return this.isMissing(setSeconds(this.max, this.lastSecond(value)));\n };\n SecondsService.prototype.lastSecond = function (value) {\n return this.range(value)[1];\n };\n SecondsService.prototype.range = function (value) {\n var _a = this.limitRange(this.min, this.max, value), min = _a[0], max = _a[1];\n return [min.getSeconds(), max.getSeconds()];\n };\n return SecondsService;\n}());\nexport { SecondsService };\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 { cloneDate } from '@progress/kendo-date-math';\nimport { classNames, Keys } from '@progress/kendo-react-common';\nimport { provideIntlService, provideLocalizationService, registerForIntl, registerForLocalization } from '@progress/kendo-react-intl';\nimport { messages, now, selectNow } from '../messages';\nimport { TimeList } from './TimeList';\nimport { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../utils';\nimport { TIME_PART } from './models/TimePart';\nimport { generateSnappers, getNow, isInTimeRange, snapTime, timeInRange } from './utils';\nvar formatRegExp = new RegExp(TIME_PART.hour + \"|\" + TIME_PART.minute + \"|\" + TIME_PART.second + \"|\" + TIME_PART.dayperiod + \"|literal\");\n/**\n * @hidden\n */\nexport var Direction;\n(function (Direction) {\n Direction[Direction[\"Left\"] = 0] = \"Left\";\n Direction[Direction[\"Right\"] = 1] = \"Right\";\n})(Direction || (Direction = {}));\n/**\n * @hidden\n */\nvar TimePart = /** @class */ (function (_super) {\n __extends(TimePart, _super);\n function TimePart(props) {\n var _this = _super.call(this, props) || this;\n _this.timeLists = [];\n _this.focus = function (args) {\n Promise.resolve().then(function () {\n var timeList = _this.timeLists[0];\n if ((_this.state.activeListIndex === -1) && !_this.hasActiveButton() && timeList && timeList.element) {\n timeList.focus(args);\n }\n });\n };\n _this.timeFormatReducer = function (acc, current) { return acc + current.pattern; };\n // Filtering only the time part of the format.\n // Literal types are added if the previous part is\n // part of a time format.\n _this.timeFormatFilter = function (part, index, all) {\n var prevItem = index >= 1 && all[index - 1];\n if (!prevItem) {\n return formatRegExp.test(part.type || '');\n }\n if (prevItem && part.type === 'literal') {\n return formatRegExp.test(prevItem.type || '');\n }\n return formatRegExp.test(part.type || '');\n };\n _this.focusList = function (dir) {\n if (!_this.timeLists.length) {\n return;\n }\n _this.timeLists.reduce(_this.listReducer, ([]))\n .map(function (state) { return dir === Direction.Right ? state.next : state.prev; })\n .map(function (list) { return list && list.element && list.element.focus({ preventScroll: true }); });\n };\n _this.listReducer = function (state, list, idx, all) {\n if (state.length || list.props.id !== _this.state.activeListIndex) {\n return state;\n }\n return [{\n next: all[idx + 1] || list,\n prev: all[idx - 1] || list\n }];\n };\n _this.showNowButton = function () {\n return !_this.hasSteps() && _this.props.nowButton && isInTimeRange(getNow(), _this.min, _this.max);\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode;\n switch (keyCode) {\n case Keys.left:\n event.preventDefault();\n _this.focusList(Direction.Left);\n return;\n case Keys.right:\n event.preventDefault();\n _this.focusList(Direction.Right);\n return;\n default:\n return;\n }\n };\n _this.handleListBlur = function () {\n _this.nextTick(function () {\n _this.setState({ activeListIndex: -1 });\n });\n };\n _this.handleListFocus = function (idx) {\n clearTimeout(_this.nextTickId);\n _this.setState({\n activeListIndex: idx\n });\n };\n _this.handleChange = function (candidate) {\n var onChange = _this.props.onChange;\n if (onChange) {\n onChange.call(undefined, candidate);\n }\n };\n _this.snapTime = snapTime(generateSnappers(_this.props.steps, _this.props.min || TimePart.defaultProps.min));\n _this.state = {\n activeListIndex: -1\n };\n _this.hasActiveButton = _this.hasActiveButton.bind(_this);\n return _this;\n }\n Object.defineProperty(TimePart.prototype, \"element\", {\n /**\n * @hidden\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"value\", {\n get: function () {\n return timeInRange(this.snapTime(cloneDate(this.props.value || MIDNIGHT_DATE)), this.min, this.max);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"intl\", {\n get: function () {\n return provideIntlService(this);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"min\", {\n get: function () {\n return this.snapTime(this.props.min || TimePart.defaultProps.min);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"max\", {\n get: function () {\n return this.snapTime(this.props.max || TimePart.defaultProps.max);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"steps\", {\n get: function () {\n return this.props.steps || TimePart.defaultProps.steps;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePart.prototype, \"boundRange\", {\n get: function () {\n return this.props.boundRange !== undefined\n ? this.props.boundRange\n : TimePart.defaultProps.boundRange;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n TimePart.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n TimePart.prototype.componentDidMount = function () {\n var onMount = this.props.onMount;\n if (onMount) {\n onMount.call(undefined, this.value);\n }\n };\n /**\n * @hidden\n */\n TimePart.prototype.render = function () {\n var _this = this;\n var _a = this.props, format = _a.format, smoothScroll = _a.smoothScroll, onNowClick = _a.onNowClick, className = _a.className, disabled = _a.disabled;\n this.snapTime = snapTime(generateSnappers(this.steps, this.min));\n this.dateFormatParts = this.intl\n .splitDateFormat(format || TimePart.defaultProps.format)\n .filter(this.timeFormatFilter);\n var rootClassName = classNames({\n 'k-state-disabled': disabled\n }, className, 'k-time-part');\n this.timeLists = [];\n var localizationService = provideLocalizationService(this);\n var selectNowMessage = localizationService.toLanguageString(selectNow, messages[selectNow]);\n return (React.createElement(\"div\", { className: rootClassName },\n React.createElement(\"div\", { className: \"k-time-header\" },\n React.createElement(\"span\", { className: \"k-title\" }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ''))),\n this.showNowButton() &&\n React.createElement(\"button\", __assign({ type: \"button\", ref: function (btn) { _this._nowButton = btn; }, className: \"k-button k-flat k-time-now\", title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(now, messages[now]))),\n React.createElement(\"div\", { className: \"k-time-list-container\", onKeyDown: this.handleKeyDown },\n React.createElement(\"span\", { className: \"k-time-highlight\" }),\n this.dateFormatParts.map(function (part, idx) {\n return (part.type !== 'literal'\n ? React.createElement(\"div\", { key: idx, className: classNames('k-time-list-wrapper', {\n 'k-state-focused': idx === _this.state.activeListIndex\n }), role: \"presentation\", tabIndex: -1 },\n React.createElement(\"span\", { className: \"k-title\", onMouseDown: function (e) { e.preventDefault(); } }, _this.intl.dateFieldName(part)),\n React.createElement(TimeList, { min: _this.min, max: _this.max, boundRange: _this.boundRange, part: part, step: part.type ? _this.steps[part.type] : 1, smoothScroll: smoothScroll, ref: function (el) { if (!el) {\n return;\n } _this.timeLists.push(el); }, id: idx, onFocus: function () { _this.handleListFocus(idx); }, onBlur: _this.handleListBlur, onChange: _this.handleChange, value: _this.value, disabled: disabled }))\n : React.createElement(\"div\", { key: idx, className: \"k-time-separator\" }, part.pattern));\n }))));\n };\n TimePart.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 clearTimeout(this.nextTickId);\n this.nextTickId = window.setTimeout(function () { return f(); });\n };\n TimePart.prototype.hasActiveButton = function () {\n return document.activeElement === this._nowButton;\n };\n TimePart.prototype.hasSteps = function () {\n var _this = this;\n var keys = Object.keys(this.steps);\n return keys.length !== keys.reduce(function (acc, k) { return acc + _this.steps[k]; }, 0);\n };\n TimePart.propTypes = {\n cancelButton: PropTypes.bool,\n disabled: PropTypes.bool,\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 max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n nowButton: PropTypes.bool,\n steps: PropTypes.shape({\n hour: PropTypes.number,\n minute: PropTypes.number,\n second: PropTypes.number\n }),\n smoothScroll: PropTypes.bool,\n tabIndex: PropTypes.number,\n value: PropTypes.instanceOf(Date)\n };\n TimePart.defaultProps = {\n value: null,\n disabled: false,\n nowButton: true,\n cancelButton: true,\n format: 'hh:mm a',\n min: MIN_TIME,\n max: MAX_TIME,\n steps: {},\n boundRange: false\n };\n return TimePart;\n}(React.Component));\nexport { TimePart };\nregisterForIntl(TimePart);\nregisterForLocalization(TimePart);\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 { cloneDate } from '@progress/kendo-date-math';\nimport { classNames, Keys } from '@progress/kendo-react-common';\nimport { provideIntlService, registerForIntl, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { messages, timePickerCancel, timePickerSet } from '../messages';\nimport { MIN_TIME, MAX_TIME, MIDNIGHT_DATE } from '../utils';\nimport { generateGetters, getNow, valueMerger } from './utils';\nimport { TimePart } from './TimePart';\n/**\n * @hidden\n */\nexport var Direction;\n(function (Direction) {\n Direction[Direction[\"Left\"] = 0] = \"Left\";\n Direction[Direction[\"Right\"] = 1] = \"Right\";\n})(Direction || (Direction = {}));\n/**\n * @hidden\n */\nvar TimeSelector = /** @class */ (function (_super) {\n __extends(TimeSelector, _super);\n function TimeSelector(props) {\n var _this = _super.call(this, props) || this;\n _this.focusActiveList = function () {\n if (!_this.timePart) {\n return;\n }\n _this.timePart.focus({ preventScroll: true });\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode;\n switch (keyCode) {\n case Keys.enter:\n if (!_this.hasActiveButton()) {\n _this.handleAccept(event);\n }\n return;\n default:\n return;\n }\n };\n _this.handleAccept = function (event) {\n var value = _this.mergeValue(cloneDate(_this.value || getNow()), _this.timePart ? _this.timePart.value : _this.current);\n _this.setState({ value: value });\n _this.valueDuringOnChange = value;\n var onChange = _this.props.onChange;\n if (onChange) {\n onChange.call(undefined, {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: _this.value,\n target: _this\n });\n }\n _this.valueDuringOnChange = undefined;\n };\n _this.handleReject = function (event) {\n _this.setState({ current: _this.value });\n var onReject = _this.props.onReject;\n if (onReject) {\n onReject.call(undefined, event);\n }\n };\n _this.handleNowClick = function (event) {\n var now = _this.mergeValue(cloneDate(_this.value || getNow()), getNow());\n _this.setState({\n current: now,\n value: now\n });\n _this.valueDuringOnChange = now;\n var onChange = _this.props.onChange;\n if (onChange) {\n onChange.call(undefined, {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: _this.value,\n target: _this\n });\n }\n _this.valueDuringOnChange = undefined;\n };\n _this.handleChange = function (candidate) {\n _this.setState({ current: candidate });\n };\n _this.dateFormatParts = _this.intl.splitDateFormat(_this.props.format || TimeSelector.defaultProps.format);\n _this.mergeValue = valueMerger(generateGetters(_this.dateFormatParts));\n _this.hasActiveButton = _this.hasActiveButton.bind(_this);\n _this.state = {\n current: _this.props.value || MIDNIGHT_DATE,\n value: _this.props.value || TimeSelector.defaultProps.value\n };\n return _this;\n }\n Object.defineProperty(TimeSelector.prototype, \"element\", {\n /**\n * @hidden\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeSelector.prototype, \"value\", {\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)\n ? cloneDate(value)\n : null;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeSelector.prototype, \"intl\", {\n get: function () {\n return provideIntlService(this);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimeSelector.prototype, \"current\", {\n get: function () {\n return this.state.current !== null\n ? cloneDate(this.state.current)\n : null;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n TimeSelector.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n TimeSelector.prototype.render = function () {\n var _this = this;\n var _a = this.props, format = _a.format, cancelButton = _a.cancelButton, disabled = _a.disabled, tabIndex = _a.tabIndex, className = _a.className, smoothScroll = _a.smoothScroll, min = _a.min, max = _a.max, boundRange = _a.boundRange, nowButton = _a.nowButton, steps = _a.steps;\n var localizationService = provideLocalizationService(this);\n var cancelMessage = localizationService.toLanguageString(timePickerCancel, messages[timePickerCancel]);\n var setMessage = localizationService.toLanguageString(timePickerSet, messages[timePickerSet]);\n return (React.createElement(\"div\", { ref: function (el) { _this._element = el; }, tabIndex: !disabled ? tabIndex || 0 : undefined, className: classNames('k-timeselector k-reset', className, {\n 'k-state-disabled': disabled\n }), onKeyDown: this.handleKeyDown },\n React.createElement(TimePart, { ref: function (el) { _this.timePart = el; }, value: this.current, onChange: this.handleChange, onNowClick: this.handleNowClick, format: format, smoothScroll: smoothScroll, min: min, max: max, boundRange: boundRange, disabled: disabled, nowButton: nowButton, steps: steps }),\n React.createElement(\"div\", { className: \"k-time-footer k-actions k-hstack k-justify-content-stretch\" },\n cancelButton &&\n React.createElement(\"button\", __assign({ type: \"button\", ref: function (btn) { _this._cancelButton = btn; }, className: \"k-button k-time-cancel\", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),\n React.createElement(\"button\", __assign({ type: \"button\", ref: function (btn) { _this._acceptButton = btn; }, className: \"k-time-accept k-button k-primary\", onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));\n };\n TimeSelector.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 clearTimeout(this.nextTickId);\n this.nextTickId = window.setTimeout(function () { return f(); });\n };\n TimeSelector.prototype.hasActiveButton = function () {\n if (!this._acceptButton) {\n return false;\n }\n return document.activeElement === this._acceptButton\n || document.activeElement === this._cancelButton;\n };\n TimeSelector.propTypes = {\n cancelButton: PropTypes.bool,\n className: PropTypes.string,\n disabled: PropTypes.bool,\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 max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n nowButton: PropTypes.bool,\n steps: PropTypes.shape({\n hour: PropTypes.number,\n minute: PropTypes.number,\n second: PropTypes.number\n }),\n smoothScroll: PropTypes.bool,\n tabIndex: PropTypes.number,\n value: PropTypes.instanceOf(Date)\n };\n TimeSelector.defaultProps = {\n value: null,\n disabled: false,\n cancelButton: true,\n format: 't',\n min: MIN_TIME,\n max: MAX_TIME,\n boundRange: false\n };\n return TimeSelector;\n}(React.Component));\nexport { TimeSelector };\nregisterForIntl(TimeSelector);\nregisterForLocalization(TimeSelector);\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 { cloneDate } from '@progress/kendo-date-math';\nimport { classNames, guid, Keys, AsyncFocusBlur } from '@progress/kendo-react-common';\nimport { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { messages, toggleTimeSelector, toggleClock } from '../messages';\nimport { DateInput } from '../dateinput/DateInput';\nimport { TimeSelector } from './TimeSelector';\nimport { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';\nimport { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';\nimport { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n function TimePicker(props) {\n var _this = _super.call(this, props) || this;\n _this._popupId = guid();\n _this._element = null;\n _this._wrapper = null;\n _this._dateInput = React.createRef();\n _this._timeSelector = 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.setTimeSelectorRef = function (timeSelector) {\n _this._timeSelector = timeSelector;\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 var value = _this.mergeTime(event.value);\n _this.handleValueChange(__assign({}, event, { value: value }));\n };\n _this.handleValueChange = function (event) {\n _this.setState({\n value: cloneDate(event.value),\n show: false\n });\n _this.valueDuringOnChange = event.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.handleValueReject = function (_) {\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 || TimePicker.defaultProps.defaultValue,\n show: _this.props.defaultShow || TimePicker.defaultProps.defaultShow,\n focused: false\n };\n _this.normalizeTime = _this.normalizeTime.bind(_this);\n _this.setShow = _this.setShow.bind(_this);\n _this.nextTick = _this.nextTick.bind(_this);\n _this.mergeTime = _this.mergeTime.bind(_this);\n return _this;\n }\n Object.defineProperty(TimePicker.prototype, \"element\", {\n /**\n * Gets the wrapping element of the TimePicker.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"dateInput\", {\n /**\n * Gets the DateInput component inside the TimePicker component.\n */\n get: function () {\n return this._dateInput.current;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"timeSelector\", {\n /**\n * Gets the TimeSelector component inside the TimePicker component.\n */\n get: function () {\n return this._timeSelector;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"value\", {\n /**\n * Gets the value of the TimePicker.\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(TimePicker.prototype, \"show\", {\n /**\n * Gets the popup state of the TimeSelector.\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(TimePicker.prototype, \"name\", {\n /**\n * Gets the `name` property of the TimePicker.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"validity\", {\n /**\n * Represents the validity state into which the TimePicker is set.\n */\n get: function () {\n var value = this.value && this.normalizeTime(this.value);\n var min = this.normalizeTime(this.min);\n var max = this.normalizeTime(this.max);\n var inRange = isInRange(value, min, 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: isBiggerThanMax(value, max),\n rangeUnderflow: isSmallerThanMin(value, min),\n valid: valid,\n valueMissing: this.value === null\n };\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : TimePicker.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : TimePicker.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"popupSettings\", {\n get: function () {\n return this.props.popupSettings || TimePicker.defaultProps.popupSettings;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined ? this.props.min : TimePicker.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined ? this.props.max : TimePicker.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(TimePicker.prototype, \"dateInputComp\", {\n get: function () {\n return this.props.dateInput || TimePicker.defaultProps.dateInput;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n TimePicker.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 TimePicker.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n TimePicker.prototype.componentDidUpdate = function () {\n if (this._timeSelector && this.show && !this.prevShow) {\n this._timeSelector.focusActiveList();\n }\n else 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 TimePicker.prototype.render = function () {\n var _this = this;\n var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;\n var _b = this.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, [\"popupClass\"]);\n var isValid = !this.validityStyles || this.validity.valid;\n var rootClassName = classNames('k-widget k-timepicker', className);\n var wrapperClassNames = classNames('k-picker-wrap', {\n 'k-state-invalid': !isValid,\n 'k-state-disabled': disabled,\n 'k-state-focused': this.state.focused\n });\n var popupClassNames = classNames('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 max: this.normalizeTime(this.max),\n min: this.normalizeTime(this.min),\n name: name,\n onChange: this.handleInputValueChange,\n required: required,\n steps: steps,\n tabIndex: !this.show ? tabIndex : -1,\n title: title,\n valid: this.validity.valid,\n validationMessage: validationMessage,\n validityStyles: validityStyles,\n value: this.value && this.normalizeTime(this.value),\n label: undefined,\n placeholder: !this.state.focused ? this.props.placeholder : null,\n ariaHasPopup: true,\n ariaExpanded: this.show\n };\n var popupProps = __assign({ show: this.show, animate: this._wrapper !== null, anchor: this._wrapper, className: popupClassNames, id: this._popupId, anchorAlign: {\n horizontal: 'left',\n vertical: 'bottom'\n }, popupAlign: {\n horizontal: 'left',\n vertical: 'top'\n } }, otherPopupSettings);\n var timeSelector = (React.createElement(TimeSelector, { ref: this.setTimeSelectorRef, cancelButton: cancelButton, disabled: disabled, nowButton: nowButton, format: format, min: this.min, max: this.max, steps: steps, smoothScroll: smoothScroll, value: this.value, onChange: this.handleValueChange, onReject: this.handleValueReject }));\n var localizationService = provideLocalizationService(this);\n var toggleClockMessage = localizationService.toLanguageString(toggleClock, messages[toggleClock]);\n var toggleTimeMessage = localizationService\n .toLanguageString(toggleTimeSelector, messages[toggleTimeSelector]);\n var timepicker = (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 return (React.createElement(\"div\", { ref: function (span) { _this._element = span; }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },\n React.createElement(\"span\", { ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },\n React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),\n React.createElement(\"span\", __assign({ role: \"button\", onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: \"k-select\" }, {\n 'aria-controls': _this._popupId,\n 'aria-label': toggleClockMessage\n }),\n React.createElement(\"span\", { className: \"k-icon k-i-clock\" }))),\n _this.props.popup\n ? React.createElement(_this.props.popup, __assign({}, popupProps), timeSelector)\n : React.createElement(Popup, __assign({}, popupProps), timeSelector)));\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: timepicker, style: { width: this.props.width } }))\n : timepicker;\n };\n TimePicker.prototype.normalizeTime = function (date) {\n return setTime(MIDNIGHT_DATE, date);\n };\n TimePicker.prototype.setShow = function (show) {\n if (this.show === show) {\n return;\n }\n this.setState({ show: show });\n };\n TimePicker.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 clearTimeout(this.nextTickId);\n this.nextTickId = window.setTimeout(function () { return f(); });\n };\n TimePicker.prototype.mergeTime = function (value) {\n return this.value && value ? setTime(this.value, value) : value;\n };\n /**\n * @hidden\n */\n TimePicker.propTypes = {\n className: PropTypes.string,\n cancelButton: PropTypes.bool,\n nowButton: PropTypes.bool,\n defaultShow: PropTypes.bool,\n defaultValue: PropTypes.instanceOf(Date),\n disabled: PropTypes.bool,\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 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 steps: PropTypes.shape({\n hour: PropTypes.number,\n minute: PropTypes.number,\n second: PropTypes.number\n }),\n smoothScroll: PropTypes.bool,\n tabIndex: PropTypes.number,\n title: PropTypes.string,\n value: PropTypes.instanceOf(Date),\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 };\n /**\n * @hidden\n */\n TimePicker.defaultProps = {\n defaultShow: false,\n defaultValue: null,\n disabled: false,\n format: 't',\n max: MAX_TIME,\n min: MIN_TIME,\n popupSettings: {},\n tabIndex: 0,\n steps: {},\n required: false,\n validityStyles: true,\n dateInput: DateInput\n };\n return TimePicker;\n}(React.Component));\nexport { TimePicker };\nregisterForLocalization(TimePicker);\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 { View } from './View';\nimport { CalendarViewEnum } from '../models';\nimport { classNames } from '@progress/kendo-react-common';\nimport { cloneDate } from '@progress/kendo-date-math';\nimport { MAX_DATE, MIN_DATE } from '../../defaults';\nvar DEFAULT_FETCH_MONTHS_COUNT = 2;\n/**\n * @hidden\n */\nvar HorizontalViewList = /** @class */ (function (_super) {\n __extends(HorizontalViewList, _super);\n function HorizontalViewList(props) {\n var _this = _super.call(this, props) || this;\n _this.isActive = false;\n _this.focusActiveDate = function () {\n if (!_this._element) {\n return;\n }\n var focusedCell = _this._element.querySelector('td.k-state-focused');\n var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');\n if (focusedCell && focusedCell[0]) {\n focusedCell[0].classList.remove('k-state-focused');\n }\n if (nextActiveCell) {\n nextActiveCell.classList.add('k-state-focused');\n }\n _this.isActive = true;\n };\n _this.blurActiveDate = function () {\n if (!_this._element) {\n return;\n }\n var focusedCell = _this._element.querySelector('td.k-state-focused');\n if (focusedCell) {\n focusedCell.classList.remove('k-state-focused');\n }\n _this.isActive = false;\n };\n _this.rotateSelectionRange = function (selectionRange) {\n if (selectionRange.start === null || selectionRange.end === null) {\n return selectionRange;\n }\n var needRotate = selectionRange.end < selectionRange.start;\n return {\n start: needRotate ? selectionRange.end : selectionRange.start,\n end: needRotate ? selectionRange.start : selectionRange.end\n };\n };\n _this.handleDateChange = function (event, isTodayClick) {\n if (isTodayClick === void 0) { isTodayClick = false; }\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: cloneDate(event.value),\n target: _this,\n isTodayClick: isTodayClick\n };\n onChange.call(undefined, args);\n }\n };\n return _this;\n }\n Object.defineProperty(HorizontalViewList.prototype, \"element\", {\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(HorizontalViewList.prototype, \"weekNumber\", {\n get: function () {\n return Boolean(this.props.showWeekNumbers && this.props.activeView === CalendarViewEnum.month);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(HorizontalViewList.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : HorizontalViewList.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(HorizontalViewList.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : HorizontalViewList.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n HorizontalViewList.prototype.componentDidUpdate = function () {\n if (this.isActive) {\n this.focusActiveDate();\n }\n };\n HorizontalViewList.prototype.render = function () {\n var _this = this;\n var selectionRange = this.props.allowReverse\n ? this.rotateSelectionRange(this.props.selectionRange)\n : this.props.selectionRange;\n var rootClassNames = classNames('k-calendar-view k-hstack k-align-items-start k-justify-content-center', {\n 'k-calendar-monthview': this.props.activeView === CalendarViewEnum.month,\n 'k-calendar-yearview': this.props.activeView === CalendarViewEnum.year,\n 'k-calendar-decadeview': this.props.activeView === CalendarViewEnum.decade,\n 'k-calendar-centuryview': this.props.activeView === CalendarViewEnum.century\n });\n return (React.createElement(\"div\", { ref: function (el) { _this._element = el; }, className: rootClassNames }, this.props.dates.map(function (date) { return (React.createElement(\"table\", { className: \"k-calendar-table k-calendar-content k-content\", key: date.getTime() },\n React.createElement(View, { bus: _this.props.bus, service: _this.props.service, key: date.getTime(), direction: \"horizontal\", activeView: _this.props.activeView, cellUID: _this.props.cellUID, viewDate: date, min: _this.min, max: _this.max, focusedDate: _this.props.focusedDate, selectionRange: selectionRange, selectedDate: _this.props.value, showWeekNumbers: _this.weekNumber, onChange: _this.handleDateChange, onCellEnter: _this.props.onCellEnter, cell: _this.props.cell, weekCell: _this.props.weekCell }))); })));\n };\n HorizontalViewList.defaultProps = {\n showWeekNumbers: false,\n views: DEFAULT_FETCH_MONTHS_COUNT,\n take: DEFAULT_FETCH_MONTHS_COUNT,\n allowReverse: true,\n min: MIN_DATE,\n max: MAX_DATE\n };\n return HorizontalViewList;\n}(React.Component));\nexport { HorizontalViewList };\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 { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { classNames, guid, Keys } from '@progress/kendo-react-common';\nimport { cloneDate, isEqualDate, getDate } from '@progress/kendo-date-math';\nimport { Button } from '@progress/kendo-react-buttons';\nimport { Action, CalendarViewEnum, EMPTY_SELECTIONRANGE } from '../models';\nimport { Header } from './Header';\nimport { MIN_DATE, MAX_DATE } from '../../defaults';\nimport { messages, prevView, nextView } from '../../messages';\nimport { BusViewService, NavigationService } from '../services';\nimport { dateInRange, isInRange, viewInRange, getToday } from '../../utils';\nimport { HorizontalViewList } from './HorizontalViewList';\nimport { TodayCommand } from './TodayCommand';\nvar extractDateFromValue = function (min, max, value) {\n if (min === void 0) { min = MultiViewCalendar.defaultProps.min; }\n if (max === void 0) { max = MultiViewCalendar.defaultProps.max; }\n return value instanceof Date && !Array.isArray(value) && isInRange(getDate(value), min, max)\n ? getDate(value)\n : null;\n};\nvar extractMultipleFromValue = function (min, max, value) {\n if (min === void 0) { min = MultiViewCalendar.defaultProps.min; }\n if (max === void 0) { max = MultiViewCalendar.defaultProps.max; }\n return Array.isArray(value)\n ? value.filter(function (date) { return isInRange(date, min, max); }).map(function (date) { return getDate(date); })\n : null;\n};\nvar extractRangeFromValue = function (value) {\n return typeof value === 'object' && !(value instanceof Date) && value !== null && !Array.isArray(value)\n ? value\n : EMPTY_SELECTIONRANGE;\n};\nvar extractFocusedDate = function (single, multiple, range) {\n return single || (multiple && multiple[0]) || (range && range.start);\n};\nvar extractActiveRange = function (range, single) {\n return range.start === null && single === null\n ? 'start'\n : range.end === null\n ? 'end'\n : 'start';\n};\nvar MultiViewCalendar = /** @class */ (function (_super) {\n __extends(MultiViewCalendar, _super);\n function MultiViewCalendar(props) {\n var _this = _super.call(this, props) || this;\n _this.selectedDate = null;\n _this.selectedMultiple = null;\n _this.selectedRange = EMPTY_SELECTIONRANGE;\n _this.cellUID = guid();\n _this.activeRangeEnd = 'start';\n _this.wrapperID = guid();\n _this.isActive = false;\n _this.calculateFocusFromValue = true;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this._element) {\n _this._element.focus();\n }\n };\n _this.clampRange = function (value) { return ({ start: value, end: null }); };\n _this.rangeWithFocused = function (range, focusedDate) {\n return {\n start: range.start,\n end: range.end === null && range.start !== null && _this.isActive ? focusedDate : range.end\n };\n };\n _this.generateRange = function (candidate, value) {\n var end = value.end, start = value.start;\n var shouldSwap = value.start !== null && candidate.getTime() <= value.start.getTime();\n if (!_this.props.allowReverse && shouldSwap) {\n return { start: candidate, end: _this.selectedRange.start };\n }\n return _this.activeRange !== 'end'\n ? ({ start: candidate, end: end })\n : ({ start: start || _this.selectedDate, end: candidate });\n };\n _this.canNavigate = function (action) {\n if (!_this.service) {\n return false;\n }\n var candidate = _this.service.move(_this.focusedDate, action);\n return (_this.min <= candidate && candidate <= _this.max)\n || _this.service.isInSameView(candidate, _this.min)\n || _this.service.isInSameView(candidate, _this.max);\n };\n _this.isListInRange = function (list) {\n return _this.min < list[0]\n && _this.max > list[Math.max(0, (_this.props.views || MultiViewCalendar.defaultProps.views) - 1)];\n };\n _this.navigate = function (action) {\n _this.calculateFocusFromValue = false;\n var candidate = _this.move(action);\n _this.setState({ focusedDate: candidate });\n };\n _this.move = function (action) {\n return _this.clampDate(_this.service.move(_this.focusedDate, action));\n };\n _this.clampDate = function (value) {\n return dateInRange(value, _this.min, _this.max);\n };\n _this.shouldAutoCorrect = function (candidate, value) {\n var end = value.end, start = value.start;\n if (_this.activeRange !== 'end') {\n return end !== null && candidate > end;\n }\n else {\n return start !== null && candidate < start;\n }\n };\n _this.handleCellEnter = function (value) {\n if (_this.props.mode === 'range') {\n _this.calculateFocusFromValue = false;\n _this.setState({\n focusedDate: value\n });\n }\n };\n _this.handleMouseDown = function (event) {\n event.preventDefault();\n };\n _this.handleClick = function (_) {\n if (!_this._element) {\n return;\n }\n _this._element.focus({ preventScroll: true });\n };\n _this.handleFocus = function (event) {\n _this.isActive = true;\n if (!_this.calendarViewList) {\n return;\n }\n _this.calendarViewList.focusActiveDate();\n var onFocus = _this.props.onFocus;\n if (onFocus) {\n onFocus.call(undefined, event);\n }\n };\n _this.handleBlur = function (event) {\n _this.isActive = false;\n if (!_this.calendarViewList) {\n return;\n }\n _this.calendarViewList.blurActiveDate();\n var onBlur = _this.props.onBlur;\n if (onBlur) {\n onBlur.call(undefined, event);\n }\n };\n _this.handleTodayClick = function (event) {\n if (!_this.todayIsInRange) {\n return;\n }\n _this.handleDateChange.call(undefined, event, true);\n };\n _this.handlePrevButtonClick = function () {\n _this.navigate(Action.PrevView);\n };\n _this.handleNextButtonClick = function () {\n _this.navigate(Action.NextView);\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode;\n if (keyCode === Keys.enter) {\n var args = {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: _this.focusedDate,\n target: _this\n };\n _this.handleDateChange.call(undefined, args);\n }\n else {\n var candidate = dateInRange(_this.navigation.move(_this.focusedDate, _this.navigation.action(event), _this.state.activeView, _this.service, event), _this.min, _this.max);\n if (isEqualDate(_this.focusedDate, candidate)) {\n return;\n }\n _this.calculateFocusFromValue = false;\n _this.setState({ focusedDate: candidate });\n }\n event.preventDefault();\n };\n _this.handleViewChange = function (_a) {\n var view = _a.view;\n _this.setState({ activeView: view });\n };\n _this.handleDateChange = function (event) {\n var focusedDate = cloneDate(event.value);\n var canNavigateDown = _this.bus.canMoveDown(_this.state.activeView);\n if (_this.props.disabled) {\n return;\n }\n if (canNavigateDown) {\n if (event.isTodayClick) {\n _this.bus.moveToBottom(_this.state.activeView);\n }\n else {\n _this.bus.moveDown(_this.state.activeView, event.syntheticEvent);\n _this.setState({ focusedDate: focusedDate });\n return;\n }\n }\n _this.calculateFocusFromValue = true;\n var value;\n switch (_this.props.mode) {\n case 'single':\n value = cloneDate(event.value);\n break;\n case 'multiple':\n if (Array.isArray(_this.selectedMultiple)) {\n var result = _this.selectedMultiple.slice();\n var index_1 = -1;\n result.forEach(function (date, idx) {\n if (isEqualDate(date, event.value)) {\n index_1 = idx;\n }\n });\n index_1 !== -1\n ? result.splice(index_1, 1)\n : result.push(cloneDate(event.value));\n value = result.slice();\n }\n else {\n if (_this.selectedDate) {\n value = [cloneDate(_this.selectedDate), cloneDate(event.value)];\n }\n else {\n value = [cloneDate(event.value)];\n }\n }\n break;\n case 'range':\n var hasSelection = _this.selectedRange.start !== null\n && _this.selectedRange.end !== null\n && _this.activeRange === 'start';\n value = hasSelection\n ? _this.clampRange(event.value)\n : _this.generateRange(event.value, _this.selectedRange);\n _this.activeRangeEnd = _this.activeRange !== 'end' ? 'end' : 'start';\n break;\n default:\n value = cloneDate(event.value);\n break;\n }\n _this.valueDuringOnChange = value;\n _this.setState({ value: value, focusedDate: focusedDate });\n _this.valueDuringOnChange = value;\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: value,\n target: _this\n };\n onChange.call(undefined, args);\n }\n _this.valueDuringOnChange = undefined;\n };\n var value = props.value !== undefined\n ? props.value\n : props.defaultValue || MultiViewCalendar.defaultProps.defaultValue;\n var selectedDate = extractDateFromValue(_this.min, _this.max, value);\n var selectedMultiple = extractMultipleFromValue(_this.min, _this.max, value);\n var selectedRange = extractRangeFromValue(value);\n var calculatedFocus = extractFocusedDate(selectedDate, selectedMultiple, selectedRange);\n var activeView = viewInRange(CalendarViewEnum[props.defaultActiveView], _this.bottomView, _this.topView);\n var focusedDate = dateInRange(props.focusedDate || calculatedFocus || getToday(), _this.min, _this.max);\n _this.state = {\n value: value,\n activeView: activeView,\n focusedDate: focusedDate\n };\n _this.activeRangeEnd = extractActiveRange(selectedRange, selectedDate);\n _this.bus = new BusViewService(_this.handleViewChange);\n _this.navigation = new NavigationService(_this.bus);\n _this.calculateFocusFromValue = false;\n _this.lastView = activeView;\n _this.lastViewsCount = _this.props.views || HorizontalViewList.defaultProps.views;\n return _this;\n }\n Object.defineProperty(MultiViewCalendar.prototype, \"element\", {\n /**\n * Gets the wrapping element of the MultiViewCalendar component.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"value\", {\n /**\n * Gets the value of the MultiViewCalendar.\n */\n get: function () {\n return this.valueDuringOnChange !== undefined\n ? this.valueDuringOnChange\n : this.props.value !== undefined\n ? this.props.value\n : this.state.value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"focusedDate\", {\n /**\n * Gets the current focused date of the MultiViewCalendar.\n */\n get: function () {\n return cloneDate(this._focusedDate);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"min\", {\n get: function () {\n return getDate(this.props.min !== undefined\n ? this.props.min\n : MultiViewCalendar.defaultProps.min);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"max\", {\n get: function () {\n return getDate(this.props.max !== undefined\n ? this.props.max\n : MultiViewCalendar.defaultProps.max);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"bottomView\", {\n get: function () {\n return CalendarViewEnum[this.props.bottomView !== undefined\n ? this.props.bottomView\n : MultiViewCalendar.defaultProps.bottomView];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"topView\", {\n get: function () {\n return CalendarViewEnum[this.props.topView !== undefined\n ? this.props.topView\n : MultiViewCalendar.defaultProps.topView];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"activeRange\", {\n get: function () {\n return this.props.activeRangeEnd !== undefined\n ? this.props.activeRangeEnd\n : this.activeRangeEnd;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(MultiViewCalendar.prototype, \"todayIsInRange\", {\n get: function () {\n return isInRange(getToday(), getDate(this.min), getDate(this.max));\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n MultiViewCalendar.prototype.componentDidMount = function () {\n this.calculateFocusFromValue = true;\n };\n /**\n * @hidden\n */\n MultiViewCalendar.prototype.componentDidUpdate = function () {\n if (this.calendarViewList) {\n (this.isActive ? this.calendarViewList.focusActiveDate : this.calendarViewList.blurActiveDate)();\n }\n var stateValue = extractDateFromValue(this.min, this.max, this.value);\n this.calculateFocusFromValue = Boolean(this.selectedDate\n && stateValue\n && (this.selectedDate.getTime() && stateValue.getTime()));\n this.lastView = this.state.activeView;\n this.lastViewsCount = this.props.views || HorizontalViewList.defaultProps.views;\n };\n /**\n * @hidden\n */\n MultiViewCalendar.prototype.render = function () {\n var _this = this;\n if (this.props._ref) {\n this.props._ref(this);\n }\n this.intl = provideIntlService(this);\n this.localization = provideLocalizationService(this);\n this.bus.configure(this.bottomView, this.topView);\n var activeView = viewInRange(this.state.activeView, this.bottomView, this.topView);\n this.service = this.bus.service(activeView, this.intl);\n this.selectedDate = extractDateFromValue(this.min, this.max, this.value);\n this.selectedMultiple = extractMultipleFromValue(this.min, this.max, this.value);\n this.selectedRange = extractRangeFromValue(this.value);\n var calculatedFocus = extractFocusedDate(this.selectedDate, this.selectedMultiple, this.selectedRange);\n this._focusedDate = dateInRange(this.calculateFocusFromValue && calculatedFocus !== null\n ? calculatedFocus\n : this.state.focusedDate, this.min, this.max);\n var wrapperClassName = classNames('k-widget k-calendar k-calendar-range', {\n 'k-state-disabled': this.props.disabled\n }, this.props.className);\n var visualizedRange = this.rangeWithFocused(this.selectedRange, this.focusedDate);\n var wrapperAria = {\n 'aria-disabled': this.props.disabled,\n 'aria-activedescendant': this.cellUID + this.focusedDate.getTime()\n };\n var prevViewTitle = this.localization.toLanguageString(prevView, messages[prevView]);\n var nextViewTittle = this.localization.toLanguageString(nextView, messages[nextView]);\n var isPrevDisabled = !this.canNavigate(Action.PrevView);\n var isNextDisabled = !this.canNavigate(Action.NextView);\n var prevBtnAria = { 'aria-disabled': isPrevDisabled };\n var nextBtnAria = { 'aria-disabled': isNextDisabled };\n var didViewChange = this.lastView !== activeView;\n var isDateInList = this.dates && this.service.isInArray(this.focusedDate, this.dates);\n var didViewsCountChange = this.lastViewsCount !== this.props.views;\n if (!isDateInList || didViewChange || didViewsCountChange) {\n this.dates = this.service.datesList(this.focusedDate, this.props.views || HorizontalViewList.defaultProps.views);\n }\n var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());\n return (React.createElement(\"div\", __assign({ ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, \"aria-labelledby\": this.props.ariaLabelledBy, \"aria-describedby\": this.props.ariaDescribedBy, role: 'grid', tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, wrapperAria),\n React.createElement(Header, { key: \".kendo.calendar.header.\" + activeDate.getTime(), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,\n React.createElement(Button, __assign({ type: \"button\", className: \"k-nav-prev\", icon: \"arrow-chevron-left\", look: \"flat\", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),\n React.createElement(TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),\n React.createElement(Button, __assign({ type: \"button\", className: \"k-nav-next\", icon: \"arrow-chevron-right\", look: \"flat\", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),\n React.createElement(HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle })));\n };\n /**\n * @hidden\n */\n MultiViewCalendar.propTypes = {\n activeRangeEnd: PropTypes.oneOf(['start', 'end']),\n allowReverse: PropTypes.bool,\n bottomView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),\n className: PropTypes.string,\n defaultActiveView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),\n defaultValue: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })\n ]),\n disabled: PropTypes.bool,\n focusedDate: PropTypes.instanceOf(Date),\n id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n mode: PropTypes.oneOf(['single', 'multiple', 'range']),\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n tabIndex: PropTypes.number,\n topView: PropTypes.oneOf(['month', 'year', 'decade', 'century']),\n value: PropTypes.oneOfType([\n PropTypes.instanceOf(Date),\n PropTypes.arrayOf(PropTypes.instanceOf(Date)),\n PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })\n ]),\n views: function (props, propName, componentName) {\n var views = props[propName];\n if (views !== undefined && views < 1) {\n return new Error(\"Invalid prop '\" + propName + \"' supplied to\" +\n (\"'\" + componentName + \"'. The '\" + propName + \"' property cannot be less than 1'\"));\n }\n return null;\n },\n weekNumber: PropTypes.bool\n };\n /**\n * @hidden\n */\n MultiViewCalendar.defaultProps = {\n disabled: false,\n min: MIN_DATE,\n max: MAX_DATE,\n navigation: true,\n defaultActiveView: 'month',\n defaultValue: null,\n topView: 'century',\n tabIndex: 0,\n bottomView: 'month',\n views: 2,\n allowReverse: false\n };\n return MultiViewCalendar;\n}(React.Component));\nexport { MultiViewCalendar };\nregisterForIntl(MultiViewCalendar);\nregisterForLocalization(MultiViewCalendar);\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 { Popup } from '@progress/kendo-react-popup';\nimport { cloneDate } from '@progress/kendo-date-math';\nimport { guid, classNames, Keys } from '@progress/kendo-react-common';\nimport { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { DateInput } from '../dateinput/DateInput';\nimport { MultiViewCalendar } from '../calendar/components/MultiViewCalendar';\nimport { EMPTY_SELECTIONRANGE } from '../calendar/models';\nimport { MIN_DATE, MAX_DATE } from '../defaults';\nimport { swapStartEnd, start, end, separator, messages } from '../messages';\nvar WRAPPER_STYLES = { display: 'inline-block' };\nvar DateRangePicker = /** @class */ (function (_super) {\n __extends(DateRangePicker, _super);\n function DateRangePicker(props) {\n var _this = _super.call(this, props) || this;\n _this._element = null;\n _this._wrapper = null;\n _this._calendar = null;\n _this._startDateInput = React.createRef();\n _this._endDateInput = React.createRef();\n _this._popupId = guid();\n _this._startInputId = guid();\n _this._endInputId = guid();\n _this.shouldFocusDateInput = false;\n _this.shouldFocusCalendar = false;\n /**\n * @hidden\n */\n _this.focus = function () {\n if (_this.startDateInput) {\n _this.startDateInput.focus();\n }\n };\n _this.setCalendarRef = function (calendar) {\n _this._calendar = calendar;\n };\n _this.focusCalendarElement = function () {\n if (_this._calendar && _this._calendar.element) {\n _this._calendar.element.focus({ preventScroll: true });\n }\n };\n _this.calculateValue = function (props, state) {\n var value = props.value !== undefined\n ? props.value\n : state.value;\n return value || EMPTY_SELECTIONRANGE;\n };\n _this.calculateShow = function (nextProps, nextState) {\n return nextProps.show !== undefined\n ? nextProps.show\n : nextState.show;\n };\n _this.handleReverseClick = function (event) {\n var value = {\n start: _this.value.end,\n end: _this.value.start\n };\n var args = {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent\n };\n _this.handleChange(value, args);\n };\n _this.handleReverseMouseDown = function (event) {\n event.preventDefault();\n };\n _this.handleFocus = function (event) {\n clearTimeout(_this.nextTickId);\n if (!_this.shouldFocusDateInput) {\n _this.setShow(true);\n }\n if (_this.startDateInput && _this.startDateInput.element) {\n _this.startDateInput.element.classList.add('k-state-focused');\n }\n if (_this.endDateInput && _this.endDateInput.element) {\n _this.endDateInput.element.classList.add('k-state-focused');\n }\n var onFocus = _this.props.onFocus;\n if (onFocus) {\n onFocus.call(undefined, event);\n }\n };\n _this.handleBlur = function (event) {\n _this.nextTick(function () {\n if (_this.startDateInput && _this.startDateInput.element) {\n _this.startDateInput.element.classList.remove('k-state-focused');\n }\n if (_this.endDateInput && _this.endDateInput.element) {\n _this.endDateInput.element.classList.remove('k-state-focused');\n }\n _this.setShow(false);\n });\n var onBlur = _this.props.onBlur;\n if (onBlur) {\n onBlur.call(undefined, event);\n }\n };\n _this.handleEndChange = function (event) {\n var value = {\n start: _this.value.start,\n end: cloneDate(event.value || undefined)\n };\n _this.handleChange(value, event);\n };\n _this.handleStartChange = function (event) {\n var value = {\n start: cloneDate(event.value || undefined),\n end: _this.value.end\n };\n _this.handleChange(value, event);\n };\n _this.extractRangeFromValue = function (event) {\n if (!Array.isArray(event.value) && !(event.value instanceof Date)) {\n return event.value || EMPTY_SELECTIONRANGE;\n }\n var candidate = Array.isArray(event.value) ? event.value[0] : event.value;\n return {\n start: _this.value.end !== null ? candidate : _this.value.start,\n end: _this.value.start !== null ? candidate : _this.value.end\n };\n };\n _this.handleCalendarChange = function (event) {\n var value = _this.extractRangeFromValue(event);\n _this.handleChange(value, event);\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode, altKey = event.altKey;\n if (keyCode === Keys.esc) {\n event.preventDefault();\n _this.shouldFocusDateInput = true;\n _this.setShow(false);\n }\n else if (altKey && keyCode === Keys.down) {\n event.preventDefault();\n _this.shouldFocusCalendar = true;\n _this.setShow(true);\n }\n else if (keyCode === Keys.tab\n && _this.show\n && _this._calendar\n && _this._calendar.element\n && _this.endDateInput\n && _this.endDateInput.element\n && document\n && document.activeElement === _this.endDateInput.element) {\n event.preventDefault();\n _this.focusCalendarElement();\n }\n };\n _this.handleChange = function (value, event) {\n _this.setState({ value: value });\n _this.valueDuringOnChange = value;\n var onChange = _this.props.onChange;\n if (onChange) {\n var args = {\n syntheticEvent: event.syntheticEvent,\n nativeEvent: event.nativeEvent,\n value: _this.value,\n show: _this.show,\n target: _this\n };\n onChange.call(undefined, args);\n }\n _this.valueDuringOnChange = undefined;\n };\n validatePackage(packageMetadata);\n _this.state = {\n show: _this.props.show || _this.props.defaultShow || DateRangePicker.defaultProps.defaultShow,\n value: _this.props.value || _this.props.defaultValue || DateRangePicker.defaultProps.defaultValue\n };\n _this.nextTick = _this.nextTick.bind(_this);\n _this.setShow = _this.setShow.bind(_this);\n _this.focusCalendarElement = _this.focusCalendarElement.bind(_this);\n _this.focusDateInputElement = _this.focusDateInputElement.bind(_this);\n return _this;\n }\n Object.defineProperty(DateRangePicker.prototype, \"element\", {\n /**\n * Gets the wrapping element of the DateRangePicker.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"startDateInput\", {\n /**\n * Gets the start DateInput component inside the DatePicker component.\n */\n get: function () {\n return this._startDateInput.current;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"endDateInput\", {\n /**\n * Gets the end DateInput component inside the DatePicker component.\n */\n get: function () {\n return this._endDateInput.current;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"calendar\", {\n /**\n * Gets the MultiVieCalendar inside the DateRangePicker.\n */\n get: function () {\n return this._calendar;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"value\", {\n /**\n * Gets the value of the DateRangePicker.\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 || EMPTY_SELECTIONRANGE;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"show\", {\n /**\n * Gets the popup state of the DateRangePicker.\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(DateRangePicker.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : DateRangePicker.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateRangePicker.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : DateRangePicker.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DateRangePicker.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 DateRangePicker.prototype.componentDidUpdate = function () {\n if (this.shouldFocusCalendar) {\n this.focusCalendarElement();\n }\n if (this.shouldFocusDateInput) {\n this.focusDateInputElement();\n }\n this.shouldFocusCalendar = false;\n this.shouldFocusDateInput = false;\n };\n /**\n * @hidden\n */\n DateRangePicker.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n DateRangePicker.prototype.render = function () {\n var _this = this;\n var value = this.value || EMPTY_SELECTIONRANGE;\n var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;\n var endDateInputId = (this.props.endDateInputSettings || {}).id || this._endInputId;\n var rootClassName = classNames('k-daterangepicker', {\n 'k-state-disabled': this.props.disabled\n }, this.props.className);\n var localizationService = provideLocalizationService(this);\n var startMessage = localizationService.toLanguageString(start, messages[start]);\n var endMessage = localizationService.toLanguageString(end, messages[end]);\n var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);\n var startDateInputProps = __assign({ label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, ariaHasPopup: true, ariaExpanded: this.show }, this.props.startDateInputSettings, { value: value.start, onChange: this.handleStartChange });\n var endDateInputProps = __assign({ label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, ariaHasPopup: true, ariaExpanded: this.show }, this.props.endDateInputSettings, { value: value.end, onChange: this.handleEndChange });\n var popupProps = __assign({ animate: this._wrapper !== null, anchor: this._wrapper, id: this._popupId, anchorAlign: {\n horizontal: 'left',\n vertical: 'bottom'\n }, popupAlign: {\n horizontal: 'left',\n vertical: 'top'\n } }, this.props.popupSettings, { show: this.show });\n var calendarProps = __assign({ min: this.min, max: this.max, allowReverse: this.props.allowReverse, mode: 'range', focusedDate: this.props.focusedDate, disabled: this.props.disabled }, this.props.calendarSettings, { value: value, onChange: this.handleCalendarChange });\n var calendar = this.props.calendar\n ? React.createElement(this.props.calendar, __assign({}, calendarProps))\n : React.createElement(MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));\n var reverseButton = (React.createElement(\"span\", __assign({ role: \"button\", className: \"k-select k-button k-flat\", title: provideLocalizationService(this)\n .toLanguageString(swapStartEnd, messages[swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {\n 'aria-controls': startDateInputId + ' ' + endDateInputId,\n 'aria-label': provideLocalizationService(this)\n .toLanguageString(swapStartEnd, messages[swapStartEnd])\n }),\n React.createElement(\"span\", { style: { transform: 'rotate(90deg)' }, className: \"k-icon k-i-arrows-swap\" })));\n return (React.createElement(\"span\", { ref: function (span) {\n _this._element = span;\n }, className: rootClassName, style: this.props.style, id: this.props.id, \"aria-labelledby\": this.props.ariaLabelledBy, \"aria-describedby\": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },\n React.createElement(\"span\", { ref: function (span) {\n _this._wrapper = span;\n }, className: \"k-daterangepicker-wrap\", style: WRAPPER_STYLES },\n this.props.startDateInput\n ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))\n : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),\n (this.props.allowReverse\n || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))\n && this.props.swapButton\n ? (reverseButton)\n : (separatorMessage),\n this.props.endDateInput\n ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))\n : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput }))),\n this.props.popup\n ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)\n : React.createElement(Popup, __assign({}, popupProps), calendar)));\n };\n DateRangePicker.prototype.focusDateInputElement = function () {\n if (!document || !this.startDateInput || !this.startDateInput.element\n || !this.endDateInput || !this.endDateInput.element) {\n return;\n }\n if ((this.value.start === null || this.value.end !== null)\n && document.activeElement !== this.endDateInput.element) {\n this.startDateInput.element.focus({ preventScroll: true });\n }\n else if (document.activeElement !== this.startDateInput.element) {\n this.endDateInput.element.focus({ preventScroll: true });\n }\n };\n DateRangePicker.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 DateRangePicker.prototype.setShow = function (show) {\n if (this.show === show) {\n return;\n }\n this.setState({ show: show });\n };\n /**\n * @hidden\n */\n DateRangePicker.propTypes = {\n allowReverse: PropTypes.bool,\n calendarSettings: PropTypes.any,\n className: PropTypes.string,\n defaultShow: PropTypes.bool,\n defaultValue: PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) }),\n disabled: PropTypes.bool,\n endDateInputSettings: PropTypes.shape(DateInput.propTypes),\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 id: PropTypes.string,\n ariaLabelledBy: PropTypes.string,\n ariaDescribedBy: PropTypes.string,\n max: PropTypes.instanceOf(Date),\n min: PropTypes.instanceOf(Date),\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n popupSettings: PropTypes.any,\n show: PropTypes.bool,\n startDateInputSettings: PropTypes.any,\n style: PropTypes.any,\n swapButton: PropTypes.any,\n tabIndex: PropTypes.number,\n value: PropTypes.shape({ start: PropTypes.instanceOf(Date), end: PropTypes.instanceOf(Date) })\n };\n /**\n * @hidden\n */\n DateRangePicker.defaultProps = {\n allowReverse: false,\n defaultShow: false,\n defaultValue: EMPTY_SELECTIONRANGE,\n disabled: false,\n format: 'd',\n max: MAX_DATE,\n min: MIN_DATE,\n swapButton: false\n };\n return DateRangePicker;\n}(React.Component));\nexport { DateRangePicker };\nregisterForLocalization(DateRangePicker);\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 { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { messages, date, time, dateTimePickerCancel as cancel, dateTimePickerSet as set } from '../messages';\nimport { Button, ButtonGroup } from '@progress/kendo-react-buttons';\nimport { Calendar } from '../calendar/components/Calendar';\nimport { TimePart } from '../timepicker/TimePart';\nimport { setTime, getToday, MIN_TIME, MAX_TIME } from '../utils';\nimport { isEqualDate } from '@progress/kendo-date-math';\nimport { Keys, classNames } from '@progress/kendo-react-common';\nimport { MIDNIGHT_DATE } from '../defaults';\nimport { getNow } from '../timepicker/utils';\n/**\n * @hidden\n */\nvar DateTimeSelector = /** @class */ (function (_super) {\n __extends(DateTimeSelector, _super);\n function DateTimeSelector(props) {\n var _this = _super.call(this, props) || this;\n _this._calendarWrap = null;\n _this.focus = function (args) {\n // Async to avoid stealing the focus from the DateInput on close\n Promise.resolve().then(function () {\n if (_this.state.tab === 'time' && _this._timePart) {\n _this._timePart.focus(args);\n }\n var calendarElement = _this.calendarElement();\n if (_this.state.tab === 'date' && calendarElement) {\n calendarElement.focus(args);\n }\n });\n };\n _this.calendarElement = function () {\n return (_this._calendar && _this._calendar.element) ||\n (_this._calendarWrap && _this._calendarWrap.querySelector('.k-widget.k-calendar'));\n };\n _this.move = function (direction) {\n if (direction === 'right' && _this.state.tab === 'time') {\n return;\n }\n if (direction === 'left' && _this.state.tab === 'date') {\n return;\n }\n var nextPart = direction === 'left' ? 'date' : 'time';\n _this.shouldFocusPart = true;\n _this.setState({ tab: nextPart });\n };\n _this.handleReject = function (event) {\n _this.setState({ dateValue: _this.props.value, timeValue: _this.props.value || MIDNIGHT_DATE });\n var value = _this.mergeDate(_this.props.value, _this.props.value || MIDNIGHT_DATE);\n if (_this.props.onReject) {\n var args = {\n nativeEvent: event.nativeEvent,\n syntheticEvent: event,\n target: _this,\n value: value\n };\n _this.props.onReject.call(undefined, args);\n }\n };\n _this.handleAccept = function (event, timeOverride) {\n if (!_this.state.dateValue || !_this.state.timeValue || !_this.hasDateValue) {\n return;\n }\n var value = _this.mergeDate(_this.state.dateValue, timeOverride || _this.state.timeValue);\n _this.props.onChange.call(undefined, {\n syntheticEvent: event,\n nativeEvent: event.nativeEvent,\n value: value,\n target: _this\n });\n };\n _this.handleNowClick = function (event) {\n _this.setState({ timeValue: getNow() });\n _this.handleAccept(event, getNow());\n };\n _this.handleCalendarValueChange = function (event) {\n event.syntheticEvent.stopPropagation();\n _this.setState({ dateValue: event.value, tab: 'time' });\n _this.shouldFocusPart = true;\n };\n _this.handleTimeListContainerChange = function (candidate) {\n _this.setState({ timeValue: candidate });\n };\n _this.handleDateClick = function (event) {\n event.stopPropagation();\n _this.move('left');\n };\n _this.handleTimeClick = function (event) {\n event.stopPropagation();\n _this.move('right');\n };\n _this.handleKeyDown = function (event) {\n var keyCode = event.keyCode, altKey = event.altKey;\n switch (keyCode) {\n case Keys.enter:\n if (!_this.hasActiveButton() && _this.hasDateValue) {\n _this.handleAccept(event);\n }\n return;\n case Keys.left:\n if (!altKey) {\n return;\n }\n _this.move('left');\n return;\n case Keys.right:\n if (!altKey) {\n return;\n }\n _this.move('right');\n return;\n default:\n return;\n }\n };\n _this.handleTimePartMount = function (value) {\n _this.setState({ timeValue: value });\n };\n _this.state = {\n tab: 'date',\n dateValue: _this.props.value,\n timeValue: _this.props.value || MIDNIGHT_DATE\n };\n return _this;\n }\n Object.defineProperty(DateTimeSelector.prototype, \"calendar\", {\n get: function () {\n return this._calendar;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimeSelector.prototype, \"timePart\", {\n get: function () {\n return this._timePart;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimeSelector.prototype, \"hasDateValue\", {\n get: function () {\n return this.state.dateValue !== null;\n },\n enumerable: true,\n configurable: true\n });\n DateTimeSelector.prototype.componentDidUpdate = function () {\n if (this.shouldFocusPart) {\n this.focus({ preventScroll: true });\n }\n this.shouldFocusPart = false;\n };\n DateTimeSelector.prototype.render = function () {\n var _this = this;\n var _a = this.props, disabled = _a.disabled, cancelButton = _a.cancelButton, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, format = _a.format;\n var rootClassName = classNames({\n 'k-date-tab': this.state.tab === 'date',\n 'k-time-tab': this.state.tab === 'time',\n 'k-state-disabled': disabled\n }, 'k-datetime-wrap');\n var setButtonClassName = classNames({ 'k-state-disabled': !this.hasDateValue }, 'k-time-accept k-button k-primary');\n var localizationService = provideLocalizationService(this);\n var dateMessage = localizationService.toLanguageString(date, messages[date]);\n var timeMessage = localizationService.toLanguageString(time, messages[time]);\n var cancelMessage = localizationService.toLanguageString(cancel, messages[cancel]);\n var setMessage = localizationService.toLanguageString(set, messages[set]);\n var calendarProps = {\n min: min, max: max, weekNumber: weekNumber, focusedDate: focusedDate,\n disabled: disabled || this.state.tab !== 'date',\n value: this.state.dateValue,\n onChange: this.handleCalendarValueChange,\n navigation: false\n };\n return (React.createElement(\"div\", { onKeyDown: this.handleKeyDown, className: rootClassName, tabIndex: -1 },\n React.createElement(\"div\", { className: \"k-datetime-buttongroup\" },\n React.createElement(ButtonGroup, { width: \"100%\" },\n React.createElement(Button, { type: \"button\", selected: this.state.tab === 'date', togglable: true, onClick: this.handleDateClick }, dateMessage),\n React.createElement(Button, { type: \"button\", selected: this.state.tab === 'time', togglable: true, onClick: this.handleTimeClick }, timeMessage))),\n React.createElement(\"div\", { className: \"k-datetime-selector\" },\n React.createElement(\"div\", { className: \"k-datetime-calendar-wrap\", ref: function (e) { return _this._calendarWrap = e; } }, this.props.calendar ?\n React.createElement(this.props.calendar, __assign({}, calendarProps)) :\n React.createElement(Calendar, __assign({ ref: function (calendar) { _this._calendar = calendar; } }, calendarProps))),\n React.createElement(\"div\", { className: \"k-datetime-time-wrap\" }, React.createElement(TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || MIN_TIME, max: this.maxTime || MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount }))),\n React.createElement(\"div\", { className: \"k-datetime-footer k-actions k-hstack k-justify-content-stretch\" },\n cancelButton && React.createElement(\"button\", __assign({ type: \"button\", ref: function (btn) { _this._cancelButton = btn; }, className: \"k-button k-time-cancel\", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),\n React.createElement(\"button\", __assign({ type: \"button\", ref: function (btn) { _this._acceptButton = btn; }, className: setButtonClassName, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));\n };\n Object.defineProperty(DateTimeSelector.prototype, \"minTime\", {\n get: function () {\n return this.props.minTime !== undefined\n ? this.props.minTime\n : this.normalizeRange(this.props.min, this.state.dateValue);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimeSelector.prototype, \"maxTime\", {\n get: function () {\n return this.props.maxTime !== undefined\n ? this.props.maxTime\n : this.normalizeRange(this.props.max, this.state.dateValue);\n },\n enumerable: true,\n configurable: true\n });\n DateTimeSelector.prototype.normalizeRange = function (candidate, value) {\n return isEqualDate(candidate, value || getToday())\n ? candidate\n : null;\n };\n DateTimeSelector.prototype.hasActiveButton = function () {\n if (!this._acceptButton) {\n return false;\n }\n return document.activeElement === this._acceptButton\n || document.activeElement === this._cancelButton;\n };\n DateTimeSelector.prototype.mergeTime = function (current, candidate) {\n return current && candidate ? setTime(candidate, current) : candidate;\n };\n DateTimeSelector.prototype.mergeDate = function (candidate, value) {\n return candidate ? setTime(candidate || getToday(), value) : value;\n };\n return DateTimeSelector;\n}(React.Component));\nexport { DateTimeSelector };\nregisterForLocalization(DateTimeSelector);\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 { Popup } from '@progress/kendo-react-popup';\nimport { cloneDate } from '@progress/kendo-date-math';\nimport { classNames, guid, Keys, AsyncFocusBlur } from '@progress/kendo-react-common';\nimport { DateInput } from '../dateinput/DateInput';\nimport { validatePackage } from '@progress/kendo-react-common';\nimport { packageMetadata } from '../package-metadata';\nimport { MIN_DATE, MAX_DATE, isInDateRange, MAX_TIME } from '../utils';\nimport { messages, toggleDateTimeSelector } from '../messages';\nimport { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';\nimport { DateTimeSelector } from './DateTimeSelector';\nimport { isInTimeRange } from '../timepicker/utils';\nimport { MIN_TIME } from '../defaults';\nimport { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n function DateTimePicker(props) {\n var _this = _super.call(this, props) || this;\n _this._popupId = guid();\n _this._element = null;\n _this._wrapper = null;\n _this._dateInput = React.createRef();\n _this._dateTimeSelector = null;\n _this.shouldFocusDateInput = false;\n _this.prevShow = false;\n /**\n * @hidden\n */\n _this.focus = function () {\n var dateInputElement = _this.dateInputElement();\n if (dateInputElement) {\n dateInputElement.focus();\n }\n };\n _this.handleReject = function () {\n _this.shouldFocusDateInput = true;\n _this.setShow(false);\n };\n _this.handleValueChange = function (event) {\n _this.setState({\n value: cloneDate(event.value || undefined),\n show: false\n });\n _this.valueDuringOnChange = event.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.handleDateIconClick = 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 _this.dateInputElement = function () {\n return (_this.dateInput && _this.dateInput.element) ||\n (_this._wrapper && _this._wrapper.querySelector('.k-dateinput-wrap > input.k-input'));\n };\n validatePackage(packageMetadata);\n _this.state = {\n value: _this.props.defaultValue || DateTimePicker.defaultProps.defaultValue,\n show: _this.props.defaultShow || DateTimePicker.defaultProps.defaultShow,\n focused: false\n };\n return _this;\n }\n Object.defineProperty(DateTimePicker.prototype, \"element\", {\n /**\n * Gets the wrapping element of the DateTimePicker.\n */\n get: function () {\n return this._element;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"dateInput\", {\n /**\n * Gets the DateInput component inside the DateTimePicker component.\n */\n get: function () {\n return this._dateInput.current;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"value\", {\n /**\n * Gets the value of the DateTimePicker.\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(DateTimePicker.prototype, \"show\", {\n /**\n * Gets the popup state of the DateTimePicker.\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(DateTimePicker.prototype, \"name\", {\n /**\n * Gets the `name` property of the DateTimePicker.\n */\n get: function () {\n return this.props.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"min\", {\n get: function () {\n return this.props.min !== undefined\n ? this.props.min\n : DateTimePicker.defaultProps.min;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"max\", {\n get: function () {\n return this.props.max !== undefined\n ? this.props.max\n : DateTimePicker.defaultProps.max;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"validity\", {\n /**\n * Represents the validity state into which the DateTimePicker is set.\n */\n get: function () {\n var inRange = isInDateRange(this.value, this.min, this.max)\n && isInTimeRange(this.value, this.props.minTime || MIN_TIME, this.props.maxTime || MAX_TIME);\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(DateTimePicker.prototype, \"validityStyles\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.validityStyles !== undefined\n ? this.props.validityStyles\n : DateTimePicker.defaultProps.validityStyles;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"required\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.required !== undefined\n ? this.props.required\n : DateTimePicker.defaultProps.required;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DateTimePicker.prototype, \"dateInputComp\", {\n /**\n * @hidden\n */\n get: function () {\n return this.props.dateInput || DateTimePicker.defaultProps.dateInput;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * @hidden\n */\n DateTimePicker.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 DateTimePicker.prototype.componentDidUpdate = function () {\n var dateInputElement = this.dateInputElement();\n if (this._dateTimeSelector && this.show && !this.prevShow) {\n this._dateTimeSelector.focus({ preventScroll: true });\n }\n if (dateInputElement\n && !this.show\n && this.shouldFocusDateInput) {\n dateInputElement.focus({ preventScroll: true });\n }\n this.prevShow = this.show;\n this.shouldFocusDateInput = false;\n };\n /**\n * @hidden\n */\n DateTimePicker.prototype.componentWillUnmount = function () {\n clearTimeout(this.nextTickId);\n };\n /**\n * @hidden\n */\n DateTimePicker.prototype.render = function () {\n var _this = this;\n var _a = this.props, 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, cancelButton = _a.cancelButton, minTime = _a.minTime, maxTime = _a.maxTime, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, _b = _a.popup, PopupComponent = _b === void 0 ? Popup : _b, calendar = _a.calendar;\n var isValid = !this.validityStyles || this.validity.valid;\n var rootClassName = classNames('k-widget k-datetimepicker', {\n 'k-state-invalid': !isValid\n }, className);\n var wrapperClassNames = classNames('k-picker-wrap', {\n 'k-state-disabled': disabled,\n 'k-state-focused': this.state.focused\n });\n var dataInputProps = {\n id: id, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, format: format, formatPlaceholder: formatPlaceholder, disabled: disabled,\n title: title, validityStyles: validityStyles, validationMessage: validationMessage, required: required, min: min, max: max, minTime: minTime, maxTime: maxTime, name: name,\n tabIndex: !this.show ? tabIndex : -1,\n valid: this.validity.valid,\n value: this.value,\n onChange: this.handleValueChange,\n steps: this.props.steps,\n label: undefined,\n placeholder: !this.state.focused ? this.props.placeholder : null,\n ariaHasPopup: true,\n ariaExpanded: this.show\n };\n var dateTimePicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncFocus: this.props.onFocus, onSyncBlur: this.props.onBlur }, function (_a) {\n var onFocus = _a.onFocus, onBlur = _a.onBlur;\n return (React.createElement(\"div\", { ref: function (div) {\n _this._element = div;\n }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },\n React.createElement(\"div\", { ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },\n React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),\n React.createElement(\"span\", __assign({ role: \"button\", onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)\n .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: \"k-select\" }, {\n 'aria-controls': _this._popupId,\n 'aria-label': provideLocalizationService(_this)\n .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])\n }),\n React.createElement(\"span\", { className: \"k-link k-link-date\" },\n React.createElement(\"span\", { className: \"k-icon k-i-calendar\" })))),\n React.createElement(PopupComponent, { show: _this.show, animate: _this._wrapper !== null, anchor: _this._wrapper, className: \"k-datetime-container k-group k-reset\", id: _this._popupId, anchorAlign: {\n horizontal: 'left',\n vertical: 'bottom'\n }, popupAlign: {\n horizontal: 'left',\n vertical: 'top'\n } },\n React.createElement(DateTimeSelector, { ref: function (dateTimeSelector) { _this._dateTimeSelector = dateTimeSelector; }, cancelButton: cancelButton, steps: _this.props.steps, value: _this.value, onChange: _this.handleValueChange, onReject: _this.handleReject, disabled: disabled, weekNumber: weekNumber, min: _this.min, max: _this.max, minTime: minTime, maxTime: maxTime, focusedDate: focusedDate, format: format, calendar: calendar }))));\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: dateTimePicker, style: { width: this.props.width } }))\n : dateTimePicker;\n };\n DateTimePicker.prototype.setShow = function (show) {\n if (this.show === show) {\n return;\n }\n this.setState({ show: show });\n };\n DateTimePicker.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 DateTimePicker.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 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 cancelButton: PropTypes.bool\n };\n /**\n * @hidden\n */\n DateTimePicker.defaultProps = {\n defaultShow: false,\n defaultValue: null,\n disabled: false,\n format: 'g',\n max: MAX_DATE,\n min: MIN_DATE,\n popupSettings: {},\n tabIndex: 0,\n weekNumber: false,\n required: false,\n validityStyles: true,\n cancelButton: true,\n dateInput: DateInput\n };\n return DateTimePicker;\n}(React.Component));\nexport { DateTimePicker };\nregisterForLocalization(DateTimePicker);\n","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nexport const Headline = React.forwardRef((_a, ref) => {\n var { children, className, el, inline, italic, subdued, size = 'medium' } = _a, props = __rest(_a, [\"children\", \"className\", \"el\", \"inline\", \"italic\", \"subdued\", \"size\"]);\n const TextClasses = classnames('Headline', className, {\n [`Headline--${size}`]: size,\n 'd-i': inline,\n 'fs-italic': italic,\n 'fs-normal': !italic && italic != null,\n 'c-neutral-90': subdued,\n });\n const newEl = () => {\n if (!el) {\n if (size === 'xlarge')\n return 'p';\n if (size === 'large')\n return 'h1';\n if (size === 'medium')\n return 'h2';\n if (size === 'small')\n return 'h3';\n }\n return el;\n };\n const HeadlineElement = newEl();\n return (React.createElement(HeadlineElement, Object.assign({ ref: ref, className: TextClasses, \"data-anvil-component\": \"Headline\" }, props), children));\n});\n//# sourceMappingURL=Headline.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { Headline } from '../Headline';\nexport const PopoverContent = React.forwardRef(({ children, className, contentScrollHeight, noPadding, onKeyDown }, ref) => {\n const PopoverContentClassNames = classnames('Popover__content', className, {\n 'Popover__content--nopadding': noPadding,\n });\n return (React.createElement(\"div\", { style: { maxHeight: contentScrollHeight }, className: PopoverContentClassNames, onKeyDown: onKeyDown, ref: ref }, children));\n});\nexport const PopoverFooter = (_a) => {\n var { align = 'left', children, className } = _a, props = __rest(_a, [\"align\", \"children\", \"className\"]);\n const PopoverFooterClassNames = classnames('Popover__footer', className, {\n 'justify-content-start': align === 'left',\n 'justify-content-center': align === 'center',\n 'justify-content-end': align === 'right',\n 'justify-content-between': align === 'space-between',\n });\n return (React.createElement(\"div\", Object.assign({ className: PopoverFooterClassNames }, props), children));\n};\nexport const PopoverHeader = (_a) => {\n var { align = 'left', children, className, noPadding } = _a, props = __rest(_a, [\"align\", \"children\", \"className\", \"noPadding\"]);\n const PopoverHeaderClassNames = classnames('Popover__header', className, {\n 'justify-content-start': align === 'left',\n 'justify-content-center': align === 'center',\n 'justify-content-end': align === 'right',\n 'justify-content-between': align === 'space-between',\n 'Popover__header--nopadding': noPadding,\n });\n return (React.createElement(Headline, Object.assign({ size: \"small\", className: PopoverHeaderClassNames }, props), children));\n};\nexport const PopoverDivider = () => React.createElement(\"div\", { className: \"Popover__divider\" });\n//# sourceMappingURL=components.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport { Popper } from '../../internal/Popper';\nimport classnames from 'classnames';\nimport { PopoverContent, PopoverDivider, PopoverFooter, PopoverHeader, } from './components';\nexport const Popover = React.forwardRef((_a, ref) => {\n var { width = 's', padding = 'm', portal = false, children, className, contentNoPadding, footer, footerAlign, header, headerAlign, headerNoPadding, popoverContentClassName, scrollHeight, sharp, wrapperClassName, open, focusTrapOptions = { disabled: true }, offset = { skidding: 0, distance: 4 } } = _a, props = __rest(_a, [\"width\", \"padding\", \"portal\", \"children\", \"className\", \"contentNoPadding\", \"footer\", \"footerAlign\", \"header\", \"headerAlign\", \"headerNoPadding\", \"popoverContentClassName\", \"scrollHeight\", \"sharp\", \"wrapperClassName\", \"open\", \"focusTrapOptions\", \"offset\"]);\n const PopoverBaseWidth = 16;\n const widthSwitch = () => {\n switch (width) {\n case 'l':\n return PopoverBaseWidth * 40;\n case 'm':\n return PopoverBaseWidth * 32;\n case 's':\n return PopoverBaseWidth * 20;\n case 'xs':\n return PopoverBaseWidth * 12;\n case '100':\n return `100`;\n default:\n return `auto`;\n }\n };\n const PopoverBodyClasses = classnames('Popover__body', className, {\n [`Popover--p-${padding}`]: padding,\n [`Popover--w-auto`]: width === 'auto',\n 'Popover__body--sharp': sharp,\n 'Popover__body--portal': portal,\n 'Popover__body--open': open,\n });\n const PopoverClasses = classnames('Popover', wrapperClassName, {\n 'Popover--portal': portal,\n 'Popover--open': open,\n });\n return (React.createElement(Popper, Object.assign({ className: PopoverClasses, bodyClassName: PopoverBodyClasses, width: widthSwitch(), portal: portal, ref: ref, open: open, offset: offset, focusTrapOptions: focusTrapOptions, \"data-anvil-component\": \"Popover\", \"data-portal-popover\": open && portal ? 'open' : undefined }, props),\n header && (React.createElement(PopoverHeader, { noPadding: headerNoPadding, align: headerAlign }, header)),\n React.createElement(PopoverContent, { contentScrollHeight: scrollHeight, noPadding: contentNoPadding, className: popoverContentClassName }, children),\n footer && (React.createElement(PopoverFooter, { align: footerAlign }, footer))));\n});\nPopover.Header = PopoverHeader;\nPopover.Footer = PopoverFooter;\nPopover.Content = PopoverContent;\nPopover.Divider = PopoverDivider;\n//# sourceMappingURL=Popover.js.map","export const keys = {\n backspace: 'Backspace',\n tab: 'Tab',\n enter: 'Enter',\n shift: 'Shift',\n esc: 'Escape',\n space: ' ',\n pageUp: 'PageUp',\n pageDown: 'PageDown',\n end: 'End',\n home: 'Home',\n left: 'ArrowLeft',\n up: 'ArrowUp',\n right: 'ArrowRight',\n down: 'ArrowDown',\n delete: 'Delete',\n slash: '/',\n};\nexport var Keys;\n(function (Keys) {\n Keys[\"Backspace\"] = \"Backspace\";\n Keys[\"Tab\"] = \"Tab\";\n Keys[\"Enter\"] = \"Enter\";\n Keys[\"Shift\"] = \"Shift\";\n Keys[\"Esc\"] = \"Escape\";\n Keys[\"Space\"] = \" \";\n Keys[\"PageUp\"] = \"PageUp\";\n Keys[\"PageDown\"] = \"PageDown\";\n Keys[\"End\"] = \"End\";\n Keys[\"Home\"] = \"Home\";\n Keys[\"Left\"] = \"ArrowLeft\";\n Keys[\"Up\"] = \"ArrowUp\";\n Keys[\"Right\"] = \"ArrowRight\";\n Keys[\"Down\"] = \"ArrowDown\";\n Keys[\"Delete\"] = \"Delete\";\n Keys[\"Slash\"] = \"/\";\n})(Keys || (Keys = {}));\n//# sourceMappingURL=keyCodes.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { getContent } from '../../utilities/getContent';\nexport const InputAddon = (_a) => {\n var { el: InputAddonElement = 'div', className } = _a, props = __rest(_a, [\"el\", \"className\"]);\n const InputAddonClasses = classnames('InputAddon', className);\n return (React.createElement(InputAddonElement, Object.assign({}, props, { className: InputAddonClasses }), getContent(props)));\n};\n//# sourceMappingURL=InputAddon.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { Card } from '../Card';\nexport const Spinner = (_a) => {\n var { className, container, size = 'medium' } = _a, props = __rest(_a, [\"className\", \"container\", \"size\"]);\n const SpinnerClasses = classnames('Spinner', {\n [`${className}`]: className && !container,\n 'Spinner--large': size === 'large',\n 'Spinner--medium': size === 'medium',\n 'Spinner--small': size === 'small',\n 'Spinner--tiny': size === 'tiny',\n });\n const CardClasses = classnames('Card__spinner', {\n [`${className}`]: className && container,\n });\n const RadiusSize = {\n large: 46,\n medium: 45,\n small: 44,\n tiny: 43,\n };\n const CircleRadius = RadiusSize[size];\n const spinnerComponent = (React.createElement(\"div\", Object.assign({ className: SpinnerClasses, \"data-anvil-component\": \"Spinner\" }, props),\n React.createElement(\"svg\", { className: \"Spinner__svg\", viewBox: \"0 0 100 100\", xmlns: \"http://www.w3.org/2000/svg\" },\n React.createElement(\"circle\", { className: \"Spinner__circle\", cx: \"50\", cy: \"50\", r: CircleRadius }))));\n return container ? (React.createElement(Card, { className: CardClasses }, spinnerComponent)) : (spinnerComponent);\n};\n//# sourceMappingURL=Spinner.js.map","export const htmlInputProps = [\n // React\n 'selected',\n 'defaultValue',\n 'defaultChecked',\n // HTML attributes\n 'accept',\n 'autoCapitalize',\n 'autoComplete',\n 'autoCorrect',\n 'autoFocus',\n 'checked',\n 'disabled',\n 'form',\n 'id',\n 'lang',\n 'list',\n 'max',\n 'maxLength',\n 'min',\n 'minLength',\n 'multiple',\n 'name',\n 'pattern',\n 'placeholder',\n 'readOnly',\n 'required',\n 'step',\n 'title',\n 'type',\n 'value',\n];\nexport const htmlInputEvents = [\n // Keyboard\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n // Focus\n 'onFocus',\n 'onBlur',\n // Form\n 'onChange',\n 'onInput',\n // Mouse\n 'onClick',\n 'onContextMenu',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n // Selection\n 'onSelect',\n // Touch\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n];\nexport const htmlInputPropsArray = [...htmlInputProps, ...htmlInputEvents];\nexport const inputPropsArray = [\n 'el',\n 'action',\n 'actionPosition',\n 'children',\n 'className',\n 'disabled',\n 'error',\n 'fluid',\n 'focus',\n 'icon',\n 'iconPosition',\n 'input',\n 'inverted',\n 'large',\n 'loading',\n 'onChange',\n 'size',\n 'shortLabel',\n 'shortLabelPosition',\n 'small',\n 'tabIndex',\n 'transparent',\n 'type',\n 'xsmall',\n];\n// Returns an array of objects consisting of [props found in targetKeysArray, rest]\nexport const splitPropsUsingArray = (props, targetKeysArray) => {\n const rest = Object.assign({}, props);\n const targetProps = targetKeysArray.reduce((result, propName) => {\n if (rest.hasOwnProperty(propName)) {\n result[propName] = rest[propName];\n delete rest[propName];\n }\n return result;\n }, {});\n return [targetProps, rest];\n};\n//# sourceMappingURL=inputProps.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { handleRef } from '../../utilities/SemanticUtils';\nimport { isElementOfType } from '../../utilities/isElementOfType';\nimport { InputAddon } from './InputAddon';\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\nimport { Button } from '../Button';\nimport { FormFieldContext } from '../FormField';\nimport { splitPropsUsingArray, htmlInputPropsArray, inputPropsArray, } from './inputProps';\nconst { Children, createElement, createRef, cloneElement, isValidElement } = React;\nexport class Input extends React.Component {\n constructor() {\n super(...arguments);\n this.inputRef = this.props.inputRef || createRef();\n this.renderAction = () => {\n const { action, disabled } = this.props;\n if (action == null)\n return null;\n if (typeof action === 'string') {\n return (React.createElement(Button, { disabled: disabled, size: this.computeSize().inputSize }, action));\n }\n if (action != null && isValidElement(action)) {\n return cloneElement(action, {\n disabled,\n size: this.computeSize().inputSize,\n });\n }\n };\n this.renderIcon = () => {\n var _a, _b, _c;\n const { icon } = this.props;\n // Icon passed as string\n if (typeof icon === 'string') {\n return (React.createElement(InputAddon, { onClick: () => this.focus() },\n React.createElement(Icon, { name: icon, size: this.computeSize().iconSize })));\n }\n // Icon passed as React element\n if (icon != null && isValidElement(icon)) {\n const sizedIcon = cloneElement(icon, {\n size: this.computeSize().iconSize,\n });\n const hasOnClick = typeof ((_b = (_a = icon) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.onClick) !== 'undefined';\n return (React.createElement(InputAddon, { onClick: () => !hasOnClick && this.focus() }, sizedIcon));\n }\n // Icon passed as Icon.props object\n if (icon != null && !isValidElement(icon)) {\n const hasOnClick = typeof ((_c = icon) === null || _c === void 0 ? void 0 : _c.onClick) !== 'undefined';\n return (React.createElement(InputAddon, { onClick: () => !hasOnClick && this.focus() },\n React.createElement(Icon, Object.assign({}, icon))));\n }\n return null;\n };\n // Creating an input element\n this.renderInput = (htmlInputProps) => {\n const { input, type } = this.props;\n // Handling case of duplicate ID's for the same FormField label\n const isLabelAssigned = this.context.inputRef;\n const labelFor = this.context.labelFor;\n if (!isLabelAssigned) {\n this.context.inputRef = this.inputRef;\n }\n if (input != null && isValidElement(input)) {\n return cloneElement(input, Object.assign(Object.assign({}, htmlInputProps), { id: this.props.id || (!isLabelAssigned ? labelFor : undefined) }));\n }\n return createElement('input', Object.assign(Object.assign({}, htmlInputProps), { type, id: this.props.id || (!isLabelAssigned ? labelFor : undefined) }));\n };\n this.renderShortLabel = () => {\n var _a;\n const { shortLabel } = this.props;\n if (typeof shortLabel === 'string' && shortLabel !== '') {\n return (React.createElement(InputAddon, { onClick: () => this.focus() }, shortLabel));\n }\n // Label passed as React element\n if (shortLabel != null && isValidElement(shortLabel)) {\n const iconSize = shortLabel.props.size || this.computeSize().iconSize;\n const hasOnClick = typeof ((_a = shortLabel.props) === null || _a === void 0 ? void 0 : _a.onClick) !== 'undefined';\n return (React.createElement(InputAddon, { onClick: () => !hasOnClick && this.focus() }, cloneElement(shortLabel, { size: iconSize })));\n }\n return null;\n };\n // Handling with size-related shortcut props, like xsmall=\"true\"...\n this.computeSize = () => {\n let inputSize = this.props.size;\n if (this.props.xsmall)\n inputSize = 'xsmall';\n if (this.props.small)\n inputSize = 'small';\n if (this.props.large)\n inputSize = 'large';\n const iconSize = {\n xsmall: '16px',\n small: '20px',\n medium: '20px',\n large: '24px',\n }[inputSize];\n return { inputSize, iconSize };\n };\n this.computeTabIndex = () => {\n const { disabled, tabIndex } = this.props;\n if (tabIndex != null) {\n return tabIndex;\n }\n if (disabled) {\n return -1;\n }\n };\n this.focus = () => this.inputRef.current.focus();\n this.select = () => this.inputRef.current.select();\n this.handleChange = (e) => {\n if (this.props.onChange) {\n this.props.onChange(e, Object.assign(Object.assign({}, this.props), { value: e.target.value }));\n }\n };\n this.handleChildOverrides = (child, defaultProps) => (Object.assign(Object.assign(Object.assign({}, defaultProps), child.props), { ref: (c) => {\n handleRef(child.ref, c);\n this.inputRef.current = c;\n } }));\n }\n render() {\n const { actionPosition, children, className, disabled, el: InputElement, error, fluid, focus, iconPosition, inverted, loading, shortLabelPosition, transparent, readonly, } = this.props;\n const _a = this.props, { inputRef } = _a, inputProps = __rest(_a, [\"inputRef\"]);\n const InputClasses = classnames('Input', className, {\n [`Input--${this.computeSize().inputSize}`]: this.computeSize().inputSize,\n 'Input--disabled': disabled,\n 'Input--error': error,\n 'Input--fluid': fluid,\n 'Input--focus': focus,\n 'Input--inverted': inverted,\n 'Input--loading': loading,\n 'Input--transparent': transparent,\n 'Input--readonly': readonly,\n });\n const [strictHtmlInputProps] = splitPropsUsingArray(inputProps, htmlInputPropsArray);\n const htmlInputProps = Object.assign(Object.assign({}, strictHtmlInputProps), { tabIndex: this.computeTabIndex(), onChange: this.handleChange, ref: this.inputRef });\n const [, rest] = splitPropsUsingArray(inputProps, [\n ...htmlInputPropsArray,\n ...inputPropsArray,\n ]);\n // Case of children passed directly into Input\n if (Children.count(children) !== 0) {\n const childElements = Children.toArray(children).map((child, k) => {\n if (isElementOfType(child, Button)) {\n return child;\n }\n if (child.type === 'input') {\n // Passing htmlInputProps to the \n return cloneElement(child, this.handleChildOverrides(child, htmlInputProps));\n }\n return React.createElement(Input.Addon, { key: k }, child);\n });\n return (React.createElement(InputElement, Object.assign({}, rest, { className: classnames(InputClasses, 'Input--with-children') }),\n React.createElement(\"div\", { className: \"Input__InnerWrapper\" }, childElements)));\n }\n // Render with shorthands\n return (React.createElement(InputElement, Object.assign({ className: InputClasses, \"data-anvil-component\": \"Input\" }, rest),\n actionPosition === 'left' && this.renderAction(),\n React.createElement(\"div\", { className: \"Input__InnerWrapper\" },\n iconPosition === 'left' && this.renderIcon(),\n shortLabelPosition === 'left' && this.renderShortLabel(),\n this.renderInput(htmlInputProps),\n loading && (React.createElement(InputAddon, { onClick: () => this.focus() },\n React.createElement(Spinner, null))),\n shortLabelPosition === 'right' && this.renderShortLabel(),\n iconPosition === 'right' && this.renderIcon()),\n actionPosition === 'right' && this.renderAction()));\n }\n}\nInput.defaultProps = {\n actionPosition: 'right',\n el: 'div',\n iconPosition: 'right',\n shortLabelPosition: 'left',\n size: 'medium',\n type: 'text',\n};\nInput.Addon = InputAddon;\nInput.contextType = FormFieldContext;\n//# sourceMappingURL=Input.js.map","/**\n * The function that correctly handles passing refs.\n */\nexport const handleRef = (ref, node) => {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof ref === 'string') {\n throw new Error([\n 'We do not support refs as string, this is a legacy API and will be likely to be removed in',\n 'one of the future releases of React.',\n ].join(' '));\n }\n }\n if (typeof ref === 'function') {\n ref(node);\n return;\n }\n if (ref !== null && typeof ref === 'object') {\n // The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object\n ref.current = node;\n }\n};\nexport const isRefObject = (ref) => \n// https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665\nref !== null && typeof ref === 'object' && ref.hasOwnProperty('current');\n//# sourceMappingURL=refUtils.js.map","const defaultConfig = {\n maskChar: '_',\n allowedChars: /^[\\d]$/,\n};\n/**\n * Find boundaries of mask field in specified cursor position.\n *\n * Returns array with start and end index of a field.\n * End index points next character after field (useful for `String.substring`).\n * If values are the same most probably passed cursor position is not a correct value (eg. separator).\n *\n * @param mask\n * @param cursorPosition\n * @param config\n * @return [number, number]\n */\nexport const findMaskFieldBoundariesAtPosition = (mask, cursorPosition = 0, config = {}) => {\n const conf = Object.assign(defaultConfig, config);\n const isAllowedChar = (char) => conf.allowedChars.test(char) || char === conf.maskChar;\n let startIndex = cursorPosition;\n let endIndex = cursorPosition;\n if (isAllowedChar(mask[cursorPosition])) {\n while (mask[startIndex - 1] &&\n isAllowedChar(mask[startIndex - 1]) &&\n startIndex - 1 >= 0) {\n startIndex--;\n }\n while (mask[endIndex + 1] &&\n isAllowedChar(mask[endIndex + 1]) &&\n endIndex + 1 < mask.length) {\n endIndex++;\n }\n }\n else {\n return [cursorPosition, cursorPosition];\n }\n return [startIndex, endIndex + 1];\n};\nexport const getValueAtIndex = (mask, index, config = {}) => {\n const [startIndex, endIndex] = findMaskFieldBoundariesAtPosition(mask, index, config);\n if (startIndex === endIndex) {\n return null;\n }\n return mask\n .substring(startIndex, endIndex)\n .split('')\n .filter((c) => c !== '_')\n .join('');\n};\nexport function setValueAtIndex(mask, index, value, config = {}) {\n const conf = Object.assign(defaultConfig, config);\n const [start, end] = findMaskFieldBoundariesAtPosition(mask, index, config);\n if (start === end) {\n return mask;\n }\n const valueToSet = value === '' ? conf.maskChar.repeat(end - start) : value;\n const valueWithZeros = String(valueToSet).padStart(end - start, '0');\n return mask.substring(0, start) + valueWithZeros + mask.substring(end);\n}\nexport function expandValueAtIndex(mask, index, config = {}) {\n return setValueAtIndex(mask, index, getValueAtIndex(mask, index, config), config);\n}\n//# sourceMappingURL=maskUtils.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport { Input } from '../Input';\nimport moment from 'moment';\nimport InputMask from 'react-input-mask';\nimport classnames from 'classnames';\nimport { keys } from '../../utilities/keyCodes';\nimport { expandValueAtIndex, findMaskFieldBoundariesAtPosition, getValueAtIndex, setValueAtIndex, } from '../../utilities/maskUtils';\nconst round = (year, to = 100) => year - (year % to);\nexport const InputDateMask = (_a) => {\n var { alwaysShowMask, className, dateFormat = 'MM/DD/YYYY', disabled, error, maskChar = '_', maxDate, minDate, onChange, placeholder, shortLabel, size, value, tabIndex, inputRef } = _a, props = __rest(_a, [\"alwaysShowMask\", \"className\", \"dateFormat\", \"disabled\", \"error\", \"maskChar\", \"maxDate\", \"minDate\", \"onChange\", \"placeholder\", \"shortLabel\", \"size\", \"value\", \"tabIndex\", \"inputRef\"]);\n const [maskValue, setMask] = React.useState('');\n const [expandValueAtCursor, setExpandValueAtCursor] = React.useState(false);\n const [cursorPosition, setCursorPosition] = React.useState(null);\n let falseEmptyChange = false;\n const handleKeyDown = (evt) => {\n if (evt.key === keys.delete) {\n onChange(undefined);\n setMask('');\n }\n if (evt.key === keys.slash) {\n setExpandValueAtCursor(true);\n }\n };\n const expandMaskValue = (mask, cursorPosition) => {\n let value = mask;\n const parsedValue = parseInt(getValueAtIndex(mask, cursorPosition), 10);\n if (!parsedValue)\n return value;\n const [startIndex, endIndex] = findMaskFieldBoundariesAtPosition(mask, cursorPosition);\n const desiredMaskLength = endIndex - startIndex;\n if (desiredMaskLength === 4) {\n // End early if full year already exists\n if (parsedValue.toString().length === 4)\n return value;\n /**\n * auto fills year if value is between the beginning of century\n * and 5 years ahead\n *\n * @todo: Change year calculations to use current year for all non-existant values\n * E.g. 7 -> 2027, 20 -> 2020, 181 -> 2181, assuming current year is 2021\n */\n const currentYear = new Date().getFullYear();\n const beginningOfCentury = round(currentYear, 100);\n const yearsFromBeginningOfCentury = currentYear - beginningOfCentury + 5;\n let year = parsedValue + beginningOfCentury;\n if (parsedValue > yearsFromBeginningOfCentury) {\n year -= parsedValue >= 100 ? 1000 : 100;\n }\n value = setValueAtIndex(mask, cursorPosition, year);\n }\n else {\n value = expandValueAtIndex(mask, cursorPosition);\n }\n return value;\n };\n const updateMaskValue = (value) => {\n setMask(value);\n if (isMaskValid(value)) {\n onChange(parseDate(value));\n }\n else {\n onChange(undefined);\n }\n };\n const handleBeforeMaskedValueChange = (newState, oldState) => {\n var _a, _b, _c;\n falseEmptyChange =\n !/\\d/.test(newState.value) && !/\\d/.test(oldState.value);\n if (((_a = newState === null || newState === void 0 ? void 0 : newState.selection) === null || _a === void 0 ? void 0 : _a.start) === ((_b = newState === null || newState === void 0 ? void 0 : newState.selection) === null || _b === void 0 ? void 0 : _b.end)) {\n setCursorPosition((_c = newState === null || newState === void 0 ? void 0 : newState.selection) === null || _c === void 0 ? void 0 : _c.start);\n }\n if (expandValueAtCursor) {\n setExpandValueAtCursor(false);\n const value = expandMaskValue(newState.value, newState.selection.start);\n if (value === maskValue) {\n return newState;\n }\n updateMaskValue(value);\n // reposition cursor\n const [, endIndex] = findMaskFieldBoundariesAtPosition(newState.value, newState.selection.start);\n newState.selection = { start: endIndex, end: endIndex };\n newState.value = value;\n }\n return newState;\n };\n const handleBlur = () => {\n var _a;\n if (cursorPosition) {\n const expandedValue = (_a = expandMaskValue(maskValue, cursorPosition)) !== null && _a !== void 0 ? _a : maskValue;\n if (expandedValue !== maskValue) {\n updateMaskValue(expandMaskValue(maskValue, cursorPosition));\n setCursorPosition(null);\n }\n }\n };\n const handleChange = (event) => {\n const value = event.target.value;\n setMask(value);\n if (falseEmptyChange) {\n return;\n }\n if (isMaskValid(value)) {\n onChange(parseDate(value));\n }\n else {\n onChange(undefined);\n }\n };\n const getMaskError = () => {\n return (value === undefined && doesMaskExist() && isMaskInvalid(maskValue));\n };\n const getValueError = () => {\n return value !== undefined && !isDateInRange(value);\n };\n const formatDate = (date) => {\n return date ? moment(date).format(dateFormat) : '';\n };\n const parseDate = React.useCallback((date) => moment(date, dateFormat).toDate(), [dateFormat]);\n const doesMaskExist = () => {\n return maskValue !== '' && maskValue !== undefined;\n };\n const isMaskInvalid = (mask) => {\n return !(mask === null || mask === void 0 ? void 0 : mask.includes(maskChar)) && !isDateStringValid(mask);\n };\n const isDateInRange = React.useCallback((date) => {\n if (minDate && maxDate) {\n return date >= minDate && date <= maxDate;\n }\n else if (minDate) {\n return date >= minDate;\n }\n else if (maxDate) {\n return date <= maxDate;\n }\n return true;\n }, [minDate, maxDate]);\n const isDateStringValid = React.useCallback((date) => moment(date, dateFormat).isValid() &&\n isDateInRange(parseDate(date)), [dateFormat, isDateInRange, parseDate]);\n const isMaskValid = React.useCallback((mask) => !(mask === null || mask === void 0 ? void 0 : mask.includes(maskChar)) && isDateStringValid(mask), [maskChar, isDateStringValid]);\n React.useEffect(() => {\n if (value === undefined && isMaskValid(maskValue)) {\n setMask('');\n }\n }, [value, maskValue, isMaskValid]);\n /*\n * This replaces the date format with a random number (9)\n * This gets turned back to `maskChar` a few lines below.\n * I don't know why we're doing this.\n */\n const mask = dateFormat.replace(/[MmDdYyo]/g, '9');\n const realError = error || getMaskError() || getValueError();\n const realPlaceholder = placeholder || mask.replace(/9/g, maskChar);\n const classes = classnames('InputDateMask', className, {\n 'InputDateMask--error': realError,\n });\n return (React.createElement(InputMask, Object.assign({}, props, { mask: mask, disabled: disabled, maskChar: maskChar, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur, beforeMaskedValueChange: handleBeforeMaskedValueChange, alwaysShowMask: alwaysShowMask, value: formatDate(value) || maskValue }), (props) => (React.createElement(Input, Object.assign({}, props, { inputRef: inputRef, shortLabel: shortLabel, className: classes, size: size, fluid: true, error: realError, disabled: disabled, placeholder: realPlaceholder, tabIndex: tabIndex })))));\n};\n//# sourceMappingURL=InputDateMask.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { Calendar, } from '@progress/kendo-react-dateinputs';\nimport { Popover } from '../Popover';\nimport { Icon } from '../Icon';\nimport { keys } from '../../utilities/keyCodes';\nimport { InputDateMask } from './InputDateMask';\nexport const DatePicker = React.forwardRef((props, ref) => {\n const { disabled, error, maskChar, maskProps, maxDate, minDate, onChange, placeholder, size, value, calendar: CustomCalendar, direction = 'br', open } = props, rest = __rest(props, [\"disabled\", \"error\", \"maskChar\", \"maskProps\", \"maxDate\", \"minDate\", \"onChange\", \"placeholder\", \"size\", \"value\", \"calendar\", \"direction\", \"open\"]);\n const calendarRef = React.useRef(null);\n const inputRef = React.useRef(null);\n const [showCalendar, setShowCalendar] = React.useState(open);\n const [focusCalendar, setFocusCalendar] = React.useState(false);\n // Keeping this incase we need to also pass calendar to ref\n /**\n * React.useImperativeHandle(ref, () => ({\n * input: inputRef.current,\n * calendar: calendarRef.current,\n * }));\n */\n const handleClickOutside = () => {\n if (showCalendar) {\n setShowCalendar(false);\n inputRef.current.focus();\n }\n };\n const handleClickIcon = () => setShowCalendar(!showCalendar);\n const handleInputClick = (event) => {\n event.preventDefault();\n setShowCalendar(true);\n inputRef.current.focus();\n };\n const handleKeyDown = (event) => {\n const { key } = event;\n if (key === keys.esc) {\n event.preventDefault();\n setShowCalendar(false);\n inputRef.current.focus();\n }\n if ([keys.space, keys.down].includes(key)) {\n event.preventDefault();\n setShowCalendar(true);\n setFocusCalendar(true);\n }\n if (showCalendar && key === keys.tab) {\n setShowCalendar(false);\n }\n };\n React.useEffect(() => {\n var _a;\n if (focusCalendar) {\n (_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n setFocusCalendar(false);\n }\n }, [focusCalendar]);\n React.useEffect(() => {\n setShowCalendar(open);\n }, [open]);\n const handleChange = (event) => {\n const eventValue = event.target.value;\n const value = eventValue ? eventValue : undefined;\n onChange(value);\n setShowCalendar(false);\n inputRef.current.focus();\n };\n const DatePickerClasses = classnames('DatePicker', {\n 'DatePicker--disabled': disabled,\n [`DatePicker--${size}`]: size,\n });\n const InputProps = Object.assign({ disabled,\n error,\n maskChar,\n maxDate,\n minDate,\n onChange,\n placeholder,\n size,\n value }, maskProps);\n const CalendarProps = {\n value,\n max: maxDate,\n min: minDate,\n onChange: handleChange,\n ref: calendarRef,\n tabIndex: -1,\n };\n return (React.createElement(Popover, Object.assign({ portal: true, wrapperClassName: DatePickerClasses, open: showCalendar, popoverContentClassName: \"DatePicker__calendar\", onKeyDown: handleKeyDown, direction: direction, padding: null, width: \"auto\", ref: ref, onClickOutside: () => handleClickOutside(), trigger: React.createElement(InputDateMask, Object.assign({}, InputProps, { inputRef: inputRef, className: \"DatePicker__input\", onClick: handleInputClick, shortLabel: React.createElement(Icon, { name: \"event\", className: \"DatePicker__icon\", onClick: handleClickIcon, \"aria-label\": \"toggle calendar\" }), fluid: true, \"data-anvil-component\": \"DatePicker\" })) }, rest), CustomCalendar ? (React.createElement(CustomCalendar, Object.assign({}, CalendarProps))) : (React.createElement(Calendar, Object.assign({}, CalendarProps)))));\n});\n//# sourceMappingURL=DatePicker.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport { FormField } from '../FormField';\nimport { DatePicker } from '../DatePicker';\nexport const FormDatePicker = (_a) => {\n var props = __rest(_a, []);\n return React.createElement(FormField, Object.assign({ control: DatePicker }, props));\n};\n//# sourceMappingURL=FormDatePicker.js.map","import { useEffect } from 'react';\nexport const KeyPressListener = ({ code, handler, keyEvent = 'keyup', disabled = false, }) => {\n const handleKeyEvent = (event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n if (event.code === code) {\n handler(event);\n }\n };\n useEffect(() => {\n document.addEventListener(keyEvent, handleKeyEvent);\n return () => {\n document.removeEventListener(keyEvent, handleKeyEvent);\n };\n });\n return null;\n};\n//# sourceMappingURL=KeyPressListener.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nexport const Link = (_a) => {\n var { className, color, negative, primary, subdued, disabled } = _a, props = __rest(_a, [\"className\", \"color\", \"negative\", \"primary\", \"subdued\", \"disabled\"]);\n const LinkElement = props.href ? 'a' : 'button';\n const LinkClasses = classnames('Link', className, {\n 'Link--blue': primary || color === 'blue' || color === 'primary',\n 'Link--red': negative || color === 'red' || color === 'negative',\n 'Link--grey': subdued || color === 'grey' || color === 'subdued',\n 'Link--disabled': disabled,\n });\n return (React.createElement(LinkElement, Object.assign({ role: \"link\", className: LinkClasses, \"data-anvil-component\": \"Link\" }, props), props.children));\n};\n//# sourceMappingURL=Link.js.map","export const isValid = (date) => {\n if (!isNaN(date) && date instanceof Date)\n return date;\n return null;\n};\nexport const toDateFormat = (date) => {\n return isValid(new Date(date));\n};\ntoDateFormat.numeric = (date, dateFormat) => {\n var _a, _b, _c, _d, _e, _f, _g;\n if (date === null)\n return;\n const fmtl = new Intl.DateTimeFormat((_a = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.locales) !== null && _a !== void 0 ? _a : 'en', {\n day: (_c = (_b = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _b === void 0 ? void 0 : _b.day) !== null && _c !== void 0 ? _c : '2-digit',\n month: (_e = (_d = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _d === void 0 ? void 0 : _d.month) !== null && _e !== void 0 ? _e : '2-digit',\n year: (_g = (_f = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _f === void 0 ? void 0 : _f.year) !== null && _g !== void 0 ? _g : 'numeric',\n });\n return fmtl.format(toDateFormat(date));\n};\ntoDateFormat.shortMonth = (date, dateFormat) => {\n var _a, _b, _c, _d, _e, _f, _g;\n if (date === null)\n return;\n const fmtl = new Intl.DateTimeFormat((_a = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.locales) !== null && _a !== void 0 ? _a : 'en', {\n day: (_c = (_b = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _b === void 0 ? void 0 : _b.day) !== null && _c !== void 0 ? _c : 'numeric',\n month: (_e = (_d = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _d === void 0 ? void 0 : _d.month) !== null && _e !== void 0 ? _e : 'short',\n year: (_g = (_f = dateFormat === null || dateFormat === void 0 ? void 0 : dateFormat.options) === null || _f === void 0 ? void 0 : _f.year) !== null && _g !== void 0 ? _g : 'numeric',\n });\n return fmtl.format(toDateFormat(date));\n};\ntoDateFormat.startOfDay = (date) => {\n const startOfDay = new Date(date).setHours(0, 0, 0, 0);\n return isValid(new Date(startOfDay));\n};\ntoDateFormat.endOfDay = (date) => {\n const endOfDay = new Date(date).setHours(23, 59, 59, 999);\n return isValid(new Date(endOfDay));\n};\n//# sourceMappingURL=dateFormat.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport { FormFieldContext } from '../../FormField';\nimport { BodyText } from '../../BodyText';\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Stack } from '../../Stack';\nimport { Icon } from '../../Icon';\nimport classnames from 'classnames';\nimport { toDateFormat } from '../../../utilities/dateFormat';\nexport const DateRangeTrigger = React.forwardRef((_a, ref) => {\n var { onKeyDown, className, disabled, error, onClick, open, placeholder, value, displayValue, size, required, onChange, dateFormat } = _a, rest = __rest(_a, [\"onKeyDown\", \"className\", \"disabled\", \"error\", \"onClick\", \"open\", \"placeholder\", \"value\", \"displayValue\", \"size\", \"required\", \"onChange\", \"dateFormat\"]);\n const [valueRange, setValueRange] = React.useState(value);\n const TriggerClasses = classnames('Trigger', className, {\n 'Trigger--open': open,\n 'Trigger--error': error,\n 'Trigger--disabled': disabled,\n [`Trigger--s-${size}`]: size,\n });\n const handleKey = (e) => {\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n };\n const getShortLabel = () => {\n return (React.createElement(\"div\", { className: \"Trigger__shortLabel\" },\n React.createElement(Icon, { name: \"event\", size: \"20px\" })));\n };\n const getArrow = () => open ? 'keyboard_arrow_up' : 'keyboard_arrow_down';\n const valueString = displayValue !== null && displayValue !== void 0 ? displayValue : (valueRange.start &&\n valueRange.end &&\n `${toDateFormat.shortMonth(valueRange.start, dateFormat)} - ${toDateFormat.shortMonth(valueRange.end, dateFormat)}`);\n const getValues = () => {\n if (valueString)\n return (React.createElement(BodyText, { className: \"Trigger__value\" }, valueString));\n return (React.createElement(BodyText, { className: \"Trigger__placeholder\" }, placeholder));\n };\n const clearClick = (e) => {\n onChange({ start: null, end: null });\n setValueRange({ start: null, end: null });\n e.preventDefault();\n e.stopPropagation();\n };\n const getClearable = () => {\n if (!valueString || valueString.length === 0 || required)\n return;\n return (React.createElement(Tooltip, { text: disabled ? null : 'Clear selection', className: \"d-f\" },\n React.createElement(Button, { disabled: disabled, xsmall: true, fill: \"subtle\", iconName: \"clear\", onClick: clearClick, className: \"Trigger__clear\", \"aria-label\": \"clear selection\" })));\n };\n const handleClick = (e) => {\n return onClick === undefined ? null : onClick(e);\n };\n const { labelFor: inputId, setFormFieldContext } = React.useContext(FormFieldContext);\n React.useEffect(() => {\n setFormFieldContext({\n inputRef: ref,\n });\n return () => setFormFieldContext({ inputRef: undefined });\n }, []); // eslint-disable-line\n React.useEffect(() => {\n setValueRange(value);\n }, [value]);\n return (React.createElement(\"div\", Object.assign({ \"aria-expanded\": open, className: TriggerClasses, onClick: !disabled ? handleClick : undefined, tabIndex: disabled ? undefined : 0, onKeyDown: handleKey, id: inputId, ref: ref }, rest),\n React.createElement(Stack, null,\n getShortLabel(),\n getValues(),\n React.createElement(Stack, { className: \"Trigger__controls\", spacing: 1, alignItems: \"flex-start\" },\n getClearable(),\n React.createElement(Icon, { name: getArrow(), size: \"16px\", className: \"Trigger__arrow\" })))));\n});\n//# sourceMappingURL=DateRangeTrigger.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { Checkbox } from '../Checkbox';\nimport { Spinner } from '../Spinner';\nimport { Button } from '../Button';\nimport classnames from 'classnames';\nexport const Option = (_a) => {\n var { className, collapseControl, collapsed, content, disabled, focus, getFocus, indeterminate, getIndeterminate, label, level, loading, onChange, onExpand, onKeyDown, options, readOnly, registerOption, secondaryAction, selected, getSelected, selfObject, text, value } = _a, props = __rest(_a, [\"className\", \"collapseControl\", \"collapsed\", \"content\", \"disabled\", \"focus\", \"getFocus\", \"indeterminate\", \"getIndeterminate\", \"label\", \"level\", \"loading\", \"onChange\", \"onExpand\", \"onKeyDown\", \"options\", \"readOnly\", \"registerOption\", \"secondaryAction\", \"selected\", \"getSelected\", \"selfObject\", \"text\", \"value\"]);\n // after the component has rendered, pass the option data to registerOption\n const checkboxRef = useRef(null);\n useLayoutEffect(() => {\n if (registerOption) {\n registerOption({\n text,\n value,\n disabled,\n element: checkboxRef.current,\n });\n }\n });\n const OptionClasses = classnames('OptionList__option', className, {\n 'OptionList__option--selected': selected,\n 'OptionList__option--disabled': disabled,\n 'OptionList__option--read-only': readOnly || disabled,\n 'OptionList__option--custom': content && typeof content !== 'string',\n 'OptionList__option--text': !(content && typeof content !== 'string'),\n });\n const getCollapseButton = () => {\n if (!collapseControl)\n return;\n const arrow = collapsed\n ? 'keyboard_arrow_down'\n : 'keyboard_arrow_right';\n return (React.createElement(Button, { iconName: arrow, xsmall: true, fill: \"subtle\", onClick: handleOnClick, className: \"OptionList__collapse\", \"aria-expanded\": collapsed, \"aria-label\": collapsed ? 'collapse options' : 'expand options' }));\n };\n const getLabel = () => {\n if (label)\n return label;\n if (content !== undefined && content !== null)\n return content;\n if (text !== undefined && text !== null)\n return text;\n return String(value);\n };\n const getLoading = () => {\n if (!loading)\n return;\n return React.createElement(Spinner, { size: \"tiny\", className: \"OptionList__spinner\" });\n };\n const getSecondaryAction = () => {\n if (secondaryAction === undefined)\n return;\n return (React.createElement(\"div\", { className: \"OptionList__option--secondary-action\" }, secondaryAction));\n };\n const handleOnClick = () => {\n return onExpand(value);\n };\n const handleOnChange = (value, checked) => {\n if (readOnly || onChange === undefined)\n return;\n return onChange(value, checked, options, selfObject);\n };\n const handleOnKeyDown = (e) => {\n if (onKeyDown === undefined)\n return;\n return onKeyDown(e, selfObject);\n };\n return (React.createElement(\"div\", Object.assign({ className: OptionClasses, role: \"treeitem\", \"aria-level\": level }, props),\n getLoading() || getCollapseButton(),\n React.createElement(Checkbox, { ref: checkboxRef, checked: selected != null\n ? selected\n : getSelected\n ? getSelected(value)\n : null, disabled: disabled, focus: focus != null ? focus : getFocus ? getFocus(value) : null, indeterminate: indeterminate != null\n ? indeterminate\n : getIndeterminate\n ? getIndeterminate(value)\n : null, label: getLabel(), onChange: handleOnChange, onKeyDown: handleOnKeyDown, value: value }),\n getSecondaryAction()));\n};\n//# sourceMappingURL=Option.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport AnimateHeight from 'react-animate-height';\nimport { tokens } from '@servicetitan/tokens/core';\nexport const Collapsible = (_a) => {\n var { animate, children, className, el: CollapsibleElement = 'div', easing = tokens.easingStandard, open = false } = _a, props = __rest(_a, [\"animate\", \"children\", \"className\", \"el\", \"easing\", \"open\"]);\n const CollapsibleClasses = classnames('Collapsible', className, {\n 'Collapsible--hidden': !open,\n 'Collapsible--animated': animate,\n });\n const animateHeightProps = {\n animateOpacity: true,\n duration: parseInt(tokens.durationSlow, 10),\n easing,\n height: open ? 'auto' : 0,\n };\n return (React.createElement(CollapsibleElement, Object.assign({ className: CollapsibleClasses, \"data-anvil-component\": \"Collapsible\" }, props), animate ? (React.createElement(AnimateHeight, Object.assign({}, animateHeightProps), children)) : (children)));\n};\n//# sourceMappingURL=Collapsible.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nexport const Eyebrow = React.forwardRef((_a, ref) => {\n var { children, className, el: EyebrowElement = 'span', inline, italic, bold, size = 'medium' } = _a, props = __rest(_a, [\"children\", \"className\", \"el\", \"inline\", \"italic\", \"bold\", \"size\"]);\n const TextClasses = classnames('Eyebrow', className, {\n [`Eyebrow--${size}`]: size,\n 'd-i': inline,\n 'd-b': !inline,\n 'fw-bold': bold,\n 'fs-italic': italic,\n 'fs-normal': !italic && italic != null,\n });\n return (React.createElement(EyebrowElement, Object.assign({ className: TextClasses, ref: ref, \"data-anvil-component\": \"Eyebrow\" }, props), children));\n});\n//# sourceMappingURL=Eyebrow.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nexport const Divider = React.forwardRef((_a, ref) => {\n var { alignContent, children, className, el, spacing = 0, vertical } = _a, props = __rest(_a, [\"alignContent\", \"children\", \"className\", \"el\", \"spacing\", \"vertical\"]);\n const DividerElement = el\n ? el\n : children\n ? 'div'\n : vertical\n ? 'span'\n : 'hr';\n const DividerClasses = classnames('Divider', className, {\n 'Divider--has-children': children && el !== 'hr',\n [`Divider--spacing-${spacing}`]: spacing,\n 'Divider--vertical': vertical,\n });\n const line = React.createElement(\"div\", { className: \"Divider__line\" });\n return (React.createElement(DividerElement, Object.assign({ ref: ref, className: DividerClasses, \"data-anvil-component\": \"Divider\" }, props), children && el !== 'hr' ? (React.createElement(React.Fragment, null,\n alignContent === 'start' ? null : line,\n React.createElement(\"div\", { className: \"Divider__content\" }, children),\n alignContent === 'end' ? null : line)) : null));\n});\n//# sourceMappingURL=Divider.js.map","var __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++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from 'react';\nimport classnames from 'classnames';\nimport { Option } from './Option';\nimport { Collapsible } from '../Collapsible';\nimport { Eyebrow } from '../Eyebrow';\nimport { Divider } from '../Divider';\nimport { Stack } from '../Stack';\nimport { Link } from '../Link';\nexport const OptionList = (_a) => {\n var { children, className, collapseValue, flatGroup, focusValue, groupClassName, indeterminateValue, multiple, onChange, onExpand, onGroupSelectAll, onGroupSelectNone, optionClassName, optionOnKeyDown, options, value, getOptionsData } = _a, props = __rest(_a, [\"children\", \"className\", \"collapseValue\", \"flatGroup\", \"focusValue\", \"groupClassName\", \"indeterminateValue\", \"multiple\", \"onChange\", \"onExpand\", \"onGroupSelectAll\", \"onGroupSelectNone\", \"optionClassName\", \"optionOnKeyDown\", \"options\", \"value\", \"getOptionsData\"]);\n const OptionsClasses = classnames('OptionList', className, {\n 'OptionList--single-select': !multiple,\n 'OptionList--multi-select': multiple,\n });\n const GroupClasses = classnames('OptionList__group', groupClassName);\n const ValuesFromArray = Array.isArray(value)\n ? value.map((v) => v.value !== undefined ? v.value : v)\n : null;\n const setDefaultOptionProperties = (option) => {\n let defaultSelected = false;\n if (value !== undefined &&\n option.value !== undefined &&\n ((Array.isArray(value) &&\n value.length > 0 &&\n ValuesFromArray.includes(option.value)) || // If value is an Array (multiple selections)\n (typeof value === 'object' && value.value === option.value)) // If value is an Object (single selection)\n ) {\n defaultSelected = true;\n }\n const defaults = {\n collapsed: option.collapsed ? option.collapsed : true,\n selected: defaultSelected,\n text: flatGroup && typeof option.content === 'string'\n ? option.content\n : option.text\n ? option.text\n : null,\n indeterminate: option.indeterminate || false,\n };\n return Object.assign(Object.assign({}, defaults), option);\n };\n const setInitialLevel = () => !flatGroup && (options === null || options === void 0 ? void 0 : options.some((option) => option.options)) ? 2 : 1;\n /* Loops through options object to display grouped and non-grouped options */\n const getOptions = (options, level = 2) => {\n return options === null || options === void 0 ? void 0 : options.map((optionProp, index) => {\n const localOption = setDefaultOptionProperties(optionProp);\n const checkForChildren = !!localOption.options;\n if (checkForChildren) {\n if (!flatGroup)\n return getGroupedOptions(localOption, optionProp, localOption.options, index, level, optionProp.value, optionProp.collapsed);\n if (level === 1)\n return getFlatGroupedOptions(localOption.options, localOption.text, level, index);\n }\n return getOption(localOption, optionProp, !flatGroup ? level : 1);\n });\n };\n /* Called when the options prop is detected in an individual option */\n const getGroupedOptions = (parentOption, originalParentOption, options, index, level, parentCollapseValue, collapsed) => {\n /* Variable determines if an option should be expanded to show children */\n const isOpen = collapsed\n ? !collapsed\n : collapseValue\n ? collapseValue.includes(parentCollapseValue)\n : true;\n return (React.createElement(\"div\", { className: GroupClasses, role: \"group\", key: index },\n getOption(parentOption, originalParentOption, level, true, isOpen, options),\n React.createElement(Collapsible, { open: isOpen }, getOptions(options, level + 1))));\n };\n /* Pull flatGroup prop data for selection handling */\n const objectFlatGroup = typeof flatGroup === 'object' ? Object.assign({}, flatGroup) : undefined;\n const handleGroupSelectAll = (groupedOptions) => {\n if (objectFlatGroup.onGroupSelectAll === undefined)\n return;\n return objectFlatGroup.onGroupSelectAll(groupedOptions);\n };\n const handleGroupSelectNone = (groupedOptions) => {\n if (objectFlatGroup.onGroupSelectNone === undefined)\n return;\n return objectFlatGroup.onGroupSelectNone(groupedOptions);\n };\n const getFlatGroupedOptions = (options, title, level, index) => {\n const selectAll = () => handleGroupSelectAll(options);\n const selectNone = () => handleGroupSelectNone(options);\n return (React.createElement(React.Fragment, { key: `${index}${Object(options)}` },\n index !== 0 && React.createElement(Divider, { spacing: 1 }),\n title && (React.createElement(Stack, { alignItems: \"center\", className: \"OptionList__header\" },\n React.createElement(Eyebrow, null, title),\n multiple && title && typeof flatGroup !== 'boolean' && (React.createElement(React.Fragment, null,\n React.createElement(Link, { primary: true, className: \"m-l-1 fs-1\", onClick: selectAll, \"aria-label\": \"select all\" }, \"All\"),\n React.createElement(Link, { primary: true, className: \"m-l-1 fs-1\", onClick: selectNone, \"aria-label\": \"select none\" }, \"None\"))))),\n getOptions(options, level + 1)));\n };\n const handleOnChange = () => {\n if (onChange === undefined)\n return;\n return onChange;\n };\n const handleOnExpand = () => {\n if (onExpand === undefined)\n return;\n return onExpand;\n };\n /*\n ** NOTE: The following functions (setSelected, setFocus, registerOption, etc)\n ** are all plumbing to support the use case where