Skip to content

Commit fd09877

Browse files
kdinevkdinev
authored
Merge branch '13.0.x' into mpopov/fix-10372
2 parents cfef90a + 400a92f commit fd09877

File tree

8 files changed

+716
-59
lines changed

8 files changed

+716
-59
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('igxCombo', () => {
9595
get: mockNgControl
9696
});
9797
mockSelection.get.and.returnValue(new Set([]));
98-
const mockIconService = new IgxIconService(null, null, null);
98+
const mockIconService = new IgxIconService(null, null, null, null);
9999
it('should correctly implement interface methods - ControlValueAccessor ', () => {
100100
combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
101101
mockIconService, null, null, mockInjector);

‎projects/igniteui-angular/src/lib/icon/icon.service.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
33
import { DOCUMENT } from '@angular/common';
44
import { HttpClient } from '@angular/common/http';
55
import { Observable, Subject } from 'rxjs';
6+
import { PlatformUtil } from '../core/utils';
67

78
/**
89
* Event emitted when a SVG icon is loaded through
@@ -48,14 +49,19 @@ export class IgxIconService {
4849
private _familyAliases = new Map<string, string>();
4950
private _cachedSvgIcons = new Map<string, Map<string, SafeHtml>>();
5051
private _iconLoaded = new Subject<IgxIconLoadedEvent>();
51-
private _domParser = new DOMParser();
52+
private _domParser: DOMParser;
5253

5354
constructor(
5455
@Optional() private _sanitizer: DomSanitizer,
5556
@Optional() private _httpClient: HttpClient,
56-
@Optional() @Inject(DOCUMENT) private _document: any
57+
@Optional() private _platformUtil: PlatformUtil,
58+
@Optional() @Inject(DOCUMENT) private _document: any,
5759
) {
5860
this.iconLoaded = this._iconLoaded.asObservable();
61+
62+
if(this._platformUtil?.isBrowser) {
63+
this._domParser = new DOMParser();
64+
}
5965
}
6066

6167
/**
@@ -188,7 +194,7 @@ export class IgxIconService {
188194
private cacheSvgIcon(name: string, value: string, family = this._family, stripMeta: boolean) {
189195
family = !!family ? family : this._family;
190196

191-
if (name && value) {
197+
if (this._platformUtil?.isBrowser && name && value) {
192198
const doc = this._domParser.parseFromString(value, 'image/svg+xml');
193199
const svg = doc.querySelector('svg') as SVGElement;
194200

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

Lines changed: 667 additions & 36 deletions
Large diffs are not rendered by default.

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
199199

200200
/** @hidden @internal */
201201
public handleInputChange(event?: any) {
202-
this.searchValue = event.target.value;
202+
if (event !== undefined) {
203+
this.searchValue = typeof event === 'string' ? event : event.target.value;
204+
}
203205
this._onChangeCallback(this.searchValue);
204206
if (this.collapsed && this.comboInput.focused) {
205207
this.open();
@@ -362,10 +364,11 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
362364
};
363365
this.selectionChanging.emit(args);
364366
if (!args.cancel) {
365-
const argsSelection = args.newSelection !== undefined
367+
let argsSelection = args.newSelection !== undefined
366368
&& args.newSelection !== null
367-
? [args.newSelection]
369+
? args.newSelection
368370
: [];
371+
argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
369372
this.selectionService.select_items(this.id, argsSelection, true);
370373
if (this._updateInput) {
371374
this.comboInput.value = this._value = displayText !== args.displayText

‎projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<igx-input-group [displayDensity]="displayDensity" [type]="type" [suppressInputAutofocus]="this.isDropdown"
2-
(click)="!this.isDropdown && this.toggle()">
1+
<igx-input-group [displayDensity]="displayDensity" [type]="type" [suppressInputAutofocus]="this.isDropdown">
32
<input [displayValuePipe]="this.formatter ? displayValue : null" igxInput [igxDateTimeEditor]="this.inputFormat"
43
type="text" [readonly]="!this.isDropdown || this.readOnly" [minValue]="this.minValue" [maxValue]="this.maxValue"
54
[locale]="this.locale" [spinDelta]="this.itemsDelta" [spinLoop]="this.spinLoop" [placeholder]="this.placeholder"
65
[disabled]="this.disabled" [displayFormat]="this.displayFormat"
76
[igxTextSelection]="this.isDropdown && !this.readOnly" role="combobox" aria-haspopup="dialog"
8-
[attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
7+
[attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id"
8+
(click)="!this.isDropdown && this.toggle()"/>
99

1010
<igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
1111
<igx-icon [title]="this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time">access_time</igx-icon>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -537,7 +537,8 @@ describe('IgxTimePicker', () => {
537537
fixture.componentInstance.mode = PickerInteractionMode.Dialog;
538538
fixture.detectChanges();
539539

540-
inputGroup.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
540+
const input = fixture.debugElement.query(By.css(CSS_CLASS_INPUT));
541+
input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
541542
tick();
542543
fixture.detectChanges();
543544
expect(timePicker.collapsed).toBeFalsy();

‎src/app/combo/combo.sample.html

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,27 @@
1212
<input igxInput name="age" placeholder="Age" />
1313
</igx-input-group>
1414
</div>
15+
<div>
16+
<h5 class="sample-title">Simple Combo in Template Form</h5>
17+
<form>
18+
<igx-simple-combo class="input-container" [placeholder]="'Locations'" name="anyName"
19+
#comboModel="ngModel" [(ngModel)]="singleValue" minlength="2" required [data]="items"
20+
[displayKey]="valueKeyVar" [disabled]="isDisabled" [valueKey]="valueKeyVar"
21+
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
22+
<label igxLabel>States</label>
23+
<igx-hint>Please select the state you've visited</igx-hint>
24+
</igx-simple-combo>
25+
</form>
26+
<button igxButton (click)="values1 = values1.concat(['Missouri'])">Add Missouri</button>
27+
<button igxButton (click)="values1 = []">Clear values </button>
28+
</div>
1529
<div>
1630
<h5 class="sample-title">Template Form</h5>
1731
<form>
1832
<igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" #comboModel="ngModel"
19-
[(ngModel)]="values1" minlength="2" required
20-
[data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar" [disabled]="isDisabled"
21-
[valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
33+
[(ngModel)]="values1" minlength="2" required [data]="items" [filterable]="filterableFlag"
34+
[displayKey]="valueKeyVar" [disabled]="isDisabled" [valueKey]="valueKeyVar"
35+
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
2236
<label igxLabel>States</label>
2337
<igx-hint>Please select the states you've visited</igx-hint>
2438
</igx-combo>
@@ -39,13 +53,13 @@ <h5 class="sample-title">Reactive Form</h5>
3953
</form>
4054
</div>
4155
<div class="input-row">
42-
<igx-combo #playgroundCombo class="input-container" [placeholder]="'Locations'" [showSearchCaseIcon]='true'
43-
(addition)="handleAddition($event)" (selectionChanging)="handleSelectionChange($event)"
44-
[data]="items" [allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'"
56+
<igx-combo #playgroundCombo class="input-container" [placeholder]="'Locations'"
57+
[showSearchCaseIcon]='true' (addition)="handleAddition($event)"
58+
(selectionChanging)="handleSelectionChange($event)" [data]="items"
59+
[allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'"
4560
[autoFocusSearch]="autoFocusSearch" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
4661
[valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
47-
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display
48-
let-key="valueKey">
62+
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
4963
<div class="state-card--simple">
5064
<div class="display-value--main">{{display[key]}}</div>
5165
<div class="display-value--sub">{{display.region}}</div>
@@ -63,7 +77,8 @@ <h5 class="sample-title">Reactive Form</h5>
6377
<ng-template igxComboFooter>
6478
<div class="custom-combo-footer">This is a footer</div>
6579
</ng-template>
66-
<ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display let-key="groupKey">
80+
<ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display
81+
let-key="groupKey">
6782
<div>Group header for {{display[key]}}</div>
6883
</ng-template>
6984
<ng-template igxComboAddItem>
@@ -111,7 +126,7 @@ <h4>Display Density</h4>
111126
<div>
112127
<igx-buttongroup>
113128
<button igxButton [disabled]="igxCombo.displayDensity === compact"
114-
(click)="setDensity('compact')">Compact</button>
129+
(click)="setDensity('compact')">Compact</button>
115130
<button igxButton [disabled]="igxCombo.displayDensity === cosy"
116131
(click)="setDensity('cosy')">Cosy</button>
117132
<button igxButton [disabled]="igxCombo.displayDensity === comfortable"
@@ -122,8 +137,8 @@ <h4>Item Height</h4>
122137
<div>
123138
<igx-buttongroup>
124139
<button igxButton [disabled]="playgroundCombo.itemHeight === 56"
125-
(click)="playgroundCombo.itemHeight = 56">
126-
Set ItemHeight to 56
140+
(click)="playgroundCombo.itemHeight = 56">
141+
Set ItemHeight to 56
127142
</button>
128143
<button igxButton [disabled]="playgroundCombo.itemHeight === null"
129144
(click)="playgroundCombo.itemHeight = null">

‎src/app/combo/combo.sample.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
2929
public autoFocusSearch = true;
3030
public items: any[] = [];
3131
public values1: Array<any> = ['Arizona'];
32+
public singleValue = 'Arizona';
3233
public values2: Array<any>;
3334
public isDisabled = false;
3435

0 commit comments

Comments
 (0)