cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
92 lines • 13.3 kB
JavaScript
import { Component, Input, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { InputState } from '../../enums/input-state.enum';
import { InputDensity } from '../../enums/input-density.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/extended";
export class InputComponent {
disabled = false;
buttonAriaLabel = '';
formControlName = null;
isPassword = false;
isHighlight = false;
inverted = false;
labelInline = false;
state = InputState.default;
density = InputDensity.medium;
buttonIcon;
label;
type;
placeholder;
icon;
value; // Valor do input
onChange = () => { };
onTouched = () => { };
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onInputChange(event) {
const inputValue = event.target.value;
this.value = inputValue;
this.onChange(inputValue);
this.onTouched();
}
inputDensities = InputDensity;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, selector: "cfc-input", inputs: { disabled: "disabled", buttonAriaLabel: "buttonAriaLabel", formControlName: "formControlName", isPassword: "isPassword", isHighlight: "isHighlight", inverted: "inverted", labelInline: "labelInline", state: "state", density: "density", buttonIcon: "buttonIcon", label: "label", type: "type", placeholder: "placeholder", icon: "icon" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
], ngImport: i0, template: "<div\r\n class=\"br-input\"\r\n [class.input-inline]=\"labelInline\"\r\n [class.input-button]=\"labelInline\"\r\n [ngClass]=\"state\">\r\n <div\r\n *ngIf=\"label\"\r\n class=\"input-label\">\r\n <label\r\n class=\"text-nowrap\"\r\n [for]=\"'input-'+(icon ? icon + '-' : '')+density\">\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div\r\n class=\"input-content\">\r\n <div\r\n class=\"input-group\">\r\n <div\r\n *ngIf=\"icon\"\r\n class=\"input-icon\">\r\n <i\r\n [class]=\"'fas fa-' + icon\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </div>\r\n\r\n <input\r\n [value]=\"value\"\r\n (input)=\"onInputChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n />\r\n\r\n <button\r\n *ngIf=\"buttonIcon\"\r\n class=\"br-button\"\r\n type=\"button\"\r\n [ariaLabel]=\"buttonAriaLabel\">\r\n <i\r\n [class]=\"'fa fa-' + buttonIcon\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-input', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
], template: "<div\r\n class=\"br-input\"\r\n [class.input-inline]=\"labelInline\"\r\n [class.input-button]=\"labelInline\"\r\n [ngClass]=\"state\">\r\n <div\r\n *ngIf=\"label\"\r\n class=\"input-label\">\r\n <label\r\n class=\"text-nowrap\"\r\n [for]=\"'input-'+(icon ? icon + '-' : '')+density\">\r\n {{ label }}\r\n </label>\r\n </div>\r\n <div\r\n class=\"input-content\">\r\n <div\r\n class=\"input-group\">\r\n <div\r\n *ngIf=\"icon\"\r\n class=\"input-icon\">\r\n <i\r\n [class]=\"'fas fa-' + icon\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </div>\r\n\r\n <input\r\n [value]=\"value\"\r\n (input)=\"onInputChange($event)\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n />\r\n\r\n <button\r\n *ngIf=\"buttonIcon\"\r\n class=\"br-button\"\r\n type=\"button\"\r\n [ariaLabel]=\"buttonAriaLabel\">\r\n <i\r\n [class]=\"'fa fa-' + buttonIcon\"\r\n aria-hidden=\"true\">\r\n </i>\r\n </button>\r\n </div>\r\n </div>\r\n</div>" }]
}], propDecorators: { disabled: [{
type: Input
}], buttonAriaLabel: [{
type: Input
}], formControlName: [{
type: Input
}], isPassword: [{
type: Input
}], isHighlight: [{
type: Input
}], inverted: [{
type: Input
}], labelInline: [{
type: Input
}], state: [{
type: Input
}], density: [{
type: Input
}], buttonIcon: [{
type: Input
}], label: [{
type: Input
}], type: [{
type: Input
}], placeholder: [{
type: Input
}], icon: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2ZjLWRzL3NyYy9saWIvY29tcG9uZW50cy9pbnB1dC9pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL2lucHV0L2lucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWdCLEtBQUssRUFBVSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7Ozs7QUFjOUQsTUFBTSxPQUFPLGNBQWM7SUFDaEIsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNqQixlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLGVBQWUsR0FBMkIsSUFBSSxDQUFDO0lBQy9DLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUNwQixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ2pCLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDcEIsS0FBSyxHQUFlLFVBQVUsQ0FBQyxPQUFPLENBQUM7SUFDdkMsT0FBTyxHQUFpQixZQUFZLENBQUMsTUFBTSxDQUFDO0lBQzVDLFVBQVUsQ0FBVTtJQUNwQixLQUFLLENBQVU7SUFDZixJQUFJLENBQVU7SUFDZCxXQUFXLENBQVU7SUFDckIsSUFBSSxDQUFVO0lBRXZCLEtBQUssQ0FBTSxDQUFDLGlCQUFpQjtJQUM3QixRQUFRLEdBQXlCLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUMxQyxTQUFTLEdBQWUsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBRWpDLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBRSxVQUFtQjtRQUNuQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQVk7UUFDeEIsTUFBTSxVQUFVLEdBQUksS0FBSyxDQUFDLE1BQTJCLENBQUMsS0FBSyxDQUFDO1FBQzVELElBQUksQ0FBQyxLQUFLLEdBQUcsVUFBVSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFDRCxjQUFjLEdBQUcsWUFBWSxDQUFDO3dHQTFDbkIsY0FBYzs0RkFBZCxjQUFjLDRYQVJkO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUM7Z0JBQzdDLEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRiwwQkNmSCx5bkNBOENNOzs0RkQ3Qk8sY0FBYztrQkFaMUIsU0FBUzsrQkFDRSxXQUFXLGFBR1Y7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDOzRCQUM3QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjs4QkFHUSxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBJbnB1dFN0YXRlIH0gZnJvbSAnLi4vLi4vZW51bXMvaW5wdXQtc3RhdGUuZW51bSc7XHJcbmltcG9ydCB7IElucHV0RGVuc2l0eSB9IGZyb20gJy4uLy4uL2VudW1zL2lucHV0LWRlbnNpdHkuZW51bSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NmYy1pbnB1dCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2lucHV0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gSW5wdXRDb21wb25lbnQpLFxyXG4gICAgICBtdWx0aTogdHJ1ZVxyXG4gICAgfVxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgQElucHV0KCkgYnV0dG9uQXJpYUxhYmVsID0gJyc7XHJcbiAgQElucHV0KCkgZm9ybUNvbnRyb2xOYW1lOiBzdHJpbmcgfCBudW1iZXIgfCBudWxsID0gbnVsbDtcclxuICBASW5wdXQoKSBpc1Bhc3N3b3JkID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaXNIaWdobGlnaHQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBpbnZlcnRlZCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGxhYmVsSW5saW5lID0gZmFsc2U7XHJcbiAgQElucHV0KCkgc3RhdGU6IElucHV0U3RhdGUgPSBJbnB1dFN0YXRlLmRlZmF1bHQ7XHJcbiAgQElucHV0KCkgZGVuc2l0eTogSW5wdXREZW5zaXR5ID0gSW5wdXREZW5zaXR5Lm1lZGl1bTtcclxuICBASW5wdXQoKSBidXR0b25JY29uPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGxhYmVsPzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHR5cGU/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcclxuXHJcbiAgdmFsdWU6IGFueTsgLy8gVmFsb3IgZG8gaW5wdXRcclxuICBvbkNoYW5nZTogKHZhbHVlOiBhbnkpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuICBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuXHJcbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcclxuICB9XHJcblxyXG4gIG9uSW5wdXRDaGFuZ2UoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XHJcbiAgICBjb25zdCBpbnB1dFZhbHVlID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS52YWx1ZTtcclxuICAgIHRoaXMudmFsdWUgPSBpbnB1dFZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZShpbnB1dFZhbHVlKTtcclxuICAgIHRoaXMub25Ub3VjaGVkKCk7XHJcbiAgfVxyXG4gIGlucHV0RGVuc2l0aWVzID0gSW5wdXREZW5zaXR5O1xyXG59IiwiPGRpdlxyXG4gIGNsYXNzPVwiYnItaW5wdXRcIlxyXG4gIFtjbGFzcy5pbnB1dC1pbmxpbmVdPVwibGFiZWxJbmxpbmVcIlxyXG4gIFtjbGFzcy5pbnB1dC1idXR0b25dPVwibGFiZWxJbmxpbmVcIlxyXG4gIFtuZ0NsYXNzXT1cInN0YXRlXCI+XHJcbiAgPGRpdlxyXG4gICAgKm5nSWY9XCJsYWJlbFwiXHJcbiAgICBjbGFzcz1cImlucHV0LWxhYmVsXCI+XHJcbiAgICA8bGFiZWxcclxuICAgICAgY2xhc3M9XCJ0ZXh0LW5vd3JhcFwiXHJcbiAgICAgIFtmb3JdPVwiJ2lucHV0LScrKGljb24gPyBpY29uICsgJy0nIDogJycpK2RlbnNpdHlcIj5cclxuICAgICAge3sgbGFiZWwgfX1cclxuICAgIDwvbGFiZWw+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJpbnB1dC1jb250ZW50XCI+XHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwiaW5wdXQtZ3JvdXBcIj5cclxuICAgICAgPGRpdlxyXG4gICAgICAgICpuZ0lmPVwiaWNvblwiXHJcbiAgICAgICAgY2xhc3M9XCJpbnB1dC1pY29uXCI+XHJcbiAgICAgICAgPGlcclxuICAgICAgICAgIFtjbGFzc109XCInZmFzIGZhLScgKyBpY29uXCJcclxuICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxyXG4gICAgICAgIDwvaT5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8aW5wdXRcclxuICAgICAgICBbdmFsdWVdPVwidmFsdWVcIlxyXG4gICAgICAgIChpbnB1dCk9XCJvbklucHV0Q2hhbmdlKCRldmVudClcIlxyXG4gICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgLz5cclxuXHJcbiAgICAgIDxidXR0b25cclxuICAgICAgICAqbmdJZj1cImJ1dHRvbkljb25cIlxyXG4gICAgICAgIGNsYXNzPVwiYnItYnV0dG9uXCJcclxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICBbYXJpYUxhYmVsXT1cImJ1dHRvbkFyaWFMYWJlbFwiPlxyXG4gICAgICAgIDxpXHJcbiAgICAgICAgICBbY2xhc3NdPVwiJ2ZhIGZhLScgKyBidXR0b25JY29uXCJcclxuICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxyXG4gICAgICAgIDwvaT5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9kaXY+Il19