catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-custom-function/tosca-custom-function.component.html

   1 <!--
   2   ~ -
   3   ~  ============LICENSE_START=======================================================
   4   ~  Copyright (C) 2023 Nordix Foundation.
   5   ~  ================================================================================
   6   ~  Licensed under the Apache License, Version 2.0 (the "License");
   7   ~  you may not use this file except in compliance with the License.
   8   ~  You may obtain a copy of the License at
   9   ~
  10   ~       http://www.apache.org/licenses/LICENSE-2.0
  11   ~
  12   ~  Unless required by applicable law or agreed to in writing, software
  13   ~  distributed under the License is distributed on an "AS IS" BASIS,
  14   ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15   ~  See the License for the specific language governing permissions and
  16   ~  limitations under the License.
  17   ~
  18   ~  SPDX-License-Identifier: Apache-2.0
  19   ~  ============LICENSE_END=========================================================
  20   -->
  21
  22 <div class="component-container">
  23   <ng-container [formGroup]="formGroup">
  24     <div *ngIf="!isDefaultCustomFunction" class="i-sdc-form-item">
  25       <label>Custom function name: </label>
  26       <div class="i-sdc-form-item">
  27         <input type="text" formControlName="customName" [value]="name" (input)="name = $event.target.value" required/>
  28       </div>
  29     </div>
  30     <div formArrayName="customParameterList">
  31       <div *ngFor="let parameter of parameters; let idx = index">
  32         <div *ngIf="idx > 0" class="text-center"><span class="custom-plus-icon"></span></div>
  33         <div class="parameter-card">
  34           <div class="card-content">
  35             <ng-container *ngIf="parameter.type === STRING_FUNCTION_TYPE">
  36               <input type="text" [formControlName]="idx" [value]="parameter.value"/><br/>
  37             </ng-container>
  38             <ng-container *ngIf="parameter.type !== STRING_FUNCTION_TYPE">
  39               <tosca-function [property]="propertyInputList[idx]" [customToscaFunctions]="customToscaFunctions" [componentInstanceMap]="componentInstanceMap" [allowClear]="false"
  40                               (onValidityChange)="onFunctionValidityChange($event, idx)">
  41               </tosca-function>
  42             </ng-container>
  43             <div class="buttons-container">
  44               <span class="delete-icon" (click)="removeParameter(idx)"></span>
  45             </div>
  46           </div>
  47         </div>
  48       </div>
  49     </div>
  50   </ng-container>
  51   <div class="buttons-container">
  52     <a class="add-link" (click)="addStringParameter()">String Value</a> <a class="add-link" (click)="addFunction()">TOSCA Function Expression</a>
  53   </div>
  54 </div>