@luftborn/custom-elements 2.15.6 → 2.15.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 (57) hide show
  1. package/demo/index.js +40 -36
  2. package/demo/index.min.js +39 -35
  3. package/demo/index.min.js.map +1 -1
  4. package/dist/elements/CPRElement/CPRElement.js +2 -2
  5. package/dist/elements/CPRElement/CPRElement.js.map +1 -1
  6. package/dist/elements/CVRElement/CVRElement.js +2 -2
  7. package/dist/elements/CVRElement/CVRElement.js.map +1 -1
  8. package/dist/elements/CheckBoxElement/CheckBoxElement.js +5 -4
  9. package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
  10. package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +2 -2
  11. package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
  12. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js +2 -2
  13. package/dist/elements/CustomRegularExpression/CustomRegularExpressionElement.js.map +1 -1
  14. package/dist/elements/DateField/DateFieldElement.js +2 -2
  15. package/dist/elements/DateField/DateFieldElement.js.map +1 -1
  16. package/dist/elements/EmailField/EmailFieldElement.js +2 -2
  17. package/dist/elements/EmailField/EmailFieldElement.js.map +1 -1
  18. package/dist/elements/FileField/FileFieldElement.js +2 -2
  19. package/dist/elements/FileField/FileFieldElement.js.map +1 -1
  20. package/dist/elements/IdentificationElement/IdentificationElement.js +2 -2
  21. package/dist/elements/IdentificationElement/IdentificationElement.js.map +1 -1
  22. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js +2 -2
  23. package/dist/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.js.map +1 -1
  24. package/dist/elements/NumericField/NumericFieldElement.js +2 -2
  25. package/dist/elements/NumericField/NumericFieldElement.js.map +1 -1
  26. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js +4 -1
  27. package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.js.map +1 -1
  28. package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js +2 -2
  29. package/dist/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.js.map +1 -1
  30. package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js +2 -2
  31. package/dist/elements/SEPersonalNumberElement/SEPersonalNumberElement.js.map +1 -1
  32. package/dist/elements/TextAreaElement/TextAreaElement.js +2 -2
  33. package/dist/elements/TextAreaElement/TextAreaElement.js.map +1 -1
  34. package/dist/elements/TextField/TextFieldElement.js +2 -2
  35. package/dist/elements/TextField/TextFieldElement.js.map +1 -1
  36. package/dist/elements/TypeAhead/TypeAheadElement.js +1 -1
  37. package/dist/framework/CustomInputElement.js +1 -1
  38. package/dist/framework/CustomInputElement.js.map +1 -1
  39. package/package.json +1 -1
  40. package/src/elements/CPRElement/CPRElement.ts +2 -2
  41. package/src/elements/CVRElement/CVRElement.ts +2 -2
  42. package/src/elements/CheckBoxElement/CheckBoxElement.ts +5 -4
  43. package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +2 -2
  44. package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +2 -2
  45. package/src/elements/DateField/DateFieldElement.ts +2 -2
  46. package/src/elements/EmailField/EmailFieldElement.ts +2 -2
  47. package/src/elements/FileField/FileFieldElement.ts +2 -2
  48. package/src/elements/IdentificationElement/IdentificationElement.ts +2 -2
  49. package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts +2 -2
  50. package/src/elements/NumericField/NumericFieldElement.ts +2 -2
  51. package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts +13 -10
  52. package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts +2 -2
  53. package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts +2 -2
  54. package/src/elements/TextAreaElement/TextAreaElement.ts +2 -2
  55. package/src/elements/TextField/TextFieldElement.ts +2 -2
  56. package/src/elements/TypeAhead/TypeAheadElement.ts +1 -1
  57. package/src/framework/CustomInputElement.ts +1 -1
