@luftborn/custom-elements 1.1.43 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luftborn/custom-elements",
-	"version": "1.1.43",
+	"version": "1.4.0",
 	"description": "custom HTML elements for the form builder application ",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -14,7 +14,6 @@
 		"@webcomponents/webcomponentsjs"
 	],
 	"dependencies": {
-		"@luftborn/utilities": "^1.1.8",
 		"@types/googlemaps": "^3.39.6",
 		"@webcomponents/custom-elements": "^1.4.1",
 		"@webcomponents/webcomponentsjs": "^2.4.3",

package/src/custom-form.ts

@@ -1,6 +1,7 @@
 import { CustomInputElement } from './framework/CustomInputElement';
 import { FileFieldElement } from './elements/FileField/FileFieldElement';
-import { ArrayUtil, MakeRequest } from '@luftborn/utilities';
+import ArrayUtil from './framework/Utilities/ArrayUtil';
+import MakeRequest from './framework/Utilities/MakeRequest';
 
 export class CustomForm {
 	action: string;

package/src/elements/CheckBoxElement/CheckBoxElement.ts

@@ -1,7 +1,7 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import { StringUtil } from '@luftborn/utilities';
+import { StringUtil } from '../../framework/Utilities/StringUtil';
 
 @CustomElement({
 	selector: 'checkbox-element',

package/src/elements/DropDownList/DropDownListElement.ts

@@ -1,7 +1,7 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import { StringUtil } from '@luftborn/utilities';
+import { StringUtil } from '../../framework/Utilities/StringUtil';
 
 @CustomElement({
 	selector: 'drop-down-element',

package/src/elements/FileField/FileFieldElement.ts

@@ -1,6 +1,7 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
+import getAttributeNamesPolyfill from '../../framework/Polyfills/getAttributeNamesPolyfill';
 
 @CustomElement({
 	selector: 'file-element',
@@ -31,6 +32,7 @@ export class FileFieldElement extends CustomInputElement {
 
 	constructor() {
 		super();
+		getAttributeNamesPolyfill();
 	}
 
 	get value(): FileList {
@@ -50,6 +52,13 @@ export class FileFieldElement extends CustomInputElement {
 		super.connectedCallback();
 	}
 
+	componentDidMount() {
+		this.getAttributeNames().forEach(attributeName => {
+			let attributeValue = this.getAttribute(attributeName);
+			this.attributeChanged(attributeName, null, attributeValue);
+		});
+	}
+
 	initChildInputs() {
 		this.file = super.getChildInput('#file-field');
 		this.file.addEventListener('change', this.change.bind(this));
@@ -73,4 +82,15 @@ export class FileFieldElement extends CustomInputElement {
 			new CustomElementEventArgs(this.value, 'validate'),
 		);
 	}
+    
+    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+		this.attributeChanged(name, oldVal, newVal);
+	}
+	private attributeChanged(name: string, oldVal: string, newVal: string) {
+		switch (name) {
+			case 'accept':
+                this.file.accept = newVal;
+                break;
+		}
+	}
 }

package/src/elements/InternationaPhoneNumber/InternationaPhoneNumberElement.ts

@@ -3,7 +3,7 @@ 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 '@luftborn/utilities';
+import MakeRequest from '../../framework/Utilities/MakeRequest';
 
 @CustomElement({
 	selector: 'int-phone-element',
@@ -68,24 +68,29 @@ export class IntPhoneFieldElement extends CustomInputElement {
 	}
 	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: (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');
-					});
-			},
+			geoIpLookup: isIplookUpDisabled ? null : geoIpLookup,
 			hiddenInput: 'fullphone',
-			initialCountry: 'auto',
+			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',

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

@@ -1,7 +1,7 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import { StringUtil } from '@luftborn/utilities';
+import { StringUtil } from '../../framework/Utilities/StringUtil';
 
 @CustomElement({
 	selector: 'radio-group-element',

package/src/framework/CustomInputElement.ts

@@ -1,6 +1,7 @@
 import { CustomElementEvent, CustomElementEventArgs } from "./CustomEvents";
-import { DomUtil, ArrayUtil } from "@luftborn/utilities";
 import OptionWithDescription from "./Models/OptionWithDescription";
+import ArrayUtil from "./Utilities/ArrayUtil";
+import DomUtil from "./Utilities/DomUtil";
 
 class IDictionary<TValue> {
 	[index: string]: TValue;

package/src/framework/Language/Languages/CzechDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class CzechDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adresa",
+            City: "město",
+            Country: "země",
+            Zip: "poštovní směrovací číslo"
+        },
+        BankElement: {
+            Account: "Účet",
+            RegistrationNumber: "Registrační číslo"
+        }
+    };
+
+}

package/src/framework/Language/Languages/DutchDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class DutchDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adres",
+            City: "stad",
+            Country: "land",
+            Zip: "postcode"
+        },
+        BankElement: {
+            Account: "Bankrekening",
+            RegistrationNumber: "Bankrekening Registratienummer"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/EstonianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class EstonianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "aadress",
+            City: "linn",
+            Country: "riik",
+            Zip: "postiindeks"
+        },
+        BankElement: {
+            Account: "Pangakonto",
+            RegistrationNumber: "Pangakonto registreerimisnumber"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/FinnishDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class FinnishDictionary extends BaseDictionary {
+    
+    dictionary: any = {
+        AddressElement: {
+            Address: "osoite",
+            City: "kaupunki",
+            Country: "maa",
+            Zip: "postinumero"
+        },
+        BankElement: {
+            Account: "Pankkitili",
+            RegistrationNumber: "Pankkitilin rekisteröintinumero"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/FrenchDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class FrenchDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adresse",
+            City: "ville",
+            Country: "pays",
+            Zip: "code postal"
+        },
+        BankElement: {
+            Account: "Compte bancaire",
+            RegistrationNumber: "Numéro d'enregistrement du compte bancaire"
+        }
+    };
+
+}

package/src/framework/Language/Languages/GermanDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class GermanDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "Adresse",
+            City: "Stadt",
+            Country: "Land",
+            Zip: "Postleitzahl"
+        },
+        BankElement: {
+            Account: "Bankkonto",
+            RegistrationNumber: "Bankkontoregistrierungsnummer"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/GreekDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class GreekDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "διεύθυνση",
+            City: "πόλη",
+            Country: "χώρα",
+            Zip: "ταχυδρομικός κώδικας"
+        },
+        BankElement: {
+            Account: "Τραπεζικός λογαριασμός",
+            RegistrationNumber: "Αριθμός εγγραφής τραπεζικού λογαριασμού"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/HungarianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class HungarianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "cím",
+            City: "város",
+            Country: "ország",
+            Zip: "irányítószám"
+        },
+        BankElement: {
+            Account: "Banki számla",
+            RegistrationNumber: "Banki számla regisztrációs száma"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/IcelandicDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class IcelandicDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "heimilisfang",
+            City: "borg",
+            Country: "land",
+            Zip: "póstnúmer"
+        },
+        BankElement: {
+            Account: "Bankareikningur",
+            RegistrationNumber: "Númer skráningar á bankareikningi"
+        }
+    };
+
+}

package/src/framework/Language/Languages/ItalianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class ItalianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "indirizzo",
+            City: "città",
+            Country: "nazione",
+            Zip: "codice postale"
+        },
+        BankElement: {
+            Account: "conto bancario",
+            RegistrationNumber: "Numero di registrazione del conto bancario"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/LatvianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class LatvianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adrese",
+            City: "pilsēta",
+            Country: "valsts",
+            Zip: "pasta indekss"
+        },
+        BankElement: {
+            Account: "Bankas konts",
+            RegistrationNumber: "Bankas konta reģistrācijas numurs"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/LituanianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class LituanianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adresas",
+            City: "miestas",
+            Country: "šalis",
+            Zip: "pašto kodas"
+        },
+        BankElement: {
+            Account: "Banko sąskaita",
+            RegistrationNumber: "Banko sąskaitos registracijos numeris"
+        }
+    };
+
+}

package/src/framework/Language/Languages/NorwegianDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class NorwegianDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adresse",
+            City: "by",
+            Country: "land",
+            Zip: "postnummer"
+        },
+        BankElement: {
+            Account: "Bankkonto",
+            RegistrationNumber: "Registreringsnummer for bankkonto"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/PolishDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class PolishDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adres",
+            City: "miasto",
+            Country: "kraj",
+            Zip: "kod pocztowy"
+        },
+        BankElement: {
+            Account: "Konto bankowe",
+            RegistrationNumber: "Numer rejestracyjny konta bankowego"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/PortugueseDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class PortugueseDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "endereço",
+            City: "cidade",
+            Country: "país",
+            Zip: "código postal"
+        },
+        BankElement: {
+            Account: "Conta bancária",
+            RegistrationNumber: "Número de registro da conta bancária"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/SpanishDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class SpanishDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "dirección",
+            City: "ciudad",
+            Country: "país",
+            Zip: "código postal"
+        },
+        BankElement: {
+            Account: "Cuenta bancaria",
+            RegistrationNumber: "Número de registro de cuenta bancaria"
+        }
+    };
+    
+}

