Skip to content

Commit eade1bb

Browse files
kdinevkdinev
authored
Merge branch 'master' into state-support-hiergrid-master
2 parents 2e5b4f0 + 305f03f commit eade1bb

File tree

5 files changed

+121
-110
lines changed

5 files changed

+121
-110
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ 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
812
- `IgxGridState` directive
913
- Added support for expansion states, column selection and row pinning.

‎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

‎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)