@luftborn/custom-elements 2.13.10 → 2.15.0

package/demo/index.min.js

@@ -11,7 +11,7 @@ document.onreadystatechange = function () {
     }
 };
 
-},{"./../src/index":78}],2:[function(require,module,exports){
+},{"./../src/index":80}],2:[function(require,module,exports){
 /**
 @license @nocompile
 Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
@@ -3454,7 +3454,7 @@ var CustomForm = /** @class */ (function () {
 }());
 exports.CustomForm = CustomForm;
 
-},{"./elements/Elements":24,"./elements/FileField/FileFieldElement":26,"./framework/Utilities/ArrayUtil":62,"./framework/Utilities/MakeRequest":65}],11:[function(require,module,exports){
+},{"./elements/Elements":24,"./elements/FileField/FileFieldElement":26,"./framework/Utilities/ArrayUtil":63,"./framework/Utilities/MakeRequest":66}],11:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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,
         })
@@ -3665,7 +3666,7 @@ var AddressElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.AddressElement = AddressElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Language/Translator":60,"../../framework/Polyfills/getAttributeNamesPolyfill":61,"../../framework/Utilities/debouncer":68,"../../framework/custom-element.decorator":77}],12:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Language/Translator":61,"../../framework/Polyfills/getAttributeNamesPolyfill":62,"../../framework/Utilities/debouncer":69,"../../framework/custom-element.decorator":79}],12:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -3797,7 +3799,7 @@ var BankFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.BankFieldElement = BankFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Language/Translator":60,"../../framework/Validation/Validators/BankAccount":69,"../../framework/Validation/Validators/BankAccountRegistrationNumber":70,"../../framework/custom-element.decorator":77}],13:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Language/Translator":61,"../../framework/Validation/Validators/BankAccount":70,"../../framework/Validation/Validators/BankAccountRegistrationNumber":71,"../../framework/custom-element.decorator":79}],13:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -3887,7 +3890,7 @@ var CPRElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.CPRElement = CPRElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Validation/Validators/CPR":73,"../../framework/custom-element.decorator":77}],14:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Validation/Validators/CPR":74,"../../framework/custom-element.decorator":79}],14:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -3977,7 +3981,7 @@ var CVRElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.CVRElement = CVRElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Validation/Validators/CVR":74,"../../framework/custom-element.decorator":77}],15:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Validation/Validators/CVR":75,"../../framework/custom-element.decorator":79}],15:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -4089,7 +4095,7 @@ var CheckBoxElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.CheckBoxElement = CheckBoxElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Utilities/StringUtil":66,"../../framework/custom-element.decorator":77}],16:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Utilities/StringUtil":67,"../../framework/custom-element.decorator":79}],16:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var CustomDatepickerStyles_1 = require("./CustomDatepickerStyles");
@@ -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);
@@ -5044,7 +5051,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.CustomFormatDateFieldElement = CustomFormatDateFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77,"./CustomDatepicker/CustomDatepicker":16,"./CustomDatepicker/CustomDatepickerUtils":18}],21:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79,"./CustomDatepicker/CustomDatepicker":16,"./CustomDatepicker/CustomDatepickerUtils":18}],21:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -5140,7 +5148,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.CustomRegularExpressionElement = CustomRegularExpressionElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],22:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],22:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -5233,7 +5242,7 @@ var DateFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.DateFieldElement = DateFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],23:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],23:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -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);
@@ -5343,10 +5353,10 @@ var DropDownListElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.DropDownListElement = DropDownListElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Utilities/StringUtil":66,"../../framework/custom-element.decorator":77}],24:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Utilities/StringUtil":67,"../../framework/custom-element.decorator":79}],24:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECompanyRegistrationElement = exports.SEPersonalNumberElement = exports.TypeAheadElement = exports.BankFieldElement = exports.IdentificationElement = exports.CVRElement = exports.CPRElement = exports.IntPhoneFieldElement = exports.CustomFormatDateFieldElement = exports.DateFieldElement = exports.CustomRegularExpressionElement = exports.NumericFieldElement = exports.FileFieldElement = exports.DropDownListElement = exports.TextAreaElement = exports.RadioButtonGroupElement = exports.CheckBoxElement = exports.EmailFieldElement = exports.TextFieldElement = exports.AddressElement = void 0;
+exports.ResidentIdentificationElement = exports.SECompanyRegistrationElement = exports.SEPersonalNumberElement = exports.TypeAheadElement = exports.BankFieldElement = exports.IdentificationElement = exports.CVRElement = exports.CPRElement = exports.IntPhoneFieldElement = exports.CustomFormatDateFieldElement = exports.DateFieldElement = exports.CustomRegularExpressionElement = exports.NumericFieldElement = exports.FileFieldElement = exports.DropDownListElement = exports.TextAreaElement = exports.RadioButtonGroupElement = exports.CheckBoxElement = exports.EmailFieldElement = exports.TextFieldElement = exports.AddressElement = void 0;
 var AddressElement_1 = require("./Address/AddressElement");
 Object.defineProperty(exports, "AddressElement", { enumerable: true, get: function () { return AddressElement_1.AddressElement; } });
 var TextFieldElement_1 = require("./TextField/TextFieldElement");
