@luftborn/custom-elements 1.1.44 → 1.4.1

package/src/elements/CheckBoxElement/CheckBoxElement.ts

@@ -1,99 +1,99 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-import { StringUtil } from '@luftborn/utilities';
-
-@CustomElement({
-	selector: 'checkbox-element',
-	template: `
-			<div class="wrapper">
-			</div>`,
-	style: `
-			:host{
-				width:100%;
-			}
-			.checkbox {
-				width: auto;
-				margin: auto 3px;
-				color: rgba(72, 72, 72, 0.75);
-				font-size: 13px;
-			}
-			input[type='checkbox']{
-				box-sizing: border-box;
-				width: auto !important;
-				border: none;
-				background-color: #f1f4ff;
-				margin: 2px;
-				resize: none;
-			}
-		`,
-	useShadow: true,
-})
-export class CheckBoxElement extends CustomInputElement {
-	checkbox: HTMLInputElement[];
-	checkboxTemplate = `
-	<div class='checkbox'>
-		<input type='checkbox' name='{0}' value="{1}" id="{2}"/>
-		<label for="{2}">{1}</label>
-	</div>`;
-
-	constructor() {
-		super();
-	}
-
-	get value(): string[] {
-		return this.checkbox.filter(c => c.checked).map(c => c.value);
-	}
-
-	set value(values: string[]) {
-		// this.checkbox.value = value;
-	}
-
-	get valid(): boolean {
-		if (this.required) {
-			return this.value.length > 0;
-		} else {
-			return true;
-		}
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.addCheckBoxes();
-		this.checkbox = super.getChildInputs(`[name='${this.name}']`);
-		this.checkbox.forEach(c =>
-			c.addEventListener('change', this.change.bind(this)),
-		);
-	}
-
-	private addCheckBoxes() {
-		const wrapper = super.getChildElement('.wrapper');
-		wrapper.innerHTML = "";
-		this.options.forEach((element, index) => {
-			wrapper.insertAdjacentHTML(
-				'beforeend',
-				StringUtil.StringFormat(
-					this.checkboxTemplate,
-					this.name,
-					element,
-					`${this.name}-${index}`,
-				),
-			);
-		});
-	}
-	// 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: 'checkbox-element',
+	template: `
+			<div class="wrapper">
+			</div>`,
+	style: `
+			:host{
+				width:100%;
+			}
+			.checkbox {
+				width: auto;
+				margin: auto 3px;
+				color: rgba(72, 72, 72, 0.75);
+				font-size: 13px;
+			}
+			input[type='checkbox']{
+				box-sizing: border-box;
+				width: auto !important;
+				border: none;
+				background-color: #f1f4ff;
+				margin: 2px;
+				resize: none;
+			}
+		`,
+	useShadow: true,
+})
+export class CheckBoxElement extends CustomInputElement {
+	checkbox: HTMLInputElement[];
+	checkboxTemplate = `
+	<div class='checkbox'>
+		<input type='checkbox' name='{0}' value="{1}" id="{2}"/>
+		<label for="{2}">{1}</label>
+	</div>`;
+
+	constructor() {
+		super();
+	}
+
+	get value(): string[] {
+		return this.checkbox.filter(c => c.checked).map(c => c.value);
+	}
+
+	set value(values: string[]) {
+		// this.checkbox.value = value;
+	}
+
+	get valid(): boolean {
+		if (this.required) {
+			return this.value.length > 0;
+		} else {
+			return true;
+		}
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.addCheckBoxes();
+		this.checkbox = super.getChildInputs(`[name='${this.name}']`);
+		this.checkbox.forEach(c =>
+			c.addEventListener('change', this.change.bind(this)),
+		);
+	}
+
+	private addCheckBoxes() {
+		const wrapper = super.getChildElement('.wrapper');
+		wrapper.innerHTML = "";
+		this.options.forEach((element, index) => {
+			wrapper.insertAdjacentHTML(
+				'beforeend',
+				StringUtil.StringFormat(
+					this.checkboxTemplate,
+					this.name,
+					element,
+					`${this.name}-${index}`,
+				),
+			);
+		});
+	}
+	// 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/CustomRegularExpression/CustomRegularExpressionElement.ts

@@ -1,75 +1,75 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'regex-element',
-	template: `
-			<div class="wrapper">
-				<input type="text" id='regex-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 CustomRegularExpressionElement extends CustomInputElement {
-	text: HTMLInputElement;
-
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return `${this.text.value}`;
-	}
-
-	set value(value: string) {
-		this.text.value = value;
-	}
-
-	get valid(): boolean {
-		return this.text.validity.valid;
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.text = super.getChildInput('#regex-field');
-		this.text.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.text.setAttribute('required', '');
-		}
-		if (this.customValue) {
-			this.text.setAttribute('pattern', this.customValue);
-		}
-	}
-
-	// 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: 'regex-element',
+	template: `
+			<div class="wrapper">
+				<input type="text" id='regex-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 CustomRegularExpressionElement extends CustomInputElement {
+	text: HTMLInputElement;
+
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return `${this.text.value}`;
+	}
+
+	set value(value: string) {
+		this.text.value = value;
+	}
+
+	get valid(): boolean {
+		return this.text.validity.valid;
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.text = super.getChildInput('#regex-field');
+		this.text.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.text.setAttribute('required', '');
+		}
+		if (this.customValue) {
+			this.text.setAttribute('pattern', this.customValue);
+		}
+	}
+
+	// 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/DateField/DateFieldElement.ts

@@ -1,78 +1,78 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'date-element',
-	template: `
-			<div class="wrapper">
-				<input type="date" id='date-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 DateFieldElement extends CustomInputElement {
-	date: HTMLInputElement;
-
-	constructor() {
-		super();
-	}
-
-	get value(): string {
-		return this.date.value;
-	}
-
-	set value(value: string) {
-		this.date.value = value;
-	}
-
-	get valid(): boolean {
-		return this.date.validity.valid;
-	}
-
-	connectedCallback(): void {
-		super.connectedCallback();
-	}
-
-	initChildInputs() {
-		this.date = super.getChildInput('#date-field');
-		this.date.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.date.setAttribute('required', '');
-		}
-		if (this.max) {
-			this.date.setAttribute('max', this.max);
-		}
-		if (this.min) {
-			this.date.setAttribute('min', this.min);
-		}
-	}
-
-	// 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: 'date-element',
+	template: `
+			<div class="wrapper">
+				<input type="date" id='date-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 DateFieldElement extends CustomInputElement {
+	date: HTMLInputElement;
+
+	constructor() {
+		super();
+	}
+
+	get value(): string {
+		return this.date.value;
+	}
+
+	set value(value: string) {
+		this.date.value = value;
+	}
+
+	get valid(): boolean {
+		return this.date.validity.valid;
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	initChildInputs() {
+		this.date = super.getChildInput('#date-field');
+		this.date.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.date.setAttribute('required', '');
+		}
+		if (this.max) {
+			this.date.setAttribute('max', this.max);
+		}
+		if (this.min) {
+			this.date.setAttribute('min', this.min);
+		}
+	}
+
+	// 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'),
+		);
+	}
+}