@luftborn/custom-elements 2.13.5 → 2.13.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.
Files changed (10) hide show
  1. package/demo/index.js +22 -15
  2. package/demo/index.min.js +21 -14
  3. package/demo/index.min.js.map +1 -1
  4. package/dist/elements/CheckBoxElement/CheckBoxElement.js +11 -8
  5. package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
  6. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +10 -6
  7. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/elements/CheckBoxElement/CheckBoxElement.ts +22 -20
  10. package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +22 -19
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 (this.label) {
4054
- // fieldset.setAttribute('aria-label', this.label);
4055
- fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
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) {
@@ -4077,8 +4080,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
4077
4080
  CheckBoxElement = __decorate([
4078
4081
  (0, custom_element_decorator_1.default)({
4079
4082
  selector: 'checkbox-element',
4080
- template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
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",
4083
+ template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
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",
4082
4085
  useShadow: true,
4083
4086
  })
4084
4087
  ], CheckBoxElement);
@@ -6242,12 +6245,16 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
6242
6245
  var _this = this;
6243
6246
  var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
6244
6247
  var fieldset = wrapper.querySelector('fieldset');
6245
- if (this.label) {
6246
- fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
6248
+ if (!fieldset) {
6249
+ fieldset = document.createElement('fieldset');
6250
+ wrapper.appendChild(fieldset);
6251
+ if (this.label) {
6252
+ fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
6253
+ }
6254
+ this.options.forEach(function (element, index) {
6255
+ fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
6256
+ });
6247
6257
  }
6248
- this.options.forEach(function (element, index) {
6249
- fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
6250
- });
6251
6258
  };
6252
6259
  // events
6253
6260
  RadioButtonGroupElement.prototype.change = function ($event) {
@@ -6261,7 +6268,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
6261
6268
  RadioButtonGroupElement = __decorate([
6262
6269
  (0, custom_element_decorator_1.default)({
6263
6270
  selector: 'radio-group-element',
6264
- template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
6271
+ template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
6265
6272
  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",
6266
6273
  useShadow: true,
6267
6274
  })