catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilityEditor/capabilities-editor.component.html

   1 <div class="capability-editor">
   2     <form class="w-sdc-form">
   3         <div class="i-sdc-form-content-capability-content">
   4             <div class="content-row">
   5                 <div class="i-sdc-form-item">
   6                     <sdc-input
   7                             label="{{ 'CAP_NAME' | translate }}"
   8                             required="true"
   9                             class="i-sdc-form-input"
  10                             testId="capName"
  11                             [disabled]="isReadonly"
  12                             [(value)]="capabilityData.name"
  13                             (valueChange)="validityChanged()">
  14                     </sdc-input>
  15                 </div>
  16             </div>
  17
  18             <div class="group-with-border">
  19                 <div class="content-row i-sdc-form-item">
  20                     <sdc-dropdown
  21                             label="{{ 'CAP_TYPE' | translate }}"
  22                             required="true"
  23                             class="i-sdc-form-select"
  24                             testId="capType"
  25                             [disabled]="isReadonly"
  26                             [options]="capabilityTypesMappedList"
  27                             selectedOption="{{ capabilityData.type }}"
  28                             [placeHolder] = "capabilityData.type"
  29                             (changed)="onSelectCapabilityType($event)">
  30                     </sdc-dropdown>
  31                 </div>
  32                 <div class="content-row i-sdc-form-item">
  33                     <label class="i-sdc-form-label"> {{ 'CAP_DESCRIPTION' | translate }} </label>
  34                     <textarea
  35                             rows="3"
  36                             class="i-sdc-form-input description"
  37                             data-tests-id="capDesc"
  38                             disabled
  39                             value="{{capabilityData.description}}">
  40                     </textarea>
  41                 </div>
  42                 <div class="content-row i-sdc-form-item">
  43                     <label class="i-sdc-form-label valid-source-label"> {{ 'CAP_VALID_SOURCE' | translate }} </label>
  44                     <textarea
  45                             rows="2"
  46                             class="i-sdc-form-input"
  47                             data-tests-id="capValidSrc"
  48                             disabled
  49                             value="{{capabilityData.validSourceTypes}}">
  50                     </textarea>
  51                 </div>
  52             </div>
  53
  54             <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate }} </label>
  55             <div class="content-row occurrences-section">
  56                 <div class="min-occurrences-value">
  57                     <sdc-input
  58                             label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate }}"
  59                             class="i-sdc-form-input"
  60                             testId="capOccurrencesMin"
  61                             [disabled]="isReadonly"
  62                             [(value)]="capabilityData.minOccurrences"
  63                             (valueChange)="validityChanged()"
  64                             type="number">
  65                     </sdc-input>
  66                 </div>
  67                 <div class="sdc-input">
  68                     <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate }} </label>
  69                     <div class="max-occurrences-value">
  70                         <sdc-checkbox
  71                                 class="checkbox-label unbounded-value"
  72                                 testId="capOccurrencesMaxUnbounded"
  73                                 label="{{translatedUnboundTxt.toLowerCase()}}"
  74                                 (checkedChange)="onUnboundedChanged()"
  75                                 [checked]="isUnboundedChecked"
  76                                 [disabled]="isReadonly">
  77                         </sdc-checkbox>
  78
  79                         <sdc-input
  80                                 *ngIf="!isUnboundedChecked"
  81                                 class="i-sdc-form-input"
  82                                 testId="capOccurrencesMax"
  83                                 [disabled]="isReadonly"
  84                                 [(value)]="capabilityData.maxOccurrences"
  85                                 (valueChange)="validityChanged()"
  86                                 type="number">
  87                         </sdc-input>
  88                     </div>
  89                 </div>
  90             </div>
  91         </div>
  92     </form>
  93 </div>