cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
35 lines • 9.39 kB
JavaScript
import { Component, Input } from '@angular/core';
import { AvatarDensity } from '../../enums/avatar-density.enum';
import { AvatarType } from '../../enums/avatar-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class AvatarComponent {
type = AvatarType.icon;
name;
density = AvatarDensity.medium;
imageUrl = '';
listItems = [];
avatarTypes = AvatarType;
avatarDensities = AvatarDensity;
openDropdown = false;
toggleDropdown() {
this.openDropdown = !this.openDropdown;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AvatarComponent, selector: "cfc-avatar", inputs: { type: "type", name: "name", density: "density", imageUrl: "imageUrl", listItems: "listItems" }, ngImport: i0, template: "<span\r\n class=\"br-avatar mr-3\"\r\n [title]=\"name\"\r\n [class.medium]=\"density === avatarDensities.medium\"\r\n [class.large]=\"density === avatarDensities.large\"\r\n>\r\n <span *ngIf=\"type === avatarTypes.icon\" class=\"content\">\r\n <i class=\"fas fa-user bg-blue-warn-20\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span\r\n *ngIf=\"type === avatarTypes.letter\"\r\n class=\"content bg-violet-50 text-pure-0\"\r\n >\r\n {{ name[0] | uppercase }}\r\n </span>\r\n <span *ngIf=\"type === avatarTypes.image\" class=\"content\">\r\n <img [src]=\"imageUrl\" alt=\"Avatar\" />\r\n </span>\r\n <span *ngIf=\"type === avatarTypes.dropdown\" class=\"dropdown\">\r\n <button class=\"br-sign-in\" type=\"button\" (click)=\"toggleDropdown()\">\r\n <span class=\"br-avatar\" title=\"Fulano da Silva\"\r\n ><span class=\"content bg-orange-vivid-30 text-pure-0\">\r\n {{ name[0] | uppercase }}</span\r\n ></span\r\n ><span class=\"ml-2 text-gray-80 text-weight-regular\">{{ name }}</span\r\n ><i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div *ngIf=\"openDropdown\" class=\"br-list\">\r\n <div *ngIf=\"listItems?.length !== 0\">\r\n <div *ngFor=\"let items of listItems\" class=\"br-item\"><p>{{items.name}}</p></div>\r\n </div>\r\n </div>\r\n </span>\r\n</span>\r\n", styles: [".dropdown{position:relative}.br-list{position:absolute;left:0}.dropdown .br-item:not(:last-child){border-bottom:1px solid #ccc}.br-item{color:#333;height:50px;cursor:pointer}.br-item p{font-size:14px}.br-item:hover{background-color:#c6c6c6}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-avatar', template: "<span\r\n class=\"br-avatar mr-3\"\r\n [title]=\"name\"\r\n [class.medium]=\"density === avatarDensities.medium\"\r\n [class.large]=\"density === avatarDensities.large\"\r\n>\r\n <span *ngIf=\"type === avatarTypes.icon\" class=\"content\">\r\n <i class=\"fas fa-user bg-blue-warn-20\" aria-hidden=\"true\"></i>\r\n </span>\r\n <span\r\n *ngIf=\"type === avatarTypes.letter\"\r\n class=\"content bg-violet-50 text-pure-0\"\r\n >\r\n {{ name[0] | uppercase }}\r\n </span>\r\n <span *ngIf=\"type === avatarTypes.image\" class=\"content\">\r\n <img [src]=\"imageUrl\" alt=\"Avatar\" />\r\n </span>\r\n <span *ngIf=\"type === avatarTypes.dropdown\" class=\"dropdown\">\r\n <button class=\"br-sign-in\" type=\"button\" (click)=\"toggleDropdown()\">\r\n <span class=\"br-avatar\" title=\"Fulano da Silva\"\r\n ><span class=\"content bg-orange-vivid-30 text-pure-0\">\r\n {{ name[0] | uppercase }}</span\r\n ></span\r\n ><span class=\"ml-2 text-gray-80 text-weight-regular\">{{ name }}</span\r\n ><i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div *ngIf=\"openDropdown\" class=\"br-list\">\r\n <div *ngIf=\"listItems?.length !== 0\">\r\n <div *ngFor=\"let items of listItems\" class=\"br-item\"><p>{{items.name}}</p></div>\r\n </div>\r\n </div>\r\n </span>\r\n</span>\r\n", styles: [".dropdown{position:relative}.br-list{position:absolute;left:0}.dropdown .br-item:not(:last-child){border-bottom:1px solid #ccc}.br-item{color:#333;height:50px;cursor:pointer}.br-item p{font-size:14px}.br-item:hover{background-color:#c6c6c6}\n"] }]
}], propDecorators: { type: [{
type: Input
}], name: [{
type: Input
}], density: [{
type: Input
}], imageUrl: [{
type: Input
}], listItems: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZmMtZHMvc3JjL2xpYi9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7O0FBVzFELE1BQU0sT0FBTyxlQUFlO0lBQ2pCLElBQUksR0FBZSxVQUFVLENBQUMsSUFBSSxDQUFDO0lBQ25DLElBQUksQ0FBVTtJQUNkLE9BQU8sR0FBa0IsYUFBYSxDQUFDLE1BQU0sQ0FBQztJQUM5QyxRQUFRLEdBQVksRUFBRSxDQUFDO0lBQ3ZCLFNBQVMsR0FBZ0IsRUFBRSxDQUFDO0lBRXJDLFdBQVcsR0FBRyxVQUFVLENBQUM7SUFDekIsZUFBZSxHQUFHLGFBQWEsQ0FBQztJQUVoQyxZQUFZLEdBQUcsS0FBSyxDQUFDO0lBRXJCLGNBQWM7UUFDWixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQztJQUN6QyxDQUFDO3dHQWRVLGVBQWU7NEZBQWYsZUFBZSw0SkNiNUIsNjJDQWtDQTs7NEZEckJhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4QkFLYixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEF2YXRhckRlbnNpdHkgfSBmcm9tICcuLi8uLi9lbnVtcy9hdmF0YXItZGVuc2l0eS5lbnVtJztcclxuaW1wb3J0IHsgQXZhdGFyVHlwZSB9IGZyb20gJy4uLy4uL2VudW1zL2F2YXRhci10eXBlLmVudW0nO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBMaXN0SXRlbXMge1xyXG4gIG5hbWU6IHN0cmluZyxcclxuICB1cmw6IHN0cmluZ1xyXG59XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLWF2YXRhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2F2YXRhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2F2YXRhci5jb21wb25lbnQuc2NzcycsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBdmF0YXJDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHR5cGU6IEF2YXRhclR5cGUgPSBBdmF0YXJUeXBlLmljb247XHJcbiAgQElucHV0KCkgbmFtZSE6IHN0cmluZztcclxuICBASW5wdXQoKSBkZW5zaXR5OiBBdmF0YXJEZW5zaXR5ID0gQXZhdGFyRGVuc2l0eS5tZWRpdW07XHJcbiAgQElucHV0KCkgaW1hZ2VVcmw/OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBsaXN0SXRlbXM6IExpc3RJdGVtc1tdID0gW107XHJcblxyXG4gIGF2YXRhclR5cGVzID0gQXZhdGFyVHlwZTtcclxuICBhdmF0YXJEZW5zaXRpZXMgPSBBdmF0YXJEZW5zaXR5O1xyXG5cclxuICBvcGVuRHJvcGRvd24gPSBmYWxzZTtcclxuXHJcbiAgdG9nZ2xlRHJvcGRvd24oKSB7XHJcbiAgICB0aGlzLm9wZW5Ecm9wZG93biA9ICF0aGlzLm9wZW5Ecm9wZG93bjtcclxuICB9XHJcbn1cclxuIiwiPHNwYW5cclxuICBjbGFzcz1cImJyLWF2YXRhciBtci0zXCJcclxuICBbdGl0bGVdPVwibmFtZVwiXHJcbiAgW2NsYXNzLm1lZGl1bV09XCJkZW5zaXR5ID09PSBhdmF0YXJEZW5zaXRpZXMubWVkaXVtXCJcclxuICBbY2xhc3MubGFyZ2VdPVwiZGVuc2l0eSA9PT0gYXZhdGFyRGVuc2l0aWVzLmxhcmdlXCJcclxuPlxyXG4gIDxzcGFuICpuZ0lmPVwidHlwZSA9PT0gYXZhdGFyVHlwZXMuaWNvblwiIGNsYXNzPVwiY29udGVudFwiPlxyXG4gICAgPGkgY2xhc3M9XCJmYXMgZmEtdXNlciBiZy1ibHVlLXdhcm4tMjBcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgPC9zcGFuPlxyXG4gIDxzcGFuXHJcbiAgICAqbmdJZj1cInR5cGUgPT09IGF2YXRhclR5cGVzLmxldHRlclwiXHJcbiAgICBjbGFzcz1cImNvbnRlbnQgYmctdmlvbGV0LTUwIHRleHQtcHVyZS0wXCJcclxuICA+XHJcbiAgICB7eyBuYW1lWzBdIHwgdXBwZXJjYXNlIH19XHJcbiAgPC9zcGFuPlxyXG4gIDxzcGFuICpuZ0lmPVwidHlwZSA9PT0gYXZhdGFyVHlwZXMuaW1hZ2VcIiBjbGFzcz1cImNvbnRlbnRcIj5cclxuICAgIDxpbWcgW3NyY109XCJpbWFnZVVybFwiIGFsdD1cIkF2YXRhclwiIC8+XHJcbiAgPC9zcGFuPlxyXG4gIDxzcGFuICpuZ0lmPVwidHlwZSA9PT0gYXZhdGFyVHlwZXMuZHJvcGRvd25cIiBjbGFzcz1cImRyb3Bkb3duXCI+XHJcbiAgICA8YnV0dG9uIGNsYXNzPVwiYnItc2lnbi1pblwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwidG9nZ2xlRHJvcGRvd24oKVwiPlxyXG4gICAgICA8c3BhbiBjbGFzcz1cImJyLWF2YXRhclwiIHRpdGxlPVwiRnVsYW5vIGRhIFNpbHZhXCJcclxuICAgICAgICA+PHNwYW4gY2xhc3M9XCJjb250ZW50IGJnLW9yYW5nZS12aXZpZC0zMCB0ZXh0LXB1cmUtMFwiPlxyXG4gICAgICAgICAge3sgbmFtZVswXSB8IHVwcGVyY2FzZSB9fTwvc3BhblxyXG4gICAgICAgID48L3NwYW5cclxuICAgICAgPjxzcGFuIGNsYXNzPVwibWwtMiB0ZXh0LWdyYXktODAgdGV4dC13ZWlnaHQtcmVndWxhclwiPnt7IG5hbWUgfX08L3NwYW5cclxuICAgICAgPjxpIGNsYXNzPVwiZmFzIGZhLWNhcmV0LWRvd25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XHJcbiAgICA8L2J1dHRvbj5cclxuICAgIDxkaXYgKm5nSWY9XCJvcGVuRHJvcGRvd25cIiBjbGFzcz1cImJyLWxpc3RcIj5cclxuICAgICAgPGRpdiAqbmdJZj1cImxpc3RJdGVtcz8ubGVuZ3RoICE9PSAwXCI+XHJcbiAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbXMgb2YgbGlzdEl0ZW1zXCIgY2xhc3M9XCJici1pdGVtXCI+PHA+e3tpdGVtcy5uYW1lfX08L3A+PC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9zcGFuPlxyXG48L3NwYW4+XHJcbiJdfQ==