carbon-components-angular
Version:
Next generation components
113 lines • 9.05 kB
JavaScript
import { Directive, HostBinding, Input } from "@angular/core";
import * as i0 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.
*/
export class TextInput {
constructor() {
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* `light` or `dark` input theme
*/
this.theme = "dark";
/**
* Input field render size
*/
this.size = "md";
this.inputClass = true;
this.invalid = false;
this.warn = false;
this.skeleton = false;
}
/**
* @todo - remove `cds--text-input--${size}` classes in v12
*/
get isSizeSm() {
return this.size === "sm";
}
get isSizeMd() {
return this.size === "md";
}
get isSizelg() {
return this.size === "lg";
}
// Size
get sizeSm() {
return this.size === "sm";
}
get sizeMd() {
return this.size === "md";
}
get sizelg() {
return this.size === "lg";
}
get isLightTheme() {
return this.theme === "light";
}
get getInvalidAttribute() {
return this.invalid ? true : undefined;
}
}
TextInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TextInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextInput, selector: "[cdsText], [ibmText]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme", "attr.data-invalid": "this.getInvalidAttribute" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, decorators: [{
type: Directive,
args: [{
selector: "[cdsText], [ibmText]"
}]
}], propDecorators: { theme: [{
type: Input
}], size: [{
type: Input
}], inputClass: [{
type: HostBinding,
args: ["class.cds--text-input"]
}], isSizeSm: [{
type: HostBinding,
args: ["class.cds--text-input--sm"]
}], isSizeMd: [{
type: HostBinding,
args: ["class.cds--text-input--md"]
}], isSizelg: [{
type: HostBinding,
args: ["class.cds--text-input--lg"]
}], sizeSm: [{
type: HostBinding,
args: ["class.cds--layout--size-sm"]
}], sizeMd: [{
type: HostBinding,
args: ["class.cds--layout--size-md"]
}], sizelg: [{
type: HostBinding,
args: ["class.cds--layout--size-lg"]
}], invalid: [{
type: HostBinding,
args: ["class.cds--text-input--invalid"]
}, {
type: Input
}], warn: [{
type: HostBinding,
args: ["class.cds--text-input--warning"]
}, {
type: Input
}], skeleton: [{
type: HostBinding,
args: ["class.cds--skeleton"]
}, {
type: Input
}], isLightTheme: [{
type: HostBinding,
args: ["class.cds--text-input--light"]
}], getInvalidAttribute: [{
type: HostBinding,
args: ["attr.data-invalid"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2lucHV0L2lucHV0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRTlEOzs7Ozs7Ozs7O0dBVUc7QUFJSCxNQUFNLE9BQU8sU0FBUztJQUh0QjtRQUlDOzs7V0FHRztRQUNNLFVBQUssR0FBcUIsTUFBTSxDQUFDO1FBRTFDOztXQUVHO1FBQ00sU0FBSSxHQUF1QixJQUFJLENBQUM7UUFFSCxlQUFVLEdBQUcsSUFBSSxDQUFDO1FBMEJBLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUN4QixhQUFRLEdBQUcsS0FBSyxDQUFDO0tBUzlEO0lBbkNBOztPQUVHO0lBQ0gsSUFBOEMsUUFBUTtRQUNyRCxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0lBQzNCLENBQUM7SUFDRCxJQUE4QyxRQUFRO1FBQ3JELE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUNELElBQThDLFFBQVE7UUFDckQsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQsT0FBTztJQUNQLElBQStDLE1BQU07UUFDcEQsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQztJQUMzQixDQUFDO0lBQ0QsSUFBK0MsTUFBTTtRQUNwRCxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0lBQzNCLENBQUM7SUFDRCxJQUErQyxNQUFNO1FBQ3BELE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUtELElBQWlELFlBQVk7UUFDNUQsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLE9BQU8sQ0FBQztJQUMvQixDQUFDO0lBRUQsSUFBc0MsbUJBQW1CO1FBQ3hELE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDeEMsQ0FBQzs7c0dBL0NXLFNBQVM7MEZBQVQsU0FBUzsyRkFBVCxTQUFTO2tCQUhyQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxzQkFBc0I7aUJBQ2hDOzhCQU1TLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRWdDLFVBQVU7c0JBQS9DLFdBQVc7dUJBQUMsdUJBQXVCO2dCQUtVLFFBQVE7c0JBQXJELFdBQVc7dUJBQUMsMkJBQTJCO2dCQUdNLFFBQVE7c0JBQXJELFdBQVc7dUJBQUMsMkJBQTJCO2dCQUdNLFFBQVE7c0JBQXJELFdBQVc7dUJBQUMsMkJBQTJCO2dCQUtPLE1BQU07c0JBQXBELFdBQVc7dUJBQUMsNEJBQTRCO2dCQUdNLE1BQU07c0JBQXBELFdBQVc7dUJBQUMsNEJBQTRCO2dCQUdNLE1BQU07c0JBQXBELFdBQVc7dUJBQUMsNEJBQTRCO2dCQUllLE9BQU87c0JBQTlELFdBQVc7dUJBQUMsZ0NBQWdDOztzQkFBRyxLQUFLO2dCQUNHLElBQUk7c0JBQTNELFdBQVc7dUJBQUMsZ0NBQWdDOztzQkFBRyxLQUFLO2dCQUNSLFFBQVE7c0JBQXBELFdBQVc7dUJBQUMscUJBQXFCOztzQkFBRyxLQUFLO2dCQUNPLFlBQVk7c0JBQTVELFdBQVc7dUJBQUMsOEJBQThCO2dCQUlMLG1CQUFtQjtzQkFBeEQsV0FBVzt1QkFBQyxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbi8qKlxuICogQSBkaXJlY3RpdmUgZm9yIGFwcGx5aW5nIHN0eWxpbmcgdG8gYW4gaW5wdXQgZWxlbWVudC5cbiAqXG4gKiBFeGFtcGxlOlxuICpcbiAqIGBgYGh0bWxcbiAqIDxpbnB1dCBjZHNUZXh0Lz5cbiAqIGBgYFxuICpcbiAqIFNlZSB0aGUgW3ZhbmlsbGEgY2FyYm9uIGRvY3NdKGh0dHA6Ly93d3cuY2FyYm9uZGVzaWduc3lzdGVtLmNvbS9jb21wb25lbnRzL3RleHQtaW5wdXQvY29kZSkgZm9yIG1vcmUgZGV0YWlsLlxuICovXG5ARGlyZWN0aXZlKHtcblx0c2VsZWN0b3I6IFwiW2Nkc1RleHRdLCBbaWJtVGV4dF1cIlxufSlcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXQge1xuXHQvKipcblx0ICogQGRlcHJlY2F0ZWQgc2luY2UgdjUgLSBVc2UgYGNkc0xheWVyYCBkaXJlY3RpdmUgaW5zdGVhZFxuXHQgKiBgbGlnaHRgIG9yIGBkYXJrYCBpbnB1dCB0aGVtZVxuXHQgKi9cblx0QElucHV0KCkgdGhlbWU6IFwibGlnaHRcIiB8IFwiZGFya1wiID0gXCJkYXJrXCI7XG5cblx0LyoqXG5cdCAqIElucHV0IGZpZWxkIHJlbmRlciBzaXplXG5cdCAqL1xuXHRASW5wdXQoKSBzaXplOiBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgPSBcIm1kXCI7XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS10ZXh0LWlucHV0XCIpIGlucHV0Q2xhc3MgPSB0cnVlO1xuXG5cdC8qKlxuXHQgKiBAdG9kbyAtIHJlbW92ZSBgY2RzLS10ZXh0LWlucHV0LS0ke3NpemV9YCBjbGFzc2VzIGluIHYxMlxuXHQgKi9cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS10ZXh0LWlucHV0LS1zbVwiKSBnZXQgaXNTaXplU20oKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJzbVwiO1xuXHR9XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdGV4dC1pbnB1dC0tbWRcIikgZ2V0IGlzU2l6ZU1kKCkge1xuXHRcdHJldHVybiB0aGlzLnNpemUgPT09IFwibWRcIjtcblx0fVxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXRleHQtaW5wdXQtLWxnXCIpIGdldCBpc1NpemVsZygpIHtcblx0XHRyZXR1cm4gdGhpcy5zaXplID09PSBcImxnXCI7XG5cdH1cblxuXHQvLyBTaXplXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGF5b3V0LS1zaXplLXNtXCIpIGdldCBzaXplU20oKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJzbVwiO1xuXHR9XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGF5b3V0LS1zaXplLW1kXCIpIGdldCBzaXplTWQoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJtZFwiO1xuXHR9XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGF5b3V0LS1zaXplLWxnXCIpIGdldCBzaXplbGcoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJsZ1wiO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS10ZXh0LWlucHV0LS1pbnZhbGlkXCIpIEBJbnB1dCgpIGludmFsaWQgPSBmYWxzZTtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS10ZXh0LWlucHV0LS13YXJuaW5nXCIpIEBJbnB1dCgpIHdhcm4gPSBmYWxzZTtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1za2VsZXRvblwiKSBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXRleHQtaW5wdXQtLWxpZ2h0XCIpIGdldCBpc0xpZ2h0VGhlbWUoKSB7XG5cdFx0cmV0dXJuIHRoaXMudGhlbWUgPT09IFwibGlnaHRcIjtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImF0dHIuZGF0YS1pbnZhbGlkXCIpIGdldCBnZXRJbnZhbGlkQXR0cmlidXRlKCkge1xuXHRcdHJldHVybiB0aGlzLmludmFsaWQgPyB0cnVlIDogdW5kZWZpbmVkO1xuXHR9XG5cbn1cbiJdfQ==