@luftborn/custom-elements 2.15.6 → 2.15.8

package/demo/index.min.js

@@ -3857,7 +3857,7 @@ var CPRElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     CPRElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#cpr-field');
+        this.text = _super.prototype.getChildInput.call(this, '.cpr-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -3881,7 +3881,7 @@ var CPRElement = /** @class */ (function (_super) {
     CPRElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'cpr-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -3948,7 +3948,7 @@ var CVRElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     CVRElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#cvr-field');
+        this.text = _super.prototype.getChildInput.call(this, '.cvr-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -3972,7 +3972,7 @@ var CVRElement = /** @class */ (function (_super) {
     CVRElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'cvr-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -4059,7 +4059,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
         }
-        if (fieldset.children.length === 0) {
+        var optionsAlreadyAdded = fieldset.querySelectorAll('input[type="checkbox"]').length;
+        if (!optionsAlreadyAdded) {
             this.options.forEach(function (element, index) {
                 fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
             });
@@ -4991,7 +4992,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     };
     CustomFormatDateFieldElement.prototype.initChildInputs = function () {
         var _a;
-        this.date = _super.prototype.getChildInput.call(this, '#date-field');
+        this.date = _super.prototype.getChildInput.call(this, '.date-field');
         if (!this.date) {
             return;
         }
@@ -5053,7 +5054,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     CustomFormatDateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'custom-format-date-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -5123,7 +5124,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     CustomRegularExpressionElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#regex-field');
+        this.text = _super.prototype.getChildInput.call(this, '.regex-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -5150,7 +5151,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
     CustomRegularExpressionElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'regex-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -5214,7 +5215,7 @@ var DateFieldElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.date);
     };
     DateFieldElement.prototype.initChildInputs = function () {
-        this.date = _super.prototype.getChildInput.call(this, '#date-field');
+        this.date = _super.prototype.getChildInput.call(this, '.date-field');
         this.date.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.date.setAttribute('required', '');
@@ -5244,7 +5245,7 @@ var DateFieldElement = /** @class */ (function (_super) {
     DateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'date-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -5470,7 +5471,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.email);
     };
     EmailFieldElement.prototype.initChildInputs = function () {
-        this.email = _super.prototype.getChildInput.call(this, '#email-field');
+        this.email = _super.prototype.getChildInput.call(this, '.email-field');
         this.email.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.email.setAttribute('required', '');
@@ -5497,7 +5498,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
     EmailFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'email-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -5609,7 +5610,7 @@ var FileFieldElement = /** @class */ (function (_super) {
         });
     };
     FileFieldElement.prototype.initChildInputs = function () {
-        this.file = _super.prototype.getChildInput.call(this, '#file-field');
+        this.file = _super.prototype.getChildInput.call(this, '.file-field');
         this.file.addEventListener('change', this.change.bind(this));
         this.file.addEventListener('input', this.processImageFiles.bind(this));
         if (this.required) {
@@ -5830,7 +5831,7 @@ var FileFieldElement = /** @class */ (function (_super) {
     FileFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'file-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -5905,7 +5906,7 @@ var IdentificationElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     IdentificationElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#id-field');
+        this.text = _super.prototype.getChildInput.call(this, '.id-field');
         this.typeSelector = _super.prototype.getChildInput.call(this, '#id-type');
         this.text.addEventListener('change', this.change.bind(this));
         this.typeSelector.addEventListener('change', this.change.bind(this));
@@ -5930,7 +5931,7 @@ var IdentificationElement = /** @class */ (function (_super) {
     IdentificationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'id-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6033,7 +6034,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
     IntPhoneFieldElement.prototype.setIntlTelInput = function () {
         var _this = this;
         var _a, _b, _c;
-        this.phone = _super.prototype.getChildInput.call(this, '#phone-field');
+        this.phone = _super.prototype.getChildInput.call(this, '.phone-field');
         var geoIpLookup = function (success, failure) {
             return new MakeRequest_1.default('https://ipinfo.io/json?token=8226138217a68a', 'get', { 'content-type': 'application/json' })
                 .send()
@@ -6082,7 +6083,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
     IntPhoneFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'int-phone-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6149,7 +6150,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.number);
     };
     NumericFieldElement.prototype.initChildInputs = function () {
-        this.number = _super.prototype.getChildInput.call(this, '#numeric-field');
+        this.number = _super.prototype.getChildInput.call(this, '.numeric-field');
         this.number.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.number.setAttribute('required', '');
@@ -6185,7 +6186,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
     NumericFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'numeric-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6278,7 +6279,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
             fieldset = document.createElement('fieldset');
             wrapper.appendChild(fieldset);
         }
-        if (fieldset.children.length === 0) {
+        var optionsAlreadyAdded = fieldset.querySelectorAll('input[type="radio"]').length;
+        if (!optionsAlreadyAdded) {
             this.options.forEach(function (element, index) {
                 fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
             });
@@ -6522,7 +6524,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     SECompanyRegistrationElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#se-company-registration-field');
+        this.text = _super.prototype.getChildInput.call(this, '.se-company-registration-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -6546,7 +6548,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
     SECompanyRegistrationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'se-company-registration-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6613,7 +6615,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     SEPersonalNumberElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#se-personal-number-field');
+        this.text = _super.prototype.getChildInput.call(this, '.se-personal-number-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -6637,7 +6639,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
     SEPersonalNumberElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'se-personal-number-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6701,7 +6703,7 @@ var TextAreaElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     TextAreaElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
+        this.text = _super.prototype.getChildInput.call(this, '.text-area-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -6728,7 +6730,7 @@ var TextAreaElement = /** @class */ (function (_super) {
     TextAreaElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'text-area-element',
-            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>",
+            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>",
             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",
             useShadow: true,
         })
@@ -6792,7 +6794,7 @@ var TextFieldElement = /** @class */ (function (_super) {
         _super.prototype.addLabel.call(this, this.text);
     };
     TextFieldElement.prototype.initChildInputs = function () {
-        this.text = _super.prototype.getChildInput.call(this, '#text-field');
+        this.text = _super.prototype.getChildInput.call(this, '.text-field');
         this.text.addEventListener('change', this.change.bind(this));
         if (this.required) {
             this.text.setAttribute('required', '');
@@ -6819,7 +6821,7 @@ var TextFieldElement = /** @class */ (function (_super) {
     TextFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'text-element',
-            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",
+            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",
             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",
             useShadow: true,
         })
@@ -6912,7 +6914,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
     };
     TypeAheadElement.prototype.initChildInputs = function () {
         var _this = this;
-        this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
+        this.textInputElement = _super.prototype.getChildInput.call(this, '.text-input');
         this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
         this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
         this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
@@ -7382,14 +7384,17 @@ var CustomInputElement = /** @class */ (function (_super) {
         }
         if (this.label) {
             var randomId = Math.random().toString(36).substring(2, 15);
-            inputField.id = "text-field-" + randomId;
+            inputField.id = inputField.id + "-" + randomId;
             var newLabel = document.createElement('label');
             newLabel.setAttribute('for', inputField.id);
             newLabel.classList.add('field-label');
             newLabel.textContent = this.label + ": ";
-            var fieldLabel = this.shadowRoot.querySelector('.field-label');
-            if (fieldLabel) {
-                fieldLabel.appendChild(newLabel);
+            var fieldLabelDiv = this.shadowRoot.querySelector('.field-label');
+            if (fieldLabelDiv) {
+                var existingLabel = fieldLabelDiv.querySelector('label.field-label');
+                if (!existingLabel) {
+                    fieldLabelDiv.appendChild(newLabel);
+                }
             }
             if (this.required) {
                 newLabel.innerHTML += '<span style="color: #e00040">*</span>';