Skip to content

Commit fbde678

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into skrastev/grid-icons
2 parents f7ba2fb + f5e6fec commit fbde678

File tree

13 files changed

+2422
-1061
lines changed

13 files changed

+2422
-1061
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ All notable changes for each version of this project will be documented in this
44

55
## 10.1.0
66

7+
### General
8+
- `igxCombo`
9+
- **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
10+
711
### New Features
12+
- `IgxGridState` directive
13+
- Added support for expansion states, column selection and row pinning.
14+
- Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)
815
- `IgxColumn`
916
- Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
1017
- `IgxToast`
@@ -47,6 +54,7 @@ All notable changes for each version of this project will be documented in this
4754
- `IgxHierarchicalGrid`
4855
- `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
4956
- **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
57+
5058
## 9.1.0
5159

5260
### General

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { ConnectedPositioningStrategy } from './../services/overlay/position/connected-positioning-strategy';
21
import { CommonModule } from '@angular/common';
32
import {
43
AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener,
@@ -30,7 +29,7 @@ import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/inpu
3029
import { IgxComboItemComponent } from './combo-item.component';
3130
import { IgxComboDropDownComponent } from './combo-dropdown.component';
3231
import { IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes';
33-
import { OverlaySettings, AbsoluteScrollStrategy } from '../services/public_api';
32+
import { OverlaySettings, AbsoluteScrollStrategy, AutoPositionStrategy } from '../services/public_api';
3433
import { Subject } from 'rxjs';
3534
import { takeUntil } from 'rxjs/operators';
3635
import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
@@ -156,7 +155,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
156155
private _onTouchedCallback: () => void = noop;
157156
private _overlaySettings: OverlaySettings = {
158157
scrollStrategy: new AbsoluteScrollStrategy(),
159-
positionStrategy: new ConnectedPositioningStrategy(),
158+
positionStrategy: new AutoPositionStrategy(),
160159
modal: false,
161160
closeOnOutsideClick: true,
162161
excludePositionTarget: true

‎projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

Lines changed: 76 additions & 31 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/state.directive.ts

Lines changed: 327 additions & 346 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts

Lines changed: 682 additions & 0 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts

Lines changed: 353 additions & 0 deletions
Large diffs are not rendered by default.

‎src/app/combo/combo.sample.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
align-items: center;
4141
justify-content: center;
4242
flex-direction: column;
43-
max-width: 600px;
43+
max-width: 700px;
4444
margin: 48px auto;
4545
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .26), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 3px 3px -2px rgba(0, 0, 0, .08);
4646
padding: 24px;

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

Lines changed: 102 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,81 @@
11
<div class="sample-wrapper">
22
<app-page-header title="Combo" description="Combo lets you choose value from a list"></app-page-header>
33

4-
<div class="sample-content">
5-
<section class="combo-sample">
6-
<div class="input-wrapper">
7-
<div class="input-row">
8-
<igx-input-group type="box" class="input-container">
9-
<input igxInput name="fristName" placeholder="First Name"/>
10-
</igx-input-group>
11-
<igx-input-group type="box" class="input-container">
12-
<input igxInput name="lastName" placeholder="Last Name"/>
13-
</igx-input-group>
14-
<igx-input-group type="box" class="input-container">
15-
<input igxInput name="age" placeholder="Age"/>
16-
</igx-input-group>
17-
</div>
18-
<div class="input-row">
19-
<igx-combo #combo class="input-container" [placeholder]="'Locations'"
20-
(onAddition)="handleAddition($event)"
21-
(onSelectionChange)="handleSelectionChange($event)"
22-
[data]="items"
23-
[allowCustomValues]="customValuesFlag"
24-
[displayDensity]="'comfortable'"
25-
[autoFocusSearch]="autoFocusSearch"
26-
[filterable]="filterableFlag" [displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
27-
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
28-
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display let-key="valueKey">
29-
<div class="state-card--simple">
30-
<div class="display-value--main">{{display[key]}}</div>
31-
<div class="display-value--sub">{{display.region}}</div>
32-
</div>
33-
</ng-template>
34-
<ng-template *ngIf="currentDataType === 'primitive'" #itemTemplate let-display let-key="valueKey">
35-
<div class="state-card--simple">
36-
<div class="display-value--main">{{display}}</div>
37-
<div class="display-value--sub"></div>
4+
<div class="sample-content">
5+
<section class="combo-sample">
6+
<div class="input-wrapper">
7+
<div class="input-row">
8+
<igx-input-group type="box" class="input-container">
9+
<input igxInput name="fristName" placeholder="First Name" />
10+
</igx-input-group>
11+
<igx-input-group type="box" class="input-container">
12+
<input igxInput name="lastName" placeholder="Last Name" />
13+
</igx-input-group>
14+
<igx-input-group type="box" class="input-container">
15+
<input igxInput name="age" placeholder="Age" />
16+
</igx-input-group>
17+
</div>
18+
<div>
19+
<h5 class="sample-title">Template Form</h5>
20+
<form>
21+
<igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" required
22+
[(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" #comboModel="ngModel"
23+
[data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
24+
[valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
25+
<igx-hint>Please select the states you've visited</igx-hint>
26+
</igx-combo>
27+
</form>
28+
</div>
29+
<div>
30+
<h5 class="sample-title">Reactive Form</h5>
31+
<form class="input-group-form" [formGroup]="user">
32+
<div class="container">
33+
<igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres"
34+
[valueKey]="'type'" [displayKey]="'type'" type="line" formControlName="genres"
35+
searchPlaceholder="Search...">
36+
<label igxLabel>States</label>
37+
</igx-combo>
3838
</div>
39-
</ng-template>
40-
<ng-template igxComboHeader>
41-
<div class="custom-combo-header">This is a header</div>
42-
</ng-template>
43-
<ng-template igxComboFooter>
44-
<div class="custom-combo-footer">This is a footer</div>
45-
</ng-template>
46-
<ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display let-key="groupKey">
47-
<div>Group header for {{display[key]}}</div>
48-
</ng-template>
49-
<ng-template igxComboAddItem>
50-
<button igxButton="flat" igxRipple>Add VERY CUSTOM item</button>
51-
</ng-template>
52-
<label igxLabel>States</label>
53-
<igx-prefix><igx-icon>home</igx-icon></igx-prefix>
54-
<igx-hint>Please select the states you've visited</igx-hint>
55-
</igx-combo>
39+
</form>
40+
</div>
41+
<div class="input-row">
42+
<igx-combo #playgroundCombo class="input-container" [placeholder]="'Locations'"
43+
(onAddition)="handleAddition($event)" (onSelectionChange)="handleSelectionChange($event)"
44+
[data]="items" [allowCustomValues]="customValuesFlag" [displayDensity]="'comfortable'"
45+
[autoFocusSearch]="autoFocusSearch" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
46+
[valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
47+
<ng-template *ngIf="currentDataType !== 'primitive'" #itemTemplate let-display
48+
let-key="valueKey">
49+
<div class="state-card--simple">
50+
<div class="display-value--main">{{display[key]}}</div>
51+
<div class="display-value--sub">{{display.region}}</div>
52+
</div>
53+
</ng-template>
54+
<ng-template *ngIf="currentDataType === 'primitive'" #itemTemplate let-display let-key="valueKey">
55+
<div class="state-card--simple">
56+
<div class="display-value--main">{{display}}</div>
57+
<div class="display-value--sub"></div>
58+
</div>
59+
</ng-template>
60+
<ng-template igxComboHeader>
61+
<div class="custom-combo-header">This is a header</div>
62+
</ng-template>
63+
<ng-template igxComboFooter>
64+
<div class="custom-combo-footer">This is a footer</div>
65+
</ng-template>
66+
<ng-template *ngIf="currentDataType !== 'primitive'" #headerItemTemplate let-display let-key="groupKey">
67+
<div>Group header for {{display[key]}}</div>
68+
</ng-template>
69+
<ng-template igxComboAddItem>
70+
<button igxButton="flat" igxRipple>Add VERY CUSTOM item</button>
71+
</ng-template>
72+
<label igxLabel>States</label>
73+
<igx-prefix>
74+
<igx-icon>home</igx-icon>
75+
</igx-prefix>
76+
<igx-hint>Please select the states you've visited</igx-hint>
77+
</igx-combo>
78+
</div>
5679
</div>
5780
<div class="btn-wrapper mb24">
5881
<div class="btn-container">
@@ -67,58 +90,39 @@
6790
<div class="display-value--sub">In Region {{display.region}}</div>
6891
</div>
6992
</ng-template>
93+
<h4>Search Input</h4>
7094
<div>
71-
<h5 class="sample-title">Template Form</h5>
72-
<form>
73-
<igx-combo class="input-container" [placeholder]="'Locations'"
74-
name="anyName" required [(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" #comboModel="ngModel"
75-
[data]="items" [filterable]="filterableFlag"
76-
[displayKey]="valueKeyVar" [valueKey]="valueKeyVar"
77-
[groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
78-
<igx-hint>Please select the states you've visited</igx-hint>
79-
</igx-combo>
80-
</form>
95+
<igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br />
96+
<igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
97+
<igx-switch [(ngModel)]="autoFocusSearch">Automatic Search Focus</igx-switch>
8198
</div>
99+
<h4>Overlay Settings</h4>
82100
<div>
83-
<h5 class="sample-title">Reactive Form</h5>
84-
<form class="input-group-form" [formGroup]="user">
85-
<div class="container">
86-
<igx-combo #combo1 class="input-container" [itemsMaxHeight]="130" [data]="genres"
87-
[valueKey]="'type'" [displayKey]="'type'" type="line" formControlName="genres"
88-
searchPlaceholder="Search...">
89-
<label igxLabel>States</label>
90-
</igx-combo>
91-
</div>
92-
</form>
101+
<button igxButton="raised" (click)="changeOverlaySettings(1)">Elastic Top</button>
102+
<button igxButton="raised" (click)="changeOverlaySettings(2)">Global with Animations</button>
103+
<button igxButton="raised" (click)="changeOverlaySettings(3)">Connected</button>
104+
<button igxButton="raised" (click)="changeOverlaySettings(0)">Default (Auto)</button>
93105
</div>
94-
</div>
95-
<div>
96106
<h4>Display Density</h4>
97-
<button igxButton="raised" [disabled]="igxCombo.displayDensity === compact" (click)="setDensity(compact)">Compact</button>
98-
<button igxButton="raised" [disabled]="igxCombo.displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
99-
<button igxButton="raised" [disabled]="igxCombo.displayDensity === comfortable" (click)="setDensity(comfortable)">Comfortable</button>
100-
</div>
101-
<div>
102-
<h4>Search Input</h4>
103-
<igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br/>
104-
<igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
105-
<igx-switch [(ngModel)]="autoFocusSearch">Automatic Search Focus</igx-switch>
106-
</div>
107-
<div>
108-
<h4>Overlay Settings</h4>
109-
<button igxButton="raised" (click)="changeOverlaySettings(1)">Elastic Top</button>
110-
<button igxButton="raised" (click)="changeOverlaySettings(2)">Global with Animations</button>
111-
<button igxButton="raised" (click)="changeOverlaySettings(0)">Initial</button>
112-
</div>
113-
<div>
107+
<div>
108+
<button igxButton="raised" [disabled]="igxCombo.displayDensity === compact"
109+
(click)="setDensity(compact)">Compact</button>
110+
<button igxButton="raised" [disabled]="igxCombo.displayDensity === cosy"
111+
(click)="setDensity(cosy)">Cosy</button>
112+
<button igxButton="raised" [disabled]="igxCombo.displayDensity === comfortable"
113+
(click)="setDensity(comfortable)">Comfortable</button>
114+
</div>
114115
<h4>Item Height</h4>
115-
<button igxButton="raised" [disabled]="combo.itemHeight === 56" (click)="combo.itemHeight = 56">
116-
Set ItemHeight to 56
117-
</button>
118-
<button igxButton="raised" [disabled]="combo.itemHeight === null" (click)="combo.itemHeight = null">
119-
Reset ItemHeight
120-
</button>
121-
</div>
122-
</section>
116+
<div>
117+
<button igxButton="raised" [disabled]="playgroundCombo.itemHeight === 56"
118+
(click)="playgroundCombo.itemHeight = 56">
119+
Set ItemHeight to 56
120+
</button>
121+
<button igxButton="raised" [disabled]="playgroundCombo.itemHeight === null"
122+
(click)="playgroundCombo.itemHeight = null">
123+
Reset ItemHeight
124+
</button>
125+
</div>
126+
</section>
123127
</div>
124128
</div>

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ViewChild, OnInit, TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
22
import { IgxComboComponent, IComboSelectionChangeEventArgs,
3-
DisplayDensity, OverlaySettings, AutoPositionStrategy, VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy,
4-
scaleInCenter, scaleOutCenter, ElasticPositionStrategy
3+
DisplayDensity, OverlaySettings, VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy,
4+
scaleInCenter, scaleOutCenter, ElasticPositionStrategy, ConnectedPositioningStrategy
55
} from 'igniteui-angular';
66
import { take } from 'rxjs/operators';
77
import { cloneDeep } from 'lodash';
@@ -34,11 +34,10 @@ const complex = [{
3434
styleUrls: ['combo.sample.css']
3535
})
3636
export class ComboSampleComponent implements OnInit, AfterViewInit {
37-
private overlaySettings: OverlaySettings[] = [null, null, null];
38-
private width = '160px';
39-
@ViewChild(IgxComboComponent, { static: true }) public igxCombo: IgxComboComponent;
37+
private overlaySettings: OverlaySettings[] = [null, null, null, null];
38+
@ViewChild('playgroundCombo', { static: true }) public igxCombo: IgxComboComponent;
39+
@ViewChild('playgroundCombo', { read: ElementRef, static: true }) private comboRef: ElementRef;
4040
@ViewChild('comboTemplate', { read: IgxComboComponent }) public comboTemplate: IgxComboComponent;
41-
@ViewChild(IgxComboComponent, { read: ElementRef, static: true }) private comboRef: ElementRef;
4241
public toggleItemState = false;
4342
private initData: any[] = [];
4443
public filterableFlag = true;
@@ -168,12 +167,17 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
168167
verticalDirection: VerticalAlignment.Top, verticalStartPoint: VerticalAlignment.Bottom,
169168
horizontalDirection: HorizontalAlignment.Left, horizontalStartPoint: HorizontalAlignment.Right }),
170169
modal: false,
171-
closeOnOutsideClick: true,
170+
closeOnOutsideClick: true
172171
};
173172
this.overlaySettings[2] = {
174173
positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }),
175174
modal: true,
176-
closeOnOutsideClick: true,
175+
closeOnOutsideClick: true
176+
};
177+
this.overlaySettings[3] = {
178+
positionStrategy: new ConnectedPositioningStrategy({ target: this.comboRef.nativeElement }),
179+
modal: false,
180+
closeOnOutsideClick: true
177181
};
178182
}
179183

0 commit comments

Comments
 (0)