@@ -5387,8 +5397,10 @@ var SECompanyRegistrationElement_1 = require("./SECompanyRegistrationElement/SEC
 Object.defineProperty(exports, "SECompanyRegistrationElement", { enumerable: true, get: function () { return SECompanyRegistrationElement_1.SECompanyRegistrationElement; } });
 var CustomFormatDateFieldElement_1 = require("./CustomFormatDateFieldElement/CustomFormatDateFieldElement");
 Object.defineProperty(exports, "CustomFormatDateFieldElement", { enumerable: true, get: function () { return CustomFormatDateFieldElement_1.CustomFormatDateFieldElement; } });
+var ResidentIdentificationElement_1 = require("./ResidentIdentification/ResidentIdentificationElement");
+Object.defineProperty(exports, "ResidentIdentificationElement", { enumerable: true, get: function () { return ResidentIdentificationElement_1.ResidentIdentificationElement; } });
 
-},{"./Address/AddressElement":11,"./BankField/BankFieldElement":12,"./CPRElement/CPRElement":13,"./CVRElement/CVRElement":14,"./CheckBoxElement/CheckBoxElement":15,"./CustomFormatDateFieldElement/CustomFormatDateFieldElement":20,"./CustomRegularExpression/CustomRegularExpressionElement":21,"./DateField/DateFieldElement":22,"./DropDownList/DropDownListElement":23,"./EmailField/EmailFieldElement":25,"./FileField/FileFieldElement":26,"./IdentificationElement/IdentificationElement":27,"./InternationaPhoneNumber/InternationaPhoneNumberElement":30,"./NumericField/NumericFieldElement":31,"./RadioButtonGroup/RadioButtonGroupElement":32,"./SECompanyRegistrationElement/SECompanyRegistrationElement":33,"./SEPersonalNumberElement/SEPersonalNumberElement":34,"./TextAreaElement/TextAreaElement":35,"./TextField/TextFieldElement":36,"./TypeAhead/TypeAheadElement":37}],25:[function(require,module,exports){
+},{"./Address/AddressElement":11,"./BankField/BankFieldElement":12,"./CPRElement/CPRElement":13,"./CVRElement/CVRElement":14,"./CheckBoxElement/CheckBoxElement":15,"./CustomFormatDateFieldElement/CustomFormatDateFieldElement":20,"./CustomRegularExpression/CustomRegularExpressionElement":21,"./DateField/DateFieldElement":22,"./DropDownList/DropDownListElement":23,"./EmailField/EmailFieldElement":25,"./FileField/FileFieldElement":26,"./IdentificationElement/IdentificationElement":27,"./InternationaPhoneNumber/InternationaPhoneNumberElement":30,"./NumericField/NumericFieldElement":31,"./RadioButtonGroup/RadioButtonGroupElement":32,"./ResidentIdentification/ResidentIdentificationElement":33,"./SECompanyRegistrationElement/SECompanyRegistrationElement":34,"./SEPersonalNumberElement/SEPersonalNumberElement":35,"./TextAreaElement/TextAreaElement":36,"./TextField/TextFieldElement":37,"./TypeAhead/TypeAheadElement":38}],25:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -5444,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');
@@ -5473,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);
@@ -5482,7 +5495,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.EmailFieldElement = EmailFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],26:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],26:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -5575,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;
@@ -5805,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);
@@ -5814,7 +5828,7 @@ var FileFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.FileFieldElement = FileFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Polyfills/getAttributeNamesPolyfill":61,"../../framework/custom-element.decorator":77,"exif-js":5}],27:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Polyfills/getAttributeNamesPolyfill":62,"../../framework/custom-element.decorator":79,"exif-js":5}],27:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -5877,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');
@@ -5904,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);
@@ -5913,7 +5928,7 @@ var IdentificationElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.IdentificationElement = IdentificationElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Validation/Validators/BankIdNorway":71,"../../framework/Validation/Validators/BankIdSweden":72,"../../framework/Validation/Validators/CPR":73,"../../framework/Validation/Validators/CVR":74,"../../framework/custom-element.decorator":77}],28:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Validation/Validators/BankIdNorway":72,"../../framework/Validation/Validators/BankIdSweden":73,"../../framework/Validation/Validators/CPR":74,"../../framework/Validation/Validators/CVR":75,"../../framework/custom-element.decorator":79}],28:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function GetFlagsUrl() {
@@ -5989,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));
@@ -6055,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);
@@ -6064,7 +6080,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.IntPhoneFieldElement = IntPhoneFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Utilities/MakeRequest":65,"../../framework/custom-element.decorator":77,"./Flags":28,"./Flags2x":29,"intl-tel-input":7}],31:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Utilities/MakeRequest":66,"../../framework/custom-element.decorator":79,"./Flags":28,"./Flags2x":29,"intl-tel-input":7}],31:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6119,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');
@@ -6157,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);
@@ -6166,7 +6183,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.NumericFieldElement = NumericFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],32:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],32:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6229,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;
@@ -6268,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);
@@ -6277,7 +6296,153 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.RadioButtonGroupElement = RadioButtonGroupElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Utilities/StringUtil":66,"../../framework/custom-element.decorator":77}],33:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Utilities/StringUtil":67,"../../framework/custom-element.decorator":79}],33:[function(require,module,exports){
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResidentIdentificationElement = void 0;
+var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
+var CustomInputElement_1 = require("../../framework/CustomInputElement");
+var CustomEvents_1 = require("../../framework/CustomEvents");
+var Translator_1 = require("../../framework/Language/Translator");
+var getAttributeNamesPolyfill_1 = require("../../framework/Polyfills/getAttributeNamesPolyfill");
+var ResidentIdentification_1 = require("../../framework/Validation/Validators/ResidentIdentification");
+var ResidentIdentificationElement = /** @class */ (function (_super) {
+    __extends(ResidentIdentificationElement, _super);
+    function ResidentIdentificationElement() {
+        var _this = _super.call(this) || this;
+        _this.validator = new ResidentIdentification_1.default();
+        (0, getAttributeNamesPolyfill_1.default)();
+        return _this;
+    }
+    Object.defineProperty(ResidentIdentificationElement.prototype, "value", {
+        get: function () {
+            var company = this.company.value || '';
+            var property = this.property.value ? "-" + this.property.value : '';
+            var tenancy = this.tenancy.value ? "-" + this.tenancy.value : '';
+            var tenant = this.tenant.value ? "-" + this.tenant.value : '';
+            return "" + company + property + tenancy + tenant;
+        },
+        set: function (value) {
+            var values = value.split(',');
+            this.company.value = values[0];
+            this.property.value = values[1];
+            this.tenancy.value = values[2];
+            this.tenant.value = values[3];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ResidentIdentificationElement.prototype, "valid", {
+        get: function () {
+            return this.validator.isSatisfiedBy(this.value, !this.required);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ResidentIdentificationElement.prototype.connectedCallback = function () {
+        _super.prototype.connectedCallback.call(this);
+        _super.prototype.addLabel.call(this, this.company);
+    };
+    ResidentIdentificationElement.prototype.componentDidMount = function () {
+        var _this = this;
+        this.initChildInputs();
+        this.getAttributeNames().forEach(function (attributeName) {
+            var attributeValue = _this.getAttribute(attributeName);
+            _this.attributeChanged(attributeName, null, attributeValue);
+        });
+    };
+    ResidentIdentificationElement.prototype.initChildInputs = function () {
+        this.company = _super.prototype.getChildInput.call(this, '#company');
+        this.property = _super.prototype.getChildInput.call(this, '#property');
+        this.tenancy = _super.prototype.getChildInput.call(this, '#tenancy');
+        this.tenant = _super.prototype.getChildInput.call(this, '#tenant');
+        this.company.addEventListener('change', this.change.bind(this));
+        this.property.addEventListener('change', this.change.bind(this));
+        this.tenancy.addEventListener('change', this.change.bind(this));
+        this.tenant.addEventListener('change', this.change.bind(this));
+        if (this.required) {
+            this.company.setAttribute('required', 'required');
+            this.property.setAttribute('required', 'required');
+            this.tenancy.setAttribute('required', 'required');
+            this.tenant.setAttribute('required', 'required');
+        }
+        if (this.label) {
+            var wrapper = this.shadowRoot.querySelector('.field-wrapper');
+            if (wrapper) {
+                wrapper.setAttribute('aria-label', this.label);
+            }
+        }
+    };
+    // events
+    ResidentIdentificationElement.prototype.change = function ($event) {
+        this.touched = true;
+        this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
+    };
+    ResidentIdentificationElement.prototype.validate = function () {
+        this.valid;
+        this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
+    };
+    ResidentIdentificationElement.prototype.changeLanguage = function (language) {
+        if (!this.company || !this.property || !this.tenancy || !this.tenant) {
+            return;
+        }
+        this.company.placeholder = Translator_1.default.Translate('ResidentIdentificationElement.Company', language);
+        this.property.placeholder = Translator_1.default.Translate('ResidentIdentificationElement.Property', language);
+        this.tenancy.placeholder = Translator_1.default.Translate('ResidentIdentificationElement.Tenancy', language);
+        this.tenant.placeholder = Translator_1.default.Translate('ResidentIdentificationElement.Tenant', language);
+    };
+    Object.defineProperty(ResidentIdentificationElement, "observedAttributes", {
+        get: function () {
+            return ['language'];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ResidentIdentificationElement.prototype.attributeChangedCallback = function (name, oldVal, newVal) {
+        this.attributeChanged(name, oldVal, newVal);
+    };
+    ResidentIdentificationElement.prototype.attributeChanged = function (name, oldVal, newVal) {
+        switch (name) {
+            case 'language':
+                this.changeLanguage(newVal);
+                break;
+        }
+    };
+    ResidentIdentificationElement = __decorate([
+        (0, custom_element_decorator_1.default)({
+            selector: 'resident-identification-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=\"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,
+        })
+    ], ResidentIdentificationElement);
+    return ResidentIdentificationElement;
+}(CustomInputElement_1.CustomInputElement));
+exports.ResidentIdentificationElement = ResidentIdentificationElement;
+
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Language/Translator":61,"../../framework/Polyfills/getAttributeNamesPolyfill":62,"../../framework/Validation/Validators/ResidentIdentification":76,"../../framework/custom-element.decorator":79}],34:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6332,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');
@@ -6358,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);
@@ -6367,7 +6533,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.SECompanyRegistrationElement = SECompanyRegistrationElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Validation/Validators/SECompanyRegistration":75,"../../framework/custom-element.decorator":77}],34:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Validation/Validators/SECompanyRegistration":77,"../../framework/custom-element.decorator":79}],35:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6422,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');
@@ -6448,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);
@@ -6457,7 +6624,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.SEPersonalNumberElement = SEPersonalNumberElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Validation/Validators/SEPersonalNumber":76,"../../framework/custom-element.decorator":77}],35:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Validation/Validators/SEPersonalNumber":78,"../../framework/custom-element.decorator":79}],36:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6509,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');
@@ -6538,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);
@@ -6547,7 +6715,7 @@ var TextAreaElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.TextAreaElement = TextAreaElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],36:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],37:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6599,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');
@@ -6628,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);
@@ -6637,7 +6806,7 @@ var TextFieldElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.TextFieldElement = TextFieldElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/custom-element.decorator":77}],37:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/custom-element.decorator":79}],38:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -6717,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;
@@ -6865,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);
@@ -6874,7 +7044,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
 }(CustomInputElement_1.CustomInputElement));
 exports.TypeAheadElement = TypeAheadElement;
 
