@luftborn/custom-elements 2.5.6 → 2.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,8 @@ export declare class CustomFormatDateFieldElement extends CustomInputElement {
3
3
  date: any;
4
4
  display: HTMLInputElement;
5
5
  datepicker: any;
6
+ private readonly defaultDateFormat;
7
+ private readonly supportedDateFormats;
6
8
  constructor();
7
9
  get value(): string;
8
10
  set value(value: string);
@@ -13,4 +15,5 @@ export declare class CustomFormatDateFieldElement extends CustomInputElement {
13
15
  validate(): void;
14
16
  private formatDate;
15
17
  private showDatePicker;
18
+ private closeDatePicker;
16
19
  }
@@ -28,7 +28,22 @@ var CustomEvents_1 = require("../../framework/CustomEvents");
28
28
  var CustomFormatDateFieldElement = /** @class */ (function (_super) {
29
29
  __extends(CustomFormatDateFieldElement, _super);
30
30
  function CustomFormatDateFieldElement() {
31
- return _super.call(this) || this;
31
+ var _this = _super.call(this) || this;
32
+ _this.defaultDateFormat = 'yyyy-mm-dd';
33
+ _this.supportedDateFormats = [
34
+ 'ddmmyyyy',
35
+ 'mmddyyyy',
36
+ 'dd/mm/yyyy',
37
+ 'mm/dd/yyyy',
38
+ 'dd-mm-yyyy',
39
+ 'mm-dd-yyyy',
40
+ 'yyyy-mm-dd',
41
+ 'yyyy-dd-mm',
42
+ 'Month dd, yyyy',
43
+ 'mm/dd/yy',
44
+ 'dd/mm/yy',
45
+ ];
46
+ return _this;
32
47
  }
33
48
  Object.defineProperty(CustomFormatDateFieldElement.prototype, "value", {
34
49
  get: function () {
@@ -59,10 +74,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
59
74
  this.date.addEventListener('change', function () {
60
75
  _this.display.value = _this.formatDate();
61
76
  _this.change(null);
62
- _this.date.hidden = true;
63
- setTimeout(function () {
64
- _this.date.hidden = false;
65
- }, 0);
77
+ _this.closeDatePicker();
66
78
  });
67
79
  this.datepicker.addEventListener('click', function () {
68
80
  _this.showDatePicker();
@@ -70,6 +82,11 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
70
82
  this.display.addEventListener('click', function () {
71
83
  _this.showDatePicker();
72
84
  });
85
+ document.addEventListener('click', function (event) {
86
+ if (!_this.contains(event.target)) {
87
+ _this.closeDatePicker();
88
+ }
89
+ });
73
90
  if (this.required) {
74
91
  this.date.setAttribute('required', '');
75
92
  }
@@ -79,9 +96,13 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
79
96
  if (this.min) {
80
97
  this.date.setAttribute('min', this.min);
81
98
  }
82
- if (this.dateFormat) {
99
+ if (this.dateFormat && this.supportedDateFormats.includes(this.dateFormat)) {
83
100
  this.display.placeholder = this.dateFormat;
84
101
  }
102
+ else {
103
+ this.display.placeholder = this.defaultDateFormat;
104
+ this.dateFormat = this.defaultDateFormat;
105
+ }
85
106
  };
86
107
  CustomFormatDateFieldElement.prototype.change = function ($event) {
87
108
  var _a;
@@ -96,7 +117,6 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
96
117
  this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
97
118
  };
98
119
  CustomFormatDateFieldElement.prototype.formatDate = function () {
99
- var _a;
100
120
  var date = this.date.valueAsDate;
101
121
  var year = date.getFullYear();
102
122
  var month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -115,7 +135,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
115
135
  'mm/dd/yy': month + "/" + day + "/" + year.toString().slice(-2),
116
136
  'dd/mm/yy': day + "/" + month + "/" + year.toString().slice(-2),
117
137
  };
118
- return (_a = dateFormats[this.dateFormat]) !== null && _a !== void 0 ? _a : null;
138
+ return dateFormats[this.dateFormat];
119
139
  };
120
140
  CustomFormatDateFieldElement.prototype.showDatePicker = function () {
121
141
  if ((!!window.ApplePaySetupFeature || !!window.safari)) {
@@ -127,11 +147,18 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
127
147
  }
128
148
  }
129
149
  };
150
+ CustomFormatDateFieldElement.prototype.closeDatePicker = function () {
151
+ var _this = this;
152
+ this.date.hidden = true;
153
+ setTimeout(function () {
154
+ _this.date.hidden = false;
155
+ }, 0);
156
+ };
130
157
  CustomFormatDateFieldElement = __decorate([
131
158
  (0, custom_element_decorator_1.default)({
132
159
  selector: 'custom-format-date-element',
133
160
  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>",
134
- 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",
161
+ 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",
135
162
  useShadow: true,
136
163
  })
137
164
  ], CustomFormatDateFieldElement);
@@ -1 +1 @@
1
- {"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luftborn/custom-elements",
3
- "version": "2.5.6",
3
+ "version": "2.5.8",
4
4
  "description": "custom HTML elements for the form builder application (node version: 18)",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -50,15 +50,27 @@ declare const window: {
50
50
  right: 2px;
51
51
  top: 15%;
52
52
  }
53
- #datepicker-icon {
54
- }
55
- `,
53
+ `,
56
54
  useShadow: true,
57
55
  })
58
56
  export class CustomFormatDateFieldElement extends CustomInputElement {
59
57
  date: any;
60
58
  display: HTMLInputElement;
61
59
  datepicker: any;
60
+ private readonly defaultDateFormat = 'yyyy-mm-dd';
61
+ private readonly supportedDateFormats = [
62
+ 'ddmmyyyy',
63
+ 'mmddyyyy',
64
+ 'dd/mm/yyyy',
65
+ 'mm/dd/yyyy',
66
+ 'dd-mm-yyyy',
67
+ 'mm-dd-yyyy',
68
+ 'yyyy-mm-dd',
69
+ 'yyyy-dd-mm',
70
+ 'Month dd, yyyy',
71
+ 'mm/dd/yy',
72
+ 'dd/mm/yy',
73
+ ];
62
74
 
63
75
  constructor() {
64
76
  super();
@@ -89,10 +101,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
89
101
  this.date.addEventListener('change', () => {
90
102
  this.display.value = this.formatDate();
91
103
  this.change(null);
92
- this.date.hidden = true;
93
- setTimeout(() => {
94
- this.date.hidden = false;
95
- }, 0);
104
+ this.closeDatePicker();
96
105
  });
97
106
 
98
107
  this.datepicker.addEventListener('click', () => {
@@ -103,6 +112,12 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
103
112
  this.showDatePicker();
104
113
  });
105
114
 
115
+ document.addEventListener('click', (event) => {
116
+ if (!this.contains(event.target as Node)) {
117
+ this.closeDatePicker();
118
+ }
119
+ });
120
+
106
121
  if (this.required) {
107
122
  this.date.setAttribute('required', '');
108
123
  }
@@ -112,8 +127,11 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
112
127
  if (this.min) {
113
128
  this.date.setAttribute('min', this.min);
114
129
  }
115
- if (this.dateFormat) {
130
+ if (this.dateFormat && this.supportedDateFormats.includes(this.dateFormat)) {
116
131
  this.display.placeholder = this.dateFormat;
132
+ } else {
133
+ this.display.placeholder = this.defaultDateFormat;
134
+ this.dateFormat = this.defaultDateFormat;
117
135
  }
118
136
  }
119
137
 
@@ -154,7 +172,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
154
172
  'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
155
173
  }
156
174
 
157
- return dateFormats[this.dateFormat] ?? null;
175
+ return dateFormats[this.dateFormat];
158
176
  }
159
177
 
160
178
  private showDatePicker(): void {
@@ -166,4 +184,11 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
166
184
  }
167
185
  }
168
186
  }
187
+
188
+ private closeDatePicker(): void {
189
+ this.date.hidden = true;
190
+ setTimeout(() => {
191
+ this.date.hidden = false;
192
+ }, 0);
193
+ }
169
194
  }