feat(select): add igxHint support #5584 (#7487)

Author: IvayloG

CHANGELOG.md

@@ -18,6 +18,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`
     - `showGroupArea` input is added, which can be used to enable/disable the group area row.
 
+- `IgxSelect` support for `igxHint` directive added.
+    - Allows the user to add `igxHint` to be displayed bellow the input element.
+
 ## 9.1.1
 
 ### General

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

@@ -41,7 +41,7 @@ export class MyClass {
 }
 ```
 
-`igx-select` supports prefixes, suffixes, label and placeholder. You can read more about them [*here*](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html) AND [*here*](https://www.infragistics.com/products/ignite-ui-angular/angular/components/label_input.html).
+`igx-select` supports prefixes, suffixes, label, hint and placeholder. You can read more about them [*here*](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html) AND [*here*](https://www.infragistics.com/products/ignite-ui-angular/angular/components/label_input.html).
 - The items' list default exapansion panel arrow uses `IgxSuffix` and it can be changed by the user.
 - If more than one `IgxSuffix` is used, the expansion arrow will be displayed always last.
 

projects/igniteui-angular/src/lib/select/select.component.html

@@ -1,4 +1,4 @@
-<igx-input-group #inputGroup class="input-group" (click)="toggle()" [type]="type" [displayDensity]="displayDensity">
+<igx-input-group #inputGroup class="input-group" (click)="inputGroupClick($event)" [type]="type" [displayDensity]="displayDensity">
     <ng-container ngProjectAs="[igxLabel]">
         <ng-content select="[igxLabel]"></ng-content>
     </ng-container>
@@ -23,11 +23,14 @@
             <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
     <igx-suffix>
-            <ng-container *ngIf="toggleIconTemplate">
-                <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
-                </ng-container>
-            <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
+        <ng-container *ngIf="toggleIconTemplate">
+            <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
+            </ng-container>
+        <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
     </igx-suffix>
+    <ng-container ngProjectAs="igx-hint, [igxHint]" >
+        <ng-content select="igx-hint, [igxHint]"></ng-content>
+    </ng-container>
 </igx-input-group>
 <div igxToggle class="igx-drop-down__list" (mousedown)="mousedownHandler($event);" (onOpening)="onToggleOpening($event)"
     (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">

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

@@ -5,7 +5,7 @@ import { FormsModule, FormGroup, FormBuilder, FormControl, Validators, ReactiveF
 import { By } from '@angular/platform-browser';
 import { IgxDropDownModule, IgxDropDownItemComponent } from '../drop-down/public_api';
 import { IgxIconModule } from '../icon/public_api';
-import { IgxInputGroupModule } from '../input-group/public_api';
+import { IgxInputGroupModule, IgxHintDirective } from '../input-group/public_api';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSelectComponent } from './select.component';
 import { IgxSelectItemComponent } from './select-item.component';
@@ -107,7 +107,6 @@ describe('igxSelect', () => {
             ]
         }).compileComponents();
     }));
