@singularsystems/neo-core 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/Components/DatePicker/DatePicker.js

@@ -1,487 +1,502 @@
-import DateUtils from '../../Dates/DateUtils';
-import AnimationHelper from '../AnimationHelper';
-import { YearsInYearView, ProcessedDatePickerOptions } from './DatePickerOptions';
-import PositionHelper from '../PositionHelper';
-import { Utils } from '../../Utils';
-// TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
-// TODO: Allow input to be shown with inline picker, and specify position.
-var ViewType;
-(function (ViewType) {
-    ViewType[ViewType["Days"] = 1] = "Days";
-    ViewType[ViewType["Months"] = 2] = "Months";
-    ViewType[ViewType["Years"] = 3] = "Years";
-})(ViewType || (ViewType = {}));
-var DatePicker = /** @class */ (function () {
-    function DatePicker(container, options) {
-        this.container = container;
-        this.isReadOnly = false;
-        this.inputHasChanged = false;
-        this.canAutoSetDate = false;
-        this.suspendLayout = false;
-        this.currentBindValue = null;
-        this.boundDateNoTime = null;
-        this.options = ProcessedDatePickerOptions.fromPartial(options || {});
-        this.inputFocused = this.inputFocused.bind(this);
-        this.inputBlurred = this.inputBlurred.bind(this);
-        this.inputChanged = this.inputChanged.bind(this);
-        this.inputKeyDown = this.inputKeyDown.bind(this);
-        if (!this.options.alwaysShow) {
-            this.input = this.container.getElementsByTagName('input')[0];
-            this.input.addEventListener("focus", this.inputFocused);
-            this.input.addEventListener("mousedown", this.inputFocused);
-            this.input.addEventListener("blur", this.inputBlurred);
-            this.input.addEventListener("input", this.inputChanged);
-            this.input.addEventListener("keydown", this.inputKeyDown);
-            if (this.options.timeOnly) {
-                this.input.placeholder = "hh:mm" + (this.options.formatString.indexOf("s") > 0 ? ":ss" : "");
-            }
-        }
-    }
-    DatePicker.prototype.inputFocused = function (e) {
-        if (!this.popup && !this.isReadOnly) {
-            this.show();
-        }
-        if (window.innerWidth <= 576 && !this.options.timeOnly) {
-            // Stop keyboard showing on phones.
-            this.input.readOnly = true;
-        }
-    };
-    DatePicker.prototype.inputBlurred = function () {
-        if (this.inputHasChanged) {
-            if (this.input.value) {
-                // if this is time only, use the existing value to preserve the date.
-                var refDate = this.options.timeOnly && this.bindProperty.value;
-                var parsedDate = DateUtils.tryParse(this.input.value, this.options.formatString, false, refDate || new Date());
-                if (parsedDate) {
-                    this.setBindValueAndClose(parsedDate, false);
-                }
-                else {
-                    this.setBindValueAndClose(this.bindProperty.value, false);
-                }
-            }
-            else {
-                this.setBindValueAndClose(null, true);
-            }
-        }
-        else {
-            if (this.options.autoClose)
-                this.removePopup(true);
-        }
-        this.input.readOnly = this.isReadOnly;
-    };
-    DatePicker.prototype.inputChanged = function () {
-        this.inputHasChanged = true;
-        if (!this.options.timeOnly) {
-            // Update the displayed date as the user types.
-            var parsedDate = DateUtils.tryParse(this.input.value, this.options.formatString, false, this.bindProperty.value);
-            if (parsedDate) {
-                this.setCurrentViewDate(parsedDate);
-                this.populateContentContainer(true);
-            }
-        }
-    };
-    DatePicker.prototype.inputKeyDown = function (e) {
-        // TODO: find better way to check key. Maybe util class with KeyHelper.IsXXXKey(e)
-        if (e.key === "Escape") {
-            // Revert to previous value
-            e.preventDefault();
-            this.setBindValueAndClose(this.bindProperty.value, false);
-        }
-        else if (e.key === "Enter") {
-            // Set date to today if the current value is null
-            e.preventDefault();
-            if (!this.bindProperty.value) {
-                this.setBindValueAndClose(new Date(), true);
-            }
-        }
-    };
-    DatePicker.prototype.removePopup = function (animate) {
-        if (this.popup) {
-            if (animate) {
-                AnimationHelper.scale(this.popup, DatePicker.AnimationClassName, 1, 0);
-                AnimationHelper.beginRemove(this.container, this.popup);
-            }
-            else {
-                this.container.removeChild(this.popup);
-            }
-            this.currentHeaderLabel = null;
-            this.currentContentTable = null;
-            this.popup = null;
-        }
-    };
-    DatePicker.prototype.setBindValueAndClose = function (dateValue, preserveTime) {
-        this.inputHasChanged = false;
-        var oldValue = this.bindProperty.value;
-        if (oldValue && dateValue && preserveTime) {
-            // preserve the time component of the original date.
-            dateValue.setHours(oldValue.getHours(), oldValue.getMinutes(), oldValue.getSeconds(), oldValue.getMilliseconds());
-        }
-        // Note: this may have the side effect of calling update().
-        this.setBindProperty(dateValue, false);
-        this.setInputValue();
-        if (!this.options.alwaysShow) {
-            this.removePopup(true);
-        }
-    };
-    DatePicker.prototype.setBindProperty = function (dateValue, suspend) {
-        var _this = this;
-        if (dateValue) {
-            dateValue = DateUtils.max(DateUtils.min(dateValue, this.options.maxDate), this.options.minDate);
-        }
-        if (suspend)
-            this.suspendLayout = true;
-        this.bindProperty.value = dateValue;
-        if (suspend)
-            Utils.nextTick(function () { return _this.suspendLayout = false; });
-    };
-    DatePicker.prototype.setInputValue = function () {
-        if (!this.options.alwaysShow) {
-            var displayValue = "";
-            if (this.bindProperty.value) {
-                displayValue = DateUtils.format(this.bindProperty.value, this.options.formatString);
-            }
-            this.input.value = displayValue;
-        }
-    };
-    DatePicker.prototype.show = function () {
-        if (!this.options.timeOnly) {
-            this.resetCurrentViewDate();
-            this.createComponents();
-            this.positionPopup(true);
-            AnimationHelper.fade(this.popup, DatePicker.AnimationClassName, true);
-        }
-    };
-    DatePicker.prototype.positionPopup = function (fromBottom) {
-        if (this.popup) {
-            PositionHelper.checkScreenBounds(this.container, this.popup, fromBottom);
-        }
-    };
-    /**
-     * Updates the date picker options. This also updates the input value of the input element. Update should be called by the Vue / React component on each render.
-     * @param options New options.
-     */
-    DatePicker.prototype.update = function (options, bindProperty, isReadOnly) {
-        if (bindProperty && bindProperty !== this.bindProperty) {
-            this.bindProperty = bindProperty;
-        }
-        if (options) {
-            this.options = ProcessedDatePickerOptions.fromPartial(options);
-        }
-        this.isReadOnly = isReadOnly;
-        this.today = DateUtils.today();
-        if (this.currentBindValue !== (bindProperty === null || bindProperty === void 0 ? void 0 : bindProperty.value)) {
-            this.currentBindValue = bindProperty === null || bindProperty === void 0 ? void 0 : bindProperty.value;
-            this.resetCurrentViewDate();
-            if (this.options.alwaysShow) {
-                if (!this.suspendLayout) {
-                    this.createComponents();
-                }
-            }
-            else {
-                this.setInputValue();
-            }
-        }
-    };
-    DatePicker.prototype.resetCurrentViewDate = function () {
-        this.setCurrentViewDate(this.bindProperty.value);
-        this.currentViewType = this.options.monthView ? ViewType.Months : (this.options.yearView ? ViewType.Years : ViewType.Days);
-    };
-    DatePicker.prototype.setCurrentViewDate = function (fromDate) {
-        if (fromDate) {
-            this.boundDateNoTime = DateUtils.stripTime(fromDate);
-            if (this.inputHasChanged) {
-                // if the user is typing, show the selected date within the range of min and max date.
-                this.boundDateNoTime = DateUtils.max(DateUtils.min(this.boundDateNoTime, this.options.maxDateNoTime), this.options.minDateNoTime);
-            }
-            this.currentViewDate = new Date(this.boundDateNoTime);
-        }
-        else {
-            this.boundDateNoTime = null;
-            this.currentViewDate = DateUtils.today();
-            this.currentViewDate = DateUtils.max(DateUtils.min(this.currentViewDate, this.options.maxDateNoTime), this.options.minDateNoTime);
-        }
-        this.currentViewDate.setDate(1);
-        if (this.options.yearView) {
-            this.currentViewDate.setMonth(0);
-        }
-    };
-    DatePicker.prototype.createComponents = function () {
-        var _this = this;
-        if (!this.popup) {
-            this.popup = this.createAndAppend(this.container, "div", "neo-datepicker-popup");
-            if (this.options.alwaysShow) {
-                this.popup.classList.add("neo-datepicker-inline");
-            }
-            else {
-                this.popup.addEventListener("mouseenter", function () { return _this.positionPopup(false); });
-                this.popup.addEventListener("mouseleave", function () { return _this.positionPopup(true); });
-            }
-            this.createHeader();
-            this.createContentContainer();
-        }
-        else {
-            this.populateContentContainer(true);
-        }
-    };
-    DatePicker.prototype.createHeader = function () {
-        var header = this.createAndAppend(this.popup, "div", "neo-datepicker-header");
-        this.prevButton = this.createAndAppend(header, "button", "left-button");
-        this.prevButton.type = "button";
-        this.prevButton.innerText = "<";
-        this.prevButton.tabIndex = -1;
-        this.prevButton.addEventListener("mousedown", this.previousClick.bind(this));
-        this.headerContainer = this.createAndAppend(header, "div", "header-text-container");
-        this.headerContainer.addEventListener("mousedown", this.headerClick.bind(this));
-        this.headerAnimationHelper = new AnimationHelper(this.headerContainer, DatePicker.AnimationClassName);
-        this.nextButton = this.createAndAppend(header, "button", "right-button");
-        this.nextButton.type = "button";
-        this.nextButton.innerText = ">";
-        this.nextButton.tabIndex = -1;
-        this.nextButton.addEventListener("mousedown", this.nextClick.bind(this));
-    };
-    DatePicker.prototype.createHeaderLabel = function () {
-        this.currentHeaderLabel = this.createAndAppend(this.headerContainer, "div", "header-text");
-        if (this.currentViewType == ViewType.Days) {
-            this.currentHeaderLabel.innerText = DateUtils.format(this.currentViewDate, "MMMM yyyy");
-        }
-        else if (this.currentViewType == ViewType.Months) {
-            this.currentHeaderLabel.innerText = DateUtils.format(this.currentViewDate, "yyyy");
-        }
-        else {
-            this.currentHeaderLabel.innerText = this.currentViewDate.getFullYear() + " - " + (this.currentViewDate.getFullYear() + YearsInYearView - 1);
-        }
-        if (this.currentViewType < ViewType.Years && !(this.prevButton.disabled && this.nextButton.disabled)) {
-            this.currentHeaderLabel.className += " selectable";
-        }
-        this.headerAnimationHelper.addChild(this.currentHeaderLabel, false);
-        this.headerAnimationHelper.fade();
-    };
-    DatePicker.prototype.createContentContainer = function () {
-        this.contentContainer = this.createAndAppend(this.popup, "div", "neo-datepicker-content");
-        this.contentContainer.addEventListener("mousedown", this.contentClick.bind(this));
-        this.contentAnimationHelper = new AnimationHelper(this.contentContainer, DatePicker.AnimationClassName);
-        this.populateContentContainer(!!this.options.alwaysShow);
-    };
-    /**
-     * Populates a new d/m/y view and replaces the old view
-     * @param displayImmediately True if the new content must be displayed without animation.
-     * @param sameViewType True if the view type is not changing. E.g. scrolling left and right.
-     */
-    DatePicker.prototype.populateContentContainer = function (displayImmediately, sameViewType) {
-        if (this.currentViewType == ViewType.Days) {
-            this.createDaysView();
-        }
-        else if (this.currentViewType == ViewType.Months) {
-            this.createMonthsView();
-        }
-        else {
-            if (!sameViewType)
-                this.currentViewDate.setFullYear(this.currentViewDate.getFullYear() - this.options.yearsBeforeInYearView);
-            this.createYearsView();
-        }
-        this.createHeaderLabel();
-        this.contentAnimationHelper.addChild(this.currentContentTable, true);
-        if (displayImmediately) {
-            this.contentAnimationHelper.replace();
-        }
-    };
-    DatePicker.prototype.createDaysView = function () {
-        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "day-view");
-        var tHead = this.createAndAppend(this.currentContentTable, "thead");
-        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
-        var trHead = this.createAndAppend(tHead, "tr");
-        var trBody = this.createAndAppend(tBody, "tr");
-        var currentDate = new Date(this.currentViewDate);
-        var lastDayOfMonth = DateUtils.monthEnd(currentDate);
-        this.prevButton.disabled = this.options.minDateNoTime.getTime() >= currentDate.getTime();
-        if (this.canAutoSetDate && this.options.autoChangeDate == "start") {
-            this.setBindProperty(currentDate, true);
-        }
-        this.nextButton.disabled = this.options.maxDateNoTime.getTime() <= lastDayOfMonth.getTime();
-        if (this.canAutoSetDate && this.options.autoChangeDate == "end") {
-            this.setBindProperty(lastDayOfMonth, true);
-        }
-        // Start with the first Sunday before the first of the month.
-        currentDate.setDate(currentDate.getDate() - currentDate.getDay());
-        var first = true;
-        while (true) {
-            for (var i = 0; i < 7; i++) {
-                if (first) {
-                    var dayHeader = DateUtils.i18n.dayNames[currentDate.getDay()];
-                    if (!this.options.display3DayLetters)
-                        dayHeader = dayHeader.substring(0, 2);
-                    this.createAndAppend(trHead, "th").innerText = dayHeader;
-                }
-                var cell = this.createAndAppend(trBody, "td");
-                var date = currentDate.getDate();
-                var month = currentDate.getMonth();
-                cell.innerText = date.toString();
-                this.setupCell(cell, currentDate.getFullYear() + "," + month + "," + date, currentDate.getTime() >= this.options.minDateNoTime.getTime() && currentDate.getTime() <= this.options.maxDateNoTime.getTime(), currentDate.getTime() == this.today.getTime(), this.boundDateNoTime != null && currentDate.getTime() == this.boundDateNoTime.getTime());
-                if (month != this.currentViewDate.getMonth()) {
-                    cell.classList.add("outside-month");
-                }
-                currentDate.setDate(date + 1);
-            }
-            trBody = this.createAndAppend(tBody, "tr");
-            first = false;
-            if (currentDate.getMonth() != this.currentViewDate.getMonth())
-                break;
-        }
-        this.canAutoSetDate = false;
-    };
-    DatePicker.prototype.createMonthsView = function () {
-        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "month-view");
-        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
-        var trBody;
-        var year = this.currentViewDate.getFullYear();
-        for (var i = 0; i < 12; i++) {
-            var monthStartDate = new Date(year, i, 1).getTime();
-            var monthEndDate = new Date(year, i + 1, 1).getTime();
-            if (i % 4 == 0) {
-                trBody = this.createAndAppend(tBody, "tr");
-            }
-            var cell = this.createAndAppend(trBody, "td");
-            cell.innerText = DateUtils.i18n.monthNames[i];
-            this.setupCell(cell, i, monthEndDate > this.options.minDateNoTime.getTime() && monthStartDate <= this.options.maxDateNoTime.getTime(), this.today.getFullYear() == year && this.today.getMonth() == i, this.boundDateNoTime != null && this.boundDateNoTime.getFullYear() == year && this.boundDateNoTime.getMonth() == i);
-        }
-        this.prevButton.disabled = this.options.minDateNoTime.getFullYear() >= year;
-        this.nextButton.disabled = this.options.maxDateNoTime.getFullYear() <= year;
-    };
-    DatePicker.prototype.createYearsView = function () {
-        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "year-view");
-        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
-        var trBody;
-        var year = this.currentViewDate.getFullYear();
-        for (var i = 0; i < YearsInYearView; i++) {
-            if (i % 4 == 0) {
-                trBody = this.createAndAppend(tBody, "tr");
-            }
-            var cell = this.createAndAppend(trBody, "td");
-            cell.innerText = (year + i).toString();
-            this.setupCell(cell, cell.innerText, year + i >= this.options.minDateNoTime.getFullYear() && year + i <= this.options.maxDateNoTime.getFullYear(), this.today.getFullYear() == year + i, this.boundDateNoTime != null && this.boundDateNoTime.getFullYear() == year + i);
-        }
-        this.prevButton.disabled = this.options.minDateNoTime.getFullYear() >= year;
-        this.nextButton.disabled = this.options.maxDateNoTime.getFullYear() < year + YearsInYearView;
-    };
-    DatePicker.prototype.setupCell = function (cell, data, selectable, current, isSelected) {
-        if (selectable) {
-            cell.classList.add("selectable");
-            cell.dataset["date"] = data;
-        }
-        else {
-            cell.classList.add("disabled");
-        }
-        if (current) {
-            cell.classList.add("today");
-        }
-        if (isSelected) {
-            cell.classList.add("selected");
-        }
-    };
-    DatePicker.prototype.contentClick = function (e) {
-        e.preventDefault();
-        if (e.target) {
-            if (this.currentViewType == ViewType.Days) {
-                this.dayClicked(e.target);
-            }
-            else if (this.currentViewType == ViewType.Months) {
-                this.monthClicked(e.target);
-            }
-            else {
-                this.yearClicked(e.target);
-            }
-        }
-    };
-    DatePicker.prototype.dayClicked = function (element) {
-        var datePartsString = element.dataset["date"];
-        if (datePartsString) {
-            var dateParts = datePartsString.split(",");
-            this.setBindValueAndClose(new Date(parseInt(dateParts[0]), parseInt(dateParts[1]), parseInt(dateParts[2])), true);
-        }
-    };
-    DatePicker.prototype.monthClicked = function (element) {
-        var monthString = element.dataset["date"];
-        if (monthString) {
-            this.currentViewDate.setMonth(parseInt(monthString));
-            if (this.options.monthView) {
-                this.setBindValueAndClose(this.currentViewDate, true);
-            }
-            else {
-                this.currentViewType = ViewType.Days;
-                this.canAutoSetDate = true;
-                this.populateContentContainer(false);
-                this.contentAnimationHelper.fadeAndScale(true);
-            }
-        }
-    };
-    DatePicker.prototype.yearClicked = function (element) {
-        var yearString = element.dataset["date"];
-        if (yearString) {
-            this.currentViewDate.setFullYear(parseInt(yearString));
-            if (this.options.yearView) {
-                this.setBindValueAndClose(this.currentViewDate, true);
-            }
-            else {
-                this.currentViewType = ViewType.Months;
-                this.populateContentContainer(false);
-                this.contentAnimationHelper.fadeAndScale(true);
-            }
-        }
-    };
-    DatePicker.prototype.headerClick = function (e) {
-        e.preventDefault();
-        if (this.currentHeaderLabel.classList.contains("selectable")) {
-            if (this.currentViewType == ViewType.Days) {
-                this.currentViewType = ViewType.Months;
-            }
-            else if (this.currentViewType == ViewType.Months) {
-                this.currentViewType = ViewType.Years;
-            }
-            else {
-                return;
-            }
-            this.populateContentContainer(false);
-            this.contentAnimationHelper.fadeAndScale(false);
-        }
-    };
-    DatePicker.prototype.previousClick = function (e) {
-        e.preventDefault();
-        this.moveCurrent(-1);
-    };
-    DatePicker.prototype.nextClick = function (e) {
-        e.preventDefault();
-        this.moveCurrent(1);
-    };
-    DatePicker.prototype.moveCurrent = function (delta) {
-        if (this.currentViewType == ViewType.Days) {
-            this.canAutoSetDate = true;
-            this.currentViewDate.setMonth(this.currentViewDate.getMonth() + delta, 1);
-        }
-        else {
-            this.currentViewDate.setFullYear(this.currentViewDate.getFullYear() + delta * (this.currentViewType == ViewType.Months ? 1 : YearsInYearView));
-        }
-        this.populateContentContainer(false, true);
-        this.contentAnimationHelper.slide(delta, true);
-    };
-    DatePicker.prototype.createAndAppend = function (parent, elementType, className) {
-        if (className === void 0) { className = ""; }
-        var newElement = document.createElement(elementType);
-        if (className)
-            newElement.className = className;
-        parent.appendChild(newElement);
-        return newElement;
-    };
-    DatePicker.prototype.destroy = function () {
-        if (this.input) {
-            this.input.removeEventListener("focus", this.inputFocused);
-            this.input.removeEventListener("mousedown", this.inputFocused);
-            this.input.removeEventListener("blur", this.inputBlurred);
-            this.input.removeEventListener("input", this.inputChanged);
-            this.input.removeEventListener("keydown", this.inputKeyDown);
-        }
-        this.removePopup(false);
-    };
-    DatePicker.AnimationClassName = "neo-datepicker-animate";
-    return DatePicker;
-}());
-export default DatePicker;
+import DateUtils from '../../Dates/DateUtils';
+import AnimationHelper from '../AnimationHelper';
+import { YearsInYearView, ProcessedDatePickerOptions } from './DatePickerOptions';
+import PositionHelper from '../PositionHelper';
+import { Utils } from '../../Utils';
+// TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
+// TODO: Allow input to be shown with inline picker, and specify position.
+var ViewType;
+(function (ViewType) {
+    ViewType[ViewType["Days"] = 1] = "Days";
+    ViewType[ViewType["Months"] = 2] = "Months";
+    ViewType[ViewType["Years"] = 3] = "Years";
+})(ViewType || (ViewType = {}));
+var DatePicker = /** @class */ (function () {
+    function DatePicker(container, options) {
+        this.container = container;
+        this.isReadOnly = false;
+        this.inputHasChanged = false;
+        this.canAutoSetDate = false;
+        this.suspendLayout = false;
+        this.currentBindValue = null;
+        this.boundDateNoTime = null;
+        this.options = ProcessedDatePickerOptions.fromPartial(options || {});
+        this.inputFocused = this.inputFocused.bind(this);
+        this.inputBlurred = this.inputBlurred.bind(this);
+        this.inputChanged = this.inputChanged.bind(this);
+        this.inputKeyDown = this.inputKeyDown.bind(this);
+        if (!this.options.alwaysShow) {
+            this.input = this.container.getElementsByTagName('input')[0];
+            this.input.addEventListener("focus", this.inputFocused);
+            this.input.addEventListener("mousedown", this.inputFocused);
+            this.input.addEventListener("blur", this.inputBlurred);
+            this.input.addEventListener("input", this.inputChanged);
+            this.input.addEventListener("keydown", this.inputKeyDown);
+            if (this.options.timeOnly) {
+                this.input.placeholder = "hh:mm" + (this.options.formatString.indexOf("s") > 0 ? ":ss" : "");
+            }
+        }
+    }
+    DatePicker.prototype.inputFocused = function (e) {
+        if (!this.popup && !this.isReadOnly) {
+            this.show();
+        }
+        if (window.innerWidth <= 576 && !this.options.timeOnly) {
+            // Stop keyboard showing on phones.
+            this.input.readOnly = true;
+        }
+    };
+    DatePicker.prototype.inputBlurred = function () {
+        this.onInputBlurred(true);
+    };
+    DatePicker.prototype.onInputBlurred = function (closePopup) {
+        if (this.inputHasChanged) {
+            if (this.input.value) {
+                // if this is time only, use the existing value to preserve the date.
+                var refDate = this.options.timeOnly && this.bindProperty.value;
+                var parsedDate = DateUtils.tryParse(this.input.value, this.options.formatString, false, refDate || new Date());
+                if (parsedDate) {
+                    this.setBindValue(parsedDate, { preserveTime: false, close: closePopup });
+                }
+                else {
+                    this.setBindValue(this.bindProperty.value, { preserveTime: false, close: closePopup });
+                }
+            }
+            else {
+                this.setBindValue(null, { preserveTime: true, close: closePopup });
+            }
+        }
+        else {
+            if (this.options.autoClose && closePopup)
+                this.removePopup(true);
+        }
+        this.input.readOnly = this.isReadOnly;
+    };
+    DatePicker.prototype.inputChanged = function () {
+        this.inputHasChanged = true;
+        if (!this.options.timeOnly) {
+            // Update the displayed date as the user types.
+            var parsedDate = DateUtils.tryParse(this.input.value, this.options.formatString, false, this.bindProperty.value);
+            if (parsedDate) {
+                this.setCurrentViewDate(parsedDate);
+                this.populateContentContainer(true);
+            }
+            if (!this.popup) {
+                this.show();
+            }
+        }
+    };
+    DatePicker.prototype.inputKeyDown = function (e) {
+        // TODO: find better way to check key. Maybe util class with KeyHelper.IsXXXKey(e)
+        if (e.key === "Escape") {
+            // Revert to previous value
+            e.preventDefault();
+            this.setBindValue(this.bindProperty.value, { preserveTime: false, close: false });
+        }
+        else if (e.key === "Enter") {
+            var prevValue = this.input.value;
+            if (!this.bindProperty.value && !this.input.value) {
+                // Set date to today if the current value is null
+                this.setBindValue(new Date(), { preserveTime: true, close: false });
+            }
+            else {
+                this.onInputBlurred(false);
+            }
+            if (this.input.value !== prevValue) {
+                e.preventDefault();
+            }
+            else {
+                this.removePopup(true);
+            }
+        }
+    };
+    DatePicker.prototype.removePopup = function (animate) {
+        if (this.popup) {
+            if (animate) {
+                AnimationHelper.scale(this.popup, DatePicker.AnimationClassName, 1, 0);
+                AnimationHelper.beginRemove(this.container, this.popup);
+            }
+            else {
+                this.container.removeChild(this.popup);
+            }
+            this.currentHeaderLabel = null;
+            this.currentContentTable = null;
+            this.popup = null;
+        }
+    };
+    DatePicker.prototype.setBindValue = function (dateValue, options) {
+        this.inputHasChanged = false;
+        var oldValue = this.bindProperty.value;
+        if (oldValue && dateValue && options.preserveTime) {
+            // preserve the time component of the original date.
+            dateValue.setHours(oldValue.getHours(), oldValue.getMinutes(), oldValue.getSeconds(), oldValue.getMilliseconds());
+        }
+        // Note: this may have the side effect of calling update().
+        this.setBindProperty(dateValue, false);
+        this.setInputValue();
+        if (!this.options.alwaysShow && options.close) {
+            this.removePopup(true);
+        }
+    };
+    DatePicker.prototype.setBindProperty = function (dateValue, suspend) {
+        var _this = this;
+        if (dateValue) {
+            dateValue = DateUtils.max(DateUtils.min(dateValue, this.options.maxDate), this.options.minDate);
+        }
+        if (suspend)
+            this.suspendLayout = true;
+        this.bindProperty.value = dateValue;
+        if (suspend)
+            Utils.nextTick(function () { return _this.suspendLayout = false; });
+        if (this.options.onDateSelected !== undefined) {
+            this.options.onDateSelected(!suspend);
+        }
+    };
+    DatePicker.prototype.setInputValue = function () {
+        if (!this.options.alwaysShow) {
+            var displayValue = "";
+            if (this.bindProperty.value) {
+                displayValue = DateUtils.format(this.bindProperty.value, this.options.formatString);
+            }
+            this.input.value = displayValue;
+        }
+    };
+    DatePicker.prototype.show = function () {
+        if (!this.options.timeOnly) {
+            this.resetCurrentViewDate();
+            this.createComponents();
+            this.positionPopup(true);
+            AnimationHelper.fade(this.popup, DatePicker.AnimationClassName, true);
+        }
+    };
+    DatePicker.prototype.positionPopup = function (fromBottom) {
+        if (this.popup) {
+            PositionHelper.checkScreenBounds(this.container, this.popup, fromBottom, this.options.popupAlignRight);
+        }
+    };
+    /**
+     * Updates the date picker options. This also updates the input value of the input element. Update should be called by the Vue / React component on each render.
+     * @param options New options.
+     */
+    DatePicker.prototype.update = function (options, bindProperty, isReadOnly) {
+        if (bindProperty && bindProperty !== this.bindProperty) {
+            this.bindProperty = bindProperty;
+        }
+        if (options) {
+            this.options = ProcessedDatePickerOptions.fromPartial(options);
+        }
+        this.isReadOnly = isReadOnly;
+        this.today = DateUtils.today();
+        if (this.currentBindValue !== (bindProperty === null || bindProperty === void 0 ? void 0 : bindProperty.value)) {
+            this.currentBindValue = bindProperty === null || bindProperty === void 0 ? void 0 : bindProperty.value;
+            this.resetCurrentViewDate();
+            if (this.options.alwaysShow) {
+                if (!this.suspendLayout) {
+                    this.createComponents();
+                }
+            }
+            else {
+                this.setInputValue();
+            }
+        }
+    };
+    DatePicker.prototype.resetCurrentViewDate = function () {
+        this.setCurrentViewDate(this.bindProperty.value);
+        this.currentViewType = this.options.monthView ? ViewType.Months : (this.options.yearView ? ViewType.Years : ViewType.Days);
+    };
+    DatePicker.prototype.setCurrentViewDate = function (fromDate) {
+        if (fromDate) {
+            this.boundDateNoTime = DateUtils.stripTime(fromDate);
+            if (this.inputHasChanged) {
+                // if the user is typing, show the selected date within the range of min and max date.
+                this.boundDateNoTime = DateUtils.max(DateUtils.min(this.boundDateNoTime, this.options.maxDateNoTime), this.options.minDateNoTime);
+            }
+            this.currentViewDate = new Date(this.boundDateNoTime);
+        }
+        else {
+            this.boundDateNoTime = null;
+            this.currentViewDate = DateUtils.today();
+            this.currentViewDate = DateUtils.max(DateUtils.min(this.currentViewDate, this.options.maxDateNoTime), this.options.minDateNoTime);
+        }
+        this.currentViewDate.setDate(1);
+        if (this.options.yearView) {
+            this.currentViewDate.setMonth(0);
+        }
+    };
+    DatePicker.prototype.createComponents = function () {
+        var _this = this;
+        if (!this.popup) {
+            this.popup = this.createAndAppend(this.container, "div", "neo-datepicker-popup");
+            if (this.options.alwaysShow) {
+                this.popup.classList.add("neo-datepicker-inline");
+            }
+            else {
+                this.popup.addEventListener("mouseenter", function () { return _this.positionPopup(false); });
+                this.popup.addEventListener("mouseleave", function () { return _this.positionPopup(true); });
+            }
+            this.createHeader();
+            this.createContentContainer();
+        }
+        else {
+            this.populateContentContainer(true);
+        }
+    };
+    DatePicker.prototype.createHeader = function () {
+        var header = this.createAndAppend(this.popup, "div", "neo-datepicker-header");
+        this.prevButton = this.createAndAppend(header, "button", "left-button");
+        this.prevButton.type = "button";
+        this.prevButton.innerText = "<";
+        this.prevButton.tabIndex = -1;
+        this.prevButton.addEventListener("mousedown", this.previousClick.bind(this));
+        this.headerContainer = this.createAndAppend(header, "div", "header-text-container");
+        this.headerContainer.addEventListener("mousedown", this.headerClick.bind(this));
+        this.headerAnimationHelper = new AnimationHelper(this.headerContainer, DatePicker.AnimationClassName);
+        this.nextButton = this.createAndAppend(header, "button", "right-button");
+        this.nextButton.type = "button";
+        this.nextButton.innerText = ">";
+        this.nextButton.tabIndex = -1;
+        this.nextButton.addEventListener("mousedown", this.nextClick.bind(this));
+    };
+    DatePicker.prototype.createHeaderLabel = function () {
+        this.currentHeaderLabel = this.createAndAppend(this.headerContainer, "div", "header-text");
+        if (this.currentViewType == ViewType.Days) {
+            this.currentHeaderLabel.innerText = DateUtils.format(this.currentViewDate, "MMMM yyyy");
+        }
+        else if (this.currentViewType == ViewType.Months) {
+            this.currentHeaderLabel.innerText = DateUtils.format(this.currentViewDate, "yyyy");
+        }
+        else {
+            this.currentHeaderLabel.innerText = this.currentViewDate.getFullYear() + " - " + (this.currentViewDate.getFullYear() + YearsInYearView - 1);
+        }
+        if (this.currentViewType < ViewType.Years && !(this.prevButton.disabled && this.nextButton.disabled)) {
+            this.currentHeaderLabel.className += " selectable";
+        }
+        this.headerAnimationHelper.addChild(this.currentHeaderLabel, false);
+        this.headerAnimationHelper.fade();
+    };
+    DatePicker.prototype.createContentContainer = function () {
+        this.contentContainer = this.createAndAppend(this.popup, "div", "neo-datepicker-content");
+        this.contentContainer.addEventListener("mousedown", this.contentClick.bind(this));
+        this.contentAnimationHelper = new AnimationHelper(this.contentContainer, DatePicker.AnimationClassName);
+        this.populateContentContainer(!!this.options.alwaysShow);
+    };
+    /**
+     * Populates a new d/m/y view and replaces the old view
+     * @param displayImmediately True if the new content must be displayed without animation.
+     * @param sameViewType True if the view type is not changing. E.g. scrolling left and right.
+     */
+    DatePicker.prototype.populateContentContainer = function (displayImmediately, sameViewType) {
+        if (this.currentViewType == ViewType.Days) {
+            this.createDaysView();
+        }
+        else if (this.currentViewType == ViewType.Months) {
+            this.createMonthsView();
+        }
+        else {
+            if (!sameViewType)
+                this.currentViewDate.setFullYear(this.currentViewDate.getFullYear() - this.options.yearsBeforeInYearView);
+            this.createYearsView();
+        }
+        this.createHeaderLabel();
+        this.contentAnimationHelper.addChild(this.currentContentTable, true);
+        if (displayImmediately) {
+            this.contentAnimationHelper.replace();
+        }
+    };
+    DatePicker.prototype.createDaysView = function () {
+        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "day-view");
+        var tHead = this.createAndAppend(this.currentContentTable, "thead");
+        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
+        var trHead = this.createAndAppend(tHead, "tr");
+        var trBody = this.createAndAppend(tBody, "tr");
+        var currentDate = new Date(this.currentViewDate);
+        var lastDayOfMonth = DateUtils.monthEnd(currentDate);
+        this.prevButton.disabled = this.options.minDateNoTime.getTime() >= currentDate.getTime();
+        if (this.canAutoSetDate && this.options.autoChangeDate == "start") {
+            this.setBindProperty(currentDate, true);
+        }
+        this.nextButton.disabled = this.options.maxDateNoTime.getTime() <= lastDayOfMonth.getTime();
+        if (this.canAutoSetDate && this.options.autoChangeDate == "end") {
+            this.setBindProperty(lastDayOfMonth, true);
+        }
+        // Start with the first Sunday before the first of the month.
+        currentDate.setDate(currentDate.getDate() - currentDate.getDay());
+        var first = true;
+        while (true) {
+            for (var i = 0; i < 7; i++) {
+                if (first) {
+                    var dayHeader = DateUtils.i18n.dayNames[currentDate.getDay()];
+                    if (!this.options.display3DayLetters)
+                        dayHeader = dayHeader.substring(0, 2);
+                    this.createAndAppend(trHead, "th").innerText = dayHeader;
+                }
+                var cell = this.createAndAppend(trBody, "td");
+                var date = currentDate.getDate();
+                var month = currentDate.getMonth();
+                this.setupCell(cell, date.toString(), currentDate.getFullYear() + "," + month + "," + date, currentDate.getTime() >= this.options.minDateNoTime.getTime() && currentDate.getTime() <= this.options.maxDateNoTime.getTime(), currentDate.getTime() == this.today.getTime(), this.boundDateNoTime != null && currentDate.getTime() == this.boundDateNoTime.getTime());
+                if (month != this.currentViewDate.getMonth()) {
+                    cell.classList.add("outside-month");
+                }
+                currentDate.setDate(date + 1);
+            }
+            trBody = this.createAndAppend(tBody, "tr");
+            first = false;
+            if (currentDate.getMonth() != this.currentViewDate.getMonth())
+                break;
+        }
+        this.canAutoSetDate = false;
+    };
+    DatePicker.prototype.createMonthsView = function () {
+        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "month-view");
+        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
+        var trBody;
+        var year = this.currentViewDate.getFullYear();
+        for (var i = 0; i < 12; i++) {
+            var monthStartDate = new Date(year, i, 1).getTime();
+            var monthEndDate = new Date(year, i + 1, 1).getTime();
+            if (i % 4 == 0) {
+                trBody = this.createAndAppend(tBody, "tr");
+            }
+            var cell = this.createAndAppend(trBody, "td");
+            this.setupCell(cell, DateUtils.i18n.monthNames[i], i, monthEndDate > this.options.minDateNoTime.getTime() && monthStartDate <= this.options.maxDateNoTime.getTime(), this.today.getFullYear() == year && this.today.getMonth() == i, this.boundDateNoTime != null && this.boundDateNoTime.getFullYear() == year && this.boundDateNoTime.getMonth() == i);
+        }
+        this.prevButton.disabled = this.options.minDateNoTime.getFullYear() >= year;
+        this.nextButton.disabled = this.options.maxDateNoTime.getFullYear() <= year;
+    };
+    DatePicker.prototype.createYearsView = function () {
+        this.currentContentTable = this.createAndAppend(this.contentContainer, "table", "year-view");
+        var tBody = this.createAndAppend(this.currentContentTable, "tbody");
+        var trBody;
+        var year = this.currentViewDate.getFullYear();
+        for (var i = 0; i < YearsInYearView; i++) {
+            if (i % 4 == 0) {
+                trBody = this.createAndAppend(tBody, "tr");
+            }
+            var cell = this.createAndAppend(trBody, "td");
+            this.setupCell(cell, (year + i).toString(), (year + i).toString(), year + i >= this.options.minDateNoTime.getFullYear() && year + i <= this.options.maxDateNoTime.getFullYear(), this.today.getFullYear() == year + i, this.boundDateNoTime != null && this.boundDateNoTime.getFullYear() == year + i);
+        }
+        this.prevButton.disabled = this.options.minDateNoTime.getFullYear() >= year;
+        this.nextButton.disabled = this.options.maxDateNoTime.getFullYear() < year + YearsInYearView;
+    };
+    DatePicker.prototype.setupCell = function (cell, innerText, data, selectable, current, isSelected) {
+        if (selectable) {
+            cell.classList.add("selectable");
+            cell.dataset["date"] = data;
+        }
+        else {
+            cell.classList.add("disabled");
+        }
+        if (current) {
+            cell.classList.add("today");
+        }
+        if (isSelected) {
+            cell.classList.add("selected");
+        }
+        var cellContent = this.createAndAppend(cell, "span");
+        cellContent.innerText = innerText;
+    };
+    DatePicker.prototype.contentClick = function (e) {
+        e.preventDefault();
+        if (e.target) {
+            var element = e.target;
+            if (!element.dataset["date"]) {
+                element = element.parentElement;
+            }
+            var dateString = element === null || element === void 0 ? void 0 : element.dataset["date"];
+            if (dateString) {
+                if (this.currentViewType == ViewType.Days) {
+                    this.dayClicked(dateString);
+                }
+                else if (this.currentViewType == ViewType.Months) {
+                    this.monthClicked(dateString);
+                }
+                else {
+                    this.yearClicked(dateString);
+                }
+            }
+        }
+    };
+    DatePicker.prototype.dayClicked = function (datePartsString) {
+        var dateParts = datePartsString.split(",");
+        this.setBindValue(new Date(parseInt(dateParts[0]), parseInt(dateParts[1]), parseInt(dateParts[2])), { preserveTime: true, close: true });
+    };
+    DatePicker.prototype.monthClicked = function (monthString) {
+        this.currentViewDate.setMonth(parseInt(monthString));
+        if (this.options.monthView) {
+            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true });
+        }
+        else {
+            this.currentViewType = ViewType.Days;
+            this.canAutoSetDate = true;
+            this.populateContentContainer(false);
+            this.contentAnimationHelper.fadeAndScale(true);
+        }
+    };
+    DatePicker.prototype.yearClicked = function (yearString) {
+        this.currentViewDate.setFullYear(parseInt(yearString));
+        if (this.options.yearView) {
+            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true });
+        }
+        else {
+            this.currentViewType = ViewType.Months;
+            this.populateContentContainer(false);
+            this.contentAnimationHelper.fadeAndScale(true);
+        }
+    };
+    DatePicker.prototype.headerClick = function (e) {
+        e.preventDefault();
+        if (this.currentHeaderLabel.classList.contains("selectable")) {
+            if (this.currentViewType == ViewType.Days) {
+                this.currentViewType = ViewType.Months;
+            }
+            else if (this.currentViewType == ViewType.Months) {
+                this.currentViewType = ViewType.Years;
+            }
+            else {
+                return;
+            }
+            this.populateContentContainer(false);
+            this.contentAnimationHelper.fadeAndScale(false);
+        }
+    };
+    DatePicker.prototype.previousClick = function (e) {
+        e.preventDefault();
+        this.moveCurrent(-1);
+    };
+    DatePicker.prototype.nextClick = function (e) {
+        e.preventDefault();
+        this.moveCurrent(1);
+    };
+    DatePicker.prototype.moveCurrent = function (delta) {
+        if (this.currentViewType == ViewType.Days) {
+            this.canAutoSetDate = true;
+            this.currentViewDate.setMonth(this.currentViewDate.getMonth() + delta, 1);
+        }
+        else {
+            this.currentViewDate.setFullYear(this.currentViewDate.getFullYear() + delta * (this.currentViewType == ViewType.Months ? 1 : YearsInYearView));
+        }
+        this.populateContentContainer(false, true);
+        this.contentAnimationHelper.slide(delta, true);
+    };
+    DatePicker.prototype.createAndAppend = function (parent, elementType, className) {
+        if (className === void 0) { className = ""; }
+        var newElement = document.createElement(elementType);
+        if (className)
+            newElement.className = className;
+        parent.appendChild(newElement);
+        return newElement;
+    };
+    DatePicker.prototype.destroy = function () {
+        if (this.input) {
+            this.input.removeEventListener("focus", this.inputFocused);
+            this.input.removeEventListener("mousedown", this.inputFocused);
+            this.input.removeEventListener("blur", this.inputBlurred);
+            this.input.removeEventListener("input", this.inputChanged);
+            this.input.removeEventListener("keydown", this.inputKeyDown);
+        }
+        this.removePopup(false);
+    };
+    DatePicker.AnimationClassName = "neo-datepicker-animate";
+    return DatePicker;
+}());
+export default DatePicker;