Skip to content

Commit a1d6d9c

Browse files
simeonoffsimeonoff
committed
fix(input-group): allow runtime changes to type, prefix/suffix
1 parent 36f570e commit a1d6d9c

File tree

5 files changed

+124
-125
lines changed

5 files changed

+124
-125
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -637,11 +637,11 @@ describe('igxCombo', () => {
637637
expect(inputGroupElement.classList.contains(CSS_CLASS_INPUTGROUP)).toBeTruthy();
638638
expect(inputGroupElement.classList.contains('igx-input-group--box')).toBeTruthy();
639639
expect(inputGroupElement.classList.contains('igx-input-group--placeholder')).toBeTruthy();
640-
expect(inputGroupElement.childElementCount).toEqual(2);
640+
expect(inputGroupElement.childElementCount).toEqual(3);
641641

642642
const inputGroupWrapper = inputGroupElement.children[0];
643643
expect(inputGroupWrapper.classList.contains(CSS_CLASS_INPUTGROUP_WRAPPER)).toBeTruthy();
644-
expect(inputGroupWrapper.childElementCount).toEqual(2);
644+
expect(inputGroupWrapper.childElementCount).toEqual(1);
645645

646646
const inputGroupBundle = inputGroupWrapper.children[0];
647647
expect(inputGroupBundle.classList.contains(CSS_CLASS_INPUTGROUP_BUNDLE)).toBeTruthy();
@@ -660,7 +660,7 @@ describe('igxCombo', () => {
660660
expect(dropDownButton.classList.contains(CSS_CLASS_TOGGLEBUTTON)).toBeTruthy();
661661
expect(dropDownButton.childElementCount).toEqual(1);
662662

663-
const inputGroupBorder = inputGroupWrapper.children[1];
663+
const inputGroupBorder = inputGroupElement.children[1];
664664
expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy();
665665
expect(inputGroupBorder.childElementCount).toEqual(0);
666666

‎projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ describe('IgxAutocomplete', () => {
269269
expect(input.value).toBe(startsWith);
270270
}));
271271
it('Should not open dropdown on input focusing', () => {
272-
input.nativeElement.focused = true;
272+
input.nativeElement.focus();
273273
fixture.detectChanges();
274274
expect(dropDown.collapsed).toBeTruthy();
275275
const dropdownList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST));
@@ -353,7 +353,7 @@ describe('IgxAutocomplete', () => {
353353
expect(dropDown.collapsed).toBeTruthy();
354354
expect(fixture.componentInstance.townSelected).toBe(filteredTowns[0]);
355355
expect(input.value).toBe(filteredTowns[0]);
356-
expect(input.nativeElement).toBe(document.activeElement);
356+
expect(input.nativeElement as Element).toBe(document.activeElement);
357357
}));
358358
it('Should filter and select duplicated items properly', fakeAsync(() => {
359359
fixture.componentInstance.towns.push('Sofia', 'Sofia');

‎projects/igniteui-angular/src/lib/directives/input/input.directive.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
5656
public inputGroup: IgxInputGroupBase,
5757
@Optional() @Self() @Inject(NgModel) protected ngModel: NgModel,
5858
@Optional() @Self() @Inject(FormControlName) protected formControl: FormControlName,
59-
protected element: ElementRef,
59+
protected element: ElementRef<HTMLInputElement>,
6060
protected cdr: ChangeDetectorRef) { }
6161

6262
private get ngControl(): NgControl {

‎projects/igniteui-angular/src/lib/input-group/input-group.component.html‎

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
<ng-container *ngTemplateOutlet="bundle"></ng-container>
33
</div>
44

5+
<div class="igx-input-group__border" *ngIf="hasBorder"></div>
6+
57
<div class="igx-input-group__hint">
6-
<ng-content select="igx-hint,[igxHint]"></ng-content>
8+
<ng-content select="igx-hint, [igxHint]"></ng-content>
79
</div>
810

911
<ng-template #label>
@@ -14,32 +16,65 @@
1416
<ng-content select="[igxInput]"></ng-content>
1517
</ng-template>
1618

17-
<ng-template #inputBundle>
18-
<ng-container *ngIf="!isNotMaterial">
19-
<ng-container *ngTemplateOutlet="label"></ng-container>
20-
</ng-container>
21-
22-
<ng-container *ngTemplateOutlet="input"></ng-container>
19+
<ng-template #prefix>
20+
<ng-content select="igx-prefix, [igxPrefix]"></ng-content>
2321
</ng-template>
2422

25-
<ng-template #bundle>
26-
<ng-container *ngIf="isNotMaterial">
27-
<ng-container *ngTemplateOutlet="label"></ng-container>
28-
</ng-container>
23+
<ng-template #suffix>
24+
<ng-content select="igx-suffix, [igxSuffix]"></ng-content>
25+
</ng-template>
2926

27+
<ng-template #materialBundle>
3028
<div class="igx-input-group__bundle">
31-
<ng-content select="igx-prefix,[igxPrefix]"></ng-content>
29+
<ng-container *ngTemplateOutlet="prefix"></ng-container>
3230

33-
<div *ngIf="!isTypeBootstrap; else inputBundle" class="igx-input-group__bundle-main">
31+
<div class="igx-input-group__bundle-main">
32+
<ng-container *ngTemplateOutlet="label"></ng-container>
33+
<ng-container *ngTemplateOutlet="input"></ng-container>
34+
</div>
35+
36+
<ng-container *ngTemplateOutlet="suffix"></ng-container>
37+
</div>
38+
</ng-template>
39+
40+
<ng-template #fluentBundle>
41+
<ng-container *ngTemplateOutlet="label"></ng-container>
3442

35-
<ng-container *ngIf="!isNotMaterial">
36-
<ng-container *ngTemplateOutlet="label"></ng-container>
37-
</ng-container>
43+
<div class="igx-input-group__bundle">
44+
<ng-container *ngTemplateOutlet="prefix"></ng-container>
3845

46+
<div class="igx-input-group__bundle-main">
3947
<ng-container *ngTemplateOutlet="input"></ng-container>
4048
</div>
4149

42-
<ng-content select="igx-suffix,[igxSuffix]"></ng-content>
50+
<ng-container *ngTemplateOutlet="suffix"></ng-container>
4351
</div>
44-
<div class="igx-input-group__border" *ngIf="hasBorder"></div>
52+
</ng-template>
53+
54+
<ng-template #bootstrapBundle>
55+
<ng-container *ngTemplateOutlet="label"></ng-container>
56+
57+
<div class="igx-input-group__bundle">
58+
<ng-container *ngTemplateOutlet="prefix"></ng-container>
59+
60+
<ng-container *ngTemplateOutlet="input"></ng-container>
61+
62+
<ng-container *ngTemplateOutlet="suffix"></ng-container>
63+
</div>
64+
</ng-template>
65+
66+
<ng-template #bundle>
67+
<ng-container [ngSwitch]="type">
68+
<ng-container *ngSwitchCase="'bootstrap'">
69+
<ng-container *ngTemplateOutlet="bootstrapBundle"></ng-container>
70+
</ng-container>
71+
72+
<ng-container *ngSwitchCase="'fluent'">
73+
<ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
74+
</ng-container>
75+
76+
<ng-container *ngSwitchDefault>
77+
<ng-container *ngTemplateOutlet="materialBundle"></ng-container>
78+
</ng-container>
79+
</ng-container>
4580
</ng-template>

0 commit comments

Comments
 (0)