Skip to content

Commit 4fa5a4c

Browse files
JialeclJialecl
authored
Merge pull request #801 from dxc-technology/aida-textinput-types
Added types in text input
2 parents 6084b8e + 8ec0286 commit 4fa5a4c

File tree

2 files changed

+152
-58
lines changed

2 files changed

+152
-58
lines changed

‎projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.component.ts‎

Lines changed: 116 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { v4 as uuidv4 } from "uuid";
2323
import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
2424
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
2525
import EmittedValue from "./emitted-value.type";
26+
import { Space, Spacing, TextInputProperties } from "./dxc-text-input.types";
2627

2728
@Component({
2829
selector: "dxc-text-input",
@@ -44,29 +45,40 @@ export class DxcTextInputComponent
4445
@HostBinding("class") className;
4546
@HostBinding("class.hasError") hasError = false;
4647

47-
@Input()
48-
label: string;
49-
50-
@Input()
51-
name: string;
52-
53-
@Input()
54-
value: string;
55-
56-
@Input()
57-
defaultValue: string;
58-
59-
@Input()
60-
id: string;
61-
62-
@Input()
63-
helperText: string;
64-
65-
@Input()
66-
autocomplete: string = "off";
48+
/**
49+
* Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
50+
*/
51+
@Input() label: string;
52+
/**
53+
* Name attribute of the input element.
54+
*/
55+
@Input() name: string = "";
56+
/**
57+
* Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
58+
*/
59+
@Input() value: string;
60+
/**
61+
* Initial value of the input, only when it is uncontrolled.
62+
*/
63+
@Input() defaultValue: string;
64+
/**
65+
* Helper text to be placed above the input.
66+
*/
67+
@Input() helperText: string;
68+
/**
69+
* Text to be put as placeholder of the input.
70+
*/
71+
@Input() placeholder: string = "";
72+
/**
73+
* HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
74+
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
75+
*/
76+
@Input() autocomplete: string = "off";
6777

6878
hasAction = () => this.onActionClick.observers.length;
69-
79+
/**
80+
* If true, the component will be disabled.
81+
*/
7082
@Input()
7183
get disabled(): boolean {
7284
return this._disabled;
@@ -75,7 +87,12 @@ export class DxcTextInputComponent
7587
this._disabled = coerceBooleanProperty(value);
7688
}
7789
private _disabled = false;
78-
90+
/**
91+
* If true, the input will be optional, showing '(Optional)'
92+
* next to the label. Otherwise, the field will be considered required and an error will be
93+
* passed as a parameter to the OnBlur and onChange events when it has
94+
* not been filled.
95+
*/
7996
@Input()
8097
get optional(): boolean {
8198
return this._optional;
@@ -84,42 +101,71 @@ export class DxcTextInputComponent
84101
this._optional = coerceBooleanProperty(value);
85102
}
86103
private _optional = false;
104+
/**
105+
* If true, the input will have an action to clear the entered value.
106+
*/
107+
@Input() clearable: boolean = false;
108+
/**
109+
* If it is defined, the component will change its appearance, showing
110+
* the error below the input component. If it is not defined, the error
111+
* messages will be managed internally, but never displayed on its own.
112+
*/
113+
@Input() error: string = "";
114+
/**
115+
* Regular expression that defines the valid format allowed by the input.
116+
* This will be checked when the input loses the focus. If the value entered
117+
* does not match the pattern, the onBlur event will emit with the value
118+
* entered and the error informing that the value does not match the pattern
119+
* as parameters. If the pattern is accomplished, the error parameter will be
120+
* null.
121+
*/
122+
@Input() pattern: string;
123+
/**
124+
* Specifies the minimun length allowed by the input. This will be checked
125+
* both when the input element loses the focus and while typing within it. If
126+
* the string entered does not comply the minimum length, the onBlur and
127+
* onChange events will emit with the current value and an internal error
128+
* informing that the value length does not comply the specified range. If a
129+
* valid length is reached, the error parameter of both events will be null.
130+
*/
131+
@Input() minLength: number;
132+
/**
133+
* Specifies the maximum length allowed by the input. This will be checked
134+
* both when the input element loses the focus and while typing within it. If
135+
* the string entered does not comply the maximum length, the onBlur and
136+
* onChange events will emit with the current value and an internal error
137+
* informing that the value length does not comply the specified range. If a
138+
* valid length is reached, the error parameter of both events will be null.
139+
*/
140+
@Input() maxLength: number;
141+
/**
142+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
143+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
144+
*/
145+
@Input() margin: Space | Spacing;
146+
/**
147+
* These are the options to be displayed as suggestions. It can be either an array or a function:
148+
* - Array: Array of options that will be filtered by the component.
149+
* - Function: This function will be called when the user changes the value, we will send as a parameter the new value;
150+
* apart from that this function should return one promise on which we should make 'then' to get the suggestions filtered.
151+
*/
152+
@Input() suggestions: Array<string> | any;
153+
154+
/**
155+
* Value of the tabindex attribute.
156+
*/
157+
@Input() tabIndexValue: number = 0;
158+
/**
159+
* Size of the component ('small' | 'medium' | 'large' | 'fillParent').
160+
*/
161+
@Input() size: "small" | "medium" | "large" | "fillParent" = "medium";
87162

88-
@Input()
89-
clearable = false;
90-
91-
@Input()
92-
error = undefined;
93-
94-
@Input()
95-
placeholder = "";
96-
97-
@Input()
98-
pattern = "";
99-
100-
@Input()
101-
minLength: number;
102-
103-
@Input()
104-
maxLength: number;
105-
106-
@Input()
107-
margin: Object | string;
108-
109-
@Input()
110-
suggestions: any;
111-
112-
@Input()
113-
tabIndexValue: number;
114-
115-
@Input()
116-
size: string;
117-
163+
id: string;
118164
autoSuggestId: string;
119165

120166
private controlled: boolean;
121167

122-
defaultInputs = new BehaviorSubject<any>({
168+
defaultInputs = new BehaviorSubject<TextInputProperties>({
123169
placeholder: "",
124170
error: "",
125171
clearable: false,
@@ -129,20 +175,32 @@ export class DxcTextInputComponent
129175
value: undefined,
130176
name: "",
131177
label: "",
132-
margin: "",
178+
margin: null,
133179
suggestions: [],
134180
tabIndexValue: 0,
135181
size: "medium",
136182
});
137-
183+
/**
184+
* This event will be emit when the user types within the input
185+
* element of the component. An object including the current value and
186+
* the error (if the value entered is not valid) will be passed to this
187+
* event. If there is no error, error will be null.
188+
*/
138189
@Output()
139190
onChange = new EventEmitter<EmittedValue>();
140-
191+
/**
192+
* This event will emit when the input element loses the focus.
193+
* An object including the input value and the error (if the value
194+
* entered is not valid) will be passed to this event. If there is no error,
195+
* error will be null.
196+
*/
141197
@Output()
142198
onBlur = new EventEmitter<EmittedValue>();
143-
199+
/**
200+
* This event will emit when the action is clicked.
201+
*/
144202
@Output()
145-
onActionClick = new EventEmitter<any>();
203+
onActionClick = new EventEmitter<string>();
146204

147205
@ViewChild("inputRef", { static: true }) inputRef: ElementRef;
148206
@ViewChild("autoSuggestOptions", { static: false }) optionsRef: ElementRef;

‎projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-text-input.types.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export interface TextInputProperties {
2+
label?: string;
3+
name?: string;
4+
margin?: Space | Spacing;
5+
disabled?: boolean;
6+
tabIndexValue?: number;
7+
value?: string;
8+
defaultValue?: string;
9+
helperText?: string;
10+
placeholder?: string;
11+
autocomplete?: string;
12+
optional?: boolean;
13+
clearable?: boolean;
14+
error?: string;
15+
pattern?: string;
16+
minLength?: number;
17+
maxLength?: number;
18+
size?: "small" | "medium" | "large" | "fillParent";
19+
suggestions?: any;
20+
}
21+
22+
export type Space =
23+
| "xxsmall"
24+
| "xsmall"
25+
| "small"
26+
| "medium"
27+
| "large"
28+
| "xlarge"
29+
| "xxlarge";
30+
31+
export type Spacing = {
32+
top?: Space;
33+
bottom?: Space;
34+
left?: Space;
35+
right?: Space;
36+
};

0 commit comments

Comments
 (0)