@luftborn/custom-elements 1.1.44 → 1.4.1

package/src/framework/Utilities/DomUtil.ts

@@ -0,0 +1,117 @@
+import { ViewportUtil } from './ViewportUtil';
+
+export default class DomUtil {
+    private viewPortUtil: ViewportUtil;
+    public element: Element;
+    constructor(element: Element) {
+        this.element = element;
+        this.viewPortUtil = new ViewportUtil(this.element as HTMLElement);
+    }
+
+    public getDataAttr(attr: string, defaultvalue?: string): any {
+        if (!this.element) {
+            return null;
+        }
+        const value = this.element.getAttribute(`data-${attr}`);
+
+        return value !== undefined ? value : defaultvalue;
+    }
+
+    public setDataAttr(attr: string, value: string): any {
+        if (!this.element) {
+            return null;
+        }
+        return this.element.setAttribute(`data-${attr}`, value);
+    }
+
+    public getAttr(attr: string, defaultvalue?: string): any {
+        if (!this.element) {
+            return null;
+        }
+        const value = this.element.getAttribute(attr);
+        return value !== undefined ? value : defaultvalue;
+    }
+
+    public setAttr(attr: string, value: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.setAttribute(attr, value);
+    }
+
+    public removeAttr(attr: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.removeAttribute(attr);
+    }
+
+    public removeDataAttr(attr: string): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.removeAttribute(`data-${attr}`);
+    }
+
+    public hasAttr(attr: string): boolean {
+        if (!this.element) {
+            return null;
+        }
+        return this.element.hasAttribute(attr);
+    }
+
+    public shake(): void {
+        this.appendClass('shake');
+        setTimeout(() => {
+            this.removeClass('shake');
+            (this.element as HTMLInputElement).readOnly = false;
+        }, 600);
+    }
+
+    public error(): void {
+        this.appendClass('error');
+        setTimeout(() => {
+            this.removeClass('error');
+            (this.element as HTMLInputElement).readOnly = false;
+        }, 5000);
+    }
+
+    public focus(): void {
+        if (!this.viewPortUtil.IsVisible()) {
+            this.element.scrollIntoView();
+        }
+    }
+
+    public removeClass(classname): void {
+        this.element.classList.remove(classname);
+    }
+
+    public appendClass(classname): void {
+        this.element.classList.add(classname);
+    }
+
+    public deleteElement(): void {
+        if (!this.element) {
+            return null;
+        }
+        this.element.remove();
+    }
+
+    public setChildElementByAttrName(name: string, value: string): void {
+        const firstLetter = name.replace(/^\w/, c => c.toUpperCase());
+        const SubElement = this.element.querySelector(
+            `[name="${firstLetter}"]`,
+        ) as HTMLInputElement;
+        if (SubElement) {
+            SubElement.value = value;
+        }
+    }
+
+    public hasClass(className: string): boolean {
+        return this.element.classList.contains(className);
+    }
+
+    public getStyle(ruleName: string) {
+        return getComputedStyle(this.element)[ruleName];
+    }
+}

package/src/framework/Utilities/DomUtility.ts

