[ACS-6812] Add new chip only when input value is valid

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -25,9 +25,9 @@ import { CardViewItemFloatValidator } from '../../validators/card-view-item-floa
 import { CardViewItemIntValidator } from '../../validators/card-view-item-int.validator';
 import { CardViewIntItemModel } from '../../models/card-view-intitem.model';
 import { CardViewFloatItemModel } from '../../models/card-view-floatitem.model';
-import { MatChipsModule } from '@angular/material/chips';
+import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
-import { SimpleChange } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
 import { HarnessLoader } from '@angular/cdk/testing';
@@ -97,6 +97,10 @@ describe('CardViewTextItemComponent', () => {
         expect(await valueChips[2].getText()).toBe(param3);
     };
 
+    const getErrorElement = (key: string, includeItems = false): DebugElement[] => {
+        return fixture.debugElement.queryAll(By.css(`[data-automation-id="card-textitem-error-${key}"]${includeItems ? ' li' : ''}`));
+    };
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [TranslateModule.forRoot(), CoreTestingModule, MatChipsModule]
@@ -208,7 +212,7 @@ describe('CardViewTextItemComponent', () => {
                 editable: true,
                 multivalued: true
             };
-            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
+            await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
         });
 
         it('should render chips for multivalue integers when chips are enabled', async () => {
@@ -219,7 +223,7 @@ describe('CardViewTextItemComponent', () => {
                 editable: true,
                 multivalued: true
             };
-            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
+            await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
         });
 
         it('should render chips for multivalue decimal numbers when chips are enabled', async () => {
@@ -230,7 +234,39 @@ describe('CardViewTextItemComponent', () => {
                 editable: true,
                 multivalued: true
             };
-            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
+            await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
+        });
+
+        it('should only render new chip when provided value is valid for specified validators set', async () => {
+            const cardViewTextItemObject = {
+                label: 'Text label',
+                value: [1.1, 2.2, 3.3],
+                key: 'textkey',
+                editable: true,
+                multivalued: true,
+                type: 'float'
+            };
+            component.editable = true;
+            await renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
+            const floatValidator: CardViewItemValidator = new CardViewItemFloatValidator();
+            component.property.validators = [floatValidator];
+            const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-editchipinput-textkey"]')).nativeElement;
+            component.addValueToList({ value: 'abcd', chipInput: inputElement } as MatChipInputEvent);
+            fixture.detectChanges();
+
+            let error: HTMLLIElement = getErrorElement('textkey', true)[0].nativeElement;
+            expect(error.innerText).toBe('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+            let valueChips = await loader.getAllHarnesses(MatChipHarness);
+            expect(valueChips.length).toBe(3);
+
+            component.addValueToList({ value: '22.1', chipInput: inputElement } as MatChipInputEvent);
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            error = getErrorElement('textkey', true)[0]?.nativeElement;
+            expect(error).toBe(undefined);
+            valueChips = await loader.getAllHarnesses(MatChipHarness);
+            expect(valueChips.length).toBe(4);
         });
 
         it('should render string for multivalue properties when chips are disabled', async () => {
@@ -697,7 +733,7 @@ describe('CardViewTextItemComponent', () => {
             await fixture.whenStable();
             fixture.detectChanges();
 
-            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
+            const errorElement = getErrorElement('textkey');
             expect(errorElement).toBeNull();
         });
 
@@ -707,7 +743,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-textkey"]'));
-            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
+            const errorElement = getErrorElement('textkey');
 
             expect(inputElement.nativeElement.value).toBe('');
             expect(errorElement).toBeNull();
@@ -727,7 +763,7 @@ describe('CardViewTextItemComponent', () => {
             await fixture.whenStable();
             fixture.detectChanges();
 
-            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
+            const errorElement = getErrorElement('textkey');
             expect(errorElement).toBeNull();
         });
 
@@ -737,8 +773,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
 
             const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-textkey"]'));
-            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
-
+            const errorElement = getErrorElement('textkey');
             expect(inputElement.nativeElement.value).toBe('');
             expect(errorElement).toBeNull();
         });

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -148,17 +148,21 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     }
 
     addValueToList(newListItem: MatChipInputEvent) {
-        const chipInput = newListItem.input;
+        const chipInput = newListItem.chipInput.inputElement;
         const chipValue = newListItem.value.trim() || '';
 
         if (typeof this.editedValue !== 'string') {
-            if (chipValue) {
-                this.editedValue.push(chipValue);
-                this.update();
-            }
+            if (this.property.isValid(chipValue)) {
+                if (chipValue) {
+                    this.editedValue.push(chipValue);
+                    this.update();
+                }
 
-            if (chipInput) {
-                chipInput.value = '';
+                if (chipInput) {
+                    chipInput.value = '';
+                }
+            } else {
+                this.errors = this.property.getValidationErrors(chipValue);
             }
         }
     }

lib/core/src/lib/pipes/decimal-number.pipe.spec.ts

@@ -44,6 +44,10 @@ describe('DecimalNumberPipe', () => {
         expect(pipe.transform(1234.567)).toBe('1,234.57');
     });
 
+    it('should properly transform array of values', () => {
+        expect(pipe.transform([1234.567, 22])).toEqual(['1,234.57', '22']);
+    });
+
     it('should return number with at least the minimum of digints in the integer part', () => {
         const decimalValues = {
             minIntegerDigits: 6,

lib/core/src/lib/pipes/decimal-number.pipe.ts

@@ -74,7 +74,12 @@ export class DecimalNumberPipe implements PipeTransform, OnDestroy {
         const actualLocale = locale || this.defaultLocale;
 
         const decimalPipe: DecimalPipe = new DecimalPipe(actualLocale);
-        return decimalPipe.transform(value, actualDigitsInfo);
+
+        if (value instanceof Array) {
+            return value.map((val) => decimalPipe.transform(val, actualDigitsInfo));
+        } else {
+            return decimalPipe.transform(value, actualDigitsInfo);
+        }
     }
 
     ngOnDestroy(): void {