@luftborn/custom-elements 2.13.0 → 2.13.2

package/demo/index.min.js

@@ -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,
         })
@@ -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);
@@ -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);
@@ -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);
@@ -4064,7 +4064,7 @@ var CheckBoxElement = /** @class */ (function (_super) {
         (0, custom_element_decorator_1.default)({
             selector: 'checkbox-element',
             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 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\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: 1px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 1px;\n\t\t\t}\n\t\t",
+            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);
@@ -4258,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');
@@ -4370,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 () {
@@ -4435,6 +4435,9 @@ var CustomDatepicker = /** @class */ (function () {
             if (event.key === 'Enter') {
                 _this.setDateUsingInputValue();
             }
+            if (event.key === 'Escape' || event.key === 'Tab') {
+                _this.showPicker(false);
+            }
         });
         this.otherTriggers.forEach(function (trigger) {
             trigger.addEventListener('click', function () { return _this.showPicker(true); });
@@ -4468,7 +4471,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: #0070F0;\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: #0070F0;\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";
@@ -5017,8 +5020,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<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",
+            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: 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\tpadding: 0;\n\t\t}\n\t",
             useShadow: true,
         })
     ], CustomFormatDateFieldElement);
@@ -5114,7 +5117,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);
@@ -5207,7 +5210,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);
@@ -5317,7 +5320,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);
@@ -5456,7 +5459,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);
@@ -5788,7 +5791,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);
@@ -5887,7 +5890,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);
@@ -6038,7 +6041,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);
@@ -6140,7 +6143,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);
@@ -6247,7 +6250,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
         (0, custom_element_decorator_1.default)({
             selector: 'radio-group-element',
             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 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\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: 1px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 1px;\n\t\t\t}\n\t\t\tfieldset {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t",
+            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);
@@ -6337,7 +6340,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);
@@ -6427,7 +6430,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);
@@ -6517,7 +6520,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);
@@ -6607,7 +6610,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);
@@ -6699,7 +6702,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
     TypeAheadElement.prototype.initChildInputs = function () {
         var _this = this;
         this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
-        this.descriptionElement = _super.prototype.getChildInput.call(this, '#description');
+        this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
+        this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
         this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
         if (this.required) {
             this.textInputElement.setAttribute('required', '');
@@ -6744,6 +6748,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
             }
             _this.searchResultOptions.push(option);
             var optionsListItem = document.createElement("div");
+            optionsListItem.setAttribute('role', 'option');
+            optionsListItem.setAttribute('id', "option-" + index);
+            optionsListItem.setAttribute('aria-selected', 'false');
             optionsListItem.classList.add('options-list-item');
             optionsListItem.dataset['value'] = option.value;
             optionslist.appendChild(optionsListItem);
@@ -6758,16 +6765,16 @@ var TypeAheadElement = /** @class */ (function (_super) {
             optionsListItem.addEventListener('mousedown', function () {
                 _this.optionSelectedHandler(option);
             });
-            _this.componentWrapper.appendChild(optionslist);
+            _this.optionsListElement.appendChild(optionsListItem);
         });
+        this.optionsListElement.hidden = false;
+        this.updateAriaAttributes();
     };
     TypeAheadElement.prototype.closeOptionsList = function () {
         this.currentFoucsedIndex = -1;
-        var optionsList = _super.prototype.getChildElement.call(this, '.options-list');
-        if (!optionsList) {
-            return;
-        }
-        optionsList.remove();
+        this.optionsListElement.innerHTML = '';
+        this.optionsListElement.hidden = true;
+        this.updateAriaAttributes();
     };
     TypeAheadElement.prototype.optionSelectedHandler = function (option) {
         this.value = option.value;
@@ -6786,6 +6793,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
                 }
                 _this.currentFoucsedIndex = _this.currentFoucsedIndex === _this.searchResultOptions.length - 1 ? 0 : _this.currentFoucsedIndex + 1;
                 _this.highlightFocusedSearchResult();
+                _this.scrollToFocusedOption();
             }
             if (event.key === 'ArrowUp') {
                 if (!_this.searchHasResults) {
@@ -6793,6 +6801,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
                 }
                 _this.currentFoucsedIndex = _this.currentFoucsedIndex === 0 ? _this.searchResultOptions.length - 1 : _this.currentFoucsedIndex - 1;
                 _this.highlightFocusedSearchResult();
+                _this.scrollToFocusedOption();
             }
             if (event.key === 'Enter') {
                 if (_this.currentFoucsedIndex !== -1 && _this.searchHasResults) {
@@ -6802,6 +6811,12 @@ var TypeAheadElement = /** @class */ (function (_super) {
             }
         });
     };
+    TypeAheadElement.prototype.scrollToFocusedOption = function () {
+        var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
+        if (optionListItems && optionListItems[this.currentFoucsedIndex]) {
+            optionListItems[this.currentFoucsedIndex].scrollIntoView({ block: 'nearest' });
+        }
+    };
     TypeAheadElement.prototype.highlightFocusedSearchResult = function () {
         var _this = this;
         var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
@@ -6809,12 +6824,17 @@ var TypeAheadElement = /** @class */ (function (_super) {
             return;
         }
         optionListItems.forEach(function (listItem, index) {
+            listItem.setAttribute('aria-selected', String(index === _this.currentFoucsedIndex));
             listItem.classList.remove('active');
             if (index === _this.currentFoucsedIndex) {
                 listItem.classList.add('active');
+                _this.textInputElement.setAttribute('aria-activedescendant', listItem.id);
             }
         });
     };
+    TypeAheadElement.prototype.updateAriaAttributes = function () {
+        this.textInputElement.setAttribute('aria-expanded', String(!this.optionsListElement.hidden));
+    };
     TypeAheadElement.prototype.change = function ($event) {
         this.touched = true;
         this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
@@ -6826,8 +6846,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\">\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",
+            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",
             useShadow: true,
         })
     ], TypeAheadElement);