+
+<!--Action - Add Attribute From Function - Modal-->
+<div class="modal fade" id="exampleModalScrollable3" tabindex="-1" role="dialog"
+ aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-scrollable" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalScrollableTitle3">
+ Add Attributes from Function</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <img src="assets/img/icon-close.svg" />
+ </button>
+ </div>
+ <div class="modal-body createAttributeTabs">
+ <!--Action - Inputs & Outputs Attribute-->
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" id="home-tab" data-toggle="tab" href="#input" role="tab"
+ aria-controls="home" aria-selected="true">Inputs</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="profile-tab" data-toggle="tab" href="#output" role="tab"
+ aria-controls="profile" aria-selected="false">Outputs</a>
+ </li>
+ </ul>
+ <div class="tab-content border-0" id="myTabContent">
+ <!--INPUTS Tab-->
+ <div class="tab-pane fade show active create-form" id="input" role="tabpanel"
+ aria-labelledby="input-tab">
+ <div class="form-group row">
+ <div class="col">
+ <!--<input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">-->
+ <div class="container p-0">
+ <label>Selected Attributes</label>
+ <div *ngFor="let tempInput of tempInputs" class="selectedWrapper">{{tempInput}}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <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">
+ <a [class]="steps.indexOf(step) === 0?
+ 'list-group-item list-group-item-action active':
+ 'list-group-item list-group-item-action'" [id]="step"
+ data-toggle="list" href="#list-home" role="tab" aria-controls="home"
+ *ngFor="let step of steps" >
+
+ <i class="icon-resource_resolution mr-1" aria-hidden="true"
+ (click)="setInputAndOutputs(
+ this.designerState.template.workflows[actionName]['steps'][step]['target']
+ )"
+ ></i>
+ {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
+ this.designerState.template.workflows[actionName]['steps'][step]['target']
+ )"></i></a>
+ </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="suggestedInputs.length>0" class="btn-group btn-group-toggle"
+ data-toggle="buttons">
+ <label class="btn tooltipHTML tooltipGetAtt active"
+ *ngFor="let suggestedInput of suggestedInputs"
+ (click)="addTempInput(suggestedInput)">
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ </span>
+ <input type="radio" name="options" [id]="suggestedInput"
+ autocomplete="off" (click)="addTempInput(suggestedInput)">
+ {{suggestedInput}}
+ <i class="icon-required-star" type="button" aria-hidden="true"></i>
+ </label>
+ </div>
+ <div *ngIf="suggestedInputs.length == 0">
+ <p class="noAttributes">No Attributes Available</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--OUTPUTS Tab-->
+ <div class="tab-pane fade create-form" id="output" role="tabpanel" aria-labelledby="output-tab">
+ <div class="form-group row">
+ <div class="col">
+ <input type="email" class="form-control" id="inputEmail3" placeholder="Attributes">
+ <div class="container p-0">
+ <div *ngFor="let tempOutput of tempOutputs" class="selectedWrapper">{{tempOutput}}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <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]="steps.indexOf(step) === 0?
+ 'list-group-item list-group-item-action active':
+ 'list-group-item list-group-item-action'" [id]="step"
+ *ngFor="let step of steps"
+ 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)="setInputAndOutputs(
+ this.designerState.template.workflows[actionName]['steps'][step]['target']
+ )"></i></a>
+ </div>
+ </div>
+ </div>
+ <div class="col-6">
+ <b class="listBoxTitle">2. Choose output 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="suggestedOutputs.length > 0" class="btn-group btn-group-toggle"
+ data-toggle="buttons">
+ <label class="btn tooltipHTML tooltipGetAtt active"
+ *ngFor="let suggestedOutput of suggestedOutputs">
+ <span class="tooltiptext">
+ <h5>integer</h5>
+ </span>
+ <input type="radio" name="options" [id]="suggestedOutput"
+ autocomplete="off" (dblclick)="addTempOutput(suggestedOutput)">
+ {{suggestedOutput}}
+ <i class="icon-required-star" type="button" aria-hidden="true"></i>
+ </label>
+
+ </div>
+ <div *ngIf="suggestedOutputs.length == 0">
+ <p class="noAttributes">No Attributes Available</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-primary" (click)="submitTempAttributes()">Submit
+ Attributes
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+