Skip to content

Commit 9da13ce

Browse files
kdinevkdinev
authored
Merge branch '15.1.x' into dpetev/grid-public-api-take-two
2 parents c203e6c + c23454d commit 9da13ce

File tree

7 files changed

+186
-19
lines changed

7 files changed

+186
-19
lines changed

‎projects/igniteui-angular/src/lib/combo/combo.directives.ts

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,156 @@
11
import { Directive } from '@angular/core';
22

33
/**
4-
* @hidden
4+
* Allows a custom element to be added at the beginning of the combo list.
5+
*
6+
* @igxModule IgxComboModule
7+
* @igxTheme igx-combo-theme
8+
* @igxKeywords combobox, combo selection
9+
* @igxGroup Grids & Lists
10+
*
11+
* @example
12+
* <igx-combo>
13+
* <ng-template igxComboHeader>
14+
* <div class="header-class">Custom header</div>
15+
* <img src=""/>
16+
* </ng-template>
17+
* </igx-combo>
518
*/
619
@Directive({ selector: '[igxComboHeader]' })
720
export class IgxComboHeaderDirective { }
821

922
/**
10-
* @hidden
23+
* Allows a custom element to be added at the end of the combo list.
24+
*
25+
* @igxModule IgxComboModule
26+
* @igxTheme igx-combo-theme
27+
* @igxKeywords combobox, combo selection
28+
* @igxGroup Grids & Lists
29+
*
30+
* @example
31+
* <igx-combo>
32+
* <ng-template igxComboFooter>
33+
* <div class="footer-class">Custom footer</div>
34+
* <img src=""/>
35+
* </ng-template>
36+
* </igx-combo>
1137
*/
1238
@Directive({ selector: '[igxComboFooter]' })
1339
export class IgxComboFooterDirective { }
1440

1541
/**
16-
* @hidden
42+
* Allows the combo's items to be modified with a custom template
43+
*
44+
* @igxModule IgxComboModule
45+
* @igxTheme igx-combo-theme
46+
* @igxKeywords combobox, combo selection
47+
* @igxGroup Grids & Lists
48+
*
49+
* @example
50+
* <igx-combo>
51+
* <ng-template igxComboItem let-display let-key="valueKey">
52+
* <div class="item">
53+
* <span class="state">State: {{ display[key] }}</span>
54+
* <span class="region">Region: {{ display.region }}</span>
55+
* </div>
56+
* </ng-template>
57+
* </igx-combo>
1758
*/
1859
@Directive({ selector: '[igxComboItem]' })
1960
export class IgxComboItemDirective { }
2061

2162
/**
22-
* @hidden
63+
* Defines the custom template that will be displayed when the combo's list is empty
64+
*
65+
* @igxModule IgxComboModule
66+
* @igxTheme igx-combo-theme
67+
* @igxKeywords combobox, combo selection
68+
* @igxGroup Grids & Lists
69+
*
70+
* @example
71+
* <igx-combo>
72+
* <ng-template igxComboEmpty>
73+
* <div class="combo--empty">
74+
* There are no items to display
75+
* </div>
76+
* </ng-template>
77+
* </igx-combo>
2378
*/
2479
@Directive({ selector: '[igxComboEmpty]' })
2580
export class IgxComboEmptyDirective { }
2681

2782
/**
28-
* @hidden
83+
* Defines the custom template that will be used when rendering header items for groups in the combo's list
84+
*
85+
* @igxModule IgxComboModule
86+
* @igxTheme igx-combo-theme
87+
* @igxKeywords combobox, combo selection
88+
* @igxGroup Grids & Lists
89+
*
90+
* @example
91+
* <igx-combo>
92+
* <ng-template igxComboHeaderItem let-item let-key="groupKey">
93+
* <div class="custom-item--group">Group header for {{ item[key] }}</div>
94+
* </ng-template>
95+
* </igx-combo>
2996
*/
3097
@Directive({ selector: '[igxComboHeaderItem]' })
3198
export class IgxComboHeaderItemDirective { }
3299

