feat(single-combo): initial implementation

Author: jackofdiamond5

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>

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

@@ -27,6 +27,9 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
     @HostBinding('style.height.px')
     public itemHeight: string | number = '';
 
+    @Input()
+    public singleMode: boolean;
+
     /**
      * @hidden
      */

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

@@ -45,9 +45,9 @@ export class IgxComboAPIService {
             return;
         }
         if (!selected) {
-            this.combo.selectItems([itemID], false, event);
+            this.combo.select([itemID], false, event);
         } else {
-            this.combo.deselectItems([itemID], event);
+            this.combo.deselect([itemID], event);
         }
     }
 

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

@@ -27,6 +27,8 @@ export interface IgxComboBase {
     isAddButtonVisible(): boolean;
     handleInputChange(event?: string): void;
     isItemSelected(itemID: any): boolean;
-    selectItems(itemIDs: any[], clearSelection?: boolean, event?: Event): void;
-    deselectItems(itemIDs: any[], event?: Event): void;
+    select(item: any);
+    select(itemIDs: any[], clearSelection?: boolean, event?: Event): void;
+    deselect(item: any);
+    deselect(itemIDs: any[], event?: Event): void;
 }

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

@@ -24,7 +24,7 @@ import { IgxIconModule, IgxIconService } from '../icon/public_api';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxButtonModule } from '../directives/button/button.directive';
-import { IgxDropDownModule } from '../drop-down/public_api';
+import { IgxDropDownModule, ISelectionEventArgs } from '../drop-down/public_api';
 import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
@@ -143,7 +143,7 @@ let NEXT_ID = 0;
  * @igxGroup Grids & Lists
  *
  * @remarks
- * It provides the ability to filter items as well as perform single or multiple seleciton with the provided data.
+ * It provides the ability to filter items as well as perform single or multiple selection with the provided data.
  * Additionally, it exposes keyboard navigation and custom styling capabilities.
  * @example
  * ```html
@@ -402,7 +402,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs>();
+    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs | ISelectionEventArgs>();
 
     /**
      * Emitted before the dropdown is opened
@@ -910,33 +910,33 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     protected _groupKey = '';
     protected _displayKey: string;
     protected _prevInputValue = '';
+    protected _value = '';
+    protected _valid = IgxComboState.INITIAL;
+    protected destroy$ = new Subject<any>();
+    protected _onChangeCallback: (_: any) => void = noop;
+    protected _data = [];
 
     private _dataType = '';
     private _searchValue = '';
     private _type = null;
     private ngControl: NgControl = null;
-    private destroy$ = new Subject<any>();
-    private _data = [];
     private _filteredData = [];
     private _itemHeight = null;
     private _itemsMaxHeight = null;
     private _remoteSelection = {};
-    private _onChangeCallback: (_: any) => void = noop;
     private _onTouchedCallback: () => void = noop;
     private _overlaySettings: OverlaySettings;
-    private _value = '';
-    private _valid = IgxComboState.INITIAL;
     private _groupSortingDirection: SortingDirection = SortingDirection.Asc;
 
     constructor(
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
         protected comboAPI: IgxComboAPIService,
-        private _iconService: IgxIconService,
+        protected _iconService: IgxIconService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
-        @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType,
-        @Optional() private _injector: Injector) {
+        @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType: IgxInputGroupType,
+        @Optional() protected _injector: Injector) {
         super(_displayDensityOptions);
         this.comboAPI.register(this);
     }
@@ -1021,6 +1021,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         return this._value;
     }
 
+    public set value(val: string) {
+        this._value = val;
+    }
+
     /**
      * @hidden @internal
      */
@@ -1040,6 +1044,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden @internal
      */
     public handleKeyUp(event: KeyboardEvent): void {
+        // TODO: use PlatformUtil for keyboard navigation
         if (event.key === 'ArrowDown' || event.key === 'Down') {
             this.dropdown.focusedItem = this.dropdown.items[0];
             this.dropdownContainer.nativeElement.focus();
@@ -1062,10 +1067,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * @hidden @internal
      */
-    public handleInputChange(event?: string) {
+    public handleInputChange(event?: any) {
         if (event !== undefined) {
             const args: IComboSearchInputEventArgs = {
-                searchText: event,
+                searchText: typeof event === 'string' ? event : event.target.value,
                 owner: this,
                 cancel: false
             };
@@ -1160,10 +1165,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         this.data.push(args.addedItem);
         // trigger re-render
         this.data = cloneArray(this.data);
-        this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
+        this.select(this.valueKey !== null && this.valueKey !== undefined ?
             [args.addedItem[this.valueKey]] : [args.addedItem], false);
         this.customValueFlag = false;
-        this.searchInput.nativeElement.focus();
+        this.searchInput?.nativeElement.focus();
         this.dropdown.focusedItem = null;
         this.virtDir.scrollTo(0);
     }
@@ -1389,10 +1394,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @param newItems new items to be selected
      * @param clearCurrentSelection if true clear previous selected items
      * ```typescript
-     * this.combo.selectItems(["New York", "New Jersey"]);
+     * this.combo.select(["New York", "New Jersey"]);
      * ```
      */
-    public selectItems(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event) {
+    public select(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event) {
         if (newItems) {
             const newSelection = this.selection.add_items(this.id, newItems, clearCurrentSelection);
             this.setSelection(newSelection, event);
@@ -1404,10 +1409,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      *
      * @param items items to deselected
      * ```typescript
