@luftborn/custom-elements 1.4.0 → 1.4.1

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

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

@@ -1,72 +1,72 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'text-area-element',
-	template: `
-			<div class="wrapper">
-				<textarea rows=5 id='text-area-field'></textarea>
-			</div>`,
-	style: `
-    :host{
-            width:100%;
-    }
-    .wrapper{
-            display:flex;
-    }
-    textarea{
-            box-sizing: border-box;
-            width: 100% !important;
-            border: none;
-            background-color: #f1f4ff;
-            margin: 2px;
-            resize: none;
-    }
-           `,
-	useShadow: true,
-})
-export class TextAreaElement 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('#text-area-field');
-		this.text.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.text.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: 'text-area-element',
+	template: `
+			<div class="wrapper">
+				<textarea rows=5 id='text-area-field'></textarea>
+			</div>`,
+	style: `
+    :host{
+            width:100%;
+    }
+    .wrapper{
+            display:flex;
+    }
+    textarea{
+            box-sizing: border-box;
+            width: 100% !important;
+            border: none;
+            background-color: #f1f4ff;
+            margin: 2px;
+            resize: none;
+    }
+           `,
+	useShadow: true,
+})
+export class TextAreaElement 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('#text-area-field');
+		this.text.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.text.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/TextField/TextFieldElement.ts

@@ -1,72 +1,72 @@
-import CustomElement from '../../framework/custom-element.decorator';
-import { CustomInputElement } from '../../framework/CustomInputElement';
-import { CustomElementEventArgs } from '../../framework/CustomEvents';
-
-@CustomElement({
-	selector: 'text-element',
-	template: `
-			<div class="wrapper">
-				<input type="text" id='text-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 TextFieldElement 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('#text-field');
-		this.text.addEventListener('change', this.change.bind(this));
-		if (this.required) {
-			this.text.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: 'text-element',
+	template: `
+			<div class="wrapper">
+				<input type="text" id='text-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 TextFieldElement 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('#text-field');
+		this.text.addEventListener('change', this.change.bind(this));
+		if (this.required) {
+			this.text.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'),
+		);
+	}
+}