From 3419eca071fe2dfa3369b5c8098c2e7ee4c0293f Mon Sep 17 00:00:00 2001
From: samhere06 <118881732+samhere06@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:13:13 +0530
Subject: [PATCH] updated components to display formatting in readonly (#221)

* updated components to display formatting in readonly

* updated based on comment

---------

Co-authored-by: mohas22 <Sameer.Mohammed@pega.com>
---
 src/components/fields/Currency/index.ts       | 55 ++++++++-------
 src/components/fields/Decimal/index.ts        | 60 +++++++++--------
 src/components/fields/Integer/index.ts        | 67 +++++++++++--------
 src/components/fields/Percentage/index.ts     | 56 +++++++++-------
 .../DigV2/ComplexFields/DataReference.spec.js | 18 +++--
 tests/e2e/DigV2/FormFields/Decimal.spec.js    |  2 +-
 tests/e2e/DigV2/FormFields/Integer.spec.js    |  2 +-
 tests/e2e/DigV2/FormFields/Percentage.spec.js |  2 +-
 8 files changed, 148 insertions(+), 114 deletions(-)

diff --git a/src/components/fields/Currency/index.ts b/src/components/fields/Currency/index.ts
index 084441a..a5398bf 100644
--- a/src/components/fields/Currency/index.ts
+++ b/src/components/fields/Currency/index.ts
@@ -104,41 +104,46 @@ 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) {
-      return html`
-        <text-form
-          .pConn=${this.thePConn}
-          ?disabled=${this.bDisabled}
+      const theContent = html`
+        <lion-input-amount
+          ?readonly=${this.bReadonly}
           ?visible=${this.bVisible}
           label=${this.label}
-          value=${this.value}
-          testId=${this.testId}
+          .modelValue=${parseFloat(this.value)}
+          dataTestId=${this.testId}
+          currency=${this.currencyISOCode}
         >
-        </text-form>
+        </lion-input-amount>
       `;
+      this.renderTemplates.push(theContent);
+
+      return this.renderTemplates;
     }
 
     // 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
index d389c89..57e850c 100644
--- a/src/components/fields/Decimal/index.ts
+++ b/src/components/fields/Decimal/index.ts
@@ -63,43 +63,49 @@ 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) {
-      return html`
-        <text-form
-          .pConn=${this.thePConn}
-          ?disabled=${this.bDisabled}
+      const theContent = html`
+        <lion-input-amount
+          id=${this.theComponentId}
+          ?readonly=${this.bReadonly}
           ?visible=${this.bVisible}
           label=${this.label}
-          value=${this.value}
-          testId=${this.testId}
+          .modelValue=${this.value}
+          dataTestId=${this.testId}
         >
-        </text-form>
+        </lion-input-amount>
       `;
+      this.renderTemplates.push(theContent);
+
+      return this.renderTemplates;
     }
 
     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
index 0b1e048..9b7d781 100644
--- a/src/components/fields/Integer/index.ts
+++ b/src/components/fields/Integer/index.ts
@@ -69,44 +69,55 @@ 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) {
-      return html`
-        <text-form
-          .pConn=${this.thePConn}
-          ?disabled=${this.bDisabled}
+      const theContent = html`
+        <lion-input-amount
+          id=${this.theComponentId}
+          ?readonly=${this.bReadonly}
           ?visible=${this.bVisible}
           label=${this.label}
-          value=${this.value}
-          testId=${this.testId}
+          .formatOptions="${{
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0
+          }}"
+          .modelValue=${this.value}
+          dataTestId=${this.testId}
         >
-        </text-form>
+        </lion-input-amount>
       `;
+
+      this.renderTemplates.push(theContent);
+
+      return this.renderTemplates;
     }
 
     // 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
index 77b9ee2..bb71e2c 100644
--- a/src/components/fields/Percentage/index.ts
+++ b/src/components/fields/Percentage/index.ts
@@ -77,41 +77,47 @@ 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) {
-      return html`
-        <text-form
-          .pConn=${this.thePConn}
-          ?disabled=${this.bDisabled}
+      const theContent = html`
+        <lion-input-amount
+          id=${this.theComponentId}
+          ?readonly=${this.bReadonly}
           ?visible=${this.bVisible}
           label=${this.label}
-          value=${this.value}
-          testId=${this.testId}
+          .formatOptions=${{ style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 4 }}
+          .modelValue=${parseFloat(this.value)}
+          dataTestId=${this.testId}
         >
-        </text-form>
+        </lion-input-amount>
       `;
+      this.renderTemplates.push(theContent);
+
+      return this.renderTemplates;
     }
 
     // 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}
