@progress/kendo-vue-dateinputs 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/calendar/models/CalendarViewEnum.js

@@ -0,0 +1,10 @@
+/**
+ * The Enum which defines all possible Calendar view types.
+ */
+export var CalendarViewEnum;
+(function (CalendarViewEnum) {
+    CalendarViewEnum[CalendarViewEnum["month"] = 0] = "month";
+    CalendarViewEnum[CalendarViewEnum["year"] = 1] = "year";
+    CalendarViewEnum[CalendarViewEnum["decade"] = 2] = "decade";
+    CalendarViewEnum[CalendarViewEnum["century"] = 3] = "century";
+})(CalendarViewEnum || (CalendarViewEnum = {}));

package/dist/esm/calendar/models/CellContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @hidden
+ */
+export interface CellContext {
+    formattedValue: string;
+    id: string;
+    isWeekend: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isInRange: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isRangeMid: boolean;
+    isRangeSplitEnd?: boolean;
+    isRangeSplitStart?: boolean;
+    isToday: boolean;
+    title?: string;
+    value: Date;
+}

package/dist/esm/calendar/models/CellContext.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/NavigationAction.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @hidden
+ */
+export declare enum Action {
+    Left = 0,
+    Right = 1,
+    Up = 2,
+    Down = 3,
+    PrevView = 4,
+    NextView = 5,
+    FirstInView = 6,
+    LastInView = 7,
+    LowerView = 8,
+    UpperView = 9
+}

package/dist/esm/calendar/models/NavigationAction.js

@@ -0,0 +1,16 @@
+/**
+ * @hidden
+ */
+export var Action;
+(function (Action) {
+    Action[Action["Left"] = 0] = "Left";
+    Action[Action["Right"] = 1] = "Right";
+    Action[Action["Up"] = 2] = "Up";
+    Action[Action["Down"] = 3] = "Down";
+    Action[Action["PrevView"] = 4] = "PrevView";
+    Action[Action["NextView"] = 5] = "NextView";
+    Action[Action["FirstInView"] = 6] = "FirstInView";
+    Action[Action["LastInView"] = 7] = "LastInView";
+    Action[Action["LowerView"] = 8] = "LowerView";
+    Action[Action["UpperView"] = 9] = "UpperView";
+})(Action || (Action = {}));

package/dist/esm/calendar/models/SelectionRange.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The type that defines the selection range of the Calendar.
+ */
+export interface SelectionRange {
+    /**
+     * The beginning of the selection range.
+     */
+    start: Date | null;
+    /**
+     * The end of the selection range.
+     */
+    end: Date | null;
+}
+/**
+ * @hidden
+ */
+export declare const EMPTY_SELECTIONRANGE: SelectionRange;

package/dist/esm/calendar/models/SelectionRange.js

@@ -0,0 +1,4 @@
+/**
+ * @hidden
+ */
+export var EMPTY_SELECTIONRANGE = { start: null, end: null };

package/dist/esm/calendar/models/SelectionRangeEnd.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The literal type that defines which end of the selection range is active.
+ */
+export declare type SelectionRangeEnd = 'start' | 'end' | null;

package/dist/esm/calendar/models/SelectionRangeEnd.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/ViewService.d.ts

@@ -0,0 +1,25 @@
+import { Action } from './NavigationAction';
+import { CellContext } from './CellContext';
+/**
+ * @hidden
+ */
+export interface ViewService {
+    isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): boolean;
+    addToDate(min: Date, skip: number): Date;
+    datesList(start: Date, count: number): Date[];
+    data(options: any): CellContext[][];
+    isEqual(candidate: Date, expected: Date): boolean;
+    isInArray(date: Date, dates: Date[]): boolean;
+    isInRange(candidate: Date, min: Date, max: Date): boolean;
+    isRangeStart(date: Date): boolean;
+    isInSameView(candidate: Date, value: Date): boolean;
+    move(date: Date, action: Action | null): Date;
+    cellTitle(current: Date): string;
+    navigationTitle(current: Date): string;
+    title(current: Date): string;
+    rowLength(prependCell?: boolean): number;
+    skip(value: Date, min: Date): number;
+    total(min: Date, max: Date): number;
+    value(current: Date): string;
+    viewDate(date: Date, max: Date, border: number): Date;
+}

