Add 'Req & Cap' screen for VF/PNF/Service - UI

 Issue-ID: SDC-2142

Change-Id: I23a2de18862e18389f801cbec3e452d7094df8e9
Signed-off-by: miriame <miriam.eini@amdocs.com>

2 files changed, 11 insertions, 3 deletions

diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
index 6ddbd6169a..d59c44d67f 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
@@ -18,7 +18,8 @@
 {{actualText}}
 
 <span class="ellipsis-directive-more-less"
-      data-ng-click="collapsed = !collapsed; toggleText()"
-      data-ng-hide="ellipsis.length <= maxChars">
-  {{collapsed ? "More" : "Less"}}
+      data-ng-click="onMoreLessClick($event)"
+      data-ng-hide="ellipsis.length <= maxChars"
+      data-tests-id="ellipsis-more-less">
+  {{actualText ? (collapsed ? "More" : "Less") : ""}}
 </span>
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
index 60baf3e183..21e074a8b9 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
@@ -23,6 +23,7 @@ export interface IEllipsisScope extends ng.IScope {
     ellipsis:string;
     maxChars:number;
     toggleText():void;
+    onMoreLessClick(event): void;
     collapsed:boolean;
     actualText:string;
 
@@ -50,6 +51,12 @@ export class EllipsisDirective implements ng.IDirective {
 
         scope.collapsed = true;
 
+        scope.onMoreLessClick = (event): void => {
+            event.stopPropagation();
+            scope.collapsed = !scope.collapsed;
+            scope.toggleText();
+        };
+
         scope.toggleText = ():void => {
             if (scope.ellipsis && scope.collapsed) {
                 scope.actualText = scope.ellipsis.substr(0, scope.maxChars);