@luftborn/custom-elements 2.13.10 → 2.15.0

package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts

@@ -10,35 +10,51 @@ import GetFlags2XUrl from './Flags2x';
 @CustomElement({
 	selector: 'int-phone-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
             <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/css/intlTelInput.css" >
 			<div class="wrapper">
 				<input type="tel" id="phone-field"  />
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-    :host{
+    	:host{
             width:100%;
-    }
-    .wrapper{
+    	}
+    	.wrapper{
             display:flex;
-    }
-    .iti {
-        width: 100% !important;
-    }
-    input{
+    	}
+    	.iti {
+        	width: 100% !important;
+    	}
+    	input{
             box-sizing: border-box;
             width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
+            border: .1rem solid #27282D;
+            border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-    }
-
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-	.iti__flag {
-	  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/img/flags@2x.png'), url(${GetFlags2XUrl()});
-	}
-  }
-           `,
+    	}
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+			.iti__flag {
+			background-image: url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/img/flags@2x.png'), url(${GetFlags2XUrl()});
+			}
+		}
+	`,
 	useShadow: true,
 })
 export class IntPhoneFieldElement extends CustomInputElement {
@@ -68,6 +84,7 @@ export class IntPhoneFieldElement extends CustomInputElement {
 	connectedCallback(): void {
 		this.setIntlTelInput();
 		super.connectedCallback();
+		super.addLabel(this.phone);
 	}
 
 	initChildInputs() {

package/src/elements/NumericField/NumericFieldElement.ts

@@ -5,25 +5,42 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'numeric-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="number" id="numeric-field" step="any" />
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-    :host{
+    	:host{
             width:100%;
-    }
-    .wrapper{
+    	}
+    	.wrapper{
             display:flex;
-    }
-    input{
+    	}
+		input{
             box-sizing: border-box;
             width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
+			border: .1rem solid #27282D;
+			border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-    }
-           `,
+    	}
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class NumericFieldElement extends CustomInputElement {
@@ -50,6 +67,7 @@ export class NumericFieldElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.number);
 	}
 
 	initChildInputs() {

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

@@ -6,35 +6,52 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 @CustomElement({
 	selector: 'radio-group-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-			:host{
-				width:100%;
-			}
-			.radio-button {
-				width: auto;
-				margin: auto 0.188rem;
-				color: rgba(72, 72, 72, 0.75);
-				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: 0.2rem;
-				resize: none;
-			}
-			fieldset {
-				border: none;
-				padding: 0;
-			}
-		`,
+		:host{
+			width:100%;
+		}
+		.radio-button {
+			width: auto;
+			margin: auto 0.188rem;
+			color: rgba(72, 72, 72, 0.75);
+			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: .1rem solid #27282D;
+			border-radius: .25rem;
+			margin: 0.2rem;
+			resize: none;
+		}
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		fieldset {
+			border: none;
+			padding: 0;
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class RadioButtonGroupElement extends CustomInputElement {
@@ -70,6 +87,8 @@ export class RadioButtonGroupElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		const firstRadioButton = super.getChildElement('input[type="radio"]') as HTMLInputElement;
+		super.addLabel(firstRadioButton);
 	}
 
 	initChildInputs() {

package/src/elements/ResidentIdentification/ResidentIdentificationElement.ts

@@ -0,0 +1,155 @@
+import CustomElement from '../../framework/custom-element.decorator';
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import { CustomElementEventArgs } from '../../framework/CustomEvents';
+import Translator from '../../framework/Language/Translator';
+import getAttributeNamesPolyfill from '../../framework/Polyfills/getAttributeNamesPolyfill';
+import ResidentIdentificationValidator from '../../framework/Validation/Validators/ResidentIdentification';
+
+@CustomElement({
+	selector: 'resident-identification-element',
+	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
+			<div class="field-wrapper">
+				<input class='field-part' id='company' type="text" placeholder='Company'/>
+				<input class='field-part' id='property' type="text" placeholder='Property'/>
+				<input class='field-part' id='tenancy' type="text" placeholder='Tenancy'/>
+				<input class='field-part' id='tenant' type="text" placeholder='Tenant'/>
+			</div>
+		</div>`,
+	style: `
+		.field-wrapper{
+			display: flex;
+			flex-wrap: nowrap;
+		}
+		input.field-part{
+			box-sizing: border-box;
+			border: .1rem solid #27282D;
+			border-radius: .25rem;
+			margin: 0.125rem;
+			resize: none;
+			width:33% !important;
+		}
+		input.field-part::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
+	templatePath: './html.html',
+	useShadow: true,
+})
+export class ResidentIdentificationElement extends CustomInputElement {
+	company: HTMLInputElement;
+	property: HTMLInputElement;
+	tenancy: HTMLInputElement;
+	tenant: HTMLInputElement;
+	validator: ResidentIdentificationValidator = new ResidentIdentificationValidator();
+
+	constructor() {
+		super();
+		getAttributeNamesPolyfill();
+	}
+
+	get value(): string {
+		let company = this.company.value || '';
+		let property = this.property.value ? `-${this.property.value}` : '';
+		let tenancy = this.tenancy.value ? `-${this.tenancy.value}` : '';
+		let tenant = this.tenant.value ? `-${this.tenant.value}` : '';
+		return `${company}${property}${tenancy}${tenant}`;
+	}
+
+	set value(value: string) {
+		const values = value.split(',');
+		this.company.value = values[0];
+		this.property.value = values[1];
+		this.tenancy.value = values[2];
+		this.tenant.value = values[3];
+	}
+
+	get valid(): boolean {
+		return this.validator.isSatisfiedBy(this.value, !this.required);
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		super.addLabel(this.company);
+	}
+
+	componentDidMount() {
+		this.initChildInputs();
+		this.getAttributeNames().forEach(attributeName => {
+			let attributeValue = this.getAttribute(attributeName);
+			this.attributeChanged(attributeName, null, attributeValue);
+		});
+	}
+
+	initChildInputs() {
+		this.company = super.getChildInput('#company');
+		this.property = super.getChildInput('#property');
+		this.tenancy = super.getChildInput('#tenancy');
+		this.tenant = super.getChildInput('#tenant');
+		this.company.addEventListener('change', this.change.bind(this));
+		this.property.addEventListener('change', this.change.bind(this));
+		this.tenancy.addEventListener('change', this.change.bind(this));
+		this.tenant.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.company.setAttribute('required', 'required');
+			this.property.setAttribute('required', 'required');
+			this.tenancy.setAttribute('required', 'required');
+			this.tenant.setAttribute('required', 'required');
+		}
+		if (this.label) {
+			const wrapper = this.shadowRoot.querySelector('.field-wrapper');
+			if (wrapper) {
+				wrapper.setAttribute('aria-label', this.label);
+			}
+		}
+	}
+
+	// events
+	public change($event): void {
+		this.touched = true;
+		this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));
+	}
+
+	public validate(): void {
+		this.valid;
+		this.onValidate.emit(
+			new CustomElementEventArgs(this.value, 'validate'),
+		);
+	}
+
+	changeLanguage(language: string) {
+		if (!this.company || !this.property || !this.tenancy || !this.tenant) {
+			return;
+		}
+		this.company.placeholder = Translator.Translate('ResidentIdentificationElement.Company', language);
+		this.property.placeholder = Translator.Translate('ResidentIdentificationElement.Property', language);
+		this.tenancy.placeholder = Translator.Translate('ResidentIdentificationElement.Tenancy', language);
+		this.tenant.placeholder = Translator.Translate('ResidentIdentificationElement.Tenant', language);
+	}
+
+	static get observedAttributes() {
+		return ['language'];
+	}
+	attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+		this.attributeChanged(name, oldVal, newVal);
+	}
+	private attributeChanged(name: string, oldVal: string, newVal: string) {
+		switch (name) {
+			case 'language':
+				this.changeLanguage(newVal)
+				break;
+		}
+	}
+}

package/src/elements/SECompanyRegistrationElement/SECompanyRegistrationElement.ts

@@ -6,8 +6,12 @@ import SECompanyRegistrationValidator from '../../framework/Validation/Validator
 @CustomElement({
 	selector: 'se-company-registration-element',
 	template: `
-        <div class="wrapper">
-            <input type="text" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>
+		<div class="field-label">
+		</div>
+		<div class="field-input">
+			<div class="wrapper">
+				<input type="text" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>
+			</div>	
         </div>`,
 	style: `
         :host{
@@ -19,11 +23,25 @@ import SECompanyRegistrationValidator from '../../framework/Validation/Validator
         input{
             box-sizing: border-box;
             width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
+            border: .1rem solid #27282D;
+            border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-        }`,
+        }
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class SECompanyRegistrationElement extends CustomInputElement {
@@ -48,6 +66,7 @@ export class SECompanyRegistrationElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

package/src/elements/SEPersonalNumberElement/SEPersonalNumberElement.ts

@@ -6,8 +6,12 @@ import SEPersonalNumberValidator from '../../framework/Validation/Validators/SEP
 @CustomElement({
 	selector: 'se-personal-number-element',
 	template: `
-        <div class="wrapper">
-            <input type="text" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>
+		<div class="field-label">
+		</div>
+		<div class="field-input">
+			<div class="wrapper">
+				<input type="text" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>
+			</div>
         </div>`,
 	style: `
         :host{
@@ -19,11 +23,25 @@ import SEPersonalNumberValidator from '../../framework/Validation/Validators/SEP
         input{
             box-sizing: border-box;
             width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
+            border: .1rem solid #27282D;
+            border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-        }`,
+        }
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class SEPersonalNumberElement extends CustomInputElement {
@@ -48,6 +66,7 @@ export class SEPersonalNumberElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

package/src/elements/TextAreaElement/TextAreaElement.ts

@@ -5,25 +5,42 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'text-area-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<textarea rows=5 id='text-area-field'></textarea>
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-    :host{
+    	:host{
             width:100%;
-    }
-    .wrapper{
+    	}
+    	.wrapper{
             display:flex;
-    }
-    textarea{
+    	}
+    	textarea{
             box-sizing: border-box;
             width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
+            border: .1rem solid #27282D;
+            border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-    }
-           `,
+    	}
+		textarea::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class TextAreaElement extends CustomInputElement {
@@ -47,6 +64,7 @@ export class TextAreaElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

package/src/elements/TextField/TextFieldElement.ts

@@ -5,25 +5,43 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'text-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="text" id='text-field' />
-			</div>`,
+			</div>
+		</div>
+	`,
 	style: `
-	:host{
+		:host{
 			width:100%;
-	}
-	.wrapper{
+		}
+		.wrapper{
 			display:flex;
-	}
-	input{
+		}
+		input{
 			box-sizing: border-box;
 			width: 100% !important;
-			border: none;
-			background-color: #f1f4ff;
+			border: .1rem solid #27282D;
+			border-radius: .25rem;
 			margin: 0.125rem;
 			resize: none;
-	}
-		`,
+		}
+		input::placeholder {
+			color: rgb(117, 117, 117);
+		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
+	`,
 	useShadow: true,
 })
 export class TextFieldElement extends CustomInputElement {
@@ -47,7 +65,8 @@ export class TextFieldElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
-	}
+		super.addLabel(this.text);
+	}	
 
 	initChildInputs() {
 		this.text = super.getChildInput('#text-field');

package/src/elements/TypeAhead/TypeAheadElement.ts

@@ -7,12 +7,16 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 @CustomElement({
 	selector: 'type-ahead-element',
 	template: `
-		<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 class="field-label">
+		</div>
+		<div class="field-input">
+			<div class="wrapper" role="combobox" aria-expanded="false" aria-owns="options-list" aria-haspopup="listbox">
+				<input type="text" class="text-input" 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>	
 		</div>`,
 	style: `
 		:host {
@@ -25,14 +29,17 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 			justify-content: center;
 			align-items: center;
 		}
-		#text-input {
+		.text-input {
 			box-sizing: border-box;
 			width: 100% !important;
-			border: none;
-			background-color: #f1f4ff;
+			border: .1rem solid #27282D;
+			border-radius: .25rem;
 			margin: 0.125rem;
 			resize: none;
 		}
+		.text-input::placeholder {
+			color: rgb(117, 117, 117);
+		}
 		.wrapper #description {
 			width: 100%;
 			padding: 0 0.125rem;
@@ -69,6 +76,16 @@ import DomUtility from '../../framework/Utilities/DomUtility';
 		.options-list-item-description {
 			font-size: 0.625rem;
 		}
+		.field-label {
+			color: #27282d;
+			font-size: .75rem;
+			font-weight: 600;
+			word-wrap: break-word;
+		}
+		.field-input {
+			font-size: 0.813rem;
+			min-height: 1.438rem;
+		}
 	`,
 	useShadow: true,
 })
@@ -122,6 +139,7 @@ export class TypeAheadElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.textInputElement);
 	}
 
 	initChildInputs() {