@@ -1,7 +1,7 @@
-export default class DomUtility {
-
-	// https://stackoverflow.com/questions/1230445/javascript-regex-how-to-bold-specific-words-with-regex
-	static boldenText(inputText: string, matchindTextToBolden: string) {
-		return inputText.replace(new RegExp('(^|)(' + matchindTextToBolden + ')(|$)', 'ig'), '$1<b>$2</b>$3');
-	}
+export default class DomUtility {
+
+	// https://stackoverflow.com/questions/1230445/javascript-regex-how-to-bold-specific-words-with-regex
+	static boldenText(inputText: string, matchindTextToBolden: string) {
+		return inputText.replace(new RegExp('(^|)(' + matchindTextToBolden + ')(|$)', 'ig'), '$1<b>$2</b>$3');
+	}
 }

package/src/framework/Utilities/MakeRequest.ts

@@ -0,0 +1,47 @@
+export default class MakeRequest {
+    method: string;
+    url: string;
+    headers: any;
+
+    constructor(url: string, method: string = 'get', headers: any = {}) {
+        this.method = method;
+        this.url = url;
+        this.headers = headers;
+    }
+
+    private setHeaders(httpRequest: XMLHttpRequest) {
+        for (const header in this.headers) {
+            httpRequest.setRequestHeader(header, this.headers[header]);
+        }
+    }
+
+    send(data: any = null) {
+        return new Promise((resolve, reject) => {
+            const xmlHttpRequest = new XMLHttpRequest();
+            xmlHttpRequest.open(this.method, this.url);
+            this.setHeaders(xmlHttpRequest);
+            xmlHttpRequest.onload = () => {
+                if (
+                    xmlHttpRequest.status >= 200 &&
+                    xmlHttpRequest.status < 300
+                ) {
+                    resolve(xmlHttpRequest.response);
+                } else {
+                    reject({
+                        status: xmlHttpRequest.status,
+                        statusText: xmlHttpRequest.statusText,
+                        body: xmlHttpRequest.response,
+                    });
+                }
+            };
+            xmlHttpRequest.onerror = () => {
+                reject({
+                    status: xmlHttpRequest.status,
+                    statusText: xmlHttpRequest.statusText,
+                    body: xmlHttpRequest.response,
+                });
+            };
+            xmlHttpRequest.send(data);
+        });
+    }
+}

package/src/framework/Utilities/StringUtil.ts

@@ -0,0 +1,9 @@
+export class StringUtil {
+
+    constructor() {
+    }
+
+    public static StringFormat(str: string, ...args: string[]) {
+        return str.replace(/{(\d+)}/g, (match, index) => args[index] || '');
+    }
+}

package/src/framework/Utilities/ViewportUtil.ts

@@ -0,0 +1,46 @@
+export class ViewportUtil {
+    private element?: HTMLElement;
+    constructor(element: HTMLElement = null) {
+        this.element = element;
+    }
+
+    public IsVisible(): boolean {
+        const bounds = this.element.getBoundingClientRect();
+        return (
+            ((bounds.top > 0 && bounds.top < innerHeight) ||
+                (bounds.bottom > 0 && bounds.bottom < innerHeight)) &&
+            ((bounds.left > 0 && bounds.left < innerWidth) ||
+                (bounds.right > 0 && bounds.right < innerWidth))
+        );
+    }
+
+    public IsPartiallyVisible() {
+        const bounds = this.element.getBoundingClientRect();
+        return (
+            bounds.top >= 0 ||
+            bounds.left >= 0 ||
+            bounds.bottom <= innerHeight ||
+            bounds.right <= innerWidth
+        );
+    }
+
+    public IsOffsetVisible(offset: number = 300) {
+        const bounds = this.element.getBoundingClientRect();
+        // tslint:disable-next-line: max-line-length
+        return (
+            bounds.top + offset >= 0 ||
+            bounds.left + offset >= 0 ||
+            bounds.bottom - offset <= innerHeight ||
+            bounds.right - offset <= innerWidth
+        );
+    }
+
+    public WindowTop(offset: number = 0) {
+        const YOffset =
+            window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0;
+        return offset <= YOffset;
+    }
+}

package/src/framework/Utilities/debouncer.ts

@@ -1,67 +1,67 @@
-type Procedure = (...args: any[]) => any;
-
-interface Debounce {
-	(...args: any[]): any;
-	clear: () => void;
-	flush: () => void;
-}
-
-const debouncer = (func: Procedure, wait: number, immediate: boolean = false) => {
-	let timeout: number | null;
-	let args: any;
-	let context: any;
-	let result: any;
-
-	const later = () => {
-		timeout = null;
-		if (!immediate) {
-			result = func.apply(context, args);
-			context = args = null;
-		}
-	};
-
-	const debouncedFunc: Procedure = function (this: any) {
-		context = this;
-		args = arguments;
-		const callNow = immediate && !timeout;
-
-		if (!timeout) {
-			timeout = window.setTimeout(later, wait);
-		}
-
-		if (callNow) {
-			result = func.apply(context, args);
-			context = args = null;
-		}
-
-		return result;
-	};
-
-	const clear = () => {
-		if (timeout) {
-			clearTimeout(timeout);
-			timeout = null;
-		}
-	};
-
-	const flush = () => {
-		if (timeout) {
-			result = func.apply(context, args);
-			context = args = null;
-
-			clearTimeout(timeout);
-			timeout = null;
-		}
-	};
-
-	const debounced: Debounce = (() => {
-		const f: any = debouncedFunc;
-		f.clear = clear;
-		f.flush = flush;
-		return f;
-	})();
-
-	return debounced;
-};
-
+type Procedure = (...args: any[]) => any;
+
+interface Debounce {
+	(...args: any[]): any;
+	clear: () => void;
+	flush: () => void;
+}
+
+const debouncer = (func: Procedure, wait: number, immediate: boolean = false) => {
+	let timeout: number | null;
+	let args: any;
+	let context: any;
+	let result: any;
+
+	const later = () => {
+		timeout = null;
+		if (!immediate) {
+			result = func.apply(context, args);
+			context = args = null;
+		}
+	};
+
+	const debouncedFunc: Procedure = function (this: any) {
+		context = this;
+		args = arguments;
+		const callNow = immediate && !timeout;
+
+		if (!timeout) {
+			timeout = window.setTimeout(later, wait);
+		}
+
+		if (callNow) {
+			result = func.apply(context, args);
+			context = args = null;
+		}
+
+		return result;
+	};
+
+	const clear = () => {
+		if (timeout) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+	};
+
+	const flush = () => {
+		if (timeout) {
+			result = func.apply(context, args);
+			context = args = null;
+
+			clearTimeout(timeout);
+			timeout = null;
+		}
+	};
+
+	const debounced: Debounce = (() => {
+		const f: any = debouncedFunc;
+		f.clear = clear;
+		f.flush = flush;
+		return f;
+	})();
+
+	return debounced;
+};
+
 export default debouncer;

package/src/framework/Validation/IValidator.interface.ts

@@ -1,3 +1,3 @@
-export default interface IValidator {
-    isSatisfiedBy(input: string, allowEmpty: boolean): boolean;
-}
+export default interface IValidator {
+    isSatisfiedBy(input: string, allowEmpty: boolean): boolean;
+}

package/src/framework/Validation/Validators/BankAccount.ts

@@ -1,7 +1,7 @@
-import IValidation from '../IValidator.interface';
-
-export default class BankAccountValidator implements IValidation {
-    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
-        return true;
-    }
-}
+import IValidation from '../IValidator.interface';
+
+export default class BankAccountValidator implements IValidation {
+    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
+        return true;
+    }
+}

