@luftborn/custom-elements 2.14.0 → 2.15.0

package/demo/index.min.js

@@ -3523,6 +3523,7 @@ var AddressElement = /** @class */ (function (_super) {
     });
     AddressElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.address);
     };
     AddressElement.prototype.componentDidMount = function () {
         var _this = this;
@@ -3655,8 +3656,8 @@ var AddressElement = /** @class */ (function (_super) {
     AddressElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'address-element',
-            template: "\n\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t<input class='address-part' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t<input class='address-part' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t</div>",
-            style: ".address-wrapper{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t}\n\t\t\tinput.address-part{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t\twidth:33% !important;\n\t\t\t}\n\t\t",
+            template: "\n\t\t\t<div class=\"field-label\">\n\t\t\t</div>\n\t\t\t<div class=\"field-input\">\n\t\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t\t<input class='address-part' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t\t<input class='address-part' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t\t</div>\n\t\t\t</div>",
+            style: "\n\t\t.address-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.address-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.address-part::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",
             templatePath: './html.html',
             useShadow: true,
         })
@@ -3730,6 +3731,7 @@ var BankFieldElement = /** @class */ (function (_super) {
     });
     BankFieldElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.regNumber);
     };
     BankFieldElement.prototype.componentDidMount = function () {
         var _this = this;
@@ -3788,8 +3790,8 @@ var BankFieldElement = /** @class */ (function (_super) {
     BankFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'bank-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" id='account-field' placeholder='Bank Account'/>\n\t\t\t</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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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='reg-number-field' placeholder='Bank Account Registration Number'/>\n\t\t\t\t<input type=\"text\" id='account-field' placeholder='Bank Account'/>\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.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 #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\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,
         })
     ], BankFieldElement);
@@ -3852,6 +3854,7 @@ var CPRElement = /** @class */ (function (_super) {
     });
     CPRElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     CPRElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#cpr-field');
@@ -3878,8 +3881,8 @@ var CPRElement = /** @class */ (function (_super) {
     CPRElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'cpr-element',
-            template: "\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>",
-            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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], CPRElement);
@@ -3942,6 +3945,7 @@ var CVRElement = /** @class */ (function (_super) {
     });
     CVRElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     CVRElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#cvr-field');
@@ -3968,8 +3972,8 @@ var CVRElement = /** @class */ (function (_super) {
     CVRElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'cvr-element',
-            template: "\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>",
-            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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], CVRElement);
@@ -4037,6 +4041,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
     });
     CheckBoxElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        var firstCheckbox = _super.prototype.getChildElement.call(this, 'input[type="checkbox"]');
+        _super.prototype.addLabel.call(this, firstCheckbox);
     };
     CheckBoxElement.prototype.initChildInputs = function () {
         var _this = this;
@@ -4080,8 +4086,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
     CheckBoxElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'checkbox-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
-            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\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</div>\n\t\t</div>",
+            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.checkbox {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.checkbox:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput[type='checkbox']{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: .1rem solid #27282D;\n\t\t\t\tborder-radius: .25rem;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tinput[type='checkbox']::placeholder {\n\t\t\t\tcolor: rgb(117, 117, 117);\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\t.field-label {\n\t\t\t\tcolor: #27282d;\n\t\t\t\tfont-size: .75rem;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tword-wrap: break-word;\n\t\t\t}\n\t\t\t.field-input {\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmin-height: 1.438rem;\n\t\t\t}\n\t\t",
             useShadow: true,
         })
     ], CheckBoxElement);
@@ -4970,6 +4976,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     });
     CustomFormatDateFieldElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        this.addLabel(this.date);
     };
     CustomFormatDateFieldElement.prototype.initChildInputs = function () {
         var _a;
@@ -5035,8 +5042,8 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     CustomFormatDateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'custom-format-date-element',
-            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\">\n\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\t\t\t<svg class=\"svg-picker\" data-toggle viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"1\" fill=\"#000\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" fill=\"white\"/><path d=\"M4 10H20\" stroke=\"#000\" stroke-width=\"1\"/><circle cx=\"16\" cy=\"14\" r=\"2\" fill=\"#F44336\"/><rect x=\"6\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/></svg>\n\t\t\t</button>\n\t\t</div>",
-            style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-field::after {\n\t\t\tcontent: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */\n\t\t\tcursor: pointer;\n\t\t\tright: 0.625rem;\n\t\t}\n\t\t.svg-picker {\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\twidth: 1.5rem;\n\t\t\theight: 1.5rem;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t\tpadding: 0;\n\t\t}\n\t",
+            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>",
+            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 #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\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,
         })
     ], CustomFormatDateFieldElement);
