update template&mapping create view. 30/107330/2
authorAhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Thu, 7 May 2020 14:10:33 +0000 (16:10 +0200)
committerAhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Thu, 7 May 2020 15:54:30 +0000 (17:54 +0200)
add alert messages for success and error

Issue-ID: CCSDK-2323

Signed-off-by: AhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: Id05c73abad2342685971e2e57409b4a471f9242f

cds-ui/designer-client/package-lock.json
cds-ui/designer-client/package.json
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
cds-ui/designer-client/src/styles.css

index 89d9c06..c46ca55 100644 (file)
@@ -8,6 +8,7 @@
       "version": "0.803.25",
       "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.803.25.tgz",
       "integrity": "sha512-usV/zEncKCKQuF6AD3pRU6N5i5fbaAux/qZb+nbOz9/2G5jrXwe5sH+y3vxbgqB83e3LqusEQCTu7/tfg6LwZg==",
+      "dev": true,
       "requires": {
         "@angular-devkit/core": "8.3.25",
         "rxjs": "6.4.0"
       "version": "8.3.25",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.25.tgz",
       "integrity": "sha512-l7Gqy1tMrTpRmPVlovcFX8UA3mtXRlgO8kcSsbJ9MKRKNTCcxlfsWEYY5igyDBUVh6ADkgSIu0nuk31ZGTe0lw==",
+      "dev": true,
       "requires": {
         "ajv": "6.10.2",
         "fast-json-stable-stringify": "2.0.0",
       "version": "8.3.25",
       "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-8.3.25.tgz",
       "integrity": "sha512-/p1MkfursfLy+JRGXlJGPEmX55lrFCsR/2khWAVXZcMaFR3QlR/b6/zvB8I2pHFfr0/XWnYTT/BsF7rJjO3RmA==",
+      "dev": true,
       "requires": {
         "@angular-devkit/core": "8.3.25",
         "rxjs": "6.4.0"
       "version": "8.3.25",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-8.3.25.tgz",
       "integrity": "sha512-CPJI5nnbBvvyBUFwOHfRXy/KVwsiYlcbDAeIk1klcjQjbVFYZbnY0iAhNupy9j7rPQhb7jle5oslU3TLfbqOTQ==",
+      "dev": true,
       "requires": {
         "@angular-devkit/architect": "0.803.25",
         "@angular-devkit/core": "8.3.25",
       "version": "8.3.25",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-8.3.25.tgz",
       "integrity": "sha512-/vEPtE+fvgsWPml/MVqzmlGPBujadPPNwaTuuj5Uz1aVcKeEYzLkbN8YQOpml4vxZHCF8RDwNdGiU4SZg63Jfg==",
+      "dev": true,
       "requires": {
         "@angular-devkit/core": "8.3.25",
         "@angular-devkit/schematics": "8.3.25"
       "version": "0.803.25",
       "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.803.25.tgz",
       "integrity": "sha512-VIlqhJsCStA3aO4llxZ7lAOvQUqppyZdrEO7f/ApIJmuofPQTkO5Hx21tnv0dyExwoqPCSIHzEu4Tmc0/TWM1A==",
+      "dev": true,
       "requires": {
         "@angular-devkit/core": "8.3.25",
         "@angular-devkit/schematics": "8.3.25",
         "@types/underscore": "*"
       }
     },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
     "@types/datatables.net": {
       "version": "1.10.18",
       "resolved": "https://registry.npmjs.org/@types/datatables.net/-/datatables.net-1.10.18.tgz",
       }
     },
     "angular-datatables": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/angular-datatables/-/angular-datatables-8.1.0.tgz",
-      "integrity": "sha512-UJmF8qLdxIALyabwslvMvJ8zjkJWIfn/IfzEKO1vv6z+DhwfHlTS7oFOF40x0ZbSGfq0E1Yyscl7MOl71AulHw==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/angular-datatables/-/angular-datatables-9.0.1.tgz",
+      "integrity": "sha512-F3mieJK0qkxGaX+uoKD2kVLDGM8HR2ZmLboN5vWAu4yKAOYI7x3NFfC+patBt39RZyEC2ajzKitOMyYKm6KUgA==",
       "requires": {
-        "@angular/cli": "^8.0.2"
+        "@angular/cli": "^9.0.6"
+      },
+      "dependencies": {
+        "@angular-devkit/architect": {
+          "version": "0.901.4",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.4.tgz",
+          "integrity": "sha512-w4RMj7eLhUSh70HUy5tW4EXjLQFXk0Lfr9WiSy5gvPGp+zzYxknI+Wn4Xid1wU/WS+4tuMv5nJIaNaH2sABESQ==",
+          "requires": {
+            "@angular-devkit/core": "9.1.4",
+            "rxjs": "6.5.4"
+          }
+        },
+        "@angular-devkit/core": {
+          "version": "9.1.4",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.4.tgz",
+          "integrity": "sha512-OPFQDmT4XabLMSRDgmnzedlOrc83DzQIgLcfoh/UhZ7aJKf/2Vq4l09p/DkMNI36vN5BRL0zDZt7TjvKNgyYgA==",
+          "requires": {
+            "ajv": "6.12.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.5.4",
+            "source-map": "0.7.3"
+          }
+        },
+        "@angular-devkit/schematics": {
+          "version": "9.1.4",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.4.tgz",
+          "integrity": "sha512-RAbdnUEZ3JTLmWSBiXT5trsVx8Fi72fxN9CiRaluM09Cytg6BUc1wC5XCO0YPvhI400+3Ro1nwjPXezjg7LXzQ==",
+          "requires": {
+            "@angular-devkit/core": "9.1.4",
+            "ora": "4.0.3",
+            "rxjs": "6.5.4"
+          }
+        },
+        "@angular/cli": {
+          "version": "9.1.4",
+          "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.4.tgz",
+          "integrity": "sha512-H9MqoT4zyIv+Yo3cvRVkzafWGHsqt7jUvtvGwMHIDMTfEX+Q8yiYlDLL6WM3Eb6/hDmLcRGC/GI495sKS1z5qA==",
+          "requires": {
+            "@angular-devkit/architect": "0.901.4",
+            "@angular-devkit/core": "9.1.4",
+            "@angular-devkit/schematics": "9.1.4",
+            "@schematics/angular": "9.1.4",
+            "@schematics/update": "0.901.4",
+            "@yarnpkg/lockfile": "1.1.0",
+            "ansi-colors": "4.1.1",
+            "debug": "4.1.1",
+            "ini": "1.3.5",
+            "inquirer": "7.1.0",
+            "npm-package-arg": "8.0.1",
+            "npm-pick-manifest": "6.0.0",
+            "open": "7.0.3",
+            "pacote": "9.5.12",
+            "read-package-tree": "5.3.1",
+            "rimraf": "3.0.2",
+            "semver": "7.1.3",
+            "symbol-observable": "1.2.0",
+            "universal-analytics": "0.4.20",
+            "uuid": "7.0.2"
+          }
+        },
+        "@schematics/angular": {
+          "version": "9.1.4",
+          "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.4.tgz",
+          "integrity": "sha512-7nbiYBRgXc+f0sa5iXTcF6/VMy/Xq0wyKKnDFiLCb2aFYR7EXRHWF2GuwDIg2bvFugLuCBDoNnXeddLE1TXGWg==",
+          "requires": {
+            "@angular-devkit/core": "9.1.4",
+            "@angular-devkit/schematics": "9.1.4"
+          }
+        },
+        "@schematics/update": {
+          "version": "0.901.4",
+          "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.4.tgz",
+          "integrity": "sha512-jCtZY2Fbj502gKN5gdu1brnRy/ssyzTrWm69Ty73V+t8uL7nLr+/hny/VBJ8CiQnKQvxcgVl1xgvI1cXzpysVA==",
+          "requires": {
+            "@angular-devkit/core": "9.1.4",
+            "@angular-devkit/schematics": "9.1.4",
+            "@yarnpkg/lockfile": "1.1.0",
+            "ini": "1.3.5",
+            "npm-package-arg": "^8.0.0",
+            "pacote": "9.5.12",
+            "rxjs": "6.5.4",
+            "semver": "7.1.3",
+            "semver-intersect": "1.4.0"
+          }
+        },
+        "ajv": {
+          "version": "6.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
+          "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
+        },
+        "fast-json-stable-stringify": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+          "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "hosted-git-info": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.4.tgz",
+          "integrity": "sha512-4oT62d2jwSDBbLLFLZE+1vPuQ1h8p9wjrJ8Mqx5TjsyWmBMV5B13eJqn8pvluqubLf3cJPTfiYCIwNwDNmzScQ==",
+          "requires": {
+            "lru-cache": "^5.1.1"
+          }
+        },
+        "inquirer": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
+          "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
+          "requires": {
+            "ansi-escapes": "^4.2.1",
+            "chalk": "^3.0.0",
+            "cli-cursor": "^3.1.0",
+            "cli-width": "^2.0.0",
+            "external-editor": "^3.0.3",
+            "figures": "^3.0.0",
+            "lodash": "^4.17.15",
+            "mute-stream": "0.0.8",
+            "run-async": "^2.4.0",
+            "rxjs": "^6.5.3",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0",
+            "through": "^2.3.6"
+          }
+        },
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        },
+        "magic-string": {
+          "version": "0.25.7",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+          "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+          "requires": {
+            "sourcemap-codec": "^1.4.4"
+          }
+        },
+        "npm-package-arg": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.0.1.tgz",
+          "integrity": "sha512-/h5Fm6a/exByzFSTm7jAyHbgOqErl9qSNJDQF32Si/ZzgwT2TERVxRxn3Jurw1wflgyVVAxnFR4fRHPM7y1ClQ==",
+          "requires": {
+            "hosted-git-info": "^3.0.2",
+            "semver": "^7.0.0",
+            "validate-npm-package-name": "^3.0.0"
+          }
+        },
+        "npm-pick-manifest": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-6.0.0.tgz",
+          "integrity": "sha512-PdJpXMvjqt4nftNEDpCgjBUF8yI3Q3MyuAmVB9nemnnCg32F4BPL/JFBfdj8DubgHCYUFQhtLWmBPvdsFtjWMg==",
+          "requires": {
+            "npm-install-checks": "^4.0.0",
+            "npm-package-arg": "^8.0.0",
+            "semver": "^7.0.0"
+          }
+        },
+        "open": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/open/-/open-7.0.3.tgz",
+          "integrity": "sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==",
+          "requires": {
+            "is-docker": "^2.0.0",
+            "is-wsl": "^2.1.1"
+          }
+        },
+        "pacote": {
+          "version": "9.5.12",
+          "resolved": "https://registry.npmjs.org/pacote/-/pacote-9.5.12.tgz",
+          "integrity": "sha512-BUIj/4kKbwWg4RtnBncXPJd15piFSVNpTzY0rysSr3VnMowTYgkGKcaHrbReepAkjTr8lH2CVWRi58Spg2CicQ==",
+          "requires": {
+            "bluebird": "^3.5.3",
+            "cacache": "^12.0.2",
+            "chownr": "^1.1.2",
+            "figgy-pudding": "^3.5.1",
+            "get-stream": "^4.1.0",
+            "glob": "^7.1.3",
+            "infer-owner": "^1.0.4",
+            "lru-cache": "^5.1.1",
+            "make-fetch-happen": "^5.0.0",
+            "minimatch": "^3.0.4",
+            "minipass": "^2.3.5",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "normalize-package-data": "^2.4.0",
+            "npm-normalize-package-bin": "^1.0.0",
+            "npm-package-arg": "^6.1.0",
+            "npm-packlist": "^1.1.12",
+            "npm-pick-manifest": "^3.0.0",
+            "npm-registry-fetch": "^4.0.0",
+            "osenv": "^0.1.5",
+            "promise-inflight": "^1.0.1",
+            "promise-retry": "^1.1.1",
+            "protoduck": "^5.0.1",
+            "rimraf": "^2.6.2",
+            "safe-buffer": "^5.1.2",
+            "semver": "^5.6.0",
+            "ssri": "^6.0.1",
+            "tar": "^4.4.10",
+            "unique-filename": "^1.1.1",
+            "which": "^1.3.1"
+          },
+          "dependencies": {
+            "hosted-git-info": {
+              "version": "2.8.8",
+              "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+              "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+            },
+            "npm-package-arg": {
+              "version": "6.1.1",
+              "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
+              "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+              "requires": {
+                "hosted-git-info": "^2.7.1",
+                "osenv": "^0.1.5",
+                "semver": "^5.6.0",
+                "validate-npm-package-name": "^3.0.0"
+              }
+            },
+            "npm-pick-manifest": {
+              "version": "3.0.2",
+              "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
+              "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
+              "requires": {
+                "figgy-pudding": "^3.5.1",
+                "npm-package-arg": "^6.0.0",
+                "semver": "^5.4.1"
+              }
+            },
+            "rimraf": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+              "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+              "requires": {
+                "glob": "^7.1.3"
+              }
+            },
+            "semver": {
+              "version": "5.7.1",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+            }
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "rxjs": {
+          "version": "6.5.4",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+          "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "semver": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
+          "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "uuid": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
+          "integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
+        }
       }
     },
     "angular-font-awesome": {
         "restore-cursor": "^3.1.0"
       }
     },
