@luftborn/custom-elements 2.12.9 → 2.13.1

package/demo/index.min.js

@@ -3543,8 +3543,8 @@ var AddressElement = /** @class */ (function (_super) {
             this.country.setAttribute('required', '');
             this.zip.setAttribute('required', '');
         }
-        if (this.labelId) {
-            this.address.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.address.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3649,7 +3649,7 @@ var AddressElement = /** @class */ (function (_super) {
         (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: 2px;\n\t\t\t\tresize: none;\n\t\t\t\twidth:33% !important;\n\t\t\t}\n\t\t",
+            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",
             templatePath: './html.html',
             useShadow: true,
         })
@@ -3748,8 +3748,8 @@ var BankFieldElement = /** @class */ (function (_super) {
             this.account.setAttribute('required', '');
             this.regNumber.setAttribute('required', '');
         }
-        if (this.labelId) {
-            this.regNumber.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.regNumber.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3782,7 +3782,7 @@ var BankFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], BankFieldElement);
@@ -3855,8 +3855,8 @@ var CPRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3872,7 +3872,7 @@ var CPRElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], CPRElement);
@@ -3945,8 +3945,8 @@ var CVRElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -3962,7 +3962,7 @@ var CVRElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], CVRElement);
@@ -4038,16 +4038,17 @@ var CheckBoxElement = /** @class */ (function (_super) {
         this.checkbox.forEach(function (c) {
             return c.addEventListener('change', _this.change.bind(_this));
         });
-        if (this.labelId) {
-            this.checkbox[0].setAttribute('aria-labelledby', this.labelId);
-        }
     };
     CheckBoxElement.prototype.addCheckBoxes = function () {
         var _this = this;
         var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        wrapper.innerHTML = "";
+        var fieldset = wrapper.querySelector('fieldset');
+        if (this.label) {
+            // fieldset.setAttribute('aria-label', this.label);
+            fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
+        }
         this.options.forEach(function (element, index) {
-            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
+            fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
         });
     };
     // events
@@ -4062,8 +4063,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 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\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: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t",
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\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\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\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",
             useShadow: true,
         })
     ], CheckBoxElement);
