@luftborn/custom-elements 2.4.1 → 2.5.1
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.
- package/assets/icons/datepicker-icon.png +0 -0
- package/demo/index.js +204 -67
- package/demo/index.min.js +203 -66
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CustomDataFiledElement/CustomFormatDateFieldElement.d.ts +16 -0
- package/dist/elements/CustomDataFiledElement/CustomFormatDateFieldElement.js +133 -0
- package/dist/elements/CustomDataFiledElement/CustomFormatDateFieldElement.js.map +1 -0
- package/dist/elements/Elements.d.ts +2 -1
- package/dist/elements/Elements.js +3 -1
- package/dist/elements/Elements.js.map +1 -1
- package/dist/framework/CustomInputElement.d.ts +1 -0
- package/dist/framework/CustomInputElement.js +1 -0
- package/dist/framework/CustomInputElement.js.map +1 -1
- package/package.json +2 -2
- package/src/elements/CustomDataFiledElement/CustomFormatDateFieldElement.ts +157 -0
- package/src/elements/Elements.ts +2 -0
- package/src/framework/CustomInputElement.ts +2 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
2
|
+
export declare class CustomFormatDateFieldElement extends CustomInputElement {
|
|
3
|
+
date: any;
|
|
4
|
+
display: HTMLInputElement;
|
|
5
|
+
datepicker: any;
|
|
6
|
+
constructor();
|
|
7
|
+
get value(): string;
|
|
8
|
+
set value(value: string);
|
|
9
|
+
get valid(): boolean;
|
|
10
|
+
connectedCallback(): void;
|
|
11
|
+
initChildInputs(): void;
|
|
12
|
+
change($event: any): void;
|
|
13
|
+
validate(): void;
|
|
14
|
+
private formatDate;
|
|
15
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
16
|
+
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
18
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
19
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
20
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
21
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
22
|
+
};
|
|
23
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
|
+
exports.CustomFormatDateFieldElement = void 0;
|
|
25
|
+
var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
|
|
26
|
+
var CustomInputElement_1 = require("../../framework/CustomInputElement");
|
|
27
|
+
var CustomEvents_1 = require("../../framework/CustomEvents");
|
|
28
|
+
var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
29
|
+
__extends(CustomFormatDateFieldElement, _super);
|
|
30
|
+
function CustomFormatDateFieldElement() {
|
|
31
|
+
return _super.call(this) || this;
|
|
32
|
+
}
|
|
33
|
+
Object.defineProperty(CustomFormatDateFieldElement.prototype, "value", {
|
|
34
|
+
get: function () {
|
|
35
|
+
return this.date.value;
|
|
36
|
+
},
|
|
37
|
+
set: function (value) {
|
|
38
|
+
this.date.value = value;
|
|
39
|
+
this.display.value = value;
|
|
40
|
+
},
|
|
41
|
+
enumerable: false,
|
|
42
|
+
configurable: true
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(CustomFormatDateFieldElement.prototype, "valid", {
|
|
45
|
+
get: function () {
|
|
46
|
+
return this.date.validity.valid;
|
|
47
|
+
},
|
|
48
|
+
enumerable: false,
|
|
49
|
+
configurable: true
|
|
50
|
+
});
|
|
51
|
+
CustomFormatDateFieldElement.prototype.connectedCallback = function () {
|
|
52
|
+
_super.prototype.connectedCallback.call(this);
|
|
53
|
+
};
|
|
54
|
+
CustomFormatDateFieldElement.prototype.initChildInputs = function () {
|
|
55
|
+
var _this = this;
|
|
56
|
+
this.date = _super.prototype.getChildInput.call(this, '#date-field');
|
|
57
|
+
this.display = _super.prototype.getChildInput.call(this, '#display-field');
|
|
58
|
+
this.datepicker = _super.prototype.getChildInput.call(this, '#picker-trigger');
|
|
59
|
+
this.date.addEventListener('change', function () {
|
|
60
|
+
_this.display.value = _this.formatDate();
|
|
61
|
+
_this.change(null);
|
|
62
|
+
});
|
|
63
|
+
this.datepicker.addEventListener('click', function () {
|
|
64
|
+
_this.date.showPicker();
|
|
65
|
+
});
|
|
66
|
+
this.display.addEventListener('click', function () {
|
|
67
|
+
_this.date.showPicker();
|
|
68
|
+
});
|
|
69
|
+
if (this.required) {
|
|
70
|
+
this.date.setAttribute('required', '');
|
|
71
|
+
}
|
|
72
|
+
if (this.max) {
|
|
73
|
+
this.date.setAttribute('max', this.max);
|
|
74
|
+
}
|
|
75
|
+
if (this.min) {
|
|
76
|
+
this.date.setAttribute('min', this.min);
|
|
77
|
+
}
|
|
78
|
+
if (this.dateFormat) {
|
|
79
|
+
this.display.placeholder = this.dateFormat;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
CustomFormatDateFieldElement.prototype.change = function ($event) {
|
|
83
|
+
var _a;
|
|
84
|
+
this.touched = true;
|
|
85
|
+
var formattedDate = (_a = this.formatDate()) !== null && _a !== void 0 ? _a : this.date.valueAsDate.toLocaleDateString();
|
|
86
|
+
this.display.value = formattedDate;
|
|
87
|
+
this.date.setAttribute('value', formattedDate);
|
|
88
|
+
this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
|
|
89
|
+
};
|
|
90
|
+
CustomFormatDateFieldElement.prototype.validate = function () {
|
|
91
|
+
this.valid;
|
|
92
|
+
this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
|
|
93
|
+
};
|
|
94
|
+
CustomFormatDateFieldElement.prototype.formatDate = function () {
|
|
95
|
+
var _a;
|
|
96
|
+
var date = this.date.valueAsDate;
|
|
97
|
+
var year = date.getFullYear();
|
|
98
|
+
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
99
|
+
var day = date.getDate().toString().padStart(2, '0');
|
|
100
|
+
var monthName = date.toLocaleString('default', { month: 'long' });
|
|
101
|
+
var dateFormats = {
|
|
102
|
+
'ddmmyyyy': "" + day + month + year,
|
|
103
|
+
'mmddyyyy': "" + month + day + year,
|
|
104
|
+
'dd/mm/yyyy': day + "/" + month + "/" + year,
|
|
105
|
+
'mm/dd/yyyy': month + "/" + day + "/" + year,
|
|
106
|
+
'dd-mm-yyyy': day + "-" + month + "-" + year,
|
|
107
|
+
'mm-dd-yyyy': month + "-" + day + "-" + year,
|
|
108
|
+
'yyyy-mm-dd': year + "-" + month + "-" + day,
|
|
109
|
+
'yyyy-dd-mm': year + "-" + day + "-" + month,
|
|
110
|
+
'Month dd, yyyy': monthName + " " + day + ", " + year,
|
|
111
|
+
'mm/dd/yy': month + "/" + day + "/" + year.toString().slice(-2),
|
|
112
|
+
'dd/mm/yy': day + "/" + month + "/" + year.toString().slice(-2),
|
|
113
|
+
};
|
|
114
|
+
return (_a = dateFormats[this.dateFormat]) !== null && _a !== void 0 ? _a : null;
|
|
115
|
+
};
|
|
116
|
+
CustomFormatDateFieldElement.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
|
|
117
|
+
if (name === 'date-format') {
|
|
118
|
+
this.display.setAttribute('placeholder', newValue);
|
|
119
|
+
this.dateFormat = newValue;
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
CustomFormatDateFieldElement = __decorate([
|
|
123
|
+
(0, custom_element_decorator_1.default)({
|
|
124
|
+
selector: 'custom-format-date-element',
|
|
125
|
+
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>",
|
|
126
|
+
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",
|
|
127
|
+
useShadow: true,
|
|
128
|
+
})
|
|
129
|
+
], CustomFormatDateFieldElement);
|
|
130
|
+
return CustomFormatDateFieldElement;
|
|
131
|
+
}(CustomInputElement_1.CustomInputElement));
|
|
132
|
+
exports.CustomFormatDateFieldElement = CustomFormatDateFieldElement;
|
|
133
|
+
//# sourceMappingURL=CustomFormatDateFieldElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomDataFiledElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -17,4 +17,5 @@ import { BankFieldElement } from './BankField/BankFieldElement';
|
|
|
17
17
|
import { TypeAheadElement } from './TypeAhead/TypeAheadElement';
|
|
18
18
|
import { SEPersonalNumberElement } from './SEPersonalNumberElement/SEPersonalNumberElement';
|
|
19
19
|
import { SECompanyRegistrationElement } from './SECompanyRegistrationElement/SECompanyRegistrationElement';
|
|
20
|
-
|
|
20
|
+
import { CustomFormatDateFieldElement } from './CustomDataFiledElement/CustomFormatDateFieldElement';
|
|
21
|
+
export { AddressElement, TextFieldElement, EmailFieldElement, CheckBoxElement, RadioButtonGroupElement, TextAreaElement, DropDownListElement, FileFieldElement, NumericFieldElement, CustomRegularExpressionElement, DateFieldElement, CustomFormatDateFieldElement, IntPhoneFieldElement, CPRElement, CVRElement, IdentificationElement, BankFieldElement, TypeAheadElement, SEPersonalNumberElement, SECompanyRegistrationElement, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SECompanyRegistrationElement = exports.SEPersonalNumberElement = exports.TypeAheadElement = exports.BankFieldElement = exports.IdentificationElement = exports.CVRElement = exports.CPRElement = exports.IntPhoneFieldElement = exports.DateFieldElement = exports.CustomRegularExpressionElement = exports.NumericFieldElement = exports.FileFieldElement = exports.DropDownListElement = exports.TextAreaElement = exports.RadioButtonGroupElement = exports.CheckBoxElement = exports.EmailFieldElement = exports.TextFieldElement = exports.AddressElement = void 0;
|
|
3
|
+
exports.SECompanyRegistrationElement = exports.SEPersonalNumberElement = exports.TypeAheadElement = exports.BankFieldElement = exports.IdentificationElement = exports.CVRElement = exports.CPRElement = exports.IntPhoneFieldElement = exports.CustomFormatDateFieldElement = exports.DateFieldElement = exports.CustomRegularExpressionElement = exports.NumericFieldElement = exports.FileFieldElement = exports.DropDownListElement = exports.TextAreaElement = exports.RadioButtonGroupElement = exports.CheckBoxElement = exports.EmailFieldElement = exports.TextFieldElement = exports.AddressElement = void 0;
|
|
4
4
|
var AddressElement_1 = require("./Address/AddressElement");
|
|
5
5
|
Object.defineProperty(exports, "AddressElement", { enumerable: true, get: function () { return AddressElement_1.AddressElement; } });
|
|
6
6
|
var TextFieldElement_1 = require("./TextField/TextFieldElement");
|
|
@@ -39,4 +39,6 @@ var SEPersonalNumberElement_1 = require("./SEPersonalNumberElement/SEPersonalNum
|
|
|
39
39
|
Object.defineProperty(exports, "SEPersonalNumberElement", { enumerable: true, get: function () { return SEPersonalNumberElement_1.SEPersonalNumberElement; } });
|
|
40
40
|
var SECompanyRegistrationElement_1 = require("./SECompanyRegistrationElement/SECompanyRegistrationElement");
|
|
41
41
|
Object.defineProperty(exports, "SECompanyRegistrationElement", { enumerable: true, get: function () { return SECompanyRegistrationElement_1.SECompanyRegistrationElement; } });
|
|
42
|
+
var CustomFormatDateFieldElement_1 = require("./CustomDataFiledElement/CustomFormatDateFieldElement");
|
|
43
|
+
Object.defineProperty(exports, "CustomFormatDateFieldElement", { enumerable: true, get: function () { return CustomFormatDateFieldElement_1.CustomFormatDateFieldElement; } });
|
|
42
44
|
//# sourceMappingURL=Elements.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Elements.js","sourceRoot":"","sources":["../../src/elements/Elements.ts"],"names":[],"mappings":";;;AAAA,2DAA0D;
|
|
1
|
+
{"version":3,"file":"Elements.js","sourceRoot":"","sources":["../../src/elements/Elements.ts"],"names":[],"mappings":";;;AAAA,2DAA0D;AAsBzD,+FAtBQ,+BAAc,OAsBR;AArBf,iEAAgE;AAsB/D,iGAtBQ,mCAAgB,OAsBR;AArBjB,oEAAmE;AAsBlE,kGAtBQ,qCAAiB,OAsBR;AArBlB,qEAAoE;AAsBnE,gGAtBQ,iCAAe,OAsBR;AArBhB,sFAAqF;AAsBpF,wGAtBQ,iDAAuB,OAsBR;AArBxB,qEAAoE;AAsBnE,gGAtBQ,iCAAe,OAsBR;AArBhB,0EAAyE;AAsBxE,oGAtBQ,yCAAmB,OAsBR;AArBpB,iEAAgE;AAsB/D,iGAtBQ,mCAAgB,OAsBR;AArBjB,0EAAyE;AAsBxE,oGAtBQ,yCAAmB,OAsBR;AArBpB,2GAA0G;AAsBzG,+GAtBQ,+DAA8B,OAsBR;AArB/B,iEAAgE;AAsB/D,iGAtBQ,mCAAgB,OAsBR;AArBjB,2GAAgG;AAuB/F,qGAvBQ,qDAAoB,OAuBR;AAtBrB,sDAAqD;AAuBpD,2FAvBQ,uBAAU,OAuBR;AAtBX,sDAAqD;AAuBpD,2FAvBQ,uBAAU,OAuBR;AAtBX,uFAAsF;AAuBrF,sGAvBQ,6CAAqB,OAuBR;AAtBtB,iEAAgE;AAuB/D,iGAvBQ,mCAAgB,OAuBR;AAtBjB,iEAAgE;AAuB/D,iGAvBQ,mCAAgB,OAuBR;AAtBjB,6FAA4F;AAuBxF,wGAvBK,iDAAuB,OAuBL;AAtB3B,4GAA2G;AAuBvG,6GAvBK,2DAA4B,OAuBL;AAtBhC,sGAAqG;AAcpG,6GAdQ,2DAA4B,OAcR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomInputElement.js","sourceRoot":"","sources":["../../src/framework/CustomInputElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+CAA4E;AAE5E,mDAA8C;AAC9C,+CAA0C;AAE1C;IAAA;IAEA,CAAC;IAAD,kBAAC;AAAD,CAAC,AAFD,IAEC;AACD;IAAiD,sCAAW;
|
|
1
|
+
{"version":3,"file":"CustomInputElement.js","sourceRoot":"","sources":["../../src/framework/CustomInputElement.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luftborn/custom-elements",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "custom HTML elements for the form builder application ",
|
|
3
|
+
"version": "2.5.1",
|
|
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",
|
|
7
7
|
"prepublish": "tsc --declaration"
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import CustomElement from '../../framework/custom-element.decorator';
|
|
2
|
+
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
3
|
+
import { CustomElementEventArgs } from '../../framework/CustomEvents';
|
|
4
|
+
|
|
5
|
+
@CustomElement({
|
|
6
|
+
selector: 'custom-format-date-element',
|
|
7
|
+
template: `
|
|
8
|
+
<div class="wrapper">
|
|
9
|
+
<input type="text" id="display-field" readonly />
|
|
10
|
+
<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>
|
|
11
|
+
<input type="date" id="date-field" />
|
|
12
|
+
</div>`,
|
|
13
|
+
style: `
|
|
14
|
+
:host{
|
|
15
|
+
width:100%;
|
|
16
|
+
}
|
|
17
|
+
.wrapper{
|
|
18
|
+
display:flex;
|
|
19
|
+
position: relative;
|
|
20
|
+
}
|
|
21
|
+
input{
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
width: 100% !important;
|
|
24
|
+
border: none;
|
|
25
|
+
background-color: #f1f4ff;
|
|
26
|
+
margin: 2px;
|
|
27
|
+
resize: none;
|
|
28
|
+
}
|
|
29
|
+
#date-field {
|
|
30
|
+
opacity: 0;
|
|
31
|
+
position: absolute;
|
|
32
|
+
z-index: -1;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
#display-field::after {
|
|
36
|
+
content: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
right: 10px;
|
|
39
|
+
}
|
|
40
|
+
#picker-trigger {
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
width: 15px;
|
|
43
|
+
height: 15px;
|
|
44
|
+
position:absolute;
|
|
45
|
+
right: 2px;
|
|
46
|
+
top: 15%;
|
|
47
|
+
}
|
|
48
|
+
#datepicker-icon {
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
useShadow: true,
|
|
52
|
+
})
|
|
53
|
+
export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
54
|
+
date: any;
|
|
55
|
+
display: HTMLInputElement;
|
|
56
|
+
datepicker: any;
|
|
57
|
+
|
|
58
|
+
constructor() {
|
|
59
|
+
super();
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
get value(): string {
|
|
63
|
+
return this.date.value;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
set value(value: string) {
|
|
67
|
+
this.date.value = value;
|
|
68
|
+
this.display.value = value;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
get valid(): boolean {
|
|
72
|
+
return this.date.validity.valid;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
connectedCallback(): void {
|
|
76
|
+
super.connectedCallback();
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
initChildInputs() {
|
|
80
|
+
this.date = super.getChildInput('#date-field');
|
|
81
|
+
this.display = super.getChildInput('#display-field');
|
|
82
|
+
this.datepicker = super.getChildInput('#picker-trigger');
|
|
83
|
+
|
|
84
|
+
this.date.addEventListener('change', () => {
|
|
85
|
+
this.display.value = this.formatDate();
|
|
86
|
+
this.change(null);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
this.datepicker.addEventListener('click', () => {
|
|
90
|
+
this.date.showPicker();
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
this.display.addEventListener('click', () => {
|
|
94
|
+
this.date.showPicker();
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
if (this.required) {
|
|
98
|
+
this.date.setAttribute('required', '');
|
|
99
|
+
}
|
|
100
|
+
if (this.max) {
|
|
101
|
+
this.date.setAttribute('max', this.max);
|
|
102
|
+
}
|
|
103
|
+
if (this.min) {
|
|
104
|
+
this.date.setAttribute('min', this.min);
|
|
105
|
+
}
|
|
106
|
+
if (this.dateFormat){
|
|
107
|
+
this.display.placeholder = this.dateFormat;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
public change($event): void {
|
|
112
|
+
this.touched = true;
|
|
113
|
+
const formattedDate = this.formatDate() ?? this.date.valueAsDate.toLocaleDateString();
|
|
114
|
+
this.display.value = formattedDate;
|
|
115
|
+
this.date.setAttribute('value', formattedDate);
|
|
116
|
+
this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
public validate(): void {
|
|
120
|
+
this.valid;
|
|
121
|
+
this.onValidate.emit(
|
|
122
|
+
new CustomElementEventArgs(this.value, 'validate'),
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
private formatDate(): string {
|
|
127
|
+
const date = this.date.valueAsDate;
|
|
128
|
+
|
|
129
|
+
const year = date.getFullYear();
|
|
130
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
131
|
+
const day = date.getDate().toString().padStart(2, '0');
|
|
132
|
+
const monthName = date.toLocaleString('default', { month: 'long' });
|
|
133
|
+
|
|
134
|
+
const dateFormats = {
|
|
135
|
+
'ddmmyyyy': `${day}${month}${year}`,
|
|
136
|
+
'mmddyyyy': `${month}${day}${year}`,
|
|
137
|
+
'dd/mm/yyyy': `${day}/${month}/${year}`,
|
|
138
|
+
'mm/dd/yyyy': `${month}/${day}/${year}`,
|
|
139
|
+
'dd-mm-yyyy': `${day}-${month}-${year}`,
|
|
140
|
+
'mm-dd-yyyy': `${month}-${day}-${year}`,
|
|
141
|
+
'yyyy-mm-dd': `${year}-${month}-${day}`,
|
|
142
|
+
'yyyy-dd-mm': `${year}-${day}-${month}`,
|
|
143
|
+
'Month dd, yyyy': `${monthName} ${day}, ${year}`,
|
|
144
|
+
'mm/dd/yy': `${month}/${day}/${year.toString().slice(-2)}`,
|
|
145
|
+
'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return dateFormats[this.dateFormat] ?? null;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
|
|
152
|
+
if (name === 'date-format') {
|
|
153
|
+
this.display.setAttribute('placeholder', newValue);
|
|
154
|
+
this.dateFormat = newValue;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
package/src/elements/Elements.ts
CHANGED
|
@@ -17,6 +17,7 @@ import { BankFieldElement } from './BankField/BankFieldElement';
|
|
|
17
17
|
import { TypeAheadElement } from './TypeAhead/TypeAheadElement';
|
|
18
18
|
import { SEPersonalNumberElement } from './SEPersonalNumberElement/SEPersonalNumberElement';
|
|
19
19
|
import { SECompanyRegistrationElement } from './SECompanyRegistrationElement/SECompanyRegistrationElement';
|
|
20
|
+
import { CustomFormatDateFieldElement } from './CustomDataFiledElement/CustomFormatDateFieldElement';
|
|
20
21
|
|
|
21
22
|
export {
|
|
22
23
|
AddressElement,
|
|
@@ -30,6 +31,7 @@ export {
|
|
|
30
31
|
NumericFieldElement,
|
|
31
32
|
CustomRegularExpressionElement,
|
|
32
33
|
DateFieldElement,
|
|
34
|
+
CustomFormatDateFieldElement,
|
|
33
35
|
IntPhoneFieldElement,
|
|
34
36
|
CPRElement,
|
|
35
37
|
CVRElement,
|
|
@@ -32,6 +32,7 @@ export abstract class CustomInputElement extends HTMLElement {
|
|
|
32
32
|
public max: any;
|
|
33
33
|
public min: any;
|
|
34
34
|
public step: any;
|
|
35
|
+
public dateFormat: string;
|
|
35
36
|
|
|
36
37
|
constructor() {
|
|
37
38
|
super();
|
|
@@ -100,6 +101,7 @@ export abstract class CustomInputElement extends HTMLElement {
|
|
|
100
101
|
this.min = data.min;
|
|
101
102
|
this.step = data.step;
|
|
102
103
|
this.customValue = data.value;
|
|
104
|
+
this.dateFormat = data.dateFormat;
|
|
103
105
|
} catch (ex) {
|
|
104
106
|
console.error(ex);
|
|
105
107
|
}
|