+    "cli-spinners": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.3.0.tgz",
+      "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w=="
+    },
     "cli-width": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
         "strip-bom": "^3.0.0"
       }
     },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "requires": {
+        "clone": "^1.0.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+        }
+      }
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.1.tgz",
       "integrity": "sha512-uxNHBeQhRXIoHWTSNYUFhQVrHYFThIt6IVo2fFmSe8aBwdR3/w6b58hJpiL/fMukFkvGzjg+hSxFtwvVmKZmXw==",
+      "dev": true,
       "requires": {
         "ansi-escapes": "^4.2.1",
         "chalk": "^2.4.2",
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
+    "is-docker": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz",
+      "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ=="
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
         "is-extglob": "^2.1.1"
       }
     },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w=="
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "dev": true
     },
     "isarray": {
       "version": "1.0.0",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "log-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "requires": {
+        "chalk": "^2.4.2"
+      }
+    },
     "log4js": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-4.5.1.tgz",
       "version": "0.25.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
       "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
         "npm-normalize-package-bin": "^1.0.1"
       }
     },
+    "npm-install-checks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-4.0.0.tgz",
+      "integrity": "sha512-09OmyDkNLYwqKPOnbI8exiOZU2GVVmQp7tgez2BPi5OZC8M82elDAps7sxC4l//uSUtotWqoEIDwjRvWH4qz8w==",
+      "requires": {
+        "semver": "^7.1.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
+        }
+      }
+    },
     "npm-normalize-package-bin": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz",
       "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==",
+      "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1",
         "npm-package-arg": "^6.0.0",
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
         }
       }
     },
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
       "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "dev": true,
       "requires": {
         "is-wsl": "^1.1.0"
       }
         }
       }
     },
+    "ora": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-4.0.3.tgz",
+      "integrity": "sha512-fnDebVFyz309A73cqCipVL1fBZewq4vwgSHfxh43vVy31mbyoQ8sCH3Oeaog/owYOs/lLlGVPCISQonTneg6Pg==",
+      "requires": {
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.2.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^3.0.0",
+        "mute-stream": "0.0.8",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
       "version": "9.5.5",
       "resolved": "https://registry.npmjs.org/pacote/-/pacote-9.5.5.tgz",
       "integrity": "sha512-jAEP+Nqj4kyMWyNpfTU/Whx1jA7jEc5cCOlurm0/0oL+v8TAp1QSsK83N7bYe+2bEdFzMAtPG5TBebjzzGV0cA==",
+      "dev": true,
       "requires": {
         "bluebird": "^3.5.3",
         "cacache": "^12.0.2",
           "version": "2.2.3",
           "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-2.2.3.tgz",
           "integrity": "sha512-+IluBC5K201+gRU85vFlUwX3PFShZAbAgDNp2ewJdWMVSppdo/Zih0ul2Ecky/X7b51J7LrrUAP+XOmOCvYZqA==",
+          "dev": true,
           "requires": {
             "figgy-pudding": "^3.5.1",
             "npm-package-arg": "^6.0.0",
           "version": "2.7.1",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
           "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
           "requires": {
             "glob": "^7.1.3"
           }
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
         }
       }
     },
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
       "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==",
+      "dev": true,
       "requires": {
         "glob": "^7.1.3"
       }
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true
     },
     "semver-dsl": {
       "version": "1.0.1",
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
       "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
       "requires": {
         "ansi-regex": "^4.1.0"
       },
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
         }
       }
     },
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
     "webdriver-js-extender": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",
index 1e51281..a8427ee 100644 (file)
@@ -24,7 +24,7 @@
     "@angular/router": "~8.2.9",
     "@ng-bootstrap/ng-bootstrap": "^5.1.1",
     "angular-animations": "0.0.10",
-    "angular-datatables": "^8.0.0",
+    "angular-datatables": "^9.0.1",
     "angular-font-awesome": "^3.1.2",
     "angular-material-expansion-panel": "^0.7.2",
     "backbone": "^1.4.0",
index 159f7ae..1ecf298 100644 (file)
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     type="button">Cancel
                 </button>
-                <button (click)="setFilesToStore()" [disabled]="uploadedFiles?.length<=0" class="btn btn-sm btn-primary"
-                    data-dismiss="modal" type="button">
+                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
                     Import
                 </button>
             </div>
index e6149c8..4f9b270 100644 (file)
@@ -6,7 +6,8 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [(ngModel)]="fileName" placeholder="Template name">
+            <input type="input" [(ngModel)]="fileName" placeholder="Template name" name="templateName" autofocus
+                [autofocus]="true">
         </div>
     </div>
 </div>
                 <div class="card-body">
                     <p class="text-center"><b>Select a source to load config parameters</b></p>
                     <div class="text-center">
-                        <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load">
+                        <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)"
+                            (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0
+                            ?'hover-enable':'hover-disable'">
                             <i class="icon-use-attributes"></i>
                             <br />
                             <span>Use Current Template Instance</span>
-                        </a>
+                        </button>
                         <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal"
                             class="mapping-source-load">
                             <i class="icon-upload-attributes"></i>
 
         </div>
         <div class="template-mapping-action">
-            <button (click)="cancel()" class="btn btn-outline-secondary">Cancel</button>
-            <button (click)="saveToStore()" class="btn btn-primary">Submit</button>
+            <button (click)="cancel()" [disabled]="fileName?.length <=0"
+                class="btn btn-outline-secondary">Cancel</button>
+            <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Submit</button>
         </div>
     </div>
 </div>
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     (click)="resetTheUploadedFiles()">Cancel
                 </button>
-                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
-                    (click)="uploadFile();openListView()">
+
+                <button (click)="uploadFile();openListView()" class="btn btn-sm btn-primary" data-dismiss="modal"
+                    type="button">
                     Import
                 </button>
             </div>
index 7d4705d..4601880 100644 (file)
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { PackageCreationStore } from '../../package-creation.store';
 import { TemplateInfo, TemplateStore } from '../../template.store';
@@ -17,14 +17,14 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class TemplMappCreationComponent implements OnInit, OnDestroy {
     @Output() showListViewParent = new EventEmitter<any>();
-
+    @Output() openList = new EventEmitter<any>();
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
     private jsonConvert = new JsonConvert();
     public files: NgxFileDropEntry[] = [];
     fileName: any;
     templateInfo = new TemplateInfo();
-    private variables: string[] = [];
+    variables: string[] = [];
     dtOptions: DataTables.Settings = {};
     // We use this trigger because fetching the list of persons can be quite long,
     // thus we ensure the data is fetched before rendering
@@ -44,8 +44,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     currentTemplate: any;
     currentMapping: any;
 
-
-
     constructor(
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
@@ -56,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.templateStore.state$.subscribe(templateInfo => {
+            // init Template&mapping vars
             console.log('----------');
             console.log(templateInfo);
             this.templateInfo = templateInfo;
@@ -63,21 +62,29 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             if (this.fileName) {
                 this.fileName = this.fileName.split('-')[0];
             }
-            if (templateInfo.type === 'mapping') {
+            if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) {
                 this.mappingRes = templateInfo.mapping;
-                this.currentMapping = templateInfo;
+                this.currentMapping = Object.assign({}, templateInfo);
                 this.resourceDictionaryRes = [];
                 this.resTableDtTrigger.next();
             } else {
+                this.mappingRes = [];
+                this.currentMapping = Any;
+            }
+            this.templateFileContent = templateInfo.fileContent;
+            this.currentTemplate = Object.assign({}, templateInfo);
 
-                this.templateFileContent = templateInfo.fileContent;
-                this.currentTemplate = templateInfo;
+            if (templateInfo.type === 'template' || templateInfo.type.includes('template')) {
+                this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl';
+            } else {
+                this.currentTemplate = Any;
             }
+
         });
 
         this.dtOptions = {
             pagingType: 'full_numbers',
-            pageLength: 10,
+            pageLength: 25,
             destroy: true,
             retrieve: true,
         };
@@ -211,7 +218,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.showListViewParent.emit('tell parent to open create views');
     }
 
+    closeCreationForm() {
+        this.openList.emit('close create form and open list');
+    }
+
     getMappingTableFromTemplate(e) {
+        console.log('-' + this.templateFileContent + '-');
         this.resourceDictionaryRes = [];
         if (e) {
             e.preventDefault();
@@ -219,10 +231,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         if (this.variables && this.variables.length > 0) {
             console.log('base');
             this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+                let message = 'Attributes are Fetched';
                 this.mappingRes = [];
                 this.resourceDictionaryRes = res;
                 console.log(this.resourceDictionaryRes);
                 this.rerender();
+                if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) {
+                    message = 'No values for those attributes';
+                }
+                this.toastr.success(message, 'Success');
+            }, err => {
+                this.toastr.error('Error');
             });
         }
     }
@@ -261,6 +280,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 }
                 this.fileName = '';
                 this.toastr.success('File is created', 'success');