@@ -4257,9 +4258,9 @@ var CustomDatepicker = /** @class */ (function () {
         var _this = this;
         var tempCurrentYear = this.currentYear;
         this.selectMonthYear.style.display = 'none';
-        this.selectMonthYear.style.height = '200px';
+        this.selectMonthYear.style.height = '12.5rem';
         if ((0, CustomDatepickerUtils_1.isMobileDevice)()) {
-            this.selectMonthYear.style.height = '300px';
+            this.selectMonthYear.style.height = '18.75rem';
         }
         this.selectMonthYear.innerHTML = '';
         var monthsContainer = document.createElement('div');
@@ -4369,33 +4370,33 @@ var CustomDatepicker = /** @class */ (function () {
         this.datepicker.style.position = 'fixed';
         var datepickerHeight = 250;
         if ((0, CustomDatepickerUtils_1.isMobileDevice)()) {
-            this.datepicker.style.height = '400px';
+            this.datepicker.style.height = '25rem';
             this.datepicker.style.top = '50%';
             this.datepicker.style.left = '50%';
             this.datepicker.style.transform = 'translate(-50%, -50%)';
             this.datepicker.style.width = '90%';
-            this.datepicker.style.maxWidth = '300px';
-            this.datepicker.style.fontSize = '16px';
-            this.datepicker.style.padding = '30px';
-            this.header.style.marginBottom = '20px';
+            this.datepicker.style.maxWidth = '18.75rem';
+            this.datepicker.style.fontSize = '1rem';
+            this.datepicker.style.padding = '1.875rem';
+            this.header.style.marginBottom = '1.25rem';
             var weekdaysSpans = this.weekdays.querySelectorAll('span');
             var daysSpans = this.days.querySelectorAll('span');
-            weekdaysSpans.forEach(function (span) { return span.style.marginBottom = '10px'; });
-            daysSpans.forEach(function (span) { return span.style.marginBottom = '10px'; });
+            weekdaysSpans.forEach(function (span) { return span.style.marginBottom = '0.625rem'; });
+            daysSpans.forEach(function (span) { return span.style.marginBottom = '0.625rem'; });
         }
         else {
-            this.datepicker.style.height = datepickerHeight + 'px';
+            this.datepicker.style.height = datepickerHeight / 16.0 + 'rem';
             var dateInputRect = this.input.getBoundingClientRect();
             datepickerHeight += 20;
             if (window.innerHeight - dateInputRect.bottom < datepickerHeight) {
                 this.datepicker.style.top = 'auto';
-                this.datepicker.style.bottom = window.innerHeight - dateInputRect.top + 'px';
+                this.datepicker.style.bottom = (window.innerHeight - dateInputRect.top) / 16.0 + 'rem';
             }
             else {
                 this.datepicker.style.bottom = 'auto';
-                this.datepicker.style.top = dateInputRect.bottom + 'px';
+                this.datepicker.style.top = dateInputRect.bottom / 16.0 + 'rem';
             }
-            this.datepicker.style.left = dateInputRect.left + 'px';
+            this.datepicker.style.left = dateInputRect.left / 16.0 + 'rem';
         }
     };
     CustomDatepicker.prototype.setDateForToday = function () {
@@ -4467,7 +4468,7 @@ exports.default = CustomDatepicker;
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomDatepickerStyles = void 0;
-exports.CustomDatepickerStyles = "\n    .custom-datepicker {\n        position: fixed;\n        background-color: #fff;\n        display: none;\n        width: 200px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        padding: 10px;\n        margin: 0 auto;\n        box-shadow: 0 0 10px 0 #ccc;\n        font: 12px Arial, sans-serif;\n    }\n\n    .custom-datepicker .custom-datepicer-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 10px;\n    }\n    .custom-datepicker .weekdays {\n        display: flex;\n        justify-content: space-between;\n    }\n    .custom-datepicker .weekdays span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .days span {\n        width: 14.28%;\n        text-align: center;\n        padding: 5px 0;\n    }\n    .custom-datepicker .days span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .days span.today {\n        border: 1px solid #000;\n    }\n    .custom-datepicker .days span.selected-day {\n        background-color: #0075ff;\n        color: #fff;\n    }\n    .custom-datepicker .prev-month, .next-month {\n        cursor: pointer;\n    }\n    .custom-datepicker .month-year {\n        font-weight: bold;\n    }\n    .custom-datepicker .month-year:hover {\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year {\n        display: none;\n        width: 100%;\n        overflow-y: auto;\n    }\n    .custom-datepicker .select-month-year .year {\n        text-align: center;\n        background-color: #f0f0f0;\n        border-bottom: 1px solid #3f3d3d;\n        padding: 5px 0;\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year .year .months {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .select-month-year .year .months span {\n        width: 25%;\n        text-align: center;\n        padding: 10px 0;\n        background-color: #fff;\n    }\n    .custom-datepicker .select-month-year .year .months span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .actions {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n    }\n    .custom-datepicker .actions input {\n        color: #0075ff;\n        border: none;\n        background-color: transparent;\n        padding: 5px;\n        border: 1px solid transparent;\n    }\n    .custom-datepicker .actions input:hover {\n        background-color: #B2d5ff;\n        border-color: #000;\n    }\n";
+exports.CustomDatepickerStyles = "\n    .custom-datepicker {\n        position: fixed;\n        background-color: #fff;\n        display: none;\n        width: 12.5rem;\n        border: 0.063rem solid #ccc;\n        border-radius: 0.313rem;\n        padding: 0.625rem;\n        margin: 0 auto;\n        box-shadow: 0 0 0.625rem 0 #ccc;\n        font: 0.75rem Arial, sans-serif;\n    }\n\n    .custom-datepicker .custom-datepicer-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 0.625rem;\n    }\n    .custom-datepicker .weekdays {\n        display: flex;\n        justify-content: space-between;\n    }\n    .custom-datepicker .weekdays span {\n        width: 14.28%;\n        text-align: center;\n        padding: 0.313rem 0;\n    }\n    .custom-datepicker .days {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .days span {\n        width: 14.28%;\n        text-align: center;\n        padding: 0.313rem 0;\n    }\n    .custom-datepicker .days span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .days span.today {\n        border: 0.063rem solid #000;\n    }\n    .custom-datepicker .days span.selected-day {\n        background-color: #0075ff;\n        color: #fff;\n    }\n    .custom-datepicker .prev-month, .next-month {\n        cursor: pointer;\n    }\n    .custom-datepicker .month-year {\n        font-weight: bold;\n    }\n    .custom-datepicker .month-year:hover {\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year {\n        display: none;\n        width: 100%;\n        overflow-y: auto;\n    }\n    .custom-datepicker .select-month-year .year {\n        text-align: center;\n        background-color: #f0f0f0;\n        border-bottom: 0.063rem solid #3f3d3d;\n        padding: 0.313rem 0;\n        cursor: pointer;\n    }\n    .custom-datepicker .select-month-year .year .months {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .custom-datepicker .select-month-year .year .months span {\n        width: 25%;\n        text-align: center;\n        padding: 0.625rem 0;\n        background-color: #fff;\n    }\n    .custom-datepicker .select-month-year .year .months span:hover {\n        background-color: #B2d5ff;\n        cursor: pointer;\n    }\n    .custom-datepicker .actions {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 0.625rem;\n    }\n    .custom-datepicker .actions input {\n        color: #0075ff;\n        border: none;\n        background-color: transparent;\n        padding: 0.313rem;\n        border: 0.063rem solid transparent;\n    }\n    .custom-datepicker .actions input:hover {\n        background-color: #B2d5ff;\n        border-color: #000;\n    }\n";
 
 },{}],18:[function(require,module,exports){
 "use strict";
@@ -4977,8 +4978,8 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         if (!this.justPreview) {
             this.initCustomPicker();
         }
-        if (this.labelId) {
-            this.date.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5017,7 +5018,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
         (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<svg id=\"picker-trigger\" 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</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: 2px;\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: 10px;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 15px;\n\t\t\theight: 15px;\n\t\t\tposition:absolute;\n\t\t\tright: 2px;\n\t\t\ttop: 15%;\n\t\t}\n\t",
+            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#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t}\n\t",
             useShadow: true,
         })
     ], CustomFormatDateFieldElement);
@@ -5096,8 +5097,8 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         if (this.placeholder) {
             this.text.setAttribute('placeholder', this.placeholder);
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5113,7 +5114,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], CustomRegularExpressionElement);
@@ -5189,8 +5190,8 @@ var DateFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.date.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.date.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5206,7 +5207,7 @@ var DateFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], DateFieldElement);
@@ -5288,8 +5289,8 @@ var DropDownListElement = /** @class */ (function (_super) {
             this.value = this.initialValue;
         }
         this.select.addEventListener('change', this.change.bind(this));
-        if (this.labelId) {
-            this.select.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.select.setAttribute('aria-label', this.label);
         }
     };
     DropDownListElement.prototype.addOptions = function () {
@@ -5316,7 +5317,7 @@ var DropDownListElement = /** @class */ (function (_super) {
         (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 3px;\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: 2px;\n                resize: none;\n            }\n           ",
+            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           ",
             useShadow: true,
         })
     ], DropDownListElement);
