updated based on comment

pegasystems · Nov 4, 2024 · 0838ff8 · 0838ff8
1 parent fa947cb
commit 0838ff8
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 80 deletions.
diff --git a/src/components/fields/Currency/index.ts b/src/components/fields/Currency/index.ts
@@ -104,8 +104,12 @@ class Currency extends FormComponentBase {
     //  of any component that's a child of BridgeBase with a call to this.prepareForRender();
     this.prepareForRender();
 
+    // return if not visible
+    if (!this.bVisible) {
+      return nothing;
+    }
     // Handle and return if read only rendering
-    if (this.bReadonly && this.bVisible) {
+    if (this.bReadonly) {
       const theContent = html`
         <lion-input-amount
           ?readonly=${this.bReadonly}
@@ -124,24 +128,22 @@ class Currency extends FormComponentBase {
 
     // lion-input-amount options as based on Intl.NumberFormat standard
     //  NOTE: we set modelValue to parseFloat(this.value). This helps validation.
-    const theContent = html`${this.bVisible
-      ? html` <lion-input-amount
-          id=${this.theComponentId}
-          dataTestId=${this.testId}
-          .modelValue=${parseFloat(this.value)}
-          .fieldName=${this.label}
-          .validators=${this.lionValidatorsArray}
-          .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-          currency=${this.currencyISOCode}
-          ?readonly=${this.bReadonly}
-          ?disabled=${this.bDisabled}
-          @click=${this.fieldOnChange}
-          @blur=${this.fieldOnBlur}
-          @change=${this.fieldOnChange}
-        >
-          <span slot="label">${this.annotatedLabel}</span>
-        </lion-input-amount>`
-      : nothing}`;
+    const theContent = html` <lion-input-amount
+      id=${this.theComponentId}
+      dataTestId=${this.testId}
+      .modelValue=${parseFloat(this.value)}
+      .fieldName=${this.label}
+      .validators=${this.lionValidatorsArray}
+      .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
+      currency=${this.currencyISOCode}
+      ?readonly=${this.bReadonly}
+      ?disabled=${this.bDisabled}
+      @click=${this.fieldOnChange}
+      @blur=${this.fieldOnBlur}
+      @change=${this.fieldOnChange}
+    >
+      <span slot="label">${this.annotatedLabel}</span>
+    </lion-input-amount>`;
 
     this.renderTemplates.push(theContent);
 

diff --git a/src/components/fields/Decimal/index.ts b/src/components/fields/Decimal/index.ts
@@ -63,8 +63,13 @@ class Decimal extends FormComponentBase {
     //  of any component that's a child of BridgeBase with a call to this.prepareForRender();
     this.prepareForRender();
 
+    // return if not visible
+    if (!this.bVisible) {
+      return nothing;
+    }
+
     // Handle and return if read only rendering
-    if (this.bReadonly && this.bVisible) {
+    if (this.bReadonly) {
       const theContent = html`
         <lion-input-amount
           id=${this.theComponentId}
@@ -83,26 +88,24 @@ class Decimal extends FormComponentBase {
 
     loadDefaultFeedbackMessages();
 
-    const theContent = html`${this.bVisible
-      ? html` <div class="form-group">
-          <lion-input-amount
-            id=${this.theComponentId}
-            name="Amount"
-            dataTestId=${this.testId}
-            .modelValue=${this.value}
-            .fieldName=${this.label}
-            .validators=${this.lionValidatorsArray}
-            .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-            ?readonly=${this.bReadonly}
-            ?disabled=${this.bDisabled}
-            @click=${this.fieldOnChange}
-            @blur=${this.fieldOnBlur}
-            @change=${this.fieldOnChange}
-          >
-            <span slot="label">${this.annotatedLabel}</span>
-          </lion-input-amount>
-        </div>`
-      : nothing}`;
+    const theContent = html` <div class="form-group">
+      <lion-input-amount
+        id=${this.theComponentId}
+        name="Amount"
+        dataTestId=${this.testId}
+        .modelValue=${this.value}
+        .fieldName=${this.label}
+        .validators=${this.lionValidatorsArray}
+        .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
+        ?readonly=${this.bReadonly}
+        ?disabled=${this.bDisabled}
+        @click=${this.fieldOnChange}
+        @blur=${this.fieldOnBlur}
+        @change=${this.fieldOnChange}
+      >
+        <span slot="label">${this.annotatedLabel}</span>
+      </lion-input-amount>
+    </div>`;
 
     this.renderTemplates.push(theContent);
 

diff --git a/src/components/fields/Integer/index.ts b/src/components/fields/Integer/index.ts
@@ -69,8 +69,13 @@ class Integer extends FormComponentBase {
     //  of any component that's a child of BridgeBase with a call to this.prepareForRender();
     this.prepareForRender();
 
+    // return if not visible
+    if (!this.bVisible) {
+      return nothing;
+    }
+
     // Handle and return if read only rendering
-    if (this.bReadonly && this.bVisible) {
+    if (this.bReadonly) {
       const theContent = html`
         <lion-input-amount
           id=${this.theComponentId}
@@ -94,27 +99,25 @@ class Integer extends FormComponentBase {
 
     // lion-input-amount options as based on Intl.NumberFormat standard
     //  NOTE: we set modelValue to parseInt(this.value) to trim any decimal. This helps validation.
-    const theContent = html`${this.bVisible
-      ? html` <lion-input-amount
-          id=${this.theComponentId}
-          dataTestId=${this.testId}
-          .fieldName=${this.label}
-          .formatOptions="${{
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0
-          }}"
-          .modelValue=${parseInt(this.value, 10)}
-          .validators=${this.lionValidatorsArray}
-          .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-          ?readonly=${this.bReadonly}
-          ?disabled=${this.bDisabled}
-          @click=${this.fieldOnChange}
-          @blur=${this.fieldOnBlur}
-          @change=${this.fieldOnChange}
-        >
-          <span slot="label">${this.annotatedLabel}</span>
-        </lion-input-amount>`
-      : nothing}`;
+    const theContent = html` <lion-input-amount
+      id=${this.theComponentId}
+      dataTestId=${this.testId}
+      .fieldName=${this.label}
+      .formatOptions="${{
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      }}"
+      .modelValue=${parseInt(this.value, 10)}
+      .validators=${this.lionValidatorsArray}
+      .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
+      ?readonly=${this.bReadonly}
+      ?disabled=${this.bDisabled}
+      @click=${this.fieldOnChange}
+      @blur=${this.fieldOnBlur}
+      @change=${this.fieldOnChange}
+    >
+      <span slot="label">${this.annotatedLabel}</span>
+    </lion-input-amount>`;
 
     this.renderTemplates.push(theContent);
 

diff --git a/src/components/fields/Percentage/index.ts b/src/components/fields/Percentage/index.ts
@@ -77,8 +77,13 @@ class Percentage extends FormComponentBase {
     //  of any component that's a child of BridgeBase with a call to this.prepareForRender();
     this.prepareForRender();
 
+    // return if not visible
+    if (!this.bVisible) {
+      return nothing;
+    }
+
     // Handle and return if read only rendering
-    if (this.bReadonly && this.bVisible) {
+    if (this.bReadonly) {
       const theContent = html`
         <lion-input-amount
           id=${this.theComponentId}
@@ -98,23 +103,21 @@ class Percentage extends FormComponentBase {
 
     // lion-input-amount options as based on Intl.NumberFormat standard
     //  NOTE: we set modelValue to parseFloat(this.value). This helps validation.
-    const theContent = html`${this.bVisible
-      ? html` <lion-input-amount
-          id=${this.theComponentId}
-          dataTestId=${this.testId}
-          .fieldName=${this.label}
-          .formatOptions=${{ style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 4 }}
-          .modelValue=${parseFloat(this.value)}
-          .validators=${this.lionValidatorsArray}
-          .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-          ?readonly=${this.bReadonly}
-          ?disabled=${this.bDisabled}
-          @blur=${this.fieldOnBlur}
-          @change=${this.fieldOnChange}
-        >
-          <span slot="label">${this.annotatedLabel}</span>
-        </lion-input-amount>`
-      : nothing}`;
+    const theContent = html` <lion-input-amount
+      id=${this.theComponentId}
+      dataTestId=${this.testId}
+      .fieldName=${this.label}
+      .formatOptions=${{ style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 4 }}
+      .modelValue=${parseFloat(this.value)}
+      .validators=${this.lionValidatorsArray}
+      .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
+      ?readonly=${this.bReadonly}
+      ?disabled=${this.bDisabled}
+      @blur=${this.fieldOnBlur}
+      @change=${this.fieldOnChange}
+    >
+      <span slot="label">${this.annotatedLabel}</span>
+    </lion-input-amount>`;
 
     this.renderTemplates.push(theContent);