package/demo/index.min.js CHANGED
@@ -3857,7 +3857,7 @@ var CPRElement = /** @class */ (function (_super) {
3857
3857
  _super.prototype.addLabel.call(this, this.text);
3858
3858
  };
3859
3859
  CPRElement.prototype.initChildInputs = function () {
3860
- this.text = _super.prototype.getChildInput.call(this, '#cpr-field');
3860
+ this.text = _super.prototype.getChildInput.call(this, '.cpr-field');
3861
3861
  this.text.addEventListener('change', this.change.bind(this));
3862
3862
  if (this.required) {
3863
3863
  this.text.setAttribute('required', '');
@@ -3881,7 +3881,7 @@ var CPRElement = /** @class */ (function (_super) {
3881
3881
  CPRElement = __decorate([
3882
3882
  (0, custom_element_decorator_1.default)({
3883
3883
  selector: 'cpr-element',
3884
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='cpr-field' placeholder='DDMMYY-SSSS'/>\n\t\t\t</div>\n\t\t</div>",
3884
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='cpr-field' id='cpr-field' placeholder='DDMMYY-SSSS'/>\n\t\t\t</div>\n\t\t</div>",
3885
3885
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
3886
3886
  useShadow: true,
3887
3887
  })
@@ -3948,7 +3948,7 @@ var CVRElement = /** @class */ (function (_super) {
3948
3948
  _super.prototype.addLabel.call(this, this.text);
3949
3949
  };
3950
3950
  CVRElement.prototype.initChildInputs = function () {
3951
- this.text = _super.prototype.getChildInput.call(this, '#cvr-field');
3951
+ this.text = _super.prototype.getChildInput.call(this, '.cvr-field');
3952
3952
  this.text.addEventListener('change', this.change.bind(this));
3953
3953
  if (this.required) {
3954
3954
  this.text.setAttribute('required', '');
@@ -3972,7 +3972,7 @@ var CVRElement = /** @class */ (function (_super) {
3972
3972
  CVRElement = __decorate([
3973
3973
  (0, custom_element_decorator_1.default)({
3974
3974
  selector: 'cvr-element',
3975
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='cvr-field' placeholder='SSSSSSSS'/>\n\t\t\t</div>\n\t\t</div>",
3975
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='cvr-field' id='cvr-field' placeholder='SSSSSSSS'/>\n\t\t\t</div>\n\t\t</div>",
3976
3976
  style: "\n\t :host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\t\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
3977
3977
  useShadow: true,
3978
3978
  })
@@ -4059,11 +4059,12 @@ var CheckBoxElement = /** @class */ (function (_super) {
4059
4059
  fieldset = document.createElement('fieldset');
4060
4060
  wrapper.appendChild(fieldset);
4061
4061
  }
4062
- if (fieldset.children.length === 0) {
4063
- this.options.forEach(function (element, index) {
4062
+ this.options.forEach(function (element, index) {
4063
+ var existingCheckbox = fieldset.querySelector("input[value='" + element + "']");
4064
+ if (!existingCheckbox) {
4064
4065
  fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
4065
- });
4066
- }
4066
+ }
4067
+ });
4067
4068
  };
4068
4069
  CheckBoxElement.prototype.addLegend = function () {
4069
4070
  var fieldset = this.shadowRoot.querySelector('fieldset');
@@ -4991,7 +4992,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
4991
4992
  };
4992
4993
  CustomFormatDateFieldElement.prototype.initChildInputs = function () {
4993
4994
  var _a;
4994
- this.date = _super.prototype.getChildInput.call(this, '#date-field');
4995
+ this.date = _super.prototype.getChildInput.call(this, '.date-field');
4995
4996
  if (!this.date) {
4996
4997
  return;
4997
4998
  }
@@ -5053,7 +5054,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
5053
5054
  CustomFormatDateFieldElement = __decorate([
5054
5055
  (0, custom_element_decorator_1.default)({
5055
5056
  selector: 'custom-format-date-element',
5056
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id=\"date-field\">\n\t\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\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\t</button>\n\t\t\t</div>\n\t\t</div>",
5057
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id=\"date-field\" class=\"date-field\" />\n\t\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\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\t</button>\n\t\t\t</div>\n\t\t</div>",
5057
5058
  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: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\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\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5058
5059
  useShadow: true,
5059
5060
  })
@@ -5123,7 +5124,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
5123
5124
  _super.prototype.addLabel.call(this, this.text);
5124
5125
  };
5125
5126
  CustomRegularExpressionElement.prototype.initChildInputs = function () {
5126
- this.text = _super.prototype.getChildInput.call(this, '#regex-field');
5127
+ this.text = _super.prototype.getChildInput.call(this, '.regex-field');
5127
5128
  this.text.addEventListener('change', this.change.bind(this));
5128
5129
  if (this.required) {
5129
5130
  this.text.setAttribute('required', '');
@@ -5150,7 +5151,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
5150
5151
  CustomRegularExpressionElement = __decorate([
5151
5152
  (0, custom_element_decorator_1.default)({
5152
5153
  selector: 'regex-element',
5153
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='regex-field'/>\n\t\t\t</div>\n\t\t</div>",
5154
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='regex-field' class='regex-field' />\n\t\t\t</div>\n\t\t</div>",
5154
5155
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5155
5156
  useShadow: true,
5156
5157
  })
@@ -5214,7 +5215,7 @@ var DateFieldElement = /** @class */ (function (_super) {
5214
5215
  _super.prototype.addLabel.call(this, this.date);
5215
5216
  };
5216
5217
  DateFieldElement.prototype.initChildInputs = function () {
5217
- this.date = _super.prototype.getChildInput.call(this, '#date-field');
5218
+ this.date = _super.prototype.getChildInput.call(this, '.date-field');
5218
5219
  this.date.addEventListener('change', this.change.bind(this));
5219
5220
  if (this.required) {
5220
5221
  this.date.setAttribute('required', '');
@@ -5244,7 +5245,7 @@ var DateFieldElement = /** @class */ (function (_super) {
5244
5245
  DateFieldElement = __decorate([
5245
5246
  (0, custom_element_decorator_1.default)({
5246
5247
  selector: 'date-element',
5247
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"date\" id='date-field'/>\n\t\t\t</div>\n\t\t</div>",
5248
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"date\" class='date-field' id='date-field'/>\n\t\t\t</div>\n\t\t</div>",
5248
5249
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5249
5250
  useShadow: true,
5250
5251
  })
@@ -5470,7 +5471,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
5470
5471
  _super.prototype.addLabel.call(this, this.email);
5471
5472
  };
5472
5473
  EmailFieldElement.prototype.initChildInputs = function () {
5473
- this.email = _super.prototype.getChildInput.call(this, '#email-field');
5474
+ this.email = _super.prototype.getChildInput.call(this, '.email-field');
5474
5475
  this.email.addEventListener('change', this.change.bind(this));
5475
5476
  if (this.required) {
5476
5477
  this.email.setAttribute('required', '');
@@ -5497,7 +5498,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
5497
5498
  EmailFieldElement = __decorate([
5498
5499
  (0, custom_element_decorator_1.default)({
5499
5500
  selector: 'email-element',
5500
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='email-field'/>\n\t\t\t</div>\n\t\t</div>",
5501
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='email-field' id='email-field'/>\n\t\t\t</div>\n\t\t</div>",
5501
5502
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5502
5503
  useShadow: true,
5503
5504
  })
@@ -5609,7 +5610,7 @@ var FileFieldElement = /** @class */ (function (_super) {
5609
5610
  });
5610
5611
  };
5611
5612
  FileFieldElement.prototype.initChildInputs = function () {
5612
- this.file = _super.prototype.getChildInput.call(this, '#file-field');
5613
+ this.file = _super.prototype.getChildInput.call(this, '.file-field');
5613
5614
  this.file.addEventListener('change', this.change.bind(this));
5614
5615
  this.file.addEventListener('input', this.processImageFiles.bind(this));
5615
5616
  if (this.required) {
@@ -5830,7 +5831,7 @@ var FileFieldElement = /** @class */ (function (_super) {
5830
5831
  FileFieldElement = __decorate([
5831
5832
  (0, custom_element_decorator_1.default)({
5832
5833
  selector: 'file-element',
5833
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"file\" id='file-field' accept=\"image/*,application/pdf\"/>\n\t\t\t</div>\n\t\t</div>",
5834
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"file\" class='file-field' id='file-field' accept=\"image/*,application/pdf\"/>\n\t\t\t</div>\n\t\t</div>",
5834
5835
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n input::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n .field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5835
5836
  useShadow: true,
5836
5837
  })
@@ -5905,7 +5906,7 @@ var IdentificationElement = /** @class */ (function (_super) {
5905
5906
  _super.prototype.addLabel.call(this, this.text);
5906
5907
  };
5907
5908
  IdentificationElement.prototype.initChildInputs = function () {
5908
- this.text = _super.prototype.getChildInput.call(this, '#id-field');
5909
+ this.text = _super.prototype.getChildInput.call(this, '.id-field');
5909
5910
  this.typeSelector = _super.prototype.getChildInput.call(this, '#id-type');
5910
5911
  this.text.addEventListener('change', this.change.bind(this));
5911
5912
  this.typeSelector.addEventListener('change', this.change.bind(this));
@@ -5930,7 +5931,7 @@ var IdentificationElement = /** @class */ (function (_super) {
5930
5931
  IdentificationElement = __decorate([
5931
5932
  (0, custom_element_decorator_1.default)({
5932
5933
  selector: 'id-element',
5933
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n <select id='id-type'>\n <option value='cvr'>Danish CVR</option>\n <option value='cpr'>Danish CPR</option>\n <option value='swe'>Sweden Bank Id</option>\n <option value='nor'>Norway Bank Id</option>\n </select>\n\t\t\t\t<input type=\"text\" id='id-field' placeholder=''/>\n\t\t\t</div>\n\t\t</div>",
5934
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n <select id='id-type'>\n <option value='cvr'>Danish CVR</option>\n <option value='cpr'>Danish CPR</option>\n <option value='swe'>Sweden Bank Id</option>\n <option value='nor'>Norway Bank Id</option>\n </select>\n\t\t\t\t<input type=\"text\" class='id-field' id='id-field' placeholder=''/>\n\t\t\t</div>\n\t\t</div>",
5934
5935
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \tinput, select{\n box-sizing: border-box;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n margin: 0.125rem;\n resize: none;\n \t}\n \tinput{\n width: 75% !important;\n \t}\n \tselect{\n width: 25% !important;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
5935
5936
  useShadow: true,
5936
5937
  })
@@ -6033,7 +6034,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
6033
6034
  IntPhoneFieldElement.prototype.setIntlTelInput = function () {
6034
6035
  var _this = this;
6035
6036
  var _a, _b, _c;
6036
- this.phone = _super.prototype.getChildInput.call(this, '#phone-field');
6037
+ this.phone = _super.prototype.getChildInput.call(this, '.phone-field');
6037
6038
  var geoIpLookup = function (success, failure) {
6038
6039
  return new MakeRequest_1.default('https://ipinfo.io/json?token=8226138217a68a', 'get', { 'content-type': 'application/json' })
6039
6040
  .send()
@@ -6082,7 +6083,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
6082
6083
  IntPhoneFieldElement = __decorate([
6083
6084
  (0, custom_element_decorator_1.default)({
6084
6085
  selector: 'int-phone-element',
6085
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/css/intlTelInput.css\" >\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"tel\" id=\"phone-field\" />\n\t\t\t</div>\n\t\t</div>",
6086
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/css/intlTelInput.css\" >\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"tel\" id=\"phone-field\" class=\"phone-field\" />\n\t\t\t</div>\n\t\t</div>",
6086
6087
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \t.iti {\n \twidth: 100% !important;\n \t}\n \tinput{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t\t@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n\t\t\t.iti__flag {\n\t\t\tbackground-image: url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/img/flags@2x.png'), url(" + (0, Flags2x_1.default)() + ");\n\t\t\t}\n\t\t}\n\t",
6087
6088
  useShadow: true,
6088
6089
  })
@@ -6149,7 +6150,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
6149
6150
  _super.prototype.addLabel.call(this, this.number);
6150
6151
  };
6151
6152
  NumericFieldElement.prototype.initChildInputs = function () {
6152
- this.number = _super.prototype.getChildInput.call(this, '#numeric-field');
6153
+ this.number = _super.prototype.getChildInput.call(this, '.numeric-field');
6153
6154
  this.number.addEventListener('change', this.change.bind(this));
6154
6155
  if (this.required) {
6155
6156
  this.number.setAttribute('required', '');
@@ -6185,7 +6186,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
6185
6186
  NumericFieldElement = __decorate([
6186
6187
  (0, custom_element_decorator_1.default)({
6187
6188
  selector: 'numeric-element',
6188
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"number\" id=\"numeric-field\" step=\"any\" />\n\t\t\t</div>\n\t\t</div>",
6189
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"number\" class=\"numeric-field\" id=\"numeric-field\" step=\"any\" />\n\t\t\t</div>\n\t\t</div>",
6189
6190
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n\t\tinput{\n box-sizing: border-box;\n width: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n resize: none;\n \t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
6190
6191
  useShadow: true,
6191
6192
  })
@@ -6280,7 +6281,10 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
6280
6281
  }
6281
6282
  if (fieldset.children.length === 0) {
6282
6283
  this.options.forEach(function (element, index) {
6283
- fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
6284
+ var existingRadio = fieldset.querySelector("input[value='" + element + "']");
6285
+ if (!existingRadio) {
6286
+ fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
6287
+ }
6284
6288
  });
6285
6289
  }
6286
6290
  };
@@ -6522,7 +6526,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
6522
6526
  _super.prototype.addLabel.call(this, this.text);
6523
6527
  };
6524
6528
  SECompanyRegistrationElement.prototype.initChildInputs = function () {
6525
- this.text = _super.prototype.getChildInput.call(this, '#se-company-registration-field');
6529
+ this.text = _super.prototype.getChildInput.call(this, '.se-company-registration-field');
6526
6530
  this.text.addEventListener('change', this.change.bind(this));
6527
6531
  if (this.required) {
6528
6532
  this.text.setAttribute('required', '');
@@ -6546,7 +6550,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
6546
6550
  SECompanyRegistrationElement = __decorate([
6547
6551
  (0, custom_element_decorator_1.default)({
6548
6552
  selector: 'se-company-registration-element',
6549
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>\n\t\t\t</div>\t\n </div>",
6553
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='se-company-registration-field' id='se-company-registration-field' placeholder='SSSSSSSSSS'/>\n\t\t\t</div>\t\n </div>",
6550
6554
  style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n }\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
6551
6555
  useShadow: true,
6552
6556
  })
@@ -6613,7 +6617,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
6613
6617
  _super.prototype.addLabel.call(this, this.text);
6614
6618
  };
6615
6619
  SEPersonalNumberElement.prototype.initChildInputs = function () {
6616
- this.text = _super.prototype.getChildInput.call(this, '#se-personal-number-field');
6620
+ this.text = _super.prototype.getChildInput.call(this, '.se-personal-number-field');
6617
6621
  this.text.addEventListener('change', this.change.bind(this));
6618
6622
  if (this.required) {
6619
6623
  this.text.setAttribute('required', '');
@@ -6637,7 +6641,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
6637
6641
  SEPersonalNumberElement = __decorate([
6638
6642
  (0, custom_element_decorator_1.default)({
6639
6643
  selector: 'se-personal-number-element',
6640
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>\n\t\t\t</div>\n </div>",
6644
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='se-personal-number-field' id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>\n\t\t\t</div>\n </div>",
6641
6645
  style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n }\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
6642
6646
  useShadow: true,
6643
6647
  })
@@ -6701,7 +6705,7 @@ var TextAreaElement = /** @class */ (function (_super) {
6701
6705
  _super.prototype.addLabel.call(this, this.text);
6702
6706
  };
6703
6707
  TextAreaElement.prototype.initChildInputs = function () {
6704
- this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
6708
+ this.text = _super.prototype.getChildInput.call(this, '.text-area-field');
6705
6709
  this.text.addEventListener('change', this.change.bind(this));
6706
6710
  if (this.required) {
6707
6711
  this.text.setAttribute('required', '');
@@ -6728,7 +6732,7 @@ var TextAreaElement = /** @class */ (function (_super) {
6728
6732
  TextAreaElement = __decorate([
6729
6733
  (0, custom_element_decorator_1.default)({
6730
6734
  selector: 'text-area-element',
6731
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<textarea rows=5 id='text-area-field'></textarea>\n\t\t\t</div>\n\t\t</div>",
6735
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<textarea rows=5 class='text-area-field' id='text-area-field'></textarea>\n\t\t\t</div>\n\t\t</div>",
6732
6736
  style: "\n \t:host{\n width:100%;\n \t}\n \t.wrapper{\n display:flex;\n \t}\n \ttextarea{\n box-sizing: border-box;\n width: 100% !important;\n border: .1rem solid #5A616D;\n border-radius: .25rem;\n padding: 0.125rem 0.25rem;\n margin: 0.0625rem 0;\n resize: none;\n \t}\n\t\ttextarea::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
6733
6737
  useShadow: true,
6734
6738
  })
@@ -6792,7 +6796,7 @@ var TextFieldElement = /** @class */ (function (_super) {
6792
6796
  _super.prototype.addLabel.call(this, this.text);
6793
6797
  };
6794
6798
  TextFieldElement.prototype.initChildInputs = function () {
6795
- this.text = _super.prototype.getChildInput.call(this, '#text-field');
6799
+ this.text = _super.prototype.getChildInput.call(this, '.text-field');
6796
6800
  this.text.addEventListener('change', this.change.bind(this));
6797
6801
  if (this.required) {
6798
6802
  this.text.setAttribute('required', '');
@@ -6819,7 +6823,7 @@ var TextFieldElement = /** @class */ (function (_super) {
6819
6823
  TextFieldElement = __decorate([
6820
6824
  (0, custom_element_decorator_1.default)({
6821
6825
  selector: 'text-element',
6822
- template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field' />\n\t\t\t</div>\n\t\t</div>\n\t",
6826
+ template: "\n\t\t<div class=\"field-label\">\n\t\t</div>\n\t\t<div class=\"field-input\">\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" class='text-field' id='text-field' />\n\t\t\t</div>\n\t\t</div>\n\t",
6823
6827
  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}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #5A616D;\n\t\t\tborder-radius: .25rem;\n\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\tmargin: 0.0625rem 0;\n\t\t\tresize: none;\n\t\t}\n\t\tinput::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.field-label {\n\t\t\tcolor: #27282d;\n\t\t\tfont-size: .75rem;\n\t\t\tfont-weight: 600;\n\t\t\tword-wrap: break-word;\n\t\t}\n\t\t.field-input {\n\t\t\tfont-size: 0.813rem;\n\t\t\tmin-height: 1.438rem;\n\t\t}\n\t",
6824
6828
  useShadow: true,
6825
6829
  })
@@ -6912,7 +6916,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
6912
6916
  };
6913
6917
  TypeAheadElement.prototype.initChildInputs = function () {
6914
6918
  var _this = this;
6915
- this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
6919
+ this.textInputElement = _super.prototype.getChildInput.call(this, '.text-input');
6916
6920
  this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
6917
6921
  this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
6918
6922
  this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
@@ -7382,7 +7386,7 @@ var CustomInputElement = /** @class */ (function (_super) {
7382
7386
  }
7383
7387
  if (this.label) {
7384
7388
  var randomId = Math.random().toString(36).substring(2, 15);
7385
- inputField.id = "text-field-" + randomId;
7389
+ inputField.id = inputField.id + "-" + randomId;
7386
7390
  var newLabel = document.createElement('label');
7387
7391
  newLabel.setAttribute('for', inputField.id);
7388
7392
  newLabel.classList.add('field-label');