-},{"../../framework/CustomEvents":38,"../../framework/CustomInputElement":39,"../../framework/Utilities/DomUtility":64,"../../framework/custom-element.decorator":77}],38:[function(require,module,exports){
+},{"../../framework/CustomEvents":39,"../../framework/CustomInputElement":40,"../../framework/Utilities/DomUtility":65,"../../framework/custom-element.decorator":79}],39:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomElementEvent = exports.CustomElementEventArgs = void 0;
@@ -6923,7 +7093,7 @@ var CustomElementEvent = /** @class */ (function () {
 }());
 exports.CustomElementEvent = CustomElementEvent;
 
-},{}],39:[function(require,module,exports){
+},{}],40:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7178,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;
@@ -7193,7 +7380,7 @@ var CustomInputElement = /** @class */ (function (_super) {
 }(HTMLElement));
 exports.CustomInputElement = CustomInputElement;
 
-},{"./CustomEvents":38,"./Utilities/ArrayUtil":62,"./Utilities/DomUtil":63}],40:[function(require,module,exports){
+},{"./CustomEvents":39,"./Utilities/ArrayUtil":63,"./Utilities/DomUtil":64}],41:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var BaseDictionary = /** @class */ (function () {
@@ -7215,7 +7402,7 @@ var BaseDictionary = /** @class */ (function () {
 }());
 exports.default = BaseDictionary;
 
-},{}],41:[function(require,module,exports){
+},{}],42:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7248,7 +7435,13 @@ var CzechDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Účet",
                 RegistrationNumber: "Registrační číslo"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Společnost",
