src/input/input.directive.ts
A directive for applying styling to an input element.
Example:
Example :<input cdsText/>See the vanilla carbon docs for more detail.
| Selector | [cdsText], [ibmText] |
Properties |
Inputs |
HostBindings |
Accessors |
| invalid | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/input.directive.ts:55
|
|
| size | |
Type : "sm" | "md" | "lg"
|
|
Default value : "md"
|
|
|
Defined in src/input/input.directive.ts:27
|
|
|
Input field render size |
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/input.directive.ts:57
|
|
| theme | |
Type : "light" | "dark"
|
|
Default value : "dark"
|
|
|
Defined in src/input/input.directive.ts:22
|
|
| warn | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/input/input.directive.ts:56
|
|
| attr.data-invalid |
Type : boolean
|
|
Defined in src/input/input.directive.ts:62
|
| class.cds--layout--size-lg |
Type : boolean
|
|
Defined in src/input/input.directive.ts:51
|
| class.cds--layout--size-md |
Type : boolean
|
|
Defined in src/input/input.directive.ts:48
|
| class.cds--layout--size-sm |
Type : boolean
|
|
Defined in src/input/input.directive.ts:45
|
| class.cds--text-input |
Type : boolean
|
Default value : true
|
|
Defined in src/input/input.directive.ts:29
|
| class.cds--text-input--lg |
Type : boolean
|
|
Defined in src/input/input.directive.ts:40
|
| class.cds--text-input--light |
Type : boolean
|
|
Defined in src/input/input.directive.ts:58
|
| class.cds--text-input--md |
Type : boolean
|
|
Defined in src/input/input.directive.ts:37
|
| class.cds--text-input--sm |
Type : boolean
|
|
Defined in src/input/input.directive.ts:34
|
| inputClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--text-input')
|
|
Defined in src/input/input.directive.ts:29
|
| isSizeSm |
getisSizeSm()
|
|
Defined in src/input/input.directive.ts:34
|
|
|
| isSizeMd |
getisSizeMd()
|
|
Defined in src/input/input.directive.ts:37
|
| isSizelg |
getisSizelg()
|
|
Defined in src/input/input.directive.ts:40
|
| sizeSm |
getsizeSm()
|
|
Defined in src/input/input.directive.ts:45
|
| sizeMd |
getsizeMd()
|
|
Defined in src/input/input.directive.ts:48
|
| sizelg |
getsizelg()
|
|
Defined in src/input/input.directive.ts:51
|
| isLightTheme |
getisLightTheme()
|
|
Defined in src/input/input.directive.ts:58
|
| getInvalidAttribute |
getgetInvalidAttribute()
|
|
Defined in src/input/input.directive.ts:62
|
import { Directive, HostBinding, Input } from "@angular/core";
/**
* A directive for applying styling to an input element.
*
* Example:
*
* ```html
* <input cdsText/>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
*/
@Directive({
selector: "[cdsText], [ibmText]"
})
export class TextInput {
/**
* @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("class.cds--text-input") inputClass = 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--invalid") @Input() invalid = false;
@HostBinding("class.cds--text-input--warning") @Input() warn = false;
@HostBinding("class.cds--skeleton") @Input() skeleton = false;
@HostBinding("class.cds--text-input--light") get isLightTheme() {
return this.theme === "light";
}
@HostBinding("attr.data-invalid") get getInvalidAttribute() {
return this.invalid ? true : undefined;
}
}