33100
/**
34-
* @hidden
101+
* Defines the custom template that will be used to display the `ADD` button
102+
*
103+
* @remarks To show the `ADD` button, the `allowCustomValues` option must be enabled
104+
*
105+
* @igxModule IgxComboModule
106+
* @igxTheme igx-combo-theme
107+
* @igxKeywords combobox, combo selection
108+
* @igxGroup Grids & Lists
109+
*
110+
* @example
111+
* <igx-combo #combo>
112+
* <ng-template igxComboAddItem>
113+
* <button class="combo__add-button">
114+
* Click to add item
115+
* </button>
116+
* </ng-template>
117+
* </igx-combo>
35118
*/
36119
@Directive({ selector: '[igxComboAddItem]' })
37120
export class IgxComboAddItemDirective { }
38121

39122
/**
40-
* @hidden
123+
* The custom template that will be used when rendering the combo's toggle button
124+
*
125+
* @igxModule IgxComboModule
126+
* @igxTheme igx-combo-theme
127+
* @igxKeywords combobox, combo selection
128+
* @igxGroup Grids & Lists
129+
*
130+
* @example
131+
* <igx-combo #combo>
132+
* <ng-template igxComboToggleIcon let-collapsed>
133+
* <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
134+
* </ng-template>
135+
* </igx-combo>
41136
*/
42137
@Directive({ selector: '[igxComboToggleIcon]' })
43138
export class IgxComboToggleIconDirective { }
44139

45140
/**
46-
* @hidden
141+
* Defines the custom template that will be used when rendering the combo's clear icon
142+
*
143+
* @igxModule IgxComboModule
144+
* @igxTheme igx-combo-theme
145+
* @igxKeywords combobox, combo selection
146+
* @igxGroup Grids & Lists
147+
*
148+
* @example
149+
* <igx-combo #combo>
150+
* <ng-template igxComboClearIcon>
151+
* <igx-icon>clear</igx-icon>
152+
* </ng-template>
153+
* </igx-combo>
47154
*/
48155
@Directive({ selector: '[igxComboClearIcon]' })
49156
export class IgxComboClearIconDirective { }
50-