+                Property: "Nemovitost",
+                Tenancy: "Pronájem",
+                Tenant: "nájemce"
+            },
         };
         return _this;
     }
@@ -7256,7 +7449,7 @@ var CzechDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = CzechDictionary;
 
-},{"./Base/BaseDictionary":40}],42:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],43:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7289,7 +7482,13 @@ var DanishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Kontonummer",
                 RegistrationNumber: "Registreringsnummer"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Virksomhed",
+                Property: "Ejendom",
+                Tenancy: "Lejemål",
+                Tenant: "Lejer"
+            },
         };
         return _this;
     }
@@ -7297,7 +7496,7 @@ var DanishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = DanishDictionary;
 
-},{"./Base/BaseDictionary":40}],43:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],44:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7330,7 +7529,13 @@ var DutchDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankrekening",
                 RegistrationNumber: "Bankrekening Registratienummer"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Bedrijf",
+                Property: "Eigendom",
+                Tenancy: "Huurovereenkomst",
+                Tenant: "Huurder"
+            },
         };
         return _this;
     }
@@ -7338,7 +7543,7 @@ var DutchDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = DutchDictionary;
 
-},{"./Base/BaseDictionary":40}],44:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],45:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7371,7 +7576,13 @@ var EnglishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bank Account",
                 RegistrationNumber: "Bank Account Registration Number"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Company",
