@luftborn/custom-elements 2.5.6 → 2.5.7
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 +15 -6
- package/demo/index.min.js +14 -5
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.d.ts +1 -0
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +14 -5
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +15 -7
|
@@ -59,10 +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.
|
|
63
|
-
setTimeout(function () {
|
|
64
|
-
_this.date.hidden = false;
|
|
65
|
-
}, 0);
|
|
62
|
+
_this.closeDatePicker();
|
|
66
63
|
});
|
|
67
64
|
this.datepicker.addEventListener('click', function () {
|
|
68
65
|
_this.showDatePicker();
|
|
@@ -70,6 +67,11 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
70
67
|
this.display.addEventListener('click', function () {
|
|
71
68
|
_this.showDatePicker();
|
|
72
69
|
});
|
|
70
|
+
document.addEventListener('click', function (event) {
|
|
71
|
+
if (!_this.contains(event.target)) {
|
|
72
|
+
_this.closeDatePicker();
|
|
73
|
+
}
|
|
74
|
+
});
|
|
73
75
|
if (this.required) {
|
|
74
76
|
this.date.setAttribute('required', '');
|
|
75
77
|
}
|
|
@@ -127,11 +129,18 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
127
129
|
}
|
|
128
130
|
}
|
|
129
131
|
};
|
|
132
|
+
CustomFormatDateFieldElement.prototype.closeDatePicker = function () {
|
|
133
|
+
var _this = this;
|
|
134
|
+
this.date.hidden = true;
|
|
135
|
+
setTimeout(function () {
|
|
136
|
+
_this.date.hidden = false;
|
|
137
|
+
}, 0);
|
|
138
|
+
};
|
|
130
139
|
CustomFormatDateFieldElement = __decorate([
|
|
131
140
|
(0, custom_element_decorator_1.default)({
|
|
132
141
|
selector: 'custom-format-date-element',
|
|
133
142
|
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
|
|
143
|
+
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
144
|
useShadow: true,
|
|
136
145
|
})
|
|
137
146
|
], CustomFormatDateFieldElement);
|
|
@@ -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;AAqDtE;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,iBAqCC;QApCA,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,eAAe,EAAE,CAAC;QACxB,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,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAC,KAAK;YACxC,IAAI,CAAC,KAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBACzC,KAAI,CAAC,eAAe,EAAE,CAAC;aACvB;QACF,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;IAEO,sDAAe,GAAvB;QAAA,iBAKC;QAJA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACxB,UAAU,CAAC;YACV,KAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAC1B,CAAC,EAAE,CAAC,CAAC,CAAC;IACP,CAAC;IAxHW,4BAA4B;QA9CxC,IAAA,kCAAa,EAAC;YACd,QAAQ,EAAE,4BAA4B;YACtC,QAAQ,EAAE,qpBAKF;YACR,KAAK,EAAE,guBAmCN;YACD,SAAS,EAAE,IAAI;SACf,CAAC;OACW,4BAA4B,CAyHxC;IAAD,mCAAC;CAAA,AAzHD,CAAkD,uCAAkB,GAyHnE;AAzHY,oEAA4B"}
|
package/package.json
CHANGED
|
@@ -50,9 +50,7 @@ declare const window: {
|
|
|
50
50
|
right: 2px;
|
|
51
51
|
top: 15%;
|
|
52
52
|
}
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
`,
|
|
53
|
+
`,
|
|
56
54
|
useShadow: true,
|
|
57
55
|
})
|
|
58
56
|
export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
@@ -89,10 +87,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
89
87
|
this.date.addEventListener('change', () => {
|
|
90
88
|
this.display.value = this.formatDate();
|
|
91
89
|
this.change(null);
|
|
92
|
-
this.
|
|
93
|
-
setTimeout(() => {
|
|
94
|
-
this.date.hidden = false;
|
|
95
|
-
}, 0);
|
|
90
|
+
this.closeDatePicker();
|
|
96
91
|
});
|
|
97
92
|
|
|
98
93
|
this.datepicker.addEventListener('click', () => {
|
|
@@ -103,6 +98,12 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
103
98
|
this.showDatePicker();
|
|
104
99
|
});
|
|
105
100
|
|
|
101
|
+
document.addEventListener('click', (event) => {
|
|
102
|
+
if (!this.contains(event.target as Node)) {
|
|
103
|
+
this.closeDatePicker();
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
|
|
106
107
|
if (this.required) {
|
|
107
108
|
this.date.setAttribute('required', '');
|
|
108
109
|
}
|
|
@@ -166,4 +167,11 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
166
167
|
}
|
|
167
168
|
}
|
|
168
169
|
}
|
|
170
|
+
|
|
171
|
+
private closeDatePicker(): void {
|
|
172
|
+
this.date.hidden = true;
|
|
173
|
+
setTimeout(() => {
|
|
174
|
+
this.date.hidden = false;
|
|
175
|
+
}, 0);
|
|
176
|
+
}
|
|
169
177
|
}
|