package/dist/esm/calendar/models/ViewService.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/calendar/models/index.d.ts

@@ -0,0 +1,10 @@
+import { Action } from './NavigationAction';
+import { ActiveView } from './ActiveView';
+import { CalendarSettings } from './CalendarSettings';
+import { CalendarViewEnum } from './CalendarViewEnum';
+import { CellContext } from './CellContext';
+import { CalendarMode } from './CalendarMode';
+import { SelectionRange, EMPTY_SELECTIONRANGE } from './SelectionRange';
+import { SelectionRangeEnd } from './SelectionRangeEnd';
+import { ViewService } from './ViewService';
+export { Action, ActiveView, CalendarSettings, CalendarViewEnum, CellContext, EMPTY_SELECTIONRANGE, CalendarMode, SelectionRange, SelectionRangeEnd, ViewService };

package/dist/esm/calendar/models/index.js

@@ -0,0 +1,4 @@
+import { Action } from './NavigationAction.js';
+import { CalendarViewEnum } from './CalendarViewEnum.js';
+import { EMPTY_SELECTIONRANGE } from './SelectionRange.js';
+export { Action, CalendarViewEnum, EMPTY_SELECTIONRANGE };

package/dist/esm/calendar/services/BusViewService.d.ts

@@ -0,0 +1,21 @@
+import { ViewService } from '../models/ViewService';
+import { IntlService } from '@progress/kendo-vue-intl';
+import { CalendarViewEnum } from '../models/CalendarViewEnum';
+/**
+ * @hidden
+ */
+export declare class BusViewService {
+    private onViewChanged;
+    private bottom;
+    private top;
+    constructor(onViewChanged: any);
+    configure(bottom: CalendarViewEnum, top: CalendarViewEnum): void;
+    service(view: CalendarViewEnum, intl: IntlService): ViewService;
+    moveDown(view: CalendarViewEnum, event?: any): void;
+    moveUp(view: CalendarViewEnum, event?: any): void;
+    moveToBottom(activeView: CalendarViewEnum): void;
+    canMoveDown(view: CalendarViewEnum): boolean;
+    canMoveUp(view: CalendarViewEnum): boolean;
+    private clamp;
+    private move;
+}

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

@@ -0,0 +1,69 @@
+var _a;
+import { CenturyViewService } from './CenturyViewService.js';
+import { DecadeViewService } from './DecadeViewService.js';
+import { MonthViewService } from './MonthViewService.js';
+import { YearViewService } from './YearViewService.js';
+import { CalendarViewEnum } from '../models/CalendarViewEnum.js';
+var services = (_a = {},
+    _a[CalendarViewEnum.month] = MonthViewService,
+    _a[CalendarViewEnum.year] = YearViewService,
+    _a[CalendarViewEnum.decade] = DecadeViewService,
+    _a[CalendarViewEnum.century] = CenturyViewService,
+    _a);
+var viewOffset = function (view, offset) {
+    var candidate = CalendarViewEnum[CalendarViewEnum[view + offset]];
+    return candidate !== undefined ? candidate : view;
+};
+/**
+ * @hidden
+ */
+var BusViewService = /** @class */ (function () {
+    function BusViewService(onViewChanged) {
+        this.bottom = CalendarViewEnum.month;
+        this.top = CalendarViewEnum.century;
+        this.onViewChanged = onViewChanged;
+    }
+    BusViewService.prototype.configure = function (bottom, top) {
+        this.bottom = bottom;
+        this.top = top;
+    };
+    BusViewService.prototype.service = function (view, intl) {
+        return new services["".concat(view)](intl);
+    };
+    BusViewService.prototype.moveDown = function (view, event) {
+        this.move(view, -1, event);
+    };
+    BusViewService.prototype.moveUp = function (view, event) {
+        this.move(view, 1, event);
+    };
+    BusViewService.prototype.moveToBottom = function (activeView) {
+        if (activeView === this.bottom) {
+            return;
+        }
+        this.onViewChanged({ view: this.bottom });
+    };
+    BusViewService.prototype.canMoveDown = function (view) {
+        return this.bottom < view;
+    };
+    BusViewService.prototype.canMoveUp = function (view) {
+        return view < this.top;
+    };
+    BusViewService.prototype.clamp = function (view) {
+        if (view < this.bottom) {
+            return this.bottom;
+        }
+        if (view > this.top) {
+            return this.top;
+        }
+        return view;
+    };
+    BusViewService.prototype.move = function (view, offset, event) {
+        var candidate = this.clamp(viewOffset(view, offset));
+        if (candidate === view) {
+            return;
+        }
+        this.onViewChanged({ view: candidate }, event);
+    };
+    return BusViewService;
+}());
+export { BusViewService };