package/src/framework/Validation/Validators/BankAccountRegistrationNumber.ts

@@ -1,8 +1,8 @@
-import IValidation from '../IValidator.interface';
-
-export default class BankAccountRegistrationNumberValidator
-    implements IValidation {
-    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
-        return true;
-    }
-}
+import IValidation from '../IValidator.interface';
+
+export default class BankAccountRegistrationNumberValidator
+    implements IValidation {
+    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
+        return true;
+    }
+}

package/src/framework/Validation/Validators/BankIdNorway.ts

@@ -1,21 +1,21 @@
-import IValidation from '../IValidator.interface';
-
-export default class BankIdNorwayValidator implements IValidation {
-    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
-        return this.checkNoPersonnummer(input, allowEmpty);
-    }
-
-    private checkNoPersonnummer(
-        input: string,
-        allowEmpty: boolean = true,
-    ): boolean {
-        if (!input) {
-            return allowEmpty;
-        }
-        const personnummer: string = input.replace(' ', '').replace('-', '');
-        const regex: RegExp = new RegExp(
-            /^(0[1-9]|1[0-9]|2[0-9]|3[0-1])(0[1-9]|1[0-2])(\d{2})(\d{5})$/,
-        );
-        return regex.test(personnummer);
-    }
-}
+import IValidation from '../IValidator.interface';
+
+export default class BankIdNorwayValidator implements IValidation {
+    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
+        return this.checkNoPersonnummer(input, allowEmpty);
+    }
+
+    private checkNoPersonnummer(
+        input: string,
+        allowEmpty: boolean = true,
+    ): boolean {
+        if (!input) {
+            return allowEmpty;
+        }
+        const personnummer: string = input.replace(' ', '').replace('-', '');
+        const regex: RegExp = new RegExp(
+            /^(0[1-9]|1[0-9]|2[0-9]|3[0-1])(0[1-9]|1[0-2])(\d{2})(\d{5})$/,
+        );
+        return regex.test(personnummer);
+    }
+}