@@ -5102,6 +5109,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
     });
     CustomRegularExpressionElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     CustomRegularExpressionElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#regex-field');
@@ -5131,8 +5139,8 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
     CustomRegularExpressionElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'regex-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='regex-field'/>\n\t\t\t</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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], CustomRegularExpressionElement);
@@ -5192,6 +5200,7 @@ var DateFieldElement = /** @class */ (function (_super) {
     });
     DateFieldElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.date);
     };
     DateFieldElement.prototype.initChildInputs = function () {
         this.date = _super.prototype.getChildInput.call(this, '#date-field');
@@ -5224,8 +5233,8 @@ var DateFieldElement = /** @class */ (function (_super) {
     DateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'date-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"date\" id='date-field'/>\n\t\t\t</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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], DateFieldElement);
@@ -5293,6 +5302,7 @@ var DropDownListElement = /** @class */ (function (_super) {
     });
     DropDownListElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.select);
     };
     DropDownListElement.prototype.initChildInputs = function () {
         this.select = this.shadowRoot.querySelector('select');
@@ -5334,8 +5344,8 @@ var DropDownListElement = /** @class */ (function (_super) {
     DropDownListElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'drop-down-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n               <select id='select-list'>\n\t\t\t   <option selected disabled>-</option>\n               </select>\n\t\t\t</div>",
-            style: "\n            :host{\n                width:100%;\n            }\n            .wrapper{\n                display:flex;\n                justify-content: center;\n            }\n            .radio-button {\n                width: auto;\n                margin: auto 0.188rem;\n                display: flex;\n                flex-grow: 0.1;\n                justify-content: space-around;\n            }\n            select{\n                box-sizing: border-box;\n                width: 100% !important;\n                border: none;\n                background-color: #f1f4ff;\n                margin: 0.125rem;\n                resize: none;\n            }\n           ",
+            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='select-list'>\n\t\t\t   <option selected disabled>-</option>\n               </select>\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.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tdisplay: flex;\n\t\t\tflex-grow: 0.1;\n\t\t\tjustify-content: space-around;\n\t\t}\n\t\tselect{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\tselect::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,
         })
     ], DropDownListElement);
@@ -5446,6 +5456,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
     EmailFieldElement.prototype.connectedCallback = function () {
         this.initChildInputs();
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.email);
     };
     EmailFieldElement.prototype.initChildInputs = function () {
         this.email = _super.prototype.getChildInput.call(this, '#email-field');
@@ -5475,8 +5486,8 @@ var EmailFieldElement = /** @class */ (function (_super) {
     EmailFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'email-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='email-field'/>\n\t\t\t</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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], EmailFieldElement);
@@ -5577,6 +5588,7 @@ var FileFieldElement = /** @class */ (function (_super) {
     FileFieldElement.prototype.connectedCallback = function () {
         this.initChildInputs();
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.file);
     };
     FileFieldElement.prototype.componentDidMount = function () {
         var _this = this;
@@ -5807,8 +5819,8 @@ var FileFieldElement = /** @class */ (function (_super) {
     FileFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'file-element',
-            template: "\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>",
-            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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], FileFieldElement);
@@ -5879,6 +5891,7 @@ var IdentificationElement = /** @class */ (function (_super) {
     });
     IdentificationElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     IdentificationElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#id-field');
@@ -5906,8 +5919,8 @@ var IdentificationElement = /** @class */ (function (_super) {
     IdentificationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'id-element',
-            template: "\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>",
-            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    input, select{\n            box-sizing: border-box;\n            border: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n    input{\n            width: 75% !important;\n    }\n    select{\n            width: 25% !important;\n    }\n           ",
+            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>",
+            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 #27282D;\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,
         })
     ], IdentificationElement);
@@ -5991,6 +6004,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
     IntPhoneFieldElement.prototype.connectedCallback = function () {
         this.setIntlTelInput();
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.phone);
     };
     IntPhoneFieldElement.prototype.initChildInputs = function () {
         this.phone.addEventListener('change', this.change.bind(this));
@@ -6057,8 +6071,8 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
     IntPhoneFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'int-phone-element',
-            template: "\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>",
-            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    .iti {\n        width: 100% !important;\n    }\n    input{\n            box-sizing: border-box;\n            width: 100% !important;\n            border: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n\n  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n\t.iti__flag {\n\t  background-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}\n  }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], IntPhoneFieldElement);
@@ -6121,6 +6135,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
     });
     NumericFieldElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.number);
     };
     NumericFieldElement.prototype.initChildInputs = function () {
         this.number = _super.prototype.getChildInput.call(this, '#numeric-field');
@@ -6159,8 +6174,8 @@ var NumericFieldElement = /** @class */ (function (_super) {
     NumericFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'numeric-element',
-            template: "\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>",
-            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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n\t\t\tborder-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], NumericFieldElement);
@@ -6231,6 +6246,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     });
     RadioButtonGroupElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        var firstRadioButton = _super.prototype.getChildElement.call(this, 'input[type="radio"]');
