@luftborn/custom-elements 1.4.0 → 2.0.0

package/src/elements/IdentificationElement/IdentificationElement.ts

@@ -1,104 +1,104 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import CprValidator from '../../framework/Validation/Validators/CPR';
-import IValidator from '../../framework/Validation/IValidator.interface';
-import CvrValidator from '../../framework/Validation/Validators/CVR';
-import BankIdSwedenValidator from '../../framework/Validation/Validators/BankIdSweden';
-import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdNorway';
-
-@CustomElement({
-	selector: 'id-element',
-	template: `
-			<div class="wrapper">
-                <select id='id-type'>
-                    <option value='cvr'>Danish CVR</option>
-                    <option value='cpr'>Danish CPR</option>
-                    <option value='swe'>Sweden Bank Id</option>
-                    <option value='nor'>Norway Bank Id</option>
-                </select>
-				<input type="text" id='id-field' placeholder=''/>
-			</div>`,
-	style: `
-    :host{
-            width:100%;
-    }
-    .wrapper{
-            display:flex;
-    }
-    input, select{
-            box-sizing: border-box;
-            border: none;
-            background-color: #f1f4ff;
-            margin: 2px;
-            resize: none;
-    }
-    input{
-            width: 75% !important;
-    }
-    select{
-            width: 25% !important;
-    }
-           `,
-	useShadow: true,
-})
-export class IdentificationElement extends CustomInputElement {
-	typeSelector: HTMLInputElement;
-	text: HTMLInputElement;
-
-	type: string;
-	validators: { [index: string]: IValidator } = {
-		cpr: new CprValidator(),
-		cvr: new CvrValidator(),
-		swe: new BankIdSwedenValidator(),
-		nor: new BankIdNorwayValidator(),
-	};
-
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return `${this.text.value}`;
-	}
-
-	set value(value: string) {
-		this.text.value = value;
-	}
-
-	get valid(): boolean {
-		return this.validators[this.type].isSatisfiedBy(
-			this.value,
-			!this.required,
-		);
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.text = super.getChildInput('#id-field');
-		this.typeSelector = super.getChildInput('#id-type');
-		this.text.addEventListener('change', this.change.bind(this));
-		this.typeSelector.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.text.setAttribute('required', '');
-		}
-		this.type = this.typeSelector.value;
-	}
-
-	// events
-	public change($event): void {
-		this.touched = true;
-		this.type = this.typeSelector.value;
-		this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));
-	}
-
-	public validate(): void {
-		this.valid;
-		this.onValidate.emit(
-			new CustomElementEventArgs(this.value, 'validate'),
-		);
-	}
-}
+import CustomElement from '../../framework/custom-element.decorator';
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import { CustomElementEventArgs } from '../../framework/CustomEvents';
+import CprValidator from '../../framework/Validation/Validators/CPR';
+import IValidator from '../../framework/Validation/IValidator.interface';
+import CvrValidator from '../../framework/Validation/Validators/CVR';
+import BankIdSwedenValidator from '../../framework/Validation/Validators/BankIdSweden';
+import BankIdNorwayValidator from '../../framework/Validation/Validators/BankIdNorway';
+
+@CustomElement({
+	selector: 'id-element',
+	template: `
+			<div class="wrapper">
+                <select id='id-type'>
+                    <option value='cvr'>Danish CVR</option>
+                    <option value='cpr'>Danish CPR</option>
+                    <option value='swe'>Sweden Bank Id</option>
+                    <option value='nor'>Norway Bank Id</option>
+                </select>
+				<input type="text" id='id-field' placeholder=''/>
+			</div>`,
+	style: `
+    :host{
+            width:100%;
+    }
+    .wrapper{
+            display:flex;
+    }
+    input, select{
+            box-sizing: border-box;
+            border: none;
+            background-color: #f1f4ff;
+            margin: 2px;
+            resize: none;
+    }
+    input{
+            width: 75% !important;
+    }
+    select{
+            width: 25% !important;
+    }
+           `,
+	useShadow: true,
+})
+export class IdentificationElement extends CustomInputElement {
+	typeSelector: HTMLInputElement;
+	text: HTMLInputElement;
+
+	type: string;
+	validators: { [index: string]: IValidator } = {
+		cpr: new CprValidator(),
+		cvr: new CvrValidator(),
+		swe: new BankIdSwedenValidator(),
+		nor: new BankIdNorwayValidator(),
+	};
+
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return `${this.text.value}`;
+	}
+
+	set value(value: string) {
+		this.text.value = value;
+	}
+
+	get valid(): boolean {
+		return this.validators[this.type].isSatisfiedBy(
+			this.value,
+			!this.required,
+		);
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.text = super.getChildInput('#id-field');
+		this.typeSelector = super.getChildInput('#id-type');
+		this.text.addEventListener('change', this.change.bind(this));
+		this.typeSelector.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.text.setAttribute('required', '');
+		}
+		this.type = this.typeSelector.value;
+	}
+
+	// events
+	public change($event): void {
+		this.touched = true;
+		this.type = this.typeSelector.value;
+		this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));
+	}
+
+	public validate(): void {
+		this.valid;
+		this.onValidate.emit(
+			new CustomElementEventArgs(this.value, 'validate'),
+		);
+	}
+}

