DVR Entry - dropdowns added values, Contact - mobile number, email validations changed, international numbers support added using libraries

angular.json

@@ -25,7 +25,9 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
+              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
+              "node_modules/intl-tel-input/build/css/intlTelInput.css",
+              "src/assets/css/style.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
@@ -43,8 +45,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1.5mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -96,7 +98,9 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
+              "node_modules/intl-tel-input/build/css/intlTelInput.css",
+              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
+              "src/assets/css/style.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",

package-lock.json

@@ -22,8 +22,13 @@
         "datatables.net-buttons": "^2.3.6",
         "datatables.net-buttons-dt": "^2.3.6",
         "datatables.net-dt": "^1.13.4",
+        "google-libphonenumber": "^3.2.33",
+        "intl-tel-input": "^17.0.19",
         "jquery": "^3.6.4",
         "jszip": "^3.10.1",
+        "libphonenumber-js": "^1.12.41",
+        "ngx-bootstrap": "^10.3.0",
+        "ngx-intl-tel-input": "^15.0.0",
         "parse5-html-rewriting-stream": "^7.0.0",
         "rxjs": "~7.5.0",
         "scss": "^0.2.4",
@@ -3045,6 +3050,40 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.13.tgz",
+      "integrity": "sha512-RY2fVI8O0iFUNvZirXaQ1vMvK0xhCcl0gqRj74Z6yEiO1zAUa7hbsdwZM1kzqbxHK7LFyMizipfXT3JME+12Hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.13.tgz",
+      "integrity": "sha512-+BoyIm4I8uJmH/QDIH0fu7MG0AEx9OXEDXnqptXCwKOlOqZiS4iraH1Nr7/ObLMokW3sOCeBNyD68ATcV9b9Ag==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "dev": true,
@@ -5810,6 +5849,295 @@
         "esbuild-windows-arm64": "0.15.13"
       }
     },