@@ -5438,8 +5439,8 @@ var EmailFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.email.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.email.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5455,7 +5456,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], EmailFieldElement);
@@ -5574,8 +5575,8 @@ var FileFieldElement = /** @class */ (function (_super) {
         if (this.multi) {
             this.file.setAttribute('multiple', '');
         }
-        if (this.labelId) {
-            this.file.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.file.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5787,7 +5788,7 @@ var FileFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], FileFieldElement);
@@ -5868,8 +5869,8 @@ var IdentificationElement = /** @class */ (function (_super) {
             this.text.setAttribute('required', '');
         }
         this.type = this.typeSelector.value;
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -5886,7 +5887,7 @@ var IdentificationElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n    input{\n            width: 75% !important;\n    }\n    select{\n            width: 25% !important;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], IdentificationElement);
@@ -5980,8 +5981,8 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
             this.phone.setAttribute('placeholder', this.placeholder);
             this.intlTelInput.options.autoPlaceholder = 'off';
         }
-        if (this.labelId) {
-            this.phone.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.phone.setAttribute('aria-label', this.label);
         }
     };
     IntPhoneFieldElement.prototype.setIntlTelInput = function () {
@@ -6037,7 +6038,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
         (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: 2px;\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           ",
+            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           ",
             useShadow: true,
         })
     ], IntPhoneFieldElement);