-          @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=${{ 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);
 
diff --git a/tests/e2e/DigV2/ComplexFields/DataReference.spec.js b/tests/e2e/DigV2/ComplexFields/DataReference.spec.js
index d05138a..918d043 100644
--- a/tests/e2e/DigV2/ComplexFields/DataReference.spec.js
+++ b/tests/e2e/DigV2/ComplexFields/DataReference.spec.js
@@ -48,7 +48,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Basic Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="75"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('75.00');
     await expect(assignment.locator('text-form[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
@@ -64,7 +65,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Basic Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="75"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('75.00');
     await expect(assignment.locator('text-form[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
@@ -84,7 +86,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Luxury Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="200"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('200.00');
     await expect(assignment.locator('text-form[value="d63e2d8a-bd39-47b6-8dab-dce78a8bf91d"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
@@ -105,7 +108,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Basic Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="75"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('75.00');
     await expect(assignment.locator('text-form[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
@@ -150,7 +154,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Basic Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="75"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('75.00');
     await expect(assignment.locator('text-form[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
@@ -187,7 +192,8 @@ test.describe('E2E test', () => {
 
     /** Testing the values present on Confirm screen */
     await expect(assignment.locator('text-form[value="Basic Product"]')).toBeVisible();
-    await expect(assignment.locator('text-form[value="75"]')).toBeVisible();
+    await expect(assignment.locator('currency-form >> lion-input-amount')).toBeVisible();
+    await expect(await assignment.locator('currency-form >> lion-input-amount >> input').inputValue()).toBe('75.00');
     await expect(assignment.locator('text-form[value="9f2584c2-5cb4-4abe-a261-d68050ee0f66"]')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
diff --git a/tests/e2e/DigV2/FormFields/Decimal.spec.js b/tests/e2e/DigV2/FormFields/Decimal.spec.js
index 11552e2..ed46fad 100644
--- a/tests/e2e/DigV2/FormFields/Decimal.spec.js
+++ b/tests/e2e/DigV2/FormFields/Decimal.spec.js
@@ -78,7 +78,7 @@ test.describe('E2E test', () => {
     /** Selecting Update from the Sub Category dropdown */
     await page.selectOption('lion-select[datatestid="9463d5f18a8924b3200b56efaad63bda"] select', 'Update');
 
-    const readonlyDecimal = page.locator('lion-input[datatestid="acdcc5f01c940f07cf14373612721a0c"]  >> input');
+    const readonlyDecimal = page.locator('lion-input-amount[datatestid="acdcc5f01c940f07cf14373612721a0c"]');
     attributes = await common.getAttributes(readonlyDecimal);
     await expect(attributes.includes('readonly')).toBeTruthy();
 
diff --git a/tests/e2e/DigV2/FormFields/Integer.spec.js b/tests/e2e/DigV2/FormFields/Integer.spec.js
index f8819a2..251bc3e 100644
--- a/tests/e2e/DigV2/FormFields/Integer.spec.js
+++ b/tests/e2e/DigV2/FormFields/Integer.spec.js
@@ -80,7 +80,7 @@ test.describe('E2E test', () => {
     /** Selecting Update from the Sub Category dropdown */
     await page.selectOption('lion-select[datatestid="9463d5f18a8924b3200b56efaad63bda"] select', 'Update');
 
-    const readonlyInteger = page.locator('lion-input[datatestid="c6f04035ab4212992a31968bf190875b"]  >> input');
+    const readonlyInteger = page.locator('lion-input-amount[datatestid="c6f04035ab4212992a31968bf190875b"]');
     attributes = await common.getAttributes(readonlyInteger);
     await expect(attributes.includes('readonly')).toBeTruthy();
 
diff --git a/tests/e2e/DigV2/FormFields/Percentage.spec.js b/tests/e2e/DigV2/FormFields/Percentage.spec.js
index 4ef7604..6c12401 100644
--- a/tests/e2e/DigV2/FormFields/Percentage.spec.js
+++ b/tests/e2e/DigV2/FormFields/Percentage.spec.js
@@ -76,7 +76,7 @@ test.describe('E2E test', () => {
     /** Selecting Update from the Sub Category dropdown */
     await page.selectOption('lion-select[datatestid="9463d5f18a8924b3200b56efaad63bda"] select', 'Update');
 
-    const readonlyPercentage = page.locator('lion-input[datatestid="4d28c40ee619dafd16f7f4813e18ece6"]  >> input');
+    const readonlyPercentage = page.locator('lion-input-amount[datatestid="4d28c40ee619dafd16f7f4813e18ece6"]');
     attributes = await common.getAttributes(readonlyPercentage);
     await expect(attributes.includes('readonly')).toBeTruthy();