Support additional operands for node filters

Issue-ID: SDC-4395
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: I66b172d100ffd2757de88bc7640761f31fd20c28

12 files changed, 466 insertions, 14 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 58303a9319..c4a3893423 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -44,7 +44,7 @@
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
     <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || (property.isToscaFunction() && !property.isChildOfListOrMap) || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
         <div class="table-cell">
-            <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="(property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == '' || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
+            <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="hideCheckBox === false && (property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == '' || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
                 [value]="(property.isDeclared || property.isToscaFunction()) ? property.value : property.valueObj"
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index b632dddf6f..82c5af4ada 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -55,6 +55,7 @@ export class DynamicPropertyComponent {
     @Input() hasChildren: boolean;
     @Input() hasDeclareOption:boolean;
     @Input() disablePropertyValue: boolean;
+    @Input() hideCheckBox: boolean;
     @Input() rootProperty: PropertyFEModel;
 
     @Output('propertyChanged') emitter: EventEmitter<void> = new EventEmitter<void>();
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
index 50ea60e4ea..9a63dff739 100644
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts
@@ -33,7 +33,8 @@ import {ConstraintOperatorType, FilterConstraintHelper} from "../../../../utils/
 
 export enum SourceType {
     STATIC = 'static',
-    TOSCA_FUNCTION = 'tosca_function'
+    TOSCA_FUNCTION = 'tosca_function',
+    TOSCA_FUNCTION_LIST = 'tosca_function_list'
 }
 
 class I18nTexts {
@@ -125,7 +126,12 @@ export class ServiceDependenciesComponent implements OnInit, OnChanges {
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_THAN), value: ConstraintOperatorType.LESS_THAN},
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.EQUAL), value: ConstraintOperatorType.EQUAL},
             {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.GREATER_OR_EQUAL), value: ConstraintOperatorType.GREATER_OR_EQUAL},
