From 3a759e1b621ae2a6b145406ecd90efaa1e5f3f85 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Tue, 25 Aug 2020 10:24:21 +0300 Subject: [PATCH 1/7] feat(inputgroup): Initial token implementation #6751 - Add dev sample --- .../date-picker/date-picker.component.spec.ts | 2 +- .../input-group/input-group.component.spec.ts | 31 +++++++++++++---- .../lib/input-group/input-group.component.ts | 34 +++++++------------ .../src/lib/input-group/inputGroupType.ts | 19 +++++++++++ .../src/lib/input-group/public_api.ts | 1 + .../src/lib/select/select.component.ts | 3 +- .../time-picker/time-picker.component.spec.ts | 2 +- src/app/app.module.ts | 2 +- src/app/input-group/input-group.sample.html | 11 +++--- src/app/input-group/input-group.sample.ts | 18 +++++++--- 10 files changed, 79 insertions(+), 44 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/input-group/inputGroupType.ts diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index d0059b75db1..5b1c1f564ef 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -1382,7 +1382,7 @@ describe('IgxDatePicker', () => { }; moduleRef = {}; injector = { get: () => ngModel }; - inputGroup = new IgxInputGroupComponent(null, null, document); + inputGroup = new IgxInputGroupComponent(null, null, null, document); }); it('should initialize date picker with required correctly', () => { diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts index 3f1fba70582..b6a48ba6a99 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts @@ -1,13 +1,15 @@ -import { Component, ViewChild, ElementRef } from '@angular/core'; +import { Component, ViewChild, ElementRef, Inject } from '@angular/core'; import { async, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { IgxInputGroupComponent, IgxInputGroupModule, IgxInputGroupType } from './input-group.component'; +import { IgxInputGroupComponent, IgxInputGroupModule } from './input-group.component'; import { DisplayDensityToken, DisplayDensity } from '../core/displayDensity'; import { UIInteractions } from '../test-utils/ui-interactions.spec'; import { IgxIconModule } from '../icon/public_api'; import { IgxInputDirective } from '../directives/input/input.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; import { IgxPrefixDirective, IgxSuffixDirective } from '../chips/public_api'; +import { IgxInputGroupType } from './public_api'; +import { InputGroupToken } from './inputGroupType'; const INPUT_GROUP_CSS_CLASS = 'igx-input-group'; const INPUT_GROUP_BOX_CSS_CLASS = 'igx-input-group--box'; @@ -40,7 +42,7 @@ describe('IgxInputGroup', () => { })); it('Initializes an input group.', () => { - const fixture = TestBed.createComponent(InputGroupComponent); + const fixture = TestBed.createComponent(InputGroupDisabledComponent); fixture.detectChanges(); const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement; @@ -86,21 +88,28 @@ describe('IgxInputGroup', () => { testInputGroupType('search', igxInputGroup, inputGroupElement); }); - it('Should be able to change input group type programmatically.', () => { + it('Should respect type Token and be able to change input group type programmatically.', () => { const fixture = TestBed.createComponent(InputGroupComponent); fixture.detectChanges(); const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement; const igxInputGroup = fixture.componentInstance.igxInputGroup; - igxInputGroup.type = 'box'; - fixture.detectChanges(); + // a Token is passed and can be obtained + expect(fixture.componentInstance.IGTOKEN).toBe('box'); + + // type set via Token is 'box' testInputGroupType('box', igxInputGroup, inputGroupElement); + // user can override Token passing other igxInputGroup types igxInputGroup.type = 'border'; fixture.detectChanges(); testInputGroupType('border', igxInputGroup, inputGroupElement); + igxInputGroup.type = 'box'; + fixture.detectChanges(); + testInputGroupType('box', igxInputGroup, inputGroupElement); + igxInputGroup.type = 'search'; fixture.detectChanges(); testInputGroupType('search', igxInputGroup, inputGroupElement); @@ -108,6 +117,11 @@ describe('IgxInputGroup', () => { igxInputGroup.type = 'line'; fixture.detectChanges(); testInputGroupType('line', igxInputGroup, inputGroupElement); + + // Set type as null, so the Token type should be used again + igxInputGroup.type = null; + fixture.detectChanges(); + testInputGroupType('box', igxInputGroup, inputGroupElement); }); it('disabled input should properly detect changes.', () => { @@ -250,7 +264,8 @@ describe('IgxInputGroup', () => { PREFIX SUFFIX - ` + `, + providers: [{ provide: InputGroupToken, useValue: 'box'}] }) class InputGroupComponent { @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent; @@ -258,6 +273,8 @@ class InputGroupComponent { @ViewChild(IgxPrefixDirective, { read: ElementRef }) public prefix: ElementRef; @ViewChild(IgxSuffixDirective, { read: ElementRef }) public suffix: ElementRef; public suppressInputAutofocus = false; + + constructor(@Inject(InputGroupToken) public IGTOKEN: IgxInputGroupType) {} } @Component({ diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 6e118d852d6..7d829b8208c 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -11,7 +11,7 @@ import { QueryList, Inject, Optional, - AfterContentInit, + AfterContentInit } from '@angular/core'; import { IgxHintDirective } from '../directives/hint/hint.directive'; import { @@ -29,16 +29,10 @@ import { } from '../core/displayDensity'; import { IgxInputGroupBase } from './input-group.common'; import { DeprecateProperty } from '../core/deprecateDecorators'; +import { IgxInputGroupType, InputGroupToken } from './inputGroupType'; let NEXT_ID = 0; -enum IgxInputGroupEnum { - line, - box, - border, - search, -} - enum IgxInputGroupThemeEnum { 'material', 'fluent', @@ -46,11 +40,6 @@ enum IgxInputGroupThemeEnum { 'indigo-design', } -/** - * Determines the Input Group type. - */ -export type IgxInputGroupType = keyof typeof IgxInputGroupEnum; - /** * Determines the Input Group theme. */ @@ -60,12 +49,12 @@ export type IgxInputGroupTheme = keyof typeof IgxInputGroupThemeEnum; selector: 'igx-input-group', templateUrl: 'input-group.component.html', providers: [ - { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }, + { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent } ], }) export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInputGroupBase, AfterContentInit { - private _type: IgxInputGroupType = 'line'; + private _type: IgxInputGroupType = null; private _filled = false; private _variant: IgxInputGroupTheme = 'material'; @@ -219,7 +208,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase * ``` */ public get type() { - return this._type; + return this._type ? this._type : this._inputGroupType ? this._inputGroupType : this._type = 'line'; } /** @hidden @internal */ @@ -250,6 +239,9 @@ export class IgxInputGroupComponent extends DisplayDensityBase @Optional() @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensityOptions, + @Optional() + @Inject(InputGroupToken) + private _inputGroupType: IgxInputGroupType, @Inject(DOCUMENT) private document: any ) { @@ -289,7 +281,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase */ public get hasBorder() { return ( - (this._type === 'line' || this._type === 'box') && + (this.type === 'line' || this.type === 'box') && this._variant === 'material' ); } @@ -305,7 +297,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase * ``` */ public get isTypeLine(): boolean { - return this._type === 'line' && this._variant === 'material'; + return this.type === 'line' && this._variant === 'material'; } /** @@ -320,7 +312,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase */ @HostBinding('class.igx-input-group--box') public get isTypeBox() { - return this._type === 'box' && this._variant === 'material'; + return this.type === 'box' && this._variant === 'material'; } /** @@ -335,7 +327,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase */ @HostBinding('class.igx-input-group--border') public get isTypeBorder() { - return this._type === 'border' && this._variant === 'material'; + return this.type === 'border' && this._variant === 'material'; } /** @@ -395,7 +387,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase */ @HostBinding('class.igx-input-group--search') public get isTypeSearch() { - return this._type === 'search'; + return this.type === 'search'; } /** @hidden */ diff --git a/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts b/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts new file mode 100644 index 00000000000..6f55a0fbbea --- /dev/null +++ b/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts @@ -0,0 +1,19 @@ +import { InjectionToken } from '@angular/core'; + +enum IgxInputGroupEnum { + line, + box, + border, + search, +} + +/** + * Defines the InputGroupType DI token. + */ + // Should this go trough Interface https://angular.io/api/core/InjectionToken + export const InputGroupToken = new InjectionToken('InputGroupType'); + + /** + * Determines the InputGroupType. + */ + export type IgxInputGroupType = keyof typeof IgxInputGroupEnum; diff --git a/projects/igniteui-angular/src/lib/input-group/public_api.ts b/projects/igniteui-angular/src/lib/input-group/public_api.ts index 92e3354ac62..1ea23b8aadb 100644 --- a/projects/igniteui-angular/src/lib/input-group/public_api.ts +++ b/projects/igniteui-angular/src/lib/input-group/public_api.ts @@ -4,3 +4,4 @@ export * from '../directives/label/label.directive'; export * from '../directives/hint/hint.directive'; export * from '../directives/prefix/prefix.directive'; export * from '../directives/suffix/suffix.directive'; +export * from './inputGroupType'; diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 4b11c3c9a08..239aacfc852 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -188,7 +188,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec * ``` */ @Input() - public type = 'line'; + public type = null; /** * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button @@ -272,7 +272,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec protected elementRef: ElementRef, protected cdr: ChangeDetectorRef, protected selection: IgxSelectionAPIService, - @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, private _injector: Injector) { super(elementRef, cdr, selection, _displayDensityOptions); diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index a08ba75831b..eaf6c7e8b93 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -2140,7 +2140,7 @@ describe('IgxTimePicker', () => { element }; injector = { get: () => ngModel }; - inputGroup = new IgxInputGroupComponent(element, null, document); + inputGroup = new IgxInputGroupComponent(element, null, null, document); }); it('should initialize time picker with required correctly', () => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c53b9be6168..ed4785b32f2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,7 +7,7 @@ import { IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService, IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService, DisplayDensityToken, DisplayDensity, - IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService + IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService, InputGroupToken } from 'igniteui-angular'; import { IgxColumnHidingModule } from 'igniteui-angular'; import { SharedModule } from './shared/shared.module'; diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html index 62f718ab32d..23d5c50fc6c 100644 --- a/src/app/input-group/input-group.sample.html +++ b/src/app/input-group/input-group.sample.html @@ -28,10 +28,8 @@
- + + search @@ -55,7 +53,7 @@ - + face @@ -182,8 +180,9 @@ [displayDensity]="density" [placeholder]="'Pick One'" [disabled]="isDisabled" + class="material-theme" > - + favorite diff --git a/src/app/input-group/input-group.sample.ts b/src/app/input-group/input-group.sample.ts index 82e0a0313a9..5ba748cb9a5 100644 --- a/src/app/input-group/input-group.sample.ts +++ b/src/app/input-group/input-group.sample.ts @@ -1,10 +1,11 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, OnInit, AfterViewInit } from '@angular/core'; import { IgxInputGroupType, ButtonGroupAlignment, DisplayDensityToken, IDisplayDensityOptions, IButtonGroupEventArgs, + InputGroupToken } from 'igniteui-angular'; interface Selection { @@ -19,21 +20,22 @@ interface Selection { selector: 'app-input-group-sample', styleUrls: ['input-group.sample.scss'], templateUrl: 'input-group.sample.html', + providers: [{provide: InputGroupToken, useValue: 'box' }] }) -export class InputGroupSampleComponent implements OnInit { +export class InputGroupSampleComponent implements OnInit, AfterViewInit { public inputValue: any; public isRequired = false; public isDisabled = false; public alignment = ButtonGroupAlignment.vertical; public density = 'comfortable'; public displayDensities: Selection[]; - public inputType: IgxInputGroupType = 'line'; + public inputType: IgxInputGroupType = null; public inputTypes: Selection[]; - public inputSearchType = 'search'; date = new Date(); constructor( @Inject(DisplayDensityToken) - public displayDensityOptions: IDisplayDensityOptions + public displayDensityOptions: IDisplayDensityOptions, + @Inject(InputGroupToken) public TOKEN: IgxInputGroupType ) {} public ngOnInit(): void { @@ -72,6 +74,11 @@ export class InputGroupSampleComponent implements OnInit { ]; } + ngAfterViewInit() { + console.log('The InputGroupToken set for all material themed components(that have no explicit type set on component OR sample lv) is: ', + this.TOKEN); + } + public selectDensity(event: IButtonGroupEventArgs) { this.density = this.displayDensities[event.index].label; } @@ -79,6 +86,7 @@ export class InputGroupSampleComponent implements OnInit { public selectInputType(event: IButtonGroupEventArgs) { const currentType = this.inputTypes[event.index].type; this.inputType = currentType; + console.log('New type set is = ', currentType); } public disableFields() { From 4199441c616f64de0fd310b37d8e8edd07d23f13 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Thu, 27 Aug 2020 11:21:38 +0300 Subject: [PATCH 2/7] chore(select): Implement seter and getter #6751 --- .../src/lib/select/select.component.spec.ts | 3 ++- .../src/lib/select/select.component.ts | 14 ++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index a08b46d4ef8..c2ef08faf5f 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -142,6 +142,7 @@ describe('igxSelect', () => { expect(select.disabled).toBeFalsy(); expect(select.placeholder).toEqual('Choose a city'); expect(select.value).toBeUndefined(); + // Default type will be set from input-group - currently 'line' expect(select.type).toEqual('line'); expect(select.displayDensity).toEqual('comfortable'); expect(select.overlaySettings).toBeUndefined(); @@ -417,7 +418,7 @@ describe('igxSelect', () => { }); it('should render input type properly', () => { const inputGroup = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP)); - // Default type is 'line' + // Default type will be set from input-group - currently 'line' expect(select.type).toEqual('line'); expect(inputGroup.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_BOX)).toBeFalsy(); expect(inputGroup.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_BORDER)).toBeFalsy(); diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 239aacfc852..258daab8374 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -37,7 +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'; +import { IgxHintDirective, IgxInputGroupType } from '../input-group/public_api'; /** @hidden @internal */ @Directive({ @@ -182,13 +182,19 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec /** * An @Input property that sets how the select will be styled. - * The allowed values are `line`, `box` and `border`. The default is `line`. + * The allowed values are `line`, `box` and `border`. The input-group default is `line`. * ```html * * ``` */ - @Input() - public type = null; + @Input('type') + public set type(value: IgxInputGroupType) { + this.inputGroup.type = value; + } + + public get type(): IgxInputGroupType { + return this.inputGroup.type; + } /** * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button From 90edd820550012f3687811f31d8d9a25a42886d2 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Thu, 27 Aug 2020 12:43:11 +0300 Subject: [PATCH 3/7] chore(select): Check for existing inputGroup #6751 --- .../igniteui-angular/src/lib/select/select.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 258daab8374..a5414b749f3 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -189,11 +189,13 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec */ @Input('type') public set type(value: IgxInputGroupType) { - this.inputGroup.type = value; + if (this.inputGroup) { + this.inputGroup.type = value; + } } public get type(): IgxInputGroupType { - return this.inputGroup.type; + return this.inputGroup?.type; } /** From d5ff3f9ea451c3c7b95f1739039485c97fcf2d29 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Thu, 27 Aug 2020 21:04:36 +0300 Subject: [PATCH 4/7] refactor(inputgroup): address comments #6751 --- .../src/lib/combo/combo.component.spec.ts | 54 ++++++++++++------- .../src/lib/combo/combo.component.ts | 10 +++- .../input-group/input-group.component.spec.ts | 3 +- .../lib/input-group/input-group.component.ts | 2 +- .../src/lib/select/select.component.ts | 2 +- 5 files changed, 48 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index b1c86f4f498..2040465ebcc 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -88,7 +88,8 @@ describe('igxCombo', () => { mockSelection.get.and.returnValue(new Set([])); const mockIconService = new IgxIconService(null, null); it('should correctly implement interface methods - ControlValueAccessor ', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); expect(mockInjector.get).toHaveBeenCalledWith(NgControl, null); @@ -133,7 +134,8 @@ describe('igxCombo', () => { pending('Convert existing form test here'); }); it('should properly call dropdown methods on toggle', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -156,7 +158,8 @@ describe('igxCombo', () => { expect(combo.collapsed).toBe(false); }); it(`should not focus search input when property autoFocusSearch=false`, () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); const dropdownContainer = { nativeElement: { focus: () => { } } }; combo['dropdownContainer'] = dropdownContainer; spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); @@ -175,7 +178,8 @@ describe('igxCombo', () => { expect(combo.focusSearchInput).toHaveBeenCalledTimes(1); }); it('should call dropdown toggle with correct overlaySettings', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -193,7 +197,8 @@ describe('igxCombo', () => { expect(combo.dropdown.toggle).toHaveBeenCalledWith(expectedSettings); }); it('should properly get/set displayKey', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); combo.valueKey = 'field'; @@ -203,7 +208,8 @@ describe('igxCombo', () => { expect(combo.displayKey === combo.valueKey).toBeFalsy(); }); it('should properly call "writeValue" method', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); combo.data = data; @@ -221,7 +227,8 @@ describe('igxCombo', () => { }); it('should select items through setSelctedItem method', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -256,7 +263,8 @@ describe('igxCombo', () => { }); it('should set selectedItems correctly on selectItems method call', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -281,7 +289,8 @@ describe('igxCombo', () => { }); it('should fire onSelectionChange event on item selection', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -352,7 +361,8 @@ describe('igxCombo', () => { }); it('should properly emit added and removed values in change event on single value selection', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -384,7 +394,8 @@ describe('igxCombo', () => { }); it('should properly emit added and removed values in change event on multiple values selection', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -432,7 +443,8 @@ describe('igxCombo', () => { }); it('should handle select/deselect ALL items', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -452,7 +464,8 @@ describe('igxCombo', () => { }); it('should emit onSelectonChange event on select/deselect ALL items method call', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -489,7 +502,8 @@ describe('igxCombo', () => { }); it('should properly handle selection manipulation through onSelectionChange emit', () => { const selectionService = new IgxSelectionAPIService(); - combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -507,7 +521,8 @@ describe('igxCombo', () => { expect(combo.selectedItems()).toEqual([]); }); it('should not throw error when setting data to null', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); let errorMessage = ''; @@ -522,7 +537,8 @@ describe('igxCombo', () => { expect(combo.data.length).toBe(0); }); it('should not throw error when setting data to undefined', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); let errorMessage = ''; @@ -537,7 +553,8 @@ describe('igxCombo', () => { expect(combo.data.length).toBe(0); }); it('should properly handleInputChange', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); @@ -573,7 +590,8 @@ describe('igxCombo', () => { expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(2); }); it('should be able to cancel onSearchInput', () => { - combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, mockIconService, null, mockInjector); + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); combo.ngOnInit(); combo.data = data; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index cd56e100e10..c596e0d47e7 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -38,6 +38,7 @@ import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; import { EditorProvider } from '../core/edit-provider'; import { IgxInputState, IgxInputDirective } from '../directives/input/input.directive'; +import { IgxInputGroupType, InputGroupToken } from '../input-group/public_api'; /** * @hidden @@ -174,6 +175,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas protected _prevInputValue = ''; private _dataType = ''; private _searchValue = ''; + private _type = null; private ngControl: NgControl = null; private destroy$ = new Subject(); private _data = []; @@ -199,6 +201,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas protected comboAPI: IgxComboAPIService, private _iconService: IgxIconService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, + @Optional() @Inject(InputGroupToken) private _inputGroupType: IgxInputGroupType, @Optional() private _injector: Injector) { super(_displayDensityOptions); this.comboAPI.register(this); @@ -859,8 +862,13 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Input() - public type = 'box'; + public get type(): IgxInputGroupType { + return this._type || this._inputGroupType || 'box'; + } + public set type(val: IgxInputGroupType) { + this._type = val; + } /** * An @Input property that controls whether the combo's search box * should be focused after the `onOpened` event is called diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts index b6a48ba6a99..668a9e6e3de 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts @@ -8,8 +8,7 @@ import { IgxIconModule } from '../icon/public_api'; import { IgxInputDirective } from '../directives/input/input.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; import { IgxPrefixDirective, IgxSuffixDirective } from '../chips/public_api'; -import { IgxInputGroupType } from './public_api'; -import { InputGroupToken } from './inputGroupType'; +import { InputGroupToken, IgxInputGroupType } from './inputGroupType'; const INPUT_GROUP_CSS_CLASS = 'igx-input-group'; const INPUT_GROUP_BOX_CSS_CLASS = 'igx-input-group--box'; diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 7d829b8208c..b5d56810b6a 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -208,7 +208,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase * ``` */ public get type() { - return this._type ? this._type : this._inputGroupType ? this._inputGroupType : this._type = 'line'; + return this._type || this._inputGroupType || 'line'; } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index a5414b749f3..68c6e09eea2 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -187,7 +187,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec * * ``` */ - @Input('type') + @Input() public set type(value: IgxInputGroupType) { if (this.inputGroup) { this.inputGroup.type = value; From e155124c17214b3be719289e7f5fd4fdf29b5d0c Mon Sep 17 00:00:00 2001 From: IvayloG Date: Sun, 30 Aug 2020 12:30:13 +0300 Subject: [PATCH 5/7] chore(docs): Update changelog #6751 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 75c3b5e7096..b56aa89a53f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ All notable changes for each version of this project will be documented in this ### New Features - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished. +- ` IgxInputGroupType` injection token + - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`. - ` IgxExcelExporterService` - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet. From 1830e4bd64cfe6c6aa521b3f8098139048d4d313 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Wed, 2 Sep 2020 18:05:23 +0300 Subject: [PATCH 6/7] chore(inputgroup): Address comments #7651 --- CHANGELOG.md | 2 +- .../src/lib/combo/combo.component.ts | 4 ++-- .../lib/input-group/input-group.component.spec.ts | 6 +++--- .../src/lib/input-group/input-group.component.ts | 4 ++-- .../src/lib/input-group/inputGroupType.ts | 2 +- .../src/lib/select/select.component.ts | 14 +++++++------- src/app/app.module.ts | 2 +- src/app/input-group/input-group.sample.ts | 6 +++--- 8 files changed, 20 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b56aa89a53f..b92839ba286 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ All notable changes for each version of this project will be documented in this ### New Features - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished. -- ` IgxInputGroupType` injection token +- ` IGX_INPUT_GROUP_TYPE` injection token - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`. - ` IgxExcelExporterService` - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet. diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index c596e0d47e7..7a77c854ab9 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -38,7 +38,7 @@ import { IgxComboAddItemComponent } from './combo-add-item.component'; import { IgxComboAPIService } from './combo.api'; import { EditorProvider } from '../core/edit-provider'; import { IgxInputState, IgxInputDirective } from '../directives/input/input.directive'; -import { IgxInputGroupType, InputGroupToken } from '../input-group/public_api'; +import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; /** * @hidden @@ -201,7 +201,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas protected comboAPI: IgxComboAPIService, private _iconService: IgxIconService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, - @Optional() @Inject(InputGroupToken) private _inputGroupType: IgxInputGroupType, + @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType, @Optional() private _injector: Injector) { super(_displayDensityOptions); this.comboAPI.register(this); diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts index 668a9e6e3de..f976ad60844 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts @@ -8,7 +8,7 @@ import { IgxIconModule } from '../icon/public_api'; import { IgxInputDirective } from '../directives/input/input.directive'; import { configureTestSuite } from '../test-utils/configure-suite'; import { IgxPrefixDirective, IgxSuffixDirective } from '../chips/public_api'; -import { InputGroupToken, IgxInputGroupType } from './inputGroupType'; +import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from './inputGroupType'; const INPUT_GROUP_CSS_CLASS = 'igx-input-group'; const INPUT_GROUP_BOX_CSS_CLASS = 'igx-input-group--box'; @@ -264,7 +264,7 @@ describe('IgxInputGroup', () => { SUFFIX `, - providers: [{ provide: InputGroupToken, useValue: 'box'}] + providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box'}] }) class InputGroupComponent { @ViewChild('igxInputGroup', { static: true }) public igxInputGroup: IgxInputGroupComponent; @@ -273,7 +273,7 @@ class InputGroupComponent { @ViewChild(IgxSuffixDirective, { read: ElementRef }) public suffix: ElementRef; public suppressInputAutofocus = false; - constructor(@Inject(InputGroupToken) public IGTOKEN: IgxInputGroupType) {} + constructor(@Inject(IGX_INPUT_GROUP_TYPE) public IGTOKEN: IgxInputGroupType) {} } @Component({ diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index b5d56810b6a..d183506e690 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -29,7 +29,7 @@ import { } from '../core/displayDensity'; import { IgxInputGroupBase } from './input-group.common'; import { DeprecateProperty } from '../core/deprecateDecorators'; -import { IgxInputGroupType, InputGroupToken } from './inputGroupType'; +import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from './inputGroupType'; let NEXT_ID = 0; @@ -240,7 +240,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase @Inject(DisplayDensityToken) private _displayDensityOptions: IDisplayDensityOptions, @Optional() - @Inject(InputGroupToken) + @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType, @Inject(DOCUMENT) private document: any diff --git a/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts b/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts index 6f55a0fbbea..e28bfaef32f 100644 --- a/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts +++ b/projects/igniteui-angular/src/lib/input-group/inputGroupType.ts @@ -11,7 +11,7 @@ enum IgxInputGroupEnum { * Defines the InputGroupType DI token. */ // Should this go trough Interface https://angular.io/api/core/InjectionToken - export const InputGroupToken = new InjectionToken('InputGroupType'); + export const IGX_INPUT_GROUP_TYPE = new InjectionToken('InputGroupType'); /** * Determines the InputGroupType. diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 68c6e09eea2..28e724bd8d2 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -37,7 +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, IgxInputGroupType } from '../input-group/public_api'; +import { IgxHintDirective, IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api'; /** @hidden @internal */ @Directive({ @@ -96,6 +96,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec private ngControl: NgControl = null; private _overlayDefaults: OverlaySettings; private _value: any; + private _type = null; protected destroy$ = new Subject(); /** @hidden @internal do not use the drop-down container class */ @@ -188,14 +189,12 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec * ``` */ @Input() - public set type(value: IgxInputGroupType) { - if (this.inputGroup) { - this.inputGroup.type = value; + public get type(): IgxInputGroupType { + return this._type || this._inputGroupType || 'line'; } - } - public get type(): IgxInputGroupType { - return this.inputGroup?.type; + public set type(val: IgxInputGroupType) { + this._type = val; } /** @@ -281,6 +280,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec protected cdr: ChangeDetectorRef, protected selection: IgxSelectionAPIService, @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions, + @Optional() @Inject(IGX_INPUT_GROUP_TYPE) private _inputGroupType: IgxInputGroupType, private _injector: Injector) { super(elementRef, cdr, selection, _displayDensityOptions); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ed4785b32f2..c53b9be6168 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,7 +7,7 @@ import { IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService, IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService, DisplayDensityToken, DisplayDensity, - IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService, InputGroupToken + IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService } from 'igniteui-angular'; import { IgxColumnHidingModule } from 'igniteui-angular'; import { SharedModule } from './shared/shared.module'; diff --git a/src/app/input-group/input-group.sample.ts b/src/app/input-group/input-group.sample.ts index 5ba748cb9a5..e06405a654e 100644 --- a/src/app/input-group/input-group.sample.ts +++ b/src/app/input-group/input-group.sample.ts @@ -5,7 +5,7 @@ import { DisplayDensityToken, IDisplayDensityOptions, IButtonGroupEventArgs, - InputGroupToken + IGX_INPUT_GROUP_TYPE } from 'igniteui-angular'; interface Selection { @@ -20,7 +20,7 @@ interface Selection { selector: 'app-input-group-sample', styleUrls: ['input-group.sample.scss'], templateUrl: 'input-group.sample.html', - providers: [{provide: InputGroupToken, useValue: 'box' }] + providers: [{provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }] }) export class InputGroupSampleComponent implements OnInit, AfterViewInit { public inputValue: any; @@ -35,7 +35,7 @@ export class InputGroupSampleComponent implements OnInit, AfterViewInit { constructor( @Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions, - @Inject(InputGroupToken) public TOKEN: IgxInputGroupType + @Inject(IGX_INPUT_GROUP_TYPE) public TOKEN: IgxInputGroupType ) {} public ngOnInit(): void { From 465a20c02b60c1736f16fe6b6de025bccfe0f8b4 Mon Sep 17 00:00:00 2001 From: IvayloG Date: Wed, 2 Sep 2020 18:36:08 +0300 Subject: [PATCH 7/7] test(inputgroup): Fix test constructor params --- .../src/lib/select/select.component.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index c2ef08faf5f..6078c35ab79 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -142,7 +142,7 @@ describe('igxSelect', () => { expect(select.disabled).toBeFalsy(); expect(select.placeholder).toEqual('Choose a city'); expect(select.value).toBeUndefined(); - // Default type will be set from input-group - currently 'line' + // Default type will be set - currently 'line' expect(select.type).toEqual('line'); expect(select.displayDensity).toEqual('comfortable'); expect(select.overlaySettings).toBeUndefined(); @@ -418,7 +418,7 @@ describe('igxSelect', () => { }); it('should render input type properly', () => { const inputGroup = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP)); - // Default type will be set from input-group - currently 'line' + // Default type will be set - currently 'line' expect(select.type).toEqual('line'); expect(inputGroup.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_BOX)).toBeFalsy(); expect(inputGroup.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_BORDER)).toBeFalsy(); @@ -2615,7 +2615,7 @@ describe('igxSelect ControlValueAccessor Unit', () => { }); // init - select = new IgxSelectComponent(null, mockCdr, mockSelection, null, mockInjector); + select = new IgxSelectComponent(null, mockCdr, mockSelection, null, null, mockInjector); select.ngOnInit(); select.registerOnChange(mockNgControl.registerOnChangeCb); select.registerOnTouched(mockNgControl.registerOnTouchedCb);