@luftborn/custom-elements 2.14.0 → 2.15.1

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

@@ -8,25 +8,43 @@ import ResidentIdentificationValidator from '../../framework/Validation/Validato
 @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>`,
-	style: `.field-wrapper{
-				display: flex;
-				flex-wrap: nowrap;
-			}
-			input.field-part{
-				box-sizing: border-box;
-				border: none;
-				background-color: #f1f4ff;
-				margin: 0.125rem;
-				resize: none;
-				width:33% !important;
-			}
-		`,
+			</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,
 })
@@ -64,6 +82,7 @@ export class ResidentIdentificationElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.company);
 	}
 
 	componentDidMount() {

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() {

package/src/framework/CustomInputElement.ts

@@ -36,6 +36,8 @@ export abstract class CustomInputElement extends HTMLElement {
 	public dateFormat: string;
 	public initialValue: any;
 
+	public hideLabel: boolean = false;
+
 	constructor() {
 		super();
 	}
@@ -136,6 +138,7 @@ export abstract class CustomInputElement extends HTMLElement {
 	private setAttributes(): void {
 		this.setAttribute("custom-input", "");
 		this.setAttribute("name", this.name);
+		this.hideLabel = this.hasAttribute('hide-label') || this.hasAttribute('hideLabel');
 	}
 
 	private bindDependencies(): void {
@@ -277,6 +280,32 @@ export abstract class CustomInputElement extends HTMLElement {
 		return element.querySelectorAll(selector) as HTMLElement[];
 	}
 
+	protected addLabel(inputField: HTMLInputElement | HTMLSelectElement): void {
+		if (this.hideLabel) {
+			const fieldLabel = this.shadowRoot.querySelector('.field-label');
+			if (fieldLabel) {
+				fieldLabel.remove();
+			}
+			return;
+		}
+
+		if (this.label) {
+			const randomId = Math.random().toString(36).substring(2, 15);
+			inputField.id = `text-field-${randomId}`;
+			const newLabel = document.createElement('label');
+			newLabel.setAttribute('for', inputField.id);
+			newLabel.classList.add('field-label');
+			newLabel.textContent = `${this.label}: `;
+			const fieldLabel = this.shadowRoot.querySelector('.field-label');
+			if (fieldLabel) {
+				fieldLabel.appendChild(newLabel);
+			}
+			if (this.required) {
+				newLabel.innerHTML += '<span style="color: #e00040">*</span>';
+			}
+		}
+	}
+
 	public RegisterDependentOn(name: string, initialValue: boolean = false) {
 		this.dependentOnList[name] = initialValue;
 		this.setVisibility();