saasufy-components 5.5.1 → 5.7.0

package/README.md

@@ -692,6 +692,7 @@ This component can be configured to provide its data to multiple components (con
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
 - `input-props`: Can be used to set additional attributes on the inner `input` element. Must be in the format `attr1=value1,attr2=value2`.
+- `force-init-change`: This attribute can be used to ensure that an `input-provider` of type `select` will trigger a change when initialized with a default (non-empty option). By default, the `input-provider` does not trigger a change when initialized with a default value.
 
 ### input-combiner
 

package/input-provider.js

@@ -70,6 +70,10 @@ class InputProvider extends HTMLElement {
 
   set value(newValue) {
     if (this.inputElement) {
+      let forceInitChange = this.forceTriggerChange;
+      if (forceInitChange) {
+        delete this.forceTriggerChange;
+      }
       if (newValue && this.hasAttribute('computable-value')) {
         newValue = renderTemplate(newValue);
       }
@@ -82,15 +86,14 @@ class InputProvider extends HTMLElement {
         } else {
           this.inputElement.checked = newValue;
         }
-        if (oldValue !== newValue) {
+        if (oldValue !== newValue || forceInitChange) {
           this.triggerChange();
         }
         return;
       }
       oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
-      if (oldValue !== newValue || this.forceTriggerChange) {
-        delete this.forceTriggerChange;
+      if (oldValue !== newValue || forceInitChange) {
         this.triggerChange();
       }
     }
@@ -131,13 +134,18 @@ class InputProvider extends HTMLElement {
     this.inputElement = document.createElement(elementType);
     if (type === 'select') {
       if (options) {
-        let optionElements = options
-        .split(',')
-        .map((option) => {
-          if (option === placeholder) {
-            return `<option value="" selected class="select-default-option">${option}</option>`;
+        let {
+          fieldNames: optionNames,
+          fieldValues: optionValues
+        } = convertStringToFieldParams(options);
+
+        let optionElements = optionNames
+        .map((optionName) => {
+          let optionValue = optionValues[optionName] || optionName;
+          if (optionName === placeholder) {
+            return `<option value="" selected class="select-default-option">${optionName}</option>`;
           }
-          return `<option value="${option}">${option}</option>`;
+          return `<option value="${optionValue}">${optionName}</option>`;
         })
         .join('');
         this.inputElement.innerHTML = optionElements;
@@ -176,11 +184,8 @@ class InputProvider extends HTMLElement {
       }
     }
 
-    if (type === 'select') {
-      this.forceTriggerChange = true;
-      if (!value) {
-        value = this.inputElement.value;
-      }
+    if (type === 'select' && !value) {
+      value = this.inputElement.value;
     }
 
     this.updateInputClassList(value);
@@ -189,6 +194,9 @@ class InputProvider extends HTMLElement {
     let destroyHandlers = this.updateConsumerElementsOnEdit();
 
     if (value) {
+      if (this.hasAttribute('force-init-change')) {
+        this.forceTriggerChange = true;
+      }
       this.value = value;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "5.5.1",
+  "version": "5.7.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {