From 4310aa1f7ca11193447d7a0fe71ca3568efc127c Mon Sep 17 00:00:00 2001
From: "Chris E. Kelley" <ckelley@rti.org>
Date: Tue, 6 Oct 2020 14:59:29 -0500
Subject: [PATCH] Fix for #warn-text bg color displaying when empty

---
 demo/index.html         | 25 ++++++++++++++
 input/tangy-input.js    |  7 ++--
 input/tangy-location.js | 15 +++++----
 input/tangy-select.js   | 73 +++++++++++++++++++----------------------
 4 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 1a24d767..5b67e359 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -249,6 +249,31 @@ <h3>Custom warning messages and custom warning logic</h3>
           <tangy-form id="my-form-2" title="My Form 2">
             <tangy-form-item id="item1">
               <tangy-input type="text" allowed-pattern="" inner-label="g/dL" name="hb" required="" question-number="" label="Hb result" hint-text="1 decimal place" valid-if="/^[0-9]+\.[0-9]$/.test(input.value) " error-text="ERROR: Please enter to the first decimal place. " warn-if="parseFloat(getValue('hb')) > '18.0' || parseFloat(getValue('hb')) < '1.0'" warn-text="WARNING: The expected range for this response is 1.0-18.0, but values outside of this range will be accepted. Please review the response and correct any data entry errors before continuing." class="" style=""></tangy-input>
+              <tangy-select name="warn_fruit_selection_2"
+                            label="What is your <b>second favorite</b> fruit?"
+                            hint-text="This is <b>hint text</b>."
+                            warn-if="getValue('warn_fruit_selection_2') === 'Orange'"
+                            warn-text="WARNING: Nerd! Tangerines are better."
+                            error-text="ERROR: Please select the correct value. "
+                            required="">
+                <option name="orange">Orange</option>
+                <option name="banana">Banana</option>
+                <option name="tangerine"><b>Tangerine</b></option>
+              </tangy-select>
+              <tangy-radio-buttons
+                      name="input1"
+                      label="Answer No or Maybe and this question will be flagged with a warning. Answer No and this question will be flagged with a discrepancy. If your selection causes a discrepancy or warning to be flagged, you may click submit again to proceed. If however you selected No, submitted, then selected Maybe, because you changed your selection you will be required to click submit one last time."
+                      warn-if="getValue('input1') === 'maybe' || getValue('input1') === 'no'"
+                      discrepancy-if="getValue('input1') === 'no'"
+                      discrepancy-text="This is a discrepancy."
+                      warn-text="This is a warning."
+              >
+                <option value="maybe">Maybe</option>
+                <option value="no">No</option>
+                <option value="yes">Yes</option>
+              </tangy-radio-buttons>
+              <tangy-input type="text" allowed-pattern="" name="simple" required="" question-number="" label="Simple input"  class="" style=""></tangy-input>
+<!--              <tangy-location name="location" show-levels="county,school" filter-by="school1,school4" location-src="./location-list.json"></tangy-location>-->
           </tangy-form>
         </template>
       </demo-snippet>
