cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
63 lines • 10.4 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ButtonType } from '../../enums/button-type.enum';
import { ButtonDensity } from '../../enums/button-density.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/flex";
import * as i3 from "@angular/flex-layout/extended";
export class ButtonComponent {
cdr;
label = 'button';
type = ButtonType.primary;
submit = false;
circle = false;
density = ButtonDensity.middle;
disabled = false;
block = false;
icon = '';
active = false;
inverted = false;
loading = false;
onClick = new EventEmitter();
buttonTypes = ButtonType;
buttonDensity = ButtonDensity;
constructor(cdr) {
this.cdr = cdr;
}
ngOnChanges(changes) {
if (changes['type']) {
this.cdr.detectChanges();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "cfc-button", inputs: { label: "label", type: "type", submit: "submit", circle: "circle", density: "density", disabled: "disabled", block: "block", icon: "icon", active: "active", inverted: "inverted", loading: "loading" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\r\n class=\"br-button\"\r\n [ngClass]=\"{\r\n 'primary': type === buttonTypes.primary,\r\n 'secondary': type === buttonTypes.secondary,\r\n 'tertiary': type === buttonTypes.tertiary,\r\n 'danger': type === buttonTypes.danger,\r\n 'circle': circle,\r\n 'block': block,\r\n 'loading': loading,\r\n 'active': active,\r\n 'dark-mode': inverted,\r\n 'small': density === buttonDensity.small,\r\n 'lager': density === buttonDensity.large,\r\n 'middle': density === buttonDensity.middle,\r\n }\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"icon ? label : null\"\r\n [type]=\"submit ? 'submit' : 'button'\"\r\n fxLayoutGap=\"0.3rem\"\r\n (click)=\"onClick.emit()\"\r\n>\r\n <i *ngIf=\"icon\" [class]=\"'fas fa-' + icon\" aria-hidden=\"true\"></i>\r\n <span *ngIf=\"!circle\">\r\n {{ label }}\r\n </span>\r\n</button>\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.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { 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: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-button', template: "<button\r\n class=\"br-button\"\r\n [ngClass]=\"{\r\n 'primary': type === buttonTypes.primary,\r\n 'secondary': type === buttonTypes.secondary,\r\n 'tertiary': type === buttonTypes.tertiary,\r\n 'danger': type === buttonTypes.danger,\r\n 'circle': circle,\r\n 'block': block,\r\n 'loading': loading,\r\n 'active': active,\r\n 'dark-mode': inverted,\r\n 'small': density === buttonDensity.small,\r\n 'lager': density === buttonDensity.large,\r\n 'middle': density === buttonDensity.middle,\r\n }\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"icon ? label : null\"\r\n [type]=\"submit ? 'submit' : 'button'\"\r\n fxLayoutGap=\"0.3rem\"\r\n (click)=\"onClick.emit()\"\r\n>\r\n <i *ngIf=\"icon\" [class]=\"'fas fa-' + icon\" aria-hidden=\"true\"></i>\r\n <span *ngIf=\"!circle\">\r\n {{ label }}\r\n </span>\r\n</button>\r\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
type: Input
}], type: [{
type: Input
}], submit: [{
type: Input
}], circle: [{
type: Input
}], density: [{
type: Input
}], disabled: [{
type: Input
}], block: [{
type: Input
}], icon: [{
type: Input
}], active: [{
type: Input
}], inverted: [{
type: Input
}], loading: [{
type: Input
}], onClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BILE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7O0FBT2hFLE1BQU0sT0FBTyxlQUFlO0lBb0JoQjtJQWxCRCxLQUFLLEdBQUcsUUFBUSxDQUFDO0lBQ2pCLElBQUksR0FBZSxVQUFVLENBQUMsT0FBTyxDQUFDO0lBQ3RDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDZixNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2YsT0FBTyxHQUFrQixhQUFhLENBQUMsTUFBTSxDQUFDO0lBQzlDLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNkLElBQUksR0FBRyxFQUFFLENBQUM7SUFDVixNQUFNLEdBQUcsS0FBSyxDQUFFO0lBQ2hCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUVmLE9BQU8sR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUV0RCxXQUFXLEdBQXNCLFVBQVUsQ0FBQztJQUM1QyxhQUFhLEdBQXlCLGFBQWEsQ0FBQztJQUU3RCxZQUNVLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO0lBQzVCLENBQUM7SUFFTCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztZQUNwQixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzNCLENBQUM7SUFDTCxDQUFDO3dHQTNCVSxlQUFlOzRGQUFmLGVBQWUsMFRDVDVCLG8zQkEyQkE7OzRGRGxCYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7c0ZBTWIsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCdXR0b25UeXBlIH0gZnJvbSAnLi4vLi4vZW51bXMvYnV0dG9uLXR5cGUuZW51bSc7XHJcbmltcG9ydCB7IEJ1dHRvbkRlbnNpdHkgfSBmcm9tICcuLi8uLi9lbnVtcy9idXR0b24tZGVuc2l0eS5lbnVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLWJ1dHRvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsID0gJ2J1dHRvbic7XHJcbiAgQElucHV0KCkgdHlwZTogQnV0dG9uVHlwZSA9IEJ1dHRvblR5cGUucHJpbWFyeTtcclxuICBASW5wdXQoKSBzdWJtaXQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBjaXJjbGUgPSBmYWxzZTtcclxuICBASW5wdXQoKSBkZW5zaXR5OiBCdXR0b25EZW5zaXR5ID0gQnV0dG9uRGVuc2l0eS5taWRkbGU7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBibG9jayA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGljb24gPSAnJztcclxuICBASW5wdXQoKSBhY3RpdmUgPSBmYWxzZSA7XHJcbiAgQElucHV0KCkgaW52ZXJ0ZWQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBsb2FkaW5nID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICByZWFkb25seSBidXR0b25UeXBlczogdHlwZW9mIEJ1dHRvblR5cGUgPSBCdXR0b25UeXBlO1xyXG4gIHJlYWRvbmx5IGJ1dHRvbkRlbnNpdHk6IHR5cGVvZiBCdXR0b25EZW5zaXR5ID0gQnV0dG9uRGVuc2l0eTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcclxuICApIHsgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICAgIGlmIChjaGFuZ2VzWyd0eXBlJ10pIHtcclxuICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XHJcbiAgICAgIH1cclxuICB9XHJcblxyXG59XHJcbiIsIjxidXR0b25cclxuICBjbGFzcz1cImJyLWJ1dHRvblwiXHJcbiAgW25nQ2xhc3NdPVwie1xyXG4gICAgJ3ByaW1hcnknOiB0eXBlID09PSBidXR0b25UeXBlcy5wcmltYXJ5LFxyXG4gICAgJ3NlY29uZGFyeSc6IHR5cGUgPT09IGJ1dHRvblR5cGVzLnNlY29uZGFyeSxcclxuICAgICd0ZXJ0aWFyeSc6IHR5cGUgPT09IGJ1dHRvblR5cGVzLnRlcnRpYXJ5LFxyXG4gICAgJ2Rhbmdlcic6IHR5cGUgPT09IGJ1dHRvblR5cGVzLmRhbmdlcixcclxuICAgICdjaXJjbGUnOiBjaXJjbGUsXHJcbiAgICAnYmxvY2snOiBibG9jayxcclxuICAgICdsb2FkaW5nJzogbG9hZGluZyxcclxuICAgICdhY3RpdmUnOiBhY3RpdmUsXHJcbiAgICAnZGFyay1tb2RlJzogaW52ZXJ0ZWQsXHJcbiAgICAnc21hbGwnOiBkZW5zaXR5ID09PSBidXR0b25EZW5zaXR5LnNtYWxsLFxyXG4gICAgJ2xhZ2VyJzogZGVuc2l0eSA9PT0gYnV0dG9uRGVuc2l0eS5sYXJnZSxcclxuICAgICAgICAnbWlkZGxlJzogZGVuc2l0eSA9PT0gYnV0dG9uRGVuc2l0eS5taWRkbGUsXHJcbiAgfVwiXHJcbiAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICBbYXR0ci5hcmlhLWxhYmVsXT1cImljb24gPyBsYWJlbCA6IG51bGxcIlxyXG4gIFt0eXBlXT1cInN1Ym1pdCA/ICdzdWJtaXQnIDogJ2J1dHRvbidcIlxyXG4gIGZ4TGF5b3V0R2FwPVwiMC4zcmVtXCJcclxuICAoY2xpY2spPVwib25DbGljay5lbWl0KClcIlxyXG4+XHJcbiAgPGkgKm5nSWY9XCJpY29uXCIgW2NsYXNzXT1cIidmYXMgZmEtJyArIGljb25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgPHNwYW4gKm5nSWY9XCIhY2lyY2xlXCI+XHJcbiAgICB7eyBsYWJlbCB9fVxyXG4gIDwvc3Bhbj5cclxuPC9idXR0b24+XHJcbiJdfQ==