cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
647 lines (616 loc) • 383 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, ChangeDetectionStrategy, Injectable, Optional, Inject, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
import * as i2$1 from '@angular/forms';
import { NgControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { filter, BehaviorSubject, interval } from 'rxjs';
import * as i2 from '@angular/flex-layout/flex';
import * as i3 from '@angular/flex-layout/extended';
import { FlexLayoutModule } from '@angular/flex-layout';
import { map, takeWhile } from 'rxjs/operators';
import { provideHttpClient } from '@angular/common/http';
import dayjs from 'dayjs';
import 'dayjs/locale/pt-br';
import localeData from 'dayjs/plugin/localeData';
var AvatarDensity;
(function (AvatarDensity) {
AvatarDensity["large"] = "large";
AvatarDensity["medium"] = "medium";
AvatarDensity["small"] = "small";
})(AvatarDensity || (AvatarDensity = {}));
var AvatarType;
(function (AvatarType) {
AvatarType["letter"] = "letter";
AvatarType["icon"] = "icon";
AvatarType["image"] = "image";
})(AvatarType || (AvatarType = {}));
class AvatarComponent {
type = AvatarType.icon;
name;
density = AvatarDensity.medium;
imageUrl = '';
avatarTypes = AvatarType;
avatarDensities = AvatarDensity;
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" }, 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\r\n *ngIf=\"type === avatarTypes.icon\"\r\n class=\"content\"\r\n >\r\n <i\r\n class=\"fas fa-user bg-blue-warn-20\"\r\n aria-hidden=\"true\"\r\n ></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\r\n *ngIf=\"type === avatarTypes.image\"\r\n class=\"content\"\r\n >\r\n <img\r\n [src]=\"imageUrl\"\r\n alt=\"Avatar\"\r\n />\r\n </span>\r\n</span>\r\n", styles: [""], dependencies: [{ 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\r\n *ngIf=\"type === avatarTypes.icon\"\r\n class=\"content\"\r\n >\r\n <i\r\n class=\"fas fa-user bg-blue-warn-20\"\r\n aria-hidden=\"true\"\r\n ></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\r\n *ngIf=\"type === avatarTypes.image\"\r\n class=\"content\"\r\n >\r\n <img\r\n [src]=\"imageUrl\"\r\n alt=\"Avatar\"\r\n />\r\n </span>\r\n</span>\r\n" }]
}], propDecorators: { type: [{
type: Input
}], name: [{
type: Input
}], density: [{
type: Input
}], imageUrl: [{
type: Input
}] } });
class BreadcrumbComponent {
router;
activatedRoute;
/** Lista de breadcrumbs gerados */
links = [];
homeUrl;
/** Inscrição para monitorar mudanças na rota */
routeSubscription;
constructor(router, activatedRoute) {
this.router = router;
this.activatedRoute = activatedRoute;
}
/** Inicializa o componente e observa mudanças de rota */
ngOnInit() {
this.updateBreadcrumbs();
this.routeSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
this.updateBreadcrumbs();
});
}
getHomeUrl() {
if (!this.homeUrl) {
return '/';
}
return this.homeUrl;
}
/** Atualiza os breadcrumbs com base na rota ativa */
updateBreadcrumbs() {
const breadcrumbs = this.buildBreadcrumbs(this.router.routerState.root);
this.removeLastBreadcrumbUrl(breadcrumbs);
this.links = breadcrumbs;
}
/**
* Constrói os breadcrumbs recursivamente com base nas rotas ativadas.
* @param route Rota ativa.
* @param breadcrumbs Lista de breadcrumbs acumulada.
* @returns Lista de BreadcrumbLink atualizada.
*/
buildBreadcrumbs(route, breadcrumbs = []) {
route.children.forEach((child) => {
const routeSegment = this.getRouteURL(child);
const label = this.getBreadcrumbLabel(child.snapshot.data);
const fullPath = this.buildFullPath(routeSegment, breadcrumbs);
if (label && !this.isDuplicateBreadcrumb(breadcrumbs, label)) {
breadcrumbs.push({ label, url: fullPath, target: '_self' });
}
this.buildBreadcrumbs(child, breadcrumbs);
});
return breadcrumbs;
}
/**
* Obtém o segmento da URL da rota atual.
* @param route Rota atual.
* @returns Segmento da URL ou string vazia.
*/
getRouteURL(route) {
return route.snapshot.url.length > 0
? route.snapshot.url.map(segment => segment.path).join('/')
: '';
}
/**
* Constrói o caminho completo concatenando segmentos anteriores.
* @param routeSegment Segmento atual da rota.
* @param breadcrumbs Lista de breadcrumbs acumulada.
* @returns Caminho completo da URL.
*/
buildFullPath(routeSegment, breadcrumbs) {
if (!routeSegment)
return '';
const previousPath = breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].url : '';
return previousPath ? `${previousPath}/${routeSegment}` : `/${routeSegment}`;
}
/**
* Obtém o rótulo do breadcrumb a partir dos dados da rota.
* @param data Dados da rota.
* @returns Rótulo do breadcrumb ou null.
*/
getBreadcrumbLabel(data) {
const label = data['breadcrumb'];
return label && typeof label === 'string' && label.trim() ? label.trim() : null;
}
/**
* Remove a URL do último breadcrumb para evitar que seja clicável.
* @param breadcrumbs Lista de breadcrumbs.
*/
removeLastBreadcrumbUrl(breadcrumbs) {
if (breadcrumbs.length > 0) {
breadcrumbs[breadcrumbs.length - 1].url = undefined;
}
}
/**
* Verifica se um breadcrumb já existe na lista para evitar duplicatas.
* @param breadcrumbs Lista de breadcrumbs acumulada.
* @param label Nome do breadcrumb a verificar.
* @returns Verdadeiro se o breadcrumb já existir, falso caso contrário.
*/
isDuplicateBreadcrumb(breadcrumbs, label) {
return breadcrumbs.some(bc => bc.label === label);
}
/** Cancela a inscrição ao destruir o componente */
ngOnDestroy() {
this.routeSubscription?.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BreadcrumbComponent, selector: "cfc-breadcrumb", inputs: { homeUrl: "homeUrl" }, ngImport: i0, template: "<nav\r\n class=\"br-breadcrumb\"\r\n aria-label=\"Breadcrumbs\">\r\n <ul\r\n class=\"crumb-list\"\r\n style=\"padding-left: 0;\"\r\n role=\"list\">\r\n <li\r\n class=\"crumb\">\r\n <a\r\n class=\"br-button circle\"\r\n [href]=\"getHomeUrl()\"\r\n target=\"_self\">\r\n <i class=\"fas fa-home\"></i>\r\n </a>\r\n </li>\r\n\r\n <li\r\n class=\"crumb\"\r\n *ngFor=\"let link of links; let last = last\">\r\n <i\r\n class=\"icon fas fa-chevron-right\">\r\n </i>\r\n\r\n <a\r\n *ngIf=\"!last\"\r\n [href]=\"link.url\"\r\n [target]=\"link.target\">\r\n <span>\r\n {{ link.label | titlecase }}\r\n </span>\r\n </a>\r\n\r\n\r\n <span\r\n *ngIf=\"last\"\r\n tabindex=\"0\"\r\n aria-current=\"page\">\r\n {{ link.label | titlecase }}\r\n </span>\r\n\r\n </li>\r\n </ul>\r\n</nav>\r\n", styles: [""], 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.TitleCasePipe, name: "titlecase" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-breadcrumb', template: "<nav\r\n class=\"br-breadcrumb\"\r\n aria-label=\"Breadcrumbs\">\r\n <ul\r\n class=\"crumb-list\"\r\n style=\"padding-left: 0;\"\r\n role=\"list\">\r\n <li\r\n class=\"crumb\">\r\n <a\r\n class=\"br-button circle\"\r\n [href]=\"getHomeUrl()\"\r\n target=\"_self\">\r\n <i class=\"fas fa-home\"></i>\r\n </a>\r\n </li>\r\n\r\n <li\r\n class=\"crumb\"\r\n *ngFor=\"let link of links; let last = last\">\r\n <i\r\n class=\"icon fas fa-chevron-right\">\r\n </i>\r\n\r\n <a\r\n *ngIf=\"!last\"\r\n [href]=\"link.url\"\r\n [target]=\"link.target\">\r\n <span>\r\n {{ link.label | titlecase }}\r\n </span>\r\n </a>\r\n\r\n\r\n <span\r\n *ngIf=\"last\"\r\n tabindex=\"0\"\r\n aria-current=\"page\">\r\n {{ link.label | titlecase }}\r\n </span>\r\n\r\n </li>\r\n </ul>\r\n</nav>\r\n" }]
}], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { homeUrl: [{
type: Input
}] } });
var ButtonType;
(function (ButtonType) {
ButtonType["primary"] = "primary";
ButtonType["secondary"] = "secondary";
ButtonType["tertiary"] = "tertiary";
ButtonType["danger"] = "danger";
})(ButtonType || (ButtonType = {}));
var ButtonDensity;
(function (ButtonDensity) {
ButtonDensity["large"] = "large";
ButtonDensity["middle"] = "middle";
ButtonDensity["small"] = "small";
ButtonDensity["xsmall"] = "xsmall";
})(ButtonDensity || (ButtonDensity = {}));
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
}] } });
class CardContentComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardContentComponent, selector: "cfc-card-content", ngImport: i0, template: "<div class=\"card-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardContentComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-card-content', template: "<div class=\"card-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n" }]
}] });
class CardComponent {
hover = false;
disabled = false;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardComponent, selector: "cfc-card", inputs: { hover: "hover", disabled: "disabled" }, ngImport: i0, template: "<div class=\"br-card\">\r\n <div class=\"br-card\"\r\n [class.hover]=\"hover\"\r\n [class.disabled]=\"disabled\">\r\n <ng-content select=\"cfc-card-header\"></ng-content>\r\n <cfc-card-content>\r\n <ng-content select=\"cfc-card-content\"></ng-content>\r\n </cfc-card-content>\r\n <ng-content select=\"cfc-card-footer\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: CardContentComponent, selector: "cfc-card-content" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-card', template: "<div class=\"br-card\">\r\n <div class=\"br-card\"\r\n [class.hover]=\"hover\"\r\n [class.disabled]=\"disabled\">\r\n <ng-content select=\"cfc-card-header\"></ng-content>\r\n <cfc-card-content>\r\n <ng-content select=\"cfc-card-content\"></ng-content>\r\n </cfc-card-content>\r\n <ng-content select=\"cfc-card-footer\"></ng-content>\r\n </div>\r\n</div>\r\n" }]
}], propDecorators: { hover: [{
type: Input
}], disabled: [{
type: Input
}] } });
class CarouselComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselComponent, selector: "cfc-carousel", ngImport: i0, template: "<br-carousel></br-carousel>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-carousel', template: "<br-carousel></br-carousel>\r\n" }]
}] });
class CfcDsRootComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CfcDsRootComponent, selector: "cfc-ds-root", ngImport: i0, template: `
<router-outlet></router-outlet>
`, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CfcDsRootComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-ds-root', template: `
<router-outlet></router-outlet>
` }]
}] });
class CheckboxesComponent {
label;
description;
options;
mode = 'column';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxesComponent, selector: "cfc-checkboxes", inputs: { label: "label", description: "description", options: "options", mode: "mode" }, ngImport: i0, template: "<p\r\n class=\"label mb-0\">\r\n {{ label }}\r\n</p>\r\n<p\r\n class=\"text-down-01\">\r\n {{ description }}\r\n</p>\r\n<div\r\n [fxLayout]=\"mode\"\r\n fxLayoutAlign=\"start start\">\r\n <ng-content\r\n select=\"[cfc-checkbox-option]\">\r\n </ng-content>\r\n</div>\r\n<div\r\n class=\"mt-3\">\r\n <span\r\n class=\"feedback warning\"\r\n role=\"alert\">\r\n <i\r\n class=\"fas fa-exclamation-triangle\"\r\n aria-hidden=\"true\">\r\n </i>\r\n Texto de mensagem\r\n </span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxesComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-checkboxes', template: "<p\r\n class=\"label mb-0\">\r\n {{ label }}\r\n</p>\r\n<p\r\n class=\"text-down-01\">\r\n {{ description }}\r\n</p>\r\n<div\r\n [fxLayout]=\"mode\"\r\n fxLayoutAlign=\"start start\">\r\n <ng-content\r\n select=\"[cfc-checkbox-option]\">\r\n </ng-content>\r\n</div>\r\n<div\r\n class=\"mt-3\">\r\n <span\r\n class=\"feedback warning\"\r\n role=\"alert\">\r\n <i\r\n class=\"fas fa-exclamation-triangle\"\r\n aria-hidden=\"true\">\r\n </i>\r\n Texto de mensagem\r\n </span>\r\n</div>\r\n" }]
}], propDecorators: { label: [{
type: Input
}], description: [{
type: Input
}], options: [{
type: Input
}], mode: [{
type: Input
}] } });
const components = [
{ id: 1, name: 'avatar', clickEventName: 'setComponent', isAlready: true },
{ id: 2, name: 'breadcrumb', clickEventName: 'setComponent', isAlready: true },
{ id: 3, name: 'button', clickEventName: 'setComponent', isAlready: true },
{ id: 4, name: 'card', clickEventName: 'setComponent', isAlready: false },
{ id: 5, name: 'carousel', clickEventName: 'setComponent', isAlready: false },
{ id: 6, name: 'checkboxes', clickEventName: 'setComponent', isAlready: false },
{ id: 7, name: 'checkbox', clickEventName: 'setComponent', isAlready: true },
{ id: 8, name: 'collapse', clickEventName: 'setComponent', isAlready: false },
{ id: 9, name: 'cookie-bar', clickEventName: 'setComponent', isAlready: false },
{ id: 10, name: 'datetimer-picker', clickEventName: 'setComponent', isAlready: false },
{ id: 11, name: 'divider', clickEventName: 'setComponent', isAlready: true },
{ id: 12, name: 'footer', clickEventName: 'setComponent', isAlready: false },
{ id: 13, name: 'header', clickEventName: 'setComponent', isAlready: true },
{ id: 15, name: 'icon', clickEventName: 'setComponent', isAlready: true },
{ id: 16, name: 'illustration-state', clickEventName: 'setComponent', isAlready: true },
{ id: 16, name: 'input', clickEventName: 'setComponent', isAlready: true },
{ id: 14, name: 'item', clickEventName: 'setComponent', isAlready: true },
{ id: 17, name: 'list', clickEventName: 'setComponent', isAlready: false },
{ id: 18, name: 'loading', clickEventName: 'setComponent', isAlready: true },
{ id: 19, name: 'logo', clickEventName: 'setComponent', isAlready: true },
{ id: 20, name: 'magic-button', clickEventName: 'setComponent', isAlready: false },
{ id: 21, name: 'menu', clickEventName: 'setComponent', isAlready: false },
{ id: 22, name: 'message', clickEventName: 'setComponent', isAlready: true },
{ id: 23, name: 'modal', clickEventName: 'setComponent', isAlready: false },
{ id: 24, name: 'notification', clickEventName: 'setComponent', isAlready: false },
{ id: 25, name: 'notification-panel', clickEventName: 'setComponent', isAlready: false },
{ id: 26, name: 'pagination', clickEventName: 'setComponent', isAlready: false },
{ id: 27, name: 'radio', clickEventName: 'setComponent', isAlready: false },
{ id: 28, name: 'scrim', clickEventName: 'setComponent', isAlready: false },
{ id: 29, name: 'select', clickEventName: 'setComponent', isAlready: false },
{ id: 30, name: 'sign-in', clickEventName: 'setComponent', isAlready: true },
{ id: 31, name: 'skiplink', clickEventName: 'setComponent', isAlready: false },
{ id: 32, name: 'slider', clickEventName: 'setComponent', isAlready: false },
{ id: 33, name: 'switch', clickEventName: 'setComponent', isAlready: false },
{ id: 34, name: 'tab', clickEventName: 'setComponent', isAlready: false },
{ id: 35, name: 'table', clickEventName: 'setComponent', isAlready: false },
{ id: 36, name: 'tag', clickEventName: 'setComponent', isAlready: false },
{ id: 37, name: 'textarea', clickEventName: 'setComponent', isAlready: false },
{ id: 38, name: 'template-error', clickEventName: 'setComponent', isAlready: false },
{ id: 39, name: 'timer', clickEventName: 'setComponent', isAlready: true },
{ id: 40, name: 'tooltip', clickEventName: 'setComponent', isAlready: false },
{ id: 41, name: 'upload', clickEventName: 'setComponent', isAlready: false },
{ id: 42, name: 'wizard', clickEventName: 'setComponent', isAlready: false }
].sort();
class ComponentsListComponent {
cdr;
selectedComponent = new EventEmitter();
componentList = components;
constructor(cdr) {
this.cdr = cdr;
}
onSelectComponent(component) {
this.selectedComponent.emit(component);
this.cdr.detectChanges();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ComponentsListComponent, selector: "cfc-components-list", outputs: { selectedComponent: "selectedComponent" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n fxLayout=\"column\">\r\n <p\r\n *ngFor=\"let component of componentList\"\r\n class=\"components-list__component-name\"\r\n (click)=\"onSelectComponent(component)\">\r\n <span\r\n [class.components-list__component-name--is-already]=\"component.isAlready\">\r\n {{ component.name }}\r\n </span>\r\n </p>\r\n</div>\r\n", styles: [".components-list__component-name{width:max-content;text-wrap:nowrap;cursor:pointer;transition:all ease-in .25s;border-bottom:1px solid transparent}.components-list__component-name--is-already{font-weight:700}.components-list__component-name:hover{border-color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentsListComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-components-list', template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n fxLayout=\"column\">\r\n <p\r\n *ngFor=\"let component of componentList\"\r\n class=\"components-list__component-name\"\r\n (click)=\"onSelectComponent(component)\">\r\n <span\r\n [class.components-list__component-name--is-already]=\"component.isAlready\">\r\n {{ component.name }}\r\n </span>\r\n </p>\r\n</div>\r\n", styles: [".components-list__component-name{width:max-content;text-wrap:nowrap;cursor:pointer;transition:all ease-in .25s;border-bottom:1px solid transparent}.components-list__component-name--is-already{font-weight:700}.components-list__component-name:hover{border-color:#000}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedComponent: [{
type: Output
}] } });
class CookieBarComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CookieBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CookieBarComponent, selector: "cfc-cookie-bar", ngImport: i0, template: "<br-cookiebar></br-cookiebar>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CookieBarComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-cookie-bar', template: "<br-cookiebar></br-cookiebar>\r\n" }]
}] });
class DatetimerPickerComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimerPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatetimerPickerComponent, selector: "cfc-datetimer-picker", ngImport: i0, template: "<br-datetimer-picker/>\r\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatetimerPickerComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-datetimer-picker', template: "<br-datetimer-picker/>\r\n" }]
}] });
var DividerMode;
(function (DividerMode) {
DividerMode["line"] = "line";
DividerMode["dashed"] = "dashed";
})(DividerMode || (DividerMode = {}));
var DividerType;
(function (DividerType) {
DividerType["primary"] = "primary";
DividerType["secondary"] = "secondary";
})(DividerType || (DividerType = {}));
var DividerAxis;
(function (DividerAxis) {
DividerAxis["horizontal"] = "horizontal";
DividerAxis["vertical"] = "vertical";
})(DividerAxis || (DividerAxis = {}));
var DividerDensity;
(function (DividerDensity) {
DividerDensity["large"] = "large";
DividerDensity["medium"] = "medium";
DividerDensity["small"] = "small";
})(DividerDensity || (DividerDensity = {}));
class DividerComponent {
height;
width;
mode = DividerMode.line;
type = DividerType.primary;
axis = DividerAxis.horizontal;
density = DividerDensity.small;
dividerModes = DividerMode;
dividerTypes = DividerType;
dividerAxis = DividerAxis;
dividerDensities = DividerDensity;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DividerComponent, selector: "cfc-divider", inputs: { height: "height", width: "width", mode: "mode", type: "type", axis: "axis", density: "density" }, ngImport: i0, template: "<span\r\n class=\"br-divider my-3\"\r\n [ngStyle]=\"{\r\n height: axis === dividerAxis.vertical ? (height ? height : '100%') : 'max-content',\r\n width: axis === dividerAxis.horizontal ? (width ? width : '100%') : 'max-content'\r\n }\"\r\n [class.dashed]=\"mode === dividerModes.dashed\"\r\n [class.vertical]=\"axis === dividerAxis.vertical\"\r\n [ngClass]=\"{\r\n 'mx-3': axis === dividerAxis.vertical,\r\n 'my-3': axis === dividerAxis.horizontal,\r\n 'sm': density === dividerDensities.small,\r\n 'md': density === dividerDensities.medium,\r\n 'lg': density === dividerDensities.large,\r\n 'dark-mode': type === dividerTypes.secondary\r\n }\"\r\n></span>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-divider', template: "<span\r\n class=\"br-divider my-3\"\r\n [ngStyle]=\"{\r\n height: axis === dividerAxis.vertical ? (height ? height : '100%') : 'max-content',\r\n width: axis === dividerAxis.horizontal ? (width ? width : '100%') : 'max-content'\r\n }\"\r\n [class.dashed]=\"mode === dividerModes.dashed\"\r\n [class.vertical]=\"axis === dividerAxis.vertical\"\r\n [ngClass]=\"{\r\n 'mx-3': axis === dividerAxis.vertical,\r\n 'my-3': axis === dividerAxis.horizontal,\r\n 'sm': density === dividerDensities.small,\r\n 'md': density === dividerDensities.medium,\r\n 'lg': density === dividerDensities.large,\r\n 'dark-mode': type === dividerTypes.secondary\r\n }\"\r\n></span>\r\n" }]
}], propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], mode: [{
type: Input
}], type: [{
type: Input
}], axis: [{
type: Input
}], density: [{
type: Input
}] } });
class FooterComponent {
renderer;
projectName;
projectVersion;
root;
height = 'max-content';
position = 'absolute';
contentHeight = 0;
windowHeight = 0;
mutationObserver;
resizeObserver;
constructor(renderer) {
this.renderer = renderer;
}
ngOnInit() {
this.initObservers();
}
ngAfterViewInit() {
this.checkFooterPosition();
}
ngOnDestroy() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();
}
/**
* INICIALIZA OS OBSERVERS PARA MONITORAR ALTERAÇÕES NA PÁGINA
*/
initObservers() {
this.mutationObserver = new MutationObserver(() => this.checkFooterPosition());
this.mutationObserver.observe(document.body, {
childList: true,
subtree: true,
});
this.resizeObserver = new ResizeObserver(() => this.checkFooterPosition());
this.resizeObserver.observe(document.body);
}
/**
* VERIFICA E AJUSTA A POSIÇÃO DO FOOTER SE NECESSÁRIO
*/
checkFooterPosition() {
if (!this.root)
return;
const footerHeight = +this.root.nativeElement.offsetHeight;
const newContentHeight = document.body.scrollHeight;
const newWindowHeight = window.innerHeight;
// VERIFICA SE O TAMANHO DA PÁGINA MUDOU
if (newContentHeight !== this.contentHeight || newWindowHeight !== this.windowHeight) {
this.contentHeight = newContentHeight;
this.windowHeight = newWindowHeight;
const position = newContentHeight <= (newWindowHeight - footerHeight) ? 'absolute' : 'relative';
this.renderer.setStyle(this.root.nativeElement, 'position', position);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, selector: "cfc-footer", inputs: { projectName: "projectName", projectVersion: "projectVersion" }, host: { properties: { "style.height": "this.position" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true }], ngImport: i0, template: "<footer class=\"footer\">\r\n <p>\r\n Conselho Federal de Contabilidade - {{ projectName }} - Vers\u00E3o: {{ projectVersion }}\r\n </p>\r\n <p>\r\n Todos os direitos reservados.\r\n </p>\r\n</footer>\r\n", styles: [":host{left:0;bottom:0;position:absolute;width:100%}.footer{position:relative;min-width:100%;background-color:#fff;border-top:1px solid rgba(204,204,204,.801);box-shadow:0 0 8px 1px #c1c1c180;padding:1rem 2.5rem;text-align:center}.footer p{font-family:Rawline;font-size:11.67px;font-weight:400;line-height:16.15px;text-align:center;text-underline-position:from-font;text-decoration-skip-ink:none;margin:0;padding:0}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-footer', template: "<footer class=\"footer\">\r\n <p>\r\n Conselho Federal de Contabilidade - {{ projectName }} - Vers\u00E3o: {{ projectVersion }}\r\n </p>\r\n <p>\r\n Todos os direitos reservados.\r\n </p>\r\n</footer>\r\n", styles: [":host{left:0;bottom:0;position:absolute;width:100%}.footer{position:relative;min-width:100%;background-color:#fff;border-top:1px solid rgba(204,204,204,.801);box-shadow:0 0 8px 1px #c1c1c180;padding:1rem 2.5rem;text-align:center}.footer p{font-family:Rawline;font-size:11.67px;font-weight:400;line-height:16.15px;text-align:center;text-underline-position:from-font;text-decoration-skip-ink:none;margin:0;padding:0}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { projectName: [{
type: Input
}], projectVersion: [{
type: Input
}], root: [{
type: ViewChild,
args: ['root', { static: false }]
}], height: [{
type: HostBinding,
args: ['style.height']
}], position: [{
type: HostBinding,
args: ['style.height']
}] } });
var LogoViewMode;
(function (LogoViewMode) {
LogoViewMode["default"] = "default";
LogoViewMode["neutral"] = "neutral";
LogoViewMode["voluntary"] = "voluntary";
LogoViewMode["external"] = "external";
})(LogoViewMode || (LogoViewMode = {}));
var HeaderViewMode;
(function (HeaderViewMode) {
HeaderViewMode["default"] = "default";
HeaderViewMode["contrast"] = "contrast";
})(HeaderViewMode || (HeaderViewMode = {}));
var SignInType;
(function (SignInType) {
SignInType["primary"] = "primary";
SignInType["secondary"] = "secondary";
})(SignInType || (SignInType = {}));
var TimerType;
(function (TimerType) {
TimerType["primary"] = "primary";
TimerType["secondary"] = "secondary";
})(TimerType || (TimerType = {}));
var SignInMode;
(function (SignInMode) {
SignInMode["internal"] = "internal";
SignInMode["externalTxt"] = "externalTxt";
SignInMode["externalImg"] = "externalImg";
SignInMode["logout"] = "logout";
})(SignInMode || (SignInMode = {}));
class LogoComponent {
viewMode = LogoViewMode.default;
isClickable = false;
width;
imageUrl;
clickEvent = new EventEmitter();
get svgPath() {
switch (this.viewMode) {
case LogoViewMode.default:
return '../../../assets/logo-default.svg';
case LogoViewMode.neutral:
return '../../../assets/logo-neutral.svg';
case LogoViewMode.voluntary:
return '../../../assets/logo-voluntary.svg';
case LogoViewMode.external:
if (this.imageUrl) {
return this.imageUrl;
}
else {
console.error(`imageUrl must not be empty`);
return '../../../assets/logo-default.svg';
}
default:
throw new Error(`invalid ViewMode: ${this.viewMode}`);
}
}
get svgWidth() {
return this.width ? `${this.width}px` : '100%';
}
onClick() {
if (this.clickEvent)
this.clickEvent.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoComponent, selector: "cfc-logo", inputs: { viewMode: "viewMode", isClickable: "isClickable", width: "width", imageUrl: "imageUrl" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<img\r\n alt=\"logo do conselho federal de contabilidade\"\r\n [src]=\"svgPath\"\r\n [style.cursor]=\"isClickable ? 'pointer' : 'default'\"\r\n [style.width]=\"svgWidth\"\r\n (click)=\"isClickable ? onClick(): undefined\"\r\n>\r\n", styles: ["svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-logo', changeDetection: ChangeDetectionStrategy.Default, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\r\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<img\r\n alt=\"logo do conselho federal de contabilidade\"\r\n [src]=\"svgPath\"\r\n [style.cursor]=\"isClickable ? 'pointer' : 'default'\"\r\n [style.width]=\"svgWidth\"\r\n (click)=\"isClickable ? onClick(): undefined\"\r\n>\r\n", styles: ["svg{display:block}\n"] }]
}], propDecorators: { viewMode: [{
type: Input
}], isClickable: [{
type: Input
}], width: [{
type: Input
}], imageUrl: [{
type: Input
}], clickEvent: [{
type: Output
}] } });
var SignInDensity;
(function (SignInDensity) {
SignInDensity["large"] = "large";
SignInDensity["middle"] = "middle";
SignInDensity["small"] = "small";
})(SignInDensity || (SignInDensity = {}));
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,