Skip to content

Commit 35bc0d8

Browse files
committed
apply requested changes
1 parent 2149d92 commit 35bc0d8

File tree

9 files changed

+86
-59
lines changed

9 files changed

+86
-59
lines changed

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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
<igx-input-group>
44
<igx-prefix>+359</igx-prefix>
55
<label igxLabel for="phone">Phone</label>
6-
<input type="number" igxInput name="phone" />
7-
<igx-suffix>
8-
<igx-icon>phone</igx-icon>
9-
</igx-suffix>
6+
<input igxInput name="phone" type="tel" />
7+
<igx-icon igxSuffix>phone</igx-icon>
108
</igx-input-group>
119
</form>
1210
</article>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<igx-input-group>
44
<igx-prefix>+359</igx-prefix>
55
<label igxLabel for="phone">Phone</label>
6-
<input type="number" igxInput name="phone" />
6+
<input type="tel" igxInput name="phone" />
77
<igx-suffix>
88
<igx-icon>phone</igx-icon>
99
</igx-suffix>
Lines changed: 72 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,72 @@
1-
<article class="sample-column">
2-
<form>
3-
<h6>Line Type</h6>
4-
<igx-input-group type="line">
5-
<input igxInput name="fullName1" type="text" />
6-
<label igxLabel for="fullName1">Full Name</label>
7-
<igx-suffix>
8-
<igx-icon>person</igx-icon>
9-
</igx-suffix>
10-
</igx-input-group>
11-
<h6>Box Type</h6>
12-
<igx-input-group type="box">
13-
<input igxInput name="fullName2" type="text" />
14-
<label igxLabel for="fullName2">Full Name</label>
15-
<igx-suffix>
16-
<igx-icon>person</igx-icon>
17-
</igx-suffix>
18-
</igx-input-group>
19-
<h6>Border Type</h6>
20-
<igx-input-group type="border">
21-
<input igxInput name="fullName3" type="text" />
22-
<label igxLabel for="fullName3">Full Name</label>
23-
<igx-suffix>
24-
<igx-icon>person</igx-icon>
25-
</igx-suffix>
26-
</igx-input-group>
27-
<h6>Search Type</h6>
28-
<igx-input-group type="search">
29-
<input #input1 igxInput placeholder="Search" />
30-
<igx-prefix>
31-
<igx-icon>search</igx-icon>
32-
</igx-prefix>
33-
<igx-suffix *ngIf="input1.value.length > 0" (click)="clearSearchInput()">
34-
<igx-icon>clear</igx-icon>
35-
</igx-suffix>
36-
<igx-suffix>
37-
<igx-icon>mic</igx-icon>
38-
</igx-suffix>
39-
</igx-input-group>
40-
</form>
41-
</article>
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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
.container {
2+
height: calc(100% - 56px);
3+
overflow: auto;
4+
}
5+
16
h6 {
27
font-weight: 400;
38
margin: 24px 0 8px;
Lines changed: 2 additions & 9 deletions
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 { }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h4>Book your movie ticket</h4>
2323
<igx-input-group>
2424
<igx-prefix>+359</igx-prefix>
2525
<label igxLabel for="phone">Phone</label>
26-
<input type="number" igxInput name="phone" [(ngModel)]="user.phone" />
26+
<input type="tel" igxInput name="phone" [(ngModel)]="user.phone" />
2727
<igx-suffix>
2828
<igx-icon>phone</igx-icon>
2929
</igx-suffix>

src/app/data-entries/input-group/input-group-styling/input-group-styling.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<igx-input-group type="box">
33
<igx-prefix>+359</igx-prefix>
44
<label igxLabel for="phone">Phone</label>
5-
<input type="number" igxInput name="phone" />
5+
<input type="tel" igxInput name="phone" />
66
<igx-suffix>
77
<igx-icon>phone</igx-icon>
88
</igx-suffix>

src/app/data-entries/input-group/reactive-forms/reactive-forms.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h4>Book your movie ticket</h4>
2424
<igx-input-group>
2525
<igx-prefix>+359</igx-prefix>
2626
<label igxLabel for="phone">Phone</label>
27-
<input igxInput name="phone" type="number" formControlName="phone" />
27+
<input igxInput name="phone" type="tel" formControlName="phone" />
2828
<igx-suffix>
2929
<igx-icon>phone</igx-icon>
3030
</igx-suffix>

0 commit comments

Comments
 (0)