+                Property: "Property",
+                Tenancy: "Tenancy",
+                Tenant: "Tenant"
+            },
         };
         return _this;
     }
@@ -7379,7 +7590,7 @@ var EnglishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = EnglishDictionary;
 
-},{"./Base/BaseDictionary":40}],45:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],46:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7412,7 +7623,13 @@ var EstonianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Pangakonto",
                 RegistrationNumber: "Pangakonto registreerimisnumber"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Ettevõte",
+                Property: "Kinnisvara",
+                Tenancy: "Üürileping",
+                Tenant: "Üürnik"
+            },
         };
         return _this;
     }
@@ -7420,7 +7637,7 @@ var EstonianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = EstonianDictionary;
 
-},{"./Base/BaseDictionary":40}],46:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],47:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7453,7 +7670,13 @@ var FinnishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Pankkitili",
                 RegistrationNumber: "Pankkitilin rekisteröintinumero"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Yritys",
+                Property: "Kiinteistö",
+                Tenancy: "Vuokrasopimus",
+                Tenant: "Vuokralainen"
+            },
         };
         return _this;
     }
@@ -7461,7 +7684,7 @@ var FinnishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = FinnishDictionary;
 
-},{"./Base/BaseDictionary":40}],47:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],48:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7494,7 +7717,13 @@ var FrenchDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Compte bancaire",
                 RegistrationNumber: "Numéro d'enregistrement du compte bancaire"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Société",
+                Property: "Propriété",
+                Tenancy: "Bail",
+                Tenant: "Locataire"
+            },
         };
         return _this;
     }
@@ -7502,7 +7731,7 @@ var FrenchDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = FrenchDictionary;
 
-},{"./Base/BaseDictionary":40}],48:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],49:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7535,7 +7764,13 @@ var GermanDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankkonto",
                 RegistrationNumber: "Bankkontoregistrierungsnummer"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Unternehmen",
+                Property: "Eigentum",
+                Tenancy: "Mietvertrag",
+                Tenant: "Mieter"
+            },
         };
         return _this;
     }
@@ -7543,7 +7778,7 @@ var GermanDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = GermanDictionary;
 
-},{"./Base/BaseDictionary":40}],49:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],50:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7576,7 +7811,13 @@ var GreekDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Τραπεζικός λογαριασμός",
                 RegistrationNumber: "Αριθμός εγγραφής τραπεζικού λογαριασμού"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Εταιρεία",
+                Property: "Ακίνητο",
+                Tenancy: "Μίσθωση",
+                Tenant: "Ενοικιαστής"
+            },
         };
         return _this;
     }
@@ -7584,7 +7825,7 @@ var GreekDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = GreekDictionary;
 
