Skip to content

Commit 3a72b25

Browse files
simeonoffsimeonoff
authored
Merge pull request #1974 from IgniteUI/sivanova/input-group-samples
refactor(input-group): improve input group samples
2 parents 1062b3c + 7fe2564 commit 3a72b25

20 files changed

+294
-280
lines changed

‎live-editing/configs/InputGroupConfigGenerator.ts

-20
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import { InputGroupSample2Component
88
} from "../../src/app/data-entries/input-group/input-group-sample-2/input-group-sample-2.component";
99
import { InputGroupSample5Component
1010
} from "../../src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component";
11-
import { InputGroupSample6Component
12-
} from "../../src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component";
1311
import { InputGroupStyleComponent
1412
} from "../../src/app/data-entries/input-group/input-group-styling/input-group-styling.component";
1513
import { ReactiveFormsSampleComponent
@@ -63,24 +61,6 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
6361
shortenComponentPathBy: "/data-entries/input-group/"
6462
}));
6563

66-
// input group sample 6
67-
configs.push(new Config({
68-
component: InputGroupSample6Component,
69-
additionalFiles: [
70-
"/src/app/data-entries/input-group/base-input.component.ts"
71-
],
72-
appModuleConfig: new AppModuleConfig({
73-
imports: [IgxIconModule, IgxInputGroupModule, IgxButtonModule,
74-
IgxRippleModule, InputGroupSample6Component, IgxDatePickerModule, IgxTimePickerModule,
75-
IgxComboModule, IgxDropDownModule, IgxSelectModule],
76-
ngDeclarations: [InputGroupSample6Component],
77-
ngImports: [IgxIconModule, IgxInputGroupModule, IgxButtonModule,
78-
IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule,
79-
IgxDropDownModule, IgxSelectModule]
80-
}),
81-
shortenComponentPathBy: "/data-entries/"
82-
}));
83-
8464
// reactive forms
8565
configs.push(new Config({
8666
component: ReactiveFormsSampleComponent,

‎src/app/data-entries/data-entries-routes-data.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const dataEntriesRoutesData = {
3838
"input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
3939
"input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },
4040
"input-group-sample-4": { displayName: "Input Group Hint", parentName: "Input Group" },
41-
"input-group-sample-5": { displayName: "Input Group Styling", parentName: "Input Group" },
41+
"input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
4242
"input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
4343
"input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
4444
"reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Reactive Forms" },

‎src/app/data-entries/input-group/input-group-sample-3/input-group-sample-3.component.html

+10-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
<div class="sample-wrapper">
2-
<section class="sample-content">
3-
<article class="sample-column">
4-
<form>
5-
<igx-input-group>
6-
<igx-prefix>+359</igx-prefix>
7-
<label igxLabel for="phone">Phone</label>
8-
<input type="number" igxInput name="phone" [(ngModel)]="user.phone" />
9-
<igx-suffix>
10-
<igx-icon>phone</igx-icon>
11-
</igx-suffix>
12-
</igx-input-group>
13-
</form>
14-
</article>
15-
</section>
16-
</div>
1+
<article class="sample-column">
2+
<form>
3+
<igx-input-group>
4+
<igx-prefix>+359</igx-prefix>
5+
<label igxLabel for="phone">Phone</label>
6+
<input igxInput name="phone" type="tel" />
7+
<igx-icon igxSuffix>phone</igx-icon>
8+
</igx-input-group>
9+
</form>
10+
</article>

‎src/app/data-entries/input-group/input-group-sample-3/input-group-sample-3.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.sample-column {
2+
max-width: 550px;
3+
}

‎src/app/data-entries/input-group/input-group-sample-3/input-group-sample-3.component.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@ import { BaseInputGroupSampleComponent } from "../base-input.component";
66
styleUrls: ["./input-group-sample-3.component.scss"],
77
templateUrl: "./input-group-sample-3.component.html"
88
})
9-
export class InputGroupSample3Component extends BaseInputGroupSampleComponent {
10-
public user = {
11-
phone: undefined
12-
};
13-
}
9+
export class InputGroupSample3Component extends BaseInputGroupSampleComponent { }

‎src/app/data-entries/input-group/input-group-sample-4/input-group-sample-4.component.html

+13-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
<div class="sample-wrapper">
2-
<section class="sample-content">
3-
<article class="sample-column">
4-
<form>
5-
<igx-input-group>
6-
<igx-prefix>+359</igx-prefix>
7-
<label igxLabel for="phone">Phone</label>
8-
<input type="number" igxInput name="phone" [(ngModel)]="user.phone" />
9-
<igx-suffix>
10-
<igx-icon>phone</igx-icon>
11-
</igx-suffix>
12-
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
13-
</igx-input-group>
14-
</form>
15-
</article>
16-
</section>
17-
</div>
1+
<article class="sample-column">
2+
<form>
3+
<igx-input-group>
4+
<igx-prefix>+359</igx-prefix>
5+
<label igxLabel for="phone">Phone</label>
6+
<input type="tel" igxInput name="phone" />
7+
<igx-suffix>
8+
<igx-icon>phone</igx-icon>
9+
</igx-suffix>
10+
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
11+
</igx-input-group>
12+
</form>
13+
</article>

‎src/app/data-entries/input-group/input-group-sample-4/input-group-sample-4.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.sample-column {
2+
max-width: 550px;
3+
}

‎src/app/data-entries/input-group/input-group-sample-4/input-group-sample-4.component.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,4 @@ import { BaseInputGroupSampleComponent } from "../base-input.component";
66
styleUrls: ["./input-group-sample-4.component.scss"],
77
templateUrl: "./input-group-sample-4.component.html"
88
})
9-
export class InputGroupSample4Component extends BaseInputGroupSampleComponent {
10-
public user = {
11-
phone: undefined
12-
};
13-
}
9+
export class InputGroupSample4Component extends BaseInputGroupSampleComponent { }

