cfc-ds

Version:

Design System do Conselho Federal de Contabilidade baseado no govbr-ds

1 lines • 329 kB

Source Map (JSON)

{"version":3,"file":"cfc-ds.mjs","sources":["../../../projects/cfc-ds/src/lib/enums/avatar-density.enum.ts","../../../projects/cfc-ds/src/lib/enums/avatar-type.enum.ts","../../../projects/cfc-ds/src/lib/components/avatar/avatar.component.ts","../../../projects/cfc-ds/src/lib/components/avatar/avatar.component.html","../../../projects/cfc-ds/src/lib/components/breadcrumb/breadcrumb.component.ts","../../../projects/cfc-ds/src/lib/components/breadcrumb/breadcrumb.component.html","../../../projects/cfc-ds/src/lib/enums/button-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/button-density.enum.ts","../../../projects/cfc-ds/src/lib/components/button/button.component.ts","../../../projects/cfc-ds/src/lib/components/button/button.component.html","../../../projects/cfc-ds/src/lib/components/card/components/card-content/card-content.component.ts","../../../projects/cfc-ds/src/lib/components/card/components/card-content/card-content.component.html","../../../projects/cfc-ds/src/lib/components/card/card.component.ts","../../../projects/cfc-ds/src/lib/components/card/card.component.html","../../../projects/cfc-ds/src/lib/components/carousel/carousel.component.ts","../../../projects/cfc-ds/src/lib/components/carousel/carousel.component.html","../../../projects/cfc-ds/src/lib/cfc-ds-root.component.ts","../../../projects/cfc-ds/src/lib/components/checkboxes/checkboxes.component.ts","../../../projects/cfc-ds/src/lib/components/checkboxes/checkboxes.component.html","../../../projects/cfc-ds/src/lib/models/components.model.ts","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/components-list/components-list.component.ts","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/components-list/components-list.component.html","../../../projects/cfc-ds/src/lib/components/cookie-bar/cookie-bar.component.ts","../../../projects/cfc-ds/src/lib/components/cookie-bar/cookie-bar.component.html","../../../projects/cfc-ds/src/lib/components/datetimer-picker/datetimer-picker.component.ts","../../../projects/cfc-ds/src/lib/components/datetimer-picker/datetimer-picker.component.html","../../../projects/cfc-ds/src/lib/enums/divider-mode.enum.ts","../../../projects/cfc-ds/src/lib/enums/divider-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/divider-axis.enum.ts","../../../projects/cfc-ds/src/lib/enums/divider-density.enum.ts","../../../projects/cfc-ds/src/lib/components/divider/divider.component.ts","../../../projects/cfc-ds/src/lib/components/divider/divider.component.html","../../../projects/cfc-ds/src/lib/components/footer/footer.component.ts","../../../projects/cfc-ds/src/lib/components/footer/footer.component.html","../../../projects/cfc-ds/src/lib/enums/logo-view-mode.enum.ts","../../../projects/cfc-ds/src/lib/enums/header-view-mode.enum.ts","../../../projects/cfc-ds/src/lib/enums/sign-in-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/timer-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/sign-in-mode.enum.ts","../../../projects/cfc-ds/src/lib/components/logo/logo.component.ts","../../../projects/cfc-ds/src/lib/components/logo/logo.component.html","../../../projects/cfc-ds/src/lib/enums/sign-in-density.enum.ts","../../../projects/cfc-ds/src/lib/components/sign-in/sign-in.component.ts","../../../projects/cfc-ds/src/lib/components/sign-in/sign-in.component.html","../../../projects/cfc-ds/src/lib/services/timer.service.ts","../../../projects/cfc-ds/src/lib/components/timer/timer.component.ts","../../../projects/cfc-ds/src/lib/components/timer/timer.component.html","../../../projects/cfc-ds/src/lib/components/header/header.component.ts","../../../projects/cfc-ds/src/lib/components/header/header.component.html","../../../projects/cfc-ds/src/lib/components/icon/icon.component.ts","../../../projects/cfc-ds/src/lib/components/icon/icon.component.html","../../../projects/cfc-ds/src/lib/enums/input-state.enum.ts","../../../projects/cfc-ds/src/lib/enums/input-density.enum.ts","../../../projects/cfc-ds/src/lib/components/_base/value-accessor.component.ts","../../../projects/cfc-ds/src/lib/components/input/input.component.ts","../../../projects/cfc-ds/src/lib/components/input/input.component.html","../../../projects/cfc-ds/src/lib/components/list/list.component.ts","../../../projects/cfc-ds/src/lib/components/list/list.component.html","../../../projects/cfc-ds/src/lib/components/magic-button/magic-button.component.ts","../../../projects/cfc-ds/src/lib/components/magic-button/magic-button.component.html","../../../projects/cfc-ds/src/lib/components/menu/menu.component.ts","../../../projects/cfc-ds/src/lib/components/menu/menu.component.html","../../../projects/cfc-ds/src/lib/enums/message-state.enum.ts","../../../projects/cfc-ds/src/lib/enums/message-type.enum.ts","../../../projects/cfc-ds/src/lib/components/message/message.component.ts","../../../projects/cfc-ds/src/lib/components/message/message.component.html","../../../projects/cfc-ds/src/lib/enums/modal-density.enum.ts","../../../projects/cfc-ds/src/lib/enums/modal-type.enum.ts","../../../projects/cfc-ds/src/lib/components/scrim/scrim.component.ts","../../../projects/cfc-ds/src/lib/components/scrim/scrim.component.html","../../../projects/cfc-ds/src/lib/components/modal/modal.component.ts","../../../projects/cfc-ds/src/lib/components/modal/modal.component.html","../../../projects/cfc-ds/src/lib/components/notification/notification.component.ts","../../../projects/cfc-ds/src/lib/components/notification/notification.component.html","../../../projects/cfc-ds/src/lib/components/notification-panel/notification-panel.component.ts","../../../projects/cfc-ds/src/lib/components/notification-panel/notification-panel.component.html","../../../projects/cfc-ds/src/lib/components/page-content/page-content.component.ts","../../../projects/cfc-ds/src/lib/components/page-content/page-content.component.html","../../../projects/cfc-ds/src/lib/components/select/select.component.ts","../../../projects/cfc-ds/src/lib/components/select/select.component.html","../../../projects/cfc-ds/src/lib/components/pagination/pagination.component.ts","../../../projects/cfc-ds/src/lib/components/pagination/pagination.component.html","../../../projects/cfc-ds/src/lib/components/radio/radio.component.ts","../../../projects/cfc-ds/src/lib/components/radio/radio.component.html","../../../projects/cfc-ds/src/lib/components/skiplink/skiplink.component.ts","../../../projects/cfc-ds/src/lib/components/skiplink/skiplink.component.html","../../../projects/cfc-ds/src/lib/components/slider/slider.component.ts","../../../projects/cfc-ds/src/lib/components/slider/slider.component.html","../../../projects/cfc-ds/src/lib/components/switch/switch.component.ts","../../../projects/cfc-ds/src/lib/components/switch/switch.component.html","../../../projects/cfc-ds/src/lib/components/tab/tab.component.ts","../../../projects/cfc-ds/src/lib/components/tab/tab.component.html","../../../projects/cfc-ds/src/lib/components/table/table.component.ts","../../../projects/cfc-ds/src/lib/components/table/table.component.html","../../../projects/cfc-ds/src/lib/components/tag/tag.component.ts","../../../projects/cfc-ds/src/lib/components/tag/tag.component.html","../../../projects/cfc-ds/src/lib/enums/tooltip-place.enum.ts","../../../projects/cfc-ds/src/lib/enums/checkbox-option-state.enum.ts","../../../projects/cfc-ds/src/lib/enums/checkbox-option-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/loading-density.enum.ts","../../../projects/cfc-ds/src/lib/enums/item-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/illustration-type.enum.ts","../../../projects/cfc-ds/src/lib/components/checkbox-option/checkbox-option.component.ts","../../../projects/cfc-ds/src/lib/components/checkbox-option/checkbox-option.component.html","../../../projects/cfc-ds/src/lib/components/collapse/collapse.component.ts","../../../projects/cfc-ds/src/lib/components/collapse/collapse.component.html","../../../projects/cfc-ds/src/lib/components/item/item.component.ts","../../../projects/cfc-ds/src/lib/components/item/item.component.html","../../../projects/cfc-ds/src/lib/services/loading.service.ts","../../../projects/cfc-ds/src/lib/components/loading/loading.component.ts","../../../projects/cfc-ds/src/lib/components/loading/loading.component.html","../../../projects/cfc-ds/src/lib/components/textarea/textarea.component.ts","../../../projects/cfc-ds/src/lib/components/textarea/textarea.component.html","../../../projects/cfc-ds/src/lib/components/tooltip/tooltip.component.ts","../../../projects/cfc-ds/src/lib/components/tooltip/tooltip.component.html","../../../projects/cfc-ds/src/lib/components/upload/upload.component.ts","../../../projects/cfc-ds/src/lib/components/upload/upload.component.html","../../../projects/cfc-ds/src/lib/components/wizard/wizard.component.ts","../../../projects/cfc-ds/src/lib/components/wizard/wizard.component.html","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/test-component/test-component.component.ts","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/test-component/test-component.component.html","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/test-page.component.ts","../../../projects/cfc-ds/src/lib/pages/cfc-test-page/test-page.component.html","../../../projects/cfc-ds/src/lib/providers/daysjs-date-adapter.ts","../../../projects/cfc-ds/src/lib/directives/controller.directive.ts","../../../projects/cfc-ds/src/lib/components/card/components/card-header/card-header.component.ts","../../../projects/cfc-ds/src/lib/components/card/components/card-header/card-header.component.html","../../../projects/cfc-ds/src/lib/components/card/components/card-footer/card-footer.component.ts","../../../projects/cfc-ds/src/lib/components/card/components/card-footer/card-footer.component.html","../../../projects/cfc-ds/src/lib/components/illustration-state/illustration-state.component.ts","../../../projects/cfc-ds/src/lib/components/illustration-state/illustration-state.component.html","../../../projects/cfc-ds/src/lib/directives/full-width.directive.ts","../../../projects/cfc-ds/src/lib/directives/click-outside.directive.ts","../../../projects/cfc-ds/src/lib/cfc-ds.module.ts","../../../projects/cfc-ds/src/lib/enums/menu-type.enum.ts","../../../projects/cfc-ds/src/lib/enums/menu-groupment.enum.ts","../../../projects/cfc-ds/src/public-api.ts","../../../projects/cfc-ds/src/cfc-ds.ts"],"sourcesContent":["export enum AvatarDensity {\r\n large = \"large\",\r\n medium = \"medium\",\r\n small = \"small\"\r\n}\r\n","export enum AvatarType {\r\n letter = \"letter\",\r\n icon = \"icon\",\r\n image = \"image\"\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { AvatarDensity } from '../../enums/avatar-density.enum';\r\nimport { AvatarType } from '../../enums/avatar-type.enum';\r\n\r\n@Component({\r\n selector: 'cfc-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrl: './avatar.component.scss'\r\n})\r\nexport class AvatarComponent {\r\n @Input() type: AvatarType = AvatarType.icon;\r\n @Input() name!: string;\r\n @Input() density: AvatarDensity = AvatarDensity.medium;\r\n @Input() imageUrl?: string = '';\r\n\r\n avatarTypes = AvatarType;\r\n avatarDensities = AvatarDensity;\r\n}\r\n","<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","import { Component, Input, OnDestroy, OnInit } from '@angular/core';\r\nimport { Router, ActivatedRoute, NavigationEnd, Data } from '@angular/router';\r\nimport { filter, Subscription } from 'rxjs';\r\nimport { BreadcrumbLink } from '../../models/breadcrumb.model';\r\n\r\n@Component({\r\n selector: 'cfc-breadcrumb',\r\n templateUrl: './breadcrumb.component.html',\r\n styleUrls: ['./breadcrumb.component.scss']\r\n})\r\nexport class BreadcrumbComponent implements OnInit, OnDestroy {\r\n /** Lista de breadcrumbs gerados */\r\n links: BreadcrumbLink[] = [];\r\n\r\n @Input() homeUrl?: string;\r\n\r\n /** Inscrição para monitorar mudanças na rota */\r\n private routeSubscription?: Subscription;\r\n\r\n constructor(\r\n private router: Router,\r\n private activatedRoute: ActivatedRoute\r\n ) {}\r\n\r\n /** Inicializa o componente e observa mudanças de rota */\r\n ngOnInit(): void {\r\n this.updateBreadcrumbs();\r\n\r\n this.routeSubscription = this.router.events.pipe(\r\n filter(event => event instanceof NavigationEnd)\r\n ).subscribe(() => {\r\n this.updateBreadcrumbs();\r\n });\r\n }\r\n\r\n getHomeUrl(): string {\r\n if (!this.homeUrl) {\r\n return '/';\r\n }\r\n\r\n return this.homeUrl;\r\n }\r\n\r\n /** Atualiza os breadcrumbs com base na rota ativa */\r\n private updateBreadcrumbs(): void {\r\n const breadcrumbs = this.buildBreadcrumbs(this.router.routerState.root);\r\n this.removeLastBreadcrumbUrl(breadcrumbs);\r\n this.links = breadcrumbs;\r\n }\r\n\r\n /**\r\n * Constrói os breadcrumbs recursivamente com base nas rotas ativadas.\r\n * @param route Rota ativa.\r\n * @param breadcrumbs Lista de breadcrumbs acumulada.\r\n * @returns Lista de BreadcrumbLink atualizada.\r\n */\r\n private buildBreadcrumbs(route: ActivatedRoute, breadcrumbs: BreadcrumbLink[] = []): BreadcrumbLink[] {\r\n route.children.forEach((child) => {\r\n const routeSegment = this.getRouteURL(child);\r\n const label = this.getBreadcrumbLabel(child.snapshot.data);\r\n const fullPath = this.buildFullPath(routeSegment, breadcrumbs);\r\n\r\n if (label && !this.isDuplicateBreadcrumb(breadcrumbs, label)) {\r\n breadcrumbs.push({ label, url: fullPath, target: '_self' });\r\n }\r\n\r\n this.buildBreadcrumbs(child, breadcrumbs);\r\n });\r\n\r\n return breadcrumbs;\r\n }\r\n\r\n /**\r\n * Obtém o segmento da URL da rota atual.\r\n * @param route Rota atual.\r\n * @returns Segmento da URL ou string vazia.\r\n */\r\n private getRouteURL(route: ActivatedRoute): string {\r\n return route.snapshot.url.length > 0\r\n ? route.snapshot.url.map(segment => segment.path).join('/')\r\n : '';\r\n }\r\n\r\n /**\r\n * Constrói o caminho completo concatenando segmentos anteriores.\r\n * @param routeSegment Segmento atual da rota.\r\n * @param breadcrumbs Lista de breadcrumbs acumulada.\r\n * @returns Caminho completo da URL.\r\n */\r\n private buildFullPath(routeSegment: string, breadcrumbs: BreadcrumbLink[]): string {\r\n if (!routeSegment) return '';\r\n const previousPath = breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1].url : '';\r\n return previousPath ? `${previousPath}/${routeSegment}` : `/${routeSegment}`;\r\n }\r\n\r\n /**\r\n * Obtém o rótulo do breadcrumb a partir dos dados da rota.\r\n * @param data Dados da rota.\r\n * @returns Rótulo do breadcrumb ou null.\r\n */\r\n private getBreadcrumbLabel(data: Data): string | null {\r\n const label = data['breadcrumb'];\r\n return label && typeof label === 'string' && label.trim() ? label.trim() : null;\r\n }\r\n\r\n /**\r\n * Remove a URL do último breadcrumb para evitar que seja clicável.\r\n * @param breadcrumbs Lista de breadcrumbs.\r\n */\r\n private removeLastBreadcrumbUrl(breadcrumbs: BreadcrumbLink[]): void {\r\n if (breadcrumbs.length > 0) {\r\n breadcrumbs[breadcrumbs.length - 1].url = undefined;\r\n }\r\n }\r\n\r\n /**\r\n * Verifica se um breadcrumb já existe na lista para evitar duplicatas.\r\n * @param breadcrumbs Lista de breadcrumbs acumulada.\r\n * @param label Nome do breadcrumb a verificar.\r\n * @returns Verdadeiro se o breadcrumb já existir, falso caso contrário.\r\n */\r\n private isDuplicateBreadcrumb(breadcrumbs: BreadcrumbLink[], label: string): boolean {\r\n return breadcrumbs.some(bc => bc.label === label);\r\n }\r\n\r\n /** Cancela a inscrição ao destruir o componente */\r\n ngOnDestroy(): void {\r\n this.routeSubscription?.unsubscribe();\r\n }\r\n}\r\n","<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","export enum ButtonType {\r\n primary = \"primary\",\r\n secondary = \"secondary\",\r\n tertiary = \"tertiary\",\r\n danger = 'danger'\r\n}\r\n","export enum ButtonDensity {\r\n large = \"large\",\r\n middle = \"middle\",\r\n small = \"small\",\r\n xsmall = \"xsmall\"\r\n}\r\n","import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\r\nimport { ButtonType } from '../../enums/button-type.enum';\r\nimport { ButtonDensity } from '../../enums/button-density.enum';\r\n\r\n@Component({\r\n selector: 'cfc-button',\r\n templateUrl: './button.component.html',\r\n styleUrl: './button.component.scss'\r\n})\r\nexport class ButtonComponent implements OnChanges {\r\n\r\n @Input() label = 'button';\r\n @Input() type: ButtonType = ButtonType.primary;\r\n @Input() submit = false;\r\n @Input() circle = false;\r\n @Input() density: ButtonDensity = ButtonDensity.middle;\r\n @Input() disabled = false;\r\n @Input() block = false;\r\n @Input() icon = '';\r\n @Input() active = false ;\r\n @Input() inverted = false;\r\n @Input() loading = false;\r\n\r\n @Output() onClick: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n readonly buttonTypes: typeof ButtonType = ButtonType;\r\n\r\n constructor(\r\n private cdr: ChangeDetectorRef\r\n ) { }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['type']) {\r\n this.cdr.detectChanges();\r\n }\r\n }\r\n\r\n}\r\n","<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","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-card-content',\r\n templateUrl: './card-content.component.html',\r\n styleUrl: './card-content.component.scss'\r\n})\r\nexport class CardContentComponent {\r\n\r\n}\r\n","<div class=\"card-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n","import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-card',\r\n templateUrl: './card.component.html',\r\n styleUrl: './card.component.scss'\r\n})\r\nexport class CardComponent {\r\n\r\n @Input() hover = false;\r\n @Input() disabled = false;\r\n\r\n}\r\n","<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","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-carousel',\r\n templateUrl: './carousel.component.html',\r\n styleUrl: './carousel.component.scss'\r\n})\r\nexport class CarouselComponent {\r\n\r\n}\r\n","<br-carousel></br-carousel>\r\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'cfc-ds-root',\n template: `\n <router-outlet></router-outlet>\n `,\n styles: ``\n})\nexport class CfcDsRootComponent { }\n","import { Component, Input } from '@angular/core';\r\nimport { CheckboxDirection, CheckboxOption } from '../../models/checkbox.model';\r\n\r\n@Component({\r\n selector: 'cfc-checkboxes',\r\n templateUrl: './checkboxes.component.html',\r\n styleUrl: './checkboxes.component.scss'\r\n})\r\nexport class CheckboxesComponent {\r\n\r\n @Input() label!: string;\r\n @Input() description?: string;\r\n @Input() options!: CheckboxOption[];\r\n @Input() mode: CheckboxDirection = 'column';\r\n\r\n}\r\n\r\n","<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","export interface ComponentType {\r\n id: number;\r\n name: string;\r\n clickEventName: string;\r\n isAlready?: boolean;\r\n}\r\n\r\nexport const components: ComponentType[] = [\r\n{ id: 1, name: 'avatar', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 2, name: 'breadcrumb', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 3, name: 'button', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 4, name: 'card', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 5, name: 'carousel', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 6, name: 'checkboxes', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 7, name: 'checkbox', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 8, name: 'collapse', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 9, name: 'cookie-bar', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 10, name: 'datetimer-picker', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 11, name: 'divider', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 12, name: 'footer', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 13, name: 'header', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 15, name: 'icon', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 16, name: 'illustration-state', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 16, name: 'input', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 14, name: 'item', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 17, name: 'list', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 18, name: 'loading', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 19, name: 'logo', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 20, name: 'magic-button', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 21, name: 'menu', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 22, name: 'message', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 23, name: 'modal', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 24, name: 'notification', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 25, name: 'notification-panel', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 26, name: 'pagination', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 27, name: 'radio', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 28, name: 'scrim', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 29, name: 'select', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 30, name: 'sign-in', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 31, name: 'skiplink', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 32, name: 'slider', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 33, name: 'switch', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 34, name: 'tab', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 35, name: 'table', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 36, name: 'tag', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 37, name: 'textarea', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 38, name: 'template-error', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 39, name: 'timer', clickEventName: 'setComponent', isAlready: true },\r\n{ id: 40, name: 'tooltip', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 41, name: 'upload', clickEventName: 'setComponent', isAlready: false },\r\n{ id: 42, name: 'wizard', clickEventName: 'setComponent', isAlready: false }\r\n].sort();\r\n","import { ChangeDetectorRef, Component, EventEmitter, Output } from '@angular/core';\r\nimport { ComponentType, components } from '../../../models/components.model';\r\n\r\n@Component({\r\n selector: 'cfc-components-list',\r\n templateUrl: './components-list.component.html',\r\n styleUrl: './components-list.component.scss'\r\n})\r\nexport class ComponentsListComponent {\r\n @Output() selectedComponent = new EventEmitter<ComponentType>();\r\n\r\n componentList: ComponentType[] = components;\r\n\r\n constructor(\r\n private cdr: ChangeDetectorRef\r\n ) { }\r\n\r\n onSelectComponent(component: ComponentType): void {\r\n this.selectedComponent.emit(component);\r\n this.cdr.detectChanges();\r\n }\r\n\r\n}\r\n","\r\n\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","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-cookie-bar',\r\n templateUrl: './cookie-bar.component.html',\r\n styleUrl: './cookie-bar.component.scss'\r\n})\r\nexport class CookieBarComponent {\r\n\r\n}\r\n","<br-cookiebar></br-cookiebar>\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-datetimer-picker',\r\n templateUrl: './datetimer-picker.component.html',\r\n styleUrl: './datetimer-picker.component.scss'\r\n})\r\nexport class DatetimerPickerComponent {\r\n\r\n}\r\n","<br-datetimer-picker/>\r\n","export enum DividerMode {\r\n line = \"line\",\r\n dashed = \"dashed\"\r\n}\r\n","export enum DividerType {\r\n primary = \"primary\",\r\n secondary = \"secondary\"\r\n}\r\n","export enum DividerAxis {\r\n horizontal = \"horizontal\",\r\n vertical = \"vertical\"\r\n}\r\n","export enum DividerDensity {\r\n large = \"large\",\r\n medium = \"medium\",\r\n small = \"small\"\r\n}\r\n","import { Component, Input } from '@angular/core';\r\nimport { DividerMode } from '../../enums/divider-mode.enum';\r\nimport { DividerType } from '../../enums/divider-type.enum';\r\nimport { DividerAxis } from '../../enums/divider-axis.enum';\r\nimport { DividerDensity } from '../../enums/divider-density.enum';\r\n\r\n@Component({\r\n selector: 'cfc-divider',\r\n templateUrl: './divider.component.html',\r\n styleUrl: './divider.component.scss'\r\n})\r\nexport class DividerComponent {\r\n\r\n @Input() height?: string;\r\n @Input() width?: string;\r\n @Input() mode: DividerMode = DividerMode.line;\r\n @Input() type: DividerType = DividerType.primary;\r\n @Input() axis: DividerAxis = DividerAxis.horizontal;\r\n @Input() density: DividerDensity = DividerDensity.small;\r\n\r\n dividerModes: typeof DividerMode = DividerMode;\r\n dividerTypes: typeof DividerType = DividerType;\r\n dividerAxis: typeof DividerAxis = DividerAxis;\r\n dividerDensities: typeof DividerDensity = DividerDensity;\r\n\r\n}\r\n","<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","import {\r\n Component,\r\n ElementRef,\r\n Input,\r\n ViewChild,\r\n Renderer2,\r\n AfterViewInit,\r\n OnDestroy,\r\n OnInit,\r\n HostBinding,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cfc-footer',\r\n templateUrl: './footer.component.html',\r\n styleUrls: ['./footer.component.scss']\r\n})\r\nexport class FooterComponent implements OnInit, AfterViewInit, OnDestroy {\r\n @Input() projectName!: string;\r\n @Input() projectVersion!: string;\r\n\r\n @ViewChild('root', { static: false }) root?: ElementRef;\r\n\r\n @HostBinding('style.height') height = 'max-content';\r\n @HostBinding('style.height') position = 'absolute';\r\n\r\n private contentHeight = 0;\r\n private windowHeight = 0;\r\n private mutationObserver?: MutationObserver;\r\n private resizeObserver?: ResizeObserver;\r\n\r\n constructor(private renderer: Renderer2) {}\r\n\r\n ngOnInit(): void {\r\n this.initObservers();\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n this.checkFooterPosition();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n /**\r\n * INICIALIZA OS OBSERVERS PARA MONITORAR ALTERAÇÕES NA PÁGINA\r\n */\r\n private initObservers(): void {\r\n this.mutationObserver = new MutationObserver(() => this.checkFooterPosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.checkFooterPosition());\r\n this.resizeObserver.observe(document.body);\r\n }\r\n\r\n /**\r\n * VERIFICA E AJUSTA A POSIÇÃO DO FOOTER SE NECESSÁRIO\r\n */\r\n private checkFooterPosition(): void {\r\n if (!this.root) return;\r\n\r\n const footerHeight = +this.root.nativeElement.offsetHeight;\r\n const newContentHeight = document.body.scrollHeight;\r\n const newWindowHeight = window.innerHeight;\r\n\r\n // VERIFICA SE O TAMANHO DA PÁGINA MUDOU\r\n if (newContentHeight !== this.contentHeight || newWindowHeight !== this.windowHeight) {\r\n this.contentHeight = newContentHeight;\r\n this.windowHeight = newWindowHeight;\r\n\r\n const position = newContentHeight <= (newWindowHeight - footerHeight) ? 'absolute' : 'relative';\r\n this.renderer.setStyle(this.root.nativeElement, 'position', position);\r\n }\r\n }\r\n}\r\n","<footer class=\"footer\">\r\n <p>\r\n Conselho Federal de Contabilidade - {{ projectName }} - Versão: {{ projectVersion }}\r\n </p>\r\n <p>\r\n Todos os direitos reservados.\r\n </p>\r\n</footer>\r\n","export enum LogoViewMode {\r\n default = \"default\",\r\n neutral = \"neutral\",\r\n voluntary = \"voluntary\",\r\n external = \"external\"\r\n}\r\n","export enum HeaderViewMode {\r\n default = \"default\",\r\n contrast = \"contrast\"\r\n}\r\n","export enum SignInType {\r\n primary = \"primary\",\r\n secondary = \"secondary\"\r\n}\r\n","export enum TimerType {\r\n primary = \"primary\",\r\n secondary = \"secondary\"\r\n}\r\n","export enum SignInMode {\r\n internal = \"internal\",\r\n externalTxt = \"externalTxt\",\r\n externalImg = \"externalImg\",\r\n logout = \"logout\"\r\n}\r\n","import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n} from '@angular/core';\r\n\r\nimport { LogoViewMode } from '../../enums/logo-view-mode.enum';\r\n\r\n@Component({\r\n selector: 'cfc-logo',\r\n templateUrl: './logo.component.html',\r\n styleUrl: './logo.component.scss',\r\n changeDetection: ChangeDetectionStrategy.Default\r\n})\r\nexport class LogoComponent {\r\n\r\n @Input() viewMode: LogoViewMode = LogoViewMode.default;\r\n @Input() isClickable = false;\r\n @Input() width?: number;\r\n @Input() imageUrl?: string;\r\n\r\n @Output() clickEvent: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n get svgPath(): string {\r\n switch (this.viewMode) {\r\n case LogoViewMode.default:\r\n return '../../../assets/logo-default.svg';\r\n case LogoViewMode.neutral:\r\n return '../../../assets/logo-neutral.svg';\r\n case LogoViewMode.voluntary:\r\n return '../../../assets/logo-voluntary.svg';\r\n case LogoViewMode.external:\r\n if (this.imageUrl) {\r\n return this.imageUrl;\r\n } else {\r\n console.error(`imageUrl must not be empty`);\r\n return '../../../assets/logo-default.svg';\r\n }\r\n default:\r\n throw new Error(`invalid ViewMode: ${this.viewMode}`);\r\n }\r\n }\r\n\r\n get svgWidth(): string {\r\n return this.width ? `${this.width}px` : '100%';\r\n }\r\n\r\n onClick() {\r\n if (this.clickEvent) this.clickEvent.emit();\r\n }\r\n\r\n}\r\n","\r\n\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","export enum SignInDensity {\r\n large = \"large\",\r\n middle = \"middle\",\r\n small = \"small\"\r\n}\r\n","import { AfterViewInit, Component, ElementRef, EventEmitter, HostBinding, Input, Output } from '@angular/core';\r\nimport { SignInType } from '../../enums/sign-in-type.enum';\r\nimport { SignInDensity } from '../../enums/sign-in-density.enum';\r\nimport { SignInMode } from '../../enums/sign-in-mode.enum';\r\n\r\n@Component({\r\n selector: 'cfc-sign-in',\r\n templateUrl: './sign-in.component.html',\r\n styleUrl: './sign-in.component.scss'\r\n})\r\nexport class SignInComponent\r\n implements AfterViewInit {\r\n\r\n @Input() label = 'user';\r\n @Input() type: SignInType = SignInType.secondary;\r\n @Input() density: SignInDensity = SignInDensity.middle;\r\n @Input() mode: SignInMode = SignInMode.internal;\r\n @Input() disabled = false;\r\n @Input() active = false;\r\n @Input() block = false;\r\n @Input() circle = false;\r\n @Input() externalImageUrl = '';\r\n @Input() externalLabel?: string;\r\n\r\n @Output() onClick: EventEmitter<any> = new EventEmitter<any>();\r\n @Output() onLogout: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n @HostBinding('style.width') initialWidth: string = '';\r\n\r\n isLogoutVisible = false;\r\n\r\n readonly signinTypes = SignInType;\r\n readonly signinDensities = SignInDensity;\r\n readonly signinModes = SignInMode;\r\n\r\n constructor(private elementRef: ElementRef) {}\r\n\r\n ngAfterViewInit(): void {\r\n this.initialWidth = `${this.elementRef.nativeElement.offsetWidth}px`;\r\n }\r\n\r\n showLogout(isVisible: boolean): void {\r\n this.isLogoutVisible = isVisible && this.mode === this.signinModes.logout;\r\n }\r\n}\r\n","<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ção 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","import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject, interval, Subscription } from 'rxjs';\r\nimport { map, takeWhile } from 'rxjs/operators';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class TimerService {\r\n private countdown$ = new BehaviorSubject<number | null>(null);\r\n private subscription: Subscription | null = null;\r\n\r\n /**\r\n * CONVERTE TEMPO DE DIFERENTES FORMATOS PARA SEGUNDOS\r\n * @param time String no formato 'dias:hh:mm:ss', 'hh:mm:ss', 'mm:ss' ou número em segundos.\r\n */\r\n private parseTimeToSeconds(time: string | number): number {\r\n if (typeof time === 'number') {\r\n return time;\r\n }\r\n\r\n const parts = time.split(':').map(Number).reverse();\r\n const [seconds = 0, minutes = 0, hours = 0, days = 0] = parts;\r\n\r\n return seconds + minutes * 60 + hours * 3600 + days * 86400;\r\n }\r\n\r\n /**\r\n * INICIA A CONTAGEM REGRESSIVA\r\n * @param time Tempo no formato 'dias:hh:mm:ss', 'hh:mm:ss', 'mm:ss' ou número em segundos.\r\n */\r\n startCountdown(time: string | number): void {\r\n const totalSeconds = this.parseTimeToSeconds(time);\r\n\r\n if (this.subscription) {\r\n this.subscription.unsubscribe();\r\n }\r\n\r\n this.countdown$.next(totalSeconds);\r\n\r\n this.subscription = interval(1000)\r\n .pipe(\r\n map((elapsed) => totalSeconds - elapsed),\r\n takeWhile((timeLeft) => timeLeft >= 0)\r\n )\r\n .subscribe({\r\n next: (timeLeft) => this.countdown$.next(timeLeft),\r\n complete: () => this.countdown$.next(0),\r\n });\r\n }\r\n\r\n /**\r\n * RETORNA O STREAM DO TEMPO RESTANTE\r\n */\r\n getCountdown() {\r\n return this.countdown$.asObservable();\r\n }\r\n\r\n /**\r\n * INTERROMPE A CONTAGEM\r\n */\r\n stopCountdown(): void {\r\n if (this.subscription) {\r\n this.subscription.unsubscribe();\r\n this.subscription = null;\r\n }\r\n this.countdown$.next(null);\r\n }\r\n}\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { TimerService } from '../../services/timer.service';\r\nimport { TimerType } from '../../enums/timer-type.enum';\r\n\r\n@Component({\r\n selector: 'cfc-timer',\r\n templateUrl: './timer.component.html',\r\n styleUrls: ['./timer.component.scss'],\r\n})\r\nexport class TimerComponent implements OnInit, OnDestroy {\r\n @Input() type: TimerType = TimerType.primary;\r\n @Input() initialTime: string | number = '0:30:00';\r\n @Input() criticalTime = 300;\r\n @Input() isGlobal = false;\r\n\r\n @Output() timeOutEvent = new EventEmitter<void>();\r\n @Output() timeEvent = new EventEmitter<void>();\r\n @Output() timeCriticalEvent = new EventEmitter<void>();\r\n\r\n displayTime = '30:00';\r\n criticalTimeIsOut = false;\r\n timerTypes: typeof TimerType = TimerType;\r\n\r\n private remainingTimeSubscription!: Subscription;\r\n private localRemainingTime: number = 0;\r\n\r\n constructor(\r\n private timerService: TimerService\r\n ) {}\r\n\r\n ngOnInit(): void {\r\n this.startTimer();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.isGlobal) {\r\n this.timerService.stopCountdown();\r\n this.remainingTimeSubscription.unsubscribe();\r\n }\r\n }\r\n\r\n startTimer(): void {\r\n if (this.isGlobal) {\r\n this.timerService.startCountdown(this.initialTime);\r\n\r\n this.remainingTimeSubscription = this.timerService.getCountdown().subscribe((remainingTime) => {\r\n if (remainingTime !== null) {\r\n this.updateDisplayTime(remainingTime);\r\n\r\n if (!this.criticalTimeIsOut && remainingTime <= this.criticalTime) {\r\n this.timeCriticalEvent.emit();\r\n this.criticalTimeIsOut = true;\r\n }\r\n\r\n if (remainingTime <= 0) {\r\n this.timeOutEvent.emit();\r\n } else {\r\n this.timeEvent.emit();\r\n }\r\n }\r\n });\r\n } else {\r\n // Contagem local quando isGlobal = false\r\n this.localRemainingTime = this.parseTimeToSeconds(this.initialTime);\r\n this.startLocalCountdown();\r\n }\r\n }\r\n\r\n private startLocalCountdown(): void {\r\n const intervalId = setInterval(() => {\r\n this.localRemainingTime--;\r\n\r\n this.updateDisplayTime(this.localRemainingTime);\r\n\r\n if (!this.criticalTimeIsOut && this.localRemainingTime <= this.criticalTime) {\r\n this.timeCriticalEvent.emit();\r\n this.criticalTimeIsOut = true;\r\n }\r\n\r\n if (this.localRemainingTime <= 0) {\r\n clearInterval(intervalId);\r\n this.timeOutEvent.emit();\r\n } else {\r\n this.timeEvent.emit();\r\n }\r\n }, 1000);\r\n }\r\n\r\n private updateDisplayTime(seconds: number): void {\r\n const days = Math.floor(seconds / 86400);\r\n const hours = Math.floor((seconds % 86400) / 3600);\r\n const minutes = Math.floor((seconds % 3600) / 60);\r\n const remainingSeconds = seconds % 60;\r\n\r\n this.displayTime =\r\n days > 0\r\n ? `${days} dias`\r\n : `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(remainingSeconds)}`;\r\n }\r\n\r\n private padZero(number: number): string {\r\n return number < 10 ? `0${number}` : `${number}`;\r\n }\r\n\r\n private parseTimeToSeconds(time: string | number): number {\r\n if (typeof time === 'number') {\r\n return time;\r\n }\r\n\r\n const parts = time.split(':').map(Number).reverse();\r\n const [seconds = 0, minutes = 0, hours = 0, days = 0] = parts;\r\n\r\n return seconds + minutes * 60 + hours * 3600 + days * 86400;\r\n }\r\n}\r\n","<button\r\n class=\"br-button\"\r\n style=\"pointer-events: none; cursor: default; min-width: 9.3rem;\"\r\n [ngClass]=\"{\r\n 'bg-gray-2': (type === timerTypes.primary && !criticalTimeIsOut),\r\n 'bg-yellow-5': (type === timerTypes.primary && criticalTimeIsOut),\r\n 'text-pure-100': type === timerTypes.primary,\r\n 'bg-blue-warm-60': (type === timerTypes.secondary && !criticalTimeIsOut),\r\n 'bg-red-warm-20': (type === timerTypes.secondary && criticalTimeIsOut),\r\n 'text-blue-warm-60': (type === timerTypes.secondary && criticalTimeIsOut),\r\n 'text-pure-0': type === timerTypes.secondary && !criticalTimeIsOut\r\n }\"\r\n fxLayoutGap=\"0.1rem\"\r\n fxLayoutAlign=\"start center\">\r\n <i class=\"fas fa-clock\"></i>\r\n <span style=\"font-size: 14px;\">{{ displayTime }}</span>\r\n</button>\r\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { LogoViewMode } from '../../enums/logo-view-mode.enum';\r\nimport { HeaderViewMode } from '../../enums/header-view-mode.enum';\r\nimport { SignInType } from '../../enums/sign-in-type.enum';\r\nimport { ButtonType } from '../../enums/button-type.enum';\r\nimport { DividerMode } from '../../enums/divider-mode.enum';\r\nimport { DividerAxis } from '../../enums/divider-axis.enum';\r\nimport { DividerDensity } from '../../enums/divider-density.enum';\r\nimport { DividerType } from '../../enums/divider-type.enum';\r\nimport { Router } from '@angular/router';\r\nimport { TimerType } from '../../enums/timer-type.enum';\r\nimport { SignInMode } from '../../enums/sign-in-mode.enum';\r\n\r\n@Component({\r\n selector: 'cfc-header',\r\n templateUrl: './header.component.html',\r\n styleUrl: './header.component.scss'\r\n})\r\nexport class HeaderComponent {\r\n\r\n @Input() viewMode: HeaderViewMode = HeaderViewMode.default;\r\n @Input() hasMenu = true;\r\n // logo\r\n @Input() hasLogo = true;\r\n @Input() logoViewMode: LogoViewMode = LogoViewMode.default;\r\n @Input() logoUrl: string = '';\r\n // title and description\r\n @Input() title!: string;\r\n @Input() description?: string;\r\n // timer\r\n @Input() hasTimer = false;\r\n @Input() timeLogout = 1800;\r\n @Input() timeCritical = 300;\r\n // action bar\r\n @Input() hasNotificationIcon = true;\r\n @Input() userName = 'Entrar';\r\n @Input() signinMode: SignInMode = SignInMode.logout;\r\n\r\n @Output() menuEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() criticalTimeEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() timeOutEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() timeEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() notificationIconEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() signinEvent: EventEmitter<void> = new EventEmitter<void>;\r\n @Output() logoutEvent: EventEmitter<void> = new EventEmitter<void>;\r\n\r\n readonly headerViewModes = HeaderViewMode;\r\n readonly logoViewModes = LogoViewMode;\r\n readonly dividerModes = DividerMode;\r\n readonly dividerTypes = DividerType;\r\n readonly dividerDensities = DividerDensity;\r\n readonly dividerAxis = DividerAxis;\r\n readonly signinTypes = SignInType;\r\n readonly signinModes = SignInMode;\r\n readonly buttonTypes = ButtonType;\r\n readonly timerTypes = TimerType;\r\n\r\n logoIsClickable = false;\r\n\r\n get firstAndLastName(): string {\r\n const splitedName = this.userName.trim().split(' ');\r\n if (splitedName.length === 1) {\r\n return splitedName[0];\r\n } else {\r\n return `${splitedName[0]} ${splitedName[splitedName.length - 1]}`;\r\n }\r\n }\r\n\r\n constructor(private router: Router) { }\r\n\r\n ngOnInit(): void {\r\n this.logoIsClickable = this.router.url === '/';\r\n }\r\n\r\n toggleMenu(): void {\r\n this.menuEvent.emit();\r\n }\r\n\r\n goToHome(): void {\r\n if (this.router.url !== '/') {\r\n this.router.navigate(['/']);\r\n }\r\n }\r\n\r\n}\r\n","<header\r\n class=\"cfc-header\"\r\n [ngStyle]=\"{ 'background-color': viewMode === headerViewModes.default\r\n ? 'white'\r\n : '#0C326F'\r\n }\"\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"space-between center\">\r\n <div\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"1rem\">\r\n\r\n \r\n <cfc-button\r\n *ngIf=\"hasMenu\"\r\n [icon]=\"'bars'\"\r\n [type]=\"buttonTypes.tertiary\"\r\n [circle]=\"true\"\r\n [inverted]=\"viewMode === headerViewModes.contrast\"\r\n aria-label=\"menu\"\r\n data-toggle=\"menu\"\r\n data-target=\"#menu-aside\"\r\n is-push=\"true\"\r\n id=\"push\"\r\n [attr.show-menu]=\"'true'\"\r\n (click)=\"toggleMenu()\">\r\n </cfc-button>\r\n\r\n \r\n <cfc-logo\r\n *ngIf=\"hasLogo\"\r\n [viewMode]=\"logoViewMode\"\r\n [imageUrl]=\"logoViewMode === logoViewModes.external ? logoUrl : undefined\"\r\n (clickEvent)=\"goToHome()\"\r\n ></cfc-logo>\r\n\r\n \r\n <div\r\n fxLayout=\"column\"\r\n fxLayoutAlign=\"center start\">\r\n <h4\r\n class=\"cfc-header__title\"\r\n [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? 'black' : 'white' }\">\r\n {{ title }}\r\n </h4>\r\n <p\r\n *ngIf=\"description\"\r\n class=\"cfc-header__description\"\r\n [ngStyle]=\"{ 'color': viewMode === headerViewModes.default ? '#555555' : 'white' }\">\r\n {{ description }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n \r\n <div\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"0.5rem\">\r\n\r\n <cfc-timer\r\n *ngIf=\"hasTimer\"\r\n [type]=\"viewMode === headerViewModes.default\r\n ? timerTypes.primary\r\n : timerTypes.secondary\r\n \"\r\n [initialTime]=\"timeLogout\"\r\n [criticalTime]=\"timeCritical\"\r\n [isGlobal]=\"tr