@luftborn/custom-elements 1.1.38 → 1.1.41

package/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js

@@ -8,7 +8,7 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-(function() {
+(function () {
   'use strict';
 
   /**
@@ -47,7 +47,9 @@
 
   function fireEvent() {
     window.WebComponents.ready = true;
-    document.dispatchEvent(new CustomEvent('WebComponentsReady', { bubbles: true }));
+    document.dispatchEvent(
+      new CustomEvent('WebComponentsReady', {bubbles: true})
+    );
   }
 
   function batchCustomElements() {
@@ -77,43 +79,51 @@
 
   function runWhenLoadedFns() {
     allowUpgrades = false;
-    var fnsMap = whenLoadedFns.map(function(fn) {
+    var fnsMap = whenLoadedFns.map(function (fn) {
       return fn instanceof Function ? fn() : fn;
     });
     whenLoadedFns = [];
-    return Promise.all(fnsMap).then(function() {
-      allowUpgrades = true;
-      flushFn && flushFn();
-    }).catch(function(err) {
-      console.error(err);
-    });
+    return Promise.all(fnsMap)
+      .then(function () {
+        allowUpgrades = true;
+        flushFn && flushFn();
+      })
+      .catch(function (err) {
+        console.error(err);
+      });
   }
 
   window.WebComponents = window.WebComponents || {};
   window.WebComponents.ready = window.WebComponents.ready || false;
-  window.WebComponents.waitFor = window.WebComponents.waitFor || function(waitFn) {
-    if (!waitFn) {
-      return;
-    }
-    whenLoadedFns.push(waitFn);
-    if (polyfillsLoaded) {
-      runWhenLoadedFns();
-    }
-  };
+  window.WebComponents.waitFor =
+    window.WebComponents.waitFor ||
+    function (waitFn) {
+      if (!waitFn) {
+        return;
+      }
+      whenLoadedFns.push(waitFn);
+      if (polyfillsLoaded) {
+        runWhenLoadedFns();
+      }
+    };
   window.WebComponents._batchCustomElements = batchCustomElements;
 
   var name = 'webcomponents-loader.js';
   // Feature detect which polyfill needs to be imported.
   var polyfills = [];
-  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
-    (window.ShadyDOM && window.ShadyDOM.force)) {
+  if (
+    !(
+      'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype
+    ) ||
+    (window.ShadyDOM && window.ShadyDOM.force)
+  ) {
     polyfills.push('sd');
   }
   if (!window.customElements || window.customElements.forcePolyfill) {
     polyfills.push('ce');
   }
 
-  var needsTemplate = (function() {
+  var needsTemplate = (function () {
     // no real <template> because no `content` property (IE and older browsers)
     var t = document.createElement('template');
     if (!('content' in t)) {
@@ -128,13 +138,21 @@
     t2.content.appendChild(document.createElement('div'));
     t.content.appendChild(t2);
     var clone = t.cloneNode(true);
-    return (clone.content.childNodes.length === 0 ||
-        clone.content.firstChild.content.childNodes.length === 0);
+    return (
+      clone.content.childNodes.length === 0 ||
+      clone.content.firstChild.content.childNodes.length === 0
+    );
   })();
 
   // NOTE: any browser that does not have template or ES6 features
   // must load the full suite of polyfills.
-  if (!window.Promise || !Array.from || !window.URL || !window.Symbol || needsTemplate) {
+  if (
+    !window.Promise ||
+    !Array.from ||
+    !window.URL ||
+    !window.Symbol ||
+    needsTemplate
+  ) {
     polyfills = ['sd-ce-pf'];
   }
 
@@ -146,7 +164,7 @@
     if (window.WebComponents.root) {
       url = window.WebComponents.root + polyfillFile;
     } else {
-      var script = document.querySelector('script[src*="' + name +'"]');
+      var script = document.querySelector('script[src*="' + name + '"]');
       // Load it from the right place.
       url = script.src.replace(name, polyfillFile);
     }
@@ -156,7 +174,10 @@
     // if readyState is 'loading', this script is synchronous
     if (document.readyState === 'loading') {
       // make sure custom elements are batched whenever parser gets to the injected script
-      newScript.setAttribute('onload', 'window.WebComponents._batchCustomElements()');
+      newScript.setAttribute(
+        'onload',
+        'window.WebComponents._batchCustomElements()'
+      );
       document.write(newScript.outerHTML);
       document.addEventListener('DOMContentLoaded', ready);
     } else {
@@ -176,10 +197,10 @@
     } else {
       // this script may come between DCL and load, so listen for both, and cancel load listener if DCL fires
       window.addEventListener('load', ready);
-      window.addEventListener('DOMContentLoaded', function() {
+      window.addEventListener('DOMContentLoaded', function () {
         window.removeEventListener('load', ready);
         ready();
-      })
+      });
     }
   }
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luftborn/custom-elements",
-	"version": "1.1.38",
+	"version": "1.1.41",
 	"description": "custom HTML elements for the form builder application ",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -32,7 +32,7 @@
 		"gulp-uglify": "~3.0.2",
 		"gulp-webserver": "~0.9.1",
 		"tsify": "~4.0.1",
-		"typescript": "~3.9.3",
+		"typescript": "4.4.3",
 		"vinyl-buffer": "~1.0.1",
 		"vinyl-source-stream": "~2.0.0"
 	}

package/src/elements/CheckBoxElement/CheckBoxElement.ts

@@ -71,6 +71,7 @@ export class CheckBoxElement extends CustomInputElement {
 
 	private addCheckBoxes() {
 		const wrapper = super.getChildElement('.wrapper');
+		wrapper.innerHTML = "";
 		this.options.forEach((element, index) => {
 			wrapper.insertAdjacentHTML(
 				'beforeend',

package/src/elements/DropDownList/DropDownListElement.ts

@@ -8,6 +8,7 @@ import { StringUtil } from '@luftborn/utilities';
 	template: `
 			<div class="wrapper">
                <select id='select-list'>
+			   <option selected disabled>-</option>
                </select>
 			</div>`,
 	style: `
@@ -76,6 +77,7 @@ export class DropDownListElement extends CustomInputElement {
 	}
 
 	private addOptions() {
+		this.select.innerHTML = "";
 		this.options.forEach((element, index) => {
 			this.select.insertAdjacentHTML(
 				'beforeend',

package/src/elements/RadioButtonGroup/RadioButtonGroupElement.ts

@@ -74,6 +74,7 @@ export class RadioButtonGroupElement extends CustomInputElement {
 
 	private addRadioButtons() {
 		const wrapper = super.getChildElement('.wrapper');
+		wrapper.innerHTML = "";
 		this.options.forEach((element, index) => {
 			wrapper.insertAdjacentHTML(
 				'beforeend',

package/src/framework/CustomInputElement.ts

@@ -43,6 +43,23 @@ export abstract class CustomInputElement extends HTMLElement {
 	abstract validate(): void;
 	abstract change($event): void;
 
+	compareVlaues = [];
+
+	isValueConditionMatched(val: any) {
+		if (val && Array.isArray(val) && val.length) {
+			let result = false;
+			val.forEach(element => {
+				const elementMatched = this.compareVlaues.findIndex(x => x == element) !== -1;
+				if (elementMatched) {
+					result = true;
+					return;
+				}
+			});
+			return result;
+		}
+		return this.compareVlaues.findIndex(x => x == val) !== -1;
+	}
+
 	connectedCallback(): void {
 		this.init();
 		this.setAttributes();
@@ -144,8 +161,8 @@ export abstract class CustomInputElement extends HTMLElement {
 
 	private bindDependency(elementName: string, type: string, value?: string, criteria?: string,): void {
 		let element = document.querySelector(`[name="${elementName}"]`) as CustomInputElement;
-
 		if (element instanceof CustomInputElement) {
+			element.compareVlaues.push(value);
 			if (this.dependentOnList.hasOwnProperty(element.name)) {
 				return;
 			}
@@ -161,7 +178,7 @@ export abstract class CustomInputElement extends HTMLElement {
 				}
 				if (type === "custom") {
 					if (criteria === "Exact") {
-						IsConditionMatched = e.value == value;
+						IsConditionMatched = element.isValueConditionMatched(e.value);
 					} else if (criteria === "LessThan") {
 						IsConditionMatched = e.value < value;
 					} else if (criteria === "MoreThan") {