From 18b38713cc5514a375fbf92a60e347a22a700fe2 Mon Sep 17 00:00:00 2001
From: skyflow-shravan <shravankumar.nalla@skyflow.com>
Date: Wed, 14 Aug 2024 14:43:20 +0530
Subject: [PATCH] SK-1602 success and error icon for input fields

---
 assets/errorIcon.svg       |  1 +
 assets/successIcon.svg     |  4 ++++
 src/core/internal/index.ts | 28 ++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 assets/errorIcon.svg
 create mode 100644 assets/successIcon.svg

diff --git a/assets/errorIcon.svg b/assets/errorIcon.svg
new file mode 100644
index 00000000..2295b82a
--- /dev/null
+++ b/assets/errorIcon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg width="21" height="15" style="overflow:visible;enable-background:new 0 0 32 32" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g id="Error_1_"><g id="Error"><circle cx="16" cy="16" id="BG" r="16" style="fill:#D72828;"/><path d="M14.5,25h3v-3h-3V25z M14.5,6v13h3V6H14.5z" id="Exclamatory_x5F_Sign" style="fill:#E6E6E6;"/></g></g></g></svg>
\ No newline at end of file
diff --git a/assets/successIcon.svg b/assets/successIcon.svg
new file mode 100644
index 00000000..2dd88e7a
--- /dev/null
+++ b/assets/successIcon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg width="21" height="15" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#2BB673;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:30;stroke-miterlimit:10;}
+</style><path class="st0" d="M489,255.9c0-0.2,0-0.5,0-0.7c0-1.6,0-3.2-0.1-4.7c0-0.9-0.1-1.8-0.1-2.8c0-0.9-0.1-1.8-0.1-2.7  c-0.1-1.1-0.1-2.2-0.2-3.3c0-0.7-0.1-1.4-0.1-2.1c-0.1-1.2-0.2-2.4-0.3-3.6c0-0.5-0.1-1.1-0.1-1.6c-0.1-1.3-0.3-2.6-0.4-4  c0-0.3-0.1-0.7-0.1-1C474.3,113.2,375.7,22.9,256,22.9S37.7,113.2,24.5,229.5c0,0.3-0.1,0.7-0.1,1c-0.1,1.3-0.3,2.6-0.4,4  c-0.1,0.5-0.1,1.1-0.1,1.6c-0.1,1.2-0.2,2.4-0.3,3.6c0,0.7-0.1,1.4-0.1,2.1c-0.1,1.1-0.1,2.2-0.2,3.3c0,0.9-0.1,1.8-0.1,2.7  c0,0.9-0.1,1.8-0.1,2.8c0,1.6-0.1,3.2-0.1,4.7c0,0.2,0,0.5,0,0.7c0,0,0,0,0,0.1s0,0,0,0.1c0,0.2,0,0.5,0,0.7c0,1.6,0,3.2,0.1,4.7  c0,0.9,0.1,1.8,0.1,2.8c0,0.9,0.1,1.8,0.1,2.7c0.1,1.1,0.1,2.2,0.2,3.3c0,0.7,0.1,1.4,0.1,2.1c0.1,1.2,0.2,2.4,0.3,3.6  c0,0.5,0.1,1.1,0.1,1.6c0.1,1.3,0.3,2.6,0.4,4c0,0.3,0.1,0.7,0.1,1C37.7,398.8,136.3,489.1,256,489.1s218.3-90.3,231.5-206.5  c0-0.3,0.1-0.7,0.1-1c0.1-1.3,0.3-2.6,0.4-4c0.1-0.5,0.1-1.1,0.1-1.6c0.1-1.2,0.2-2.4,0.3-3.6c0-0.7,0.1-1.4,0.1-2.1  c0.1-1.1,0.1-2.2,0.2-3.3c0-0.9,0.1-1.8,0.1-2.7c0-0.9,0.1-1.8,0.1-2.8c0-1.6,0.1-3.2,0.1-4.7c0-0.2,0-0.5,0-0.7  C489,256,489,256,489,255.9C489,256,489,256,489,255.9z" id="XMLID_3_"/><g id="XMLID_1_"><line class="st1" id="XMLID_2_" x1="213.6" x2="369.7" y1="344.2" y2="188.2"/><line class="st1" id="XMLID_4_" x1="233.8" x2="154.7" y1="345.2" y2="266.1"/></g></svg>
\ No newline at end of file
diff --git a/src/core/internal/index.ts b/src/core/internal/index.ts
index d6b87201..462ba2fd 100644
--- a/src/core/internal/index.ts
+++ b/src/core/internal/index.ts
@@ -45,6 +45,8 @@ import {
   appendZeroToOne, domReady, getMaskedOutput, handleCopyIconClick, styleToString,
 } from '../../utils/helpers';
 import { ContainerType } from '../../skyflow';
+import successIcon from '../../../assets/successIcon.svg'
+import errorIcon from '../../../assets/errorIcon.svg'
 
 export class FrameController {
   controller?: FrameController;
@@ -128,6 +130,10 @@ export class FrameElement {
 
   private isRequiredLabel?: HTMLLabelElement;
 
+  private isValidIcon?: HTMLImageElement;
+
+  private isInvalidIcon?: HTMLImageElement;
+
   private dropdownIcon?: HTMLImageElement;
 
   private dropdownSelect?: HTMLSelectElement;
@@ -239,6 +245,16 @@ export class FrameElement {
       this.isRequiredLabel.className = `SkyflowElement-label-${this.options.elementName}-${STYLE_TYPE.REQUIRED_ASTERISK}`;
       this.labelDiv.append(this.isRequiredLabel);
     }
+    if (this.domError) {
+      this.isValidIcon = document.createElement('img');
+      this.isValidIcon.src = successIcon;
+      this.labelDiv.append(this.isValidIcon);
+    }
+    if (this.domError) {
+      this.isInvalidIcon = document.createElement('img');
+      this.isInvalidIcon.src = errorIcon;
+      this.labelDiv.append(this.isInvalidIcon);
+    }
     this.iFrameFormElement.on(ELEMENT_EVENTS_TO_CLIENT.FOCUS, (state) => {
       this.focusChange(true);
       state.isEmpty = !state.value;
@@ -296,6 +312,18 @@ export class FrameElement {
         this.domCopy.style.display = 'none';
       }
 
+      if (!state.isEmpty && state.isValid && this.domError && this.isValidIcon) {
+        this.isValidIcon.style.display = 'block';
+      } else if(this.isValidIcon) {
+        this.isValidIcon.style.display = 'none';
+      }
+
+      if(!state.isEmpty && !state.isValid && this.domError && this.isInvalidIcon) {
+        this.isInvalidIcon.style.display = 'block';
+      } else if(this.isInvalidIcon) {
+        this.isInvalidIcon.style.display = 'none';
+      }
+
       // On CHANGE set isEmpty to false
       state.isEmpty = !state.value;