@luftborn/custom-elements 2.5.6 → 2.5.7

package/demo/index.min.js

@@ -3032,10 +3032,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 +3040,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', '');
         }
@@ -3100,11 +3102,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);