cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
62 lines • 9.85 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;
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 }\"\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 <i\r\n *ngIf=\"icon\"\r\n [class]=\"'fas fa-' + icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span\r\n *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 }\"\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 <i\r\n *ngIf=\"icon\"\r\n [class]=\"'fas fa-' + icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n <span\r\n *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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BILE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7O0FBT2hFLE1BQU0sT0FBTyxlQUFlO0lBbUJoQjtJQWpCRCxLQUFLLEdBQUcsUUFBUSxDQUFDO0lBQ2pCLElBQUksR0FBZSxVQUFVLENBQUMsT0FBTyxDQUFDO0lBQ3RDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDZixNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2YsT0FBTyxHQUFrQixhQUFhLENBQUMsTUFBTSxDQUFDO0lBQzlDLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNkLElBQUksR0FBRyxFQUFFLENBQUM7SUFDVixNQUFNLEdBQUcsS0FBSyxDQUFFO0lBQ2hCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUVmLE9BQU8sR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUV0RCxXQUFXLEdBQXNCLFVBQVUsQ0FBQztJQUVyRCxZQUNVLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO0lBQzVCLENBQUM7SUFFTCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztZQUNwQixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQzNCLENBQUM7SUFDTCxDQUFDO3dHQTFCVSxlQUFlOzRGQUFmLGVBQWUsMFRDVDVCLHd2QkE0QkE7OzRGRG5CYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7c0ZBTWIsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCdXR0b25UeXBlIH0gZnJvbSAnLi4vLi4vZW51bXMvYnV0dG9uLXR5cGUuZW51bSc7XHJcbmltcG9ydCB7IEJ1dHRvbkRlbnNpdHkgfSBmcm9tICcuLi8uLi9lbnVtcy9idXR0b24tZGVuc2l0eS5lbnVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLWJ1dHRvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsID0gJ2J1dHRvbic7XHJcbiAgQElucHV0KCkgdHlwZTogQnV0dG9uVHlwZSA9IEJ1dHRvblR5cGUucHJpbWFyeTtcclxuICBASW5wdXQoKSBzdWJtaXQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBjaXJjbGUgPSBmYWxzZTtcclxuICBASW5wdXQoKSBkZW5zaXR5OiBCdXR0b25EZW5zaXR5ID0gQnV0dG9uRGVuc2l0eS5taWRkbGU7XHJcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBibG9jayA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGljb24gPSAnJztcclxuICBASW5wdXQoKSBhY3RpdmUgPSBmYWxzZSA7XHJcbiAgQElucHV0KCkgaW52ZXJ0ZWQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBsb2FkaW5nID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICByZWFkb25seSBidXR0b25UeXBlczogdHlwZW9mIEJ1dHRvblR5cGUgPSBCdXR0b25UeXBlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxyXG4gICkgeyB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgICAgaWYgKGNoYW5nZXNbJ3R5cGUnXSkge1xyXG4gICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcclxuICAgICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPGJ1dHRvblxyXG4gIGNsYXNzPVwiYnItYnV0dG9uXCJcclxuICBbbmdDbGFzc109XCJ7XHJcbiAgICAncHJpbWFyeSc6IHR5cGUgPT09IGJ1dHRvblR5cGVzLnByaW1hcnksXHJcbiAgICAnc2Vjb25kYXJ5JzogdHlwZSA9PT0gYnV0dG9uVHlwZXMuc2Vjb25kYXJ5LFxyXG4gICAgJ3RlcnRpYXJ5JzogdHlwZSA9PT0gYnV0dG9uVHlwZXMudGVydGlhcnksXHJcbiAgICAnZGFuZ2VyJzogdHlwZSA9PT0gYnV0dG9uVHlwZXMuZGFuZ2VyLFxyXG4gICAgJ2NpcmNsZSc6IGNpcmNsZSxcclxuICAgICdibG9jayc6IGJsb2NrLFxyXG4gICAgJ2xvYWRpbmcnOiBsb2FkaW5nLFxyXG4gICAgJ2FjdGl2ZSc6IGFjdGl2ZSxcclxuICAgICdkYXJrLW1vZGUnOiBpbnZlcnRlZFxyXG4gIH1cIlxyXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXHJcbiAgW2F0dHIuYXJpYS1sYWJlbF09XCJpY29uID8gbGFiZWwgOiBudWxsXCJcclxuICBbdHlwZV09XCJzdWJtaXQgPyAnc3VibWl0JyA6ICdidXR0b24nXCJcclxuICBmeExheW91dEdhcD1cIjAuM3JlbVwiXHJcbiAgKGNsaWNrKT1cIm9uQ2xpY2suZW1pdCgpXCI+XHJcbiAgPGlcclxuICAgICpuZ0lmPVwiaWNvblwiXHJcbiAgICBbY2xhc3NdPVwiJ2ZhcyBmYS0nICsgaWNvblwiXHJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxyXG4gID48L2k+XHJcbiAgPHNwYW5cclxuICAgICpuZ0lmPVwiIWNpcmNsZVwiPlxyXG4gICAge3sgbGFiZWwgfX1cclxuICA8L3NwYW4+XHJcbjwvYnV0dG9uPlxyXG4iXX0=