cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
71 lines • 13.5 kB
JavaScript
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { SignInType } from '../../enums/sign-in-type.enum';
import { SignInDensity } from '../../enums/sign-in-density.enum';
import { SignInMode } from '../../enums/sign-in-mode.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 SignInComponent {
elementRef;
label = 'user';
type = SignInType.secondary;
density = SignInDensity.middle;
mode = SignInMode.internal;
disabled = false;
active = false;
block = false;
circle = false;
externalImageUrl = '';
externalLabel;
onClick = new EventEmitter();
onLogout = new EventEmitter();
initialWidth = '';
isLogoutVisible = false;
signinTypes = SignInType;
signinDensities = SignInDensity;
signinModes = SignInMode;
constructor(elementRef) {
this.elementRef = elementRef;
}
ngAfterViewInit() {
this.initialWidth = `${this.elementRef.nativeElement.offsetWidth}px`;
}
showLogout(isVisible) {
this.isLogoutVisible = isVisible && this.mode === this.signinModes.logout;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignInComponent, selector: "cfc-sign-in", inputs: { label: "label", type: "type", density: "density", mode: "mode", disabled: "disabled", active: "active", block: "block", circle: "circle", externalImageUrl: "externalImageUrl", externalLabel: "externalLabel" }, outputs: { onClick: "onClick", onLogout: "onLogout" }, host: { properties: { "style.width": "this.initialWidth" } }, ngImport: i0, template: "<div\r\n (mouseenter)=\"showLogout(true)\"\r\n (mouseleave)=\"showLogout(false)\">\r\n\r\n <button\r\n class=\"br-sign-in\"\r\n style=\"width: 100%;\"\r\n [ngClass]=\"density\"\r\n [class.primary]=\"type === signinTypes.primary\"\r\n [class.disabled]=\"disabled\"\r\n [class.active]=\"active\"\r\n [class.circle]=\"circle\"\r\n [class.block]=\"block\"\r\n type=\"button\"\r\n fxLayoutGap=\"0.3rem\"\r\n (click)=\"!isLogoutVisible ? onClick.emit($event) : onLogout.emit($event)\">\r\n <i\r\n *ngIf=\"!circle && (mode === signinModes.internal || mode === signinModes.logout)\"\r\n [ngClass]=\"!isLogoutVisible ? 'fas fa-user' : 'fas fa-sign-out-alt'\"\r\n aria-hidden=\"true\">\r\n </i>\r\n <span\r\n style=\"font-size: 14px;\"\r\n *ngIf=\"!circle\">\r\n {{ !isLogoutVisible ? label : 'Sair' }}\r\n </span>\r\n <img\r\n *ngIf=\"!isLogoutVisible && !circle && mode === signinModes.externalImg\"\r\n [src]=\"externalImageUrl\"\r\n alt=\"Descri\u00E7\u00E3o da minha imagem\"\r\n style=\"margin-left: 0.5rem;\"/>\r\n <span\r\n *ngIf=\"!isLogoutVisible && !circle && externalLabel && mode === signinModes.externalTxt\"\r\n class=\"text-black\"\r\n style=\"margin-left: 0.5rem;\">\r\n {{ externalLabel }}\r\n </span>\r\n </button>\r\n</div>\r\n", styles: [":host{transition:width .3s ease-in-out}\n"], 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: SignInComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-sign-in', template: "<div\r\n (mouseenter)=\"showLogout(true)\"\r\n (mouseleave)=\"showLogout(false)\">\r\n\r\n <button\r\n class=\"br-sign-in\"\r\n style=\"width: 100%;\"\r\n [ngClass]=\"density\"\r\n [class.primary]=\"type === signinTypes.primary\"\r\n [class.disabled]=\"disabled\"\r\n [class.active]=\"active\"\r\n [class.circle]=\"circle\"\r\n [class.block]=\"block\"\r\n type=\"button\"\r\n fxLayoutGap=\"0.3rem\"\r\n (click)=\"!isLogoutVisible ? onClick.emit($event) : onLogout.emit($event)\">\r\n <i\r\n *ngIf=\"!circle && (mode === signinModes.internal || mode === signinModes.logout)\"\r\n [ngClass]=\"!isLogoutVisible ? 'fas fa-user' : 'fas fa-sign-out-alt'\"\r\n aria-hidden=\"true\">\r\n </i>\r\n <span\r\n style=\"font-size: 14px;\"\r\n *ngIf=\"!circle\">\r\n {{ !isLogoutVisible ? label : 'Sair' }}\r\n </span>\r\n <img\r\n *ngIf=\"!isLogoutVisible && !circle && mode === signinModes.externalImg\"\r\n [src]=\"externalImageUrl\"\r\n alt=\"Descri\u00E7\u00E3o da minha imagem\"\r\n style=\"margin-left: 0.5rem;\"/>\r\n <span\r\n *ngIf=\"!isLogoutVisible && !circle && externalLabel && mode === signinModes.externalTxt\"\r\n class=\"text-black\"\r\n style=\"margin-left: 0.5rem;\">\r\n {{ externalLabel }}\r\n </span>\r\n </button>\r\n</div>\r\n", styles: [":host{transition:width .3s ease-in-out}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
type: Input
}], type: [{
type: Input
}], density: [{
type: Input
}], mode: [{
type: Input
}], disabled: [{
type: Input
}], active: [{
type: Input
}], block: [{
type: Input
}], circle: [{
type: Input
}], externalImageUrl: [{
type: Input
}], externalLabel: [{
type: Input
}], onClick: [{
type: Output
}], onLogout: [{
type: Output
}], initialWidth: [{
type: HostBinding,
args: ['style.width']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbi1pbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3NpZ24taW4vc2lnbi1pbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL3NpZ24taW4vc2lnbi1pbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0csT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sK0JBQStCLENBQUM7Ozs7O0FBTzNELE1BQU0sT0FBTyxlQUFlO0lBeUJOO0lBdEJYLEtBQUssR0FBRyxNQUFNLENBQUM7SUFDZixJQUFJLEdBQWUsVUFBVSxDQUFDLFNBQVMsQ0FBQztJQUN4QyxPQUFPLEdBQWtCLGFBQWEsQ0FBQyxNQUFNLENBQUM7SUFDOUMsSUFBSSxHQUFlLFVBQVUsQ0FBQyxRQUFRLENBQUM7SUFDdkMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNqQixNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2YsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNkLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDZixnQkFBZ0IsR0FBRyxFQUFFLENBQUM7SUFDdEIsYUFBYSxDQUFVO0lBRXRCLE9BQU8sR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUNyRCxRQUFRLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFFcEMsWUFBWSxHQUFXLEVBQUUsQ0FBQztJQUV0RCxlQUFlLEdBQUcsS0FBSyxDQUFDO0lBRWYsV0FBVyxHQUFHLFVBQVUsQ0FBQztJQUN6QixlQUFlLEdBQUcsYUFBYSxDQUFDO0lBQ2hDLFdBQVcsR0FBRyxVQUFVLENBQUM7SUFFbEMsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtJQUFHLENBQUM7SUFFOUMsZUFBZTtRQUNiLElBQUksQ0FBQyxZQUFZLEdBQUcsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxXQUFXLElBQUksQ0FBQztJQUN2RSxDQUFDO0lBRUQsVUFBVSxDQUFDLFNBQWtCO1FBQzNCLElBQUksQ0FBQyxlQUFlLEdBQUcsU0FBUyxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUM7SUFDNUUsQ0FBQzt3R0FqQ1UsZUFBZTs0RkFBZixlQUFlLG9ZQ1Y1Qix1MUNBdUNBOzs0RkQ3QmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxhQUFhOytFQU9kLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUVJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTtnQkFFcUIsWUFBWTtzQkFBdkMsV0FBVzt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNpZ25JblR5cGUgfSBmcm9tICcuLi8uLi9lbnVtcy9zaWduLWluLXR5cGUuZW51bSc7XHJcbmltcG9ydCB7IFNpZ25JbkRlbnNpdHkgfSBmcm9tICcuLi8uLi9lbnVtcy9zaWduLWluLWRlbnNpdHkuZW51bSc7XHJcbmltcG9ydCB7IFNpZ25Jbk1vZGUgfSBmcm9tICcuLi8uLi9lbnVtcy9zaWduLWluLW1vZGUuZW51bSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NmYy1zaWduLWluJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2lnbi1pbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3NpZ24taW4uY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTaWduSW5Db21wb25lbnRcclxuICBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xyXG5cclxuICBASW5wdXQoKSBsYWJlbCA9ICd1c2VyJztcclxuICBASW5wdXQoKSB0eXBlOiBTaWduSW5UeXBlID0gU2lnbkluVHlwZS5zZWNvbmRhcnk7XHJcbiAgQElucHV0KCkgZGVuc2l0eTogU2lnbkluRGVuc2l0eSA9IFNpZ25JbkRlbnNpdHkubWlkZGxlO1xyXG4gIEBJbnB1dCgpIG1vZGU6IFNpZ25Jbk1vZGUgPSBTaWduSW5Nb2RlLmludGVybmFsO1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XHJcbiAgQElucHV0KCkgYmxvY2sgPSBmYWxzZTtcclxuICBASW5wdXQoKSBjaXJjbGUgPSBmYWxzZTtcclxuICBASW5wdXQoKSBleHRlcm5hbEltYWdlVXJsID0gJyc7XHJcbiAgQElucHV0KCkgZXh0ZXJuYWxMYWJlbD86IHN0cmluZztcclxuXHJcbiAgQE91dHB1dCgpIG9uQ2xpY2s6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XHJcbiAgQE91dHB1dCgpIG9uTG9nb3V0OiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG5cclxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLndpZHRoJykgaW5pdGlhbFdpZHRoOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgaXNMb2dvdXRWaXNpYmxlID0gZmFsc2U7XHJcblxyXG4gIHJlYWRvbmx5IHNpZ25pblR5cGVzID0gU2lnbkluVHlwZTtcclxuICByZWFkb25seSBzaWduaW5EZW5zaXRpZXMgPSBTaWduSW5EZW5zaXR5O1xyXG4gIHJlYWRvbmx5IHNpZ25pbk1vZGVzID0gU2lnbkluTW9kZTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmluaXRpYWxXaWR0aCA9IGAke3RoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRofXB4YDtcclxuICB9XHJcblxyXG4gIHNob3dMb2dvdXQoaXNWaXNpYmxlOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICB0aGlzLmlzTG9nb3V0VmlzaWJsZSA9IGlzVmlzaWJsZSAmJiB0aGlzLm1vZGUgPT09IHRoaXMuc2lnbmluTW9kZXMubG9nb3V0O1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2XHJcbiAgKG1vdXNlZW50ZXIpPVwic2hvd0xvZ291dCh0cnVlKVwiXHJcbiAgKG1vdXNlbGVhdmUpPVwic2hvd0xvZ291dChmYWxzZSlcIj5cclxuXHJcbiAgPGJ1dHRvblxyXG4gICAgY2xhc3M9XCJici1zaWduLWluXCJcclxuICAgIHN0eWxlPVwid2lkdGg6IDEwMCU7XCJcclxuICAgIFtuZ0NsYXNzXT1cImRlbnNpdHlcIlxyXG4gICAgW2NsYXNzLnByaW1hcnldPVwidHlwZSA9PT0gc2lnbmluVHlwZXMucHJpbWFyeVwiXHJcbiAgICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgW2NsYXNzLmFjdGl2ZV09XCJhY3RpdmVcIlxyXG4gICAgW2NsYXNzLmNpcmNsZV09XCJjaXJjbGVcIlxyXG4gICAgW2NsYXNzLmJsb2NrXT1cImJsb2NrXCJcclxuICAgIHR5cGU9XCJidXR0b25cIlxyXG4gICAgZnhMYXlvdXRHYXA9XCIwLjNyZW1cIlxyXG4gICAgKGNsaWNrKT1cIiFpc0xvZ291dFZpc2libGUgPyBvbkNsaWNrLmVtaXQoJGV2ZW50KSA6IG9uTG9nb3V0LmVtaXQoJGV2ZW50KVwiPlxyXG4gICAgPGlcclxuICAgICAgKm5nSWY9XCIhY2lyY2xlICYmIChtb2RlID09PSBzaWduaW5Nb2Rlcy5pbnRlcm5hbCB8fCBtb2RlID09PSBzaWduaW5Nb2Rlcy5sb2dvdXQpXCJcclxuICAgICAgW25nQ2xhc3NdPVwiIWlzTG9nb3V0VmlzaWJsZSA/ICdmYXMgZmEtdXNlcicgOiAnZmFzIGZhLXNpZ24tb3V0LWFsdCdcIlxyXG4gICAgICBhcmlhLWhpZGRlbj1cInRydWVcIj5cclxuICAgIDwvaT5cclxuICAgIDxzcGFuXHJcbiAgICAgIHN0eWxlPVwiZm9udC1zaXplOiAxNHB4O1wiXHJcbiAgICAgICpuZ0lmPVwiIWNpcmNsZVwiPlxyXG4gICAgICB7eyAhaXNMb2dvdXRWaXNpYmxlID8gbGFiZWwgOiAnU2FpcicgfX1cclxuICAgIDwvc3Bhbj5cclxuICAgIDxpbWdcclxuICAgICAgKm5nSWY9XCIhaXNMb2dvdXRWaXNpYmxlICYmICFjaXJjbGUgJiYgbW9kZSA9PT0gc2lnbmluTW9kZXMuZXh0ZXJuYWxJbWdcIlxyXG4gICAgICBbc3JjXT1cImV4dGVybmFsSW1hZ2VVcmxcIlxyXG4gICAgICBhbHQ9XCJEZXNjcmnDp8OjbyBkYSBtaW5oYSBpbWFnZW1cIlxyXG4gICAgICBzdHlsZT1cIm1hcmdpbi1sZWZ0OiAwLjVyZW07XCIvPlxyXG4gICAgPHNwYW5cclxuICAgICAgKm5nSWY9XCIhaXNMb2dvdXRWaXNpYmxlICYmICFjaXJjbGUgJiYgZXh0ZXJuYWxMYWJlbCAmJiBtb2RlID09PSBzaWduaW5Nb2Rlcy5leHRlcm5hbFR4dFwiXHJcbiAgICAgIGNsYXNzPVwidGV4dC1ibGFja1wiXHJcbiAgICAgIHN0eWxlPVwibWFyZ2luLWxlZnQ6IDAuNXJlbTtcIj5cclxuICAgICAge3sgZXh0ZXJuYWxMYWJlbCB9fVxyXG4gICAgPC9zcGFuPlxyXG4gIDwvYnV0dG9uPlxyXG48L2Rpdj5cclxuIl19