-},{"./Base/BaseDictionary":40}],50:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],51:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7617,7 +7858,13 @@ var HungarianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Banki számla",
                 RegistrationNumber: "Banki számla regisztrációs száma"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Cég",
+                Property: "Ingatlan",
+                Tenancy: "Bérlet",
+                Tenant: "Bérlő"
+            },
         };
         return _this;
     }
@@ -7625,7 +7872,7 @@ var HungarianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = HungarianDictionary;
 
-},{"./Base/BaseDictionary":40}],51:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],52:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7658,7 +7905,13 @@ var IcelandicDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankareikningur",
                 RegistrationNumber: "Númer skráningar á bankareikningi"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Fyrirtæki",
+                Property: "Eign",
+                Tenancy: "Leigusamningur",
+                Tenant: "Leigjandi"
+            },
         };
         return _this;
     }
@@ -7666,7 +7919,7 @@ var IcelandicDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = IcelandicDictionary;
 
-},{"./Base/BaseDictionary":40}],52:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],53:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7699,7 +7952,13 @@ var ItalianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "conto bancario",
                 RegistrationNumber: "Numero di registrazione del conto bancario"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Azienda",
+                Property: "Proprietà",
+                Tenancy: "Contratto di locazione",
+                Tenant: "Inquilino"
+            },
         };
         return _this;
     }
@@ -7707,7 +7966,7 @@ var ItalianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = ItalianDictionary;
 
-},{"./Base/BaseDictionary":40}],53:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],54:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7740,7 +7999,13 @@ var LatvianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankas konts",
                 RegistrationNumber: "Bankas konta reģistrācijas numurs"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Uzņēmums",
+                Property: "Īpašums",
+                Tenancy: "Nomas līgums",
+                Tenant: "Nomnieks"
+            },
         };
         return _this;
     }
@@ -7748,7 +8013,7 @@ var LatvianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = LatvianDictionary;
 
-},{"./Base/BaseDictionary":40}],54:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],55:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7781,7 +8046,13 @@ var LituanianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Banko sąskaita",
                 RegistrationNumber: "Banko sąskaitos registracijos numeris"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Įmonė",
+                Property: "Nuosavybė",
+                Tenancy: "Nuomos sutartis",
+                Tenant: "Nuomininkas"
+            },
         };
         return _this;
     }
@@ -7789,7 +8060,7 @@ var LituanianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = LituanianDictionary;
 
-},{"./Base/BaseDictionary":40}],55:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],56:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7822,7 +8093,13 @@ var NorwegianDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankkonto",
                 RegistrationNumber: "Registreringsnummer for bankkonto"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Selskap",
+                Property: "Eiendom",
+                Tenancy: "Leieavtale",
+                Tenant: "Leietaker"
+            },
         };
         return _this;
     }
@@ -7830,7 +8107,7 @@ var NorwegianDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = NorwegianDictionary;
 
-},{"./Base/BaseDictionary":40}],56:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],57:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7863,7 +8140,13 @@ var PolishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Konto bankowe",
                 RegistrationNumber: "Numer rejestracyjny konta bankowego"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Firma",
+                Property: "Nieruchomość",
+                Tenancy: "Umowa najmu",
+                Tenant: "Najemca"
+            },
         };
         return _this;
     }
@@ -7871,7 +8154,7 @@ var PolishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = PolishDictionary;
 
-},{"./Base/BaseDictionary":40}],57:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],58:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7904,7 +8187,13 @@ var PortugueseDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Conta bancária",
                 RegistrationNumber: "Número de registro da conta bancária"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Empresa",
+                Property: "Propriedade",
+                Tenancy: "Contrato de locação",
+                Tenant: "Inquilino"
+            },
         };
         return _this;
     }
@@ -7912,7 +8201,7 @@ var PortugueseDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = PortugueseDictionary;
 
-},{"./Base/BaseDictionary":40}],58:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],59:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7945,7 +8234,13 @@ var SpanishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Cuenta bancaria",
                 RegistrationNumber: "Número de registro de cuenta bancaria"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Empresa",
+                Property: "Propiedad",
+                Tenancy: "Arrendamiento",
+                Tenant: "Inquilino"
+            },
         };
         return _this;
     }
@@ -7953,7 +8248,7 @@ var SpanishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = SpanishDictionary;
 
-},{"./Base/BaseDictionary":40}],59:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],60:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -7986,7 +8281,13 @@ var SwedishDictionary = /** @class */ (function (_super) {
             BankElement: {
                 Account: "Bankkonto",
                 RegistrationNumber: "Bankkontoregistreringsnummer"
-            }
+            },
+            ResidentIdentificationElement: {
+                Company: "Företag",
+                Property: "Fastighet",
+                Tenancy: "Hyresavtal",
+                Tenant: "Hyresgäst"
+            },
         };
         return _this;
     }
