@luftborn/custom-elements 2.13.4 → 2.13.6
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 +20 -10
- package/demo/index.min.js +19 -9
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.d.ts +1 -0
- package/dist/elements/CheckBoxElement/CheckBoxElement.js +17 -7
- package/dist/elements/CheckBoxElement/CheckBoxElement.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 +29 -19
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +4 -2
- package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +2 -2
package/demo/index.min.js
CHANGED
|
@@ -4050,13 +4050,16 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4050
4050
|
var _this = this;
|
|
4051
4051
|
var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
|
|
4052
4052
|
var fieldset = wrapper.querySelector('fieldset');
|
|
4053
|
-
if (
|
|
4054
|
-
|
|
4055
|
-
|
|
4053
|
+
if (!fieldset) {
|
|
4054
|
+
fieldset = document.createElement('fieldset');
|
|
4055
|
+
wrapper.appendChild(fieldset);
|
|
4056
|
+
if (this.label) {
|
|
4057
|
+
fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
|
|
4058
|
+
}
|
|
4059
|
+
this.options.forEach(function (element, index) {
|
|
4060
|
+
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
|
|
4061
|
+
});
|
|
4056
4062
|
}
|
|
4057
|
-
this.options.forEach(function (element, index) {
|
|
4058
|
-
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
|
|
4059
|
-
});
|
|
4060
4063
|
};
|
|
4061
4064
|
// events
|
|
4062
4065
|
CheckBoxElement.prototype.change = function ($event) {
|
|
@@ -4067,10 +4070,17 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4067
4070
|
this.valid;
|
|
4068
4071
|
this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
|
|
4069
4072
|
};
|
|
4073
|
+
CheckBoxElement.prototype.disconnectedCallback = function () {
|
|
4074
|
+
var _this = this;
|
|
4075
|
+
this.checkbox.forEach(function (c) {
|
|
4076
|
+
return c.removeEventListener('change', _this.change.bind(_this));
|
|
4077
|
+
});
|
|
4078
|
+
this.checkbox = null;
|
|
4079
|
+
};
|
|
4070
4080
|
CheckBoxElement = __decorate([
|
|
4071
4081
|
(0, custom_element_decorator_1.default)({
|
|
4072
4082
|
selector: 'checkbox-element',
|
|
4073
|
-
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t
|
|
4083
|
+
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
|
|
4074
4084
|
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.125rem;\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
4085
|
useShadow: true,
|
|
4076
4086
|
})
|
|
@@ -5026,7 +5036,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5026
5036
|
(0, custom_element_decorator_1.default)({
|
|
5027
5037
|
selector: 'custom-format-date-element',
|
|
5028
5038
|
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>",
|
|
5029
|
-
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:
|
|
5039
|
+
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",
|
|
5030
5040
|
useShadow: true,
|
|
5031
5041
|
})
|
|
5032
5042
|
], CustomFormatDateFieldElement);
|
|
@@ -6255,7 +6265,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6255
6265
|
(0, custom_element_decorator_1.default)({
|
|
6256
6266
|
selector: 'radio-group-element',
|
|
6257
6267
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
|
|
6258
|
-
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.
|
|
6268
|
+
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",
|
|
6259
6269
|
useShadow: true,
|
|
6260
6270
|
})
|
|
6261
6271
|
], RadioButtonGroupElement);
|