-            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL}
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LESS_OR_EQUAL), value: ConstraintOperatorType.LESS_OR_EQUAL},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.LENGTH), value: ConstraintOperatorType.LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.IN_RANGE), value: ConstraintOperatorType.IN_RANGE},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MIN_LENGTH), value: ConstraintOperatorType.MIN_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.MAX_LENGTH), value: ConstraintOperatorType.MAX_LENGTH},
+            {label: FilterConstraintHelper.convertToSymbol(ConstraintOperatorType.PATTERN), value: ConstraintOperatorType.PATTERN}
         ];
         this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId)
         .subscribe((result: ComponentGenericResponse) => {
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 50c77d3f53..2cf3c79e11 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -22,13 +22,15 @@
 
 import * as _ from "lodash";
 import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core'
-import {ValidationConfiguration, PropertyFEModel} from "app/models";
+import {ValidationConfiguration} from "app/models";
 import {IUiElementChangeEvent} from "../form-components/ui-element-base.component";
 import {UiElementInputComponent} from "../form-components/input/ui-element-input.component";
 import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component";
 import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component";
 import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component";
 import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../utils/constants";
+import {UiElementValidValuesInputComponent} from "../form-components/valid-values-input/ui-element-valid-values-input.component";
+import {UiElementRangeInputComponent} from "../form-components/range-input/ui-element-range-input.component";
 
 enum DynamicElementComponentCreatorIdentifier {
     STRING,
@@ -39,7 +41,9 @@ enum DynamicElementComponentCreatorIdentifier {
     ENUM,
     LIST,
     DEFAULT,
-    TIMESTAMP
+    TIMESTAMP,
+    RANGE,
+    VALID_VALUES
 }
 
 @Component({
@@ -51,13 +55,16 @@ enum DynamicElementComponentCreatorIdentifier {
         UiElementInputComponent,
         UiElementDropDownComponent,
         UiElementPopoverInputComponent,
-        UiElementIntegerInputComponent
+        UiElementIntegerInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent
     ]
 })
 export class DynamicElementComponent {
 
     @ViewChild('target', { read: ViewContainerRef }) target: any;
     @Input() type: any;
+    @Input() operator: any;
     @Input() childType: any;
     @Input() name: string;
     @Input() testId: string;
@@ -92,28 +99,37 @@ export class DynamicElementComponent {
         // Factory to create component based on type or other property attributes.
         const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
         switch(true) {
-            case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1:
+            case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1 && this.operator != 'valid_values':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.SUBNETPOOLID;
                 break;
             case this.getValidValues() !== undefined && this.getValidValues() !== null:
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.ENUM;
                 break;
-            case this.type === 'integer':
+            case this.operator === 'length' || this.operator === 'min_length' || this.operator === 'max_length':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER;
                 break;
-            case this.type === 'float':
+            case this.type === 'integer' && this.operator != 'valid_values' && this.operator != 'in_range':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER;
+                break;
+            case this.type === 'float' && this.operator != 'valid_values' && this.operator != 'in_range':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.FLOAT;
                 break;
-            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1:
-            case this.type === 'string':
+            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1 && this.operator != 'valid_values' && this.operator != 'in_range':
+            case this.type === 'string' && this.operator != 'valid_values' && this.operator != 'in_range' && this.operator != 'length' && this.operator != 'min_length' && this.operator != 'max_length':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.STRING;
                 break;
-            case this.type === PROPERTY_TYPES.TIMESTAMP:
+            case this.type === PROPERTY_TYPES.TIMESTAMP && this.operator != 'valid_values' && this.operator != 'in_range':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.TIMESTAMP;
                 break;
-            case this.type === 'boolean':
+            case this.type === 'boolean' && this.operator != 'valid_values':
                 this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN;
                 break;
+            case this.type === 'range' || this.operator === 'in_range':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE;
+                break;
+            case this.operator === 'valid_values':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES;
+                break;
           case this.type === 'map':
                 this.createElementCreatorIdentifierForChild();
                 break;
@@ -156,6 +172,12 @@ export class DynamicElementComponent {
         case 'boolean':
           this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN;
           break;
+        case 'range':
+          this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.RANGE;
+          break;
+          case 'valid-values':
+              this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.VALID_VALUES;
+              break;
         default:
           this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.DEFAULT;
       }
@@ -201,6 +223,15 @@ export class DynamicElementComponent {
                     this.createComponent(UiElementInputComponent);
                     break;
 
+                case DynamicElementComponentCreatorIdentifier.RANGE:
+                    this.createComponent(UiElementRangeInputComponent);
+                    break;
+
+                case DynamicElementComponentCreatorIdentifier.VALID_VALUES:
+                    this.createComponent(UiElementValidValuesInputComponent);
+                    this.cmpRef.instance.type = this.type;
+                    break;
+
                 case DynamicElementComponentCreatorIdentifier.BOOLEAN:
                     this.createComponent(UiElementDropDownComponent);
 
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index b35d3ae3f4..d7f134b008 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -14,6 +14,8 @@ import { UiElementIntegerInputComponent } from './integer-input/ui-element-integ
 import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
 import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
 import { UiElementBase } from './ui-element-base.component';
+import {UiElementRangeInputComponent} from "./range-input/ui-element-range-input.component";
+import {UiElementValidValuesInputComponent} from "./valid-values-input/ui-element-valid-values-input.component";
 
 @NgModule({
     imports: [
@@ -29,12 +31,16 @@ import { UiElementBase } from './ui-element-base.component';
         UiElementInputComponent,
         UiElementIntegerInputComponent,
         UiElementPopoverInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent,
         UiElementBase,
         RadioButtonComponent],
 
     exports: [UiElementDropDownComponent,
         UiElementInputComponent,
         UiElementIntegerInputComponent,
+        UiElementRangeInputComponent,
+        UiElementValidValuesInputComponent,
         UiElementPopoverInputComponent,
         RadioButtonComponent,
         TooltipModule,
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
index d5ef08b126..4ab0a689a8 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -17,7 +17,7 @@
 <input
     class="value-input"
     [ngClass]="{'error': control.invalid, 'disabled':readonly}"
-    type="text"
+    type="{{type === 'integer' ? 'number' : 'text' }}"
     [name]="name"
     [(ngModel)]="value"
     (input)="onChange()"
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html
new file mode 100644
index 0000000000..970492ebf5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html
@@ -0,0 +1,81 @@
+<!--
+*  ============LICENSE_START=======================================================
+*  Copyright (C) 2023 Nordix Foundation.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*       http://www.apache.org/licenses/LICENSE-2.0
+*
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+ -->
+<div class="w-sdc-form-columns-wrapper">
+    <div class="w-sdc-form-column">
+
+            <input *ngIf="isFloatType()"
+                class="value-input"
+                [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+                type="number"
+                step="0.01"
+                [name]="name"
+                [(ngModel)]="lowerBound"
+                [value]="getInRangeValue(0)"
+                (input)="onChangeMin()"
+                [attr.maxlength]="validation.propertyValue.max"
+                [attr.minlength]="validation.propertyValue.min"
+                [formControl]="control"
+                [attr.data-tests-id]="'valueMin-' + testId"
+                />
+        <input *ngIf="isIntegerType()"
+               class="value-input"
+               [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+               type="number"
+               [name]="name"
+               [(ngModel)]="lowerBound"
+               [value]="getInRangeValue(0)"
+               (input)="onChangeMin()"
+               [attr.maxlength]="validation.propertyValue.max"
+               [attr.minlength]="validation.propertyValue.min"
+               [formControl]="control"
+               [attr.data-tests-id]="'valueMin-' + testId"
+        />
+        <input *ngIf="isStringType()"
+               class="value-input"
+               [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+               type="text"
+               [name]="name"
+               [(ngModel)]="lowerBound"
+               [value]="getInRangeValue(0)"
+               (input)="onChangeMin()"
+               [attr.maxlength]="validation.propertyValue.max"
+               [attr.minlength]="validation.propertyValue.min"
+               [formControl]="control"
+               [attr.data-tests-id]="'valueMin-' + testId"
+        />
+    </div>
+    <div class="w-sdc-form-column">
+            <input
+                    class="value-input"
+                    [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+                    [type]="isIntegerType() || isFloatType() ? 'number' : 'text'"
+                    [name]="name"
+                    [(ngModel)]="upperBound"
+                    [value]="getInRangeValue(1)"
+                    (input)="onChangeMax()"
+                    [attr.maxlength]="validation.propertyValue.max"
+                    [attr.minlength]="validation.propertyValue.min"
+
+                    [formControl]="control"
+                    [attr.data-tests-id]="'valueMax-' + testId"
+            />
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less
new file mode 100644
index 0000000000..c393024899
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less
@@ -0,0 +1,37 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-range-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts
new file mode 100644
index 0000000000..65c5bd72e3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts
@@ -0,0 +1,112 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {Component, Input} from '@angular/core';
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+import {PROPERTY_DATA} from "../../../../../utils/constants";
+
+@Component({
+    selector: 'ui-element-range-input',
+    templateUrl: './ui-element-range-input.component.html',
+    styleUrls: ['./ui-element-range-input.component.less'],
+})
+export class UiElementRangeInputComponent extends UiElementBase implements UiElementBaseInterface {
+    @Input() lowerBound: any;
+    @Input() upperBound: any;
+    step: number;
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+        this.value = new Array(2);
+        this.value[0] = this.lowerBound;
+        this.value[1] = this.upperBound;
+    }
+
+    ngOnInit(){
+        this.step = 0;
+        if (this.type === 'float') {
+            this.step = 0.01;
+        }
+        if (this.type === 'integer') {
+            this.step = 0;
+        }
+    }
+
+    isFloatType(): boolean {
+        return this.type === 'float';
+    }
+
+    isIntegerType(): boolean {
+        return this.type === 'integer' || this.type === 'range' || this.type === 'timestamp';
+    }
+
+    isStringType(): boolean {
+        return this.type === 'string' || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1;
+    }
+
+    onChangeMin() {
+        if (!this.value) {
+            this.value = new Array(2);
+        }
+        this.value.splice(0, 1, this.lowerBound);
+        this.baseEmitter.emit({
+            value: this.value ,
+            isValid: this.isValidRange()
+        });
+    }
+
+    onChangeMax() {
+        if (!this.value) {
+            this.value = new Array(2);
+        }
+        this.value.splice(1, 1, this.upperBound);
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: this.isValidRange()
+        });
+    }
+
+    getInRangeValue(valueIndex: number): string {
+        if(!this.value || !this.value[valueIndex]) {
+            return "";
+        }
+        return this.value[valueIndex];
+    }
+
+    isNumber(value: string | number): boolean
+    {
+        return ((value != undefined) &&
+            (value != null) &&
+            (value !== '') &&
+            !isNaN(Number(value.toString())));
+    }
+
+    isValidRange(): boolean
+    {
+        if (this.isStringType()) {
+            return this.getInRangeValue(0) <= this.getInRangeValue(1);
+        }
+        return this.isNumber(this.value[0])
+        && (this.getInRangeValue(1) === "UNBOUNDED"
+                || (this.isNumber(this.value[1])
+                    && this.getInRangeValue(0) <= this.getInRangeValue(1)));
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html
new file mode 100644
index 0000000000..ff4d6d1353
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html
@@ -0,0 +1,39 @@
+<!--
+*  ============LICENSE_START=======================================================
+*  Copyright (C) 2023 Nordix Foundation.
+*  ================================================================================
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*       http://www.apache.org/licenses/LICENSE-2.0
+*
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*
+*  SPDX-License-Identifier: Apache-2.0
+*  ============LICENSE_END=========================================================
+ -->
+
+    <div class="add-btn"
+             (click)="addToList()">Add to List
+    </div>
+    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of value; let valueIndex = index; trackBy:trackByFn">
+        <div class="w-sdc-form-column">
+            <input type="text" class="i-sdc-form-input" *ngIf="showStringField()"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+            <input type="number" class="i-sdc-form-input" *ngIf="showIntegerField()"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+            <input type="number" class="i-sdc-form-input" step="0.01" *ngIf="type == 'float'"
+                   [value]="val"
+                   (input)="onChangeConstrainValueIndex($event.target.value, valueIndex)"/>
+        </div>
+        <div class="w-sdc-form-column">
+            <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span>
+        </div>
+    </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less
new file mode 100644
index 0000000000..c393024899
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less
@@ -0,0 +1,37 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+@import '../../../../../../assets/styles/variables';
+
+/deep/ ui-element-range-input {
+
+    input {
+        text-indent: 6px;
+        border: solid 1px @main_color_o;
+    }
+
+    .error {
+        border: solid 1px @func_color_q;
+        color: @func_color_q;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts
new file mode 100644
index 0000000000..079fdeba1c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts
@@ -0,0 +1,102 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+import {Component, Output, EventEmitter} from '@angular/core';
+import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
+import {ConstraintTypes} from "../../../../pages/properties-assignment/constraints/constraints.component";
+import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../utils/constants";
+
+@Component({
+    selector: 'ui-element-valid-values-input',
+    templateUrl: './ui-element-valid-values-input.component.html',
+    styleUrls: ['./ui-element-valid-values-input.component.less'],
+})
+export class UiElementValidValuesInputComponent extends UiElementBase implements UiElementBaseInterface {
+    @Output() onConstraintChange: EventEmitter<any> = new EventEmitter<any>();
+    constructor() {
+        super();
+        this.pattern = this.validation.validationPatterns.comment;
+    }
+
+    showStringField(): boolean {
+        return this.type === PROPERTY_TYPES.STRING || PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1;
+    }
+
+    showIntegerField(): boolean {
+        return this.type === PROPERTY_TYPES.INTEGER || this.type === PROPERTY_TYPES.TIMESTAMP;
+    }
+
+    addToList(){
+        if (!this.value) {
+            this.value = new Array();
+        }
+        this.value.push("");
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: false
+        });
+        this.emitOnConstraintChange()
+    }
+
+    onChangeConstrainValueIndex(newValue: any, valueIndex: number) {
+        if(!this.value) {
+            this.value = new Array();
+        }
+        this.value[valueIndex] = newValue;
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: newValue != "" && !this.doesArrayContaintEmptyValues(this.value)
+        });
+        this.emitOnConstraintChange();
+    }
+
+    private emitOnConstraintChange(): void {
+        this.onConstraintChange.emit({
+            valid: this.validateConstraints()
+        });
+    }
+    private validateConstraints(): boolean {
+        if (Array.isArray(this.value)) {
+            return !(this.value.length == 0 || this.doesArrayContaintEmptyValues(this.value));
+        }
+        return this.value && this.type != ConstraintTypes.null
+    }
+
+    removeFromList(valueIndex: number){
+        this.value.splice(valueIndex, 1);
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: !this.doesArrayContaintEmptyValues(this.value)
+        });
+        this.emitOnConstraintChange()
+    }
+
+    trackByFn(index) {
+        return index;
+    }
+
+    private doesArrayContaintEmptyValues(arr) {
+        for(const element of arr) {
+            if(element === "") return true;
+        }
+        return false;
+    }
+}