@luftborn/custom-elements 1.1.44 → 1.4.1

package/src/elements/DropDownList/DropDownListElement.ts

@@ -1,100 +1,100 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import { StringUtil } from '@luftborn/utilities';
-
-@CustomElement({
-	selector: 'drop-down-element',
-	template: `
-			<div class="wrapper">
-               <select id='select-list'>
-			   <option selected disabled>-</option>
-               </select>
-			</div>`,
-	style: `
-            :host{
-                width:100%;
-            }
-            .wrapper{
-                display:flex;
-                justify-content: center;
-            }
-            .radio-button {
-                width: auto;
-                margin: auto 3px;
-                display: flex;
-                flex-grow: 0.1;
-                justify-content: space-around;
-            }
-            select{
-                box-sizing: border-box;
-                width: 100% !important;
-                border: none;
-                background-color: #f1f4ff;
-                margin: 2px;
-                resize: none;
-            }
-           `,
-	useShadow: true,
-})
-export class DropDownListElement extends CustomInputElement {
-	select: HTMLInputElement;
-	optionTemplate = `
-    <option value='{0}'>
-       {1}
-    </option>`;
-
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return `${this.select.value}`;
-	}
-
-	set value(value: string) {
-		this.select.value = value;
-	}
-
-	get valid(): boolean {
-		return this.select.validity.valid;
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.select = super.getChildInput(`#select-list`);
-		this.addOptions();
-		if (this.required) {
-			this.select.setAttribute('required', '');
-		}
-		if (this.multi) {
-			this.select.setAttribute('multiple', '');
-		}
-		this.select.addEventListener('change', this.change.bind(this));
-	}
-
-	private addOptions() {
-		this.select.innerHTML = "";
-		this.options.forEach((element, index) => {
-			this.select.insertAdjacentHTML(
-				'beforeend',
-				StringUtil.StringFormat(this.optionTemplate, element, element),
-			);
-		});
-	}
-	// 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 { StringUtil } from '../../framework/Utilities/StringUtil';
+
+@CustomElement({
+	selector: 'drop-down-element',
+	template: `
+			<div class="wrapper">
+               <select id='select-list'>
+			   <option selected disabled>-</option>
+               </select>
+			</div>`,
+	style: `
+            :host{
+                width:100%;
+            }
+            .wrapper{
+                display:flex;
+                justify-content: center;
+            }
+            .radio-button {
+                width: auto;
+                margin: auto 3px;
+                display: flex;
+                flex-grow: 0.1;
+                justify-content: space-around;
+            }
+            select{
+                box-sizing: border-box;
+                width: 100% !important;
+                border: none;
+                background-color: #f1f4ff;
+                margin: 2px;
+                resize: none;
+            }
+           `,
+	useShadow: true,
+})
+export class DropDownListElement extends CustomInputElement {
+	select: HTMLInputElement;
+	optionTemplate = `
+    <option value='{0}'>
+       {1}
+    </option>`;
+
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return `${this.select.value}`;
+	}
+
+	set value(value: string) {
+		this.select.value = value;
+	}
+
+	get valid(): boolean {
+		return this.select.validity.valid;
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.select = super.getChildInput(`#select-list`);
+		this.addOptions();
+		if (this.required) {
+			this.select.setAttribute('required', '');
+		}
+		if (this.multi) {
+			this.select.setAttribute('multiple', '');
+		}
+		this.select.addEventListener('change', this.change.bind(this));
+	}
+
+	private addOptions() {
+		this.select.innerHTML = "";
+		this.options.forEach((element, index) => {
+			this.select.insertAdjacentHTML(
+				'beforeend',
+				StringUtil.StringFormat(this.optionTemplate, element, element),
+			);
+		});
+	}
+	// 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/Elements.ts

@@ -1,37 +1,37 @@
-import { AddressElement } from './Address/AddressElement';
-import { TextFieldElement } from './TextField/TextFieldElement';
-import { EmailFieldElement } from './EmailField/EmailFieldElement';
-import { CheckBoxElement } from './CheckBoxElement/CheckBoxElement';
-import { RadioButtonGroupElement } from './RadioButtonGroup/RadioButtonGroupElement';
-import { TextAreaElement } from './TextAreaElement/TextAreaElement';
-import { DropDownListElement } from './DropDownList/DropDownListElement';
-import { FileFieldElement } from './FileField/FileFieldElement';
-import { NumericFieldElement } from './NumericField/NumericFieldElement';
-import { CustomRegularExpressionElement } from './CustomRegularExpression/CustomRegularExpressionElement';
-import { DateFieldElement } from './DateField/DateFieldElement';
-import { IntPhoneFieldElement } from './InternationaPhoneNumber/InternationaPhoneNumberElement';
-import { CPRElement } from './CPRElement/CPRElement';
-import { CVRElement } from './CVRElement/CVRElement';
-import { IdentificationElement } from './IdentificationElement/IdentificationElement';
-import { BankFieldElement } from './BankField/BankFieldElement';
-import { TypeAheadElement } from './TypeAhead/TypeAheadElement';
-
-export {
-	AddressElement,
-	TextFieldElement,
-	EmailFieldElement,
-	CheckBoxElement,
-	RadioButtonGroupElement,
-	TextAreaElement,
-	DropDownListElement,
-	FileFieldElement,
-	NumericFieldElement,
-	CustomRegularExpressionElement,
-	DateFieldElement,
-	IntPhoneFieldElement,
-	CPRElement,
-	CVRElement,
-	IdentificationElement,
-	BankFieldElement,
-	TypeAheadElement
-};
+import { AddressElement } from './Address/AddressElement';
+import { TextFieldElement } from './TextField/TextFieldElement';
+import { EmailFieldElement } from './EmailField/EmailFieldElement';
+import { CheckBoxElement } from './CheckBoxElement/CheckBoxElement';
+import { RadioButtonGroupElement } from './RadioButtonGroup/RadioButtonGroupElement';
+import { TextAreaElement } from './TextAreaElement/TextAreaElement';
+import { DropDownListElement } from './DropDownList/DropDownListElement';
+import { FileFieldElement } from './FileField/FileFieldElement';
+import { NumericFieldElement } from './NumericField/NumericFieldElement';
+import { CustomRegularExpressionElement } from './CustomRegularExpression/CustomRegularExpressionElement';
+import { DateFieldElement } from './DateField/DateFieldElement';
+import { IntPhoneFieldElement } from './InternationaPhoneNumber/InternationaPhoneNumberElement';
+import { CPRElement } from './CPRElement/CPRElement';
+import { CVRElement } from './CVRElement/CVRElement';
+import { IdentificationElement } from './IdentificationElement/IdentificationElement';
+import { BankFieldElement } from './BankField/BankFieldElement';
+import { TypeAheadElement } from './TypeAhead/TypeAheadElement';
+
+export {
+	AddressElement,
+	TextFieldElement,
+	EmailFieldElement,
+	CheckBoxElement,
+	RadioButtonGroupElement,
+	TextAreaElement,
+	DropDownListElement,
+	FileFieldElement,
+	NumericFieldElement,
+	CustomRegularExpressionElement,
+	DateFieldElement,
+	IntPhoneFieldElement,
+	CPRElement,
+	CVRElement,
+	IdentificationElement,
+	BankFieldElement,
+	TypeAheadElement
+};