‎projects/igniteui-angular/src/lib/date-picker/date-picker.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import { IgxDatePickerComponent } from './date-picker.component';
1818
],
1919
exports: [
2020
IgxDatePickerComponent,
21-
IgxPickersCommonModule
21+
IgxPickersCommonModule,
22+
IgxInputGroupModule
2223
],
2324
imports: [
2425
FormsModule,

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

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ViewChild, ViewChildren, QueryList, DebugElement } from '@angular/core';
22
import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
3-
import { FormsModule, UntypedFormBuilder, ReactiveFormsModule, Validators, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
3+
import { FormsModule, UntypedFormBuilder, ReactiveFormsModule, Validators, UntypedFormControl, UntypedFormGroup, FormControl } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { IgxInputGroupComponent, IgxInputGroupModule } from '../../input-group/input-group.component';
66
import { IgxInputDirective, IgxInputState } from './input.directive';
@@ -266,10 +266,10 @@ describe('IgxInput', () => {
266266
fixture.detectChanges();
267267

268268
const invalidInputGroups = fixture.debugElement.nativeElement.querySelectorAll(`.igx-input-group--invalid`);
269-
expect(invalidInputGroups.length).toBe(4);
269+
expect(invalidInputGroups.length).toBe(6);
270270

271271
const requiredInputGroups = fixture.debugElement.nativeElement.querySelectorAll(`.igx-input-group--required`);
272-
expect(requiredInputGroups.length).toBe(4);
272+
expect(requiredInputGroups.length).toBe(6);
273273
});
274274

275275
it('When updating two inputs with same attribute names through ngModel, label should responds', fakeAsync(() => {
@@ -1033,7 +1033,20 @@ class DataBoundDisabledInputWithoutValueComponent extends DataBoundDisabledInput
10331033
<input type="number" formControlName="num" igxInput igxMask="###">
10341034
</igx-input-group>
10351035
</section>
1036-
</form>`
1036+
</form>
1037+
<form>
1038+
<section>
1039+
<igx-input-group>
1040+
<label igxLabel>single line</label>
1041+
<input type="text" [formControl]="inputControl" igxInput>
1042+
</igx-input-group>
1043+
<igx-input-group>
1044+
<label igxLabel>multi line</label>
1045+
<textarea type="text" [formControl]="textareaControl" igxInput></textarea>
1046+
</igx-input-group>
1047+
</section>
1048+
</form>
1049+
`
10371050
})
10381051
class ReactiveFormComponent {
10391052
@ViewChild('strinput', { static: true, read: IgxInputDirective }) public strIgxInput: IgxInputDirective;
@@ -1045,6 +1058,9 @@ class ReactiveFormComponent {
10451058
num: [null, Validators.required]
10461059
});
10471060

1061+
public inputControl = new FormControl('', [Validators.required]);
1062+
public textareaControl = new FormControl('', [Validators.required]);
1063+
10481064
constructor(private fb: UntypedFormBuilder) { }
10491065

10501066
public markAsTouched() {
@@ -1056,6 +1072,12 @@ class ReactiveFormComponent {
10561072
}
10571073
}
10581074
}
1075+
1076+
this.inputControl.markAsTouched();
1077+
this.inputControl.updateValueAndValidity();
1078+
1079+
this.textareaControl.markAsTouched();
1080+
this.textareaControl.updateValueAndValidity();
10591081
}
10601082
}
10611083

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
} from '@angular/core';
1515
import {
1616
AbstractControl,
17-
FormControlName,
1817
NgControl,
1918
NgModel
2019
} from '@angular/forms';
@@ -108,8 +107,8 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
108107
@Optional() @Self() @Inject(NgModel) protected ngModel: NgModel,
109108
@Optional()
110109
@Self()
111-
@Inject(FormControlName)
112-
protected formControl: FormControlName,
110+
@Inject(NgControl)
111+
protected formControl: NgControl,
113112
protected element: ElementRef<HTMLInputElement>,
114113
protected cdr: ChangeDetectorRef,
115114
protected renderer: Renderer2

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
title="clear files"
5353
tabindex="0"
5454
>
55-
<igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>
55+
<igx-icon>clear</igx-icon>
5656
</igx-suffix>
5757
</ng-template>
5858

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ describe('Rendering Tests', () => {
7979
waitForAsync(() => {
8080
TestBed.configureTestingModule({
8181
declarations: [
82-
IgxStepperSampleTestComponent
82+
IgxStepperSampleTestComponent,
83+
IgxStepperLinearComponent
8384
],
8485
imports: [
8586
NoopAnimationsModule,
@@ -148,6 +149,22 @@ describe('Rendering Tests', () => {
148149
expect(serviceCollapseSpy).toHaveBeenCalledOnceWith(stepper.steps[0]);
149150
}));
150151

152+
it('should calculate disabled steps properly when the stepper is initially in linear mode', fakeAsync(()=>{
153+
const fixture = TestBed.createComponent(IgxStepperLinearComponent);
154+
fixture.detectChanges();
155+
const linearStepper = fixture.componentInstance.stepper;
156+
157+
const serviceExpandSpy = spyOn((linearStepper as any).stepperService, 'expand').and.callThrough();
158+
linearStepper.next();
159+
fixture.detectChanges();
160+
tick();
161+
162+
expect(linearStepper.steps[1].active).toBeFalsy();
163+
expect(linearStepper.steps[0].active).toBeTruthy();
164+
expect(linearStepper.steps[1].linearDisabled).toBeTruthy();
165+
expect(serviceExpandSpy).not.toHaveBeenCalled();
166+
}));
167+
151168
it('should not allow moving forward to next step in linear mode if the previous step is invalid', fakeAsync(() => {
152169
const serviceExpandSpy = spyOn((stepper as any).stepperService, 'expand').and.callThrough();
153170
stepper.orientation = IgxStepperOrientation.Horizontal;
@@ -1292,3 +1309,21 @@ export class IgxStepperSampleTestComponent {
12921309
public displayHiddenStep = false;
12931310

12941311
}
1312+
1313+
@Component({
1314+
template: `
1315+
<igx-stepper #stepper [linear]="true">
1316+
<igx-step #step1 [isValid]="false">
1317+
</igx-step>
1318+
1319+
<igx-step #step2 [isValid]="false">
1320+
</igx-step>
1321+
1322+
<igx-step #step3 [isValid]="false">
1323+
</igx-step>
1324+
</igx-stepper>
1325+
`
1326+
})
1327+
export class IgxStepperLinearComponent {
1328+
@ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
1329+
}

‎projects/igniteui-angular/src/lib/stepper/stepper.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,10 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
378378
this.activateFirstStep(true);
379379
}
380380

381+
if (this.linear) {
382+
this.stepperService.calculateLinearDisabledSteps();
383+
}
384+
381385
this.handleStepChanges();
382386
}
383387

0 commit comments

Comments
 (0)