Skip to content

Commit 0c28b20

Browse files
desig9steindesig9stein
committed
fix(input-group): fix the showcase sample
1 parent 0ed89b1 commit 0c28b20

File tree

1 file changed

+130
-63
lines changed

1 file changed

+130
-63
lines changed

‎src/app/input-group-showcase/input-group-showcase.sample.html‎

Lines changed: 130 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,32 @@ <h1 class="showcase__title">Angular</h1>
1515
#field
1616
[type]="getInputGroupType()"
1717
[style.--ig-size]="getSize()">
18+
1819
@if (getLabel()) {
1920
<label igxLabel>{{ getLabel() }}</label>
2021
}
21-
<igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
22+
23+
@if (hidePrefix()) {
24+
<igx-icon igxPrefix>face</igx-icon>
25+
}
26+
2227
<input
23-
formControlName="field"
24-
[type]="getNativeInputType()"
25-
[readOnly]="isReadonly()"
26-
[attr.placeholder]="getPlaceholder()"
27-
igxInput
28+
formControlName="field"
29+
[type]="getNativeInputType()"
30+
[attr.placeholder]="getPlaceholder()"
31+
[readOnly]="isReadonly()"
32+
igxInput
2833
/>
29-
@if (!hideSuffix()) {
34+
35+
@if (hideSuffix()) {
3036
<igx-suffix>
3137
<igx-icon>face</igx-icon>
3238
</igx-suffix>
3339
}
34-
<igx-hint>Type your web address</igx-hint>
40+
41+
@if (getHint()) {
42+
<span igxHint>{{getHint()}}</span>
43+
}
3544
</igx-input-group>
3645

3746
<!-- Angular Textarea Group -->
@@ -42,20 +51,25 @@ <h1 class="showcase__title">Angular</h1>
4251
@if (getLabel()) {
4352
<label igxLabel>{{ getLabel() }}</label>
4453
}
45-
<igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
54+
55+
@if (hidePrefix()) {
56+
<igx-icon igxPrefix>face</igx-icon>
57+
}
4658
<textarea
47-
formControlName="fieldTextarea"
48-
[required]="isRequired()"
49-
[readOnly]="isReadonly()"
50-
[attr.placeholder]="getPlaceholder()"
51-
igxInput>
59+
formControlName="fieldTextarea"
60+
[attr.placeholder]="getPlaceholder()"
61+
[readOnly]="isReadonly()"
62+
igxInput>
5263
</textarea>
53-
@if (!hideSuffix()) {
64+
65+
@if (hideSuffix()) {
5466
<igx-suffix>
5567
<igx-icon>face</igx-icon>
5668
</igx-suffix>
5769
}
58-
<igx-hint>Hint text</igx-hint>
70+
@if (getHint()) {
71+
<igx-hint>{{getHint()}}</igx-hint>
72+
}
5973
</igx-input-group>
6074

6175
<!-- Angular Select -->
@@ -68,14 +82,17 @@ <h1 class="showcase__title">Angular</h1>
6882
@if (getLabel()) {
6983
<label igxLabel>{{ getLabel() }}</label>
7084
}
71-
<igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
72-
<igx-hint>
73-
I am a Hint
74-
</igx-hint>
75-
@if (!hideSuffix()) {
76-
<igx-suffix>
77-
<igx-icon>favorite</igx-icon>
78-
</igx-suffix>
85+
86+
@if (hidePrefix()) {
87+
<igx-icon igxPrefix>face</igx-icon>
88+
}
89+
90+
@if (hideSuffix()) {
91+
<igx-icon igxSuffix>face</igx-icon>
92+
}
93+
94+
@if (getHint()) {
95+
<igx-hint>{{getHint()}}</igx-hint>
7996
}
8097
<igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
8198
<igx-select-item [value]="'Orange'">Orange</igx-select-item>
@@ -90,40 +107,60 @@ <h1 class="showcase__title">Angular</h1>
90107
[placeholder]="getPlaceholder()"
91108
[type]="getInputGroupType()"
92109
[style.--ig-size]="getSize()">
110+
93111
@if (getLabel()) {
94112
<label igxLabel>{{ getLabel() }}</label>
95113
}
96-
<igx-icon igxPrefix [hidden]="hidePrefix()">favorite</igx-icon>
97-
@if (!hideSuffix()) {
114+
115+
@if (hidePrefix()) {
116+
<igx-prefix>
117+
<igx-icon>face</igx-icon>
118+
</igx-prefix>
119+
}
120+
121+
@if (hideSuffix()) {
98122
<igx-suffix>
99123
<igx-icon>favorite</igx-icon>
100124
</igx-suffix>
101125
}
102-
<igx-hint>Select a unique falsy value</igx-hint>
126+
127+
@if (getHint()) {
128+
<igx-hint>{{getHint()}}</igx-hint>
129+
}
103130
</igx-combo>
104131

105132
<!-- Angular File Input -->
106133
<igx-input-group
107134
#fieldFile
108135
[type]="getInputGroupType()"
109136
[style.--ig-size]="getSize()">
137+
110138
@if (getLabel()) {
111-
<label igxLabel>{{ getLabel() }} ("No file chosen" is not an actual value)</label>
139+
<label igxLabel for="file-in">{{ getLabel() }}</label>
112140
}
113-
<igx-icon igxPrefix [hidden]="hidePrefix()">face</igx-icon>
141+
142+
@if (hidePrefix()) {
143+
<igx-icon igxPrefix>face</igx-icon>
144+
}
145+
114146
<input
115-
formControlName="fieldFile"
116-
[required]="isRequired()"
117-
[type]="'file'"
118-
[readOnly]="isReadonly()"
119-
igxInput
147+
id="file-in"
148+
formControlName="fieldFile"
149+
[required]="isRequired()"
150+
[type]="'file'"
151+
[readOnly]="isReadonly()"
152+
igxInput
120153
/>
121-
@if (!hideSuffix()) {
154+
155+
@if (hideSuffix()) {
122156
<igx-suffix>
123157
<igx-icon>face</igx-icon>
124158
</igx-suffix>
125159
}
126-
<igx-hint>Type your web address</igx-hint>
160+
161+
@if (getHint()) {
162+
<igx-hint>{{getHint()}}</igx-hint>
163+
}
127164
</igx-input-group>
128165
</form>
129166
</section>
@@ -162,17 +199,23 @@ <h1 class="showcase__title">Web components</h1>
162199
[style.--ig-size]="getSize()"
163200
[label]="getLabel()"
164201
[required]="isRequired()"
202+
[attr.placeholder]="getPlaceholder()"
165203
[disabled]="isDisabled()"
166204
[readOnly]="isReadonly()"
167205
[attr.value]="getValue()"
168-
[attr.placeholder]="getPlaceholder()"
169206
[type]="getNativeInputType()"
170207
[outlined]="isOutlined()">
171-
<span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
172-
@if (!hideSuffix()) {
173-
<span slot="suffix"><igc-icon name="face"></igc-icon></span>
208+
209+
@if (hidePrefix()) {
210+
<igc-icon slot="prefix" name="face"></igc-icon>
211+
}
212+
213+
@if (hideSuffix()) {
214+
<igc-icon slot="suffix" name="face"></igc-icon>
215+
}
216+
@if (getHint()) {
217+
<span slot="helper-text">{{getHint()}}</span>
174218
}
175-
<span slot="helper-text">Type your web address</span>
176219
</igc-input>
177220

178221
<igc-textarea
@@ -182,27 +225,37 @@ <h1 class="showcase__title">Web components</h1>
182225
[disabled]="isDisabled()"
183226
[readOnly]="isReadonly()"
184227
[attr.value]="getValue()"
185-
[attr.placeholder]="getPlaceholder()"
228+
[placeholder]="getPlaceholder()"
186229
[outlined]="isOutlined()">
187-
<span slot="prefix" [hidden]="hidePrefix()"><igc-icon name="face"></igc-icon></span>
188-
@if (!hideSuffix()) {
189-
<span slot="suffix"><igc-icon name="face"></igc-icon></span>
230+
231+
@if (hidePrefix()) {
232+
<igc-icon slot="prefix" name="face"></igc-icon>
233+
}
234+
235+
@if (hideSuffix()) {
236+
<igc-icon slot="suffix" name="face"></igc-icon>
237+
}
238+
239+
@if (getHint()) {
240+
<span slot="helper-text">{{getHint()}}</span>
190241
}
191-
<span slot="helper-text">Hint text</span>
192242
</igc-textarea>
193243

194244
<igc-select
195-
[required]="isRequired()"
196-
[attr.placeholder]="getPlaceholder()"
197-
[label]="getLabel()"
198-
[disabled]="isDisabled()"
199-
[outlined]="isOutlined()"
200-
[style.--ig-size]="getSize()">
201-
<igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
202-
@if (!hideSuffix()) {
203-
<igc-icon slot="suffix" name="favorite"></igc-icon>
245+
[required]="isRequired()"
246+
[attr.placeholder]="getPlaceholder()"
247+
[label]="getLabel()"
248+
[disabled]="isDisabled()"
249+
[outlined]="isOutlined()"
250+
[style.--ig-size]="getSize()">
251+
252+
@if (hidePrefix()) {
253+
<igc-icon slot="prefix" name="face"></igc-icon>
254+
}
255+
256+
@if (getHint()) {
257+
<span slot="helper-text">{{getHint()}}</span>
204258
}
205-
<span slot="helper-text">I am a Hint</span>
206259
<igc-select-item [value]="'Apple'" [disabled]="true">Apple</igc-select-item>
207260
<igc-select-item [value]="'Orange'" [selected]="getValue()">Orange</igc-select-item>
208261
<igc-select-item [value]="'Grapes'">Grapes</igc-select-item>
@@ -216,17 +269,31 @@ <h1 class="showcase__title">Web components</h1>
216269
[outlined]="isOutlined()"
217270
[disabled]="isDisabled()"
218271
[style.--ig-size]="getSize()">
219-
<span slot="helper-text">I am a Hint</span>
220-
<igc-icon slot="prefix" [hidden]="hidePrefix()" name="favorite"></igc-icon>
221-
@if (!hideSuffix()) {
222-
<igc-icon slot="suffix" name="favorite"></igc-icon>
272+
@if (getHint()) {
273+
<span slot="helper-text">{{getHint()}}</span>
223274
}
224275
</igc-combo>
225276

226277

227-
<div class="showcase__placeholder">
228-
NO file type in web components
229-
</div>
278+
<igc-file-input
279+
[style.--ig-size]="getSize()"
280+
[label]="getLabel()"
281+
[required]="isRequired()"
282+
[disabled]="isDisabled()"
283+
[readOnly]="isReadonly()"
284+
[attr.value]="getValue()"
285+
[outlined]="isOutlined()">
286+
@if (hidePrefix()) {
287+
<igc-icon slot="prefix" name="face"></igc-icon>
288+
}
289+
290+
@if (hideSuffix()) {
291+
<igc-icon slot="suffix" name="face"></igc-icon>
292+
}
293+
@if (getHint()) {
294+
<span slot="helper-text">{{getHint()}}</span>
295+
}
296+
</igc-file-input>
230297
</div>
231298
</section>
232299

0 commit comments

Comments
 (0)