@luftborn/custom-elements 2.12.9 → 2.13.1

package/src/elements/CVRElement/CVRElement.ts

@@ -22,7 +22,7 @@ import CvrValidator from '../../framework/Validation/Validators/CVR';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -61,8 +61,8 @@ export class CVRElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/CheckBoxElement/CheckBoxElement.ts

@@ -7,6 +7,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 	selector: 'checkbox-element',
 	template: `
 			<div class="wrapper">
+				<fieldset></fieldset>
 			</div>`,
 	style: `
 			:host{
@@ -14,18 +15,35 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 			}
 			.checkbox {
 				width: auto;
-				margin: auto 3px;
+				margin: auto 0.188rem;
 				color: rgba(72, 72, 72, 0.75);
-				font-size: 13px;
+				font-size: 0.813rem;
+				margin-top: 0.25rem;
+			}
+			.checkbox:first-of-type {
+				margin-top: 0;
 			}
 			input[type='checkbox']{
 				box-sizing: border-box;
 				width: auto !important;
 				border: none;
 				background-color: #f1f4ff;
-				margin: 2px;
+				margin: 0.125rem;
 				resize: none;
 			}
+			.sr-only:not(:focus):not(:active) {
+				clip: rect(0 0 0 0); 
+				clip-path: inset(50%);
+				height: 0.063rem;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap; 
+				width: 0.063rem;
+			}
+			fieldset {
+				border: none;
+				padding: 0;
+			}
 		`,
 	useShadow: true,
 })