package/src/framework/Validation/Validators/BankIdSweden.ts

@@ -1,21 +1,21 @@
-import IValidation from '../IValidator.interface';
-
-export default class BankIdSwedenValidator implements IValidation {
-    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
-        return this.checkSePersonnummer(input, allowEmpty);
-    }
-
-    private checkSePersonnummer(
-        input: string,
-        allowEmpty: boolean = true,
-    ): boolean {
-        if (!input) {
-            return allowEmpty;
-        }
-        const personnummer: string = input.replace(' ', '').replace('-', '');
-        const regex: RegExp = new RegExp(
-            /^(19\d{2}|20\d{2})(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])(\d{4})$/,
-        );
-        return regex.test(personnummer);
-    }
-}
+import IValidation from '../IValidator.interface';
+
+export default class BankIdSwedenValidator implements IValidation {
+    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
+        return this.checkSePersonnummer(input, allowEmpty);
+    }
+
+    private checkSePersonnummer(
+        input: string,
+        allowEmpty: boolean = true,
+    ): boolean {
+        if (!input) {
+            return allowEmpty;
+        }
+        const personnummer: string = input.replace(' ', '').replace('-', '');
+        const regex: RegExp = new RegExp(
+            /^(19\d{2}|20\d{2})(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])(\d{4})$/,
+        );
+        return regex.test(personnummer);
+    }
+}

package/src/framework/Validation/Validators/CPR.ts