‎src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.html

+72-45
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,72 @@
1-
<div class="sample-wrapper">
2-
<section class="sample-content">
3-
<article class="sample-column">
4-
<form>
5-
<h5 class="sample-title">Line Type</h5>
6-
<igx-input-group type="line">
7-
<input igxInput name="fullName1" type="text" />
8-
<label igxLabel for="fullName1">Full Name</label>
9-
<igx-suffix>
10-
<igx-icon>person</igx-icon>
11-
</igx-suffix>
12-
</igx-input-group>
13-
<h5 class="sample-title">Box Type</h5>
14-
<igx-input-group type="box">
15-
<input igxInput name="fullName2" type="text" />
16-
<label igxLabel for="fullName2">Full Name</label>
17-
<igx-suffix>
18-
<igx-icon>person</igx-icon>
19-
</igx-suffix>
20-
</igx-input-group>
21-
<h5 class="sample-title">Border Type</h5>
22-
<igx-input-group type="border">
23-
<input igxInput name="fullName3" type="text" />
24-
<label igxLabel for="fullName3">Full Name</label>
25-
<igx-suffix>
26-
<igx-icon>person</igx-icon>
27-
</igx-suffix>
28-
</igx-input-group>
29-
<h5 class="sample-title">Search Type</h5>
30-
<igx-input-group type="search">
31-
<input #input1 igxInput placeholder="Search" />
32-
<igx-prefix>
33-
<igx-icon>search</igx-icon>
34-
</igx-prefix>
35-
<igx-suffix *ngIf="input1.value.length > 0" (click)="clearSearchInput()">
36-
<igx-icon>clear</igx-icon>
37-
</igx-suffix>
38-
<igx-suffix>
39-
<igx-icon>mic</igx-icon>
40-
</igx-suffix>
41-
</igx-input-group>
42-
</form>
43-
</article>
44-
</section>
45-
</div>
1+
<div class="container">
2+
<article class="sample-column">
3+
<form>
4+
<h6>Line Type</h6>
5+
<igx-input-group type="line">
6+
<input igxInput name="fullName1" type="text" />
7+
<label igxLabel for="fullName1">Full Name</label>
8+
<igx-suffix>
9+
<igx-icon>person</igx-icon>
10+
</igx-suffix>
11+
</igx-input-group>
12+
<h6>Box Type</h6>
13+
<igx-input-group type="box">
14+
<input igxInput name="fullName2" type="text" />
15+
<label igxLabel for="fullName2">Full Name</label>
16+
<igx-suffix>
17+
<igx-icon>person</igx-icon>
18+
</igx-suffix>
19+
</igx-input-group>
20+
<h6>Border Type</h6>
21+
<igx-input-group type="border">
22+
<input igxInput name="fullName3" type="text" />
23+
<label igxLabel for="fullName3">Full Name</label>
24+
<igx-suffix>
25+
<igx-icon>person</igx-icon>
26+
</igx-suffix>
27+
</igx-input-group>
28+
<h6>Bootstrap Type</h6>
29+
<igx-input-group type="bootstrap">
30+
<input igxInput name="fullName3" type="text" />
31+
<label igxLabel for="fullName3">Full Name</label>
32+
<igx-suffix>
33+
<igx-icon>person</igx-icon>
34+
</igx-suffix>
35+
</igx-input-group>
36+
<h6>Fluent Type</h6>
37+
<igx-input-group type="fluent">
38+
<input igxInput name="fullName3" type="text" />
39+
<label igxLabel for="fullName3">Full Name</label>
40+
<igx-suffix>
41+
<igx-icon>person</igx-icon>
42+
</igx-suffix>
43+
</igx-input-group>
44+
<h6>Search Type</h6>
45+
<igx-input-group type="search">
46+
<input #input1 igxInput placeholder="Search" />
47+
<igx-prefix>
48+
<igx-icon>search</igx-icon>
49+
</igx-prefix>
50+
<igx-suffix *ngIf="input1.value.length > 0" (click)="input1.value = ''">
51+
<igx-icon>clear</igx-icon>
52+
</igx-suffix>
53+
<igx-suffix>
54+
<igx-icon>mic</igx-icon>
55+
</igx-suffix>
56+
</igx-input-group>
57+
<h6>Fluent Search Type</h6>
58+
<igx-input-group type="fluent_search">
59+
<input #input2 igxInput placeholder="Search" />
60+
<igx-prefix>
61+
<igx-icon>search</igx-icon>
62+
</igx-prefix>
63+
<igx-suffix *ngIf="input2.value.length > 0" (click)="input2.value = ''">
64+
<igx-icon>clear</igx-icon>
65+
</igx-suffix>
66+
<igx-suffix>
67+
<igx-icon>mic</igx-icon>
68+
</igx-suffix>
69+
</igx-input-group>
70+
</form>
71+
</article>
72+
</div>

‎src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.container {
2+
height: calc(100% - 56px);
3+
overflow: auto;
4+
}
5+
6+
h6 {
7+
font-weight: 400;
8+
margin: 24px 0 8px;
9+
font-size: 1.1rem;
10+
}

‎src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
import { Component, ViewChild } from "@angular/core";
2-
import { IgxInputDirective } from "igniteui-angular";
1+
import { Component } from "@angular/core";
32
import { BaseInputGroupSampleComponent } from "../base-input.component";
43

54
@Component({
65
selector: "app-input-group-sample-5",
76
styleUrls: ["./input-group-sample-5.component.scss"],
87
templateUrl: "./input-group-sample-5.component.html"
98
})
10-
export class InputGroupSample5Component extends BaseInputGroupSampleComponent {
11-
@ViewChild("input1", { read: IgxInputDirective, static: true }) public searchInput: IgxInputDirective;
12-
13-
public clearSearchInput() {
14-
this.searchInput.value = "";
15-
}
16-
}
9+
export class InputGroupSample5Component extends BaseInputGroupSampleComponent { }

0 commit comments

Comments
 (0)