@@ -67,16 +85,20 @@ export class CheckBoxElement extends CustomInputElement {
 		this.checkbox.forEach(c =>
 			c.addEventListener('change', this.change.bind(this)),
 		);
-		if (this.labelId) {
-			this.checkbox[0].setAttribute('aria-labelledby', this.labelId);
-		}
 	}
 
 	private addCheckBoxes() {
 		const wrapper = super.getChildElement('.wrapper');
-		wrapper.innerHTML = "";
+		const 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((element, index) => {
-			wrapper.insertAdjacentHTML(
+			fieldset.insertAdjacentHTML(
 				'beforeend',
 				StringUtil.StringFormat(
 					this.checkboxTemplate,

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts

@@ -223,9 +223,9 @@ export default class CustomDatepicker {
         let tempCurrentYear = this.currentYear;
         
         this.selectMonthYear.style.display = 'none';
-        this.selectMonthYear.style.height = '200px';
+        this.selectMonthYear.style.height = '12.5rem';
         if (isMobileDevice()) {
-            this.selectMonthYear.style.height = '300px';
+            this.selectMonthYear.style.height = '18.75rem';
         }
         this.selectMonthYear.innerHTML = '';
         let monthsContainer = document.createElement('div');
@@ -331,31 +331,31 @@ export default class CustomDatepicker {
         
         let datepickerHeight = 250;
         if (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';
             let weekdaysSpans = this.weekdays.querySelectorAll('span');
             let daysSpans = this.days.querySelectorAll('span');
-            weekdaysSpans.forEach(span => span.style.marginBottom = '10px');
-            daysSpans.forEach(span => span.style.marginBottom = '10px');
+            weekdaysSpans.forEach(span => span.style.marginBottom = '0.625rem');
+            daysSpans.forEach(span => span.style.marginBottom = '0.625rem');
         } else {
-            this.datepicker.style.height = datepickerHeight + 'px';
+            this.datepicker.style.height = datepickerHeight / 16.0 + 'rem';
             let 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';
         }
     }
 

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.ts

@@ -3,20 +3,20 @@ export const CustomDatepickerStyles = `
         position: fixed;
         background-color: #fff;
         display: none;
-        width: 200px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        padding: 10px;
+        width: 12.5rem;
+        border: 0.063rem solid #ccc;
+        border-radius: 0.313rem;
+        padding: 0.625rem;
         margin: 0 auto;
-        box-shadow: 0 0 10px 0 #ccc;
-        font: 12px Arial, sans-serif;
+        box-shadow: 0 0 0.625rem 0 #ccc;
+        font: 0.75rem Arial, sans-serif;
     }
 
     .custom-datepicker .custom-datepicer-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 0.625rem;
     }
     .custom-datepicker .weekdays {
         display: flex;
@@ -25,7 +25,7 @@ export const CustomDatepickerStyles = `
     .custom-datepicker .weekdays span {
         width: 14.28%;
         text-align: center;
-        padding: 5px 0;
+        padding: 0.313rem 0;
     }
     .custom-datepicker .days {
         display: flex;
@@ -34,14 +34,14 @@ export const CustomDatepickerStyles = `
     .custom-datepicker .days span {
         width: 14.28%;
         text-align: center;
-        padding: 5px 0;
+        padding: 0.313rem 0;
     }
     .custom-datepicker .days span:hover {
         background-color: #B2d5ff;
         cursor: pointer;
     }
     .custom-datepicker .days span.today {
-        border: 1px solid #000;
+        border: 0.063rem solid #000;
     }
     .custom-datepicker .days span.selected-day {
         background-color: #0075ff;
@@ -64,8 +64,8 @@ export const CustomDatepickerStyles = `
     .custom-datepicker .select-month-year .year {
         text-align: center;
         background-color: #f0f0f0;
-        border-bottom: 1px solid #3f3d3d;
-        padding: 5px 0;
+        border-bottom: 0.063rem solid #3f3d3d;
+        padding: 0.313rem 0;
         cursor: pointer;
     }
     .custom-datepicker .select-month-year .year .months {
@@ -75,7 +75,7 @@ export const CustomDatepickerStyles = `
     .custom-datepicker .select-month-year .year .months span {
         width: 25%;
         text-align: center;
-        padding: 10px 0;
+        padding: 0.625rem 0;
         background-color: #fff;
     }
     .custom-datepicker .select-month-year .year .months span:hover {
@@ -85,14 +85,14 @@ export const CustomDatepickerStyles = `
     .custom-datepicker .actions {
         display: flex;
         justify-content: space-between;
-        margin-top: 10px;
+        margin-top: 0.625rem;
     }
     .custom-datepicker .actions input {
         color: #0075ff;
         border: none;
         background-color: transparent;
-        padding: 5px;
-        border: 1px solid transparent;
+        padding: 0.313rem;
+        border: 0.063rem solid transparent;
     }
     .custom-datepicker .actions input:hover {
         background-color: #B2d5ff;

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -27,20 +27,20 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
 			width: 100% !important;
 			border: none;
 			background-color: #f1f4ff;
-			margin: 2px;
+			margin: 0.125rem;
 			resize: none;
 		}
 		#date-field::after {
 			content: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */
 			cursor: pointer;
-			right: 10px;
+			right: 0.625rem;
 		}
 		#picker-trigger {
 			cursor: pointer;
-			width: 15px;
-			height: 15px;
+			width: 0.938rem;
+			height: 0.938rem;
 			position:absolute;
-			right: 2px;
+			right: 0.125rem;
 			top: 15%;
 		}
 	`,
@@ -102,8 +102,8 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -66,8 +66,8 @@ export class CustomRegularExpressionElement extends CustomInputElement {
         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);
 		}
 	}
 

package/src/elements/DateField/DateFieldElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -64,8 +64,8 @@ export class DateFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/DropDownList/DropDownListElement.ts

@@ -21,7 +21,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
             }
             .radio-button {
                 width: auto;
-                margin: auto 3px;
+                margin: auto 0.188rem;
                 display: flex;
                 flex-grow: 0.1;
                 justify-content: space-around;
@@ -31,7 +31,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
                 width: 100% !important;
                 border: none;
                 background-color: #f1f4ff;
-                margin: 2px;
+                margin: 0.125rem;
                 resize: none;
             }
            `,
@@ -85,8 +85,8 @@ export class DropDownListElement extends CustomInputElement {
 			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);
 		}
 	}
 

package/src/elements/EmailField/EmailFieldElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -67,8 +67,8 @@ export class EmailFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/FileField/FileFieldElement.ts

@@ -22,7 +22,7 @@ import EXIF = require('exif-js');
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -71,8 +71,8 @@ export class FileFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/IdentificationElement/IdentificationElement.ts

@@ -30,7 +30,7 @@ import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdN
             box-sizing: border-box;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
     input{
@@ -86,8 +86,8 @@ export class IdentificationElement extends CustomInputElement {
 			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);
 		}
 	}
 

package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts

@@ -29,7 +29,7 @@ import GetFlags2XUrl from './Flags2x';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
 
@@ -79,8 +79,8 @@ export class IntPhoneFieldElement extends CustomInputElement {
             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);
 		}
 	}
 	setIntlTelInput() {

package/src/elements/NumericField/NumericFieldElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -73,8 +73,8 @@ export class NumericFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

@@ -7,6 +7,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 	selector: 'radio-group-element',
 	template: `
 			<div class="wrapper">
+				<fieldset></fieldset>
 			</div>`,
 	style: `
 			:host{
@@ -14,18 +15,35 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 			}
 			.radio-button {
 				width: auto;
-				margin: auto 3px;
+				margin: auto 0.188rem;
 				color: rgba(72, 72, 72, 0.75);
-				font-size: 13px;
+				font-size: 0.813rem;
+				margin-top: 0.25rem;
+			}
+			.radio-button:first-of-type {
+				margin-top: 0;
 			}
 			input{
 				box-sizing: border-box;
 				width: auto !important;
 				border: none;
 				background-color: #f1f4ff;
-				margin: 2px;
+				margin: 0.125rem;
 				resize: none;
 			}
+			.sr-only:not(:focus):not(:active) {
+				clip: rect(0 0 0 0); 
+				clip-path: inset(50%);
+				height: 0.063rem;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap; 
+				width: 0.063rem;
+			}
+			fieldset {
+				border: none;
+				padding: 0;
+			}
 		`,
 	useShadow: true,
 })
@@ -73,16 +91,19 @@ export class RadioButtonGroupElement extends CustomInputElement {
 		if (this.initialValue) {
 			this.value = this.initialValue;
 		}
-		if (this.labelId) {
-			this.radioButton[0].setAttribute('aria-labelledby', this.labelId);
-		}
 	}
 
 	private addRadioButtons() {
 		const wrapper = super.getChildElement('.wrapper');
-		wrapper.innerHTML = "";
+		const fieldset = wrapper.querySelector('fieldset');
+		if (this.label) {
+			fieldset.insertAdjacentHTML(
+				'beforeend',
+				`<legend class="sr-only">${this.label}</legend>`,
+			);
+		}
 		this.options.forEach((element, index) => {
-			wrapper.insertAdjacentHTML(
+			fieldset.insertAdjacentHTML(
 				'beforeend',
 				StringUtil.StringFormat(
 					this.radioButtonTemplate,

package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts

@@ -21,7 +21,7 @@ import SECompanyRegistrationValidator from '../../framework/Validation/Validator
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
         }`,
 	useShadow: true,
@@ -59,8 +59,8 @@ export class SECompanyRegistrationElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts

@@ -21,7 +21,7 @@ import SEPersonalNumberValidator from '../../framework/Validation/Validators/SEP
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
         }`,
 	useShadow: true,
@@ -59,8 +59,8 @@ export class SEPersonalNumberElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/TextAreaElement/TextAreaElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
             width: 100% !important;
             border: none;
             background-color: #f1f4ff;
-            margin: 2px;
+            margin: 0.125rem;
             resize: none;
     }
            `,
@@ -61,8 +61,8 @@ export class TextAreaElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/TextField/TextFieldElement.ts

@@ -20,7 +20,7 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 			width: 100% !important;
 			border: none;
 			background-color: #f1f4ff;
-			margin: 2px;
+			margin: 0.125rem;
 			resize: none;
 	}
 		`,
@@ -61,8 +61,8 @@ export class TextFieldElement extends CustomInputElement {
 		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);
 		}
 	}
 

package/src/elements/TypeAhead/TypeAheadElement.ts

@@ -27,31 +27,31 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 			width: 100% !important;
 			border: none;
 			background-color: #f1f4ff;
-			margin: 2px;
+			margin: 0.125rem;
 			resize: none;
 		}
 		.wrapper #description {
 			width: 100%;
-			padding: 0 2px;
+			padding: 0 0.125rem;
 			box-sizing: border-box;
 		}
 		.options-list {
 			position: absolute;
-			border: 1px solid #E8E8E8;
+			border: 0.063rem solid #E8E8E8;
 			border-bottom: none;
 			border-top: none;
 			z-index: 3;
 			top: 100%;
 			left: 0;
 			right: 0;
-			max-height: 200px;
+			max-height: 12.5rem;
 			overflow-y: auto;
 		}
 		.options-list-item {
-			padding: 10px;
+			padding: 0.625rem;
 			cursor: pointer;
 			background-color: #FFFFFF;
-			border-bottom: 1px solid #E8E8E8;
+			border-bottom: 0.063rem solid #E8E8E8;
 		}
 		.options-list-item:hover {
 			background-color: #E8E8E8;
@@ -62,10 +62,10 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 			color: #FFFFFF;
 		}
 		.options-list-item-title {
-			font-size: 16px;
+			font-size: 1rem;
 		}
 		.options-list-item-description {
-			font-size: 10px;
+			font-size: 0.625rem;
 		}
 	`,
 	useShadow: true,
@@ -134,8 +134,8 @@ export class TypeAheadElement extends CustomInputElement {
 		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', () => {