+    "node_modules/esbuild-android-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.13.tgz",
+      "integrity": "sha512-yRorukXBlokwTip+Sy4MYskLhJsO0Kn0/Fj43s1krVblfwP+hMD37a4Wmg139GEsMLl+vh8WXp2mq/cTA9J97g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.13.tgz",
+      "integrity": "sha512-TKzyymLD6PiVeyYa4c5wdPw87BeAiTXNtK6amWUcXZxkV51gOk5u5qzmDaYSwiWeecSNHamFsaFjLoi32QR5/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.13.tgz",
+      "integrity": "sha512-WAx7c2DaOS6CrRcoYCgXgkXDliLnFv3pQLV6GeW1YcGEZq2Gnl8s9Pg7ahValZkpOa0iE/ojRVQ87sbUhF1Cbg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-arm64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.13.tgz",
+      "integrity": "sha512-U6jFsPfSSxC3V1CLiQqwvDuj3GGrtQNB3P3nNC3+q99EKf94UGpsG9l4CQ83zBs1NHrk1rtCSYT0+KfK5LsD8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.13.tgz",
+      "integrity": "sha512-whItJgDiOXaDG/idy75qqevIpZjnReZkMGCgQaBWZuKHoElDJC1rh7MpoUgupMcdfOd+PgdEwNQW9DAE6i8wyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.13.tgz",
+      "integrity": "sha512-6pCSWt8mLUbPtygv7cufV0sZLeylaMwS5Fznj6Rsx9G2AJJsAjQ9ifA+0rQEIg7DwJmi9it+WjzNTEAzzdoM3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.13.tgz",
+      "integrity": "sha512-VbZdWOEdrJiYApm2kkxoTOgsoCO1krBZ3quHdYk3g3ivWaMwNIVPIfEE0f0XQQ0u5pJtBsnk2/7OPiCFIPOe/w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.13.tgz",
+      "integrity": "sha512-rXmnArVNio6yANSqDQlIO4WiP+Cv7+9EuAHNnag7rByAqFVuRusLbGi2697A5dFPNXoO//IiogVwi3AdcfPC6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.13.tgz",
+      "integrity": "sha512-Ac6LpfmJO8WhCMQmO253xX2IU2B3wPDbl4IvR0hnqcPrdfCaUa2j/lLMGTjmQ4W5JsJIdHEdW12dG8lFS0MbxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.13.tgz",
+      "integrity": "sha512-alEMGU4Z+d17U7KQQw2IV8tQycO6T+rOrgW8OS22Ua25x6kHxoG6Ngry6Aq6uranC+pNWNMB6aHFPh7aTQdORQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.13.tgz",
+      "integrity": "sha512-47PgmyYEu+yN5rD/MbwS6DxP2FSGPo4Uxg5LwIdxTiyGC2XKwHhHyW7YYEDlSuXLQXEdTO7mYe8zQ74czP7W8A==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.13.tgz",
+      "integrity": "sha512-z6n28h2+PC1Ayle9DjKoBRcx/4cxHoOa2e689e2aDJSaKug3jXcQw7mM+GLg+9ydYoNzj8QxNL8ihOv/OnezhA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-riscv64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.13.tgz",
+      "integrity": "sha512-+Lu4zuuXuQhgLUGyZloWCqTslcCAjMZH1k3Xc9MSEJEpEFdpsSU0sRDXAnk18FKOfEjhu4YMGaykx9xjtpA6ow==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-s390x": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.13.tgz",
+      "integrity": "sha512-BMeXRljruf7J0TMxD5CIXS65y7puiZkAh+s4XFV9qy16SxOuMhxhVIXYLnbdfLrsYGFzx7U9mcdpFWkkvy/Uag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-netbsd-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.13.tgz",
+      "integrity": "sha512-EHj9QZOTel581JPj7UO3xYbltFTYnHy+SIqJVq6yd3KkCrsHRbapiPb0Lx3EOOtybBEE9EyqbmfW1NlSDsSzvQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.13.tgz",
+      "integrity": "sha512-nkuDlIjF/sfUhfx8SKq0+U+Fgx5K9JcPq1mUodnxI0x4kBdCv46rOGWbuJ6eof2n3wdoCLccOoJAbg9ba/bT2w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.13.tgz",
+      "integrity": "sha512-jVeu2GfxZQ++6lRdY43CS0Tm/r4WuQQ0Pdsrxbw+aOrHQPHV0+LNOLnvbN28M7BSUGnJnHkHm2HozGgNGyeIRw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/esbuild-wasm": {
       "version": "0.15.13",
       "dev": true,
@@ -5821,6 +6149,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/esbuild-windows-32": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.13.tgz",
+      "integrity": "sha512-XoF2iBf0wnqo16SDq+aDGi/+QbaLFpkiRarPVssMh9KYbFNCqPLlGAWwDvxEVz+ywX6Si37J2AKm+AXq1kC0JA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/esbuild-windows-64": {
       "version": "0.15.13",
       "cpu": [
@@ -5836,6 +6181,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.15.13",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.13.tgz",
+      "integrity": "sha512-3bv7tqntThQC9SWLRouMDmZnlOukBhOCTlkzNqzGCmrkCJI7io5LLjwJBOVY6kOUlIvdxbooNZwjtBvj+7uuVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "dev": true,
@@ -6186,6 +6548,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "dev": true,
@@ -6340,6 +6717,15 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/google-libphonenumber": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/google-libphonenumber/-/google-libphonenumber-3.2.33.tgz",
+      "integrity": "sha512-1QKCvAlfq8zY1mviORI9lDzM3I/hwm9+h0CwYBTLq59DBbSHMd5zBOLqHZFiBLicRpwIz46Nynvbywj1XApKvA==",
+      "license": "(MIT AND Apache-2.0)",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "dev": true,
@@ -6861,6 +7247,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/intl-tel-input": {
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/intl-tel-input/-/intl-tel-input-17.0.19.tgz",
+      "integrity": "sha512-GBNoUT4JVgm2e1N+yFMaBQ24g5EQfZhDznGneCM9IEZwfKsMUAUa1dS+v0wOiKpRAZ5IPNLJMIEEFGgqlCI22A==",
+      "license": "MIT"
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "dev": true,
@@ -7746,6 +8138,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.41",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.41.tgz",
+      "integrity": "sha512-lsmMmGXBxXIK/VMLEj0kL6MtUs1kBGj1nTCzi6zgQoG1DEwqwt2DQyHxcLykceIxAnfE3hya7NuIh6PpC6S3fA==",
+      "license": "MIT"
+    },
     "node_modules/license-webpack-plugin": {
       "version": "4.0.2",
       "dev": true,
@@ -8362,6 +8760,63 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-10.3.0.tgz",
+      "integrity": "sha512-Ok9umbq4tqJSXMy/5/+2VZJHcwj7hD3a3x2KkF1A+f0e70BARY8rfr9QKjGgvywWNyZMf0Z5PvE1WEeEiMvCkA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^15.0.0",
+        "@angular/common": "^15.0.0",
+        "@angular/core": "^15.0.0",
+        "@angular/forms": "^15.0.0",
+        "rxjs": "^6.5.3 || ^7.6.0"
+      }
+    },
+    "node_modules/ngx-intl-tel-input": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-intl-tel-input/-/ngx-intl-tel-input-15.0.0.tgz",
+      "integrity": "sha512-iSRD/noPeqz8fe1qfMuWFXMPVZXV+qLaw1+GyaB6HawbgWEyZ1YCF+2Z6GZAKgP5fzY0MCZdhHBhqOguKATQ+A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 15.0.0",
+        "@angular/core": ">= 15.0.0",
+        "@angular/forms": ">= 15.0.0",
+        "google-libphonenumber": "^3.2.3",
+        "intl-tel-input": "^17.0.3",
+        "ngx-bootstrap": ">= 10.0.0"
+      }
+    },
+    "node_modules/nice-napi": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
+      "integrity": "sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!win32"
+      ],
+      "dependencies": {
+        "node-addon-api": "^3.0.0",
+        "node-gyp-build": "^4.2.2"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "dev": true,
@@ -8393,6 +8848,19 @@
         "node": "^12.13 || ^14.13 || >=16"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-gyp/node_modules/brace-expansion": {
       "version": "1.1.11",
       "dev": true,

package.json

@@ -24,8 +24,13 @@
     "datatables.net-buttons": "^2.3.6",
     "datatables.net-buttons-dt": "^2.3.6",
     "datatables.net-dt": "^1.13.4",
+    "google-libphonenumber": "^3.2.33",
+    "intl-tel-input": "^17.0.19",
     "jquery": "^3.6.4",
     "jszip": "^3.10.1",
+    "libphonenumber-js": "^1.12.41",
+    "ngx-bootstrap": "^10.3.0",
+    "ngx-intl-tel-input": "^15.0.0",
     "parse5-html-rewriting-stream": "^7.0.0",
     "rxjs": "~7.5.0",
     "scss": "^0.2.4",

src/app/app.module.ts

@@ -18,6 +18,10 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 import {CustomerComponent} from '../app/customer/customer.component';
 import {PasswordComponent} from './password/password.component';
 
+import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -40,6 +44,9 @@ import {PasswordComponent} from './password/password.component';
         ReactiveFormsModule,
         HttpClientModule,
         DataTablesModule,
+        BrowserAnimationsModule,
+        NgxIntlTelInputModule,
+        BsDropdownModule.forRoot(),
     ]
 })
 export class AppModule { }

