@luftborn/custom-elements 2.15.5 → 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 +43 -35
  2. package/demo/index.min.js +42 -34
  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 +6 -3
  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 +6 -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 +20 -17
  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 +18 -13
  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
  })
@@ -4058,10 +4058,13 @@ var CheckBoxElement = /** @class */ (function (_super) {
4058
4058
  if (!fieldset) {
4059
4059
  fieldset = document.createElement('fieldset');
4060
4060
  wrapper.appendChild(fieldset);
4061
- this.options.forEach(function (element, index) {
4062
- fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
4063
- });
4064
4061
  }
4062
+ this.options.forEach(function (element, index) {
4063
+ var existingCheckbox = fieldset.querySelector("input[value='" + element + "']");
4064
+ if (!existingCheckbox) {
4065
+ fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
4066
+ }
4067
+ });
4065
4068
  };
4066
4069
  CheckBoxElement.prototype.addLegend = function () {
4067
4070
  var fieldset = this.shadowRoot.querySelector('fieldset');
@@ -4989,7 +4992,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
4989
4992
  };
4990
4993
  CustomFormatDateFieldElement.prototype.initChildInputs = function () {
4991
4994
  var _a;
4992
- this.date = _super.prototype.getChildInput.call(this, '#date-field');
4995
+ this.date = _super.prototype.getChildInput.call(this, '.date-field');
4993
4996
  if (!this.date) {
4994
4997
  return;
4995
4998
  }
@@ -5051,7 +5054,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
5051
5054
  CustomFormatDateFieldElement = __decorate([
5052
5055
  (0, custom_element_decorator_1.default)({
5053
5056
  selector: 'custom-format-date-element',
5054
- 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>",
5055
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",
5056
5059
  useShadow: true,
5057
5060
  })
@@ -5121,7 +5124,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
5121
5124
  _super.prototype.addLabel.call(this, this.text);
5122
5125
  };
5123
5126
  CustomRegularExpressionElement.prototype.initChildInputs = function () {
5124
- this.text = _super.prototype.getChildInput.call(this, '#regex-field');
5127
+ this.text = _super.prototype.getChildInput.call(this, '.regex-field');
5125
5128
  this.text.addEventListener('change', this.change.bind(this));
5126
5129
  if (this.required) {
5127
5130
  this.text.setAttribute('required', '');
@@ -5148,7 +5151,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
5148
5151
  CustomRegularExpressionElement = __decorate([
5149
5152
  (0, custom_element_decorator_1.default)({
5150
5153
  selector: 'regex-element',
5151
- 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>",
5152
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",
5153
5156
  useShadow: true,
5154
5157
  })
@@ -5212,7 +5215,7 @@ var DateFieldElement = /** @class */ (function (_super) {
5212
5215
  _super.prototype.addLabel.call(this, this.date);
5213
5216
  };
5214
5217
  DateFieldElement.prototype.initChildInputs = function () {
5215
- this.date = _super.prototype.getChildInput.call(this, '#date-field');
5218
+ this.date = _super.prototype.getChildInput.call(this, '.date-field');
5216
5219
  this.date.addEventListener('change', this.change.bind(this));
5217
5220
  if (this.required) {
5218
5221
  this.date.setAttribute('required', '');
@@ -5242,7 +5245,7 @@ var DateFieldElement = /** @class */ (function (_super) {
5242
5245
  DateFieldElement = __decorate([
5243
5246
  (0, custom_element_decorator_1.default)({
5244
5247
  selector: 'date-element',
5245
- 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>",
5246
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",
5247
5250
  useShadow: true,
5248
5251
  })
@@ -5468,7 +5471,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
5468
5471
  _super.prototype.addLabel.call(this, this.email);
5469
5472
  };
5470
5473
  EmailFieldElement.prototype.initChildInputs = function () {
5471
- this.email = _super.prototype.getChildInput.call(this, '#email-field');
5474
+ this.email = _super.prototype.getChildInput.call(this, '.email-field');
5472
5475
  this.email.addEventListener('change', this.change.bind(this));
5473
5476
  if (this.required) {
5474
5477
  this.email.setAttribute('required', '');
@@ -5495,7 +5498,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
5495
5498
  EmailFieldElement = __decorate([
5496
5499
  (0, custom_element_decorator_1.default)({
5497
5500
  selector: 'email-element',
5498
- 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>",
5499
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",
5500
5503
  useShadow: true,
5501
5504
  })
@@ -5607,7 +5610,7 @@ var FileFieldElement = /** @class */ (function (_super) {
5607
5610
  });
5608
5611
  };
5609
5612
  FileFieldElement.prototype.initChildInputs = function () {
5610
- this.file = _super.prototype.getChildInput.call(this, '#file-field');
5613
+ this.file = _super.prototype.getChildInput.call(this, '.file-field');
5611
5614
  this.file.addEventListener('change', this.change.bind(this));
5612
5615
  this.file.addEventListener('input', this.processImageFiles.bind(this));
5613
5616
  if (this.required) {
@@ -5828,7 +5831,7 @@ var FileFieldElement = /** @class */ (function (_super) {
5828
5831
  FileFieldElement = __decorate([
5829
5832
  (0, custom_element_decorator_1.default)({
5830
5833
  selector: 'file-element',
5831
- 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>",
5832
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",
5833
5836
  useShadow: true,
5834
5837
  })
@@ -5903,7 +5906,7 @@ var IdentificationElement = /** @class */ (function (_super) {
5903
5906
  _super.prototype.addLabel.call(this, this.text);
5904
5907
  };
5905
5908
  IdentificationElement.prototype.initChildInputs = function () {
5906
- this.text = _super.prototype.getChildInput.call(this, '#id-field');
5909
+ this.text = _super.prototype.getChildInput.call(this, '.id-field');
5907
5910
  this.typeSelector = _super.prototype.getChildInput.call(this, '#id-type');
5908
5911
  this.text.addEventListener('change', this.change.bind(this));
5909
5912
  this.typeSelector.addEventListener('change', this.change.bind(this));
@@ -5928,7 +5931,7 @@ var IdentificationElement = /** @class */ (function (_super) {
5928
5931
  IdentificationElement = __decorate([
5929
5932
  (0, custom_element_decorator_1.default)({
5930
5933
  selector: 'id-element',
5931
- 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>",
5932
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",
5933
5936
  useShadow: true,
5934
5937
  })
@@ -6031,7 +6034,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
6031
6034
  IntPhoneFieldElement.prototype.setIntlTelInput = function () {
6032
6035
  var _this = this;
6033
6036
  var _a, _b, _c;
6034
- this.phone = _super.prototype.getChildInput.call(this, '#phone-field');
6037
+ this.phone = _super.prototype.getChildInput.call(this, '.phone-field');
6035
6038
  var geoIpLookup = function (success, failure) {
6036
6039
  return new MakeRequest_1.default('https://ipinfo.io/json?token=8226138217a68a', 'get', { 'content-type': 'application/json' })
6037
6040
  .send()
@@ -6080,7 +6083,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
6080
6083
  IntPhoneFieldElement = __decorate([
6081
6084
  (0, custom_element_decorator_1.default)({
6082
6085
  selector: 'int-phone-element',
6083
- 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>",
6084
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",
6085
6088
  useShadow: true,
6086
6089
  })
@@ -6147,7 +6150,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
6147
6150
  _super.prototype.addLabel.call(this, this.number);
6148
6151
  };
6149
6152
  NumericFieldElement.prototype.initChildInputs = function () {
6150
- this.number = _super.prototype.getChildInput.call(this, '#numeric-field');
6153
+ this.number = _super.prototype.getChildInput.call(this, '.numeric-field');
6151
6154
  this.number.addEventListener('change', this.change.bind(this));
6152
6155
  if (this.required) {
6153
6156
  this.number.setAttribute('required', '');
@@ -6183,7 +6186,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
6183
6186
  NumericFieldElement = __decorate([
6184
6187
  (0, custom_element_decorator_1.default)({
6185
6188
  selector: 'numeric-element',
6186
- 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>",
6187
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",
6188
6191
  useShadow: true,
6189
6192
  })
@@ -6275,8 +6278,13 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
6275
6278
  if (!fieldset) {
6276
6279
  fieldset = document.createElement('fieldset');
6277
6280
  wrapper.appendChild(fieldset);
6281
+ }
6282
+ if (fieldset.children.length === 0) {
6278
6283
  this.options.forEach(function (element, index) {
6279
- 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
+ }
6280
6288
  });
6281
6289
  }
6282
6290
  };
@@ -6518,7 +6526,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
6518
6526
  _super.prototype.addLabel.call(this, this.text);
6519
6527
  };
6520
6528
  SECompanyRegistrationElement.prototype.initChildInputs = function () {
6521
- this.text = _super.prototype.getChildInput.call(this, '#se-company-registration-field');
6529
+ this.text = _super.prototype.getChildInput.call(this, '.se-company-registration-field');
6522
6530
  this.text.addEventListener('change', this.change.bind(this));
6523
6531
  if (this.required) {
6524
6532
  this.text.setAttribute('required', '');
@@ -6542,7 +6550,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
6542
6550
  SECompanyRegistrationElement = __decorate([
6543
6551
  (0, custom_element_decorator_1.default)({
6544
6552
  selector: 'se-company-registration-element',
6545
- 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>",
6546
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",
6547
6555
  useShadow: true,
6548
6556
  })
@@ -6609,7 +6617,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
6609
6617
  _super.prototype.addLabel.call(this, this.text);
6610
6618
  };
6611
6619
  SEPersonalNumberElement.prototype.initChildInputs = function () {
6612
- this.text = _super.prototype.getChildInput.call(this, '#se-personal-number-field');
6620
+ this.text = _super.prototype.getChildInput.call(this, '.se-personal-number-field');
6613
6621
  this.text.addEventListener('change', this.change.bind(this));
6614
6622
  if (this.required) {
6615
6623
  this.text.setAttribute('required', '');
@@ -6633,7 +6641,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
6633
6641
  SEPersonalNumberElement = __decorate([
6634
6642
  (0, custom_element_decorator_1.default)({
6635
6643
  selector: 'se-personal-number-element',
6636
- 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>",
6637
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",
6638
6646
  useShadow: true,
6639
6647
  })
@@ -6697,7 +6705,7 @@ var TextAreaElement = /** @class */ (function (_super) {
6697
6705
  _super.prototype.addLabel.call(this, this.text);
6698
6706
  };
6699
6707
  TextAreaElement.prototype.initChildInputs = function () {
6700
- this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
6708
+ this.text = _super.prototype.getChildInput.call(this, '.text-area-field');
6701
6709
  this.text.addEventListener('change', this.change.bind(this));
6702
6710
  if (this.required) {
6703
6711
  this.text.setAttribute('required', '');
@@ -6724,7 +6732,7 @@ var TextAreaElement = /** @class */ (function (_super) {
6724
6732
  TextAreaElement = __decorate([
6725
6733
  (0, custom_element_decorator_1.default)({
6726
6734
  selector: 'text-area-element',
6727
- 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>",
6728
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",
6729
6737
  useShadow: true,
6730
6738
  })
@@ -6788,7 +6796,7 @@ var TextFieldElement = /** @class */ (function (_super) {
6788
6796
  _super.prototype.addLabel.call(this, this.text);
6789
6797
  };
6790
6798
  TextFieldElement.prototype.initChildInputs = function () {
6791
- this.text = _super.prototype.getChildInput.call(this, '#text-field');
6799
+ this.text = _super.prototype.getChildInput.call(this, '.text-field');
6792
6800
  this.text.addEventListener('change', this.change.bind(this));
6793
6801
  if (this.required) {
6794
6802
  this.text.setAttribute('required', '');
@@ -6815,7 +6823,7 @@ var TextFieldElement = /** @class */ (function (_super) {
6815
6823
  TextFieldElement = __decorate([
6816
6824
  (0, custom_element_decorator_1.default)({
6817
6825
  selector: 'text-element',
6818
- 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",
6819
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",
6820
6828
  useShadow: true,
6821
6829
  })
@@ -6908,7 +6916,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
6908
6916
  };
6909
6917
  TypeAheadElement.prototype.initChildInputs = function () {
6910
6918
  var _this = this;
6911
- this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
6919
+ this.textInputElement = _super.prototype.getChildInput.call(this, '.text-input');
6912
6920
  this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
6913
6921
  this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
6914
6922
  this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
@@ -7378,7 +7386,7 @@ var CustomInputElement = /** @class */ (function (_super) {
7378
7386
  }
7379
7387
  if (this.label) {
7380
7388
  var randomId = Math.random().toString(36).substring(2, 15);
7381
- inputField.id = "text-field-" + randomId;
7389
+ inputField.id = inputField.id + "-" + randomId;
7382
7390
  var newLabel = document.createElement('label');
7383
7391
  newLabel.setAttribute('for', inputField.id);
7384
7392
  newLabel.classList.add('field-label');