package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts

@@ -1,116 +1,116 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import * as intlTelInput from 'intl-tel-input';
-import { Plugin } from 'intl-tel-input';
-import MakeRequest from '../../framework/Utilities/MakeRequest';
-
-@CustomElement({
-	selector: 'int-phone-element',
-	template: `
-            <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>`,
-	style: `
-    :host{
-            width:100%;
-    }
-    .wrapper{
-            display:flex;
-    }
-    .iti {
-        width: 100% !important;
-    }
-    input{
-            box-sizing: border-box;
-            width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
-            margin: 2px;
-            resize: none;
-    }
-           `,
-	useShadow: true,
-})
-export class IntPhoneFieldElement extends CustomInputElement {
-	phone: HTMLInputElement;
-	fullPhone: HTMLInputElement;
-	intlTelInput: Plugin;
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return this.intlTelInput.getNumber();
-	}
-
-	set value(value: string) {
-		this.phone.value = value;
-	}
-
-	get valid(): boolean {
-		const patternValid =
-			!this.intlTelInput.getNumber() || this.intlTelInput.isValidNumber();
-		return patternValid && this.phone.validity.valid;
-	}
-
-	connectedCallback(): void {
-		this.setIntlTelInput();
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.phone.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.phone.setAttribute('required', '');
-		}
-	}
-	setIntlTelInput() {
-		this.phone = super.getChildInput('#phone-field');
-		const geoIpLookup = (success, failure) => {
-			return new MakeRequest(
-				'https://ipinfo.io/json?token=8226138217a68a',
-				'get',
-				{ 'content-type': 'application/json' },
-			)
-				.send()
-				.then((request: any) => {
-					const res = JSON.parse(request);
-					return success(res.country);
-				})
-				.catch(err => {
-					return success('DK');
-				});
-		};
-		const isIplookUpDisabled = this.getAttribute('data-disable-iplookup')?.toLowerCase() === "true";
-		const defaultCountry = isIplookUpDisabled ? 'dk' : 'auto';
-		const country = this.getAttribute('data-country')?.toLowerCase();
-		this.intlTelInput = intlTelInput(this.phone, {
-			geoIpLookup: isIplookUpDisabled ? null : geoIpLookup,
-			hiddenInput: 'fullphone',
-			initialCountry: country ?? defaultCountry,
-			preferredCountries: ["dk", "se", "gb"],
-			nationalMode: true,
-			utilsScript:
-				'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.1/js/utils.js',
-		} as any);
-		this.intlTelInput.promise.then(e => {
-			setTimeout(() => {
-				this.fullPhone = super.getChildInput('[name="fullphone"]');
-			}, 1000);
-		});
-	}
-	// 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'),
-		);
-	}
-}
+import CustomElement from '../../framework/custom-element.decorator';
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import { CustomElementEventArgs } from '../../framework/CustomEvents';
+import * as intlTelInput from 'intl-tel-input';
+import { Plugin } from 'intl-tel-input';
+import MakeRequest from '../../framework/Utilities/MakeRequest';
+
+@CustomElement({
+	selector: 'int-phone-element',
+	template: `
+            <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>`,
+	style: `
+    :host{
+            width:100%;
+    }
+    .wrapper{
+            display:flex;
+    }
+    .iti {
+        width: 100% !important;
+    }
+    input{
+            box-sizing: border-box;
+            width: 100% !important;
+            border: none;
+            background-color: #f1f4ff;
+            margin: 2px;
+            resize: none;
+    }
+           `,
+	useShadow: true,
+})
+export class IntPhoneFieldElement extends CustomInputElement {
+	phone: HTMLInputElement;
+	fullPhone: HTMLInputElement;
+	intlTelInput: Plugin;
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return this.intlTelInput.getNumber();
+	}
+
+	set value(value: string) {
+		this.phone.value = value;
+	}
+
+	get valid(): boolean {
+		const patternValid =
+			!this.intlTelInput.getNumber() || this.intlTelInput.isValidNumber();
+		return patternValid && this.phone.validity.valid;
+	}
+
+	connectedCallback(): void {
+		this.setIntlTelInput();
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.phone.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.phone.setAttribute('required', '');
+		}
+	}
+	setIntlTelInput() {
+		this.phone = super.getChildInput('#phone-field');
+		const geoIpLookup = (success, failure) => {
+			return new MakeRequest(
+				'https://ipinfo.io/json?token=8226138217a68a',
+				'get',
+				{ 'content-type': 'application/json' },
+			)
+				.send()
+				.then((request: any) => {
+					const res = JSON.parse(request);
+					return success(res.country);
+				})
+				.catch(err => {
+					return success('DK');
+				});
+		};
+		const isIplookUpDisabled = this.getAttribute('data-disable-iplookup')?.toLowerCase() === "true";
+		const defaultCountry = isIplookUpDisabled ? 'dk' : 'auto';
+		const country = this.getAttribute('data-country')?.toLowerCase();
+		this.intlTelInput = intlTelInput(this.phone, {
+			geoIpLookup: isIplookUpDisabled ? null : geoIpLookup,
+			hiddenInput: 'fullphone',
+			initialCountry: country ?? defaultCountry,
+			preferredCountries: ["dk", "se", "gb"],
+			nationalMode: true,
+			utilsScript:
+				'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.1/js/utils.js',
+		} as any);
+		this.intlTelInput.promise.then(e => {
+			setTimeout(() => {
+				this.fullPhone = super.getChildInput('[name="fullphone"]');
+			}, 1000);
+		});
+	}
+	// 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'),
+		);
+	}
+}