package/src/framework/Language/Languages/SwedishDictionary.ts

@@ -0,0 +1,18 @@
+import BaseDictionary from "./Base/BaseDictionary";
+
+export default class SwedishDictionary extends BaseDictionary {
+
+    dictionary: any = {
+        AddressElement: {
+            Address: "adress",
+            City: "stad",
+            Country: "land",
+            Zip: "postnummer"
+        },
+        BankElement: {
+            Account: "Bankkonto",
+            RegistrationNumber: "Bankkontoregistreringsnummer"
+        }
+    };
+    
+}

package/src/framework/Language/Translator.ts

@@ -1,13 +1,65 @@
 import DanishDictionary from "./Languages/DanishDictionary";
 import EnglishDictionary from "./Languages/EnglishDictionary";
+import CzechDictionary from "./Languages/CzechDictionary";
+import GermanDictionary from "./Languages/GermanDictionary";
+import GreekDictionary from "./Languages/GreekDictionary";
+import SpanishDictionary from "./Languages/SpanishDictionary";
+import EstonianDictionary from "./Languages/EstonianDictionary";
+import FinnishDictionary from "./Languages/FinnishDictionary";
+import FrenchDictionary from "./Languages/FrenchDictionary";
+import HungarianDictionary from "./Languages/HungarianDictionary";
+import IcelandicDictionary from "./Languages/IcelandicDictionary";
+import ItalianDictionary from "./Languages/ItalianDictionary";
+import LatvianDictionary from "./Languages/LatvianDictionary";
+import LituanianDictionary from "./Languages/LituanianDictionary";
+import DutchDictionary from "./Languages/DutchDictionary";
+import NorwegianDictionary from "./Languages/NorwegianDictionary";
+import PolishDictionary from "./Languages/PolishDictionary";
+import PortugueseDictionary from "./Languages/PortugueseDictionary";
+import SwedishDictionary from "./Languages/SwedishDictionary";
 
 export default class Translator {
 	private static langauges = [
 		'en',
-		'da'
+		'da',
+        'cs',
+        'de',
+        'el',
+        'es',
+        'et',
+        'fi',
+        'fr',
+        'hu',
+        'is',
+        'it',
+        'lt',
+        'lv',
+        'nl',
+        'no',
+        'pl',
+        'pt',
+        'sv',
 	];
+
 	private static danishDictionary = new DanishDictionary();
 	private static englishDictionary = new EnglishDictionary();
+    private static czechDictionary = new CzechDictionary();
+    private static germanDictionary = new GermanDictionary();
+    private static greekDictionary = new GreekDictionary();
+    private static spanishDictionary = new SpanishDictionary();
+    private static estonianDictionary = new EstonianDictionary();
+    private static finnishDictionary = new FinnishDictionary();
+    private static frenchDictionary = new FrenchDictionary();
+    private static hungarianDictionary = new HungarianDictionary();
+    private static icelandicDictionary = new IcelandicDictionary();
+    private static italianDictionary = new ItalianDictionary();
+    private static latvianDictionary = new LatvianDictionary();
+    private static lituanianDictionary = new LituanianDictionary();
+    private static dutchDictionary = new DutchDictionary();
+    private static norwegianDictionary = new NorwegianDictionary();
+    private static polishDictionary = new PolishDictionary();
+    private static portugueseDictionary = new PortugueseDictionary();
+    private static swedishDictionary = new SwedishDictionary();
 
 	static Translate(key: string, language = 'da'): string {
 		language = language.toLowerCase();
@@ -18,10 +70,42 @@ export default class Translator {
 		switch (language) {
 			case 'da':
 				return this.danishDictionary.get(key);
-				break;
 			case 'en':
 				return this.englishDictionary.get(key);
-				break;
+            case 'cs':
+                return this.czechDictionary.get(key);
+            case 'de':
+                return this.germanDictionary.get(key);
+            case 'el':
+                return this.greekDictionary.get(key);
+            case 'es':
+                return this.spanishDictionary.get(key);
+            case 'et':
+                return this.estonianDictionary.get(key);
+            case 'fi':
+                return this.finnishDictionary.get(key);
+            case 'fr':
+                return this.frenchDictionary.get(key);
+            case 'hu':
+                return this.hungarianDictionary.get(key);
+            case 'is':
+                return this.icelandicDictionary.get(key);
+            case 'it':
+                return this.italianDictionary.get(key);
+            case 'lt':
+                return this.latvianDictionary.get(key);
+            case 'lv':
+                return this.lituanianDictionary.get(key);
+            case 'nl':
+                return this.dutchDictionary.get(key);
+            case 'no':
+                return this.norwegianDictionary.get(key);
+            case 'pl':
+                return this.polishDictionary.get(key);
+            case 'pt':
+                return this.portugueseDictionary.get(key);
+            case 'sv':
+                return this.swedishDictionary.get(key);
 		}
 	}
 }

package/src/framework/Utilities/ArrayUtil.ts

@@ -0,0 +1,31 @@
+export default class ArrayUtil {
+	public static FromNodeList<T extends Node>(list: NodeListOf<T>): T[] {
+		return Array.prototype.concat.apply([], list as any);
+	}
+
+	private static addToCurrent<T>(chunks: T[][], item: T) {
+		if (!chunks.length) {
+			chunks[0] = [];
+		}
+		chunks[chunks.length - 1].push(item);
+	}
+
+	private static addToNew<T>(chunks: T[][], item: T) {
+		chunks[chunks.length] = [];
+		chunks[chunks.length - 1].push(item);
+	}
+
+	public static divideAccordingProperty<T>(array: T[], selector: (item: T) => any): T[][] {
+		const chunks = [];
+		chunks[0] = [array[0]];
+		array.reduce((a, b) => {
+			if (selector(a) === selector(b)) {
+				this.addToCurrent(chunks, b);
+			} else {
+				this.addToNew(chunks, b);
+			}
+			return b;
+		});
+		return chunks;
+	}
+}