@@ -6122,8 +6123,8 @@ var NumericFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.number.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.number.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6139,7 +6140,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], NumericFieldElement);
@@ -6221,16 +6222,16 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.radioButton[0].setAttribute('aria-labelledby', this.labelId);
-        }
     };
     RadioButtonGroupElement.prototype.addRadioButtons = function () {
         var _this = this;
         var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
-        wrapper.innerHTML = "";
+        var fieldset = wrapper.querySelector('fieldset');
+        if (this.label) {
+            fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
+        }
         this.options.forEach(function (element, index) {
-            wrapper.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
+            fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.radioButtonTemplate, _this.name, element, _this.name + "-" + index, "" + (_this.required ? 'required' : '')));
         });
     };
     // events
@@ -6245,8 +6246,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 3px;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 13px;\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: 2px;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t",
+            template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\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.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\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",
             useShadow: true,
         })
     ], RadioButtonGroupElement);
@@ -6319,8 +6320,8 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6336,7 +6337,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n        }",
+            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        }",
             useShadow: true,
         })
     ], SECompanyRegistrationElement);
@@ -6409,8 +6410,8 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6426,7 +6427,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n        }",
+            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        }",
             useShadow: true,
         })
     ], SEPersonalNumberElement);
@@ -6499,8 +6500,8 @@ var TextAreaElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6516,7 +6517,7 @@ var TextAreaElement = /** @class */ (function (_super) {
         (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: 2px;\n            resize: none;\n    }\n           ",
+            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           ",
             useShadow: true,
         })
     ], TextAreaElement);
@@ -6589,8 +6590,8 @@ var TextFieldElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.text.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.text.setAttribute('aria-label', this.label);
         }
     };
     // events
@@ -6606,7 +6607,7 @@ var TextFieldElement = /** @class */ (function (_super) {
         (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: 2px;\n\t\t\tresize: none;\n\t}\n\t\t",
+            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",
             useShadow: true,
         })
     ], TextFieldElement);
@@ -6709,8 +6710,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
         if (this.initialValue) {
             this.value = this.initialValue;
         }
-        if (this.labelId) {
-            this.textInputElement.setAttribute('aria-labelledby', this.labelId);
+        if (this.label) {
+            this.textInputElement.setAttribute('aria-label', this.label);
         }
         this.textInputElement.addEventListener('change', this.change.bind(this));
         this.textInputElement.addEventListener('input', function () {
@@ -6826,7 +6827,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
         (0, custom_element_decorator_1.default)({
             selector: 'type-ahead-element',
             template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></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: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 2px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 1px 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: 200px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 10px;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 1px 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\t/*when navigating through the items using the arrow keys:*/\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: 16px;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 10px;\n\t\t}\n\t",
+            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\t/*when navigating through the items using the arrow keys:*/\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",
             useShadow: true,
         })
     ], TypeAheadElement);
@@ -6978,7 +6979,7 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.customValue = data.value;
             this.dateFormat = data.dateFormat;
             this.initialValue = data.value;
-            this.labelId = data.labelId;
+            this.label = data.label;
         }
         catch (ex) {
             console.error(ex);
@@ -7006,9 +7007,6 @@ var CustomInputElement = /** @class */ (function (_super) {
                 _this.validate();
             }
         });
-        if (this.labelId) {
-            this.createLabelEventListener(this.labelId);
-        }
     };
     CustomInputElement.prototype.setAttributes = function () {
         this.setAttribute("custom-input", "");
@@ -7107,19 +7105,6 @@ var CustomInputElement = /** @class */ (function (_super) {
             this.closest('.custom-validation-target').removeAttribute("hidden");
         }
     };
-    CustomInputElement.prototype.createLabelEventListener = function (labelId) {
-        var _this = this;
-        var label = document.querySelector("[id=\"" + labelId + "\"]");
-        if (label) {
-            label.addEventListener("click", function () {
-                // the input is that have aria-labelledby attribute equal to the this.labelId
-                var input = _this.getChildElement("[aria-labelledby=\"" + labelId + "\"]");
-                if (input) {
-                    input.focus();
-                }
-            });
-        }
-    };
     CustomInputElement.prototype.getChildInput = function (selector) {
         var element = this;
         if (this.shadowRoot) {