-
+
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 93b8a4579cf..4e2140a5345 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -10,7 +10,8 @@ import {
HostListener, Inject, Input,
Optional, QueryList, booleanAttribute,
inject,
- DOCUMENT
+ DOCUMENT,
+ AfterContentChecked
} from '@angular/core';
import { IInputResourceStrings, InputResourceStringsEN } from '../core/i18n/input-resources';
import { PlatformUtil, getComponentTheme } from '../core/utils';
@@ -33,9 +34,9 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
selector: 'igx-input-group',
templateUrl: 'input-group.component.html',
providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }],
- imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent]
+ imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
})
-export class IgxInputGroupComponent implements IgxInputGroupBase {
+export class IgxInputGroupComponent implements IgxInputGroupBase, AfterContentChecked {
/**
* Sets the resource strings.
* By default it uses EN resources.
@@ -270,7 +271,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
/** @hidden @internal */
@HostBinding('class.igx-input-group--prefixed')
public get hasPrefixes() {
- return this._prefixes.length > 0 || this.isFileType;
+ return this._prefixes.length > 0;
}
/** @hidden @internal */
@@ -335,11 +336,6 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
return this.type === 'box' && this._theme === 'material';
}
- /** @hidden @internal */
- public uploadButtonHandler() {
- this.input.nativeElement.click();
- }
-
/** @hidden @internal */
public clearValueHandler() {
this.input.clear();
@@ -351,6 +347,30 @@ export class IgxInputGroupComponent implements IgxInputGroupBase {
return this.input.type === 'file';
}
+ /** @hidden @internal */
+ @HostBinding('class.igx-file-input')
+ public get isFileInput() {
+ return this.input.type === 'file';
+ }
+
+ /** @hidden @internal */
+ @HostBinding('class.igx-file-input--filled')
+ public get isFileInputFilled() {
+ return this.isFileType && this.isFilled;
+ }
+
+ /** @hidden @internal */
+ @HostBinding('class.igx-file-input--focused')
+ public get isFileInputFocused() {
+ return this.isFileType && this.isFocused;
+ }
+
+ /** @hidden @internal */
+ @HostBinding('class.igx-file-input--disabled')
+ public get isFileInputDisabled() {
+ return this.isFileType && this.disabled;
+ }
+
/** @hidden @internal */
public get fileNames() {
return this.input.fileNames || this._resourceStrings.igx_input_file_placeholder;
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
index 646f3df2cba..69264ed29cc 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.html
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -15,23 +15,32 @@
Angular
#field
[type]="getInputGroupType()"
[style.--ig-size]="getSize()">
+
@if (getLabel()) {
}
-
face
+
+ @if (hidePrefix()) {
+
face
+ }
+
- @if (!hideSuffix()) {
+
+ @if (hideSuffix()) {
face
}
-
Type your web address
+
+ @if (getHint()) {
+
{{getHint()}}
+ }
@@ -42,20 +51,25 @@
Angular
@if (getLabel()) {
}
-
face
+
+ @if (hidePrefix()) {
+
face
+ }
- @if (!hideSuffix()) {
+
+ @if (hideSuffix()) {
face
}
-
Hint text
+ @if (getHint()) {
+
{{getHint()}}
+ }
@@ -68,14 +82,17 @@
Angular
@if (getLabel()) {
}
-
favorite
-
- I am a Hint
-
- @if (!hideSuffix()) {
-
- favorite
-
+
+ @if (hidePrefix()) {
+
face
+ }
+
+ @if (hideSuffix()) {
+
face
+ }
+
+ @if (getHint()) {
+
{{getHint()}}
}
Apple
Orange
@@ -90,16 +107,26 @@
Angular
[placeholder]="getPlaceholder()"
[type]="getInputGroupType()"
[style.--ig-size]="getSize()">
+
@if (getLabel()) {
}
-
favorite
- @if (!hideSuffix()) {
+
+ @if (hidePrefix()) {
+
+ face
+
+ }
+
+ @if (hideSuffix()) {
favorite
}
-
Select a unique falsy value
+
+ @if (getHint()) {
+
{{getHint()}}
+ }
@@ -107,23 +134,33 @@
Angular
#fieldFile
[type]="getInputGroupType()"
[style.--ig-size]="getSize()">
+
@if (getLabel()) {
-
+
}
-
face
+
+ @if (hidePrefix()) {
+
face
+ }
+
- @if (!hideSuffix()) {
+
+ @if (hideSuffix()) {
face
}
-
Type your web address
+
+ @if (getHint()) {
+
{{getHint()}}
+ }
@@ -162,17 +199,23 @@
Web components
[style.--ig-size]="getSize()"
[label]="getLabel()"
[required]="isRequired()"
+ [attr.placeholder]="getPlaceholder()"
[disabled]="isDisabled()"
[readOnly]="isReadonly()"
[attr.value]="getValue()"
- [attr.placeholder]="getPlaceholder()"
[type]="getNativeInputType()"
[outlined]="isOutlined()">
-
- @if (!hideSuffix()) {
-
+
+ @if (hidePrefix()) {
+
+ }
+
+ @if (hideSuffix()) {
+
+ }
+ @if (getHint()) {
+
{{getHint()}}
}
-
Type your web address
Web components
[disabled]="isDisabled()"
[readOnly]="isReadonly()"
[attr.value]="getValue()"
- [attr.placeholder]="getPlaceholder()"
+ [placeholder]="getPlaceholder()"
[outlined]="isOutlined()">
-
- @if (!hideSuffix()) {
-
+
+ @if (hidePrefix()) {
+
+ }
+
+ @if (hideSuffix()) {
+
+ }
+
+ @if (getHint()) {
+ {{getHint()}}
}
- Hint text
-
- @if (!hideSuffix()) {
-
+ [required]="isRequired()"
+ [attr.placeholder]="getPlaceholder()"
+ [label]="getLabel()"
+ [disabled]="isDisabled()"
+ [outlined]="isOutlined()"
+ [style.--ig-size]="getSize()">
+
+ @if (hidePrefix()) {
+
+ }
+
+ @if (getHint()) {
+ {{getHint()}}
}
- I am a Hint
Apple
Orange
Grapes
@@ -216,17 +269,31 @@ Web components
[outlined]="isOutlined()"
[disabled]="isDisabled()"
[style.--ig-size]="getSize()">
- I am a Hint
-
- @if (!hideSuffix()) {
-
+ @if (getHint()) {
+ {{getHint()}}
}
-
- NO file type in web components
-
+
+ @if (hidePrefix()) {
+
+ }
+
+ @if (hideSuffix()) {
+
+ }
+ @if (getHint()) {
+ {{getHint()}}
+ }
+
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
index 314b188dc88..5dab7ef8366 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.ts
+++ b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -1,5 +1,6 @@
import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal, computed, viewChild, DestroyRef} from '@angular/core';
import {FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators} from '@angular/forms';
+
import {
defineComponents,
IgcInputComponent,
@@ -8,6 +9,7 @@ import {
IgcSelectComponent,
IgcSelectItemComponent,
IgcSelectHeaderComponent,
+ IgcFileInputComponent,
} from 'igniteui-webcomponents';
import {
IGX_INPUT_GROUP_DIRECTIVES,
@@ -27,7 +29,8 @@ defineComponents(
IgcSelectGroupComponent,
IgcSelectComponent,
IgcSelectItemComponent,
- IgcSelectHeaderComponent
+ IgcSelectHeaderComponent,
+ IgcFileInputComponent
);
@Component({
@@ -64,11 +67,11 @@ export class InputGroupShowcaseSampleComponent {
}
},
inputType: {
- label: 'Input Group Type',
+ label: 'Input Group Type (Only Material theme has border/box and line types)',
control: {
type: 'button-group',
options: ['box', 'border', 'line', 'search'],
- defaultValue: ''
+ defaultValue: 'box'
}
},
type: {
@@ -82,7 +85,13 @@ export class InputGroupShowcaseSampleComponent {
label: {
control: {
type: 'text',
- defaultValue: 'Web address'
+ defaultValue: 'Label text'
+ }
+ },
+ hint: {
+ control: {
+ type: 'text',
+ defaultValue: 'Hint text'
}
},
value: {
@@ -117,7 +126,7 @@ export class InputGroupShowcaseSampleComponent {
}
},
hidePrefix: {
- label: 'Hide Prefix',
+ label: 'Hide Prefix using (@if)',
control: {
type: 'boolean',
defaultValue: false
@@ -217,6 +226,12 @@ export class InputGroupShowcaseSampleComponent {
public getSize = computed(() => `var(--ig-size-${this.properties()?.size || 'medium'})`);
public getPlaceholder = computed(() => this.properties()?.placeholder || null);
public getLabel = computed(() => this.properties()?.label || '');
+
+ public getHint = computed(() => {
+ const hint = this.properties()?.hint || '';
+ return hint.trim() ? hint : null;
+ });
+
public getNativeInputType = computed(() => this.properties()?.type || 'text');
public getInputGroupType = computed(() => this.properties()?.inputType || '');
@@ -224,7 +239,7 @@ export class InputGroupShowcaseSampleComponent {
public isRequired = computed(() => !!this.properties()?.required);
public isDisabled = computed(() => !!this.properties()?.disabled);
public isReadonly = computed(() => !!this.properties()?.readonly);
- public hidePrefix = computed(() => !!this.properties()?.hidePrefix);
- public hideSuffix = computed(() => !!this.properties()?.hideSuffix);
+ public hidePrefix = computed(() => !this.properties()?.hidePrefix);
+ public hideSuffix = computed(() => !this.properties()?.hideSuffix);
}