+        _super.prototype.addLabel.call(this, firstRadioButton);
     };
     RadioButtonGroupElement.prototype.initChildInputs = function () {
         var _this = this;
@@ -6270,8 +6287,8 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
     RadioButtonGroupElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'radio-group-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
-            style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.radio-button:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.2rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\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</div>\n\t\t</div>",
+            style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t.radio-button {\n\t\t\twidth: auto;\n\t\t\tmargin: auto 0.188rem;\n\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\tfont-size: 0.813rem;\n\t\t\tmargin-top: 0.25rem;\n\t\t}\n\t\t.radio-button:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: auto !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.2rem;\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\tfieldset {\n\t\t\tborder: none;\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,
         })
     ], RadioButtonGroupElement);
@@ -6345,6 +6362,7 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
     });
     ResidentIdentificationElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.company);
     };
     ResidentIdentificationElement.prototype.componentDidMount = function () {
         var _this = this;
@@ -6414,8 +6432,8 @@ var ResidentIdentificationElement = /** @class */ (function (_super) {
     ResidentIdentificationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'resident-identification-element',
-            template: "\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<input class='field-part' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>",
-            style: ".field-wrapper{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t}\n\t\t\tinput.field-part{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t\twidth:33% !important;\n\t\t\t}\n\t\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=\"field-wrapper\">\n\t\t\t\t<input class='field-part' id='company' type=\"text\" placeholder='Company'/>\n\t\t\t\t<input class='field-part' id='property' type=\"text\" placeholder='Property'/>\n\t\t\t\t<input class='field-part' id='tenancy' type=\"text\" placeholder='Tenancy'/>\n\t\t\t\t<input class='field-part' id='tenant' type=\"text\" placeholder='Tenant'/>\n\t\t\t</div>\n\t\t</div>",
+            style: "\n\t\t.field-wrapper{\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\tinput.field-part{\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t\twidth:33% !important;\n\t\t}\n\t\tinput.field-part::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",
             templatePath: './html.html',
             useShadow: true,
         })
@@ -6479,6 +6497,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
     });
     SECompanyRegistrationElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     SECompanyRegistrationElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#se-company-registration-field');
@@ -6505,8 +6524,8 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
     SECompanyRegistrationElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'se-company-registration-element',
-            template: "\n        <div class=\"wrapper\">\n            <input type=\"text\" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>\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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n        }",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], SECompanyRegistrationElement);
@@ -6569,6 +6588,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
     });
     SEPersonalNumberElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     SEPersonalNumberElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#se-personal-number-field');
@@ -6595,8 +6615,8 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
     SEPersonalNumberElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'se-personal-number-element',
-            template: "\n        <div class=\"wrapper\">\n            <input type=\"text\" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>\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: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n        }",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], SEPersonalNumberElement);
@@ -6656,6 +6676,7 @@ var TextAreaElement = /** @class */ (function (_super) {
     });
     TextAreaElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     TextAreaElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#text-area-field');
