@luftborn/custom-elements 2.5.6 → 2.5.8

package/demo/index.min.js

@@ -3001,7 +3001,22 @@ var CustomEvents_1 = require("../../framework/CustomEvents");
 var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     __extends(CustomFormatDateFieldElement, _super);
     function CustomFormatDateFieldElement() {
-        return _super.call(this) || this;
+        var _this = _super.call(this) || this;
+        _this.defaultDateFormat = 'yyyy-mm-dd';
+        _this.supportedDateFormats = [
+            'ddmmyyyy',
+            'mmddyyyy',
+            'dd/mm/yyyy',
+            'mm/dd/yyyy',
+            'dd-mm-yyyy',
+            'mm-dd-yyyy',
+            'yyyy-mm-dd',
+            'yyyy-dd-mm',
+            'Month dd, yyyy',
+            'mm/dd/yy',
+            'dd/mm/yy',
+        ];
+        return _this;
     }
     Object.defineProperty(CustomFormatDateFieldElement.prototype, "value", {
         get: function () {
@@ -3032,10 +3047,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         this.date.addEventListener('change', function () {
             _this.display.value = _this.formatDate();
             _this.change(null);
-            _this.date.hidden = true;
-            setTimeout(function () {
-                _this.date.hidden = false;
-            }, 0);
+            _this.closeDatePicker();
         });
         this.datepicker.addEventListener('click', function () {
             _this.showDatePicker();
@@ -3043,6 +3055,11 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         this.display.addEventListener('click', function () {
             _this.showDatePicker();
         });
+        document.addEventListener('click', function (event) {
+            if (!_this.contains(event.target)) {
+                _this.closeDatePicker();
+            }
+        });
         if (this.required) {
             this.date.setAttribute('required', '');
         }
@@ -3052,9 +3069,13 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         if (this.min) {
             this.date.setAttribute('min', this.min);
         }
-        if (this.dateFormat) {
+        if (this.dateFormat && this.supportedDateFormats.includes(this.dateFormat)) {
             this.display.placeholder = this.dateFormat;
         }
+        else {
+            this.display.placeholder = this.defaultDateFormat;
+            this.dateFormat = this.defaultDateFormat;
+        }
     };
     CustomFormatDateFieldElement.prototype.change = function ($event) {
         var _a;
@@ -3069,7 +3090,6 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
     };
     CustomFormatDateFieldElement.prototype.formatDate = function () {
-        var _a;
         var date = this.date.valueAsDate;
         var year = date.getFullYear();
         var month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -3088,7 +3108,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
             'mm/dd/yy': month + "/" + day + "/" + year.toString().slice(-2),
             'dd/mm/yy': day + "/" + month + "/" + year.toString().slice(-2),
         };
-        return (_a = dateFormats[this.dateFormat]) !== null && _a !== void 0 ? _a : null;
+        return dateFormats[this.dateFormat];
     };
     CustomFormatDateFieldElement.prototype.showDatePicker = function () {
         if ((!!window.ApplePaySetupFeature || !!window.safari)) {
@@ -3100,11 +3120,18 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
             }
         }
     };
+    CustomFormatDateFieldElement.prototype.closeDatePicker = function () {
+        var _this = this;
+        this.date.hidden = true;
+        setTimeout(function () {
+            _this.date.hidden = false;
+        }, 0);
+    };
     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=\"display-field\" readonly />\n\t\t\t<svg id=\"picker-trigger\" 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\t<input type=\"date\" id=\"date-field\" />\n\t\t</div>",
-            style: "\n\t\t:host{\n\t\t\twidth:100%;\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 {\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\tz-index: -1;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t#display-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\t#datepicker-icon {\n\t\t}\n\t\t\t",
+            style: "\n\t\t:host{\n\t\t\twidth:100%;\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 {\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\tz-index: -1;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t#display-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,
         })
     ], CustomFormatDateFieldElement);