fix(simple-combo): value & selection correct single type instead array (#13647)

Author: damyanpetev

CHANGELOG.md

@@ -28,6 +28,8 @@ All notable changes for each version of this project will be documented in this
     - `ISimpleComboSelectionChangingEventArgs` exposes two new properties `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.
 
       Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.
+    - **Breaking Change** The `value` and `selection` properties now correctly return a single value or data item instead of the same wrapped in array and `undefined` instead of empty array, matching the values emitted from selection event and when working with `formControlName`/`ngModel` directives.
+
 ## 16.1.4
 ### New Features
 - `Themes`:

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -795,7 +795,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     }
 
     /**
-     * The value of the selected item in the combo
+     * The value of the combo
      *
      * ```typescript
      * // get

projects/igniteui-angular/src/lib/simple-combo/README.md

@@ -272,8 +272,9 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 | Name                     | Description                                       | Type                        |
 |--------------------------|---------------------------------------------------|-----------------------------|
 | `id`                    | The combo's id.                                          | `string`              |
-| `data`                  | The combo's data source.                                 | `any`                  |
-| `value`                 | The combo's value.                                       | `string`                |
+| `data`                  | The combo's data source.                                 | `any[]`                  |
+| `value`                 | The combo's value.                                       | `any`                |
+| `selection`             | The combo's selected item.                               | `any`                |
 | `allowCustomValue`      | Enables/disables combo custom value.                | `boolean`                     |
 | `valueKey`              | Determines which column in the data source is used to determine the value. | `string` |
 | `displayKey`            | Determines which column in the data source is used to determine the display value. | `string` |

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html

@@ -24,7 +24,7 @@
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
 
-    <igx-suffix *ngIf="selection.length" aria-label="Clear Selection" class="igx-combo__clear-button"
+    <igx-suffix *ngIf="hasSelectedItem" aria-label="Clear Selection" class="igx-combo__clear-button"
         (click)="handleClear($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>