diff --git a/input/tangy-input.js b/input/tangy-input.js
index 61a47f2f..a51a3b94 100644
--- a/input/tangy-input.js
+++ b/input/tangy-input.js
@@ -37,11 +37,12 @@ export class TangyInput extends PolymerElement {
       <div id="qnum-number"></div>
       <div id="qnum-content">
         <div id="container"></div>
+        <div id="error-text"></div>    
+        <div id="warn-text"></div>
+        <div id="discrepancy-text"></div>
       </div>
     </div>
-    <div id="error-text"></div>    
-    <div id="warn-text"></div>
-    <div id="discrepancy-text"></div>
+    
   `
   }
 
diff --git a/input/tangy-location.js b/input/tangy-location.js
index 26908030..9b4df231 100644
--- a/input/tangy-location.js
+++ b/input/tangy-location.js
@@ -669,12 +669,7 @@ class TangyLocation extends PolymerElement {
             : ''
           }
         </div>
-        <div id="warn-text">
-          ${this.hasWarning
-            ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
-            : ''
-          }
-        </div>
+        <div id="warn-text"></div>
         <div id="discrepancy-text">
           ${this.hasDiscrepancy
             ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
@@ -821,6 +816,14 @@ class TangyLocation extends PolymerElement {
       this.render()
     }
   }
+
+  onWarnChange(value) {
+    if (this.shadowRoot.querySelector('#warn-text')) {
+      this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
+          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
+          : ''
+    }
+  }
   
 }
 
diff --git a/input/tangy-select.js b/input/tangy-select.js
index 184bcd92..3576614d 100644
--- a/input/tangy-select.js
+++ b/input/tangy-select.js
@@ -20,21 +20,19 @@ class TangySelect extends PolymerElement {
     <style include="tangy-element-styles"></style>
     <style include="tangy-common-styles"></style>
     <style include="mdc-select-style"></style>
-
     <style>
-    #errorText {
-      padding: 10px 10px 10px 0px;
-      font-size: medium;
-      font-weight: bold;
-      color: var(--error-color);
-    }
- 
+      #error-text, #errorText {
+        margin-top: 2em;
+        margin-bottom: 1em;
+      }
     </style>
-
     <div class="flex-container m-y-25">
       <div id="qnum-number"></div>
       <div id="qnum-content">
-        <div id="container">
+        <div id="container"></div>
+        <div id="error-text"></div>
+        <div id="warn-text"></div>
+        <div id="discrepancy-text"></div>
       </div>
     </div>
     `;
@@ -107,8 +105,8 @@ class TangySelect extends PolymerElement {
       },
       invalid: {
         type: Boolean,
-        observer: 'onInvalidChange',
         value: false,
+        observer: 'onInvalidChange',
         reflectToAttribute: true
       },
       incomplete: {
@@ -175,25 +173,6 @@ class TangySelect extends PolymerElement {
         </select>
         <div class="mdc-select__bottom-line"></div>
       </div>
-      <label id="error-text">
-        ${
-          this.invalid
-            ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
-            : ''
-        }
-      </label>
-      <div id="warn-text">
-        ${this.hasWarning
-          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
-          : ''
-        }
-      </div>
-      <div id="discrepancy-text">
-        ${this.hasDiscrepancy
-          ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
-          : ''
-        }
-      </div>
     `
     this._onChangeListener = this
       .shadowRoot
@@ -202,15 +181,6 @@ class TangySelect extends PolymerElement {
     this.dispatchEvent(new CustomEvent('render'))
   }
 
-  onInvalidChange(value) {
-    // @TODO I'm not sure this hook is what ends up causing the error message to be displayed.
-    if (this.shadowRoot.querySelector('#error-text')) {
-      this.shadowRoot.querySelector('#error-text').innerHTML = this.invalid
-        ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
-        : ''
-    }
-  }
-
   onChange(event) {
     this.value = event.target.value 
     this.dispatchEvent(new CustomEvent('change'))
@@ -233,5 +203,30 @@ class TangySelect extends PolymerElement {
     }
   }
 
+  onInvalidChange(value) {
+    // @TODO I'm not sure this hook is what ends up causing the error message to be displayed.
+    if (this.shadowRoot.querySelector('#error-text')) {
+      this.shadowRoot.querySelector('#error-text').innerHTML = this.invalid
+          ? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
+          : ''
+    }
+  }
+
+  onDiscrepancyChange(value) {
+    if (this.shadowRoot.querySelector('#discrepancy-text')) {
+      this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
+          ? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
+          : ''
+    }
+  }
+
+  onWarnChange(value) {
+    if (this.shadowRoot.querySelector('#warn-text')) {
+      this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
+          ? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
+          : ''
+    }
+  }
+
 }
 window.customElements.define(TangySelect.is, TangySelect);