-     * this.combo.deselectItems(["New York", "New Jersey"]);
+     * this.combo.deselect(["New York", "New Jersey"]);
      * ```
      */
-    public deselectItems(items: Array<any>, event?: Event) {
+    public deselect(items: Array<any>, event?: Event) {
         if (items) {
             const newSelection = this.selection.delete_items(this.id, items);
             this.setSelection(newSelection, event);
@@ -1468,9 +1473,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             return;
         }
         if (select) {
-            this.selectItems([itemID], false, event);
+            this.select([itemID], false, event);
         } else {
-            this.deselectItems([itemID], event);
+            this.deselect([itemID], event);
         }
     }
     /**
@@ -1513,7 +1518,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             return;
         }
         this.searchValue = '';
-        this.comboInput.nativeElement.focus();
+        if (!e.event) {
+            this.comboInput?.nativeElement.focus();
+        }
     }
 
     /**
@@ -1581,6 +1588,40 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         }
     }
 
+    /**
+     * Constructs the combo display value
+     * If remote, caches the key displayText
+     * If not, just combine the object.displayKeys
+     */
+    protected createDisplayText(newSelection: any[], oldSelection: any[]) {
+        let value = '';
+        if (this.isRemote) {
+            if (newSelection.length) {
+                const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
+                const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
+                this.registerRemoteEntries(addedItems);
+                this.registerRemoteEntries(removedItems, false);
+                value = Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
+            } else {
+                // If new selection is empty, clear all items
+                this.registerRemoteEntries(oldSelection, false);
+            }
+        } else {
+            value = this.concatDisplayText(newSelection);
+        }
+        return value;
+    }
+
+    protected checkMatch(): void {
+        const itemMatch = this.filteredData.some(this.findMatch);
+        this.customValueFlag = this.allowCustomValues && !itemMatch;
+    }
+
+    protected findMatch = (element: any): boolean => {
+        const value = this.displayKey ? element[this.displayKey] : element;
+        return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
+    };
+
     /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
     private registerRemoteEntries(ids: any[], add = true) {
         if (add) {
@@ -1605,16 +1646,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         }));
     }
 
-    private checkMatch(): void {
-        const displayKey = this.displayKey;
-        const matchFn = (e) => {
-            const value = displayKey ? e[displayKey] : e;
-            return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
-        };
-        const itemMatch = this.filteredData.some(matchFn);
-        this.customValueFlag = this.allowCustomValues && !itemMatch;
-    }
-
     /** Returns a string that should be populated in the combo's text box */
     private concatDisplayText(selection: any[]): string {
         const value = this.displayKey !== null && this.displayKey !== undefined ?
@@ -1623,30 +1654,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         return value;
     }
 
-    /**
-     * Constructs the combo display value
-     * If remote, caches the key displayText
-     * If not, just combine the object.displayKeys
-     */
-    private createDisplayText(newSelection: any[], oldSelection: any[]) {
-        let value = '';
-        if (this.isRemote) {
-            if (newSelection.length) {
-                const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
-                const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
-                this.registerRemoteEntries(addedItems);
-                this.registerRemoteEntries(removedItems, false);
-                value = Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
-            } else {
-                // If new selection is empty, clear all items
-                this.registerRemoteEntries(oldSelection, false);
-            }
-        } else {
-            value = this.concatDisplayText(newSelection);
-        }
-        return value;
-    }
-
     /** if there is a valueKey - map the keys to data items, else - just return the keys */
     private convertKeysToItems(keys: any[]) {
         if (this.comboAPI.valueKey === null) {
@@ -1672,6 +1679,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         IgxComboToggleIconDirective,
         IgxComboClearIconDirective],
     exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+        IgxComboGroupingPipe, // TODO: create common ng module
+        IgxComboFilteringPipe,
         IgxComboItemDirective,
         IgxComboEmptyDirective,
         IgxComboHeaderItemDirective,

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

@@ -28,7 +28,7 @@ export class IgxComboFilteringPipe implements PipeTransform {
                                          e[displayKey].toString().toLowerCase().includes(searchTerm));
             } else {
                 return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
-                                         e.toLowerCase().includes(searchTerm));
+                                         e.toString().toLowerCase().includes(searchTerm));
             }
         }
     }

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

@@ -547,7 +547,7 @@ describe('Edit cell with data of type Array #grid', () => {
         expect(cell.editMode).toBeTruthy();
         expect(combo.selectedItems().length).toEqual(3);
 
-        combo.deselectItems([cell.editValue[0], cell.editValue[1]]);
+        combo.deselect([cell.editValue[0], cell.editValue[1]]);
         fixture.detectChanges();
         await fixture.whenStable();
 
@@ -609,7 +609,7 @@ describe('Edit cell with data of type Array #grid', () => {
         expect(cell.editMode).toBeTruthy();
         expect(combo.selectedItems().length).toEqual(3);
 
-        combo.deselectItems([cell.editValue[0], cell.editValue[1]]);
+        combo.deselect([cell.editValue[0], cell.editValue[1]]);
         fixture.detectChanges();
         await fixture.whenStable();
 
@@ -677,7 +677,7 @@ describe('Edit cell with data of type Array #grid', () => {
         expect(cell.editMode).toBeTruthy();
         expect(combo.selectedItems().length).toEqual(3);
 
-        combo.deselectItems([cell.editValue[0], cell.editValue[1]]);
+        combo.deselect([cell.editValue[0], cell.editValue[1]]);
         fixture.detectChanges();
         await fixture.whenStable();
 
@@ -740,7 +740,7 @@ describe('Edit cell with data of type Array #grid', () => {
         expect(cell.editMode).toBeTruthy();
         expect(combo.selectedItems().length).toEqual(3);
 
-        combo.deselectItems([cell.editValue[0], cell.editValue[1]]);
+        combo.deselect([cell.editValue[0], cell.editValue[1]]);
         fixture.detectChanges();
         await fixture.whenStable();
 

projects/igniteui-angular/src/lib/grids/grid/grid.nested.props.spec.ts

@@ -0,0 +1 @@
+export * from './simple-combo.component';