@@ -7994,7 +8295,7 @@ var SwedishDictionary = /** @class */ (function (_super) {
 }(BaseDictionary_1.default));
 exports.default = SwedishDictionary;
 
-},{"./Base/BaseDictionary":40}],60:[function(require,module,exports){
+},{"./Base/BaseDictionary":41}],61:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var DanishDictionary_1 = require("./Languages/DanishDictionary");
@@ -8053,7 +8354,7 @@ var Translator = /** @class */ (function () {
 }());
 exports.default = Translator;
 
-},{"./Languages/CzechDictionary":41,"./Languages/DanishDictionary":42,"./Languages/DutchDictionary":43,"./Languages/EnglishDictionary":44,"./Languages/EstonianDictionary":45,"./Languages/FinnishDictionary":46,"./Languages/FrenchDictionary":47,"./Languages/GermanDictionary":48,"./Languages/GreekDictionary":49,"./Languages/HungarianDictionary":50,"./Languages/IcelandicDictionary":51,"./Languages/ItalianDictionary":52,"./Languages/LatvianDictionary":53,"./Languages/LituanianDictionary":54,"./Languages/NorwegianDictionary":55,"./Languages/PolishDictionary":56,"./Languages/PortugueseDictionary":57,"./Languages/SpanishDictionary":58,"./Languages/SwedishDictionary":59}],61:[function(require,module,exports){
+},{"./Languages/CzechDictionary":42,"./Languages/DanishDictionary":43,"./Languages/DutchDictionary":44,"./Languages/EnglishDictionary":45,"./Languages/EstonianDictionary":46,"./Languages/FinnishDictionary":47,"./Languages/FrenchDictionary":48,"./Languages/GermanDictionary":49,"./Languages/GreekDictionary":50,"./Languages/HungarianDictionary":51,"./Languages/IcelandicDictionary":52,"./Languages/ItalianDictionary":53,"./Languages/LatvianDictionary":54,"./Languages/LituanianDictionary":55,"./Languages/NorwegianDictionary":56,"./Languages/PolishDictionary":57,"./Languages/PortugueseDictionary":58,"./Languages/SpanishDictionary":59,"./Languages/SwedishDictionary":60}],62:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function getAttributeNamesPolyfill() {
@@ -8072,7 +8373,7 @@ function getAttributeNamesPolyfill() {
 exports.default = getAttributeNamesPolyfill;
 ;
 
-},{}],62:[function(require,module,exports){
+},{}],63:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var ArrayUtil = /** @class */ (function () {
@@ -8110,7 +8411,7 @@ var ArrayUtil = /** @class */ (function () {
 }());
 exports.default = ArrayUtil;
 
-},{}],63:[function(require,module,exports){
+},{}],64:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var ViewportUtil_1 = require("./ViewportUtil");
@@ -8213,7 +8514,7 @@ var DomUtil = /** @class */ (function () {
 }());
 exports.default = DomUtil;
 
-},{"./ViewportUtil":67}],64:[function(require,module,exports){
+},{"./ViewportUtil":68}],65:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var DomUtility = /** @class */ (function () {
@@ -8227,7 +8528,7 @@ var DomUtility = /** @class */ (function () {
 }());
 exports.default = DomUtility;
 
-},{}],65:[function(require,module,exports){
+},{}],66:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var MakeRequest = /** @class */ (function () {
@@ -8277,7 +8578,7 @@ var MakeRequest = /** @class */ (function () {
 }());
 exports.default = MakeRequest;
 
-},{}],66:[function(require,module,exports){
+},{}],67:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StringUtil = void 0;
@@ -8295,7 +8596,7 @@ var StringUtil = /** @class */ (function () {
 }());
 exports.StringUtil = StringUtil;
 
-},{}],67:[function(require,module,exports){
+},{}],68:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewportUtil = void 0;
@@ -8339,7 +8640,7 @@ var ViewportUtil = /** @class */ (function () {
 }());
 exports.ViewportUtil = ViewportUtil;
 
