@luftborn/custom-elements 2.13.3 → 2.13.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 +11 -6
- package/demo/index.min.js +10 -5
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +1 -0
- package/dist/elements/CheckBoxElement/CheckBoxElement.js +8 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js +0 -2
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +1 -1
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/CheckBoxElement/CheckBoxElement.ts +9 -1
- package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts +0 -2
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +4 -2
- package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +2 -2
package/demo/index.min.js
CHANGED
|
@@ -4067,11 +4067,18 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4067
4067
|
this.valid;
|
|
4068
4068
|
this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
|
|
4069
4069
|
};
|
|
4070
|
+
CheckBoxElement.prototype.disconnectedCallback = function () {
|
|
4071
|
+
var _this = this;
|
|
4072
|
+
this.checkbox.forEach(function (c) {
|
|
4073
|
+
return c.removeEventListener('change', _this.change.bind(_this));
|
|
4074
|
+
});
|
|
4075
|
+
this.checkbox = null;
|
|
4076
|
+
};
|
|
4070
4077
|
CheckBoxElement = __decorate([
|
|
4071
4078
|
(0, custom_element_decorator_1.default)({
|
|
4072
4079
|
selector: 'checkbox-element',
|
|
4073
4080
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
|
|
4074
|
-
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.
|
|
4081
|
+
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.2rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t",
|
|
4075
4082
|
useShadow: true,
|
|
4076
4083
|
})
|
|
4077
4084
|
], CheckBoxElement);
|
|
@@ -4433,8 +4440,6 @@ var CustomDatepicker = /** @class */ (function () {
|
|
|
4433
4440
|
};
|
|
4434
4441
|
CustomDatepicker.prototype.addEventListeners = function () {
|
|
4435
4442
|
var _this = this;
|
|
4436
|
-
this.input.addEventListener('click', function () { return _this.showPicker(true); });
|
|
4437
|
-
this.input.addEventListener('focus', function () { return _this.showPicker(true); });
|
|
4438
4443
|
this.input.addEventListener('change', function () {
|
|
4439
4444
|
_this.setDateUsingInputValue();
|
|
4440
4445
|
});
|
|
@@ -5028,7 +5033,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5028
5033
|
(0, custom_element_decorator_1.default)({
|
|
5029
5034
|
selector: 'custom-format-date-element',
|
|
5030
5035
|
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\">\n\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\t\t\t<svg class=\"svg-picker\" data-toggle 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</button>\n\t\t</div>",
|
|
5031
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\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: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-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: 0.625rem;\n\t\t}\n\t\t.svg-picker {\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\twidth:
|
|
5036
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\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: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-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: 0.625rem;\n\t\t}\n\t\t.svg-picker {\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\twidth: 1.5rem;\n\t\t\theight: 1.5rem;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t\tpadding: 0;\n\t\t}\n\t",
|
|
5032
5037
|
useShadow: true,
|
|
5033
5038
|
})
|
|
5034
5039
|
], CustomFormatDateFieldElement);
|
|
@@ -6257,7 +6262,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6257
6262
|
(0, custom_element_decorator_1.default)({
|
|
6258
6263
|
selector: 'radio-group-element',
|
|
6259
6264
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
|
|
6260
|
-
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.radio-button:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.
|
|
6265
|
+
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.radio-button:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.2rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0);\n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t",
|
|
6261
6266
|
useShadow: true,
|
|
6262
6267
|
})
|
|
6263
6268
|
], RadioButtonGroupElement);
|