package/dist/esm/calendar/services/CenturyViewService.d.ts

@@ -0,0 +1,25 @@
+import { Action, CellContext, ViewService } from '../models';
+/**
+ * @hidden
+ */
+export declare class CenturyViewService implements ViewService {
+    addToDate(min: Date, skip: number): Date;
+    datesList(start: Date, count: number): Date[];
+    data(options: any): CellContext[][];
+    isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): boolean;
+    isEqual(candidate: Date | null, expected: Date | null): boolean;
+    isInArray(date: Date, dates: Date[]): boolean;
+    isInRange(candidate: Date, min: Date | null, max: Date | null): boolean;
+    isInSameView(candidate: Date, value: Date): boolean;
+    isRangeStart(value: Date): boolean;
+    move(value: Date, action: Action): Date;
+    cellTitle(value: Date): string;
+    navigationTitle(value?: Date): string;
+    title(value?: Date): string;
+    rowLength(_?: boolean): number;
+    skip(value: Date, min: Date): number;
+    total(min: Date, max: Date): number;
+    value(current: Date): string;
+    viewDate(date: Date, max: Date, border?: number): Date;
+    private normalize;
+}

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

@@ -0,0 +1,158 @@
+var _a;
+/* tslint:disable:object-literal-sort-keys */
+import { addDecades, addCenturies, cloneDate, durationInCenturies, firstYearOfDecade, firstDecadeOfCentury, lastDecadeOfCentury } from '@progress/kendo-date-math';
+import { Action, EMPTY_SELECTIONRANGE } from '../models.js';
+import { getToday, isInRange, isInSelectionRange, range } from '../../utils.js';
+var EMPTY_DATA = [[]];
+var CELLS_LENGTH = 4;
+var ROWS_LENGTH = 3;
+var ACTIONS = (_a = {},
+    _a[Action.Left] = function (date) { return addDecades(date, -1); },
+    _a[Action.Up] = function (date) { return addDecades(date, -4); },
+    _a[Action.Right] = function (date) { return addDecades(date, 1); },
+    _a[Action.Down] = function (date) { return addDecades(date, 4); },
+    _a[Action.PrevView] = function (date) { return addCenturies(date, -1); },
+    _a[Action.NextView] = function (date) { return addCenturies(date, 1); },
+    _a[Action.FirstInView] = function (date) { return firstDecadeOfCentury(date); },
+    _a[Action.LastInView] = function (date) { return lastDecadeOfCentury(date); },
+    _a);
+/**
+ * @hidden
+ */
+var CenturyViewService = /** @class */ (function () {
+    function CenturyViewService() {
+    }
+    CenturyViewService.prototype.addToDate = function (min, skip) {
+        return addCenturies(min, skip);
+    };
+    CenturyViewService.prototype.datesList = function (start, count) {
+        return range(0, count).map(function (i) { return addCenturies(start, i); });
+    };
+    CenturyViewService.prototype.data = function (options) {
+        var _this = this;
+        var cellUID = options.cellUID, focusedDate = options.focusedDate, isActiveView = options.isActiveView, max = options.max, min = options.min, selectedDate = options.selectedDate, _a = options.selectionRange, selectionRange = _a === void 0 ? EMPTY_SELECTIONRANGE : _a, viewDate = options.viewDate;
+        if (!viewDate) {
+            return EMPTY_DATA;
+        }
+        var cells = range(0, CELLS_LENGTH);
+        var firstDate = firstDecadeOfCentury(viewDate);
+        var lastDate = lastDecadeOfCentury(viewDate);
+        var today = getToday();
+        return range(0, ROWS_LENGTH).map(function (rowOffset) {
+            var baseDate = addDecades(firstDate, rowOffset * CELLS_LENGTH);
+            return cells.map(function (cellOffset) {
+                var cellDate = _this.normalize(addDecades(baseDate, cellOffset), min, max);
+                var changedDecade = !_this.isInSameView(cellDate, lastDate);
+                if (changedDecade) {
+                    return null;
+                }
+                var isRangeStart = _this.isEqual(cellDate, selectionRange.start);
+                var isRangeEnd = _this.isEqual(cellDate, selectionRange.end);
+                var isInMiddle = !isRangeStart && !isRangeEnd;
+                var isRangeMid = isInMiddle && isInSelectionRange(cellDate, selectionRange);
+                var isSelected = isActiveView && (!Array.isArray(selectedDate)
+                    ? isInRange(selectedDate, min, max) && _this.isEqual(cellDate, selectedDate)
+                    : _this.isSelectedFromArray(cellDate, selectedDate, min, max));
+                return {
+                    formattedValue: _this.value(cellDate),
+                    id: "".concat(cellUID).concat(cellDate.getTime()),
+                    isFocused: _this.isEqual(cellDate, focusedDate),
+                    isSelected: isSelected,
+                    isWeekend: false,
+                    isInRange: isInRange(cellDate, min, max),
+                    isRangeStart: isRangeStart,
+                    isRangeMid: isRangeMid,
+                    isRangeEnd: isRangeEnd,
+                    isRangeSplitEnd: isRangeMid && _this.isEqual(cellDate, lastDate),
+                    isRangeSplitStart: isRangeMid && _this.isEqual(cellDate, firstDate),
+                    isToday: _this.isEqual(cellDate, today),
+                    title: _this.cellTitle(cellDate),
+                    value: cellDate
+                };
+            });
+        });
+    };
+    CenturyViewService.prototype.isSelectedFromArray = function (candidate, dates, min, max) {
+        var _this = this;
+        var result = false;
+        dates.forEach(function (date) {
+            if (isInRange(candidate, min, max) && _this.isEqual(candidate, date)) {
+                result = true;
+            }
+        });
+        return result;
+    };
+    CenturyViewService.prototype.isEqual = function (candidate, expected) {
+        if (!candidate || !expected) {
+            return false;
+        }
+        // TODO: double-check this!
+        return firstYearOfDecade(candidate).getFullYear() === firstYearOfDecade(expected).getFullYear();
+    };
+    CenturyViewService.prototype.isInArray = function (date, dates) {
+        if (!dates.length) {
+            return false;
+        }
+        var year = date.getFullYear();
+        return dates[0].getFullYear() <= year && year <= (dates[dates.length - 1].getFullYear() + 99);
+    };
+    CenturyViewService.prototype.isInRange = function (candidate, min, max) {
+        var year = firstYearOfDecade(candidate).getFullYear();
+        var aboveMin = !min || firstYearOfDecade(min).getFullYear() <= year;
+        var belowMax = !max || year <= firstYearOfDecade(max).getFullYear();
+        return aboveMin && belowMax;
+    };
+    CenturyViewService.prototype.isInSameView = function (candidate, value) {
+        return durationInCenturies(candidate, value) === 0;
+    };
+    CenturyViewService.prototype.isRangeStart = function (value) {
+        return value.getFullYear() % 1000 === 0;
+    };
+    CenturyViewService.prototype.move = function (value, action) {
+        var modifier = ACTIONS[action];
+        if (!modifier) {
+            return value;
+        }
+        return modifier(value);
+    };
+    CenturyViewService.prototype.cellTitle = function (value) {
+        return firstYearOfDecade(value).getFullYear().toString();
+    };
+    CenturyViewService.prototype.navigationTitle = function (value) {
+        return value ? firstDecadeOfCentury(value).getFullYear().toString() : '';
+    };
+    CenturyViewService.prototype.title = function (value) {
+        if (!value) {
+            return '';
+        }
+        return "".concat(firstDecadeOfCentury(value).getFullYear(), " - ").concat(lastDecadeOfCentury(value).getFullYear());
+    };
+    CenturyViewService.prototype.rowLength = function (_) {
+        return CELLS_LENGTH;
+    };
+    CenturyViewService.prototype.skip = function (value, min) {
+        return durationInCenturies(min, value);
+    };
+    CenturyViewService.prototype.total = function (min, max) {
+        return durationInCenturies(min, max) + 1;
+    };
+    CenturyViewService.prototype.value = function (current) {
+        return current ? firstYearOfDecade(current).getFullYear().toString() : '';
+    };
+    CenturyViewService.prototype.viewDate = function (date, max, border) {
+        if (border === void 0) { border = 1; }
+        var renderTwoViews = durationInCenturies(date, max) < border;
+        return renderTwoViews ? addCenturies(date, -1) : date;
+    };
+    CenturyViewService.prototype.normalize = function (cellDate, min, max) {
+        if (cellDate < min && this.isEqual(cellDate, min)) {
+            return cloneDate(min);
+        }
+        if (cellDate > max && this.isEqual(cellDate, max)) {
+            return cloneDate(max);
+        }
+        return cellDate;
+    };
+    return CenturyViewService;
+}());
+export { CenturyViewService };

