aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
authorfranciscovila <javier.paradela.vila@est.tech>2023-02-15 17:14:59 +0000
committerMichael Morris <michael.morris@est.tech>2023-05-16 15:05:13 +0000
commit8183ade590e367f28e13484201d2c9526be221dc (patch)
tree735d600ec26ed9caea7657f7224a7e5f6f05cb62 /catalog-ui/src/app/ng2/components
parent5768f2e5a056df6b23f7f8a87529d5ca00063c68 (diff)
Support additional operands for node filters
Issue-ID: SDC-4395 Signed-off-by: franciscovila <javier.paradela.vila@est.tech> Change-Id: I66b172d100ffd2757de88bc7640761f31fd20c28
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts1
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts10
-rw-r--r--catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts51
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts6
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.html81
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.less37
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/range-input/ui-element-range-input.component.ts112
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.html39
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.less37
-rw-r--r--catalog-ui/src/app/ng2/components/ui/form-components/valid-values-input/ui-element-valid-values-input.component.ts102
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;
+ }
+}