package/src/elements/EmailField/EmailFieldElement.ts

@@ -1,78 +1,78 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'email-element',
-	template: `
-			<div class="wrapper">
-				<input type="text" id='email-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 EmailFieldElement extends CustomInputElement {
-	mailRegex: RegExp = new RegExp(
-		/^([a-zA-Z0-9ÆØÅæøå_.+-])+\@(([a-zA-Z0-9ÆØÅæøå-])+\.)+([a-zA-Z0-9ÆØÅæøå]{2,4})+$/,
-	);
-
-	email: HTMLInputElement;
-
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return `${this.email.value}`;
-	}
-
-	set value(value: string) {
-		this.email.value = value;
-	}
-
-	get valid(): boolean {
-		const patternValid = !this.value || this.mailRegex.test(this.value);
-		return this.email.validity.valid && patternValid;
-	}
-
-	connectedCallback(): void {
-		this.initChildInputs();
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.email = super.getChildInput('#email-field');
-		this.email.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.email.setAttribute('required', '');
-		}
-	}
-
-	// 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: 'email-element',
+	template: `
+			<div class="wrapper">
+				<input type="text" id='email-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 EmailFieldElement extends CustomInputElement {
+	mailRegex: RegExp = new RegExp(
+		/^([a-zA-Z0-9ÆØÅæøå_.+-])+\@(([a-zA-Z0-9ÆØÅæøå-])+\.)+([a-zA-Z0-9ÆØÅæøå]{2,4})+$/,
+	);
+
+	email: HTMLInputElement;
+
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return `${this.email.value}`;
+	}
+
+	set value(value: string) {
+		this.email.value = value;
+	}
+
+	get valid(): boolean {
+		const patternValid = !this.value || this.mailRegex.test(this.value);
+		return this.email.validity.valid && patternValid;
+	}
+
+	connectedCallback(): void {
+		this.initChildInputs();
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.email = super.getChildInput('#email-field');
+		this.email.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.email.setAttribute('required', '');
+		}
+	}
+
+	// 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/FileField/FileFieldElement.ts

@@ -1,76 +1,96 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'file-element',
-	template: `
-			<div class="wrapper">
-				<input type="file" id='file-field' accept="image/*,application/pdf"/>
-			</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 FileFieldElement extends CustomInputElement {
-	file: HTMLInputElement;
-
-	constructor() {
-		super();
-	}
-
-	get value(): FileList {
-		return this.file.files;
-	}
-
-	set value(files: FileList) {
-		this.file.files = files;
-	}
-
-	get valid(): boolean {
-		return this.file.validity.valid;
-	}
-
-	connectedCallback(): void {
-		this.initChildInputs();
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.file = super.getChildInput('#file-field');
-		this.file.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.file.setAttribute('required', '');
-		}
-		if (this.multi) {
-			this.file.setAttribute('multiple', '');
-		}
-	}
-
-	// 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 getAttributeNamesPolyfill from '../../framework/Polyfills/getAttributeNamesPolyfill';
+
+@CustomElement({
+	selector: 'file-element',
+	template: `
+			<div class="wrapper">
+				<input type="file" id='file-field' accept="image/*,application/pdf"/>
+			</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 FileFieldElement extends CustomInputElement {
+	file: HTMLInputElement;
+
+	constructor() {
+		super();
+		getAttributeNamesPolyfill();
+	}
+
+	get value(): FileList {
+		return this.file.files;
+	}
+
+	set value(files: FileList) {
+		this.file.files = files;
+	}
+
+	get valid(): boolean {
+		return this.file.validity.valid;
+	}
+
+	connectedCallback(): void {
+		this.initChildInputs();
+		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));
+		if (this.required) {
+			this.file.setAttribute('required', '');
+		}
+		if (this.multi) {
+			this.file.setAttribute('multiple', '');
+		}
+	}
+
+	// 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'),
+		);
+	}
+    
+    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;
+		}
+	}
+}