+ <div class="group-with-border content-row">
+ <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
+ <div class="form-item">
+ <sdc-input
+ label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
+ testId="interface-operation-implementation-name"
+ [(value)]="artifactName"
+ (valueChange)="onURIChange($event)"
+ [disabled]=isViewOnly>
+ </sdc-input>
+ </div>
+ <br>
+ <div class="form-item">
+ <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
+ [(checked)]="enableAddArtifactImplementation"
+ (checkedChange)="onMarkToAddArtifactToImplementation($event)"
+ [disabled]=isViewOnly>
+ </checkbox>
+ </div>
+ <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
+ <br>
+ <sdc-dropdown
+ label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
+ testId="selectToscaArtifactType"
+ [required]="true"
+ [selectedOption]="toscaArtifactTypeSelected"
+ placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
+ (changed)="onSelectToscaArtifactType($event)"
+ [options]="toscaArtifactTypes"
+ [disabled]=isViewOnly>
+ </sdc-dropdown>
+ </div>
+ <div class="form-item" *ngIf="enableAddArtifactImplementation">
+ <sdc-input
+ label="{{ 'ARTIFACT_VERSION' | translate }}"
+ data-tests-id="artifactVersion"
+ [(value)]="artifactVersion"
+ (valueChange)="onArtifactVersionChange($event)"
+ [disabled]=isViewOnly>
+ </sdc-input>
+ </div>
+ <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
+ <br>
+ <input-list
+ *ngIf="artifactTypeProperties && dataTypeMap"
+ [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
+ [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
+ [inputs]="artifactTypeProperties"
+ [dataTypeMap]="dataTypeMap"
+ [isViewOnly]="isViewOnly"
+ [showToscaFunctionOption]="true"
+ [componentInstanceMap]="componentInstanceMap"
+ [allowDeletion]="false"
+ [customToscaFunctions]="customToscaFunctions"
+ (onInputsValidityChange)="implementationPropsValidityChange($event)"
+ (onValueChange)="onArtifactPropertyValueChange($event)"
+ >
+ </input-list>
+ </div>
+ </div>
+ <div class="group-with-border content-row" *ngIf="dataTypeMap">
+ <input-list
+ [title]="'INPUT_LIST_TITLE' | translate"
+ [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
+ [inputs]="inputs"
+ [dataTypeMap]="dataTypeMap"
+ [isViewOnly]="isViewOnly"
+ [allowDeletion]="true"
+ [componentInstanceMap]="componentInstanceMap"
+ [showToscaFunctionOption]="true"
+ (onValueChange)="onInputValueChange($event)"
+ (onInputsValidityChange)="implementationPropsValidityChange($event)"
+ (onDelete)="onInputDelete($event)"
+ >
+ </input-list>
+ </div>
+ <div class="group-with-border content-row">
+ <app-add-input
+ [dataTypeMap]="dataTypeMap$"
+ [isView]="isViewOnly"
+ [existingInputNames]="collectInputNames()"
+ (onAddInput)="onAddInput($event)"
+ >
+ </app-add-input>
+ </div>
+ <div class="group-with-border content-row">
+ <label class="sdc-timeout-label">Timeout : </label>
+ <input class="sdc-timeout" type="number" [formControl]="timeoutValue" oninput="this.value = this.valueAsNumber" [ngClass]="{'disabled':isViewOnly}" (change)="timeoutConversion()"/>
+ <select class="sdc-timeout-select" [formControl]="timeoutType" (change)="timeoutConversion()" [ngClass]="{'disabled':isViewOnly}">
+ <option value="sec">Seconds</option>
+ <option value="hour">Hours</option>
+ <option value="day">Days</option>
+ </select>
+ </div>