package/dist/esm/calendar/services/DOMService.d.ts

@@ -0,0 +1,29 @@
+import { CalendarViewEnum } from '../models/CalendarViewEnum';
+/**
+ * @hidden
+ */
+export declare class DOMService {
+    calendarHeight: number;
+    headerHeight: number;
+    monthViewHeight: number;
+    yearViewHeight: number;
+    decadeViewHeight: number;
+    centuryViewHeight: number;
+    navigationItemHeight: number;
+    scrollableContentHeight: number;
+    scrollableYearContentHeight: number;
+    calendarWidth: number;
+    monthViewWidth: number;
+    yearViewWidth: number;
+    decadeViewWidth: number;
+    centuryViewWidth: number;
+    scrollableContentWidth: number;
+    didCalculate: boolean;
+    private hostContainer;
+    ensureHeights(): void;
+    calculateHeights(container?: Element): void;
+    viewHeight(viewType: CalendarViewEnum): number;
+    viewWidth(viewType: CalendarViewEnum): number;
+    private viewDimension;
+    private batch;
+}

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

@@ -0,0 +1,166 @@
+import { CalendarViewEnum } from '../models/CalendarViewEnum.js';
+import { domContainerFactory as containerFactory } from '../../utils.js';
+import { canUseDOM } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var DOMService = /** @class */ (function () {
+    function DOMService() {
+        this.didCalculate = false;
+    }
+    DOMService.prototype.ensureHeights = function () {
+        if (this.calendarHeight !== undefined) {
+            return;
+        }
+        this.calculateHeights();
+    };
+    DOMService.prototype.calculateHeights = function (container) {
+        var _this = this;
+        if (!canUseDOM) {
+            return;
+        }
+        var div = containerFactory('div');
+        var ul = containerFactory('ul');
+        var li = containerFactory('li');
+        var td = containerFactory('td');
+        var th = containerFactory('th');
+        var tr = containerFactory('tr');
+        var tbody = containerFactory('tbody');
+        var thead = containerFactory('thead');
+        var table = containerFactory('table');
+        var monthHeader = function () { return (div("\n            <span class=\"k-calendar-title\">March 2017</span>\n            <span class=\"k-calendar-today\">TODAY</span>\n        ", 'k-calendar-header')); };
+        var monthWeekHeader = function () { return (table([
+            thead([
+                tr([th('MO')])
+            ])
+        ], 'k-calendar-weekdays')); };
+        var repeat = function (count, mapper) { return new Array(count).fill('1').map(mapper); };
+        var content = function (rows, cells) {
+            if (cells === void 0) { cells = 1; }
+            return (table([
+                tbody([tr([th('1')])].concat(repeat(rows, function () { return tr(repeat(cells, function (c) { return td("<span class=\"k-link\">".concat(c, "</span>")); })); })))
+            ]));
+        };
+        var scrollable = function (children) { return div(children, 'k-content k-scrollable'); };
+        var view = function (contentElement, className, renderWeekHeader) { return (div(renderWeekHeader
+            ? [
+                monthHeader(),
+                monthWeekHeader(),
+                scrollable([contentElement, contentElement])
+            ]
+            : [
+                monthHeader(),
+                scrollable([contentElement, contentElement])
+            ], className, { left: '-10000px', position: 'absolute' })); };
+        var navigationList = (function () {
+            var navElement;
+            return function () {
+                if (!canUseDOM) {
+                    return null;
+                }
+                if (!navElement) {
+                    navElement = div([scrollable([ul([li('<span>FEB</span>')])])], 'k-calendar-navigation', { left: '0px', position: 'absolute' });
+                }
+                return navElement;
+            };
+        })();
+        var viewFactory = function (_a, className, renderWeekHeader) {
+            var cells = _a.cells, rows = _a.rows;
+            var viewElement;
+            return function () {
+                if (!canUseDOM) {
+                    return null;
+                }
+                if (!viewElement) {
+                    viewElement = view(content(rows, cells), className, renderWeekHeader);
+                }
+                return viewElement;
+            };
+        };
+        var getScrollable = function (element) { return element.querySelector('.k-scrollable'); };
+        var horizontal = function (element) {
+            var scrollableElement = getScrollable(element);
+            scrollableElement.className = "".concat(scrollableElement.className, " k-scrollable-horizontal");
+            return element;
+        };
+        var monthView = viewFactory({ cells: 7, rows: 6 }, 'k-calendar-view k-calendar-monthview', true);
+        var yearView = viewFactory({ cells: 5, rows: 3 }, 'k-calendar-view k-calendar-yearview', false);
+        var decadeView = viewFactory({ cells: 5, rows: 2 }, 'k-calendar-view k-calendar-decadeview', false);
+        var horzMonthView = function () { return horizontal(monthView()); };
+        var horzYearView = function () { return horizontal(yearView()); };
+        var horzDecadeView = function () { return horizontal(decadeView()); };
+        var height = function (element) { return (parseFloat(window.getComputedStyle(element).height) || element.offsetHeight); };
+        var width = function (element) {
+            var styles = window.getComputedStyle(element);
+            var computed = parseFloat(styles.width)
+                + parseFloat(styles.paddingLeft)
+                + parseFloat(styles.paddingRight);
+            return computed || element.offsetWidth;
+        };
+        var getBody = function (element) { return element.querySelector('tbody'); };
+        this.didCalculate = true;
+        if (container) {
+            this.hostContainer = container;
+        }
+        this.batch(monthView(), function (contentElement) {
+            var viewElement = getBody(contentElement);
+            _this.calendarHeight = height(contentElement);
+            _this.monthViewHeight = height(viewElement);
+            _this.headerHeight = height(viewElement.children[0]);
+            _this.scrollableContentHeight = height(getScrollable(contentElement));
+        });
+        this.batch(horzMonthView(), function (contentElement) {
+            var viewElement = getBody(contentElement);
+            _this.calendarWidth = width(contentElement);
+            _this.monthViewWidth = width(viewElement);
+            _this.scrollableContentWidth = width(getScrollable(contentElement));
+        });
+        this.batch(yearView(), function (contentElement) {
+            _this.yearViewHeight = height(getBody(contentElement));
+            _this.scrollableYearContentHeight = height(getScrollable(contentElement));
+        });
+        this.batch(horzYearView(), function (contentElement) {
+            _this.yearViewWidth = width(getBody(contentElement));
+        });
+        this.batch(decadeView(), function (contentElement) {
+            _this.decadeViewHeight = height(getBody(contentElement));
+            _this.centuryViewHeight = _this.decadeViewHeight;
+        });
+        this.batch(horzDecadeView(), function (contentElement) {
+            _this.decadeViewWidth = width(getBody(contentElement));
+            _this.centuryViewWidth = _this.decadeViewWidth;
+        });
+        this.batch(navigationList(), function (contentElement) {
+            _this.navigationItemHeight = height(contentElement.querySelector('li'));
+        });
+    };
+    DOMService.prototype.viewHeight = function (viewType) {
+        return this.viewDimension(viewType, 'height');
+    };
+    DOMService.prototype.viewWidth = function (viewType) {
+        return this.viewDimension(viewType, 'width');
+    };
+    DOMService.prototype.viewDimension = function (viewType, dimension) {
+        var viewProp = dimension === 'height' ? 'ViewHeight' : 'ViewWidth';
+        switch (viewType) {
+            case CalendarViewEnum.month:
+                return this["month".concat(viewProp)];
+            case CalendarViewEnum.year:
+                return this["year".concat(viewProp)];
+            case CalendarViewEnum.decade:
+                return this["decade".concat(viewProp)];
+            case CalendarViewEnum.century:
+                return this["century".concat(viewProp)];
+            default:
+                return 1;
+        }
+    };
+    DOMService.prototype.batch = function (contentElement, action) {
+        var hostContainer = this.hostContainer || document.body;
+        var appendedContent = hostContainer.appendChild(contentElement);
+        action(appendedContent);
+        hostContainer.removeChild(appendedContent);
+    };
+    return DOMService;
+}());
+export { DOMService };

