@progress/kendo-react-dateinputs 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/es/calendar/components/Calendar.d.ts

@@ -80,8 +80,8 @@ export declare class CalendarWithoutContext extends React.Component<CalendarProp
         tabIndex: PropTypes.Requireable<number>;
         value: PropTypes.Requireable<Date>;
         weekNumber: PropTypes.Requireable<boolean>;
-        topView: (props: CalendarProps, propName: string, componentName: string) => Error;
-        bottomView: (props: CalendarProps, propName: string, componentName: string) => Error;
+        topView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null;
+        bottomView: (props: CalendarProps, propName: keyof CalendarProps<any>, componentName: string) => Error | null;
     };
     /**
      * @hidden
@@ -92,13 +92,13 @@ export declare class CalendarWithoutContext extends React.Component<CalendarProp
         max: Date;
         navigation: boolean;
         defaultActiveView: ActiveView;
-        defaultValue: any;
+        defaultValue: null;
         smoothScroll: boolean;
         topView: ActiveView;
         bottomView: ActiveView;
     };
     protected dom: DOMService;
-    protected scrollSyncService: ScrollSyncService;
+    protected scrollSyncService: ScrollSyncService | null;
     private valueDuringOnChange?;
     private focusedDate;
     private cellUID;

package/dist/es/calendar/components/Calendar.js

@@ -53,8 +53,15 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
     __extends(CalendarWithoutContext, _super);
     function CalendarWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        _this.scrollSyncService = null;
+        _this.focusedDate = null;
         _this.cellUID = guid();
         _this.id = guid();
+        _this.Navigation = null;
+        _this.calendarViewList = null;
+        _this._element = null;
+        _this.intl = null;
+        _this.service = null;
         _this.isActive = false;
         _this.didNavigationChange = false;
         /**
@@ -82,7 +89,9 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleViewChange = function (_a) {
             var view = _a.view;
-            _this.scrollSyncService.configure(view);
+            if (_this.scrollSyncService) {
+                _this.scrollSyncService.configure(view);
+            }
             _this.setState({ activeView: view });
         };
         _this.handleDateChange = function (event) {
@@ -140,6 +149,9 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleKeyDown = function (event) {
             var keyCode = event.keyCode;
+            if (!_this.focusedDate || !_this.service) {
+                return;
+            }
             if (keyCode === Keys.enter) {
                 if (_this.value !== null
                     && isEqualDate(_this.focusedDate, _this.value)) {
@@ -152,7 +164,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
                     value: _this.focusedDate,
                     target: _this
                 };
-                _this.handleDateChange.call(undefined, args);
+                _this.handleDateChange(args);
             }
             else {
                 var candidate = dateInRange(_this.navigation.move(_this.focusedDate, _this.navigation.action(event), _this.state.activeView, _this.service, event), _this.min, _this.max);
@@ -266,7 +278,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     CalendarWithoutContext.prototype.componentDidUpdate = function (_, prevState) {
-        if (prevState.activeView !== this.state.activeView) {
+        if (prevState.activeView !== this.state.activeView && this.scrollSyncService) {
             this.scrollSyncService.configure(this.state.activeView);
         }
         if (this.calendarViewList) {
@@ -340,7 +352,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
             var prop = props[propName];
             var bottomView = props.bottomView;
             if (prop && bottomView && CalendarViewEnum[prop] < CalendarViewEnum[bottomView]) {
-                return new Error("Invalid prop + " + propName + " suplied to " + componentName + ".\n                    " + propName + " can not be smaller than bottomView.\n                    ");
+                return new Error("Invalid prop + ".concat(propName, " suplied to ").concat(componentName, ".\n                    ").concat(propName, " can not be smaller than bottomView.\n                    "));
             }
             return null;
         },
@@ -348,7 +360,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
             var prop = props[propName];
             var topView = props.topView;
             if (prop && topView && CalendarViewEnum[prop] > CalendarViewEnum[topView]) {
-                return new Error("Invalid prop + " + propName + " suplied to " + componentName + ".\n                    " + propName + " can not be bigger than topView.\n                    ");
+                return new Error("Invalid prop + ".concat(propName, " suplied to ").concat(componentName, ".\n                    ").concat(propName, " can not be bigger than topView.\n                    "));
             }
             return null;
         }

package/dist/es/calendar/components/Header.d.ts

@@ -11,6 +11,7 @@ export interface HeaderEventArguments {
     nativeEvent?: any;
     value: Date;
     target: Header;
+    isTodayClick?: boolean;
 }
 /**
  * @hidden

package/dist/es/calendar/components/Header.js

@@ -47,7 +47,7 @@ var Header = /** @class */ (function (_super) {
             if (take < 1 || !_this.props.service.isInRange(nextDate, _this.min, _this.max)) {
                 return title;
             }
-            return title + " - " + _this.props.service.title(nextDate);
+            return "".concat(title, " - ").concat(_this.props.service.title(nextDate));
         };
         _this.handleTitleClick = function (event) {
             if (!_this.canMoveUp) {

package/dist/es/calendar/components/HorizontalViewList.js

@@ -27,6 +27,7 @@ var HorizontalViewList = /** @class */ (function (_super) {
     __extends(HorizontalViewList, _super);
     function HorizontalViewList(props) {
         var _this = _super.call(this, props) || this;
+        _this._element = null;
         _this.isActive = false;
         _this.focusActiveDate = function () {
             if (!_this._element) {

package/dist/es/calendar/components/MultiViewCalendar.d.ts

@@ -62,14 +62,14 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
         ariaDescribedBy: PropTypes.Requireable<string>;
         max: PropTypes.Requireable<Date>;
         min: PropTypes.Requireable<Date>;
-        mode: PropTypes.Requireable<"range" | "multiple" | "single">;
+        mode: PropTypes.Requireable<"multiple" | "range" | "single">;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         tabIndex: PropTypes.Requireable<number>;
         topView: PropTypes.Requireable<ActiveView>;
         value: PropTypes.Requireable<any>;
-        views: (props: any, propName: any, componentName: any) => Error;
+        views: (props: MultiViewCalendarProps, propName: keyof MultiViewCalendarProps<any>, componentName: string) => Error | null;
         weekNumber: PropTypes.Requireable<boolean>;
     };
     /**
@@ -81,7 +81,7 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
         max: Date;
         navigation: boolean;
         defaultActiveView: ActiveView;
-        defaultValue: any;
+        defaultValue: null;
         topView: ActiveView;
         tabIndex: number;
         bottomView: ActiveView;

package/dist/es/calendar/components/MultiViewCalendar.js

@@ -72,12 +72,19 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
     __extends(MultiViewCalendarWithoutContext, _super);
     function MultiViewCalendarWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        _this.dates = [];
         _this.selectedDate = null;
         _this.selectedMultiple = null;
         _this.selectedRange = EMPTY_SELECTIONRANGE;
+        _this._focusedDate = new Date();
         _this.cellUID = guid();
         _this.activeRangeEnd = 'start';
+        _this._element = null;
+        _this.intl = null;
+        _this.localization = null;
+        _this.service = null;
         _this.wrapperID = guid();
+        _this.calendarViewList = null;
         _this.isActive = false;
         _this.calculateFocusFromValue = true;
         /**
@@ -181,7 +188,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             if (!_this.todayIsInRange) {
                 return;
             }
-            _this.handleDateChange.call(undefined, event, true);
+            _this.handleDateChange(event);
         };
         _this.handlePrevButtonClick = function () {
             _this.navigate(Action.PrevView);
@@ -198,7 +205,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                     value: _this.focusedDate,
                     target: _this
                 };
-                _this.handleDateChange.call(undefined, args);
+                _this.handleDateChange(args);
             }
             else {
                 var candidate = dateInRange(_this.navigation.move(_this.focusedDate, _this.navigation.action(event), _this.state.activeView, _this.service, event), _this.min, _this.max);
@@ -458,7 +465,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         }
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());
         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),
-            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,
+            React.createElement(Header, { key: ".kendo.calendar.header.".concat(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,
                     React.createElement(Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),
                     React.createElement(Button, __assign({ type: "button", className: "k-nav-next", icon: "arrow-chevron-right", fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
@@ -509,8 +516,8 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         views: function (props, propName, componentName) {
             var views = props[propName];
             if (views !== undefined && views < 1) {
-                return new Error("Invalid prop '" + propName + "' supplied to" +
-                    ("'" + componentName + "'. The '" + propName + "' property cannot be less than 1'"));
+                return new Error("Invalid prop '".concat(propName, "' supplied to") +
+                    "'".concat(componentName, "'. The '").concat(propName, "' property cannot be less than 1'"));
             }
             return null;
         },

package/dist/es/calendar/components/Navigation.d.ts

@@ -65,7 +65,7 @@ export declare class Navigation extends React.Component<NavigationProps, Navigat
      */
     componentDidUpdate(_prevProps: NavigationProps, _prevState: NavigationState): void;
     render(): JSX.Element;
-    protected handleVirtualizationMount: (virtualization: any) => void;
+    protected handleVirtualizationMount: (virtualization: Virtualization) => void;
     protected buildNavigationItem: (date: Date) => React.ReactNode;
     protected calculateHeights: () => void;
     protected getTake(skip: number, total: number): number;

package/dist/es/calendar/components/Navigation.js

@@ -38,11 +38,16 @@ var Navigation = /** @class */ (function (_super) {
     __extends(Navigation, _super);
     function Navigation(props) {
         var _this = _super.call(this, props) || this;
+        _this.virtualization = null;
+        _this.list = null;
+        _this.itemHeight = 0;
         _this.topOffset = 0;
+        _this.maxViewHeight = 0;
+        _this.bottomOffset = 0;
         _this.handleVirtualizationMount = function (virtualization) {
             _this.virtualization = virtualization;
             if (_this.virtualization && _this.list) {
-                _this.list.style.transform = "translateY(" + _this.topOffset + "px)";
+                _this.list.style.transform = "translateY(".concat(_this.topOffset, "px)");
                 var viewDate = dateInRange(_this.props.focusedDate, _this.props.min, _this.props.max);
                 var indexToScroll = _this.props.service.skip(viewDate, _this.props.min);
                 _this.virtualization.scrollToIndex(indexToScroll);
@@ -51,7 +56,7 @@ var Navigation = /** @class */ (function (_super) {
         _this.buildNavigationItem = function (date) {
             var text = _this.props.service.navigationTitle(date);
             var isRangeStart = _this.props.service.isRangeStart(date);
-            var uniqueID = "kendo-react-calendar-nav-item-" + date.getTime();
+            var uniqueID = "kendo-react-calendar-nav-item-".concat(date.getTime());
             var navigationItemProps = {
                 text: text,
                 value: date,
@@ -72,7 +77,7 @@ var Navigation = /** @class */ (function (_super) {
         };
         _this.handleDateChange = function (value, event) {
             var onChange = _this.props.onChange;
-            if (onChange) {
+            if (onChange && event) {
                 var args = {
                     value: cloneDate(value),
                     target: _this,
@@ -89,7 +94,7 @@ var Navigation = /** @class */ (function (_super) {
                 _this.setState({ skip: skip });
             }
             if (_this.list && scrollAction) {
-                var translate = "translateY(" + scrollAction.offset + "px)";
+                var translate = "translateY(".concat(scrollAction.offset, "px)");
                 _this.list.style.transform = translate;
             }
         };

package/dist/es/calendar/components/TodayCommand.js

@@ -25,18 +25,20 @@ var TodayCommand = /** @class */ (function (_super) {
     __extends(TodayCommand, _super);
     function TodayCommand() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.localization = null;
         _this.handleClick = function (syntheticEvent) {
             if (!_this.todayIsInRange) {
                 return;
             }
             if (_this.props.onClick) {
-                _this.props.onClick.call(undefined, {
+                var event_1 = {
                     syntheticEvent: syntheticEvent,
                     nativeEvent: syntheticEvent.nativeEvent,
                     value: dateInRange(getToday(), _this.min, _this.max),
                     target: _this,
                     isTodayClick: true
-                });
+                };
+                _this.props.onClick.call(undefined, event_1);
             }
         };
         return _this;

package/dist/es/calendar/components/View.d.ts

@@ -34,7 +34,7 @@ export interface ViewProps {
     max: Date;
     min: Date;
     cell?: React.ComponentType<CalendarCellProps>;
-    onCellEnter?: (date: Date | null) => void;
+    onCellEnter?: (date: Date) => void;
     onCellLeave?: (date: Date | null) => void;
     onChange?: (event: ViewEventArguments) => void;
     selectedDate: Date | Date[] | null;
@@ -48,7 +48,7 @@ export interface ViewProps {
  */
 export declare class View extends React.Component<ViewProps, {}> {
     static propTypes: {
-        activeRangeEnd: PropTypes.Requireable<string>;
+        activeRangeEnd: PropTypes.Requireable<string | null>;
         activeView: PropTypes.Validator<number>;
         cellUID: PropTypes.Validator<string>;
         direction: PropTypes.Requireable<string>;
@@ -56,7 +56,7 @@ export declare class View extends React.Component<ViewProps, {}> {
         max: PropTypes.Validator<Date>;
         min: PropTypes.Validator<Date>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        selectedDate: PropTypes.Requireable<Date | Date[]>;
+        selectedDate: PropTypes.Requireable<Date | (Date | null | undefined)[]>;
         showWeekNumbers: PropTypes.Requireable<boolean>;
         viewDate: PropTypes.Validator<Date>;
     };
@@ -77,7 +77,7 @@ export declare class View extends React.Component<ViewProps, {}> {
     protected buildWeekNumber: (row: any, idx: number) => JSX.Element;
     protected buildRow: (row: any) => any;
     protected getWeekNumber(date: Date): number | null;
-    protected firstDate: (row: any) => Date;
+    protected firstDate: (row: any) => Date | null;
     protected firstWeekDateContext: (rowCtx: CellContext[]) => CellContext | null;
     private handleClick;
     private handleMouseEnter;

package/dist/es/calendar/components/View.js

@@ -44,14 +44,16 @@ var View = /** @class */ (function (_super) {
     __extends(View, _super);
     function View() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.intl = null;
+        _this.weekService = null;
         _this.buildWeekNumber = function (row, idx) {
             var firstDayOfWeek = _this.firstDate(row);
             if (!firstDayOfWeek) {
-                return emptyCell("week-cell-" + idx);
+                return emptyCell("week-cell-".concat(idx));
             }
             var firstDate = _this.firstDate(row);
             var weekCellValue = _this.getWeekNumber(firstDate);
-            var uniqueID = "kendo-react-calendar-week-cell-" + weekCellValue;
+            var uniqueID = "kendo-react-calendar-week-cell-".concat(weekCellValue);
             var cellProps = {
                 className: 'k-alt',
                 value: weekCellValue,
@@ -67,7 +69,7 @@ var View = /** @class */ (function (_super) {
                     return emptyCell(idx);
                 }
                 var aria = { 'aria-selected': cell.isSelected };
-                var uniqueID = "kendo-react-calendar-cell-" + cell.value.getTime();
+                var uniqueID = "kendo-react-calendar-cell-".concat(cell.value.getTime());
                 var cellProps = __assign(__assign(__assign({}, aria), cell), { isDisabled: !cell.isInRange, view: _this.props.activeView, onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave });
                 return _this.props.cell
                     ? (React.createElement(_this.props.cell, __assign({}, cellProps, { key: uniqueID }), cell.formattedValue))
@@ -91,7 +93,7 @@ var View = /** @class */ (function (_super) {
         };
         _this.handleClick = function (value, event) {
             var onChange = _this.props.onChange;
-            if (onChange) {
+            if (onChange && event) {
                 var args = {
                     value: cloneDate(value),
                     target: _this,
@@ -189,7 +191,7 @@ var View = /** @class */ (function (_super) {
                 }))));
     };
     View.prototype.getWeekNumber = function (date) {
-        if (!this.weekNumber) {
+        if (!this.weekNumber || !this.intl) {
             return null;
         }
         return weekInYear(date, this.intl.firstDay());

package/dist/es/calendar/components/ViewList.d.ts

@@ -98,9 +98,9 @@ export declare class ViewList extends React.Component<ViewListProps, ViewListSta
     focusActiveDate: () => void;
     blurActiveDate: () => void;
     render(): JSX.Element;
-    protected handleVirtualizationMount: (virtualization: any) => void;
-    protected buildMonthView: (cols: any, weekNames: any) => JSX.Element;
-    protected buildDates: (cols: any, dates: Date[]) => JSX.Element;
+    protected handleVirtualizationMount: (virtualization: Virtualization) => void;
+    protected buildMonthView: (cols: any[], weekNames: any[]) => JSX.Element;
+    protected buildDates: (cols: any[], dates: Date[]) => JSX.Element;
     protected calculateHeights: () => void;
     protected getTake: (skip: number, total: number) => number;
     private handleScrollAction;

package/dist/es/calendar/components/ViewList.js

@@ -32,6 +32,14 @@ var ViewList = /** @class */ (function (_super) {
     __extends(ViewList, _super);
     function ViewList(props) {
         var _this = _super.call(this, props) || this;
+        _this.virtualization = null;
+        _this.calendarView = null;
+        _this.table = null;
+        _this.intl = null;
+        _this.bottomOffset = 0;
+        _this.viewOffset = 0;
+        _this.viewHeight = 0;
+        _this._element = null;
         _this.isActive = false;
         _this.animateToIndex = true;
         _this.shouldScroll = false;
@@ -62,7 +70,7 @@ var ViewList = /** @class */ (function (_super) {
         _this.handleVirtualizationMount = function (virtualization) {
             _this.virtualization = virtualization;
             if (_this.virtualization && _this.table) {
-                _this.table.style.transform = "translateY(" + _this.viewOffset + "px)";
+                _this.table.style.transform = "translateY(".concat(_this.viewOffset, "px)");
                 var viewDate = dateInRange(_this.props.focusedDate, _this.props.min, _this.props.max);
                 var indexToScroll = _this.props.service.skip(viewDate, _this.props.min);
                 _this.virtualization.scrollToIndex(indexToScroll);
@@ -103,7 +111,7 @@ var ViewList = /** @class */ (function (_super) {
                 _this.setState({ index: index, skip: skip });
             }
             if (_this.table && scrollAction) {
-                var translate = "translateY(" + scrollAction.offset + "px)";
+                var translate = "translateY(".concat(scrollAction.offset, "px)");
                 _this.table.style.transform = translate;
             }
         };

package/dist/es/calendar/services/BusViewService.js

@@ -28,7 +28,7 @@ var BusViewService = /** @class */ (function () {
         this.top = top;
     };
     BusViewService.prototype.service = function (view, intl) {
-        return new services["" + view](intl);
+        return new services["".concat(view)](intl);
     };
     BusViewService.prototype.moveDown = function (view, event) {
         this.move(view, -1, event);

package/dist/es/calendar/services/CenturyViewService.js

@@ -51,7 +51,7 @@ var CenturyViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 return intersects(cellDate, firstDate, lastDate) ? ({
                     formattedValue: _this.value(cellDate),
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isWeekend: false,
@@ -121,7 +121,7 @@ var CenturyViewService = /** @class */ (function () {
         if (!value) {
             return '';
         }
-        return firstDecadeOfCentury(value).getFullYear() + " - " + lastDecadeOfCentury(value).getFullYear();
+        return "".concat(firstDecadeOfCentury(value).getFullYear(), " - ").concat(lastDecadeOfCentury(value).getFullYear());
     };
     CenturyViewService.prototype.rowLength = function (_) {
         return CELLS_LENGTH;

package/dist/es/calendar/services/DOMService.js

@@ -6,7 +6,25 @@ import { canUseDOM } from '@progress/kendo-react-common';
  */
 var DOMService = /** @class */ (function () {
     function DOMService() {
+        // heights
+        this.calendarHeight = 0;
+        this.headerHeight = 0;
+        this.monthViewHeight = 0;
+        this.yearViewHeight = 0;
+        this.decadeViewHeight = 0;
+        this.centuryViewHeight = 0;
+        this.navigationItemHeight = 0;
+        this.scrollableContentHeight = 0;
+        this.scrollableYearContentHeight = 0;
+        // widths
+        this.calendarWidth = 0;
+        this.monthViewWidth = 0;
+        this.yearViewWidth = 0;
+        this.decadeViewWidth = 0;
+        this.centuryViewWidth = 0;
+        this.scrollableContentWidth = 0;
         this.didCalculate = false;
+        this.hostContainer = null;
     }
     DOMService.prototype.ensureHeights = function () {
         if (this.calendarHeight !== undefined) {
@@ -38,7 +56,7 @@ var DOMService = /** @class */ (function () {
         var content = function (rows, cells) {
             if (cells === void 0) { cells = 1; }
             return (table([
-                tbody([tr([td('1', 'k-calendar-td k-alt')])].concat(repeat(rows, function () { return tr(repeat(cells, function (c) { return td("<span class=\"k-link\">" + c + "</span>", 'k-calendar-td'); }), 'k-calendar-tr'); })), 'k-calendar-tbody')
+                tbody([tr([td('1', 'k-calendar-td k-alt')])].concat(repeat(rows, function () { return tr(repeat(cells, function (c) { return td("<span class=\"k-link\">".concat(c, "</span>"), 'k-calendar-td'); }), 'k-calendar-tr'); })), 'k-calendar-tbody')
             ], 'k-calendar-table'));
         };
         var scrollable = function (children) { return div(children, 'k-content k-calendar-content k-scrollable'); };
@@ -80,7 +98,7 @@ var DOMService = /** @class */ (function () {
         var getScrollable = function (element) { return element.querySelector('.k-scrollable'); };
         var horizontal = function (element) {
             var scrollableElement = getScrollable(element);
-            scrollableElement.className = scrollableElement.className + " k-scrollable-horizontal";
+            scrollableElement.className = "".concat(scrollableElement.className, " k-scrollable-horizontal");
             return element;
         };
         var monthView = viewFactory({ cells: 7, rows: 6 }, 'k-calendar-view k-calendar-monthview k-vstack', true);
@@ -144,13 +162,13 @@ var DOMService = /** @class */ (function () {
         var viewProp = dimension === 'height' ? 'ViewHeight' : 'ViewWidth';
         switch (viewType) {
             case CalendarViewEnum.month:
-                return this["month" + viewProp];
+                return this["month".concat(viewProp)];
             case CalendarViewEnum.year:
-                return this["year" + viewProp];
+                return this["year".concat(viewProp)];
             case CalendarViewEnum.decade:
-                return this["decade" + viewProp];
+                return this["decade".concat(viewProp)];
             case CalendarViewEnum.century:
-                return this["century" + viewProp];
+                return this["century".concat(viewProp)];
             default:
                 return 1;
         }

package/dist/es/calendar/services/DecadeViewService.js

@@ -51,7 +51,7 @@ var DecadeViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 return intersects(cellDate, firstDate, lastDate) ? ({
                     formattedValue: _this.value(cellDate),
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isWeekend: false,
@@ -120,7 +120,7 @@ var DecadeViewService = /** @class */ (function () {
         if (!value) {
             return '';
         }
-        return firstYearOfDecade(value).getFullYear() + " - " + lastYearOfDecade(value).getFullYear();
+        return "".concat(firstYearOfDecade(value).getFullYear(), " - ").concat(lastYearOfDecade(value).getFullYear());
     };
     DecadeViewService.prototype.rowLength = function (_) {
         return CELLS_LENGTH;

package/dist/es/calendar/services/MonthViewService.js

@@ -60,7 +60,7 @@ var MonthViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 var cell = {
                     formattedValue: _this.value(cellDate),
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isInRange: isInRange(cellDate, min, max),
@@ -126,7 +126,7 @@ var MonthViewService = /** @class */ (function () {
         return this.isRangeStart(value) ? value.getFullYear().toString() : this.abbrMonthNames()[value.getMonth()];
     };
     MonthViewService.prototype.title = function (current) {
-        return this.wideMonthNames()[current.getMonth()] + " " + current.getFullYear();
+        return "".concat(this.wideMonthNames()[current.getMonth()], " ").concat(current.getFullYear());
     };
     MonthViewService.prototype.rowLength = function (prependCell) {
         return CELLS_LENGTH + (prependCell ? 1 : 0);

package/dist/es/calendar/services/NavigationService.js

@@ -19,7 +19,7 @@ var NavigationService = /** @class */ (function () {
         this.bus = bus;
     }
     NavigationService.prototype.action = function (event) {
-        var action = "" + (event.ctrlKey || event.metaKey ? 'meta+' : '') + event.keyCode;
+        var action = "".concat(event.ctrlKey || event.metaKey ? 'meta+' : '').concat(event.keyCode);
         return KEY_TO_ACTION[action];
     };
     NavigationService.prototype.move = function (value, action, activeView, service, event) {

package/dist/es/calendar/services/ScrollSyncService.js

@@ -6,6 +6,10 @@ var powerByMagnitude = function (magnitude) { return function (x) { return x * m
 var ScrollSyncService = /** @class */ (function () {
     function ScrollSyncService(dom) {
         this.dom = dom;
+        this.divideByMagnitude = null;
+        this.powerByMagnitude = null;
+        this.navigator = null;
+        this.view = null;
         this.monthScrolled = false;
         this.navScrolled = false;
     }
@@ -47,7 +51,7 @@ var ScrollSyncService = /** @class */ (function () {
     };
     ScrollSyncService.prototype.calculateScroll = function (component, scrollTop) {
         var modifier = component === this.navigator ? this.divideByMagnitude : this.powerByMagnitude;
-        return modifier(scrollTop);
+        return modifier ? modifier(scrollTop) : 0;
     };
     return ScrollSyncService;
 }());

package/dist/es/calendar/services/YearViewService.js

@@ -77,7 +77,7 @@ var YearViewService = /** @class */ (function () {
                     : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
                 return {
                     formattedValue: months[cellDate.getMonth()],
-                    id: "" + cellUID + cellDate.getTime(),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
                     isFocused: _this.isEqual(cellDate, focusedDate),
                     isSelected: isSelected,
                     isInRange: isInRange(cellDate, min, max),
@@ -138,7 +138,7 @@ var YearViewService = /** @class */ (function () {
         return modifier(value);
     };
     YearViewService.prototype.cellTitle = function (value) {
-        return value.getFullYear() + " " + this.value(value);
+        return "".concat(value.getFullYear(), " ").concat(this.value(value));
     };
     YearViewService.prototype.navigationTitle = function (value) {
         return this.title(value);

package/dist/es/calendar/utils/ScrollSync.d.ts

@@ -4,9 +4,9 @@
 export default class ScrollSync {
     private scrollDetails;
     private scrollNavigation;
-    areDetailsSynced: any;
-    isNavigationSynced: any;
-    magnitude: any;
+    areDetailsSynced: boolean;
+    isNavigationSynced: boolean;
+    magnitude: number;
     constructor(detailsMonthHeight: number, navigationMonthHeight: number, scrollDetails: (scrollTo: number) => void, scrollNavigation: (scrollTo: number) => void);
     syncDetails(navigationScrollTop: number): void;
     syncNavigation(detailsScrollTop: number): void;

package/dist/es/calendar/utils/ScrollSync.js

@@ -5,6 +5,8 @@ var ScrollSync = /** @class */ (function () {
     function ScrollSync(detailsMonthHeight, navigationMonthHeight, scrollDetails, scrollNavigation) {
         this.scrollDetails = scrollDetails;
         this.scrollNavigation = scrollNavigation;
+        this.areDetailsSynced = false;
+        this.isNavigationSynced = false;
         this.magnitude = Math.max(detailsMonthHeight / navigationMonthHeight, 1);
     }
     ScrollSync.prototype.syncDetails = function (navigationScrollTop) {