@@ -6685,8 +6706,8 @@ var TextAreaElement = /** @class */ (function (_super) {
     TextAreaElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'text-area-element',
-            template: "\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>",
-            style: "\n    :host{\n            width:100%;\n    }\n    .wrapper{\n            display:flex;\n    }\n    textarea{\n            box-sizing: border-box;\n            width: 100% !important;\n            border: none;\n            background-color: #f1f4ff;\n            margin: 0.125rem;\n            resize: none;\n    }\n           ",
+            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>",
+            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 #27282D;\n            border-radius: .25rem;\n            margin: 0.125rem;\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,
         })
     ], TextAreaElement);
@@ -6746,6 +6767,7 @@ var TextFieldElement = /** @class */ (function (_super) {
     });
     TextFieldElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.text);
     };
     TextFieldElement.prototype.initChildInputs = function () {
         this.text = _super.prototype.getChildInput.call(this, '#text-field');
@@ -6775,8 +6797,8 @@ var TextFieldElement = /** @class */ (function (_super) {
     TextFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'text-element',
-            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field' />\n\t\t\t</div>",
-            style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t}\n\t\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\" 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 #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\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,
         })
     ], TextFieldElement);
@@ -6864,6 +6886,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
     });
     TypeAheadElement.prototype.connectedCallback = function () {
         _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.textInputElement);
     };
     TypeAheadElement.prototype.initChildInputs = function () {
         var _this = this;
@@ -7012,8 +7035,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
     TypeAheadElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'type-ahead-element',
-            template: "\n\t\t<div class=\"wrapper\" role=\"combobox\" aria-expanded=\"false\" aria-owns=\"options-list\" aria-haspopup=\"listbox\">\n\t\t\t<input type=\"text\" id=\"text-input\" aria-autocomplete=\"list\" aria-controls=\"options-list\" aria-activedescendant=\"\" role=\"textbox\">\n\t\t\t<div id=\"description\" aria-live=\"polite\"></div>\n\t\t\t<div id=\"options-list\" role=\"listbox\" class=\"options-list\" hidden>\n\t\t\t\t<!-- Options will be dynamically added here -->\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.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 0.125rem;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 0.063rem solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 12.5rem;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 0.625rem;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 0.063rem solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 1rem;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 0.625rem;\n\t\t}\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\" role=\"combobox\" aria-expanded=\"false\" aria-owns=\"options-list\" aria-haspopup=\"listbox\">\n\t\t\t\t<input type=\"text\" class=\"text-input\" id=\"text-input\" aria-autocomplete=\"list\" aria-controls=\"options-list\" aria-activedescendant=\"\" role=\"textbox\">\n\t\t\t\t<div id=\"description\" aria-live=\"polite\"></div>\n\t\t\t\t<div id=\"options-list\" role=\"listbox\" class=\"options-list\" hidden>\n\t\t\t\t\t<!-- Options will be dynamically added here -->\n\t\t\t\t</div>\n\t\t\t</div>\t\n\t\t</div>",
+            style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t.text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: .1rem solid #27282D;\n\t\t\tborder-radius: .25rem;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t.text-input::placeholder {\n\t\t\tcolor: rgb(117, 117, 117);\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 0.125rem;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 0.063rem solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 12.5rem;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 0.625rem;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 0.063rem solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 1rem;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 0.625rem;\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,
         })
     ], TypeAheadElement);
@@ -7325,6 +7348,23 @@ var CustomInputElement = /** @class */ (function (_super) {
         }
         return element.querySelectorAll(selector);
     };
+    CustomInputElement.prototype.addLabel = function (inputField) {
+        if (this.label) {
+            var randomId = Math.random().toString(36).substring(2, 15);
+            inputField.id = "text-field-" + 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);
+            }
+            if (this.required) {
+                newLabel.innerHTML += '<span style="color: #e00040">*</span>';
+            }
+        }
+    };
     CustomInputElement.prototype.RegisterDependentOn = function (name, initialValue) {
         if (initialValue === void 0) { initialValue = false; }
         this.dependentOnList[name] = initialValue;