package/dist/esm/calendar/services/DecadeViewService.d.ts

@@ -0,0 +1,27 @@
+import { Action } from '../models/NavigationAction';
+import { CellContext } from '../models/CellContext';
+import { ViewService } from '../models/ViewService';
+/**
+ * @hidden
+ */
+export declare class DecadeViewService implements ViewService {
+    addToDate(min: Date, skip: number): Date;
+    datesList(start: Date, count: number): Date[];
+    data(options: any): CellContext[][];
+    isSelectedFromArray(candidate: Date, dates: Date[], min: Date, max: Date): boolean;
+    isEqual(candidate: Date | null, expected: Date | null): boolean;
+    isInArray(date: Date, dates: Date[]): boolean;
+    isInRange(candidate: Date, min: Date | null, max: Date | null): boolean;
+    isRangeStart(value: Date): boolean;
+    isInSameView(candidate: Date, value: Date): boolean;
+    move(value: Date, action: Action): Date;
+    cellTitle(value: Date): string;
+    navigationTitle(value?: Date): string;
+    title(value?: Date): string;
+    rowLength(_?: boolean): number;
+    skip(value: Date, min: Date): number;
+    total(min: Date, max: Date): number;
+    value(current: Date): string;
+    viewDate(date: Date, max: Date, border?: number): Date;
+    private normalize;
+}