-},{}],68:[function(require,module,exports){
+},{}],69:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var debouncer = function (func, wait, immediate) {
@@ -8392,7 +8693,7 @@ var debouncer = function (func, wait, immediate) {
 };
 exports.default = debouncer;
 
-},{}],69:[function(require,module,exports){
+},{}],70:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var BankAccountValidator = /** @class */ (function () {
@@ -8406,7 +8707,7 @@ var BankAccountValidator = /** @class */ (function () {
 }());
 exports.default = BankAccountValidator;
 
-},{}],70:[function(require,module,exports){
+},{}],71:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var BankAccountRegistrationNumberValidator = /** @class */ (function () {
@@ -8420,7 +8721,7 @@ var BankAccountRegistrationNumberValidator = /** @class */ (function () {
 }());
 exports.default = BankAccountRegistrationNumberValidator;
 
-},{}],71:[function(require,module,exports){
+},{}],72:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var BankIdNorwayValidator = /** @class */ (function () {
@@ -8443,7 +8744,7 @@ var BankIdNorwayValidator = /** @class */ (function () {
 }());
 exports.default = BankIdNorwayValidator;
 
-},{}],72:[function(require,module,exports){
+},{}],73:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var BankIdSwedenValidator = /** @class */ (function () {
@@ -8466,7 +8767,7 @@ var BankIdSwedenValidator = /** @class */ (function () {
 }());
 exports.default = BankIdSwedenValidator;
 
-},{}],73:[function(require,module,exports){
+},{}],74:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var CprValidator = /** @class */ (function () {
@@ -8543,7 +8844,7 @@ var CprValidator = /** @class */ (function () {
 }());
 exports.default = CprValidator;
 
-},{}],74:[function(require,module,exports){
+},{}],75:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var CvrValidator = /** @class */ (function () {
@@ -8575,7 +8876,36 @@ var CvrValidator = /** @class */ (function () {
 }());
 exports.default = CvrValidator;
 
-},{}],75:[function(require,module,exports){
+},{}],76:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ResidentIdentificationValidator = /** @class */ (function () {
+    function ResidentIdentificationValidator() {
+    }
+    ResidentIdentificationValidator.prototype.isSatisfiedBy = function (input, allowEmpty) {
+        if (allowEmpty === void 0) { allowEmpty = true; }
+        if (allowEmpty && !input) {
+            return true;
+        }
+        var parts = input.split('-');
+        if (parts.length !== 4) {
+            return false;
+        }
+        var _a = parts.map(function (part) { return part.trim(); }), company = _a[0], property = _a[1], tenancy = _a[2], tenant = _a[3];
+        return (this.validatePart(company, 1, 3) &&
+            this.validatePart(property, 1, 4) &&
+            this.validatePart(tenancy, 1, 6) &&
+            this.validatePart(tenant, 1, 4));
+    };
+    ResidentIdentificationValidator.prototype.validatePart = function (part, min, max) {
+        var number = parseInt(part, 10);
+        return !isNaN(number) && part.length >= min && part.length <= max;
+    };
+    return ResidentIdentificationValidator;
+}());
+exports.default = ResidentIdentificationValidator;
+
+},{}],77:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var SECompanyRegistrationValidator = /** @class */ (function () {
@@ -8614,7 +8944,7 @@ var SECompanyRegistrationValidator = /** @class */ (function () {
 }());
 exports.default = SECompanyRegistrationValidator;
 
-},{}],76:[function(require,module,exports){
+},{}],78:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var SEPersonalNumberValidator = /** @class */ (function () {
@@ -8658,7 +8988,7 @@ var SEPersonalNumberValidator = /** @class */ (function () {
 }());
 exports.default = SEPersonalNumberValidator;
 
-},{}],77:[function(require,module,exports){
+},{}],79:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var elementConfig = /** @class */ (function () {
@@ -8711,7 +9041,7 @@ var CustomElement = function (config) {
 };
 exports.default = CustomElement;
 
-},{}],78:[function(require,module,exports){
+},{}],80:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomInputElement = exports.elements = exports.CustomForm = void 0;
@@ -8727,6 +9057,6 @@ Object.defineProperty(exports, "CustomInputElement", { enumerable: true, get: fu
 var elements = require("./elements/Elements");
 exports.elements = elements;
 
-},{"./custom-form":10,"./elements/Elements":24,"./framework/CustomInputElement":39,"@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js":2,"@webcomponents/webcomponentsjs/webcomponents-bundle":3,"@webcomponents/webcomponentsjs/webcomponents-loader.js":4}]},{},[1])
+},{"./custom-form":10,"./elements/Elements":24,"./framework/CustomInputElement":40,"@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js":2,"@webcomponents/webcomponentsjs/webcomponents-bundle":3,"@webcomponents/webcomponentsjs/webcomponents-loader.js":4}]},{},[1])
 
 //# sourceMappingURL=index.min.js.map