package/src/elements/NumericField/NumericFieldElement.ts

@@ -1,84 +1,84 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'numeric-element',
-	template: `
-			<div class="wrapper">
-				<input type="number" id='numeric-field'/>
-			</div>`,
-	style: `
-    :host{
-            width:100%;
-    }
-    .wrapper{
-            display:flex;
-    }
-    input{
-            box-sizing: border-box;
-            width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
-            margin: 2px;
-            resize: none;
-    }
-           `,
-	useShadow: true,
-})
-export class NumericFieldElement extends CustomInputElement {
-	number: HTMLInputElement;
-
-	constructor() {
-		super();
-	}
-
-	get value(): any {
-		if (isNaN(this.number.valueAsNumber)) {
-			return '';
-		}
-		return this.number.valueAsNumber;
-	}
-
-	set value(value: any) {
-		this.number.valueAsNumber = value;
-	}
-
-	get valid(): boolean {
-		return this.number.validity.valid;
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.number = super.getChildInput('#numeric-field');
-		this.number.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.number.setAttribute('required', '');
-		}
-		if (this.max) {
-			this.number.setAttribute('max', this.max);
-		}
-		if (this.min) {
-			this.number.setAttribute('min', this.min);
-		}
-		if (this.step) {
-			this.number.setAttribute('step', this.step);
-		}
-	}
-
-	// 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'),
-		);
-	}
-}
+import CustomElement from '../../framework/custom-element.decorator';
+import { CustomInputElement } from '../../framework/CustomInputElement';
+import { CustomElementEventArgs } from '../../framework/CustomEvents';
+
+@CustomElement({
+	selector: 'numeric-element',
+	template: `
+			<div class="wrapper">
+				<input type="number" id='numeric-field'/>
+			</div>`,
+	style: `
+    :host{
+            width:100%;
+    }
+    .wrapper{
+            display:flex;
+    }
+    input{
+            box-sizing: border-box;
+            width: 100% !important;
+            border: none;
+            background-color: #f1f4ff;
+            margin: 2px;
+            resize: none;
+    }
+           `,
+	useShadow: true,
+})
+export class NumericFieldElement extends CustomInputElement {
+	number: HTMLInputElement;
+
+	constructor() {
+		super();
+	}
+
+	get value(): any {
+		if (isNaN(this.number.valueAsNumber)) {
+			return '';
+		}
+		return this.number.valueAsNumber;
+	}
+
+	set value(value: any) {
+		this.number.valueAsNumber = value;
+	}
+
+	get valid(): boolean {
+		return this.number.validity.valid;
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.number = super.getChildInput('#numeric-field');
+		this.number.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.number.setAttribute('required', '');
+		}
+		if (this.max) {
+			this.number.setAttribute('max', this.max);
+		}
+		if (this.min) {
+			this.number.setAttribute('min', this.min);
+		}
+		if (this.step) {
+			this.number.setAttribute('step', this.step);
+		}
+	}
+
+	// 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'),
+		);
+	}
+}