@luftborn/custom-elements 2.14.0 → 2.15.0

package/src/elements/CVRElement/CVRElement.ts

@@ -7,25 +7,42 @@ import CvrValidator from '../../framework/Validation/Validators/CVR';
 @CustomElement({
 	selector: 'cvr-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="text" id='cvr-field' placeholder='SSSSSSSS'/>
-			</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 CVRElement extends CustomInputElement {
@@ -50,6 +67,7 @@ export class CVRElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

package/src/elements/CheckBoxElement/CheckBoxElement.ts

@@ -6,8 +6,12 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 @CustomElement({
 	selector: 'checkbox-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
-			</div>`,
+			</div>
+		</div>`,
 	style: `
 			:host{
 				width:100%;
@@ -25,15 +29,28 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 			input[type='checkbox']{
 				box-sizing: border-box;
 				width: auto !important;
-				border: none;
-				background-color: #f1f4ff;
+				border: .1rem solid #27282D;
+				border-radius: .25rem;
 				margin: 0.125rem;
 				resize: none;
 			}
+			input[type='checkbox']::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,
 })
@@ -67,6 +84,8 @@ export class CheckBoxElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		const firstCheckbox = super.getChildElement('input[type="checkbox"]') as HTMLInputElement;
+		super.addLabel(firstCheckbox);
 	}
 
 	initChildInputs() {

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -7,11 +7,15 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
 @CustomElement({
 	selector: 'custom-format-date-element',
 	template: `
-		<div class="wrapper">
-			<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 class="field-label">
+		</div>
+		<div class="field-input">
+			<div class="wrapper">
+				<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>
 		</div>`,
 	style: `
 		:host{
@@ -27,11 +31,14 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
 		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);
+		}
 		#date-field::after {
 			content: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */
 			cursor: pointer;
@@ -54,6 +61,16 @@ import { defaultDateFormat, supportedDateFormats, validateDateString } from './C
 			top: 15%;
 			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,
 })
@@ -83,6 +100,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		this.addLabel(this.date);
 	}
 
 	initChildInputs() {

package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts

@@ -5,25 +5,42 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'regex-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="text" id='regex-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 CustomRegularExpressionElement extends CustomInputElement {
@@ -52,6 +69,7 @@ export class CustomRegularExpressionElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

package/src/elements/DateField/DateFieldElement.ts

@@ -5,25 +5,42 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'date-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="date" id='date-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 DateFieldElement extends CustomInputElement {
@@ -47,6 +64,7 @@ export class DateFieldElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.date);
 	}
 
 	initChildInputs() {

package/src/elements/DropDownList/DropDownListElement.ts

@@ -6,35 +6,52 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
 @CustomElement({
 	selector: 'drop-down-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
                <select id='select-list'>
 			   <option selected disabled>-</option>
                </select>
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-            :host{
-                width:100%;
-            }
-            .wrapper{
-                display:flex;
-                justify-content: center;
-            }
-            .radio-button {
-                width: auto;
-                margin: auto 0.188rem;
-                display: flex;
-                flex-grow: 0.1;
-                justify-content: space-around;
-            }
-            select{
-                box-sizing: border-box;
-                width: 100% !important;
-                border: none;
-                background-color: #f1f4ff;
-                margin: 0.125rem;
-                resize: none;
-            }
-           `,
+		:host{
+			width:100%;
+		}
+		.wrapper{
+			display:flex;
+			justify-content: center;
+		}
+		.radio-button {
+			width: auto;
+			margin: auto 0.188rem;
+			display: flex;
+			flex-grow: 0.1;
+			justify-content: space-around;
+		}
+		select{
+			box-sizing: border-box;
+			width: 100% !important;
+			border: .1rem solid #27282D;
+			border-radius: .25rem;
+			margin: 0.125rem;
+			resize: none;
+		}
+		select::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 DropDownListElement extends CustomInputElement {
@@ -70,6 +87,7 @@ export class DropDownListElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.select);
 	}
 
 	initChildInputs() {

package/src/elements/EmailField/EmailFieldElement.ts

@@ -5,25 +5,42 @@ import { CustomElementEventArgs } from '../../framework/CustomEvents';
 @CustomElement({
 	selector: 'email-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="text" id='email-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 EmailFieldElement extends CustomInputElement {
@@ -53,6 +70,7 @@ export class EmailFieldElement extends CustomInputElement {
 	connectedCallback(): void {
 		this.initChildInputs();
 		super.connectedCallback();
+		super.addLabel(this.email);
 	}
 
 	initChildInputs() {

package/src/elements/FileField/FileFieldElement.ts

@@ -7,25 +7,42 @@ import EXIF = require('exif-js');
 @CustomElement({
 	selector: 'file-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
 				<input type="file" id='file-field' accept="image/*,application/pdf"/>
-			</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 FileFieldElement extends CustomInputElement {
@@ -52,6 +69,7 @@ export class FileFieldElement extends CustomInputElement {
 	connectedCallback(): void {
 		this.initChildInputs();
 		super.connectedCallback();
+		super.addLabel(this.file);
 	}
 
 	componentDidMount() {

package/src/elements/IdentificationElement/IdentificationElement.ts

@@ -10,6 +10,9 @@ import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdN
 @CustomElement({
 	selector: 'id-element',
 	template: `
+		<div class="field-label">
+		</div>
+		<div class="field-input">
 			<div class="wrapper">
                 <select id='id-type'>
                     <option value='cvr'>Danish CVR</option>
@@ -18,28 +21,42 @@ import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdN
                     <option value='nor'>Norway Bank Id</option>
                 </select>
 				<input type="text" id='id-field' placeholder=''/>
-			</div>`,
+			</div>
+		</div>`,
 	style: `
-    :host{
+    	:host{
             width:100%;
-    }
-    .wrapper{
+    	}
+    	.wrapper{
             display:flex;
-    }
-    input, select{
+    	}
+    	input, select{
             box-sizing: border-box;
-            border: none;
-            background-color: #f1f4ff;
+            border: .1rem solid #27282D;
+            border-radius: .25rem;
             margin: 0.125rem;
             resize: none;
-    }
-    input{
+    	}
+    	input{
             width: 75% !important;
-    }
-    select{
+    	}
+    	select{
             width: 25% !important;
-    }
-           `,
+    	}
+		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 IdentificationElement extends CustomInputElement {
@@ -75,6 +92,7 @@ export class IdentificationElement extends CustomInputElement {
 
 	connectedCallback(): void {
 		super.connectedCallback();
+		super.addLabel(this.text);
 	}
 
 	initChildInputs() {

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