@@ -1,82 +1,82 @@
-import IValidation from '../IValidator.interface';
-
-export default class CprValidator implements IValidation {
-    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
-        return this.checkCpr(input, allowEmpty);
-    }
-    private modulus11Multiply(value: number, index: number): number {
-        const control: number[] = [4, 3, 2, 7, 6, 5, 4, 3, 2, 1];
-        return control[index] * value;
-    }
-
-    private modulus11Exceptions(input: string): boolean {
-        const exceptionDates: Date[] = [
-            1960,
-            1964,
-            1965,
-            1966,
-            1969,
-            1970,
-            1980,
-            1982,
-            1984,
-            1985,
-            1986,
-            1987,
-            1988,
-            1989,
-            1990,
-        ].map(x => new Date(x, 0, 1)); // months are 0-indexed
-
-        const cprDate: Date = this.getCprDate(input);
-
-        return exceptionDates.some(x => x.getDate() === cprDate.getDate());
-    }
-
-    private checkCprDate(input: string): boolean {
-        let year: number = +input.substr(4, 2) + 2000;
-        year -= year > new Date().getFullYear() ? 100 : 0; // is 20xx or 19xx
-        const month: number = +input.substr(2, 2) - 1;
-        const day: number = +input.substr(0, 2);
-        const date: Date = new Date(year, month, day);
-        return (
-            date.getFullYear() === year &&
-            date.getMonth() === month &&
-            date.getDate() === day
-        );
-    }
-
-    private getCprDate(input: string): Date {
-        let year: number = +input.substr(4, 2) + 2000;
-        year -= year > new Date().getFullYear() ? 100 : 0; // is 20xx or 19xx
-        const month: number = +input.substr(2, 2) - 1;
-        const day: number = +input.substr(0, 2);
-        return new Date(year, month, day);
-    }
-
-    private checkCpr(input: string, allowEmpty: boolean = true): boolean {
-        if (!input) {
-            return allowEmpty;
-        }
-        const cprnr: string = input.replace(' ', '').replace('-', '');
-        if (!cprnr.match(/^\d{10}$/)) {
-            return false;
-        }
-        if (!this.checkCprDate(cprnr)) {
-            return false;
-        }
-        if (this.modulus11Exceptions(cprnr)) {
-            return true;
-        }
-
-        let output: number = 0;
-        for (let i: number = 0; i < 10; i++) {
-            output += this.modulus11Multiply(
-                parseInt(cprnr.substr(i, 1), 10),
-                i,
-            );
-        }
-
-        return output % 11 === 0; // hvis output går op i 11, er det et gyldigt cpr.
-    }
-}
+import IValidation from '../IValidator.interface';
+
+export default class CprValidator implements IValidation {
+    isSatisfiedBy(input: string, allowEmpty: boolean = true): boolean {
+        return this.checkCpr(input, allowEmpty);
+    }
+    private modulus11Multiply(value: number, index: number): number {
+        const control: number[] = [4, 3, 2, 7, 6, 5, 4, 3, 2, 1];
+        return control[index] * value;
+    }
+
+    private modulus11Exceptions(input: string): boolean {
+        const exceptionDates: Date[] = [
+            1960,
+            1964,
+            1965,
+            1966,
+            1969,
+            1970,
+            1980,
+            1982,
+            1984,
+            1985,
+            1986,
+            1987,
+            1988,
+            1989,
+            1990,
+        ].map(x => new Date(x, 0, 1)); // months are 0-indexed
+
+        const cprDate: Date = this.getCprDate(input);
+
+        return exceptionDates.some(x => x.getDate() === cprDate.getDate());
+    }
+
+    private checkCprDate(input: string): boolean {
+        let year: number = +input.substr(4, 2) + 2000;
+        year -= year > new Date().getFullYear() ? 100 : 0; // is 20xx or 19xx
+        const month: number = +input.substr(2, 2) - 1;
+        const day: number = +input.substr(0, 2);
+        const date: Date = new Date(year, month, day);
+        return (
+            date.getFullYear() === year &&
+            date.getMonth() === month &&
+            date.getDate() === day
+        );
+    }
+
+    private getCprDate(input: string): Date {
+        let year: number = +input.substr(4, 2) + 2000;
+        year -= year > new Date().getFullYear() ? 100 : 0; // is 20xx or 19xx
+        const month: number = +input.substr(2, 2) - 1;
+        const day: number = +input.substr(0, 2);
+        return new Date(year, month, day);
+    }
+
+    private checkCpr(input: string, allowEmpty: boolean = true): boolean {
+        if (!input) {
+            return allowEmpty;
+        }
+        const cprnr: string = input.replace(' ', '').replace('-', '');
+        if (!cprnr.match(/^\d{10}$/)) {
+            return false;
+        }
+        if (!this.checkCprDate(cprnr)) {
+            return false;
+        }
+        if (this.modulus11Exceptions(cprnr)) {
+            return true;
+        }
+
+        let output: number = 0;
+        for (let i: number = 0; i < 10; i++) {
+            output += this.modulus11Multiply(
+                parseInt(cprnr.substr(i, 1), 10),
+                i,
+            );
+        }
+
+        return output % 11 === 0; // hvis output går op i 11, er det et gyldigt cpr.
+    }
+}