Skip to content

Commit 84e6dc0

Browse files
IvayloGIvayloG
committed
chore(combo): Update dev samples #7225 
1 parent 836e177 commit 84e6dc0

File tree

3 files changed

+115
-107
lines changed

3 files changed

+115
-107
lines changed

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