@luftborn/custom-elements 2.13.0 → 2.13.2

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -8,8 +8,10 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
 	selector: 'custom-format-date-element',
 	template: `
 		<div class="wrapper">
-			<input type="text" id="date-field" />
-			<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>
+			<input type="text" id="date-field">
+			<button id="picker-trigger" aria-label="Open date picker">
+				<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>
+			</button>
 		</div>`,
 	style: `
 		:host{
@@ -27,21 +29,28 @@ 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;
+		}
+		.svg-picker {
+			width: 0.938rem;
+			height: 0.938rem;
 		}
 		#picker-trigger {
 			cursor: pointer;
-			width: 15px;
-			height: 15px;
+			background-color: transparent;
+			border: none;
+			width: 0.938rem;
+			height: 0.938rem;
 			position:absolute;
-			right: 2px;
+			right: 0.125rem;
 			top: 15%;
+			padding: 0;
 		}
 	`,
 	useShadow: true,

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;
     }
            `,

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;
     }
            `,

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;
             }
            `,

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;
     }
            `,

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;
     }
            `,

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{

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;
     }
 

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;
     }
            `,

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

@@ -15,29 +15,34 @@ 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: 1px;
+				height: 0.063rem;
 				overflow: hidden;
 				position: absolute;
 				white-space: nowrap; 
-				width: 1px;
+				width: 0.063rem;
 			}
 			fieldset {
 				border: none;
+				padding: 0;
 			}
 		`,
 	useShadow: true,

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,

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,

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;
     }
            `,

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;
 	}
 		`,

package/src/elements/TypeAhead/TypeAheadElement.ts

@@ -7,9 +7,12 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 @CustomElement({
 	selector: 'type-ahead-element',
 	template: `
-		<div class="wrapper">
-			<input type="text" id="text-input">
-			<div id="description"></div>
+		<div class="wrapper" role="combobox" aria-expanded="false" aria-owns="options-list" aria-haspopup="listbox">
+			<input type="text" id="text-input" aria-autocomplete="list" aria-controls="options-list" aria-activedescendant="" role="textbox">
+			<div id="description" aria-live="polite"></div>
+			<div id="options-list" role="listbox" class="options-list" hidden>
+				<!-- Options will be dynamically added here -->
+			</div>
 		</div>`,
 	style: `
 		:host {
@@ -27,45 +30,44 @@ 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;
 		}
 		.options-list-item.active {
-			/*when navigating through the items using the arrow keys:*/
 			background-color: #003E64 !important;
 			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,
@@ -75,6 +77,7 @@ export class TypeAheadElement extends CustomInputElement {
 	private textInputElement: HTMLInputElement;
 	private descriptionElement: HTMLElement;
 	private componentWrapper: HTMLElement;
+	private optionsListElement: HTMLElement;
 	private currentFoucsedIndex = -1;
 
 	selectedOption: OptionWithDescription;
@@ -123,14 +126,15 @@ export class TypeAheadElement extends CustomInputElement {
 
 	initChildInputs() {
 		this.textInputElement = super.getChildInput('#text-input');
-		this.descriptionElement = super.getChildInput('#description');
+		this.descriptionElement = super.getChildElement('#description');
+		this.optionsListElement = super.getChildElement('#options-list');
 		this.componentWrapper = super.getChildElement('.wrapper');
 		if (this.required) {
 			this.textInputElement.setAttribute('required', '');
 		}
-        if (this.placeholder) {
-            this.textInputElement.setAttribute('placeholder', this.placeholder);
-        }
+		if (this.placeholder) {
+			this.textInputElement.setAttribute('placeholder', this.placeholder);
+		}
 		if (this.initialValue) {
 			this.value = this.initialValue;
 		}
@@ -169,6 +173,9 @@ export class TypeAheadElement extends CustomInputElement {
 			}
 			this.searchResultOptions.push(option);
 			const 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);
@@ -183,17 +190,17 @@ export class TypeAheadElement extends CustomInputElement {
 			optionsListItem.addEventListener('mousedown', () => {
 				this.optionSelectedHandler(option);
 			});
-			this.componentWrapper.appendChild(optionslist);
+			this.optionsListElement.appendChild(optionsListItem);
 		});
+		this.optionsListElement.hidden = false;
+		this.updateAriaAttributes();
 	}
 
 	private closeOptionsList() {
 		this.currentFoucsedIndex = -1;
-		const optionsList = super.getChildElement('.options-list');
-		if (!optionsList) {
-			return;
-		}
-		optionsList.remove();
+		this.optionsListElement.innerHTML = '';
+		this.optionsListElement.hidden = true;
+		this.updateAriaAttributes();
 	}
 
 	private optionSelectedHandler(option: OptionWithDescription) {
@@ -213,6 +220,7 @@ export class TypeAheadElement extends CustomInputElement {
 				}
 				this.currentFoucsedIndex = this.currentFoucsedIndex === this.searchResultOptions.length - 1 ? 0 : this.currentFoucsedIndex + 1;
 				this.highlightFocusedSearchResult();
+				this.scrollToFocusedOption();
 			}
 			if (event.key === 'ArrowUp') {
 				if (!this.searchHasResults) {
@@ -220,6 +228,7 @@ export class TypeAheadElement extends CustomInputElement {
 				}
 				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) {
@@ -230,19 +239,32 @@ export class TypeAheadElement extends CustomInputElement {
 		});
 	}
 
+	private scrollToFocusedOption() {
+		const optionListItems = super.getChildElements('.options-list-item');
+		if (optionListItems && optionListItems[this.currentFoucsedIndex]) {
+			optionListItems[this.currentFoucsedIndex].scrollIntoView({ block: 'nearest' });
+		}
+	}
+
 	highlightFocusedSearchResult() {
 		const optionListItems = super.getChildElements('.options-list-item');
 		if (!optionListItems) {
 			return;
 		}
 		optionListItems.forEach((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);
 			}
 		});
 	}
 
+	private updateAriaAttributes() {
+		this.textInputElement.setAttribute('aria-expanded', String(!this.optionsListElement.hidden));
+	}
+
 	public change($event): void {
 		this.touched = true;
 		this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));