Add Get Attribute Value with Slide Option

Issue-ID: CCSDK-2780

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I06634ee337d3ef82bce667cd01bba3ce1eeba050

2 files changed, 396 insertions, 51 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index 31d934565..f34058eb6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -201,14 +201,14 @@
                             <div class="col-sm-9">
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline3" name="customRadioInline3"
-                                           class="custom-control-input" (click)="setOutputRequired(true)">
+                                        class="custom-control-input" (click)="setOutputRequired(true)">
                                     <label class="custom-control-label" for="customRadioInline3">True</label>
                                 </div>
                                 <div class="custom-control custom-radio custom-control-inline">
                                     <input type="radio" id="customRadioInline4" name="customRadioInline3"
-                                           class="custom-control-input">
+                                        class="custom-control-input">
                                     <label class="custom-control-label" for="customRadioInline4"
-                                           (click)="setOutputRequired(false)">False</label>
+                                        (click)="setOutputRequired(false)">False</label>
                                 </div>
                             </div>
                         </div>
@@ -255,46 +255,57 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="row mb-4">
-                            <div class="col-6">
-                                <b class="listBoxTitle">1. Choose Function Name</b>
-                                <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
-                                    <input type="text" class="form-control input-search-controller"
-                                        placeholder="Functions">
-                                    <div class="scrollWrapper" *ngFor="let step of steps">
-                                        <a class="list-group-item list-group-item-action active" id="list-home-list"
-                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
-                                                class="icon-resource_resolution mr-1" aria-hidden="true"></i>
-                                            {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs(
+
+
+
+
+                        <section class="carousel" aria-label="Gallery">
+
+                            <ol class="carousel__viewport">
+                                <!--Function-->
+                                <li id="carousel__slide1" tabindex="0" class="carousel__slide">
+                                    <b class="listBoxTitle">1. Choose Function Name</b>
+                                    <div class="list-group addedFunctionsList" id="list-tab" role="tablist">
+                                        <input type="text" class="form-control input-search-controller"
+                                            placeholder="Functions">
+                                        <div class="scrollWrapper" *ngFor="let step of steps">
+                                            <a class="list-group-item list-group-item-action active" id="list-home-list"
+                                                data-toggle="list" href="#list-home" role="tab" aria-controls="home">
+                                                <i class="icon-resource_resolution mr-1" aria-hidden="true"></i>
+                                                {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs(
                                                                     this.designerState.template.workflows[actionName]['steps'][step]['target']
                                                                     )"></i></a>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="col-6">
-                                <b class="listBoxTitle">2. Choose Input Attribute Name</b>
-                                <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
-                                    <input type="text" class="form-control input-search-controller"
-                                        placeholder="Attributes">
-                                    <div class="tab-pane fade show active" id="list-home" role="tabpanel"
-                                        aria-labelledby="list-home-list">
-                                        <div class="scrollWrapper">
-                                            <div *ngIf="suggestedAttributes.length>0" class="btn-group btn-group-toggle"
-                                                 data-toggle="buttons">
-                                                <label class="btn btn-secondary active" 
-                                                    *ngFor="let suggestedAttribute of suggestedAttributes"
-                                                    (click)="addTempOutputAttr(suggestedAttribute)">
-                                                    <input type="radio" name="options" [id]="suggestedAttribute"
-                                                        autocomplete="off" (click)="addTempOutputAttr(suggestedAttribute)">
-                                                    {{suggestedAttribute}}
+                                    <div class="carousel__snapper">
+                                        <a href="#carousel__slide4" class="carousel__prev">Parmeters</a>
+                                        <a href="#carousel__slide2" class="carousel__next">Attributes</a>
+                                    </div>
+                                </li>
+                                <!--Attribute-->
+                                <li id="carousel__slide2" tabindex="0" class="carousel__slide">
+                                    <b class="listBoxTitle">2. Choose Attribute Name</b>
+                                    <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
+                                        <input type="text" class="form-control input-search-controller"
+                                            placeholder="Attributes">
+                                        <div class="tab-pane fade show active" id="list-home" role="tabpanel"
+                                            aria-labelledby="list-home-list">
+                                            <div class="scrollWrapper">
+                                                <div *ngIf="suggestedAttributes.length>0"
+                                                    class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                    <label class="btn btn-secondary active"
+                                                        *ngFor="let suggestedAttribute of suggestedAttributes"
+                                                        (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        <input type="radio" name="options" [id]="suggestedAttribute"
+                                                            autocomplete="off"
+                                                            (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        {{suggestedAttribute}}
+                                                    </label>
 
-                                                    
-                                                </label>
-                                                
-                                            </div>
-                                            <div *ngIf="suggestedAttributes.length == 0">
-                                                <p class="noAttributes">No Attributes Available</p>
-                                                <!--Attribute Details
+                                                </div>
+                                                <div *ngIf="suggestedAttributes.length == 0">
+                                                    <p class="noAttributes">No Attributes Available</p>
+                                                    <!--Attribute Details
                                                 <div class="nav-item dropdown helpMenu">
                                                     <input class="dropdown-toggle" type="text">
                                                     <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
@@ -312,13 +323,94 @@
                                                     </ul>
                                                   </div>
                                                   -->
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!---->
+                                    <div class="carousel__snapper"></div>
+                                    <a href="#carousel__slide1" class="carousel__prev">Functions</a>
+                                    <a href="#carousel__slide3" class="carousel__next">Artifacts</a>
+                                </li>
+                                <!--Artifact-->
+                                <li id="carousel__slide3" tabindex="0" class="carousel__slide">
+                                    <b class="listBoxTitle">3. Choose Artifact Name</b>
+                                    <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
+                                        <input type="text" class="form-control input-search-controller"
+                                            placeholder="Attributes">
+                                        <div class="tab-pane fade show active" id="list-home" role="tabpanel"
+                                            aria-labelledby="list-home-list">
+                                            <div class="scrollWrapper">
+                                                <div *ngIf="suggestedAttributes.length>0"
+                                                    class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                    <label class="btn btn-secondary active"
+                                                        *ngFor="let suggestedAttribute of suggestedAttributes"
+                                                        (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        <input type="radio" name="options" [id]="suggestedAttribute"
+                                                            autocomplete="off"
+                                                            (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        {{suggestedAttribute}}
+                                                    </label>
+
+                                                </div>
+                                                <div *ngIf="suggestedAttributes.length == 0">
+                                                    <p class="noAttributes">No Attributes Available</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="carousel__snapper"></div>
+                                    <a href="#carousel__slide2" class="carousel__prev">Attributes</a>
+                                    <a href="#carousel__slide4" class="carousel__next">Parmeters</a>
+                                </li>
+                                <!--Parameter-->
+                                <li id="carousel__slide4" tabindex="0" class="carousel__slide">
+                                    <b class="listBoxTitle">4. Choose Parameter Name</b>
+                                    <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent">
+                                        <input type="text" class="form-control input-search-controller"
+                                            placeholder="Attributes">
+                                        <div class="tab-pane fade show active" id="list-home" role="tabpanel"
+                                            aria-labelledby="list-home-list">
+                                            <div class="scrollWrapper">
+                                                <div *ngIf="suggestedAttributes.length>0"
+                                                    class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                    <label class="btn btn-secondary active"
+                                                        *ngFor="let suggestedAttribute of suggestedAttributes"
+                                                        (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        <input type="radio" name="options" [id]="suggestedAttribute"
+                                                            autocomplete="off"
+                                                            (click)="addTempOutputAttr(suggestedAttribute)">
+                                                        {{suggestedAttribute}}
+                                                    </label>
+
+                                                </div>
+                                                <div *ngIf="suggestedAttributes.length == 0">
+                                                    <p class="noAttributes">No Attributes Available</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="carousel__snapper"></div>
+                                    <a href="#carousel__slide3" class="carousel__prev">Artifacts</a>
+                                    <a href="#carousel__slide1" class="carousel__next">Functions</a>
+                                </li>
+                            </ol>
+                            <aside class="carousel__navigation">
+                                <ol class="carousel__navigation-list">
+                                    <li class="carousel__navigation-item">
+                                        <a href="#carousel__slide1" class="carousel__navigation-button">Functions</a>
+                                    </li>
+                                    <li class="carousel__navigation-item">
+                                        <a href="#carousel__slide2" class="carousel__navigation-button">Attributes</a>
+                                    </li>
+                                    <li class="carousel__navigation-item">
+                                        <a href="#carousel__slide3" class="carousel__navigation-button">Artifacts</a>
+                                    </li>
+                                    <li class="carousel__navigation-item">
+                                        <a href="#carousel__slide4" class="carousel__navigation-button">Parameters</a>
+                                    </li>
+                                </ol>
+                            </aside>
+                        </section>
                     </div>
                 </div>
             </div>
@@ -401,7 +493,9 @@
                                                     {{suggestedInput}}
                                                 </label>
                                             </div>
-                                            <div *ngIf="suggestedInputs.length == 0">you don't have data</div>
+                                            <div *ngIf="suggestedInputs.length == 0">
+                                                <p class="noAttributes">No Attributes Available</p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -453,7 +547,9 @@
                                                 </label>
 
                                             </div>
-                                            <div *ngIf="suggestedOutputs.length == 0">you don't have data</div>
+                                            <div *ngIf="suggestedOutputs.length == 0">
+                                                <p class="noAttributes">No Attributes Available</p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -561,4 +657,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index fe5f41f41..b076af378 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -1146,6 +1146,9 @@ ul.editor{
 .modal{
   top: 60px;
 }
+.modal-dialog-scrollable{
+  max-height: calc(100% - 20%) !important;
+}
 .modal-backdrop{
   z-index: 0 !important;
   opacity: 0 !important;
@@ -1203,8 +1206,8 @@ ul.editor{
 }
 .addedFunctionsList .scrollWrapper,
 .nestedAttributes .scrollWrapper{
-  height: 150px;
-  max-height: 260px;
+  height: 230px;
+  max-height: 300px;
   overflow-y: auto;
 }
 .addedFunctionsList .input-search-controller,
@@ -1249,8 +1252,8 @@ ul.editor{
 }
 .addedFunctionsList .list-group-item i:last-child{
   float: right;
-  font-size: 15px;
-  line-height: 17px;
+  font-size: 10px;
+  line-height: 20px;
 }
 .nestedAttributes .btn-group{
   display: grid;
@@ -1399,4 +1402,250 @@ ul.editor{
   margin: 12px;
   padding: 8px 12px !important;
   line-height: 14px;
-}
\ No newline at end of file
+}
+.testttt .test0{
+  width: 48%;
+  margin: 0 1%;
+}
+
+
+
+
+
+
+
+@keyframes tonext {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: 100%;
+  }
+  98% {
+    left: 100%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes tostart {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: -300%;
+  }
+  98% {
+    left: -300%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes snap {
+  96% {
+    scroll-snap-align: center;
+  }
+  97% {
+    scroll-snap-align: none;
+  }
+  99% {
+    scroll-snap-align: none;
+  }
+  100% {
+    scroll-snap-align: center;
+  }
+}
+
+
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent; /* thumb and track color */
+  scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+  width: 0;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}
+
+* {
+  -ms-overflow-style: none;
+}
+
+
+.carousel {
+  position: relative;
+  height: 360px;
+  /* padding-top: 75%; */
+  /* filter: drop-shadow(0 0 10px #0003); */
+  /* perspective: 100px; */
+}
+
+.carousel__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  margin-top: 40px;
+  margin-bottom: 0;
+  padding: 0 12px 0 0;
+  overflow-x: scroll;
+  counter-reset: item;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+  position: relative;
+  flex: 0 0 50%;
+  width: 100%;
+  margin-right: 12px;
+  counter-increment: item;
+  list-style: none;
+}
+
+/* 
+.carousel__slide:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-40%,70px);
+  color: #fff;
+  font-size: 2em;
+} */
+
+.carousel__snapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+}
+
+@media (hover: hover) {
+  .carousel__snapper {
+    animation-name: tonext, snap;
+    animation-timing-function: ease;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+  }
+
+  .carousel__slide:last-child .carousel__snapper {
+    animation-name: tostart, snap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__snapper {
+    animation-name: none;
+  }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+  animation-name: none;
+}
+
+.carousel__navigation {
+  position: absolute;
+  right: 0;
+  top: 0;
+  left: 0;
+  text-align: center;
+  
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item{
+  display: inline-block;
+  margin-bottom: 0;
+}
+.carousel__navigation-item{
+  width: 100px;
+  padding: 6px 12px;
+  background-color: #DEE8F3;
+  border-right: solid 1px #C8D6E6;
+  font-size: 11px;
+  font-weight: bold;
+}
+.carousel__navigation-item:first-child{
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.carousel__navigation-item:last-child{
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-right: 0;
+}
+.carousel__navigation-button,
+.carousel__navigation-button:hover{
+  display: inline-block;
+  width: auto;  
+  /* background-clip: content-box; */
+  transition: transform 0.1s;
+  color: #1B3E6F;
+}
+.carousel__navigation-button:hover{
+  text-decoration: none;
+}
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next{
+  position: absolute;
+  top: 0;
+  margin-top: 0;
+  width: 4rem;
+  transform: translateY(0);
+  border-radius: 3px;
+  font-size: 0;
+  outline: 0;
+}
+
+/* .carousel::before,
+.carousel__prev {
+  left: -1rem;
+}
+
+.carousel::after,
+.carousel__next {
+  right: -1rem;
+} */
+
+/* .carousel::before,
+.carousel::after {
+  content: '';
+  z-index: 1;
+  background-color: #333;
+  background-size: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  font-size: 2.5rem;
+  line-height: 4rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.carousel::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+} */