feat(igx-simple-combo): single selection combo implementation #9832 (#10424)

Author: jackofdiamond5

CHANGELOG.md

@@ -10,16 +10,27 @@ All notable changes for each version of this project will be documented in this
 
 ## 12.2.3
 
+- Added `IgxSimpleComboComponent`
+    - The `igx-simple-combo` which is a modification of the `igx-combo` component that allows single selection and has the appropriate UI and behavior for that. It inherits most of the `igx-combo`'s API.
+    - Allows the selection of single items in a filterable list.
+    - Supports custom values, keyboard navigation, validation, customized positioning of the item list via overlay settings.
+    - Example:
+    ```html
+    <igx-simple-combo [(ngModel)]="item" [allowCustomValues]="true" [placeholder]="'Search'" [data]="items">
+        <label igxLabel>Items</label>
+        <igx-hint>Please select an item from the dropdown list.</igx-hint>
+    </igx-simple-combo>
+    ```
+
 ### General
 - **Breaking Change** - `IgxPercentSummaryOperand` and `IgxCurrencySummaryOperand` have been removed and `IgxNumberSummaryOperand` should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
 - `IgxToastComponent`
-    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.   
-
+    - **Deprecated** - The `position` input property has been deprecated. Use `positionSettings` input instead.
 ## 12.2.1
 
 ### New Features
 - `IgxCsvExporterService`, `IgxExcelExporterService`
-    - Exporter services are no longer required to be provided in the application since they are now injected on a root level. 
+    - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
 
 ## 12.2.0
 
@@ -3639,3 +3650,7 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
+<<<<<<< HEAD
+=======
+
+>>>>>>> 272863d341 (chore(changelog): add simple combo to features in 13.0)

README.md

@@ -6,30 +6,30 @@
 [![npm version](https://badge.fury.io/js/igniteui-angular.svg)](https://badge.fury.io/js/igniteui-angular)
 [![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)
 
-[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework. 
+[Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits, supporting directives for [Angular](https://angular.io/) by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers. With the use of all features, the world’s fastest Angular grid, 60+ real-time Angular charts, and more, you are empowered to engineer excellent mobile experiences and deliver progressive web apps (PWA’s) targeting Google's Angular framework.
 
 You can find source files under the [`src`](https://github.com/IgniteUI/igniteui-angular/tree/master/src) folder, including samples and tests.
 
- 
+
 ### Angular Data Grid Overview
 
-The Ignite UI for [Angular Data Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) equips you with all the necessary features for manipulating and visualizing tabular data in a series of rows and columns with ease. You can find powerful grid elements for no-lag scrolling while rendering and going through millions of data points. 
+The Ignite UI for [Angular Data Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) equips you with all the necessary features for manipulating and visualizing tabular data in a series of rows and columns with ease. You can find powerful grid elements for no-lag scrolling while rendering and going through millions of data points.
 
-Built for optimization and speed, our [Angular grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) component lets you quickly bind data with very little code and allows you to implement a variety of events in order to tailor different behaviors. 
+Built for optimization and speed, our [Angular grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) component lets you quickly bind data with very little code and allows you to implement a variety of events in order to tailor different behaviors.
 
 #### [View running Grid samples here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)
 
 ### Angular Charts & Graphs Overview
 
-Ignite UI for Angular arrives with an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your modern web and mobile apps. All of them are designed to work flawlessly on every modern browser and provide complete touch as well as interactivity. Our comprehensive [Angular Charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview) component supports more than 65 chart types that let you display all sorts of data representations and statistics. And with the rich and easy-to-use API, you can plot various types of charts. 
+Ignite UI for Angular arrives with an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your modern web and mobile apps. All of them are designed to work flawlessly on every modern browser and provide complete touch as well as interactivity. Our comprehensive [Angular Charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview) component supports more than 65 chart types that let you display all sorts of data representations and statistics. And with the rich and easy-to-use API, you can plot various types of charts.
 
-Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts. 
+Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
 
 ### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
 ![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif)
 ### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/indigo-design/app-builder)
 ![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif)
- 
+
 ### Current List of Components Include:
 
 |Components|Status|||Directives|Status|||
@@ -63,6 +63,7 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
 |navigation drawer|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/navigation-drawer/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)|||||
 |radio|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/radio/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button)|||||
 |select|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)|||||
+|simple-combo|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/simple-combo/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/simple-combo)|||||
 |slider|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/slider/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)|||||
 |snackbar|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/snackbar/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)|||||
 |switch|:white_check_mark:|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/switch/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)|||||
@@ -236,14 +237,14 @@ Developer support is provided as part of the commercial, paid-for license via [I
 Community support for open source usage of this product is available at [StackOverflow](https://stackoverflow.com/questions/tagged/ignite-ui-angular).
 
 ## License
-This is a commercial product, requiring a valid paid-for license for commercial use.  
+This is a commercial product, requiring a valid paid-for license for commercial use.
 This product is free to use for non-commercial educational use for students in K through 12 grades or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum.
 In order for us to verify your eligibility for free usage, please [register for trial](https://Infragistics.com/Angular) and open a support ticket with a request for free license.
 
-To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.  
+To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.
 
-© Copyright 2020 INFRAGISTICS. All Rights Reserved. 
-The Infragistics Ultimate license & copyright applies to this distribution. 
+© Copyright 2020 INFRAGISTICS. All Rights Reserved.
+The Infragistics Ultimate license & copyright applies to this distribution.
 For information on that license, please go to our website [https://www.infragistics.com/legal/license](https://www.infragistics.com/legal/license).
 
 

projects/igniteui-angular/migrations/update-13_0_0/changes/members.json

@@ -0,0 +1,26 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "selectItems",
+            "replaceWith": "select",
+            "definedIn": [
+                "IgxComboComponent"
+            ]
+        },
+        {
+            "member": "deselectItems",
+            "replaceWith": "deselect",
+            "definedIn": [
+                "IgxComboComponent"
+            ]
+        },
+        {
+            "member": "selectedItems()",
+            "replaceWith": "selection",
+            "definedIn": [
+                "IgxComboBaseDirective"
+            ]
+        }
+    ]
+}

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

@@ -7,7 +7,7 @@ The igx-combo exposes intuitive keyboard navigation and it is accessibility comp
 Drop Down items are virtualized, which guarantees smooth work, even if the igx-combo is bound to data source with a lot of items.
 
 
-`igx-combo` is a component.  
+`igx-combo` is a component.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo.html)
 
 # Usage
