diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html index 486ae7926..98b0d459a 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/password-input/password-properties/password-properties.component.html @@ -21,12 +21,9 @@ defaultValue: string - Initial value of the password input, only when it is uncontrolled. - - - name: string - - Name attribute of the input element. + + Initial value of the password input element, only when it is uncontrolled. + label: string @@ -34,18 +31,14 @@ Text to be placed above the password. - helperText: string + name: string - Helper text to be placed above the password. + Name attribute of the input element. - error: string + helperText: string - - If it is defined, the component will change its appearance, showing the - error below the password component. If it is not defined, the error - messages will be created internally by the component. - + Helper text to be placed above the password. clearable: boolean @@ -53,8 +46,8 @@ false - If true, the input will have an action to clear the value entered in the - password. + If true, the password input will have an action to clear the entered + value. @@ -82,25 +75,25 @@ - margin: string | object + error: string - Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | - 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an - object with 'top', 'bottom', 'left' and 'right' properties in order to - specify different margin sizes. + If it is defined, the component will change its appearance, showing the + error below the password input component. If it is not defined, the error + messages will be managed internally, but never displayed on its own. pattern: string - Regular expression that defines the valid format allowed by the password. - This will be checked when the input element loses the focus. If the value - entered does not match the pattern, the onBlur function will be called - with the value entered and the error informing that the value does not - match the pattern as parameters. If the pattern is accomplished, the error - parameter will be null. + Regular expression that defines the valid format allowed by the password + input. This will be checked both when the input element loses the focus + and while typing within it. If the string entered does not match the + pattern, the onBlur and onChange functions will be called with the current + value and an internal error informing that this value does not match the + pattern. If the pattern is met, the error parameter of both events will be + null. @@ -130,30 +123,40 @@ - size: string | object + autocomplete: string + 'off' - 'medium' + HTML autocomplete attribute. Lets the user specify if any permission the + user agent has to provide automated assistance in filling out the input + value. Its value must be one of all the possible values of the HTML + autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', + ... + + + margin: string | object + - Size of the component ('small' | 'medium' | 'large' | 'fillParent'). + Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | + 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an + object with 'top', 'bottom', 'left' and 'right' properties in order to + specify different margin sizes. - tabIndexValue: number + size: string - 0 + 'medium' + + + Size of the component ('small' | 'medium' | 'large' | 'fillParent'). - Value of the tabindex attribute. - autocomplete: string - 'off' + tabIndex: number - HTML autocomplete attribute. Lets the user specify if any permission the - user agent has to provide automated assistance in filling out the input - value. Its value must be one of all the possible values of the HTML - autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', - ... + 0 + Value of the tabindex attribute. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-passsword-input.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-passsword-input.types.ts new file mode 100644 index 000000000..7c13e16c7 --- /dev/null +++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-passsword-input.types.ts @@ -0,0 +1,36 @@ +export interface PasswordInputProperties { + margin?: Space | Spacing; + label?: string; + name?: string; + value?: string; + defaultValue?: string; + helperText?: string; + clearable?: boolean; + error?: string; + autocomplete?: string; + size?: "small" | "medium" | "large" | "fillParent"; + tabIndexValue?: number; + minLength?: number; + maxLength?: number; +} + +export type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +export type Spacing = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + +export type EmittedValue = { + value: string; + error: string | null; +}; diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts index 571239c2d..ddd078418 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-password-input/dxc-password-input.component.ts @@ -14,6 +14,12 @@ import { import { BehaviorSubject } from "rxjs"; import { DxcTextInputComponent } from "../dxc-text-input/dxc-text-input.component"; import { CssUtils } from "../utils"; +import { + EmittedValue, + PasswordInputProperties, + Space, + Spacing, +} from "./dxc-passsword-input.types"; import { DxcPasswordInputHelper } from "./dxc-password-input.helper"; @Component({ @@ -23,22 +29,29 @@ import { DxcPasswordInputHelper } from "./dxc-password-input.helper"; }) export class DxcPasswordInputComponent implements OnInit, OnChanges { @HostBinding("class") className; - - @Input() - label: string; - - @Input() - name: string; - - @Input() - value: string; - - @Input() - defaultValue: string; - - @Input() - helperText: string; - + /** + * Text to be placed above the password. + */ + @Input() label: string = ""; + /** + * Name attribute of the input element. + */ + @Input() name: string = ""; + /** + * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component. + */ + @Input() value: string; + /** + * Initial value of the password input, only when it is uncontrolled. + */ + @Input() defaultValue: string; + /** + * Helper text to be placed above the password. + */ + @Input() helperText: string = ""; + /** + * If true, the password input will have an action to clear the entered value. + */ @Input() get clearable(): boolean { return this._clearable; @@ -47,50 +60,90 @@ export class DxcPasswordInputComponent implements OnInit, OnChanges { this._clearable = coerceBooleanProperty(value); } private _clearable = false; - - @Input() - error = ""; - - @Input() - pattern = ""; - - @Input() - margin: Object | string; - - @Input() - minLength: number; - - @Input() - maxLength: number; - - @Input() - tabIndexValue: number; - - @Input() - size: string = "medium"; - - @Input() - autocomplete: string = "off"; - - defaultInputs = new BehaviorSubject({ + /** + * If it is defined, the component will change its appearance, showing + * the error below the password input component. If it is not defined, the + * error messages will be managed internally, but never displayed on its own. + */ + @Input() error: string = ""; + /** + * Regular expression that defines the valid format allowed by the + * password input. This will be checked both when the input element loses the + * focus and while typing within it. If the string entered does not match + * the pattern, the onBlur and onChange functions will be called with the + * current value and an internal error informing that this value does not + * match the pattern. If the pattern is met, the error parameter of both + * events will be null. + */ + @Input() pattern: string; + /** + * Specifies the minimun length allowed by the password input. + * This will be checked both when the input element loses the + * focus and while typing within it. If the string entered does not + * comply the minimum length, the onBlur and onChange functions will be called + * with the current value and an internal error informing that the value + * length does not comply the specified range. If a valid length is + * reached, the error parameter of both events will be null. + */ + @Input() minLength: number; + /** + * Specifies the maximum length allowed by the password input. + * This will be checked both when the input element loses the + * focus and while typing within it. If the string entered does not + * comply the maximum length, the onBlur and onChange functions will be called + * with the current value and an internal error informing that the value + * length does not comply the specified range. If a valid length is + * reached, the error parameter of both events will be null. + */ + @Input() maxLength: number; + /** + * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value. + * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ... + */ + @Input() autocomplete: string = "off"; + /** + * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). + * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. + */ + @Input() margin: Space | Spacing; + /** + * Size of the component ('small' | 'medium' | 'large' | 'fillParent'). + */ + @Input() size: "small" | "medium" | "large" | "fillParent" = "medium"; + /** + * Value of the tabindex attribute. + */ + @Input() tabIndexValue: number = 0; + + defaultInputs = new BehaviorSubject({ error: "", helperText: "", value: undefined, label: "", - margin: "", + margin: null, tabIndexValue: 0, size: "medium", clearable: false, + name: null, + defaultValue: null, + autocomplete: "off", + minLength: null, + maxLength: null, }); - @Output() - onChange = new EventEmitter(); - - @Output() - onBlur = new EventEmitter(); - - @Output() - onError = new EventEmitter(true); + /** + * This function will be called when the user types within the input + * element of the component. An object including the current value and + * the error (if the value entered is not valid) will be passed to this + * function. If there is no error, error will be null. + * */ + @Output() onChange = new EventEmitter(); + /** + * This function will be called when the input element loses the focus. + * An object including the input value and the error (if the value entered is + * not valid) will be passed to this function. If there is no error, error will be null. + */ + @Output() onBlur = new EventEmitter(); @ViewChild("dxcInput", { static: false }) dxcInputRef: DxcTextInputComponent;