@luftborn/custom-elements 2.8.4 → 2.8.5

package/demo/index.min.js

@@ -3006,6 +3006,7 @@ var CustomDatepicker = /** @class */ (function () {
     CustomDatepicker.prototype.createDatePickerElements = function () {
         var _this = this;
         this.datepicker = document.createElement('div');
+        this.datepicker.id = this.input.id + '-datepicker';
         this.datepicker.classList.add('datepicker');
         this.header = document.createElement('div');
         this.header.classList.add('header');
@@ -3049,12 +3050,7 @@ var CustomDatepicker = /** @class */ (function () {
         today.value = 'Today';
         today.onclick = function () { return _this.setDateForToday(); };
         actions.appendChild(today);
-        if (this.input.parentElement) {
-            this.input.parentElement.appendChild(this.datepicker);
-        }
-        else {
-            document.body.appendChild(this.datepicker);
-        }
+        document.body.appendChild(this.datepicker);
         this.applyStyles();
     };
     CustomDatepicker.prototype.applyStyles = function () {
@@ -3129,15 +3125,7 @@ var CustomDatepicker = /** @class */ (function () {
                     _this.selectedYear = _this.currentYear;
                     moveMonthSteps = 1;
                 }
-                _this.selectedDate = new Date(_this.selectedYear, _this.selectedMonth, _this.selectedDay);
-                var selectedDayElement = _this.days.querySelector('.selected-day');
-                if (selectedDayElement) {
-                    selectedDayElement.classList.remove('selected-day');
-                }
-                span.classList.add('selected-day');
-                var formattedDate = (0, CustomDatepickerUtils_1.formatDate)(_this.selectedDate, _this.dateFormat, _this.language);
-                _this.input.value = formattedDate;
-                _this.showPicker(false);
+                _this.setSelectedDate(moveMonthSteps, span);
             };
             this_1.days.appendChild(span);
         };
@@ -3147,8 +3135,24 @@ var CustomDatepicker = /** @class */ (function () {
         }
         this.positionPicker();
     };
+    CustomDatepicker.prototype.setSelectedDate = function (moveMonthSteps, span) {
+        if (moveMonthSteps === void 0) { moveMonthSteps = 0; }
+        this.selectedDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDay);
+        var selectedDayElement = this.days.querySelector('.selected-day');
+        if (selectedDayElement) {
+            selectedDayElement.classList.remove('selected-day');
+        }
+        span.classList.add('selected-day');
+        var formattedDate = (0, CustomDatepickerUtils_1.formatDate)(this.selectedDate, this.dateFormat, this.language);
+        this.input.value = formattedDate;
+        this.showPicker(false);
+        if (moveMonthSteps !== 0) {
+            this.moveMonth(moveMonthSteps);
+        }
+    };
     CustomDatepicker.prototype.initSelectMonthYear = function () {
         var _this = this;
+        var tempCurrentYear = this.currentYear;
         this.selectMonthYear.style.display = 'none';
         this.selectMonthYear.style.height = '200px';
         if ((0, CustomDatepickerUtils_1.isMobileDevice)()) {
@@ -3163,8 +3167,8 @@ var CustomDatepicker = /** @class */ (function () {
             span.classList.add('select-month');
             monthsContainer.appendChild(span);
             span.onclick = function () {
-                _this.selectedMonth = _this.months.findIndex(function (month) { return month.substring(0, 3) === span.innerHTML; });
-                var moveMonthSteps = (_this.selectedYear - _this.currentYear) * 12 + _this.selectedMonth - _this.currentMonth;
+                var tempCurrentMonth = _this.months.findIndex(function (month) { return month.substring(0, 3) === span.innerHTML; });
+                var moveMonthSteps = (tempCurrentYear - _this.currentYear) * 12 + tempCurrentMonth - _this.currentMonth;
                 _this.moveMonth(moveMonthSteps);
                 _this.hideSelectMonthYear();
             };
@@ -3183,16 +3187,14 @@ var CustomDatepicker = /** @class */ (function () {
             }
         }
         var years = this.selectMonthYear.querySelectorAll('.year');
-        var tempSelectedYear = this.selectedYear;
         var _loop_3 = function (i) {
             years[i].addEventListener('click', function () {
                 var year = parseInt(years[i].innerHTML);
-                if (year === tempSelectedYear) {
+                if (year === tempCurrentYear) {
                     return;
                 }
                 else {
-                    tempSelectedYear = year;
-                    _this.selectedYear = year;
+                    tempCurrentYear = year;
                     var monthsContainers = _this.selectMonthYear.querySelectorAll('.months');
                     for (var i_1 = 0; i_1 < monthsContainers.length; i_1++) {
                         monthsContainers[i_1].remove();
@@ -3230,15 +3232,36 @@ var CustomDatepicker = /** @class */ (function () {
     CustomDatepicker.prototype.showPicker = function (showpicker) {
         if (showpicker === void 0) { showpicker = true; }
         if (showpicker) {
+            this.closeOtherDatepickers();
+            localStorage.setItem('shownDatepicker', this.datepicker.id);
+            localStorage.setItem('focusedInput', this.input.id);
             this.positionPicker();
             this.datepicker.style.display = 'block';
+            this.navigateToSelectedMonth();
         }
         else {
             this.datepicker.style.display = 'none';
+            this.closeOtherDatepickers();
             this.hideSelectMonthYear();
+            this.input.placeholder = this.dateFormat;
             return;
         }
     };
+    CustomDatepicker.prototype.closeOtherDatepickers = function () {
+        var shownDatepickerId = localStorage.getItem('shownDatepicker');
+        if (shownDatepickerId) {
+            var shownDatepicker = document.getElementById(shownDatepickerId);
+            if (shownDatepicker) {
+                shownDatepicker.style.display = 'none';
+            }
+        }
+        localStorage.removeItem('shownDatepicker');
+        localStorage.removeItem('focusedInput');
+    };
+    CustomDatepicker.prototype.navigateToSelectedMonth = function () {
+        var moveMonthSteps = (this.selectedYear - this.currentYear) * 12 + this.selectedMonth - this.currentMonth;
+        this.moveMonth(moveMonthSteps);
+    };
     CustomDatepicker.prototype.positionPicker = function () {
         this.datepicker.style.position = 'fixed';
         var datepickerHeight = 250;
@@ -3276,27 +3299,56 @@ var CustomDatepicker = /** @class */ (function () {
         this.input.value = (0, CustomDatepickerUtils_1.formatDate)(this.selectedDate, this.dateFormat, this.language);
         this.showPicker(false);
     };
+    CustomDatepicker.prototype.setDateUsingInputValue = function () {
+        var _this = this;
+        var date = (0, CustomDatepickerUtils_1.convertStringToDate)(this.input.value, this.dateFormat, this.language);
+        if (date) {
+            this.selectedDate = date;
+            this.selectedMonth = date.getMonth();
+            this.selectedYear = date.getFullYear();
+            this.selectedDay = date.getDate();
+            this.renderCalendar();
+            this.input.value = (0, CustomDatepickerUtils_1.formatDate)(this.selectedDate, this.dateFormat, this.language);
+            this.input.blur();
+        }
+        else {
+            this.input.value = 'Invalid Date';
+            setTimeout(function () {
+                _this.input.value = '';
+            }, 300);
+        }
+        this.showPicker(false);
+    };
     CustomDatepicker.prototype.addEventListeners = function () {
         var _this = this;
         this.input.addEventListener('click', function () { return _this.showPicker(true); });
         this.input.addEventListener('focus', function () { return _this.showPicker(true); });
         this.input.addEventListener('change', function () {
-            var date = new Date(_this.input.value);
-            if (date.toString() !== 'Invalid Date') {
-                _this.selectedDate = date;
-                _this.selectedMonth = date.getMonth();
-                _this.selectedYear = date.getFullYear();
-                _this.selectedDay = date.getDate();
-                _this.renderCalendar();
+            _this.setDateUsingInputValue();
+        });
+        this.input.addEventListener('keydown', function (event) {
+            if (event.key === 'Enter') {
+                _this.setDateUsingInputValue();
             }
         });
         this.otherTriggers.forEach(function (trigger) {
             trigger.addEventListener('click', function () { return _this.showPicker(true); });
         });
         document.onclick = function (event) {
-            var elementsToNeglect = [_this.input, _this.datepicker, _this.monthYear, _this.weekdays, _this.days, _this.header, _this.selectMonthYear];
             var element = event.target;
-            var isNeglected = elementsToNeglect.includes(element) || elementsToNeglect.includes(element.parentElement) || (element).classList.contains('select-month') || element === _this.parentElement;
+            var shownDatepicker = document.getElementById(localStorage.getItem('shownDatepicker'));
+            if (shownDatepicker) {
+                var elementInsideDatepicker = shownDatepicker.querySelector(element.tagName);
+                if (elementInsideDatepicker) {
+                    return;
+                }
+            }
+            var elementsToNeglect = [_this.input, _this.datepicker, _this.monthYear, _this.weekdays, _this.days, _this.header, _this.selectMonthYear];
+            var isNeglected = elementsToNeglect.includes(element)
+                || elementsToNeglect.includes(element.parentElement)
+                || (element).classList.contains('select-month')
+                || element === _this.parentElement
+                || element.tagName === 'CUSTOM-FORMAT-DATE-ELEMENT';
             if (!isNeglected) {
                 _this.showPicker(false);
             }
@@ -3315,7 +3367,7 @@ exports.CustomDatepickerStyles = "\n    .datepicker {\n        position: fixed;\
 },{}],17:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.formatDate = exports.supportedDateFormats = exports.defaultDateFormat = exports.daysOfWeek = exports.months = void 0;
+exports.convertStringToDate = exports.isMobileDevice = exports.formatDate = exports.supportedDateFormats = exports.defaultDateFormat = exports.daysOfWeek = exports.months = void 0;
 var DatepickerTranslations_1 = require("./DatepickerTranslations");
 exports.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 exports.daysOfWeek = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
@@ -3335,24 +3387,20 @@ exports.supportedDateFormats = [
 ];
 function formatDate(date, dateFormat, language) {
     if (language === void 0) { language = 'en'; }
+    debugger;
     var year = date.getFullYear();
     var month = (date.getMonth() + 1).toString().padStart(2, '0');
     var day = date.getDate().toString().padStart(2, '0');
     var monthName = (0, DatepickerTranslations_1.GetMonths)(language)[date.getMonth()];
     var capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-    var dateFormats = {
-        'ddmmyyyy': "" + day + month + year,
-        'mmddyyyy': "" + month + day + year,
-        'dd/mm/yyyy': day + "/" + month + "/" + year,
-        'mm/dd/yyyy': month + "/" + day + "/" + year,
-        'dd-mm-yyyy': day + "-" + month + "-" + year,
-        'mm-dd-yyyy': month + "-" + day + "-" + year,
-        'yyyy-mm-dd': year + "-" + month + "-" + day,
-        'yyyy-dd-mm': year + "-" + day + "-" + month,
-        'Month dd, yyyy': capitalizedMonthName + " " + day + ", " + year,
-        'mm/dd/yy': month + "/" + day + "/" + year.toString().slice(-2),
-        'dd/mm/yy': day + "/" + month + "/" + year.toString().slice(-2),
-    };
+    var dateFormats = exports.supportedDateFormats.reduce(function (acc, format) {
+        acc[format] = format.replace('yyyy', year.toString())
+            .replace('yy', year.toString().slice(-2))
+            .replace('mm', month)
+            .replace('dd', day)
+            .replace('Month', capitalizedMonthName);
+        return acc;
+    }, {});
     return dateFormats[dateFormat];
 }
 exports.formatDate = formatDate;
@@ -3360,6 +3408,88 @@ function isMobileDevice() {
     return /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 480;
 }
 exports.isMobileDevice = isMobileDevice;
+function convertStringToDate(dateString, dateFormat, language) {
+    var _a, _b, _c;
+    if (language === void 0) { language = 'en'; }
+    debugger;
+    var year, month, day;
+    if (!validateDateString(dateString, dateFormat, language)) {
+        return null;
+    }
+    var getMonthIndex = function (monthName) {
+        var months = (0, DatepickerTranslations_1.GetMonths)(language).map(function (month) { return month.toLowerCase(); });
+        var englishMonths = (0, DatepickerTranslations_1.GetMonths)('en').map(function (month) { return month.toLowerCase(); });
+        var index = months.indexOf(monthName.toLowerCase());
+        if (index === -1) {
+            var englishMonthIndex = englishMonths.indexOf(monthName.toLowerCase());
+            return englishMonthIndex === -1 ? NaN : englishMonthIndex;
+        }
+        return index + 1;
+    };
+    switch (dateFormat) {
+        case 'ddmmyyyy':
+            day = parseInt(dateString.substring(0, 2));
+            month = parseInt(dateString.substring(2, 4));
+            year = parseInt(dateString.substring(4, 8));
+            break;
+        case 'mmddyyyy':
+            month = parseInt(dateString.substring(0, 2));
+            day = parseInt(dateString.substring(2, 4));
+            year = parseInt(dateString.substring(4, 8));
+            break;
+        case 'dd/mm/yyyy':
+        case 'dd-mm-yyyy':
+            _a = dateString.split(/\/|-/).map(Number), day = _a[0], month = _a[1], year = _a[2];
+            break;
+        case 'mm/dd/yyyy':
+        case 'mm-dd-yyyy':
+            _b = dateString.split(/\/|-/).map(Number), month = _b[0], day = _b[1], year = _b[2];
+            break;
+        case 'yyyy-mm-dd':
+        case 'yyyy-dd-mm':
+            _c = dateFormat === 'yyyy-mm-dd' ? dateString.split('-').map(Number) : [dateString.slice(0, 4), dateString.slice(8, 10), dateString.slice(5, 7)].map(Number), year = _c[0], month = _c[1], day = _c[2];
+            break;
+        case 'Month dd, yyyy':
+            var parts = dateString.split(' ');
+            year = parseInt(parts[2]);
+            month = getMonthIndex(parts[0]);
+            day = parseInt(parts[1].replace(',', ''));
+            break;
+        case 'mm/dd/yy':
+            var _d = dateString.split('/'), monthSt = _d[0], daySt = _d[1], yearSt = _d[2];
+            month = parseInt(monthSt);
+            day = parseInt(daySt);
+            year = parseInt(yearSt) + 2000;
+            break;
+        case 'dd/mm/yy':
+            var _e = dateString.split('/'), dayStr = _e[0], monthStr = _e[1], yearStr = _e[2];
+            day = parseInt(dayStr);
+            month = parseInt(monthStr);
+            year = parseInt(yearStr) + 2000;
+            break;
+        default:
+            return null;
+    }
+    if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
+        return new Date(year, month - 1, day);
+    }
+    else {
+        return null;
+    }
+}
+exports.convertStringToDate = convertStringToDate;
+function validateDateString(dateString, dateFormat, language) {
+    if (language === void 0) { language = 'en'; }
+    var dateFormatsRegex = exports.supportedDateFormats.reduce(function (acc, format) {
+        acc[format] = new RegExp("^" + format.replace('yyyy', '\\d{4}')
+            .replace('yy', '\\d{2}')
+            .replace('mm', '(0[1-9]|1[0-2])')
+            .replace('dd', '(0[1-9]|[12][0-9]|3[01])')
+            .replace('Month', (0, DatepickerTranslations_1.GetMonths)(language).join('|') + '|' + (0, DatepickerTranslations_1.GetMonths)('en').join('|')) + "$", 'i');
+        return acc;
+    }, {});
+    return dateFormatsRegex[dateFormat].test(dateString);
+}
 
 },{"./DatepickerTranslations":18}],18:[function(require,module,exports){
 "use strict";
@@ -3614,6 +3744,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     CustomFormatDateFieldElement.prototype.initChildInputs = function () {
         var _a;
         this.date = _super.prototype.getChildInput.call(this, '#date-field');
+        this.date.id = "date-field-" + Date.now();
         this.pickerTrigger = this.getChildElement('#picker-trigger');
         this.dateFormat = CustomDatepickerUtils_1.supportedDateFormats.includes(this.dateFormat) ? this.dateFormat : CustomDatepickerUtils_1.defaultDateFormat;
         this.date.placeholder = this.dateFormat;
@@ -3662,7 +3793,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     CustomFormatDateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'custom-format-date-element',
-            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\" readonly />\n\t\t\t<svg id=\"picker-trigger\" data-toggle viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"1\" fill=\"#000\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" fill=\"white\"/><path d=\"M4 10H20\" stroke=\"#000\" stroke-width=\"1\"/><circle cx=\"16\" cy=\"14\" r=\"2\" fill=\"#F44336\"/><rect x=\"6\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/></svg>\n\t\t</div>",
+            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\" />\n\t\t\t<svg id=\"picker-trigger\" data-toggle viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"1\" fill=\"#000\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" fill=\"white\"/><path d=\"M4 10H20\" stroke=\"#000\" stroke-width=\"1\"/><circle cx=\"16\" cy=\"14\" r=\"2\" fill=\"#F44336\"/><rect x=\"6\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/></svg>\n\t\t</div>",
             style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-field::after {\n\t\t\tcontent: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */\n\t\t\tcursor: pointer;\n\t\t\tright: 10px;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 15px;\n\t\t\theight: 15px;\n\t\t\tposition:absolute;\n\t\t\tright: 2px;\n\t\t\ttop: 15%;\n\t\t}\n\t",
             useShadow: true,
         })