@luftborn/custom-elements 2.5.3 → 2.5.5
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/demo/index.js +8 -5
- package/demo/index.min.js +7 -4
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +7 -4
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +20 -12
|
@@ -59,6 +59,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
59
59
|
this.date.addEventListener('change', function () {
|
|
60
60
|
_this.display.value = _this.formatDate();
|
|
61
61
|
_this.change(null);
|
|
62
|
+
_this.date.blur();
|
|
62
63
|
});
|
|
63
64
|
this.datepicker.addEventListener('click', function () {
|
|
64
65
|
_this.showDatePicker();
|
|
@@ -114,12 +115,14 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
114
115
|
return (_a = dateFormats[this.dateFormat]) !== null && _a !== void 0 ? _a : null;
|
|
115
116
|
};
|
|
116
117
|
CustomFormatDateFieldElement.prototype.showDatePicker = function () {
|
|
117
|
-
|
|
118
|
-
this.date.showPicker();
|
|
119
|
-
}
|
|
120
|
-
catch (error) {
|
|
118
|
+
if ((!!window.ApplePaySetupFeature || !!window.safari)) {
|
|
121
119
|
this.date.click();
|
|
122
120
|
}
|
|
121
|
+
else {
|
|
122
|
+
if (this.date.showPicker) {
|
|
123
|
+
this.date.showPicker();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
123
126
|
};
|
|
124
127
|
CustomFormatDateFieldElement = __decorate([
|
|
125
128
|
(0, custom_element_decorator_1.default)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;
|
|
1
|
+
{"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;AAuDtE;IAAkD,gDAAkB;IAKnE;eACC,iBAAO;IACR,CAAC;IAED,sBAAI,+CAAK;aAAT;YACC,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAC3B,CAAC;aAED,UAAU,KAAa;YACtB,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAC5B,CAAC;;;OALA;IAOD,sBAAI,+CAAK;aAAT;YACC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACjC,CAAC;;;OAAA;IAED,wDAAiB,GAAjB;QACC,iBAAM,iBAAiB,WAAE,CAAC;IAC3B,CAAC;IAED,sDAAe,GAAf;QAAA,iBA+BC;QA9BA,IAAI,CAAC,IAAI,GAAG,iBAAM,aAAa,YAAC,aAAa,CAAC,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,iBAAM,aAAa,YAAC,gBAAgB,CAAC,CAAC;QACrD,IAAI,CAAC,UAAU,GAAG,iBAAM,aAAa,YAAC,iBAAiB,CAAC,CAAC;QAEzD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YACpC,KAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAI,CAAC,UAAU,EAAE,CAAC;YACvC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAClB,KAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACzC,KAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACtC,KAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;SACvC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACxC;QACD,IAAI,IAAI,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACxC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;SAC3C;IACF,CAAC;IAEM,6CAAM,GAAb,UAAc,MAAM;;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAM,aAAa,GAAG,MAAA,IAAI,CAAC,UAAU,EAAE,mCAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,CAAC;QACtF,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,qCAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtE,CAAC;IAEM,+CAAQ,GAAf;QACC,IAAI,CAAC,KAAK,CAAC;QACX,IAAI,CAAC,UAAU,CAAC,IAAI,CACnB,IAAI,qCAAsB,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAClD,CAAC;IACH,CAAC;IAEO,iDAAU,GAAlB;;QACC,IAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QAEnC,IAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,IAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAChE,IAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACvD,IAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QAEpE,IAAM,WAAW,GAAG;YACnB,UAAU,EAAE,KAAG,GAAG,GAAG,KAAK,GAAG,IAAM;YACnC,UAAU,EAAE,KAAG,KAAK,GAAG,GAAG,GAAG,IAAM;YACnC,YAAY,EAAK,GAAG,SAAI,KAAK,SAAI,IAAM;YACvC,YAAY,EAAK,KAAK,SAAI,GAAG,SAAI,IAAM;YACvC,YAAY,EAAK,GAAG,SAAI,KAAK,SAAI,IAAM;YACvC,YAAY,EAAK,KAAK,SAAI,GAAG,SAAI,IAAM;YACvC,YAAY,EAAK,IAAI,SAAI,KAAK,SAAI,GAAK;YACvC,YAAY,EAAK,IAAI,SAAI,GAAG,SAAI,KAAO;YACvC,gBAAgB,EAAK,SAAS,SAAI,GAAG,UAAK,IAAM;YAChD,UAAU,EAAK,KAAK,SAAI,GAAG,SAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAG;YAC1D,UAAU,EAAK,GAAG,SAAI,KAAK,SAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAG;SAC1D,CAAA;QAED,OAAO,MAAA,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,mCAAI,IAAI,CAAC;IAC7C,CAAC;IAEO,qDAAc,GAAtB;QACC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;YACvD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;SAClB;aAAM;YACN,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAC;gBACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;aACvB;SACD;IACF,CAAC;IA3GW,4BAA4B;QAhDxC,IAAA,kCAAa,EAAC;YACd,QAAQ,EAAE,4BAA4B;YACtC,QAAQ,EAAE,qpBAKF;YACR,KAAK,EAAE,mwBAqCJ;YACH,SAAS,EAAE,IAAI;SACf,CAAC;OACW,4BAA4B,CA4GxC;IAAD,mCAAC;CAAA,AA5GD,CAAkD,uCAAkB,GA4GnE;AA5GY,oEAA4B"}
|
package/package.json
CHANGED
|
@@ -2,15 +2,20 @@ import CustomElement from '../../framework/custom-element.decorator';
|
|
|
2
2
|
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
3
3
|
import { CustomElementEventArgs } from '../../framework/CustomEvents';
|
|
4
4
|
|
|
5
|
+
declare const window: {
|
|
6
|
+
ApplePaySetupFeature: any;
|
|
7
|
+
safari: any;
|
|
8
|
+
};
|
|
9
|
+
|
|
5
10
|
@CustomElement({
|
|
6
11
|
selector: 'custom-format-date-element',
|
|
7
|
-
|
|
12
|
+
template: `
|
|
8
13
|
<div class="wrapper">
|
|
9
14
|
<input type="text" id="display-field" readonly />
|
|
10
15
|
<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
16
|
<input type="date" id="date-field" />
|
|
12
17
|
</div>`,
|
|
13
|
-
|
|
18
|
+
style: `
|
|
14
19
|
:host{
|
|
15
20
|
width:100%;
|
|
16
21
|
}
|
|
@@ -78,13 +83,14 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
78
83
|
|
|
79
84
|
initChildInputs() {
|
|
80
85
|
this.date = super.getChildInput('#date-field');
|
|
81
|
-
|
|
86
|
+
this.display = super.getChildInput('#display-field');
|
|
82
87
|
this.datepicker = super.getChildInput('#picker-trigger');
|
|
83
88
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
89
|
+
this.date.addEventListener('change', () => {
|
|
90
|
+
this.display.value = this.formatDate();
|
|
91
|
+
this.change(null);
|
|
92
|
+
this.date.blur();
|
|
93
|
+
});
|
|
88
94
|
|
|
89
95
|
this.datepicker.addEventListener('click', () => {
|
|
90
96
|
this.showDatePicker();
|
|
@@ -103,7 +109,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
103
109
|
if (this.min) {
|
|
104
110
|
this.date.setAttribute('min', this.min);
|
|
105
111
|
}
|
|
106
|
-
if (this.dateFormat){
|
|
112
|
+
if (this.dateFormat) {
|
|
107
113
|
this.display.placeholder = this.dateFormat;
|
|
108
114
|
}
|
|
109
115
|
}
|
|
@@ -130,7 +136,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
130
136
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
131
137
|
const day = date.getDate().toString().padStart(2, '0');
|
|
132
138
|
const monthName = date.toLocaleString('default', { month: 'long' });
|
|
133
|
-
|
|
139
|
+
|
|
134
140
|
const dateFormats = {
|
|
135
141
|
'ddmmyyyy': `${day}${month}${year}`,
|
|
136
142
|
'mmddyyyy': `${month}${day}${year}`,
|
|
@@ -149,10 +155,12 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
149
155
|
}
|
|
150
156
|
|
|
151
157
|
private showDatePicker(): void {
|
|
152
|
-
|
|
153
|
-
this.date.showPicker();
|
|
154
|
-
} catch (error) {
|
|
158
|
+
if ((!!window.ApplePaySetupFeature || !!window.safari)) {
|
|
155
159
|
this.date.click();
|
|
160
|
+
} else {
|
|
161
|
+
if (this.date.showPicker){
|
|
162
|
+
this.date.showPicker();
|
|
163
|
+
}
|
|
156
164
|
}
|
|
157
165
|
}
|
|
158
166
|
}
|