selct box can use numbers as value in the card view (#6020)

lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -32,6 +32,7 @@ describe('CardViewSelectItemComponent', () => {
     let overlayContainer: OverlayContainer;
     let appConfig: AppConfigService;
     const mockData = [{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }, { key: 'three', label: 'Three' }];
+    const mockDataNumber = [{ key: 1, label: 'One' }, { key: 2, label: 'Two' }, { key: 3, label: 'Three' }];
     const mockDefaultProps = {
         label: 'Select box label',
         value: 'two',
@@ -39,6 +40,13 @@ describe('CardViewSelectItemComponent', () => {
         key: 'key',
         editable: true
     };
+    const mockDefaultNumbersProps = {
+        label: 'Select box label',
+        value: 2,
+        options$: of(mockDataNumber),
+        key: 'key',
+        editable: true
+    };
 
     setupTestBed({
         imports: [
@@ -108,6 +116,30 @@ describe('CardViewSelectItemComponent', () => {
             expect(component.value).toEqual('one');
         });
 
+        it('should be possible edit selectBox item with numbers', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultNumbersProps,
+                editable: true
+            });
+            component.editable = true;
+            component.displayNoneOption = true;
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            expect(component.value).toEqual(2);
+            expect(component.isEditable()).toBe(true);
+            const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
+            selectBox.triggerEventHandler('click', {});
+
+            fixture.detectChanges();
+            const optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
+            expect(optionsElement.length).toEqual(4);
+            optionsElement[1].dispatchEvent(new Event('click'));
+            fixture.detectChanges();
+
+            expect(component.value).toEqual(1);
+        });
+
         it('should be able to enable None option', () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,

lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts

@@ -30,12 +30,12 @@ import { takeUntil, map } from 'rxjs/operators';
     templateUrl: './card-view-selectitem.component.html',
     styleUrls: ['./card-view-selectitem.component.scss']
 })
-export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string>> implements OnChanges, OnDestroy {
+export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string | number>> implements OnChanges, OnDestroy {
     static HIDE_FILTER_LIMIT = 5;
 
     @Input() editable: boolean = false;
 
-    @Input() options$: Observable<CardViewSelectItemOption<string>[]>;
+    @Input() options$: Observable<CardViewSelectItemOption<string | number>[]>;
 
     @Input()
     displayNoneOption: boolean = true;
@@ -43,7 +43,7 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     @Input()
     displayEmpty: boolean = true;
 
-    value: string;
+    value: string | number;
     filter: string = '';
     showInputFilter: boolean = false;
 
@@ -54,7 +54,7 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     }
 
     ngOnChanges(): void {
-        this.value = this.property.value?.toString();
+        this.value = this.property.value;
     }
 
     ngOnInit() {
@@ -66,14 +66,14 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
     }
 
     onFilterInputChange(value: string) {
-        this.filter = value;
+        this.filter = value.toString();
     }
 
     isEditable(): boolean {
         return this.editable && this.property.editable;
     }
 
-    getOptions(): Observable<CardViewSelectItemOption<string>[]> {
+    getOptions(): Observable<CardViewSelectItemOption<string | number>[]> {
         return this.options$ || this.property.options$;
     }
 

lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts

@@ -24,6 +24,6 @@ export interface CardViewSelectItemOption<T> {
 }
 
 export interface CardViewSelectItemProperties<T> extends CardViewItemProperties {
-    value: string;
+    value: string | number;
     options$: Observable<CardViewSelectItemOption<T>[]>;
 }