@@ -24,17 +24,17 @@ Remote binding, defining `valueKey` and `displayKey`, and exposing `dataPreLoad`
 ```
 
 ```typescript
-public ngOnInit() {
+public ngOnInit(): void {
     this.remoteData = this.remoteService.remoteData;
 }
 
-public ngAfterViewInit() {
+public ngAfterViewInit(): void {
     this.remoteService.getData(this.combo.virtualizationState, (data) => {
         this.combo.totalItemCount = data.length;
     });
 }
 
-public dataLoading(evt) {
+public dataLoading(evt): void {
         if (this.prevRequest) {
             this.prevRequest.unsubscribe();
         }
@@ -46,7 +46,7 @@ public dataLoading(evt) {
     }
 ```
 
-> Note: In order to have combo with remote data, what you need is to have a service that retrieves data chunks from a server. 
+> Note: In order to have combo with remote data, what you need is to have a service that retrieves data chunks from a server.
 What the combo exposes is a `virtualizationState` property that gives state of the combo - first index and the number of items that needs to be loaded.
 The service, should inform the combo for the total items that are on the server - using the `totalItemCount` property.
 
@@ -67,9 +67,9 @@ export class MyCombo {
     public combo: IgxComboComponent;
     public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
     ...
-    ngOnInit() {
+    public ngOnInit(): void {
         // Selection is done only by valueKey property value
-        this.combo.selectItems([0, 1]);
+        this.combo.select([0, 1]);
     }
 }
 ```
@@ -80,8 +80,8 @@ export class MyCombo {
 ```
 ```typescript
 export class MyCombo {
-    ngOnInit() {
-        this.combo.selectItems(this.data[0], this.data[1]);
+    public ngOnInit(): void {
+        this.combo.select([this.data[0], this.data[1]]);
     }
 }
 ```
@@ -166,7 +166,7 @@ Defining a combo's groupKey option will group the items, according to that key.
 
 ### Templates
 Templates for different parts of the control can be defined, including items, header and footer, etc.
-When defining one of the them, you need to reference list of predefined names, as follows:
+When defining one of them, you need to reference list of predefined names, as follows:
 
 #### Defining item template:
 ```html
@@ -289,7 +289,7 @@ When igxCombo is opened, allow custom values are enabled and add item button is
 
 ## Display Density
 **igx-combo** supports setting of different display densities.
-Display density is received through Angular's DI engine or can be set through the `[displayDensity]` input. The possilbe display densities are `compact`, `cosy` and `comfortable` (default).
+Display density is received through Angular's DI engine or can be set through the `[displayDensity]` input. The possible display densities are `compact`, `cosy` and `comfortable` (default).
 Setting `[displayDensity]` affects the control's items' and inputs' css properties, most notably heights, padding, font-size.
 
 ## API
@@ -349,8 +349,8 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 | `close`            | Closes drop down                         | `void`      | `None`                                                        |
 | `toggle`           | Toggles drop down                        | `void`      | `None`                                                        |
 | `selectedItems`    | Get current selection state              | `any[]`     | `None`                                                        |
-| `selectItems`      | Select defined items                     | `void`      | items: `any[]`, clearCurrentSelection: `boolean`              |
-| `deselectItems`    | Deselect defined items                   | `void`      | items: `any[]`                                                |
+| `select`      | Select defined items                     | `void`      | items: `any[]`, clearCurrentSelection: `boolean`              |
+| `deselect`    | Deselect defined items                   | `void`      | items: `any[]`                                                |
 | `selectAllItems`   | Select all (filtered) items              | `void`      | ignoreFilter?: `boolean` - if `true` selects **all** values   |
 | `deselectAllItems` | Deselect (filtered) all items            | `void`      | ignoreFilter?: `boolean` - if `true` deselects **all** values |
-| `setSelectedItem`  | Toggles (select/deselect) an item by key | `void`      | itemID: any, select = true, event?: Event                     |
+| `selected`  | Toggles (select/deselect) an item by key | `void`      | itemID: any, select = true, event?: Event                     |

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -1,5 +1,5 @@
 import {
-    ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Optional
+    ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Optional, Input
 } from '@angular/core';
 import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common';
 import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common';
@@ -20,6 +20,10 @@ import { PlatformUtil } from '../core/utils';
     providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }]
 })
 export class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit {
+    /** @hidden @internal */
+    @Input()
+    public singleMode = false;
+
     /**
      * @hidden
      * @internal
@@ -192,9 +196,13 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
     private handleEnter() {
         if (this.isAddItemFocused()) {
             this.combo.addItemToCollection();
-        } else {
-            this.close();
+            return;
+        }
+        if (this.singleMode && this.focusedItem) {
+            this.combo.select(this.focusedItem.itemID);
         }
+
+        this.close();
     }
 
     private handleSpace() {

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

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!isHeader">
+<ng-container *ngIf="!isHeader && !singleMode">
     <igx-checkbox [checked]="selected" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <span class="igx-drop-down__inner"><ng-content></ng-content></span>