src/input/password.directive.ts
AfterViewInit
| Selector | [cdsPassword], [ibmPassword] |
Properties |
|
Methods |
Inputs |
HostBindings |
Accessors |
constructor(elementRef: ElementRef, renderer: Renderer2)
|
|||||||||
|
Defined in src/input/password.directive.ts:72
|
|||||||||
|
Parameters :
|
| invalid | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/password.directive.ts:53
|
|
| size | |
Type : "sm" | "md" | "lg"
|
|
Default value : "md"
|
|
|
Defined in src/input/password.directive.ts:66
|
|
|
Input field render size |
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/password.directive.ts:55
|
|
| theme | |
Type : "light" | "dark"
|
|
Default value : "dark"
|
|
|
Defined in src/input/password.directive.ts:61
|
|
| type | |
Type : string
|
|
|
Defined in src/input/password.directive.ts:15
|
|
| warn | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/password.directive.ts:54
|
|
| attr.data-invalid |
Type : boolean
|
|
Defined in src/input/password.directive.ts:68
|
| class.cds--layout--size-lg |
Type : boolean
|
|
Defined in src/input/password.directive.ts:45
|
| class.cds--layout--size-md |
Type : boolean
|
|
Defined in src/input/password.directive.ts:42
|
| class.cds--layout--size-sm |
Type : boolean
|
|
Defined in src/input/password.directive.ts:39
|
| class.cds--password-input |
Type : boolean
|
Default value : true
|
|
Defined in src/input/password.directive.ts:23
|
| class.cds--text-input |
Type : boolean
|
Default value : true
|
|
Defined in src/input/password.directive.ts:52
|
| class.cds--text-input--lg |
Type : boolean
|
|
Defined in src/input/password.directive.ts:34
|
| class.cds--text-input--light |
Type : boolean
|
|
Defined in src/input/password.directive.ts:48
|
| class.cds--text-input--md |
Type : boolean
|
|
Defined in src/input/password.directive.ts:31
|
| class.cds--text-input--sm |
Type : boolean
|
|
Defined in src/input/password.directive.ts:28
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Defined in src/input/password.directive.ts:76
|
|
Returns :
void
|
| Private _type |
Type : string
|
Default value : "password"
|
|
Defined in src/input/password.directive.ts:72
|
| inputClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--text-input')
|
|
Defined in src/input/password.directive.ts:52
|
| passwordInputClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--password-input')
|
|
Defined in src/input/password.directive.ts:23
|
| type | ||||||
settype(type: string)
|
||||||
|
Defined in src/input/password.directive.ts:15
|
||||||
|
Parameters :
Returns :
void
|
| isSizeSm |
getisSizeSm()
|
|
Defined in src/input/password.directive.ts:28
|
|
|
| isSizeMd |
getisSizeMd()
|
|
Defined in src/input/password.directive.ts:31
|
| isSizelg |
getisSizelg()
|
|
Defined in src/input/password.directive.ts:34
|
| sizeSm |
getsizeSm()
|
|
Defined in src/input/password.directive.ts:39
|
| sizeMd |
getsizeMd()
|
|
Defined in src/input/password.directive.ts:42
|
| sizelg |
getsizelg()
|
|
Defined in src/input/password.directive.ts:45
|
| isLightTheme |
getisLightTheme()
|
|
Defined in src/input/password.directive.ts:48
|
| getInvalidAttribute |
getgetInvalidAttribute()
|
|
Defined in src/input/password.directive.ts:68
|
import {
Directive,
HostBinding,
Input,
Renderer2,
ElementRef,
AfterViewInit
} from "@angular/core";
@Directive({
selector: "[cdsPassword], [ibmPassword]"
})
export class PasswordInput implements AfterViewInit {
@Input() set type(type: string) {
if (type) {
this._type = type;
if (this.elementRef) {
this.renderer.setAttribute(this.elementRef.nativeElement, "type", this._type);
}
}
}
@HostBinding("class.cds--password-input") passwordInputClass = true;
/**
* @todo - remove `cds--text-input--${size}` classes in v12
*/
@HostBinding("class.cds--text-input--sm") get isSizeSm() {
return this.size === "sm";
}
@HostBinding("class.cds--text-input--md") get isSizeMd() {
return this.size === "md";
}
@HostBinding("class.cds--text-input--lg") get isSizelg() {
return this.size === "lg";
}
// Size
@HostBinding("class.cds--layout--size-sm") get sizeSm() {
return this.size === "sm";
}
@HostBinding("class.cds--layout--size-md") get sizeMd() {
return this.size === "md";
}
@HostBinding("class.cds--layout--size-lg") get sizelg() {
return this.size === "lg";
}
@HostBinding("class.cds--text-input--light") get isLightTheme() {
return this.theme === "light";
}
@HostBinding("class.cds--text-input") inputClass = true;
@HostBinding("class.cds--text-input--invalid") @Input() invalid = false;
@HostBinding("class.cds--text-input--warning") @Input() warn = false;
@HostBinding("class.cds--skeleton") @Input() skeleton = false;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` input theme
*/
@Input() theme: "light" | "dark" = "dark";
/**
* Input field render size
*/
@Input() size: "sm" | "md" | "lg" = "md";
@HostBinding("attr.data-invalid") get getInvalidAttribute() {
return this.invalid ? true : undefined;
}
private _type = "password";
constructor(protected elementRef: ElementRef, protected renderer: Renderer2) { }
ngAfterViewInit(): void {
this.renderer.setAttribute(this.elementRef.nativeElement, "type", this._type);
}
}