src/app/contact/contact.component.css

@@ -176,3 +176,42 @@ th{background: #ffe8cb !important;}
 .sort-btn:hover, .filter-btn:hover {
   color: #007bff;
 }
+
+/* 3. Ensure the dropdown itself is strictly layered */
+.iti__country-list {
+    position: absolute !important;
+    z-index: 9999 !important; /* Extremely high to beat any other field */
+    background-color: #fff !important;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+    border: 1px solid #ccc !important;
+    width: 280px !important;
+    max-height: 200px !important;
+}
+
+/* 4. Fix for Bootstrap input height consistency */
+.ngx-intl-tel-input input {
+    height: 38px !important; /* Matches standard Bootstrap form-control */
+    width: 100% !important;
+    display: block !important;
+}
+
+.iti {
+  position: relative;
+  z-index: 1000;
+}
+
+.iti__country-list {
+  z-index: 99999 !important;
+}
+
+.animated-label {
+  z-index: 1;
+}
+
+.form-group {
+  overflow: visible !important;
+}
+
+.iti input {
+  overflow: visible !important;
+}

src/app/contact/contact.component.html

@@ -97,7 +97,7 @@
                                             name="first_name" id="first_name">
                                         <label for="user" class="animated-label">First Name <span style="color: red;"> *</span></label>
                                         <app-field-error-display [displayError]="isFieldValid('first_name')"
-                                            errorMsg="Please enter First Name">
+                                            errorMsg="Please enter valid first name without spaces">
                                         </app-field-error-display>
                                     </div>
 
@@ -115,7 +115,7 @@
                                             name="last_name" id="last_name">
                                         <label for="Last Name" class="animated-label">Last Name<span style="color: red;"> *</span></label>
                                         <app-field-error-display [displayError]="isFieldValid('last_name')"
-                                            errorMsg="Please enter Last Name">
+                                            errorMsg="Please enter valid last name without spaces">
                                         </app-field-error-display>
                                     </div>
 
@@ -133,12 +133,27 @@
                                 <div class="col-lg-3">
 
                                     <div class="form-group" [ngClass]="displayFieldCss('mobile_number')">
-                                        <input type="text" maxlength="10" class="form-control "
-                                            formControlName='mobile_number' name="mobile_number" id=""
-                                            (keypress)="numberOnly($event)">
-                                        <label for="Mobile" class="animated-label">Mobile Number<span style="color: red;"> *</span></label>
-                                        <app-field-error-display [displayError]="isFieldValid('mobile_number')"
-                                            errorMsg="Please enter Mobile number">
+        
+                                        <ngx-intl-tel-input [cssClass]="'form-control'"
+                                            [preferredCountries]="[CountryISO.India, CountryISO.UnitedStates, CountryISO.Singapore, CountryISO.SriLanka]"
+                                            [enableAutoCountrySelect]="true"
+                                            [enablePlaceholder]="true"
+                                            [searchCountryFlag]="true"
+                                            [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
+                                            [selectFirstCountry]="true"
+                                            [maxLength]="15"
+                                            [phoneValidation]="true"
+                                            [separateDialCode]="true"
+                                            [numberFormat]="PhoneNumberFormat.National"
+                                            formControlName="mobile_number"
+                                            name="mobile_number">
+                                        </ngx-intl-tel-input>
+
+                                        <label for="Mobile" class="animated-label" style="top: -20px; font-size: 12px;">Mobile Number<span style="color: red;"> *</span></label>
+                                        
+                                        <app-field-error-display
+                                            [displayError]="isFieldValid('mobile_number')"
+                                            [errorMsg]="getMobileError('mobile_number')">
                                         </app-field-error-display>
                                     </div>
                                     <!-- <div *ngIf="checkmobilleno_flag == true">
@@ -150,11 +165,30 @@
                                 <div class="col-lg-3">
 
                                     <div class="form-group" [ngClass]="displayFieldCss('mob_no')">
-                                        <input type="text" maxlength="10" class="form-control "
-                                            formControlName='mob_no' name="mob_no" id=""
-                                            (keypress)="numberOnly($event)">
-                                        <label for="Mobile" class="animated-label">Alternate Mobile Number</label>
-                                     
+        
+                                        <ngx-intl-tel-input
+                                            [cssClass]="'form-control'" 
+                                            [preferredCountries]="[CountryISO.India, CountryISO.UnitedStates, CountryISO.Singapore, CountryISO.SriLanka]"
+                                            [enableAutoCountrySelect]="true"
+                                            [enablePlaceholder]="true"
+                                            [searchCountryFlag]="true"
+                                            [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
+                                            [selectFirstCountry]="false"
+                                            [selectedCountryISO]="CountryISO.India"
+                                            [maxLength]="15"
+                                            [phoneValidation]="true"
+                                            [separateDialCode]="true"
+                                            [numberFormat]="PhoneNumberFormat.International"
+                                            formControlName="mob_no"
+                                            name="mob_no">
+                                        </ngx-intl-tel-input>
+
+                                        <label for="Mobile" class="animated-label" style="top: -20px; font-size: 12px;">Alternate Mobile Number</label>
+                                        
+                                        <app-field-error-display
+                                            [displayError]="isFieldValid('mob_no')"
+                                            [errorMsg]="getMobileError('mob_no')">
+                                        </app-field-error-display>
                                     </div>
                                     <!-- <div *ngIf="checkmobilleno_flag == true">
                                         Please Enter Mobile Number 
@@ -197,10 +231,10 @@
 
                                     <div class="form-group">
                                         <input type="email" class="form-control " formControlName='email_Id'
-                                            name="email_Id" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$">
+                                            name="email_Id" type="email">
                                         <label for="Id" class="animated-label">Email ID<span style="color: red;"> *</span></label>
                                     <app-field-error-display [displayError]="isFieldValid('email_Id')"
-                                        errorMsg="Please enter Email ID">
+                                        errorMsg="Please enter valid Email ID">
                                     </app-field-error-display>
                                     </div>
 
@@ -287,7 +321,8 @@
             <!-- EDIT / UPDATE BUTTON -->
             <button class="submitbutton" *ngIf="role === 'admin'"
                     type="button" (click)="onEditButtonClick()" 
-                    [style.background-color]="isEditMode ? '#f9b523' : 'grey'">
+                    [disabled]="!isFormValid()"
+                    [style.background-color]="isFormValid() ? '#f9b523' : 'grey'">
                 {{ isEditMode ? 'Save' : 'Save' }}
             </button>
         </div>
@@ -297,7 +332,8 @@
             <input class="submitbutton" 
                    type="submit" 
                    value="Save" 
-                   [style.background-color]="!isEditMode ? '#f9b523' : 'grey'" />
+                   [disabled]="!isFormValid()"
+                   [style.background-color]="isFormValid() ? '#f9b523' : 'grey'" />
         </div>
 
         <div class="col-lg-1 col-sm-12 col-md-2">

src/app/contact/contact.component.ts

@@ -6,7 +6,8 @@ import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { DataTableDirective } from 'angular-datatables';
 import { ViewChild } from '@angular/core'
-
+import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'ngx-intl-tel-input';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 @Component({
   selector: 'dvr-contact',
@@ -23,8 +24,11 @@ export class ContactComponent implements OnInit {
 selectedCustomerFilter: string = ''; // Holds the name selected in the new filter dropdown
 // ... (Your existing properties: dtElement, dtTrigger, contactList, cust_data)
   public contactForm !: FormGroup;
+  
   currentDateData: any = [];
-
+  CountryISO = CountryISO;
+  PhoneNumberFormat = PhoneNumberFormat;
+  SearchCountryField = SearchCountryField;
   loginData: any = [];
   login_name: any;
   last_login_date: any;
@@ -53,8 +57,8 @@ selectedCustomerFilter: string = ''; // Holds the name selected in the new filte
   dtOptions = {};
   dtTrigger: Subject<any> = new Subject();
 
-  designations = ["Executive","AM","Manager","Senior Manager","GM","AGM","PMO","DVP","AVP","VP","SVP","EVP","Head","CTO","CIO","CISO","CFO","President","Director","Managing Director","CEO"];
-  functions = ["Infra","Cloud","Devops","Digital Transformation","Applications","Testing","Vendor Management","Procurement","Finance","Audit","Business Systems","Quality Assurance", "Buiness Solutions Group"];
+  designations = ["Executive","AM","Manager","Senior Manager","GM","AGM","PMO","DVP","AVP","VP","VP 1","VP 2","SVP","SVP 1","SVP 2","EVP","Head","CTO","CIO","CISO","CFO","President","Director","Managing Director","CEO"];
+  functions = ["All", "Infra","Cloud","Devops","Digital Transformation","Applications","Testing","Vendor Management","Procurement","Finance","Audit","Business Systems","Quality Assurance", "Buiness Solutions Group"];
   departments = ["IT","Procurement","Finance","Business"];
 
   sucess_flag: boolean = false;
@@ -397,14 +401,14 @@ $(document).on('click', function () {
     this.role = this.loginData[0]["role"];
 
     this.contactForm = new FormGroup({
-      first_name: new FormControl('', Validators.required),
-      last_name: new FormControl('', Validators.required),
-      mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+      first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+      last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+      mobile_number: new FormControl('', [Validators.required]),
       designation: new FormControl(null, Validators.required),
-      email_Id: new FormControl('', Validators.required),
+      email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
       department: new FormControl('', Validators.required),
       function: new FormControl('', Validators.required),
-      mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
+      mob_no: new FormControl('')
     })
 
     this.loadData();
@@ -445,17 +449,21 @@ $(document).on('click', function () {
 
       console.log("get from url")
       console.log(this.cont_id);
+      const phoneValue = form.value.mobile_number;
+      const formattedPhone = typeof phoneValue === 'object' ? phoneValue.e164Number : phoneValue;
+      const altPhoneValue = form.value.mob_no;
+      const cleanAltMobile = typeof altPhoneValue === 'object' ? altPhoneValue.e164Number : altPhoneValue;
       const contactData = {
         first_name: form.value.first_name,
         last_name: form.value.last_name,
-        mobile_no: form.value.mobile_number,
+        mobile_no: formattedPhone,
         email_id: form.value.email_Id,
         designation: form.value.designation,
         department: form.value.department,
         function: form.value.function,
         contact_for: this.cont_id,
         created_by: this.login_id,
-        mob_no: form.value.mob_no
+        mob_no: cleanAltMobile
 
 
       }
@@ -547,18 +555,26 @@ $(document).on('click', function () {
 
     } else {
       console.log("getting from dropdown");
-
+      const phoneValue = form.value.mobile_number;
+      const formattedPhone = typeof phoneValue === 'object' ? phoneValue.e164Number : phoneValue;
+      let cleanAltMobile = null;
+      if (form.value.mob_no) {
+        const altPhoneValue = form.value.mob_no;
+        cleanAltMobile = typeof altPhoneValue === 'object' ? altPhoneValue.e164Number : altPhoneValue;
+      }      
+      console.log(form.value.mobile_number);
+      console.log(formattedPhone);
       const contactData = {
         first_name: form.value.first_name,
         last_name: form.value.last_name,
-        mobile_no: form.value.mobile_number,
+        mobile_no: formattedPhone,
         email_id: form.value.email_Id,
         designation: form.value.designation,
         department: form.value.department,
         function: form.value.function,
         contact_for: (this.mySelect ? this.mySelect.customer_id : ''),
         created_by: this.login_id,
-        mob_no: form.value.mob_no
+        mob_no: cleanAltMobile
 
       }
       console.log("contactData", contactData);
@@ -593,16 +609,26 @@ $(document).on('click', function () {
                 this.error_msg = response.data[0].message;
                 this.checkfirstnm_flag = true;
                 this.mySelect = "";
+                // this.contactForm = new FormGroup({
+                //   first_name: new FormControl('', Validators.required),
+                //   last_name: new FormControl('', Validators.required),
+                //   mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+                //   designation: new FormControl(null, Validators.required),
+                //   email_Id: new FormControl('', Validators.required),
+                //   department: new FormControl('', Validators.required),
+                //   function: new FormControl('', Validators.required),
+                //   mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
+                // })
                 this.contactForm = new FormGroup({
-                  first_name: new FormControl('', Validators.required),
-                  last_name: new FormControl('', Validators.required),
-                  mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-                  designation: new FormControl(null, Validators.required),
-                  email_Id: new FormControl('', Validators.required),
-                  department: new FormControl('', Validators.required),
-                  function: new FormControl('', Validators.required),
-                  mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
-                })
+                first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+                last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+                mobile_number: new FormControl('', Validators.required),
+                designation: new FormControl(null, Validators.required),
+                email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
+                department: new FormControl('', Validators.required),
+                function: new FormControl('', Validators.required),
+                mob_no: new FormControl('', Validators.pattern(/^[6-9]\d{4}\s?\d{5}$/))
+              })
                 // console.log("response.data.message", response.data[0].exception.errorid);
                 if (response.data[0].exception.errorid != '') {
                   this.openPopup();
@@ -635,16 +661,26 @@ $(document).on('click', function () {
                   this.error_msg = response.data[0].message;
                   this.checkfirstnm_flag = true;
                   this.mySelect = "";
+                  // this.contactForm = new FormGroup({
+                  //   first_name: new FormControl('', Validators.required),
+                  //   last_name: new FormControl('', Validators.required),
+                  //   mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+                  //   designation: new FormControl(null, Validators.required),
+                  //   email_Id: new FormControl('', Validators.required),
+                  //   department: new FormControl('', Validators.required),
+                  //   function: new FormControl('', Validators.required),
+                  //   mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
+                  // })
                   this.contactForm = new FormGroup({
-                    first_name: new FormControl('', Validators.required),
-                    last_name: new FormControl('', Validators.required),
-                    mobile_number: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-                    designation: new FormControl(null, Validators.required),
-                    email_Id: new FormControl('', Validators.required),
-                    department: new FormControl('', Validators.required),
-                    function: new FormControl('', Validators.required),
-                    mob_no: new FormControl('', [Validators.required, Validators.maxLength(10)])
-                  })
+                  first_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+                  last_name: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z]+(['-][a-zA-Z]+)*$/)]),
+                  mobile_number: new FormControl('', Validators.required),
+                  designation: new FormControl(null, Validators.required),
+                  email_Id: new FormControl('', [Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/), Validators.required]),
+                  department: new FormControl('', Validators.required),
+                  function: new FormControl('', Validators.required),
+                  mob_no: new FormControl('', Validators.pattern(/^[6-9]\d{4}\s?\d{5}$/))
+                })
                   // console.log("response.data.message", response.data[0].exception.errorid);
                   if (response.data[0].exception.errorid != '') {
                     this.openPopup();
@@ -679,6 +715,7 @@ onEditButtonClick() {
 updateContact() {
 
   console.log("Updating");
+  console.log(this.contactForm.value);
 
     if (!this.selectedContactId) return;
 
@@ -686,6 +723,8 @@ updateContact() {
     updatedData.contact_id = this.selectedContactId;
     updatedData.customer_id = (this.mySelect ? this.mySelect.customer_id : '');
     updatedData.updated_by = this.login_id;
+    updatedData.mobile_number = updatedData.mobile_number.e164Number;
+    updatedData.mob_no = updatedData.mob_no.e164Number;
     console.log(updatedData);
 
     this.commonservice.updateContact(this.commonservice.projectpath + "/updateContactDetails", updatedData).subscribe(
@@ -712,13 +751,19 @@ updateContact() {
     this.isEditMode = true;
     this.selectedContactId = contact.contact_id;
     console.log(this.selectedContactId);
+    console.log(contact);
+
+      // const phoneValue = contact.mobile_number;
+      // const altPhoneValue = contact.mob_no;
+    const parsedMobile = this.parsePhoneNumberAuto(contact.mobile_number);
+    const parsedAltMobile = this.parsePhoneNumberAuto(contact.mob_no);
 
     this.contactForm.patchValue({
         first_name: contact.first_name,
         last_name: contact.last_name,
         email_Id: contact.email_id,
-        mobile_number: contact.mobile_number,
-        mob_no: contact.mob_no,
+        mobile_number: parsedMobile,
+        mob_no: parsedAltMobile,
         designation: contact.designation,
         department: contact.department,
         function: contact.function_area
@@ -765,6 +810,12 @@ deleteContact(contact_id: any) {
 
   onReset() {
   this.contactForm.reset();
+  const defaultPhone = this.parsePhoneNumberAuto('');
+  console.log(defaultPhone);
+  this.contactForm.patchValue({
+    mobile_number: defaultPhone,
+    mob_no: defaultPhone
+  });
   this.isEditMode = false;
 }
 
@@ -803,6 +854,14 @@ rerender(): void {
     // console.log("in field", field)
     return !this.contactForm.get(field).valid && this.contactForm.get(field).touched;
   }
+  isFormValid(): boolean {
+    // if (!this.contactForm.valid) return false;
+
+    if (this.cont_id || this.mySelect) {
+      return this.contactForm.valid;
+    }
+    return false;
+  }
   displayFieldCss(field: string) {
     return {
       'has-error': this.isFieldValid(field),
@@ -839,14 +898,52 @@ rerender(): void {
   }
 
 
-  numberOnly(event): boolean {
-    const charCode = (event.which) ? event.which : event.keyCode;
-    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+  // numberOnly(event): boolean {
+  //   const charCode = (event.which) ? event.which : event.keyCode;
+  //   if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+  //     return false;
+  //   }
+  //   return true;
+  // }
+
+//   this.contactForm = this.fb.group({
+//   mobile_number: [
+//     '',
+//     [
+//       Validators.required,
+//       Validators.pattern(/^[6-9]\d{9}$/) // Indian mobile numbers
+//     ]
+//   ]
+// });
+
+  numberOnly(event: any): boolean {
+    const charCode = event.which ? event.which : event.keyCode;
+    if (charCode < 48 || charCode > 57) {
+      event.preventDefault();
       return false;
     }
     return true;
   }
 
+  getMobileError(field: string) {
+    const control = this.contactForm.get(field);
+
+    if (control.hasError('required')) {
+      return 'Mobile number is required';
+    }
+
+    if (control.hasError('pattern')) {
+      return 'Enter a valid 10-digit mobile number';
+    }
+
+    // The library sets 'validatePhoneNumber' to false if the number is invalid
+    if (control.hasError('validatePhoneNumber')) {
+      return 'Enter a valid mobile number for the selected country';
+    }
+
+    return '';
+  }
+
   // Inside your component class
 
 // ✅ NEW FUNCTION FOR CLIENT-SIDE FILTERING
@@ -922,5 +1019,32 @@ modo(value: any) {
     localStorage.setItem('contactlastinsert', first_name + ' ' + last_name);
     //this.router.navigate(['/dvrentry']);
   }
+
+  parsePhoneNumberAuto(phone: string) {
+    if (!phone) return null;
+
+    // 👉 Default fallback country (India)
+    let parsed = parsePhoneNumberFromString(phone, 'IN');
+
+    if (!parsed) {
+      return {
+        number: phone,
+        internationalNumber: '',
+        nationalNumber: phone,
+        e164Number: phone,
+        countryCode: 'IN',
+        dialCode: '+91'
+      };
+    }
+
+    return {
+      number: parsed.nationalNumber,
+      internationalNumber: parsed.formatInternational(),
+      nationalNumber: parsed.nationalNumber,
+      e164Number: parsed.number, // always E.164
+      countryCode: parsed.country, // 🔥 auto-detected
+      dialCode: '+' + parsed.countryCallingCode
+    };
+  }
 }
 

src/app/createentry/dvrentry.component.html

@@ -266,7 +266,8 @@
 
                     <div class="col-lg-4" style="margin-top:38px;">
                       <div class="form-group">
-                        <label style="font-size: 16px; margin-top: 5px; margin-bottom: 5px;"> Next Action On:</label><span style="color: red;"> *</span>
+                        <label style="font-size: 16px; margin-top: 5px; margin-bottom: 5px;"> Next Action On:</label>
+                        <!-- <span style="color: red;"> *</span> -->
                         <select id="function" class="form-control" formControlName="postion" (change)="funcPersonDetails(contactEntryForm)"
                           style="margin: 6px;margin-top: 0px;">
                           <option value="" disabled selected>Choose Function</option>
@@ -283,12 +284,12 @@
                             {{ person.person_name }}
                           </option>
                         </select>
-                        <app-field-error-display [displayError]="isFieldValid('postion')"
+                        <!-- <app-field-error-display [displayError]="isFieldValid('postion')"
                           errorMsg="Please select Function">
                         </app-field-error-display>
                         <app-field-error-display [displayError]="isFieldValid('personData')"
                           errorMsg="Please select Position">
-                        </app-field-error-display>
+                        </app-field-error-display> -->
 
                       </div>
                     </div>

src/app/environments/environment.ts

@@ -1,7 +1,7 @@
 export const environment = {
- projectpath: "http://localhost:9000/api"
+//  projectpath: "http://localhost:9000/api"
  //projectpath:"http://54.225.129.95:31165",
 //projectpath:"http://52.221.194.168:8000"
-// projectpath:"https://dvr.mindcraft.in/api"
+    projectpath:"https://dvr.mindcraft.in/api"
 
 }

src/assets/css/style.css

@@ -8656,7 +8656,7 @@ font-size:15px;
 
 .form-group .form-control {
   position: relative;
-  z-index: 1;
+  /* z-index: 1; */
   border-radius: 0;
   border-width: 0 0 1px;
   border-bottom-color: rgba(0, 0, 0, 0.25);

src/styles.css

@@ -8642,7 +8642,7 @@ font-size:15px;
 
 .form-group .form-control {
   position: relative;
-  z-index: 1;
+  /* z-index: 1; */
   border-radius: 0;
   border-width: 0 0 1px;
   border-bottom-color: rgba(0, 0, 0, 0.25);