+                this.closeCreationForm();
             } else {
                 console.log('this file already exist');
                 this.toastr.error('File name already exist', 'Error');
index a47963a..8c92f0d 100644 (file)
@@ -1,9 +1,9 @@
-<a *ngIf="isCreate" (click)="openCreationView()" class="create-template-mapping-button">
+<a (click)="openCreationView()" class="create-template-mapping-button">
     <i class="fa fa-plus"></i> <span>Create</span>
 </a>
 
 
-<div class="template-mapping-accordion">
+<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0">
     <div class="accordion" id="listAccordion">
         <div class="card">
             <div class="card-header" id="headingThree">
@@ -21,7 +21,8 @@
                     <div class="row">
                         <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">-->
                         <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
-                            <a (click)="setSourceCodeEditor(file)" class="template-mapping-list" [ngClass]="{'active':currentFile == file}">{{file}}
+                            <a (click)="setSourceCodeEditor(file)" class="template-mapping-list"
+                                [ngClass]="{'active':currentFile == file}">{{file}}
                                 <span *ngIf="getValue(file).isMapping">Mapping</span>
                                 <span *ngIf="getValue(file).isTemplate">Template</span>
                             </a>
index 4488990..ed9f3ee 100644 (file)
@@ -13,6 +13,7 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class TemplMappListingComponent implements OnInit {
     @Output() showCreationViewParentNotification = new EventEmitter<any>();
+    @Output() showFullView = new EventEmitter<any>();
     private templateAndMappingMap = new Map<string, TemplateAndMapping>();
     private templates: Template;
     private mapping: Mapping;
@@ -71,6 +72,9 @@ export class TemplMappListingComponent implements OnInit {
     openCreationView() {
         this.showCreationViewParentNotification.emit('tell parent to open create views');
     }
+    FullView() {
+        this.showFullView.emit('show full view');
+    }
 
     setSourceCodeEditor(key: string) {
         this.currentFile = key;
@@ -80,23 +84,23 @@ export class TemplMappListingComponent implements OnInit {
             console.log(cba);
             console.log(key);
             console.log(this.templateAndMappingMap);
+            const templateInfo = new TemplateInfo();
             if (cba.templates && cba.templates.files.has(templateKey)) {
                 const fileContent = cba.templates.getValue(templateKey.trim());
                 console.log(fileContent);
-                const templateInfo = new TemplateInfo();
                 templateInfo.fileContent = fileContent;
                 templateInfo.fileName = templateKey;
-                this.templateStore.changeTemplateInfo(templateInfo);
+                templateInfo.type = 'template';
             }
             const mappingKey = 'Templates/' + key + '-mapping.json';
             if (cba.mapping && cba.mapping.files.has(mappingKey)) {
                 const obj = JSON.parse(cba.mapping.getValue(mappingKey));
-                const templateInfo = new TemplateInfo();
                 templateInfo.mapping = obj;
                 templateInfo.fileName = mappingKey;
-                templateInfo.type = 'mapping';
-                this.templateStore.changeTemplateInfo(templateInfo);
+                templateInfo.type += 'mapping';
             }
+            this.templateStore.changeTemplateInfo(templateInfo);
+            this.FullView();
         });
     }
 
index f8cfe7a..8fd97d7 100644 (file)
@@ -1,9 +1,9 @@
 <div *ngIf="!listView">
-    <app-templ-mapp-listing
-            (showCreationViewParentNotification)="openCreationView($event)">
+    <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)" (showFullView)="openListView($event)">
     </app-templ-mapp-listing>
 </div>
 
 <div *ngIf="!creationView">
-    <app-templ-mapp-creation (showListViewParent)="openListView($event)"></app-templ-mapp-creation>
-</div>
+    <app-templ-mapp-creation (showListViewParent)="openListView($event)" (openList)="closeCreationView()">
+    </app-templ-mapp-creation>
+</div>
\ No newline at end of file
index 1067658..d2e25ef 100644 (file)
@@ -8,8 +8,8 @@ import { PackageCreationStore } from '../package-creation.store';
     styleUrls: ['./template-mapping.component.css']
 })
 export class TemplateMappingComponent implements OnInit {
-    creationView = true;
-    listView = false;
+    creationView = false;
+    listView = true;
 
     constructor(private route: ActivatedRoute, private pakcageStore: PackageCreationStore) {
     }
@@ -17,7 +17,7 @@ export class TemplateMappingComponent implements OnInit {
     ngOnInit() {
         if (this.route.snapshot.paramMap.has('id')) {
             console.log('Edit mode');
-            this.creationView = false;
+            this.creationView = true;
             this.listView = false;
         } else {
             console.log('Create mode');
@@ -34,4 +34,9 @@ export class TemplateMappingComponent implements OnInit {
         this.creationView = false;
     }
 
+    closeCreationView() {
+        this.creationView = true;
+        this.listView = false;
+    }
+
 }
index 3c0a049..adbedd8 100644 (file)
@@ -1,7 +1,9 @@
-html, body{
+html,
+body {
   height: 100%;
 }
-body{
+
+body {
   background: #FAFAFA !important;
   /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
   background-size: 6px 6px; */
@@ -11,67 +13,83 @@ body{
   color: #1B3E6F !important;
   font-size: 14px;
 }
-*:focus{
+
+*:focus {
   outline: none;
 }
-:hover{
+
+:hover {
   transition: 0.3s !important;
 }
+
 /*Bootstrap*/
-.custom-control-label::before{
+.custom-control-label::before {
   border: solid 1px #C3CDDB !important;
   border-radius: 0 !important;
 }
-.custom-control-input:checked ~ .custom-control-label::before{
+
+.custom-control-input:checked~.custom-control-label::before {
   background: #1B3E6F !important;
 }
-.custom-radio .custom-control-label::before{
+
+.custom-radio .custom-control-label::before {
   border-radius: 50% !important;
 }
-.custom-control-label{
+
+.custom-control-label {
   font-size: 13px;
   line-height: 24px;
 }
-.form-check-input + span{
+
+.form-check-input+span {
   display: inline-flex !important;
 }
-.form-check-input + span i{
+
+.form-check-input+span i {
   margin-right: 9px !important;
 }
-.form-control:focus{
+
+.form-control:focus {
   background-color: #F4F9FE !important;
 }
-.label-input input[type="radio"]{
+
+.label-input input[type="radio"] {
   width: 14px !important;
   height: 14px;
 }
+
 /*ICONS*/
-.icon-menuDots{
+.icon-menuDots {
   font-size: 3px !important;
   color: #1B3E6F;
   vertical-align: middle;
 }
+
 /*Components*/
 /* Menu Styles */
-.primary-nav{
+.primary-nav {
   /* left: 0; */
   position: fixed;
   z-index: 999;
 }
-.menu{
+
+.menu {
   position: relative;
 }
-.menu ul{
+
+.menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.open-panel{
+
+.open-panel {
   border: none;
-  background-color:#fff;
+  background-color: #fff;
   padding: 0;
 }
-.logo-icon{
+
+.logo-icon {
   background: #fff;
   position: relative;
   display: block;
@@ -84,10 +102,12 @@ body{
   z-index: 1000;
   cursor: pointer;
 }
-.primary-nav .menu li{
+
+.primary-nav .menu li {
   position: relative;
 }
-.menu .icon{
+
+.menu .icon {
   position: absolute;
   top: 12px;
   right: 10px;
@@ -97,17 +117,20 @@ body{
   color: #fff;
   text-align: center;
 }
-.menu .icon .fa{
+
+.menu .icon .fa {
   vertical-align: middle;
 }
+
 .menu,
 .menu a,
-.menu a:visited{
+.menu a:visited {
   color: #fff;
-  text-decoration: none!important;
+  text-decoration: none !important;
   position: relative;
 }
-.menu a{
+
+.menu a {
   display: block;
   white-space: nowrap;
   padding: 10px 1em;
@@ -116,66 +139,81 @@ body{
   height: 52px;
   line-height: 30px;
 }
-.menu a:hover{
+
+.menu a:hover {
   color: #fff;
 }
-.menu-dropdown li .icon{
+
+.menu-dropdown li .icon {
   text-align: center;
   font-size: 16px;
   color: #fff;
   line-height: 33px;
 }
-.menu-dropdown a{
+
+.menu-dropdown a {
   cursor: pointer;
 }
-.menu-dropdown li.active .icon{
+
+.menu-dropdown li.active .icon {
   color: #fff;
   background: #265699;
   border-radius: 50%;
 }
-.menu-dropdown li:hover{
+
+.menu-dropdown li:hover {
   background: #172B4D;
 }
-.menu label{
+
+.menu label {
   margin-bottom: 0;
   display: block;
 }
-.menu label:hover{
+
+.menu label:hover {
   cursor: pointer;
 }
-.menu input[type="checkbox"]{
+
+.menu input[type="checkbox"] {
   display: none;
 }
-input#menu[type="checkbox"]{
+
+input#menu[type="checkbox"] {
   display: none;
 }
-.sub-menu-dropdown{
+
+.sub-menu-dropdown {
   display: none;
 }
-.new-wrapper{
+
+.new-wrapper {
   position: absolute;
   left: 50px;
   width: calc(100% - 50px);
   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-#menu:checked + ul.menu-dropdown{
+
+#menu:checked+ul.menu-dropdown {
   left: 0;
   -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
   animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-.sub-menu-checkbox:checked + ul.sub-menu-dropdown{
-  display: block!important;
+
+.sub-menu-checkbox:checked+ul.sub-menu-dropdown {
+  display: block !important;
   -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
   animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
   border-top: solid 2px #1B3E6F;
 }
-.openNav .new-wrapper{
+
+.openNav .new-wrapper {
   position: absolute;
   transform: translate3d(200px, 0, 0);
   width: calc(100% - 250px);
   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-.downarrow{
+
+.downarrow {
   background: transparent;
   position: absolute;
   right: 50px;
@@ -186,10 +224,12 @@ input#menu[type="checkbox"]{
   text-align: center;
   display: block;
 }
-.downarrow:hover{
+
+.downarrow:hover {
   color: #fff;
 }
-.menu{
+
+.menu {
   position: absolute;
   display: block;
   left: -200px;
@@ -200,161 +240,192 @@ input#menu[type="checkbox"]{
   background-color: #1B3E6F;
   z-index: 999;
 }
-.menu-dropdown{
+
+.menu-dropdown {
   top: 0;
   overflow-y: auto;
 }
-.overflow-container{
+
+.overflow-container {
   position: relative;
-  height: calc(100vh - 50px)!important;
+  height: calc(100vh - 50px) !important;
   overflow-y: auto;
   border-top: 60px solid #fff;
   z-index: -1;
-  display:block;
+  display: block;
 }
 
-.menu .logotype{
+.menu .logotype {
   position: absolute !important;
   top: 16px;
   left: 55px;
   display: block;
 }
+
 /* .sub-menu-dropdown{
 background-color: #333;
 }   */
-.menu:hover{
+.menu:hover {
   position: absolute;
   left: 0;
   top: 0;
 }
-.openNav .menu:hover{
+
+.openNav .menu:hover {
   position: absolute;
   left: -200px;
   top: 60px;
 }
-.openNav .menu{
+
+.openNav .menu {
   top: 60px;
   transform: translate3d(200px, 0, 0);
   transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
 }
-@-webkit-keyframes grow{
+
+@-webkit-keyframes grow {
   0% {
     display: none;
     opacity: 0;
   }
+
   50% {
     display: block;
     opacity: 0.5;
   }
+
   100% {
     opacity: 1;
   }
 }
-@keyframes grow{
+
+@keyframes grow {
 
   0% {
     display: none;
     opacity: 0;
   }
+
   50% {
     display: block;
     opacity: 0.5;
   }
+
   100% {
     opacity: 1
   }
 }
+
 /*User Profile*/
-.userProfile .dropdown{
+.userProfile .dropdown {
   width: 99.5%;
 }
-.userProfile .dropdown:hover{
+
+.userProfile .dropdown:hover {
   background: #172B4D !important;
 }
-.userProfile .dropdown-text{
+
+.userProfile .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
   font-size: 13px;
   line-height: 40px;
 }
-.import-container-all{
+
+.import-container-all {
   width: 100%;
   padding-bottom: 20px;
 }
-.import-container{
+
+.import-container {
   width: 100%;
   background: #E7F1FC;
   margin-bottom: 20px;
   padding: 9px 18px;
   border: solid 1px #EEF4F9;
 }
-.import-container-input{
+
+.import-container-input {
   width: 40%;
   position: relative;
   display: inline-block;
   margin-right: 20px;
 }
-.import-container-input input{
+
+.import-container-input input {
   width: 100%;
   height: 36px;
   padding: 5px 40px 5px 12px;
   border: 0px;
   border-radius: 2px;
-  -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+  -webkit-box-shadow: 0px 0px 42px -27px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 0px 42px -27px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 0px 42px -27px rgba(0, 0, 0, 0.75);
   font-size: 13px;
   color: #172B4D;
 }
-.import-container-input input:focus{
+
+.import-container-input input:focus {
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18);
 }
-.import-container-input input::placeholder{
+
+.import-container-input input::placeholder {
   color: #959DA8 !important;
 }
-.enter-link{
+
+.enter-link {
   position: absolute;
   right: 12px;
   font-size: 20px;
   top: 6px;
   color: #1273EB;
 }
-.enter-link:hover{
+
+.enter-link:hover {
   text-decoration: none;
 }
-.import-container-input input::placeholder{
+
+.import-container-input input::placeholder {
   color: #CFD7E5;
 }
-.import-container-span{
+
+.import-container-span {
   font-size: 12px;
 }
-.import-container-all .accordion .card-header{
+
+.import-container-all .accordion .card-header {
   background: #fff !important;
   border-bottom: 0 !important;
 }
-.import-container-all .collapse.show{
+
+.import-container-all .collapse.show {
   border-top: solid 1px #ECEDF2;
 }
-.import-container-all .card-header .accordion-delete{
+
+.import-container-all .card-header .accordion-delete {
   display: none;
 }
-.import-container-all .card-header:hover .accordion-delete{
+
+.import-container-all .card-header:hover .accordion-delete {
   display: inline;
 }
-.accordion-delete{
+
+.accordion-delete {
   color: #FF6469;
   font-size: 18px;
   margin-top: 11px;
 }
-.accordion-delete:hover{
+
+.accordion-delete:hover {
   text-decoration: none;
 }
+
 /* .userProfile .dropdown-toggle{
 height: 40px;
 } */
-.userProfile .dropdown-toggle:hover ~ .dropdown-text,
-.userProfile .dropdown-toggle:focus ~ .dropdown-text{
+.userProfile .dropdown-toggle:hover~.dropdown-text,
+.userProfile .dropdown-toggle:focus~.dropdown-text {
   background: transparent !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -367,60 +438,72 @@ height: 40px;
   height: 24px;
   background: url(/assets/img/img-userProfile.png) center center no-repeat;
 }
-.packagesFilter .custom-checkbox{
+
+.packagesFilter .custom-checkbox {
   margin-left: 8px;
 }
-.packagesFilter .custom-control-label{
+
+.packagesFilter .custom-control-label {
   line-height: 28px !important;
   font-size: 14px !important;
   text-indent: 6px !important;
 }
-.packagesFilter .reset-filter{
+
+.packagesFilter .reset-filter {
   margin-top: 6px;
   padding-top: 6px;
   padding-left: 9px;
   border-top: solid 1px #ECEDF2;
   font-size: 13px;
 }
-.packagesFilter .reset-filter a:hover{
+
+.packagesFilter .reset-filter a:hover {
   background: none !important;
   text-decoration: none;
   color: #1B3E6F;
 }
+
 /**Packages Sort**/
-.sort-packages{
+.sort-packages {
   font-size: 12px;
   font-weight: bold;
   color: #C3CDDB;
 }
-.sort-packages .dropdown{
+
+.sort-packages .dropdown {
   width: 88px;
 }
-.sort-packages .dropdown-text{
+
+.sort-packages .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
   color: #1B3E6F;
 }
-.sort-packages .dropdown-text::after{
+
+.sort-packages .dropdown-text::after {
   right: 18px !important;
   border: solid !important;
   border-color: #1B3E6F transparent transparent transparent !important;
 }
-.sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
+
+.sort-packages .dropdown-toggle:focus~.dropdown-text::after {
   top: 12px !important;
   border-color: transparent transparent #1B3E6F transparent !important;
 }
-.sort-packages .dropdown-toggle:hover ~ .dropdown-text,
-.sort-packages .dropdown-toggle:focus ~ .dropdown-text{
+
+.sort-packages .dropdown-toggle:hover~.dropdown-text,
+.sort-packages .dropdown-toggle:focus~.dropdown-text {
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
   background: #fff;
 }
+
 .sort-packages .dropdown-content:hover,
-.sort-packages .dropdown-toggle:focus ~ .dropdown-content{
+.sort-packages .dropdown-toggle:focus~.dropdown-content {
   top: 30px;
 }
-.sort-packages .dropdown-content{
+
+.sort-packages .dropdown-content {
   width: 88px;
   padding: 6px 0;
   background: #fff;
@@ -428,22 +511,26 @@ height: 40px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 }
-.sort-packages .dropdown-content a{
+
+.sort-packages .dropdown-content a {
   color: #1B3E6F;
   font-size: 12px;
 }
-.sort-packages .dropdown-content a:hover{
+
+.sort-packages .dropdown-content a:hover {
   color: #1B3E6F;
   background-color: #F4F9FE;
   text-decoration: unset;
   cursor: pointer;
 }
+
 /**Pagination**/
-.page-item{
+.page-item {
   margin: 3px 2px 0;
 }
+
 .page-item .page-link,
-.page-item.disabled .page-link{
+.page-item.disabled .page-link {
   padding: 5px 9px;
   background: transparent !important;
   border: 0;
@@ -451,72 +538,82 @@ height: 40px;
   font-size: 13px;
   font-weight: bold;
 }
+
 .page-item.active .page-link,
-.page-link:hover{
+.page-link:hover {
   color: #1B3E6F !important;
   background-color: #fff !important;
   border-radius: 100% !important;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
   outline: 0;
 }
+
 /**Packages Cards***/
 /***Package Info Card***/
-.packages-card .card{
+.packages-card .card {
   width: 100%;
   margin: 0;
   border-radius: 2px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
-.packages-card .card-title{
+
+.packages-card .card-title {
   margin-bottom: 0 !important;
   font-size: 13px;
   font-weight: bold;
   color: #1B3E6F;
 }
-.packages-card .card-title span{
+
+.packages-card .card-title span {
   color: #1B3E6F;
   font-size: 11px;
   vertical-align: bottom;
 }
-.packages-card p{
+
+.packages-card p {
   font-size: 12px;
   color: #D0D7E4;
 }
-.packages-card p.package-desc{
+
+.packages-card p.package-desc {
   font-size: 13px;
   text-align: left;
-  display: -webkit-box;  
-  -webkit-line-clamp: 1; 
-  -webkit-box-orient: vertical;   
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.packages-card p.package-desc:hover{
+
+.packages-card p.package-desc:hover {
   color: #1B3E6F !important;
   text-decoration: underline;
 }
 
 .packages-card [data-tooltip]::before,
-.packages-card .tooltip::before{
+.packages-card .tooltip::before {
   border: 0 !important;
 }
+
 .packages-card .tooltip:after,
 .packages-card [data-tooltip]:after {
   padding: 9px;
   font-size: 11px;
   background: #F4F9FE;
   border: solid 1px #E6EDF5;
-  box-shadow: 0 0 12 rgba(0,0,0,0.8);
+  box-shadow: 0 0 12 rgba(0, 0, 0, 0.8);
   border-radius: 3px;
 }
+
 /***Add Package Card***/
-.addPaackage-card{
+.addPaackage-card {
   padding: 10px 0;
   background: #F4F9FE !important;
   border: solid 1px #D7E7F9 !important;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
 }
-.addPaackage-card a{
+
+.addPaackage-card a {
   margin: 0;
   padding: 8px 15px;
   font-weight: bold;
@@ -528,31 +625,37 @@ height: 40px;
   background-repeat: no-repeat;
   text-align: left;
 }
-.addPaackage-card a:hover{
+
+.addPaackage-card a:hover {
   text-decoration: unset;
 }
+
 .btn-create-package i,
-.btn-import-package i{
+.btn-import-package i {
   margin-right: 9px;
   font-size: 14px;
   vertical-align: middle;
 }
+
 .btn-create-package,
-.btn-create-package:hover{
+.btn-create-package:hover {
   background-color: #1B3E6F;
   color: #fff;
 }
+
 .btn-import-package,
-.btn-import-package:hover{
+.btn-import-package:hover {
   background: #C3CDDB;
   color: #1B3E6F;
 }
+
 /***Actions Menu***/
-.packages-card .dropdown{
+.packages-card .dropdown {
   width: auto;
   float: right;
 }
-.packages-card .dropdown-text{
+
+.packages-card .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -562,32 +665,38 @@ height: 40px;
   border-bottom-right-radius: 0;
   opacity: .6;
 }
-.packages-card .dropdown-text:hover{
+
+.packages-card .dropdown-text:hover {
   opacity: 1;
 }
-.packages-card .dropdown-text::after{
+
+.packages-card .dropdown-text::after {
   display: none;
 }
-.packages-card .dropdown-text img{
+
+.packages-card .dropdown-text img {
   padding: 9px 7px;
 }
-.packages-card .dropdown-content{
+
+.packages-card .dropdown-content {
   right: 0;
   width: 120px;
   padding: 6px 0;
   border: 0;
   border-radius: 50%;
 }
+
 /* .userProfile .dropdown-content{
   bottom: 40px !important;
   top: unset !important;
   width: 100%;
 } */
 /**Tab Nav**/
-.nav-tabs{
+.nav-tabs {
   border-bottom-color: #ECEDF2 !important;
 }
-.nav-link{
+
+.nav-link {
   padding: 15px 20px 15px 20px !important;
   text-transform: uppercase !important;
   font-size: 12px;
@@ -595,21 +704,25 @@ height: 40px;
   color: #C3CDDB !important;
   border: none !important;
 }
+
 .nav-tabs .nav-link:focus,
-.nav-tabs .nav-link:hover{
+.nav-tabs .nav-link:hover {
   border: 0 !important;
   transition: 0.3s;
 }
-.nav-tabs .nav-link:hover{
+
+.nav-tabs .nav-link:hover {
   color: #1B3E6F !important;
 }
-.nav-tabs .nav-link.active{
+
+.nav-tabs .nav-link.active {
   color: #1B3E6F !important;
   background: transparent !important;
   border: 0 !important;
   border-bottom: solid 2px #1B3E6F !important;
 }
-.nav-tabs .nav-link::before{
+
+.nav-tabs .nav-link::before {
   content: "|";
   padding-right: 20px !important;
   color: #C3CDDB;
@@ -617,26 +730,31 @@ height: 40px;
   position: absolute;
   left: 0px;
 }
-.nav-tabs .nav-link:first-child::before{
+
+.nav-tabs .nav-link:first-child::before {
   content: none;
 }
-.nav-tabs .nav-link:first-child{
+
+.nav-tabs .nav-link:first-child {
   padding-left: 20px !important;
 }
+
 .nav-item.nav-link.complete,
-.nav-item.active.complete{
+.nav-item.active.complete {
   padding: 15px 20px 15px 44px !important;
   background: url(/assets/img/icon-required-yes.svg) 20px center no-repeat !important;
 }
+
 /**Sliding Search Input**/
-.searchBox{
+.searchBox {
   position: absolute;
   top: 0%;
   right: 0%;
-  transform: translate(0%,-0%);
+  transform: translate(0%, -0%);
   height: 40px;
 }
-.searchButton{
+
+.searchButton {
   float: right;
   margin-top: 18px;
   padding-left: 0 !important;
@@ -652,17 +770,21 @@ height: 40px;
   align-items: center;
   transition: 0.4s;
 }
-.searchBox:hover > .searchInput{
+
+.searchBox:hover>.searchInput {
   width: 240px;
   border-bottom: solid 1px #C3CDDB;
 }
-.searchBox > .searchInput:focus{
+
+.searchBox>.searchInput:focus {
   border-bottom: solid 1px #1B3E6F !important;
 }
-.searchBox:hover > .searchButton{
+
+.searchBox:hover>.searchButton {
   color: #1B3E6F;
 }
-.searchInput{
+
+.searchInput {
   border: none;
   background: none;
   outline: none;
@@ -674,22 +796,26 @@ height: 40px;
   line-height: 49px;
   width: 0px;
 }
-.searchInput::placeholder{
+
+.searchInput::placeholder {
   color: #BABBC3;
 }
-.searchBox-expanded{
+
+.searchBox-expanded {
   width: 240px;
   border-bottom: solid 1px #C3CDDB;
 }
+
 /**Drop Down Menu**/
-.dropdown{
+.dropdown {
   position: relative;
   display: inline-block;
   text-align: left;
   width: 132px;
   z-index: 200;
 }
-.dropdown-text{
+
+.dropdown-text {
   cursor: pointer;
   position: relative;
   text-indent: 10px;
@@ -697,10 +823,11 @@ height: 40px;
   background-color: #eee;
   border: 1px solid #ccc;
   border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
   width: 100%;
 }
-.dropdown-text:after{
+
+.dropdown-text:after {
   position: absolute;
   right: 6px;
   top: 15px;
@@ -710,9 +837,10 @@ height: 40px;
   border-style: solid;
   /* border-width: 5px 4px 0 4px;
   border-color: #555 transparent transparent transparent; */
-  border:0px
+  border: 0px
 }
-.dropdown-toggle{
+
+.dropdown-toggle {
   font-size: 0;
   z-index: 1;
   cursor: pointer;
@@ -726,17 +854,19 @@ height: 40px;
   height: 34px;
   width: 100%;
 }
-.dropdown-toggle:focus{
+
+.dropdown-toggle:focus {
   outline: 0;
 }
-.dropdown-content{
+
+.dropdown-content {
   position: absolute;
   top: 32px;
   width: 140px;
   margin: 0;
   padding: 0;
   opacity: 0;
-  visibility:hidden;
+  visibility: hidden;
   -webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
   -ms-transition: all .25s ease;
@@ -749,54 +879,66 @@ height: 40px;
   background-color: #eee;
   border: 1px solid #ccc;
 }
-.dropdown-content a{
+
+.dropdown-content a {
   display: block;
 }
-.dropdown-content a:hover{
+
+.dropdown-content a:hover {
   background: #e8e8e8;
 }
-.dropdown-toggle:hover ~ .dropdown-text,
-.dropdown-toggle:focus ~ .dropdown-text{
+
+.dropdown-toggle:hover~.dropdown-text,
+.dropdown-toggle:focus~.dropdown-text {
   background-color: #e8e8e8;
 }
-.dropdown-toggle:focus ~ .dropdown-text{
-  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
+
+.dropdown-toggle:focus~.dropdown-text {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
   z-index: 2;
 }
-.dropdown-toggle:focus ~ .dropdown-text:after{
+
+.dropdown-toggle:focus~.dropdown-text:after {
   border-width: 0 4px 5px 4px;
   border-color: transparent transparent #555 transparent;
 }
+
 .dropdown-content:hover,
-.dropdown-toggle:focus ~ .dropdown-content{
+.dropdown-toggle:focus~.dropdown-content {
   opacity: 1;
-  visibility:visible;
+  visibility: visible;
   top: 42px;
 }
+
 /**Card**/
 /* Hover Shadow */
 @keyframes hover {
   50% {
     transform: translateY(-3px);
   }
+
   100% {
     transform: translateY(-6px);
   }
 }
+
 @keyframes card {
   0% {
     transform: translateY(6px);
     opacity: .3;
   }
+
   50% {
     transform: translateY(3px);
     opacity: .8;
   }
+
   100% {
     transform: translateY(6px);
     opacity: .3;
   }
 }
+
 .card {
   /* display: inline-block;
   position: relative;
@@ -807,6 +949,7 @@ height: 40px;
   margin-bottom: 25px !important;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 }
+
 /* .card:before {
   pointer-events: none;
   position: absolute;
@@ -840,21 +983,23 @@ height: 40px;
   animation-iteration-count: 1;
   animation-direction: alternate;
 } */
-.card-body{
+.card-body {
   padding: 20px !important;
 }
 
 /*Main Container*/
-.main-container{
+.main-container {
   padding: 0 !important;
 }
-.header-button-save button{
+
+.header-button-save button {
   border-radius: 50px;
 }
+
 /*Page Title*/
-.page-title{
+.page-title {
   padding: 20px 30px;
-  background:#fff;
+  background: #fff;
   border-left: solid 1px #FAFAFA;
   margin-bottom: 21px;
   -webkit-box-shadow: 0 4px 10px 0 #eef0f5;
@@ -864,39 +1009,48 @@ height: 40px;
   /* position: fixed;
   width: calc(100% - 50px); */
 }
-.page-title h2{
+
+.page-title h2 {
   font-size: 16px;
   font-weight: bold;
   padding-top: 1px;
 }
-.page-title h2 span{
+
+.page-title h2 span {
   color: #C3CDDB;
   font-size: 14px;
 }
+
 /*Content*/
-.body-container{
+.body-container {
   padding: 0 30px !important;
 }
-.body-container > .container{
+
+.body-container>.container {
   padding: 0;
 }
-.search-filter-col{
+
+.search-filter-col {
   padding-right: 0 !important;
   border-bottom: solid 1px #ECEDF2 !important;
 }
+
 /**Packages Filter**/
-.packagesFilter{
+.packagesFilter {
   margin-top: 12px;
   margin-bottom: 7px;
   z-index: 220 !important;
 }
-.packagesFilter .dropdown-toggle{
+
+.packagesFilter .dropdown-toggle {
   height: 36px !important;
 }
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{
+
+.packagesFilter .dropdown-toggle:focus~.dropdown-text::after {
   border-color: transparent transparent #1B3E6F transparent;
 }
-.packagesFilter .dropdown-text{
+
+.packagesFilter .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -904,26 +1058,31 @@ height: 40px;
   line-height: 30px;
   font-size: 12px;
 }
-.packagesFilter .dropdown-text::after{
+
+.packagesFilter .dropdown-text::after {
   right: 12px;
   border: solid !important;
   border-width: 5px 4px 0 4px !important;
   border-color: #1B3E6F transparent transparent transparent !important;
 }
-.packagesFilter .dropdown-toggle:hover ~ .dropdown-text,
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
+
+.packagesFilter .dropdown-toggle:hover~.dropdown-text,
+.packagesFilter .dropdown-toggle:focus~.dropdown-text {
   background-color: transparent;
   box-shadow: none;
   border-radius: 0;
 }
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-text{
+
+.packagesFilter .dropdown-toggle:focus~.dropdown-text {
   background: #fff;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 }
-.packagesFilter .dropdown-text::after{
+
+.packagesFilter .dropdown-text::after {
   top: 12px;
 }
-.packagesFilter .dropdown-content{
+
+.packagesFilter .dropdown-content {
   padding: 6px 0;
   background: #fff;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
@@ -933,14 +1092,17 @@ height: 40px;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.packagesFilter .dropdown-content li:hover .custom-checkbox{
+
+.packagesFilter .dropdown-content li:hover .custom-checkbox {
   cursor: pointer;
 }
+
 .packagesFilter .dropdown-content:hover,
-.packagesFilter .dropdown-toggle:focus ~ .dropdown-content{
+.packagesFilter .dropdown-toggle:focus~.dropdown-content {
   top: 30px;
 }
-.packagesFilter .form-control{
+
+.packagesFilter .form-control {
   padding: 12px 9px 12px 38px !important;
   border: 0 !important;
   border-bottom: solid 1px #D7E7F9 !important;
@@ -950,55 +1112,68 @@ height: 40px;
   color: #1B3E6F;
   font-size: 13px;
 }
-.packagesFilter .form-control::placeholder{
+
+.packagesFilter .form-control::placeholder {
   color: #BABBC3;
 }
-.packagesFilter .form-control:focus{
+
+.packagesFilter .form-control:focus {
   box-shadow: none !important;
   border-bottom: solid 1px #1B3E6F !important;
 }
-.packagesFilter .custom-checkbox{
+
+.packagesFilter .custom-checkbox {
   margin-left: 8px;
 }
-.packagesFilter .custom-control-input{
+
+.packagesFilter .custom-control-input {
   left: 10px;
 }
-.packagesFilter .custom-control-label{
+
+.packagesFilter .custom-control-label {
   line-height: 28px !important;
   font-size: 13px !important;
   text-indent: 6px !important;
 }
+
 /**Packages Sort**/
-.sort-packages{
+.sort-packages {
   font-size: 12px;
   font-weight: bold;
   color: #C3CDDB;
 }
-.sort-packages .dropdown{
+
+.sort-packages .dropdown {
   width: 88px;
 }
-.sort-packages .dropdown-text{
+
+.sort-packages .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
   color: #1B3E6F;
 }
-.sort-packages .dropdown-text::after{
+
+.sort-packages .dropdown-text::after {
   border-color: #1B3E6F transparent transparent transparent;
 }
-.sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{
+
+.sort-packages .dropdown-toggle:focus~.dropdown-text::after {
   border-color: transparent transparent #1B3E6F transparent;
 }
-.sort-packages .dropdown-toggle:hover ~ .dropdown-text,
-.sort-packages .dropdown-toggle:focus ~ .dropdown-text{
+
+.sort-packages .dropdown-toggle:hover~.dropdown-text,
+.sort-packages .dropdown-toggle:focus~.dropdown-text {
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
   background: #fff;
 }
+
 .sort-packages .dropdown-content:hover,
-.sort-packages .dropdown-toggle:focus ~ .dropdown-content{
+.sort-packages .dropdown-toggle:focus~.dropdown-content {
   top: 30px;
 }
-.sort-packages .dropdown-content{
+
+.sort-packages .dropdown-content {
   width: 88px;
   padding: 6px 0;
   background: #fff;
@@ -1006,55 +1181,65 @@ height: 40px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 }
-.sort-packages .dropdown-content a{
+
+.sort-packages .dropdown-content a {
   color: #1B3E6F;
   font-size: 12px;
 }
-.sort-packages .dropdown-content a:hover{
+
+.sort-packages .dropdown-content a:hover {
   background-color: #F4F9FE;
   text-decoration: unset;
 }
+
 /**Pagination**/
 .page-item .page-link,
-.page-item.disabled .page-link{
+.page-item.disabled .page-link {
   background: transparent !important;
   border: 0;
   color: #1B3E6F !important;
   font-size: 14px;
 }
-.page-link:hover{
+
+.page-link:hover {
   color: #1B3E6F !important;
   background-color: #fff !important;
   border-radius: 100%;
   transition: 0.3s;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
 }
-.page-item.disabled{
+
+.page-item.disabled {
   opacity: .3;
 }
+
 /**Packages Cards***/
 /***Package Info Card***/
-.packages-card .card{
+.packages-card .card {
   margin: 0;
   border-radius: 2px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12);
 }
-.packages-card .card:hover{
+
+.packages-card .card:hover {
   box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17);
   transition: all 0.5s ease;
   cursor: pointer;
 }
+
 .packages-card .card:hover .card-title,
-.packages-card .card:hover .card-title span{
+.packages-card .card:hover .card-title span {
   color: #1273EB !important;
 }
-.packages-card .card-title{
+
+.packages-card .card-title {
   margin-bottom: 0 !important;
   font-size: 14px;
   font-weight: bold;
 }
-.packages-card .card-title .packageName{
+
+.packages-card .card-title .packageName {
   margin-bottom: 0;
   display: inline-block;
   width: auto;
@@ -1066,57 +1251,68 @@ height: 40px;
   vertical-align: bottom;
   color: #1B3E6F;
 }
+
 .packages-card .card-title:hover,
-.packages-card .card-title:hover .packageName{
+.packages-card .card-title:hover .packageName {
   text-decoration: none;
   color: #1273EB;
 }
-.packages-card .card-body{
+
+.packages-card .card-body {
   padding-bottom: 0 !important;
 }
-.packages-card .card-footer .col{
+
+.packages-card .card-footer .col {
   text-align: left;
 }
 
 /***Add Package Card***/
-.addPaackage-card{
+.addPaackage-card {
   background: #F4F9FE !important;
   border: solid 1px #D7E7F9 !important;
 }
-.addPaackage-card:hover{
+
+.addPaackage-card:hover {
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
 }
 
-.addPaackage-card a:hover{
+.addPaackage-card a:hover {
   text-decoration: unset;
 }
-.addPaackage-card .card-footer .col{
+
+.addPaackage-card .card-footer .col {
   padding: 0;
   text-align: right;
 }
-.addPaackage-card .card-footer .col:last-child{
+
+.addPaackage-card .card-footer .col:last-child {
   text-align: left;
 }
+
 .btn-create-package,
-.btn-import-package{
+.btn-import-package {
   margin-bottom: 9px !important;
 }
+
 .btn-create-package,
-.btn-create-package:hover{
+.btn-create-package:hover {
   background-color: #1B3E6F;
   border-color: #1B3E6F;
   color: #fff;
 }
+
 .btn-import-package,
-.btn-import-package:hover{
+.btn-import-package:hover {
   color: #1B3E6F;
 }
+
 /***Actions Menu***/
-.packages-card .dropdown{
+.packages-card .dropdown {
   width: auto;
   float: right;
 }
-.packages-card .dropdown-text{
+
+.packages-card .dropdown-text {
   background: transparent;
   border: 0;
   box-shadow: none;
@@ -1126,13 +1322,16 @@ height: 40px;
   border-bottom-right-radius: 0;
   opacity: .6;
 }
-.packages-card .dropdown-text::after{
+
+.packages-card .dropdown-text::after {
   display: none;
 }
-.packages-card .dropdown-text img{
+
+.packages-card .dropdown-text img {
   padding: 9px 7px;
 }
-.packages-card .dropdown-content{
+
+.packages-card .dropdown-content {
   right: 0;
   width: 120px;
   padding: 6px 0;
@@ -1142,7 +1341,8 @@ height: 40px;
   border-top-right-radius: 0;
   background: #1B3E6F;
 }
-.packages-card .dropdown-content a{
+
+.packages-card .dropdown-content a {
   padding-left: 12px;
   color: #fff;
   font-size: 12px;
@@ -1150,35 +1350,43 @@ height: 40px;
   background-size: 10%;
   background-repeat: no-repeat; */
 }
-.packages-card .dropdown-content a i{
+
+.packages-card .dropdown-content a i {
   margin-right: 4px;
 }
-.packages-card .dropdown-content a:hover{
+
+.packages-card .dropdown-content a:hover {
   background-color: #172B4D;
   text-decoration: unset;
 }
+
 .packages-card .dropdown-content:hover,
-.packages-card .dropdown-toggle:focus ~ .dropdown-content{
+.packages-card .dropdown-toggle:focus~.dropdown-content {
   top: 22px;
 }
-.packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{
+
+.packages-card .dropdown-toggle:focus~.dropdown-text .icon-menuDots {
   color: #D0D7E4;
 }
-.packages-card .dropdown-toggle:hover ~ .dropdown-text{
+
+.packages-card .dropdown-toggle:hover~.dropdown-text {
   background: transparent;
   opacity: 1;
 }
-.packages-card .dropdown-toggle:focus ~ .dropdown-text{
+
+.packages-card .dropdown-toggle:focus~.dropdown-text {
   width: 27px;
   text-align: center;
   opacity: 1;
   background: #1B3E6F;
   box-shadow: none;
 }
-.package-version{
+
+.package-version {
   color: #C3CDDB !important;
 }
-.package-version::before{
+
+.package-version::before {
   content: "|";
   margin-left: 8px;
   margin-right: 6px;
@@ -1186,25 +1394,30 @@ height: 40px;
 }
 
 /***Contributers***/
-ul.package-contributers{
+ul.package-contributers {
   /*margin-bottom: 0 !important;*/
   padding-left: 0 !important;
 }
-.package-contributers li{
+
+.package-contributers li {
   list-style: none;
   display: inline-block;
 }
-.package-contributers li{
+
+.package-contributers li {
   margin-left: -5px;
 }
-.package-contributers li:first-child{
+
+.package-contributers li:first-child {
   margin-left: 0;
 }
-.package-contributers li:last-child{
+
+.package-contributers li:last-child {
   margin-left: 9px;
 }
+
 .package-modifier,
-.package-contributers button{
+.package-contributers button {
   height: 20px !important;
   padding: 0 !important;
   border-radius: 100%;
@@ -1218,8 +1431,9 @@ ul.package-contributers{
   display: inline-block;
   position: relative;
 }
+
 .package-modifier:before,
-.package-contributers button:before{
+.package-contributers button:before {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   transition: all 0.2s ease;
@@ -1232,13 +1446,15 @@ ul.package-contributers{
   right: 0;
   top: 0;
 }
+
 .package-modifier:hover,
-.package-contributers button:hover{
+.package-contributers button:hover {
   box-shadow: 0 0 0 2px #D7E7F9;
   text-decoration: none;
 }
+
 .package-modifier:hover:before,
-.package-contributers button:hover:before{
+.package-contributers button:hover:before {
   -webkit-transform: scale(0.925);
   -moz-transform: scale(0.925);
   -ms-transform: scale(0.925);
@@ -1247,34 +1463,41 @@ ul.package-contributers{
   box-shadow: 0 0 0 1px #D7E7F9;
   opacity: 0.5;
 }
+
 .package-modifier img,
-.package-contributers button img{
+.package-contributers button img {
   width: 20px;
   height: 20px;
   object-fit: cover;
   vertical-align: top;
   border-radius: 100%;
 }
-.package-contributers a{
+
+.package-contributers a {
   font-size: 12px;
   color: #1273EB;
 }
-.package-contributers a:hover{
+
+.package-contributers a:hover {
   text-decoration: unset;
 }
+
 /***Package Footer***/
-.packages-card .card-footer{
+.packages-card .card-footer {
   padding: 0 !important;
   background: transparent !important;
   border-top-color: #F7F6F6 !important;
 }
-.packages-card .card-footer .col{
+
+.packages-card .card-footer .col {
   text-align: center;
 }
-.packages-card .card-footer .col:first-child{
+
+.packages-card .card-footer .col:first-child {
   border-right: solid 1px #F7F6F6;
 }
-.packages-card .card-footer .btn{
+
+.packages-card .card-footer .btn {
   padding: 10px 0 10px 0 !important;
   background-color: transparent !important;
   color: #1B3E6F !important;
@@ -1283,14 +1506,17 @@ ul.package-contributers{
   text-align: left;
   opacity: .4;
 }
-.packages-card .card-footer .btn:hover{
+
+.packages-card .card-footer .btn:hover {
   opacity: 1;
 }
-.packages-card .card-footer i{
+
+.packages-card .card-footer i {
   margin-right: 6px;
 }
+
 .icon-deployed-active,
-.icon-deploy-inactive{
+.icon-deploy-inactive {
   margin-right: 9px;
   display: inline;
   background-image: url(/assets/img/icon-deploy-active.svg);
@@ -1298,7 +1524,8 @@ ul.package-contributers{
   background-repeat: no-repeat;
   vertical-align: baseline;
 }
-.icon-deploy-inactive{
+
+.icon-deploy-inactive {
   background-image: url(/assets/img/icon-deploy-inactive.svg);
 }
 
@@ -1320,18 +1547,21 @@ ul.package-contributers{
   box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0);
   /* Hack to improve aliasing on mobile/tablet devices */
 }
+
 .border-fade:hover {
   box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0);
   /* Hack to improve aliasing on mobile/tablet devices */
 }
+
 /*Content*/
 
 /**Title Action Buttons**/
-.page-title-actions li{
+.page-title-actions li {
   display: inline-block;
   text-align: center;
 }
-.title-action{
+
+.title-action {
   -webkit-transition: box-shadow 0.2s ease;
   -moz-transition: box-shadow 0.2s ease;
   transition: box-shadow 0.2s ease;
@@ -1349,7 +1579,8 @@ ul.package-contributers{
   width: 4em;
   line-height: 4em;
 }
-.title-action:before{
+
+.title-action:before {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   transition: all 0.2s ease;
@@ -1362,11 +1593,13 @@ ul.package-contributers{
   right: 0;
   top: 0;
 }
-.title-action:hover{
+
+.title-action:hover {
   box-shadow: 0 0 0 7px #07819b;
   text-decoration: none;
 }
-.title-action:hover:before{
+
+.title-action:hover:before {
   -webkit-transform: scale(0.925);
   -moz-transform: scale(0.925);
   -ms-transform: scale(0.925);
@@ -1386,6 +1619,7 @@ ul.package-contributers{
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 }
+
 .float:hover {
   transform: translateY(-5px);
 }
@@ -1410,20 +1644,20 @@ ul.package-contributers{
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   -webkit-transition:
-          opacity 0.2s ease-in-out,
-          visibility 0.2s ease-in-out,
-          -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   -moz-transition:
-          opacity 0.2s ease-in-out,
-          visibility 0.2s ease-in-out,
-          -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   transition:
-          opacity 0.2s ease-in-out,
-          visibility 0.2s ease-in-out,
-          transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
   -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform:    translate3d(0, 0, 0);
-  transform:         translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
   pointer-events: none;
 }
 
@@ -1509,8 +1743,8 @@ ul.package-contributers{
 .tooltip-top:focus:before,
 .tooltip-top:focus:after {
   -webkit-transform: translateY(-12px);
-  -moz-transform:    translateY(-12px);
-  transform:         translateY(-12px);
+  -moz-transform: translateY(-12px);
+  transform: translateY(-12px);
 }
 
 /* Left */
@@ -1535,8 +1769,8 @@ ul.package-contributers{
 .tooltip-left:focus:before,
 .tooltip-left:focus:after {
   -webkit-transform: translateX(-12px);
-  -moz-transform:    translateX(-12px);
-  transform:         translateX(-12px);
+  -moz-transform: translateX(-12px);
+  transform: translateX(-12px);
 }
 
 /* Bottom */
@@ -1560,8 +1794,8 @@ ul.package-contributers{
 .tooltip-bottom:focus:before,
 .tooltip-bottom:focus:after {
   -webkit-transform: translateY(12px);
-  -moz-transform:    translateY(12px);
-  transform:         translateY(12px);
+  -moz-transform: translateY(12px);
+  transform: translateY(12px);
 }
 
 /* Right */
@@ -1584,8 +1818,8 @@ ul.package-contributers{
 .tooltip-right:focus:before,
 .tooltip-right:focus:after {
   -webkit-transform: translateX(12px);
-  -moz-transform:    translateX(12px);
-  transform:         translateX(12px);
+  -moz-transform: translateX(12px);
+  transform: translateX(12px);
 }
 
 /* Move directional arrows down a bit for left/right tooltips */
@@ -1603,74 +1837,88 @@ ul.package-contributers{
 
 /*TooltipModule - Shady*/
 .tooltip:before,
-.tooltip:after{
+.tooltip:after {
   width: 100% !important;
 }
-.tooltip .tooltip-inner{
+
+.tooltip .tooltip-inner {
   max-width: 280px !important;
   width: 100% !important;
-  text-align: left!important;
-  color:#1B3E6F;
+  text-align: left !important;
+  color: #1B3E6F;
   background-color: #F4F9FE;
   border: solid 1px #E6EDF5;
   border-radius: 3px !important;
   font-size: 11px;
-}  
-.bs-tooltip-bottom .arrow::before{
-  border-bottom-color:  #E6EDF5  !important;
-}
 
-.bs-tooltip-top .arrow::before{
-  border-top-color:  #E6EDF5  !important;
-}

-       
+}
+
+.bs-tooltip-bottom .arrow::before {
+  border-bottom-color: #E6EDF5 !important;
+}
+
+.bs-tooltip-top .arrow::before {
+  border-top-color: #E6EDF5 !important;
+}
+
 
 
 
-.btn{
-padding-right: 20px !important;
-padding-left: 20px !important;
-  
+.btn {
+  padding-right: 20px !important;
+  padding-left: 20px !important;
+
 }
-.btn.border-radius{
+
+.btn.border-radius {
   border-radius: 20px !important;
 }
-.btn-primary{
-    background-color: #1273EB !important;
-    border-color: #1273EB !important;
+
+.btn-primary {
+  background-color: #1273EB !important;
+  border-color: #1273EB !important;
 }
+
 .btn-primary:hover {
   background-color: #0069d9 !important;
   border-color: #0062cc !important;
 }
-.btn + .btn{
+
+.btn+.btn {
   margin-left: 10px;
-  }
-  .package-view-button button{
-    width: 150px; 
-    float: right;
-  }
-.package-view-button{
+}
+
+.package-view-button button {
+  width: 150px;
+  float: right;
+}
+
+.package-view-button {
   margin-top: 6px;
 }
-.package-view-button .btn{
+
+.package-view-button .btn {
   padding: 6px 12px;
   border-radius: 2px;
   font-weight: bold;
 }
-.package-view-button .btn:hover{
+
+.package-view-button .btn:hover {
   opacity: .9;
 }
-.package-view-button .btn-primary{
+
+.package-view-button .btn-primary {
   background-color: #1B3E6F !important;
   border-color: #1B3E6F !important;
+
   /* margin-bottom: 10px; */
 }
-.package-view-button .btn-outline-secondary{
+
+.package-view-button .btn-outline-secondary {
   background-color: #fff !important;
   border-color: #D0DFF1 !important;
   color: #1B3E6F !important;
 }
+
 .package-view-title {
   font-size: 11px;
   color: #1B3E6F;
@@ -1678,134 +1926,162 @@ padding-left: 20px !important;
   margin-bottom: 5px;
   margin-top: 20px;
 }
-.package-view-title+p{
+
+.package-view-title+p {
   font-size: 11px;
   margin-bottom: 0px;
 }
-.package-view-title+ul{
+
+.package-view-title+ul {
   margin-bottom: 0px;
 }
-.package-view-button .btn-outline-secondary i{
+
+.package-view-button .btn-outline-secondary i {
   font-size: 18px;
   margin-right: 4px;
 }
-.card.creat-card{
+
+.card.creat-card {
   margin: 0;
   border-radius: 2px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
-.card.creat-card .single-line{
+
+.card.creat-card .single-line {
   padding: 15px 25px 15px;
 }
-.card.creat-card .single-line-model{
+
+.card.creat-card .single-line-model {
   padding: 0px;
 }
-.card.creat-card .editor-container{
+
+.card.creat-card .editor-container {
   padding: 25px;
 }
-.single-line label{
+
+.single-line label {
   margin-bottom: 0px;
 }
-.single-line-model label{
+
+.single-line-model label {
   margin-bottom: 0px;
   border-bottom: 1px solid #FAFAFA;
   padding: 15px 25px;
 }
-.single-line-model .label-name{
+
+.single-line-model .label-name {
   width: 325px;
 }
-.single-line-model .label-input{
+
+.single-line-model .label-input {
   width: calc(100% - 325px);
 }
-.single-line-model input{
+
+.single-line-model input {
   border-bottom: 1px solid #FAFAFA !important;
   padding: 15px 25px 15px 0px;
 }
-.customKeyTitle span{
+
+.customKeyTitle span {
   color: #C3CDDB !important;
   font-size: 11px;
 }
+
 .single-line-model input:focus,
-.single-line-custom-key input:focus{
+.single-line-custom-key input:focus {
   border-bottom-color: #1B3E6F !important;
 }
-.model-note-container{
+
+.model-note-container {
   width: calc(100% - 325px);
-  padding: 0px 25px 0px 0px ;
+  padding: 0px 25px 0px 0px;
   margin-left: 325px;
 }
-.error-message{
-  font-size:11px ;
+
+.error-message {
+  font-size: 11px;
   color: #FF6469;
 }
-.tages-container{
+
+.tages-container {
   margin-bottom: 25px;
 }
-.tag-notes{
+
+.tag-notes {
   font-size: 11px;
   color: #C3CDDB;
   padding: 5px 25px 5px 0px;
   margin-bottom: 5px;
 }
-  .single-tage{
-    background: #E0E8F2;
-    font-size: 13px;
-    color: #1B3E6F;
-    border-radius: 50px;
-    padding: 5px 10px;
-    margin-right:10px;
-    margin-bottom: 10px;
-  }
-  .single-tage a{
-    color: #1B3E6F;
-    font-size: 14px;
-  }
-  .label-name{
-    width: 300px;
-    display: inline-block;
-    margin-bottom: 0px;
-    font-size: 13px;
-    font-weight: bold;
-  }
-  .label-name span{
-    color:#FF6469 ;
-  }
-  .delete-key{
-    color: #FF6469;
-    font-size: 10px;
-    background: #FFE6E7;
-    border: 1px solid #FFC9CB;
-    padding: 3px 10px 2px;
-    margin-left: 10px;
-    border-radius: 5px;
-  }
-  .delete-key:hover{
-    color: #C94448;
-    background: #FFC9CB;
-    border: 1px solid #FF6469;
-    text-decoration: none;
-  }
-  .label-input{
-    width: calc(100% - 300px);
-    display: inline-block;
-  }
-.form-check-input{
+
+.single-tage {
+  background: #E0E8F2;
+  font-size: 13px;
+  color: #1B3E6F;
+  border-radius: 50px;
+  padding: 5px 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.single-tage a {
+  color: #1B3E6F;
+  font-size: 14px;
+}
+
+.label-name {
+  width: 300px;
+  display: inline-block;
+  margin-bottom: 0px;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.label-name span {
+  color: #FF6469;
+}
+
+.delete-key {
+  color: #FF6469;
+  font-size: 10px;
+  background: #FFE6E7;
+  border: 1px solid #FFC9CB;
+  padding: 3px 10px 2px;
+  margin-left: 10px;
+  border-radius: 5px;
+}
+
+.delete-key:hover {
+  color: #C94448;
+  background: #FFC9CB;
+  border: 1px solid #FF6469;
+  text-decoration: none;
+}
+
+.label-input {
+  width: calc(100% - 300px);
+  display: inline-block;
+}
+
+.form-check-input {
   margin-left: 0px !important;
   margin-top: 2px !important;
 }
-.form-check-input+span{
+
+.form-check-input+span {
   margin-left: 20px;
   margin-right: 50px;
   font-size: 13px;
   display: flex;
 }
-.form-check-input+span i{
+
+.form-check-input+span i {
   margin-right: 5px;
   margin-left: 5px;
 }
 
-.label-input input{
+.label-input input {
   margin-bottom: 0px;
   outline: 0px;
   border: 0px;
@@ -1814,15 +2090,18 @@ padding-left: 20px !important;
   color: #1B3E6F;
   transition: all 250ms ease-out;
 }
-.label-input input[type=radio]{
+
+.label-input input[type=radio] {
   width: auto;
 }
-.label-input input[type=radio]+span{
+
+.label-input input[type=radio]+span {
   font-size: 12px;
   display: block;
   margin-right: 100px;
 }
-.single-line select{
+
+.single-line select {
   margin-bottom: 0px;
   padding-left: 10px;
   padding-right: 50px;
@@ -1839,94 +2118,115 @@ padding-left: 20px !important;
   font-size: 13px;
   color: #1B3E6F;
 }
-      .single-line select:focus{
-        box-shadow: 0 0 0 0;
-      }
-      .single-line select option:first-child{
-        color: #C3CDDB;
-      }
-    .single-line-model input::placeholder{
-      font-size: 14px;
-      color: #C3CDDB;
-      }
-      .single-line-model.error{
-        color:#FF6469;
-      }
-      .single-line-model.error input{
-        color:#FF6469;
-        border-bottom: 1px solid #FF6469 !important;
-      }
-  .single-line .custom-key{
-    background: none;
-    border: 0px;
-    color:#1273EB ;
-    font-size: 15px;
-  }
-  .single-line .custom-key:focus{
-    outline: none;
-  }
-.creat-container{
-  padding:70px 100px 70px 70px;
+
+.single-line select:focus {
+  box-shadow: 0 0 0 0;
+}
+
+.single-line select option:first-child {
+  color: #C3CDDB;
+}
+
+.single-line-model input::placeholder {
+  font-size: 14px;
+  color: #C3CDDB;
+}
+
+.single-line-model.error {
+  color: #FF6469;
+}
+
+.single-line-model.error input {
+  color: #FF6469;
+  border-bottom: 1px solid #FF6469 !important;
+}
+
+.single-line .custom-key {
+  background: none;
+  border: 0px;
+  color: #1273EB;
+  font-size: 15px;
+}
+
+.single-line .custom-key:focus {
+  outline: none;
+}
+
+.creat-container {
+  padding: 70px 100px 70px 70px;
   position: relative;
 }
-.single-custom-key{
+
+.single-custom-key {
   width: 100%;
   margin-bottom: 21px;
 }
-.single-line-custom-key{
+
+.single-line-custom-key {
   width: 45%;
   display: inline-block;
 }
-.single-line-custom-key-delete{
+
+.single-line-custom-key-delete {
   width: 10%;
   display: inline-block;
   border-bottom: 1px solid #FAFAFA;
   padding: 13px 12px 14px;
 }
-.single-line-custom-key label{
+
+.single-line-custom-key label {
   width: 150px;
   margin-bottom: 0px;
   border-bottom: 1px solid #FAFAFA;
   padding: 15px 25px;
 }
-.single-line-custom-key input{
+
+.single-line-custom-key input {
   border-bottom: 1px solid #FAFAFA !important;
   padding: 15px 25px 15px 0;
 }
-.single-line-custom-key input::placeholder{
+
+.single-line-custom-key input::placeholder {
   font-size: 14px;
   color: #C3CDDB;
 }
-.single-line-custom-key .label-input{
+
+.single-line-custom-key .label-input {
   width: calc(100% - 150px);
 }
-.single-line-custom-key .label-name span{
+
+.single-line-custom-key .label-name span {
   color: #C3CDDB !important;
   margin-right: 20px;
 }
-.custom-key-delete{
+
+.custom-key-delete {
   background: transparent;
   color: #FF6469;
   outline: 0px;
   border: 0px;
 }
-.custom-key-delete:focus{
+
+.custom-key-delete:focus {
   outline: 0px;
   border: 0px;
 }
-hr{
+
+hr {
   margin-top: 0rem !important;
   margin-bottom: 0rem !important;
   border-top: 1px solid #efefef !important;
 }
-.creat-action-container{
+
+.creat-action-container {
   position: fixed;
   right: 0px;
   top: 104px;
   width: 130px;
   text-align: center;
 }
-.action-button{
+
+.action-button {
   margin-bottom: 12px;
   padding: 3px 30px;
   color: #BABBC3;
@@ -1934,10 +2234,12 @@ hr{
   font-weight: bold;
   display: inline-block;
 }
-.action-button:hover{
+
+.action-button:hover {
   text-decoration: none;
 }
-.action-button i{
+
+.action-button i {
   background: #fff;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
   width: 40px;
@@ -1949,186 +2251,232 @@ hr{
   font-size: 17px;
   display: inline-block;
 }
-.action-button i.icon-save-sm{
+
+.action-button i.icon-save-sm {
   background: #1273EB;
   color: #fff;
   font-size: 11px;
 }
-.action-button i.icon-discard-sm{
+
+.action-button i.icon-discard-sm {
   font-size: 11px;
   color: #C3CDDB;
 }
-.action-button.save{
+
+.action-button.save {
   color: #1273EB;
 }
-.action-button.delete{
+
+.action-button.delete {
   color: #BABBC3;
 }
-.action-button.delete i{
+
+.action-button.delete i {
   color: #BABBC3;
 }
-.action-button.delete:hover{
+
+.action-button.delete:hover {
   color: #FF6469;
 }
-.mode-icon{
+
+.mode-icon {
   font-size: 20px;
 }
 
 /*MODAL*/
-.modal-dialog{
+.modal-dialog {
   margin-top: 60px !important;
 }
-.modal{
+
+.modal {
   z-index: 11000000 !important;
   background: rgba(27, 62, 111, 0.10) !important;
 }
-.modal-content{
+
+.modal-content {
   border-radius: 2px !important;
   border: 0 !important;
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .10);;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
+  ;
 }
-.modal-title{
+
+.modal-title {
   font-size: 14px !important;
 }
-.modal-body{
+
+.modal-body {
   padding: 1.5rem 1.5rem 1rem !important;
 }
-.modal-body p{
+
+.modal-body p {
   font-size: 14px;
 }
-.modal-body p span{
+
+.modal-body p span {
   color: #FF6469;
 }
-.modal-header{
+
+.modal-header {
   border-bottom-color: #ECEDF2 !important;
   padding: .7rem 1.5rem !important;
 }
-.modal-footer{
+
+.modal-footer {
   border-top: 0 !important;
 }
-.modal-footer .btn{
+
+.modal-footer .btn {
   padding: 8px 15px;
   font-weight: bold;
   font-size: 12px;
   border: 0 !important;
 }
-.modal-footer .btn-primary{
+
+.modal-footer .btn-primary {
   background-color: #1B3E6F !important;
 }
+
 .modal-footer .btn-secondary,
-.modal-footer .btn-secondary:hover{
+.modal-footer .btn-secondary:hover {
   background-color: transparent;
   color: #1273EB;
   opacity: .8;
 }
-.modal-footer .btn-secondary:hover{
+
+.modal-footer .btn-secondary:hover {
   opacity: 1;
 }
-.modal-footer .btn-secondary:active{
+
+.modal-footer .btn-secondary:active {
   background-color: #E7F1FC !important;
   color: #1B3E6F !important;
 }
-.action-button span{
+
+.action-button span {
   width: 100%;
   display: inline-block;
   margin-top: 5px;
 }
-.creat-action-container hr{
+
+.creat-action-container hr {
   margin: 0 46px;
   padding-bottom: 18px;
 }
-.btn-link:hover, .btn-link:focus{
+
+.btn-link:hover,
+.btn-link:focus {
   text-decoration: none !important;
 }
-.btn-link::before{
+
+.btn-link::before {
   content: "\f107";
-  font-family:'FontAwesome';
+  font-family: 'FontAwesome';
   position: relative;
   margin-right: 20px;
 }
-.btn-link.collapsed::before{
+
+.btn-link.collapsed::before {
   content: "\f105";
-  font-family:'FontAwesome';
+  font-family: 'FontAwesome';
   position: relative;
   margin-right: 25px;
 }
-.btn-link i{
+
+.btn-link i {
   margin-right: 10px;
 }
-.ngx-file-drop__content{
+
+.ngx-file-drop__content {
   background: #F4F9FE;
   padding: 20px;
   height: auto !important;
   display: inline-block !important;
   width: 100%;
 }
-.ngx-file-drop__drop-zone{
+
+.ngx-file-drop__drop-zone {
   border: 1px dashed #D7E7F9 !important;
   border-radius: 0px !important;
   height: auto !important;
 }
-.folder-upload{
+
+.folder-upload {
   width: 100%;
   margin: 15px auto 18px;
   display: inline-block;
   text-align: center;
 }
-.btn-group-sm>.btn, .btn-sm{
+
+.btn-group-sm>.btn,
+.btn-sm {
   font-size: 12px;
 }
-.create-title{
+
+.create-title {
   margin-bottom: 15px;
   font-size: 14px;
   font-weight: bold;
 }
-.folder-upload-text{
+
+.folder-upload-text {
   margin-top: 10px;
   width: 100%;
   display: inline-block;
   text-align: center;
-  color:#242424 ;
+  color: #242424;
   font-size: 14px;
 }
-.folder-upload-text button{
+
+.folder-upload-text button {
   margin-left: 10px;
   font-size: 12px;
 }
-.folder-upload-type{
-  color:#A4B2C6 ;
+
+.folder-upload-type {
+  color: #A4B2C6;
   font-size: 10px;
   font-weight: bold;
   width: 100%;
   display: inline-block;
   text-align: center;
 }
-.upload-table{
+
+.upload-table {
   margin: 15px 0 0;
 }
-.upload-table tr{
-  border: dashed 1px #D7E7F9; 
+
+.upload-table tr {
+  border: dashed 1px #D7E7F9;
 }
-.upload-table tr th{
+
+.upload-table tr th {
   border-bottom: solid 1px #F4F9FE !important;
 }
-.upload-table .table thead th{
+
+.upload-table .table thead th {
   padding: 6px 9px;
   border-top: 0px !important;
   font-weight: normal;
   font-size: 13px;
 }
-.upload-table tr:last-child th{
+
+.upload-table tr:last-child th {
   border-bottom: 0 !important;
 }
-.upload-table .table{
+
+.upload-table .table {
   margin-bottom: 0px !important;
 }
-.nav-tabs .nav-link{
+
+.nav-tabs .nav-link {
   position: relative;
 }
-.nav-tabs .nav-link.tab-done{
+
+.nav-tabs .nav-link.tab-done {
   padding-left: 40px !important;
 }
-.nav-tabs .nav-link.tab-done::after{
+
+.nav-tabs .nav-link.tab-done::after {
   content: "\f058";
   position: absolute;
   font-family: 'FontAwesome';
@@ -2137,21 +2485,24 @@ hr{
   top: 11px;
   color: #66BB00;
 }
-.authentication-container-all{
+
+.authentication-container-all {
   background: #F4F9FE;
-  border:1px solid #D0DFF1 ;
+  border: 1px solid #D0DFF1;
   flex: 1;
   width: 100%;
 }
-.authentication-header{
+
+.authentication-header {
   width: 100%;
   background: #fff;
   font-size: 12px;
   color: #C3CDDB;
   font-weight: bold;
-  padding: 10px 20px ;
+  padding: 10px 20px;
 }
-.authentication-search{
+
+.authentication-search {
   width: 100%;
   background: #fff;
   font-size: 12px;
@@ -2159,14 +2510,16 @@ hr{
   font-weight: bold;
   position: relative;
 }
-.authentication-search::after{
+
+.authentication-search::after {
   content: "\f002";
-    font-family: 'FontAwesome';
-    position: absolute;
-    left: 20px;
-    top: 11px;
+  font-family: 'FontAwesome';
+  position: absolute;
+  left: 20px;
+  top: 11px;
 }
-.authentication-search input{
+
+.authentication-search input {
   width: 100%;
   background: #fff;
   font-size: 12px;
@@ -2176,29 +2529,34 @@ hr{
   border: 0px;
   border-top: 1px solid #D7E7F9;
 }
-.authentication-search input::placeholder{
+
+.authentication-search input::placeholder {
   color: #D0D7E4;
   font-size: 10px;
-  font-weight:100;
+  font-weight: 100;
 }
-.authentication-accordion{
-  width: 100%; 
+
+.authentication-accordion {
+  width: 100%;
   padding: 20px;
   max-height: 300px;
   overflow: auto;
 }
-.authentication-accordion .card{
+
+.authentication-accordion .card {
   border-radius: 0px !important;
   margin-bottom: 10px !important;
 }
-.authentication-accordion .card-header{
+
+.authentication-accordion .card-header {
   padding: 0px !important;
   background: #fff !important;
   border-radius: 0px !important;
   font-size: 18px;
   font-weight: bold;
 }
-.authentication-accordion .card-header .btn-link{
+
+.authentication-accordion .card-header .btn-link {
   color: #1B3E6F;
   width: 100%;
   text-align: left;
@@ -2206,35 +2564,43 @@ hr{
   font-size: 13px;
   font-weight: bold;
 }
-.authentication-accordion .custom-control{
+
+.authentication-accordion .custom-control {
   display: inline-block;
 }
-.authentication-accordion .btn-link::before{
+
+.authentication-accordion .btn-link::before {
   margin-right: 10px;
 }
-.authentication-accordion .btn-link.collapsed::before{
+
+.authentication-accordion .btn-link.collapsed::before {
   margin-right: 14px;
 }
-.template-mapping-accordion{
+
+.template-mapping-accordion {
   width: 100%;
 }
-.card{
+
+.card {
   border-radius: 2px;
   border: 0;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
   border: 0px !important;
 }
-.card-header{
+
+.card-header {
   padding: 0px 25px !important;
   background: #F4F9FE !important;
   border-radius: 0px !important;
   border-bottom: 1px solid #ECEDF2 !important;
 }
-.template-mapping-accordion .card-body{
+
+.template-mapping-accordion .card-body {
   padding: 20px 26px 0 !important;
   font-size: 14px;
 }
-.card-header .btn-link{
+
+.card-header .btn-link {
   color: #1B3E6F;
   width: 100%;
   text-align: left;
@@ -2242,33 +2608,41 @@ hr{
   font-size: 13px;
   font-weight: bold;
 }
-.accordion .card{
+
+.accordion .card {
   margin-bottom: 0px !important;
   border-top: 1px solid #ECEDF2 !important;
 }
-.template-mapping-accordion .card{
+
+.template-mapping-accordion .card {
   margin-bottom: 25px !important;
 }
-.custom-control{
+
+.custom-control {
   display: inline-block;
 }
-.btn-link::before{
+
+.btn-link::before {
   margin-right: 10px;
 }
-.btn-link.collapsed::before{
+
+.btn-link.collapsed::before {
   margin-right: 14px;
 }
-.drap-drop-action{
+
+.drap-drop-action {
   padding: 12px 20px 9px 20px;
   color: #C3CDDB;
-  cursor:move;
+  cursor: move;
   font-size: 15px;
 }
+
 .modal-title {
   font-size: 13px;
   font-weight: bold;
 }
-.select-type{
+
+.select-type {
   background: #F4F9FE;
   border: 1px solid #D7E7F9;
   padding: 10px;
@@ -2278,16 +2652,20 @@ hr{
   width: 100%;
   position: relative;
 }
-.select-type:hover, .select-type.active{
+
+.select-type:hover,
+.select-type.active {
   background: #1B3E6F;
   border: 1px solid #D7E7F9;
-  color: #fff; 
+  color: #fff;
   text-decoration: none;
 }
-.select-type-icon{
+
+.select-type-icon {
   font-size: 35px;
 }
-.select-type::before{
+
+.select-type::before {
   content: '';
   border: 1px solid #1273EB;
   width: 18px;
@@ -2297,10 +2675,13 @@ hr{
   left: 10px;
   position: absolute;
 }
-.select-type:hover::before, .select-type.active::before{
+
+.select-type:hover::before,
+.select-type.active::before {
   border: 1px solid #fff;
 }
-.select-type.active::after{
+
+.select-type.active::after {
   content: '';
   background: #fff;
   width: 12px;
@@ -2311,90 +2692,105 @@ hr{
   position: absolute;
   top: 13px;
 }
-.ace-tomorrow-night-bright .ace_print-margin{
+
+.ace-tomorrow-night-bright .ace_print-margin {
   left: 100% !important;
   background: #eee !important;
 }
-.ace_content{
+
+.ace_content {
   width: 100%;
 }
+
 .ace_line,
-.ace-eclipse .ace_print-margin{
+.ace-eclipse .ace_print-margin {
   background: #fff;
 }
-.ace_editor{
+
+.ace_editor {
   height: 55vh !important;
   line-height: 25px;
   border: 1px solid #ECEDF2;
   background-color: #fff;
   color: #1B3E6F;
 }
+
 .ace-tomorrow-night-bright .ace_gutter,
-.ace-eclipse .ace_gutter{
+.ace-eclipse .ace_gutter {
   background: #E0E8F2 !important;
   border-right: 0px !important;
   color: #1B3E6F !important;
 }
+
 .ace-tomorrow-night-bright .ace_gutter-active-line,
-.ace-eclipse .ace_gutter-active-line{
+.ace-eclipse .ace_gutter-active-line {
   background-color: #265699;
   color: #fff;
 }
-.ace-tomorrow-night-bright .ace_cursor{
+
+.ace-tomorrow-night-bright .ace_cursor {
   color: #265699;
 }
+
 .ace-tomorrow-night-bright .ace_marker-layer .ace_active-line {
   background: #eee;
 }
-.breadcrumb-header{
+
+.breadcrumb-header {
   padding: 0px;
   margin: 0px;
 }
-.breadcrumb-header li{
+
+.breadcrumb-header li {
   list-style: none;
   display: inline-block;
   font-size: 12px;
 }
 
-.breadcrumb-header li:last-child::after{
+.breadcrumb-header li:last-child::after {
   display: none;
 }
 
-.breadcrumb-header li:last-child{
-/* background: #F4F9FE; */
-border-radius: 50px;
-color: #C3CDDB;
-padding: 0 10px 0 0;
+.breadcrumb-header li:last-child {
+  /* background: #F4F9FE; */
+  border-radius: 50px;
+  color: #C3CDDB;
+  padding: 0 10px 0 0;
 }
-.breadcrumb-header li:first-child, 
-.breadcrumb-header li:first-child a{
+
+.breadcrumb-header li:first-child,
+.breadcrumb-header li:first-child a {
   font-size: 16px;
   font-weight: bold;
-  padding: 0px; 
+  padding: 0px;
   color: #1B3E6F !important;
   border-radius: 0px;
   background: transparent;
 }
-.create-template-import{
+
+.create-template-import {
   width: 100%;
-  margin: 30px 0px 10px ;
+  margin: 30px 0px 10px;
 }
 
-.create-template-import a:hover{
+.create-template-import a:hover {
   text-decoration: none;
 }
-.mapping-source-load{
+
+.mapping-source-load {
   color: #1B3E6F;
   font-size: 10px;
   font-weight: bold;
   display: inline-table;
   margin-top: 20px;
   margin-bottom: 10px;
-  margin:15px 30px 20px;
+  margin: 15px 30px 20px;
 }
-.mapping-source-load:hover{
+
+.mapping-source-load:hover {
   text-decoration: none;
 }
+
 .mapping-source-load i {
   color: #1B3E6F;
   font-size: 36px;
@@ -2406,17 +2802,25 @@ padding: 0 10px 0 0;
   line-height: 52px;
   margin-bottom: 20px;
 }
-.mapping-source-load:hover i{
+
+.mapping-source-load:hover i {
   background: #F4F9FE;
 }
-.mapping-source-load:hover span{
+
+.hover-enable:hover span {
   color: #1273EB;
 }
-.source-load-note{
-  color:#C3CDDB ;
+
+.hover-disable span {
+  color: gray;
+}
+
+.source-load-note {
+  color: #C3CDDB;
   font-size: 8px;
 }
-.template-mapping-list{
+
+.template-mapping-list {
   background: #F4F9FE;
   border: 1px solid #E9F3FF;
   padding: 5px 10px;
@@ -2426,18 +2830,21 @@ padding: 0 10px 0 0;
   margin-bottom: 20px;
   color: #1B3E6F;
 }
-.template-mapping-list:hover, .template-mapping-list.active {
-  background: #1B3E6F; 
+
+.template-mapping-list:hover,
+.template-mapping-list.active {
+  background: #1B3E6F;
   text-decoration: none;
   color: #fff !important;
   border-radius: 4px;
-  
+
 }
-.template-mapping-list:hover{
+
+.template-mapping-list:hover {
   opacity: .9;
 }
 
-.template-mapping-list span{
+.template-mapping-list span {
   background: #fff;
   color: #2A81ED;
   font-size: 8px;
@@ -2447,27 +2854,32 @@ padding: 0 10px 0 0;
   margin-left: 5px;
 
 }
-.max-height-list{
+
+.max-height-list {
   max-height: 232px;
   padding-bottom: 5px !important;
   overflow: auto;
 }
-.create-template-mapping-button{
-background: #C3CDDB;
-border-radius: 50px;
-font-size: 12px;
-padding: 10px 20px;
-margin-bottom: 20px;
-    display: inline-block;
-    cursor: pointer;
-}
-.create-template-mapping-button i{
-margin-right: 5px;
-  }
-.view-package-container{
+
+.create-template-mapping-button {
+  background: #C3CDDB;
+  border-radius: 50px;
+  font-size: 12px;
+  padding: 10px 20px;
+  margin-bottom: 20px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.create-template-mapping-button i {
+  margin-right: 5px;
+}
+
+.view-package-container {
   padding: 20px 56px;
 }
-.package-type-icon{
+
+.package-type-icon {
   color: #1B3E6F;
   background: #C1CDDD;
   width: 48px;
@@ -2479,91 +2891,113 @@ margin-right: 5px;
   font-size: 20px;
   /* margin-right: 20px; */
 }
-.defintionsNote{
+
+.defintionsNote {
   padding-left: 0;
 }
-.defintionsNote li{
+
+.defintionsNote li {
   line-height: 24px;
   list-style: none;
   font-size: 13px;
 }
-.package-name-container{
+
+.package-name-container {
   width: calc(100% - 60px);
   display: inline-block;
 }
-.package-name{
+
+.package-name {
   font-size: 16px;
   color: #1B3E6F;
   font-weight: bold;
   margin-top: 3px;
 }
-.package-name span{
+
+.package-name span {
   font-size: 11px;
 }
-.package-name i{
+
+.package-name i {
   font-size: 12px;
   color: #C3CDDB;
   margin-left: 5px;
 }
-.deply-status-icon{
+
+.deply-status-icon {
   margin-left: 6px;
   width: 1.6%;
   vertical-align: baseline;
 }
-.package-description{
+
+.package-description {
   color: #D0D7E4;
   font-size: 12px;
   font-weight: normal;
 }
-.package-auth-info{
+
+.package-auth-info {
   font-size: 11px;
 }
-.package-auth-info p{
+
+.package-auth-info p {
   margin-bottom: 5px;
 }
-.package-auth-info div{
+
+.package-auth-info div {
   padding-left: 25px;
   border-right: solid 1px #F4F9FE;
 }
-.package-auth-info div:first-child{
+
+.package-auth-info div:first-child {
   padding-left: 15px;
 }
-.package-auth-info .col-4:first-child{
+
+.package-auth-info .col-4:first-child {
   padding-left: 15px;
 }
-.package-auth-info div:last-child{
+
+.package-auth-info div:last-child {
   border-right: 0;
 }
-.package-auth-info .package-contributers{
+
+.package-auth-info .package-contributers {
   margin-bottom: 0 !important;
 }
-.package-auth-info .package-contributers button img{
+
+.package-auth-info .package-contributers button img {
   width: 20px;
   height: 20px;
 }
-.template-mapping-action{
+
+.template-mapping-action {
   width: 100%;
   text-align: center;
   margin-bottom: 30px;
 }
-.template-mapping-action button{
+
+.template-mapping-action button {
   border-radius: 50px;
   padding: 6px 20px;
   font-size: 14px;
 }
-.template-mapping-action .btn-primary{
-  background:#5DBDBA !important ;
-  border-color:#5DBDBA !important ;
-  color: #fff !important ;
+
+.template-mapping-action .btn-primary {
+  background: #5DBDBA !important;
+  border-color: #5DBDBA !important;
+  color: #fff !important;
 }
-.template-mapping-action .btn-outline-secondary{
-  background:#fff !important ;
-  border-color:#ECEDF2 !important ;
-  color: #C3CDDB !important ;
+
+.template-mapping-action .btn-outline-secondary {
+  background: #fff !important;
+  border-color: #ECEDF2 !important;
+  color: #C3CDDB !important;
 }
-.table-container{
+
+.table-container {
   width: 100%;
 }
+
 /*
    server-side-angular-way.component.css
 */
@@ -2577,75 +3011,88 @@ margin-right: 5px;
 .dataTables_empty {
   display: none;
 }
+
 .dataTables_length,
-.dataTables_filter{
+.dataTables_filter {
   margin-bottom: 6px;
   color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
 }
 
-.dataTables_filter input{
+.dataTables_filter input {
   color: #1B3E6F;
   background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
   padding: 4px 9px 4px 24px;
   border: solid 1px #ECEDF2;
   border-radius: 4px;
 }
-.dataTables_filter input:focus{
+
+.dataTables_filter input:focus {
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
+
 #mapping-table th,
-#mapping-table td{
+#mapping-table td {
   width: auto !important;
   padding: 7px 20px 7px 0;
   border-bottom: solid 1px #ECEDF2;
   font-size: 13px;
 }
+
 #mapping-table th:first-child,
-#mapping-table td:first-child{
+#mapping-table td:first-child {
   padding-left: 20px;
 }
-#mapping-table tbody tr:hover{
+
+#mapping-table tbody tr:hover {
   background-color: #F4F9FE;
 }
-#mapping-table th{
+
+#mapping-table th {
   padding-top: 10px;
   padding-bottom: 10px;
   background: #F4F9FE;
 }
-#mapping-table td{
+
+#mapping-table td {
   border-top: 0;
 }
-table.dataTable.no-footer{
+
+table.dataTable.no-footer {
   margin-bottom: 9px;
   border-bottom: solid 1px #ECEDF2 !important;
 }
-.dataTables_info{
+
+.dataTables_info {
   padding-top: 12px;
   color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
 }
+
 .dataTables_wrapper .dataTables_paginate,
 .dataTables_wrapper .dataTables_paginate a.paginate_button,
 .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
-.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
   margin-bottom: 3px;
   color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
   border: 0 !important;
 }
-.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
+
+.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
   border: 0;
   color: #1B3E6F !important;
   background: none !important;
 }
-.dataTables_wrapper .dataTables_paginate a.paginate_button{
+
+.dataTables_wrapper .dataTables_paginate a.paginate_button {
   padding: 0.4em .9em !important;
 }
-.dataTables_wrapper .dataTables_paginate a.paginate_button.current{
+
+.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
   color: #1B3E6F !important;
   background: #F4F9FE !important;
   border: solid 1px #EEF4F9 !important;
@@ -2653,85 +3100,63 @@ table.dataTable.no-footer{
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
   outline: 0;
 }
-.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
+
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
   opacity: .6;
 }
-.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
+
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
   cursor: default;
   background: none !important;
   border: 0 !important;
 }
+
 #mapping-table .form-control,
-#mapping-table .custom-select{
+#mapping-table .custom-select {
   padding: 10px 6px;
   border-color: #EEF4F9;
   font-size: 14px;
   line-height: 12px;
   color: #1B3E6F;
 }
-#mapping-table .form-control{
-  box-shadow: 0 2px 4px rgba(47,83,151,0.1);
+
+#mapping-table .form-control {
+  box-shadow: 0 2px 4px rgba(47, 83, 151, 0.1);
 }
+
 #mapping-table tbody tr:hover .form-control:focus,
-#mapping-table tbody tr:hover .custom-select{
+#mapping-table tbody tr:hover .custom-select {
   background-color: #fff !important;
 }
-#mapping-table .custom-select{
+
+#mapping-table .custom-select {
   background-color: #F4F9FE;
   color: #1B3E6F;
 }
-#mapping-table .form-control:disabled{
+
+#mapping-table .form-control:disabled {
   padding-left: 0;
   box-shadow: none;
   border: 0;
   background: transparent;
   color: #1B3E6F;
 }
+
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
-  .page-title{
+  .page-title {
     padding: 18px;
   }
 }
 
 /* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) and (max-width: 767.98px) {
-
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 /* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) and (max-width: 991.98px) {
-
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 /* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199.98px) {
-
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 /* Extra large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {
-
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+@media (min-width: 1200px) {}
\ No newline at end of file