@luftborn/custom-elements 2.8.8 → 2.8.10

package/demo/index.min.js

@@ -2308,7 +2308,7 @@ var CustomForm = /** @class */ (function () {
             var customElement = document.forms[0].querySelector("[name=\"" + dependentField + "\"]");
             element.setAttribute("hidden", "");
             customElement.onChange.on(function (event) {
-                if (event.value === dependentValue || event.value.indexOf(dependentValue) >= 0) {
+                if (event.value === dependentValue) {
                     _this.showGroupAndItsDependencies(element);
                 }
                 else {
@@ -3042,12 +3042,12 @@ var CustomDatepicker = /** @class */ (function () {
         this.selectDate.appendChild(actions);
         var cancel = document.createElement('input');
         cancel.type = 'reset';
-        cancel.value = 'Cancel';
+        cancel.value = (0, DatepickerTranslations_1.Translate)('cancel', this.language);
         cancel.onclick = function () { return _this.showPicker(false); };
         actions.appendChild(cancel);
         var today = document.createElement('input');
         today.type = 'reset';
-        today.value = 'Today';
+        today.value = (0, DatepickerTranslations_1.Translate)('today', this.language);
         today.onclick = function () { return _this.setDateForToday(); };
         actions.appendChild(today);
         document.body.appendChild(this.datepicker);
@@ -3296,6 +3296,7 @@ var CustomDatepicker = /** @class */ (function () {
         }
     };
     CustomDatepicker.prototype.setDateForToday = function () {
+        this.selectedDate = new Date();
         this.input.value = (0, CustomDatepickerUtils_1.formatDate)(this.selectedDate, this.dateFormat, this.language);
         this.showPicker(false);
     };
@@ -3334,25 +3335,26 @@ var CustomDatepicker = /** @class */ (function () {
         this.otherTriggers.forEach(function (trigger) {
             trigger.addEventListener('click', function () { return _this.showPicker(true); });
         });
-        document.onclick = function (event) {
-            var element = event.target;
-            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);
+        document.body.addEventListener('click', function (event) { return _this.closePickerWhenClickedOutside(event); });
+    };
+    CustomDatepicker.prototype.closePickerWhenClickedOutside = function (event) {
+        var element = event.target;
+        var shownDatepicker = document.getElementById(localStorage.getItem('shownDatepicker'));
+        if (shownDatepicker) {
+            var elementInsideDatepicker = shownDatepicker.innerHTML.includes(element.innerHTML);
+            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);
+        }
     };
     return CustomDatepicker;
 }());
@@ -3362,7 +3364,7 @@ exports.default = CustomDatepicker;
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomDatepickerStyles = void 0;
-exports.CustomDatepickerStyles = "\n    .custom-datepicker {\n        position: fixed;\n        background-color: #fff;\n        display: none;\n        width: 200px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        padding: 20px;\n        margin: 0 auto;\n        box-shadow: 0 0 10px 0 #ccc;\n        font: 12px Arial, sans-serif;\n    }\n\n    .custom-datepicker .custom-datepicer-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 10px;\n    }\n    .custom-datepicker .weekdays {\n        display: flex;\n        justify-content: space-between;\n    }\n    .custom-datepicker .weekdays span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .days span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .days span.today {\n        border: 1px solid #000;\n    }\n    .custom-datepicker .days span.selected-day {\n        background-color: #0075ff;\n        color: #fff;\n    }\n    .custom-datepicker .prev-month, .next-month {\n        cursor: pointer;\n    }\n    .custom-datepicker .month-year {\n        font-weight: bold;\n    }\n    .custom-datepicker .month-year:hover {\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year {\n        display: none;\n        width: 100%;\n        overflow-y: auto;\n    }\n    .custom-datepicker .select-month-year .year {\n        text-align: center;\n        background-color: #f0f0f0;\n        border-bottom: 1px solid #3f3d3d;\n        padding: 5px 0;\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year .year .months {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .select-month-year .year .months span {\n        width: 25%;\n        text-align: center;\n        padding: 10px 0;\n        background-color: #fff;\n    }\n    .custom-datepicker .select-month-year .year .months span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .actions {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n    }\n    .custom-datepicker .actions input {\n        color: #0075ff;\n        border: none;\n        background-color: transparent;\n        padding: 5px;\n        border: 1px solid transparent;\n    }\n    .custom-datepicker .actions input:hover {\n        background-color: #B2d5ff;\n        border-color: #000;\n    }\n";
+exports.CustomDatepickerStyles = "\n    .custom-datepicker {\n        position: fixed;\n        background-color: #fff;\n        display: none;\n        width: 200px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        padding: 10px;\n        margin: 0 auto;\n        box-shadow: 0 0 10px 0 #ccc;\n        font: 12px Arial, sans-serif;\n    }\n\n    .custom-datepicker .custom-datepicer-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 10px;\n    }\n    .custom-datepicker .weekdays {\n        display: flex;\n        justify-content: space-between;\n    }\n    .custom-datepicker .weekdays span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .days span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .days span.today {\n        border: 1px solid #000;\n    }\n    .custom-datepicker .days span.selected-day {\n        background-color: #0075ff;\n        color: #fff;\n    }\n    .custom-datepicker .prev-month, .next-month {\n        cursor: pointer;\n    }\n    .custom-datepicker .month-year {\n        font-weight: bold;\n    }\n    .custom-datepicker .month-year:hover {\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year {\n        display: none;\n        width: 100%;\n        overflow-y: auto;\n    }\n    .custom-datepicker .select-month-year .year {\n        text-align: center;\n        background-color: #f0f0f0;\n        border-bottom: 1px solid #3f3d3d;\n        padding: 5px 0;\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year .year .months {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .select-month-year .year .months span {\n        width: 25%;\n        text-align: center;\n        padding: 10px 0;\n        background-color: #fff;\n    }\n    .custom-datepicker .select-month-year .year .months span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .actions {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n    }\n    .custom-datepicker .actions input {\n        color: #0075ff;\n        border: none;\n        background-color: transparent;\n        padding: 5px;\n        border: 1px solid transparent;\n    }\n    .custom-datepicker .actions input:hover {\n        background-color: #B2d5ff;\n        border-color: #000;\n    }\n";
 
 },{}],17:[function(require,module,exports){
 "use strict";
@@ -3492,7 +3494,7 @@ function validateDateString(dateString, dateFormat, language) {
 },{"./DatepickerTranslations":18}],18:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GetMonths = exports.GetWeekdays = void 0;
+exports.Translate = exports.GetMonths = exports.GetWeekdays = void 0;
 function GetWeekdays(language, type) {
     if (language === void 0) { language = 'en'; }
     if (type === void 0) { type = 'wide'; }
@@ -3507,6 +3509,12 @@ function GetMonths(language, type) {
     return months[language][type];
 }
 exports.GetMonths = GetMonths;
+function Translate(key, language) {
+    if (language === void 0) { language = 'en'; }
+    language = supportedLanguages.includes(language) ? language : 'en';
+    return dictionary[language][key];
+}
+exports.Translate = Translate;
 var supportedLanguages = ['en', 'sv', 'de', 'fr', 'it', 'es', 'cs', 'pt', 'pl', 'nl', 'no', 'da', 'el', 'fi', 'is', 'et', 'lv', 'lt', 'hu'];
 var weekdays = {
     'en': {
@@ -3683,6 +3691,103 @@ var months = {
         'wide': ['január', 'február', 'március', 'április', 'május', 'június', 'július', 'augusztus', 'szeptember', 'október', 'november', 'december']
     },
 };
+var dictionary = {
+    'en': {
+        'today': 'Today',
+        'clear': 'Clear',
+        'cancel': 'Cancel',
+    },
+    'sv': {
+        'today': 'Idag',
+        'clear': 'Rensa',
+        'cancel': 'Avbryt',
+    },
+    'de': {
+        'today': 'Heute',
+        'clear': 'Löschen',
+        'cancel': 'Abbrechen',
+    },
+    'fr': {
+        'today': 'Aujourd\'hui',
+        'clear': 'Effacer',
+        'cancel': 'Annuler',
+    },
+    'it': {
+        'today': 'Oggi',
+        'clear': 'Cancella',
+        'cancel': 'Annulla',
+    },
+    'es': {
+        'today': 'Hoy',
+        'clear': 'Limpiar',
+        'cancel': 'Cancelar',
+    },
+    'cs': {
+        'today': 'Dnes',
+        'clear': 'Vymazat',
+        'cancel': 'Zrušit',
+    },
+    'pt': {
+        'today': 'Hoje',
+        'clear': 'Limpar',
+        'cancel': 'Cancelar',
+    },
+    'pl': {
+        'today': 'Dzisiaj',
+        'clear': 'Wyczyść',
+        'cancel': 'Anuluj',
+    },
+    'nl': {
+        'today': 'Vandaag',
+        'clear': 'Wissen',
+        'cancel': 'Annuleren',
+    },
+    'no': {
+        'today': 'I dag',
+        'clear': 'Tøm',
+        'cancel': 'Avbryt',
+    },
+    'da': {
+        'today': 'I dag',
+        'clear': 'Ryd',
+        'cancel': 'Annuller',
+    },
+    'el': {
+        'today': 'Σήμερα',
+        'clear': 'Καθαρισμός',
+        'cancel': 'Ακύρωση',
+    },
+    'fi': {
+        'today': 'Tänään',
+        'clear': 'Tyhjennä',
+        'cancel': 'Peruuta',
+    },
+    'is': {
+        'today': 'Í dag',
+        'clear': 'Hreinsa',
+        'cancel': 'Hætta við',
+    },
+    'et': {
+        'today': 'Täna',
+        'clear': 'Tühjenda',
+        'cancel': 'Tühista',
+    },
+    'lv': {
+        'today': 'Šodien',
+        'clear': 'Notīrīt',
+        'cancel': 'Atcelt',
+    },
+    'lt': {
+        'today': 'Šiandien',
+        'clear': 'Išvalyti',
+        'cancel': 'Atšaukti',
+    },
+    'hu': {
+        'today': 'Ma',
+        'clear': 'Törlés',
+        'cancel': 'Mégse',
+    },
+};
 
 },{}],19:[function(require,module,exports){
 "use strict";