-
     describe('General tests: ', () => {
         beforeEach(fakeAsync(() => {
             fixture = TestBed.createComponent(IgxSelectSimpleComponent);
@@ -2486,7 +2485,6 @@ describe('igxSelect', () => {
             expect(selectList.nativeElement.nextElementSibling).toBeNull();
         }));
     });
-
     describe('Test CDR - Expression changed after it was checked', () => {
         beforeEach(fakeAsync(() => {
             fixture = TestBed.createComponent(IgxSelectCDRComponent);
@@ -2511,6 +2509,33 @@ describe('igxSelect', () => {
             expect(selectCDR.value).toBe('ID');
         });
     });
+    describe('Input with input group directives - hint, label, prefix, suffix: ', () => {
+        beforeEach(fakeAsync(()  => {
+            fixture = TestBed.createComponent(IgxSelectAffixComponent);
+            select = fixture.componentInstance.select;
+            fixture.detectChanges();
+        }));
+        it('should not open dropdown on hint container click',
+            fakeAsync(() => {
+                const hint = fixture.debugElement.query(By.directive(IgxHintDirective));
+                const hintContainer: HTMLElement = hint.nativeElement.parentElement;
+
+                expect(select.collapsed).toBeTruthy();
+                hintContainer.click();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeTruthy();
+        }));
+        it('should not open dropdown on hint element click',
+            fakeAsync(() => {
+                const hint = fixture.debugElement.query(By.directive(IgxHintDirective));
+                expect(select.collapsed).toBeTruthy();
+                hint.nativeElement.click();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeTruthy();
+        }));
+    });
 });
 
 describe('igxSelect ControlValueAccessor Unit', () => {
@@ -2704,6 +2729,7 @@ class IgxSelectBottomComponent {
         <igx-suffix>
             <igx-icon fontSet="material">alarm</igx-icon>
         </igx-suffix>
+    <igx-hint>I am a Hint</igx-hint>
     <igx-select-item *ngFor="let item of items" [value]="item">
         {{ item }}
     </igx-select-item>
@@ -2723,7 +2749,6 @@ class IgxSelectAffixComponent {
         'Option 7'];
 }
 
-
 @Component({
     template: `
     <form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">

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

@@ -37,9 +37,7 @@ import { IgxDropDownComponent } from './../drop-down/drop-down.component';
 import { IgxSelectItemComponent } from './select-item.component';
 import { SelectPositioningStrategy } from './select-positioning-strategy';
 import { IgxSelectBase } from './select.common';
-
-
-
+import { IgxHintDirective } from '../input-group/public_api';
 
 /** @hidden @internal */
 @Directive({
@@ -109,12 +107,14 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     /** @hidden @internal */
     @ViewChild('input', { read: IgxInputDirective, static: true }) public input: IgxInputDirective;
 
+    @ContentChild(IgxHintDirective, { read: ElementRef }) private hintElement: ElementRef;
+
     /** @hidden @internal */
     @ContentChildren(forwardRef(() => IgxSelectItemComponent), { descendants: true })
     public children: QueryList<IgxSelectItemComponent>;
 
     /** @hidden @internal */
-    @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) label: IgxLabelDirective;
+    @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;
 
     /** @hidden @internal */
     public allowItemsFocus = false;
@@ -280,9 +280,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
 
     //#region ControlValueAccessor
 
-    /** @hidden @internal */
     private _onChangeCallback: (_: any) => void = noop;
-    /** @hidden @internal */
     private _onTouchedCallback: () => void = noop;
 
     /** @hidden @internal */
@@ -358,6 +356,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
         super.open(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
     }
 
+    public inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings) {
+        const targetElement = event.target as HTMLElement;
+
+        if (this.hintElement && targetElement.contains(this.hintElement.nativeElement)) {
+            return;
+        }
+        this.toggle(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
+}
+
     /** @hidden @internal */
     ngAfterContentInit() {
         this._overlayDefaults = {

src/app/select/select.sample.html

@@ -68,6 +68,7 @@ <h4 class="sample-title">Select - declare items in html template</h4>
         <igx-suffix>
             <igx-icon fontSet="material">alarm</igx-icon>
         </igx-suffix>
+        <igx-hint>I am a Hint</igx-hint>
         <igx-select-item>None</igx-select-item>
         <igx-select-item [value]="1">Sofia</igx-select-item>
         <igx-select-item [value]="2">London</igx-select-item>
@@ -85,6 +86,7 @@ <h4 class="sample-title">Select - disabled item</h4>
                 (onSelection)="testOnSelection($event)"
                 [disabled]="false"
                 [type]="'border'">
+        <igx-hint>I am a Hint</igx-hint>
         <igx-select-item [value] = "'Apple'" [disabled]="true">Apple</igx-select-item>
         <igx-select-item [value] = "'Orange'">Orange</igx-select-item>
         <igx-select-item [value] = "'Grapes'">Grapes</igx-select-item>