cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
69 lines • 12.8 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @angular-eslint/no-output-on-prefix */
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { InputState } from '../../enums/input-state.enum';
import { InputDensity } from '../../enums/input-density.enum';
import { CustomValueAccessor } from '../_base/value-accessor.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/flex-layout/extended";
export class InputComponent extends CustomValueAccessor {
buttonAriaLabel = '';
formControlName = null;
isPassword = false;
isHighlight = false;
inverted = false;
labelInline = false;
state = InputState.default;
density = InputDensity.medium;
buttonIcon;
label;
type;
placeholder;
icon;
onInput = new EventEmitter();
onIconClicked = new EventEmitter();
onIconSubmited = new EventEmitter();
inputDensities = InputDensity;
inputStates = InputState;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, selector: "cfc-input", inputs: { 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" }, outputs: { onInput: "onInput", onIconClicked: "onIconClicked", onIconSubmited: "onIconSubmited" }, usesInheritance: 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 [id]=\"'input-icon'+(density !== inputDensities.medium ? '-' + density : '')\"\r\n [type]=\"isPassword ? 'password' : type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [formControlName]=\"formControlName\"\r\n [value]=\"value ? value : ''\"\r\n (ngModelChange)=\"onChange($event)\" />\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>\r\n", 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.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', 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 [id]=\"'input-icon'+(density !== inputDensities.medium ? '-' + density : '')\"\r\n [type]=\"isPassword ? 'password' : type\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [formControlName]=\"formControlName\"\r\n [value]=\"value ? value : ''\"\r\n (ngModelChange)=\"onChange($event)\" />\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>\r\n" }]
}], propDecorators: { 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
}], onInput: [{
type: Output
}], onIconClicked: [{
type: Output
}], onIconSubmited: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2ZjLWRzL3NyYy9saWIvY29tcG9uZW50cy9pbnB1dC9pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL2lucHV0L2lucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHVEQUF1RDtBQUN2RCx3REFBd0Q7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRTlELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7OztBQU94RSxNQUFNLE9BQU8sY0FBZSxTQUFRLG1CQUFvQztJQUM3RCxlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLGVBQWUsR0FBMkIsSUFBSSxDQUFDO0lBQy9DLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDbkIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUNwQixRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ2pCLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDcEIsS0FBSyxHQUFlLFVBQVUsQ0FBQyxPQUFPLENBQUM7SUFDdkMsT0FBTyxHQUFpQixZQUFZLENBQUMsTUFBTSxDQUFDO0lBQzVDLFVBQVUsQ0FBVTtJQUNwQixLQUFLLENBQVU7SUFDZixJQUFJLENBQVU7SUFDZCxXQUFXLENBQVU7SUFDckIsSUFBSSxDQUFVO0lBRWIsT0FBTyxHQUFrQyxJQUFJLFlBQVksRUFBbUIsQ0FBQztJQUM3RSxhQUFhLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFDM0QsY0FBYyxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBRTdELGNBQWMsR0FBRyxZQUFZLENBQUM7SUFDOUIsV0FBVyxHQUFHLFVBQVUsQ0FBQzt3R0FwQnZCLGNBQWM7NEZBQWQsY0FBYyw2ZUNiM0IsbzBDQWlEQTs7NEZEcENhLGNBQWM7a0JBTDFCLFNBQVM7K0JBQ0UsV0FBVzs4QkFLWixlQUFlO3NCQUF2QixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csY0FBYztzQkFBdkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnkgKi9cclxuLyogZXNsaW50LWRpc2FibGUgQGFuZ3VsYXItZXNsaW50L25vLW91dHB1dC1vbi1wcmVmaXggKi9cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJbnB1dFN0YXRlIH0gZnJvbSAnLi4vLi4vZW51bXMvaW5wdXQtc3RhdGUuZW51bSc7XHJcbmltcG9ydCB7IElucHV0RGVuc2l0eSB9IGZyb20gJy4uLy4uL2VudW1zL2lucHV0LWRlbnNpdHkuZW51bSc7XHJcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBDdXN0b21WYWx1ZUFjY2Vzc29yIH0gZnJvbSAnLi4vX2Jhc2UvdmFsdWUtYWNjZXNzb3IuY29tcG9uZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLWlucHV0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9pbnB1dC5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGV4dGVuZHMgQ3VzdG9tVmFsdWVBY2Nlc3NvcjxzdHJpbmcgfCBudW1iZXI+IHtcclxuICBASW5wdXQoKSBidXR0b25BcmlhTGFiZWwgPSAnJztcclxuICBASW5wdXQoKSBmb3JtQ29udHJvbE5hbWU6IHN0cmluZyB8IG51bWJlciB8IG51bGwgPSBudWxsO1xyXG4gIEBJbnB1dCgpIGlzUGFzc3dvcmQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBpc0hpZ2hsaWdodCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGludmVydGVkID0gZmFsc2U7XHJcbiAgQElucHV0KCkgbGFiZWxJbmxpbmUgPSBmYWxzZTtcclxuICBASW5wdXQoKSBzdGF0ZTogSW5wdXRTdGF0ZSA9IElucHV0U3RhdGUuZGVmYXVsdDtcclxuICBASW5wdXQoKSBkZW5zaXR5OiBJbnB1dERlbnNpdHkgPSBJbnB1dERlbnNpdHkubWVkaXVtO1xyXG4gIEBJbnB1dCgpIGJ1dHRvbkljb24/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgbGFiZWw/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdHlwZT86IHN0cmluZztcclxuICBASW5wdXQoKSBwbGFjZWhvbGRlcj86IHN0cmluZztcclxuICBASW5wdXQoKSBpY29uPzogc3RyaW5nO1xyXG5cclxuICBAT3V0cHV0KCkgb25JbnB1dDogRXZlbnRFbWl0dGVyPHN0cmluZyB8IG51bWJlcj4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZyB8IG51bWJlcj4oKTtcclxuICBAT3V0cHV0KCkgb25JY29uQ2xpY2tlZDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICBAT3V0cHV0KCkgb25JY29uU3VibWl0ZWQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcblxyXG4gIHJlYWRvbmx5IGlucHV0RGVuc2l0aWVzID0gSW5wdXREZW5zaXR5O1xyXG4gIHJlYWRvbmx5IGlucHV0U3RhdGVzID0gSW5wdXRTdGF0ZTtcclxuXHJcbn1cclxuIiwiPGRpdlxyXG4gIGNsYXNzPVwiYnItaW5wdXRcIlxyXG4gIFtjbGFzcy5pbnB1dC1pbmxpbmVdPVwibGFiZWxJbmxpbmVcIlxyXG4gIFtjbGFzcy5pbnB1dC1idXR0b25dPVwibGFiZWxJbmxpbmVcIlxyXG4gIFtuZ0NsYXNzXT1cInN0YXRlXCI+XHJcbiAgPGRpdlxyXG4gICAgKm5nSWY9XCJsYWJlbFwiXHJcbiAgICBjbGFzcz1cImlucHV0LWxhYmVsXCI+XHJcbiAgICA8bGFiZWxcclxuICAgICAgY2xhc3M9XCJ0ZXh0LW5vd3JhcFwiXHJcbiAgICAgIFtmb3JdPVwiJ2lucHV0LScrKGljb24gPyBpY29uICsgJy0nIDogJycpK2RlbnNpdHlcIj5cclxuICAgICAge3sgbGFiZWwgfX1cclxuICAgIDwvbGFiZWw+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJpbnB1dC1jb250ZW50XCI+XHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwiaW5wdXQtZ3JvdXBcIj5cclxuICAgICAgPGRpdlxyXG4gICAgICAgICpuZ0lmPVwiaWNvblwiXHJcbiAgICAgICAgY2xhc3M9XCJpbnB1dC1pY29uXCI+XHJcbiAgICAgICAgPGlcclxuICAgICAgICAgIFtjbGFzc109XCInZmFzIGZhLScgKyBpY29uXCJcclxuICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxyXG4gICAgICAgIDwvaT5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8aW5wdXRcclxuICAgICAgICBbaWRdPVwiJ2lucHV0LWljb24nKyhkZW5zaXR5ICE9PSBpbnB1dERlbnNpdGllcy5tZWRpdW0gPyAnLScgKyBkZW5zaXR5IDogJycpXCJcclxuICAgICAgICBbdHlwZV09XCJpc1Bhc3N3b3JkID8gJ3Bhc3N3b3JkJyA6IHR5cGVcIlxyXG4gICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImZvcm1Db250cm9sTmFtZVwiXHJcbiAgICAgICAgW3ZhbHVlXT1cInZhbHVlID8gdmFsdWUgOiAnJ1wiXHJcbiAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiIC8+XHJcblxyXG4gICAgICA8YnV0dG9uXHJcbiAgICAgICAgKm5nSWY9XCJidXR0b25JY29uXCJcclxuICAgICAgICBjbGFzcz1cImJyLWJ1dHRvblwiXHJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgW2FyaWFMYWJlbF09XCJidXR0b25BcmlhTGFiZWxcIj5cclxuICAgICAgICA8aVxyXG4gICAgICAgICAgW2NsYXNzXT1cIidmYSBmYS0nICsgYnV0dG9uSWNvblwiXHJcbiAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIj5cclxuICAgICAgICA8L2k+XHJcbiAgICAgIDwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=